/* ============================================================
   Show Works by TSA - interim site
   Art direction: editorial craft house. Bold display type on warm
   light paper, one dark hover-reveal "divisions" moment, airy bento,
   pinned horizontal gallery, kinetic credits marquee. Arch-gradient
   (sampled from the logo) is the moving throughline.
   Display: Bricolage Grotesque (stands in for Supria Sans until the
   brand woff2 lands). Body: Hanken Grotesk. Accent: Fraunces italic.
   ============================================================ */

:root{
  --paper:#f4f1e9;          /* warm editorial paper */
  --paper-2:#ece8dd;        /* slightly deeper */
  --card:#ffffff;
  --ink:#17150f;            /* warm near-black */
  --ink-2:#3a372f;
  --muted:#6f6b60;
  --line:#ddd8ca;

  --g1:#d2de1e; --g2:#a8c678; --g3:#78b4ae; --g4:#24a8de;
  --arch:linear-gradient(100deg,var(--g1),var(--g2) 36%,var(--g3) 66%,var(--g4));
  --accent:#1f7a6b; --accent-deep:#155e52;
  --dark:#11140f;          /* deep ink-green for the dark section + footer */
  --dark-2:#191d16;
  --tsa:#fa9418;

  --display:'Bricolage Grotesque','Supria Sans',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;

  --wrap:1280px;
  --gap:clamp(16px,2vw,26px);
  --ease:cubic-bezier(.16,1,.3,1);

  interpolate-size:allow-keywords; /* lets block-size animate to/from auto (faq slide); ignored where unsupported */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* faint grain for craft texture */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--g3); color:#08110d}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:.98; letter-spacing:-.025em; margin:0}
.display{font-size:clamp(2.6rem,8vw,8.5rem); font-weight:800; letter-spacing:-.04em; line-height:.9}
h2{font-size:clamp(2rem,4.6vw,4rem)}
h3{font-size:clamp(1.3rem,1.8vw,1.7rem); letter-spacing:-.015em}
p{margin:0 0 1.1rem}
.lead{font-size:clamp(1.1rem,1.55vw,1.4rem); line-height:1.5; color:var(--ink-2)}
.eyebrow{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.05rem;
  color:var(--accent); letter-spacing:.01em}
.tag{font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted)}
.grad-text{background:var(--arch); -webkit-background-clip:text; background-clip:text; color:transparent}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
section{position:relative; padding:clamp(72px,11vw,150px) 0}
.serif-i{font-family:var(--serif); font-style:italic; font-weight:400}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.6em; font-family:var(--display); font-weight:600;
  font-size:1rem; padding:1em 1.7em; border-radius:100px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .4s var(--ease), background .3s, color .3s, box-shadow .4s; will-change:transform}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.btn-line{background:transparent; border-color:var(--ink); color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--paper); transform:translateY(-3px)}
.btn-ondark{background:transparent; border-color:rgba(255,255,255,.35); color:#fff}
.btn-ondark:hover{background:#fff; color:var(--dark); transform:translateY(-3px)}

/* ---------- header ---------- */
.site-header{position:fixed; top:0; left:0; right:0; z-index:80; transition:background .4s, box-shadow .4s, padding .4s;
  padding:18px 0}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px}
.site-header.solid{background:rgba(244,241,233,.82); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line); padding:12px 0}
.brand{flex:0 0 auto}                       /* lock the logo - never let flex shrink/squish its proportions */
.brand img{height:60px; width:auto; transition:height .4s}
.site-header.solid .brand img{height:46px}
.nav{display:flex; align-items:center; gap:clamp(18px,2vw,34px); flex-wrap:nowrap}
.nav a{font-family:var(--display); font-weight:500; font-size:.96rem; position:relative; padding:3px 0; color:var(--ink); white-space:nowrap}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px; background:var(--arch); transition:right .35s var(--ease)}
.nav a:hover::after{right:0}
.header-cta{display:flex; align-items:center; gap:18px; flex:0 0 auto}
.header-phone{font-family:var(--display); font-weight:600; font-size:.95rem; white-space:nowrap}
.header-cta .header-phone{display:inline-flex; align-items:center; color:var(--ink)}
.header-cta .header-phone svg{display:block}
.header-cta .header-phone:hover{color:var(--accent)}
.menu-btn{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:6px}

/* ---------- nav dropdowns (desktop, CSS-only) ---------- */
.nav .has-dd{position:relative; display:inline-flex; align-items:center}
.nav .has-dd>a{display:inline-flex; align-items:center}
.nav .cv{display:inline-block; width:0; height:0; margin-left:6px;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor;
  opacity:.5; transition:transform .3s var(--ease), opacity .3s}
.nav .has-dd:hover .cv,.nav .has-dd:focus-within .cv{transform:rotate(180deg); opacity:.9}
.dd-menu{position:absolute; top:100%; left:-14px; min-width:248px; margin-top:14px;
  background:rgba(244,241,233,.97); backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 26px 54px -28px rgba(0,0,0,.42);
  padding:10px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.32s var(--ease); z-index:90}
.dd-menu::before{content:""; position:absolute; top:-16px; left:0; right:0; height:16px}
.nav .has-dd:hover .dd-menu,.nav .has-dd:focus-within .dd-menu{opacity:1; visibility:visible; transform:none}
.dd-menu a{padding:10px 14px; border-radius:9px; font-family:var(--display); font-weight:500;
  font-size:.94rem; color:var(--ink); white-space:nowrap; transition:background .2s, color .2s}
.dd-menu a::after{display:none !important}
.dd-menu a:hover{background:var(--paper-2); color:var(--accent)}

/* ---------- mobile drawer groups (native details) ---------- */
.drawer details{border-bottom:1px solid rgba(255,255,255,.1)}
.drawer summary{list-style:none; cursor:pointer; color:#fff; font-family:var(--display); font-weight:600;
  font-size:1.4rem; padding:16px 0; display:flex; align-items:center; justify-content:space-between}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:""; width:9px; height:9px; margin-right:4px;
  border-right:2px solid rgba(255,255,255,.55); border-bottom:2px solid rgba(255,255,255,.55);
  transform:rotate(45deg); transition:transform .3s var(--ease)}
.drawer details[open] summary::after{transform:rotate(-135deg)}
.drawer details a{display:block; font-size:1.02rem; font-weight:500; color:rgba(255,255,255,.72);
  padding:11px 0 11px 16px; border-bottom:0}
.drawer details a:last-of-type{padding-bottom:18px}

/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; align-items:flex-end; padding-bottom:clamp(40px,6vw,90px);
  padding-top:140px; overflow:hidden; position:relative}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-svg{width:100%; height:100%}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero-grid{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end}
.hero-h{max-width:14ch}
.hero h1{font-size:clamp(3.2rem,12vw,11rem); font-weight:800; letter-spacing:-.05em; line-height:.86}
.hero h1 .l2{display:block}
.hero h1 em{font-family:var(--serif); font-style:italic; font-weight:300; letter-spacing:-.02em}
.hero-meta{display:flex; flex-direction:column; gap:22px; max-width:330px; padding-bottom:12px}
.hero-meta .lead{margin:0}
.hero-figure{position:relative; width:min(30vw,360px); aspect-ratio:3/4; border-radius:6px; overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.hero-figure img{width:100%; height:100%; object-fit:cover}
.hero-figure .hslide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease)}
.hero-figure .hslide.show{opacity:1}
.hero-figure .hcount{position:absolute; left:14px; bottom:12px; z-index:3; font-family:var(--display);
  font-weight:600; font-size:.74rem; letter-spacing:.16em; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* hero 3D cylinder carousel (apechain-style, vertical axis) */
.hero-cyl{width:min(52vw,640px); height:clamp(280px,30vw,380px); position:relative; align-self:end; transform:translate(228px,-244px)}
.cyl-stage{position:absolute; inset:0; perspective:760px; perspective-origin:50% 42%; overflow:visible}
.cyl{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform}
.cyl-card{position:absolute; top:50%; left:50%; width:clamp(140px,15vw,185px); aspect-ratio:3/4;
  border-radius:12px; overflow:hidden; box-shadow:0 34px 64px -26px rgba(0,0,0,.62); backface-visibility:hidden}
.cyl-card img{width:100%; height:100%; object-fit:cover}
.hero-eyebrow{margin-bottom:24px; display:flex; align-items:center; gap:14px}
.hero-eyebrow .ln{height:1px; width:60px; background:var(--ink); opacity:.3}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:8px}
.scroll-cue .dot{width:1px; height:34px; background:linear-gradient(var(--ink),transparent); animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* letter reveal + flowing arch lines */
.word{display:inline-block; white-space:nowrap}
.ltr{display:inline-block; opacity:0; transform:translateY(.9em) rotate(3deg);
  animation:rise .8s var(--ease) both}
@keyframes rise{to{opacity:1; transform:none}}
@keyframes dashflow{0%{stroke-dashoffset:1; stroke-opacity:calc(var(--op)*.5)}50%{stroke-opacity:var(--op)}100%{stroke-dashoffset:0; stroke-opacity:calc(var(--op)*.5)}}

/* ---------- scroll reveal utility ---------- */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.line-mask{overflow:hidden}
.line-mask>span{display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease)}
.line-mask.in>span{transform:none}

/* ---------- section heading block ---------- */
.head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(40px,6vw,80px)}
.head .tag{margin-bottom:18px; display:block}
.head h2{max-width:14ch}
.head .head-r{padding-bottom:8px}

/* ---------- manifesto + stats ---------- */
.manifesto p{font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,3.6vw,3.1rem);
  line-height:1.12; letter-spacing:-.02em; max-width:18ch}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:clamp(48px,7vw,90px);
  border-top:1px solid var(--line); padding-top:40px}
.stat .n{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,5vw,4.2rem); letter-spacing:-.04em; line-height:1}
.stat .n .grad-text{display:inline}
.stat .n.n--au{display:inline-flex; align-items:flex-start; gap:10px}
.stat .au-stars{width:clamp(34px,4vw,56px); height:auto; flex:none; margin-top:.12em}
.stat .k{font-size:.92rem; color:var(--muted); margin-top:8px}

/* ---------- divisions (dark hover-reveal) ---------- */
.divisions{background:var(--dark); color:#fff}
.divisions .tag{color:rgba(255,255,255,.55)}
.divisions h2{color:#fff}
.div-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,70px); align-items:start}
.div-list{display:flex; flex-direction:column}
.div-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
  padding:clamp(22px,3vw,40px) 0; border-top:1px solid rgba(255,255,255,.12); cursor:pointer; position:relative}
.div-row:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.div-row .idx{font-family:var(--serif); font-style:italic; font-size:1rem; color:rgba(255,255,255,.4)}
.div-row h3{font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,4vw,3.4rem); letter-spacing:-.03em;
  color:rgba(255,255,255,.55); transition:color .4s, transform .5s var(--ease)}
.div-row .arr{opacity:0; transform:translateX(-10px); transition:.4s var(--ease); color:var(--g2)}
.div-row.active h3,.div-row:hover h3{color:#fff; transform:translateX(10px)}
.div-row.active .arr,.div-row:hover .arr{opacity:1; transform:none}
.div-row .ex{grid-column:2; font-size:.95rem; color:rgba(255,255,255,.55); max-width:46ch;
  max-height:0; overflow:hidden; opacity:0; transition:.5s var(--ease)}
.div-row.active .ex{max-height:80px; opacity:1; margin-top:12px}
.div-media{position:sticky; top:110px; aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:var(--dark-2)}
.div-media .slide{position:absolute; inset:0; opacity:0; transform:scale(1.06); transition:opacity .7s var(--ease), transform .9s var(--ease)}
.div-media .slide.show{opacity:1; transform:scale(1)}
.div-media .slide img{width:100%; height:100%; object-fit:cover}
.div-media .slide::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%,rgba(0,0,0,.5))}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:var(--gap)}
.bento .cell{background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  position:relative; min-height:150px; display:flex}
.bento .cell.img{padding:0}
.bento .cell.img img{width:100%; height:100%; object-fit:cover}
.bento .pad{padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; justify-content:space-between; width:100%}
.cell-a{grid-column:span 2; grid-row:span 2}
.cell-b{grid-column:span 2}
.cell-c{grid-column:span 1; grid-row:span 2}
.cell-wide{grid-column:span 2}
.bento h3{margin-bottom:10px}
.bento .big{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,3.6vw,3.4rem); letter-spacing:-.03em; line-height:1}
.bento .muted{color:var(--muted); font-size:.96rem; margin:0}
.cell.dark{background:var(--dark); color:#fff; border-color:transparent}
.cell.grad{background:var(--arch); color:#08110d; border:0}
.cell.grad .big,.cell.grad p{color:#08110d}
.cell .ov{position:absolute; left:0; right:0; bottom:0; padding:24px; color:#fff; z-index:2;
  background:linear-gradient(transparent,rgba(0,0,0,.7))}
.cell.img img{transition:transform .8s var(--ease)}
.cell.img:hover img{transform:scale(1.05)}

/* ---------- gallery (horizontal) ---------- */
.gallery{padding-top:clamp(40px,6vw,80px)}
.gal-track-wrap{overflow:hidden}
.gal-track{display:flex; gap:var(--gap); padding:0 clamp(20px,5vw,56px); will-change:transform}
.gal-item{flex:0 0 auto; width:min(46vw,560px); border-radius:8px; overflow:hidden; position:relative; background:var(--paper-2)}
.gal-item img{width:100%; height:clamp(300px,52vh,560px); object-fit:cover}
.gal-item .cap{position:absolute; left:18px; bottom:16px; color:#fff; font-family:var(--display); font-weight:600;
  font-size:1rem; z-index:2; text-shadow:0 2px 12px rgba(0,0,0,.5)}
.gal-item.tall{width:min(34vw,420px)}
@media(min-width:1000px){ .gal-track{ padding-left:max((100vw - var(--wrap))/2 + 56px, 56px) } }
/* static project gallery grid (no GSAP pin) */
.gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--gap)}
.gal-grid .gal-item{width:auto}
.gal-grid .gal-item img{height:clamp(220px,30vh,340px)}
@media(max-width:560px){ .gal-grid{grid-template-columns:1fr} }

/* ---------- zoom-parallax + scroll-through gallery (.gal-zoom) ---------- */
/* Default (no JS / mobile / reduced-motion): cluster hidden, strip = static grid. */
.gal-zoom{padding-top:0}
.gz-stage{position:relative}
.gz-cluster{display:none}
.gz-strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--gap); padding:0 clamp(20px,5vw,56px)}
.gz-shot{position:relative; border-radius:8px; overflow:hidden; background:var(--paper-2)}
.gz-shot img{width:100%; height:clamp(220px,30vh,340px); object-fit:cover; display:block}
.gz-shot .cap{position:absolute; left:18px; bottom:16px; color:#fff; font-family:var(--display); font-weight:600;
  font-size:1rem; z-index:2; text-shadow:0 2px 12px rgba(0,0,0,.5)}
/* JS-enabled pinned stage (site.js adds .is-zoom on desktop). Paper bg so framed cards float on paper. */
.gal-zoom.is-zoom .gz-stage{height:100vh; overflow:hidden; background:var(--paper)}
.gal-zoom.is-zoom .gz-cluster{display:block; position:absolute; inset:0; z-index:2; will-change:transform}
.gal-zoom.is-zoom .gz-cell{position:absolute; top:50%; left:50%; overflow:hidden; border-radius:6px;
  transform:translate(-50%,-50%); will-change:transform; box-shadow:0 30px 70px -34px rgba(0,0,0,.5)}
.gal-zoom.is-zoom .gz-cell img{width:100%; height:100%; object-fit:cover}
.gal-zoom.is-zoom .gz-hero{width:min(38vw,440px); aspect-ratio:16/10; z-index:3}
.gal-zoom.is-zoom .gz-cluster .cap{display:none} /* captions belong to the strip cards, not the cluster */
.gal-zoom.is-zoom .gz-sat{width:var(--w,20vw); height:var(--h,25vh);
  transform:translate(-50%,-50%) translate(var(--l,0),var(--t,0))}
/* strip layer: filmstrip of CENTERED framed cards (~56vh, not full-bleed) - keep 56vh in sync with FRAME_H in site.js */
.gal-zoom.is-zoom .gz-strip{display:flex; gap:clamp(40px,6vw,90px); position:absolute; inset:0; z-index:1;
  height:100vh; align-items:center; will-change:transform; opacity:0; visibility:hidden;
  padding:0 calc(50vw - 44.8vh)} /* 44.8vh = (56vh card * 16/10) / 2 -> first + last card sit centred */
.gal-zoom.is-zoom .gz-frame{flex:0 0 auto; height:100vh; display:flex; align-items:center}
.gal-zoom.is-zoom .gz-shot{height:56vh; aspect-ratio:16/10; width:auto; max-width:64vw; background:var(--paper-2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.gal-zoom.is-zoom .gz-shot img{width:100%; height:100%; object-fit:cover}
/* mobile + reduced-motion: neutralise the pinned stage back to a static grid of cards */
@media(max-width:760px){
  .gal-zoom.is-zoom .gz-stage{height:auto; overflow:visible; background:none}
  .gal-zoom.is-zoom .gz-cluster{display:none}
  .gal-zoom.is-zoom .gz-strip{position:static; display:grid; grid-template-columns:1fr; gap:var(--gap);
    height:auto; opacity:1; visibility:visible; padding:0 16px; transform:none !important}
  .gal-zoom.is-zoom .gz-frame{flex:none; height:auto; display:block}
  .gal-zoom.is-zoom .gz-shot{height:auto; aspect-ratio:auto; width:auto; max-width:none}
  .gal-zoom.is-zoom .gz-shot img{height:clamp(260px,46vh,420px)}
}
@media(prefers-reduced-motion:reduce){
  .gal-zoom.is-zoom .gz-stage{height:auto; overflow:visible; background:none}
  .gal-zoom.is-zoom .gz-cluster{display:none}
  .gal-zoom.is-zoom .gz-strip{position:static; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:var(--gap); height:auto; opacity:1; visibility:visible; transform:none !important}
  .gal-zoom.is-zoom .gz-frame{flex:none; height:auto; display:block}
  .gal-zoom.is-zoom .gz-shot{height:auto; aspect-ratio:auto; width:auto; max-width:none}
  .gal-zoom.is-zoom .gz-shot img{height:clamp(220px,30vh,340px)}
}

/* ---- enriched bench cards: hover-revealed info + see-all + mobile swipe ---- */
.gal-item .gal-meta{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:3px; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.28) 32%, rgba(0,0,0,.84))}
.gal-item .gal-meta .cap{position:static; left:auto; bottom:auto}
.gal-item .gal-loc{font-family:var(--body); font-weight:500; font-size:.82rem; color:rgba(255,255,255,.8)}
.gal-item .gal-blurb{margin:7px 0 0; font-size:.92rem; line-height:1.45; color:rgba(255,255,255,.92); max-width:42ch}
.gal-item .gal-cta{margin-top:9px; font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--g2)}
/* see-all card (no image) */
.gal-item.gal-all{display:flex; align-items:center; justify-content:center; text-align:center;
  width:min(34vw,420px); min-height:clamp(300px,52vh,560px); background:var(--dark); color:#fff}
.gal-item.gal-all .gal-all-in{display:flex; flex-direction:column; gap:10px; padding:24px}
.gal-item.gal-all .cap{position:static; font-size:1.5rem; line-height:1.12}
.gal-item.gal-all .gal-cta{margin:0; font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--g2)}
/* hover reveal - fine-pointer devices only (touch taps straight through to the page) */
@media(hover:hover){
  .gal-item img{transition:transform .7s var(--ease)}
  .gal-item:hover img{transform:scale(1.05)}
  .gal-item .gal-blurb,.gal-item .gal-cta{opacity:0; max-height:0; transform:translateY(8px); overflow:hidden;
    transition:opacity .4s var(--ease), transform .4s var(--ease), max-height .45s var(--ease)}
  .gal-item:hover .gal-blurb,.gal-item:hover .gal-cta{opacity:1; max-height:160px; transform:none}
  .gal-item.gal-all .gal-cta{opacity:1; max-height:none}
}
/* mobile: native side-swipe (GSAP pin is desktop-only at >760, so no conflict) */
@media(max-width:760px){
  .gal-track-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none}
  .gal-track-wrap::-webkit-scrollbar{display:none}
  .gal-track{padding:0 16px}
  .gal-item, .gal-item.tall{width:80vw; scroll-snap-align:center}
  .gal-item img{height:clamp(260px,46vh,420px)}
  .gal-item.gal-all{width:80vw; min-height:clamp(260px,46vh,420px)}
  .gal-item .gal-blurb{display:none}
}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(20px,3vw,34px) 0; overflow:hidden; background:var(--paper-2)}
.marquee-row{display:flex; gap:0; white-space:nowrap; width:max-content; animation:march 34s linear infinite}
.marquee:hover .marquee-row{animation-play-state:paused}
.marquee-row span{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3vw,2.6rem); letter-spacing:-.02em;
  padding:0 .5em; color:var(--ink); display:inline-flex; align-items:center; gap:.6em}
.marquee-row span::after{content:"✳"; font-size:.5em; color:var(--accent)}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------- trust band ---------- */
.trust{text-align:center}
.trust .label{margin-bottom:38px}
.trust-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(34px,5vw,70px)}
.trust-row img{height:34px; width:auto; opacity:.5; filter:grayscale(1); transition:opacity .3s}
.trust-row img.tall{height:50px}
.trust-row img:hover{opacity:.95}

/* ---------- cta ---------- */
.cta{background:var(--dark); color:#fff; text-align:center; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; opacity:.2; background:radial-gradient(60% 130% at 50% 110%, var(--g3), transparent 60%)}
.cta .wrap{position:relative}
.cta h2{font-size:clamp(2.4rem,6vw,5.5rem); font-weight:800; color:#fff; max-width:16ch; margin:0 auto 1.4rem}
.cta p{color:rgba(255,255,255,.75); max-width:46ch; margin:0 auto 2.2rem}

/* ---------- footer ---------- */
.site-footer{background:var(--dark); color:rgba(255,255,255,.62); padding:80px 0 40px}
.foot-cta{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot-lead{font-family:var(--display); color:#fff; font-weight:800; line-height:1.03; letter-spacing:-.015em; font-size:clamp(2rem,4.4vw,3.4rem); margin:0 0 14px}
.foot-invite{max-width:42ch; margin:0 0 26px; line-height:1.55}
/* solid brand-glyph socials grouped under a logo (footer foot-cta + contact page) */
.sw-socials{display:flex; gap:clamp(22px,3vw,40px); align-items:flex-start; flex-wrap:wrap}
.sw-sgroup{display:flex; flex-direction:column; align-items:flex-start; gap:15px}
.sw-sgroup + .sw-sgroup{padding-left:clamp(20px,3vw,36px); border-left:1px solid rgba(255,255,255,.16)}
.sw-slogo{width:auto; display:block; opacity:.96}
.sw-slogo.sw{height:38px}
.sw-slogo.tsa{height:33px}
.sw-sicons{display:flex; align-items:center; gap:18px}
.social-solid{display:inline-flex; color:rgba(255,255,255,.85); transition:color .25s var(--ease), transform .25s var(--ease)}
.social-solid svg{height:25px; width:auto; display:block; fill:currentColor}
.social-solid:hover{color:var(--g2); transform:translateY(-2px)}
.contact-info .sw-socials{margin-top:clamp(32px,4vw,46px)}
.foot-consent{margin-top:-2px}
.foot-consent a{text-decoration:underline; text-underline-offset:2px}
.site-footer .top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:46px; padding:48px 0; border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:681px) and (max-width:1000px){ .site-footer .top{grid-template-columns:1fr 1fr; gap:32px} }
.foot-cookie-link{background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left}
.foot-cookie-link:hover{color:#fff}
.site-footer img.flogo{height:42px; margin-bottom:22px}
.site-footer h4{font-family:var(--display); color:#fff; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px}
.site-footer a:hover{color:#fff}
.site-footer .loc{margin-bottom:13px; line-height:1.5}
.site-footer .loc strong{color:#fff; font-weight:600}
.site-footer .bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:26px; font-size:.85rem}
.tsa-tie b{color:var(--tsa)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .head{grid-template-columns:1fr; gap:18px}
  .div-wrap{grid-template-columns:1fr}
  .div-media{display:none}
  .div-row{grid-template-columns:auto 1fr; padding:26px 0}
  .div-row .ex{max-height:none; opacity:1; margin-top:10px}
  .div-row h3{color:#fff}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell-a,.cell-b,.cell-c,.cell-wide{grid-column:span 2; grid-row:auto}
  .stats{grid-template-columns:repeat(2,1fr); gap:30px}
  .hero-figure{display:none}
  .hero-cyl{width:100%; max-width:440px; height:clamp(300px,82vw,380px); margin:10px auto 0; transform:none}
  .hero-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  /* collapse to the existing hamburger drawer before the row gets cramped.
     .header-cta .header-phone (not bare .header-phone) so it out-specifies the icon rule above */
  .nav,.header-cta .header-phone{display:none}
  .menu-btn{display:block}
  .header-cta{margin-left:auto}   /* nav gone here - group the button by the hamburger instead of stranding it mid-header */
}
@media(max-width:600px){
  /* phones: the drawer carries nav + contact + phone, so drop the header CTA
     and keep just logo + hamburger - otherwise the button shoves the hamburger off-screen */
  .header-cta{display:none}
}
@media(max-width:680px){
  .brand img{height:44px}
  .bento{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .gal-item{width:78vw}
  .foot-cta{grid-template-columns:1fr; gap:34px}
  .site-footer .top{grid-template-columns:1fr}
  .sw-socials{flex-direction:column; gap:22px}
  .sw-sgroup + .sw-sgroup{padding:20px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.14)}
}
@media(prefers-reduced-motion:reduce){
  .ltr{animation:none; opacity:1; transform:none}
  .reveal,.line-mask>span{transition:none; opacity:1; transform:none}
  .hero-svg path{animation:none !important}
  .marquee-row{animation:none}
  .scroll-cue{display:none}
}

/* mobile drawer */
.drawer{position:fixed; inset:0 0 0 auto; width:min(340px,84vw); background:var(--dark); transform:translateX(100%);
  transition:transform .4s var(--ease); z-index:90; padding:100px 34px 34px; display:flex; flex-direction:column; gap:4px}
.drawer.open{transform:none}
.drawer a{color:#fff; font-family:var(--display); font-weight:600; font-size:1.4rem; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.drawer .header-phone{display:block; margin-top:20px; color:rgba(255,255,255,.7)}
.scrim{position:fixed; inset:0; background:rgba(8,12,9,.55); opacity:0; pointer-events:none; transition:opacity .4s; z-index:85}
.scrim.open{opacity:1; pointer-events:auto}

/* ============ inner pages ============ */
.page-hero{padding-top:clamp(150px,18vh,210px); padding-bottom:clamp(34px,5vw,60px); position:relative; overflow:hidden}
.page-hero .hero-bg{position:absolute; inset:0; z-index:0; opacity:.9}
.page-hero .wrap{position:relative; z-index:2}
.page-hero .eyebrow{display:block; margin-bottom:20px}
.page-hero h1{font-size:clamp(2.7rem,8.5vw,7.5rem); font-weight:800; letter-spacing:-.045em; line-height:.9; max-width:15ch}
.page-hero h1 em{font-family:var(--serif); font-style:italic; font-weight:300}
.page-hero .lead{max-width:60ch; margin-top:28px}
.page-hero .ph-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
.ph-figure{margin-top:clamp(34px,5vw,60px); border-radius:10px; overflow:hidden; aspect-ratio:16/7; box-shadow:var(--shadow,0 30px 70px -34px rgba(0,0,0,.4))}
.ph-figure img{width:100%; height:100%; object-fit:cover}

/* inner-page hero = homepage carousel hero, reduced height (no 100svh).
   Height comes from .page-hero's own padding above; the carousel sits in the
   right column instead of the old full-width banner photo. */
.page-hero .hero-grid{align-items:center; gap:clamp(24px,4vw,56px)}
.page-hero .ph-copy{min-width:0}
.page-hero .hero-grid h1{font-size:clamp(2.6rem,6vw,5.2rem); max-width:15ch}
.page-hero .ph-copy .lead{max-width:46ch}
/* desktop carousel sizing - override the homepage's full-height pop-out (transform/dims at .hero-cyl) */
@media(min-width:1001px){
  .page-hero .hero-cyl{width:min(42vw,460px); height:clamp(250px,26vw,320px); transform:none; align-self:center}
  .page-hero .cyl-card{width:clamp(120px,12vw,150px)}
}

.products{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.prod-card{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s}
.prod-card:hover{transform:translateY(-6px); box-shadow:0 26px 54px -30px rgba(0,0,0,.42)}
.prod-card .ph{aspect-ratio:4/3; overflow:hidden; background:var(--paper-2)}
.prod-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.prod-card:hover .ph img{transform:scale(1.06)}
.prod-card .b{padding:24px 24px 28px; display:flex; flex-direction:column; gap:9px; flex:1}
.prod-card .tagx{font-family:var(--serif); font-style:italic; color:var(--accent); font-size:.95rem}
.prod-card h3{font-size:1.3rem}
.prod-card p{color:var(--muted); font-size:.95rem; margin:0}

.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,48px)}
.pillar{border-top:2px solid var(--ink); padding-top:22px}
.pillar .num{font-family:var(--serif); font-style:italic; color:var(--accent); font-size:1rem; margin-bottom:8px}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--muted); margin:0}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:center}
.split.flip .sp-media{order:2}
.split .sp-media{border-radius:10px; overflow:hidden; box-shadow:0 30px 70px -34px rgba(0,0,0,.4)}
.split .sp-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.split .kicker{display:inline-block; height:3px; width:54px; background:var(--arch); border-radius:3px; margin-bottom:22px}

/* ---------- spec table (product specs-at-a-glance) ---------- */
.spec-table{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.spec-table .row{display:grid; grid-template-columns:minmax(150px,.42fr) 1fr; gap:clamp(18px,3vw,40px);
  padding:clamp(16px,2vw,22px) clamp(20px,2.4vw,34px); border-top:1px solid var(--line)}
.spec-table .row:first-child{border-top:0}
.spec-table .k{font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding-top:2px}
.spec-table .v{color:var(--ink-2); font-size:1.02rem; line-height:1.5}
.spec-table .v strong{font-weight:600; color:var(--ink)}

/* spec table — dark statement variant (dance-equipment "The specification.") */
.spec-table.statement{position:relative; background:var(--dark); border:0;
  padding:clamp(8px,1vw,14px) 0; box-shadow:0 30px 70px -42px rgba(0,0,0,.55)}
.spec-table.statement::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--arch)}
.spec-table.statement .row{padding:clamp(16px,2vw,22px) clamp(22px,2.6vw,38px);
  border-top:1px solid rgba(255,255,255,.12); transition:background .35s var(--ease)}
.spec-table.statement .row:first-child{border-top:0}
.spec-table.statement .row:hover{background:rgba(255,255,255,.04)}
.spec-table.statement .k{letter-spacing:.16em; color:rgba(255,255,255,.52); padding-top:3px}
.spec-table.statement .v{color:rgba(255,255,255,.86); line-height:1.55}
.spec-table.statement .v strong{color:#fff}
@media(max-width:600px){
  .spec-table.statement .row{gap:7px; padding:18px 22px}
  .spec-table.statement .k{color:var(--g2)}
}

/* ---------- faq accordion (native <details>, numbered editorial style, no JS) ---------- */
.faq{max-width:62rem; counter-reset:faq}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{position:relative; list-style:none; cursor:pointer; padding:clamp(20px,2.6vw,30px) 0; display:flex;
  align-items:center; justify-content:flex-start; gap:clamp(14px,1.6vw,22px); font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem,1.7vw,1.45rem); letter-spacing:-.01em; color:var(--ink); transition:color .3s var(--ease)}
.faq summary:hover{color:var(--accent)}
.faq details[open] summary{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
/* number chip - auto-numbered via CSS counter, fills with accent when open */
.faq summary::before{counter-increment:faq; content:counter(faq,decimal-leading-zero); flex:none;
  display:grid; place-content:center; width:2.4em; height:2.4em; border-radius:50%; border:1px solid var(--line);
  font-size:.7em; font-weight:700; letter-spacing:.02em; color:var(--muted);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease)}
.faq details[open] summary::before{background:var(--accent); border-color:var(--accent); color:var(--paper)}
/* plus -> x icon */
.faq summary .ic{flex:none; margin-left:auto; width:24px; height:24px; position:relative; transition:transform .4s var(--ease)}
.faq summary .ic::before,.faq summary .ic::after{content:""; position:absolute; background:var(--accent); border-radius:2px}
.faq summary .ic::before{top:11px; left:2px; right:2px; height:2px}
.faq summary .ic::after{left:11px; top:2px; bottom:2px; width:2px}
.faq details[open] summary .ic{transform:rotate(45deg)}
/* wipe-in accent underline */
.faq summary::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.faq summary:hover::after{transform:scaleX(.3)}
.faq details[open] summary::after{transform:scaleX(1)}
/* answer - indented to clear the number chip */
.faq .a{padding:0 0 clamp(20px,2.6vw,30px) clamp(40px,5.5vw,62px); color:var(--ink-2); max-width:56ch}
.faq .a p{margin:0 0 .8rem} .faq .a p:last-child{margin:0}
/* smooth height slide - progressive enhancement; opens instantly where ::details-content is unsupported */
.faq details::details-content{block-size:0; overflow:hidden; opacity:0;
  transition:block-size .4s var(--ease), content-visibility .4s, opacity .3s var(--ease); transition-behavior:allow-discrete}
.faq details[open]::details-content{block-size:auto; opacity:1}
@media(max-width:600px){.spec-table .row{grid-template-columns:1fr; gap:4px}}

/* capability chips + "by TSA" brand tie (About > Find out more) */
.cap-chips{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 30px}
.cap-chips .chip{font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.01em;
  padding:.5em 1em; border:1.5px solid var(--line); border-radius:100px; color:var(--ink-2); background:var(--card)}
.brand-tie{display:inline-flex; align-items:center; font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.02em; padding:.55em 1.05em; border-radius:100px; background:var(--arch); color:#08110d}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px)}
.contact-info .row{padding:22px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.contact-info .row .k{font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px}
.contact-info .row .v{font-size:1.35rem; font-family:var(--display); font-weight:600; color:#fff; line-height:1.3}
.contact-info .row .v a:hover{color:var(--g2)}
.form{display:grid; gap:16px}
.form .f{display:flex; flex-direction:column; gap:7px}
.form label{font-size:.84rem; font-weight:600; color:rgba(255,255,255,.7)}
.form input,.form textarea{font-family:var(--body); font-size:1rem; padding:14px 16px; border:1.5px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.05); color:#fff}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.4)}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--g2)}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form .note{font-size:.82rem; color:rgba(255,255,255,.45)}
.contact{background:var(--dark); color:#fff}
.contact .tag{color:rgba(255,255,255,.5)} .contact h2{color:#fff}

@media(max-width:900px){.products{grid-template-columns:repeat(2,1fr)} .contact-grid{grid-template-columns:1fr} .pillars{grid-template-columns:1fr} .split{grid-template-columns:1fr} .split.flip .sp-media{order:0}}
@media(max-width:600px){.products{grid-template-columns:1fr} .form .two{grid-template-columns:1fr}}

/* ============================================================
   LEGAL / UTILITY PAGES  —  Cookie, Privacy, Terms, Disclaimer.
   Flat document layout on warm paper. Reuses the .page-hero chassis
   for the hero; body styled below. Classes prefixed .legal-.
   ============================================================ */
.legal-wrap{max-width:880px}
.legal-body{color:var(--ink-2)}
.legal-body > p:first-child{font-size:1.12rem; line-height:1.6; color:var(--ink)}
.legal-body h2{font-family:var(--display); font-weight:700; font-size:clamp(1.35rem,2.4vw,1.9rem);
  letter-spacing:-.018em; line-height:1.08; color:var(--ink);
  margin:46px 0 14px; padding-top:30px; border-top:1px solid var(--line)}
.legal-body h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal-body p{font-size:1rem; line-height:1.7; margin:0 0 14px}
.legal-body strong{color:var(--ink); font-weight:600}
.legal-body a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.legal-body a:hover{color:var(--accent-deep)}
.legal-body ul{margin:0 0 14px; padding-left:22px}
.legal-body li{font-size:1rem; line-height:1.7; margin:0 0 8px}
.legal-body .clause-indent{padding-left:24px}
.legal-body blockquote{margin:0 0 14px; padding:14px 20px; background:var(--paper-2);
  border-left:3px solid var(--accent); border-radius:0 12px 12px 0}
.legal-body blockquote p{margin:0}
.legal-meta{font-size:.85rem; color:var(--muted); margin:0 0 18px}
.legal-entities{font-size:.92rem; line-height:1.6; color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin:0 0 28px}
.legal-contact{font-size:1rem; line-height:1.95; margin:6px 0 0}
.legal-contact a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.legal-note{background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; font-size:.95rem; margin:0 0 14px}

/* cookie / spec table */
.legal-table-wrap{overflow-x:auto; margin:0 0 18px}
.legal-table{width:100%; border-collapse:collapse; font-size:.9rem}
.legal-table th,.legal-table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.legal-table th{font-family:var(--display); font-weight:600; color:var(--ink);
  text-transform:uppercase; letter-spacing:.08em; font-size:.72rem}
.legal-table td{color:var(--ink-2); line-height:1.5}
.legal-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  background:rgba(0,0,0,.05); padding:1px 6px; border-radius:4px}

.legal-manage{margin:22px 0 4px}

/* related policies */
.legal-also-inner{border-top:1px solid var(--line); margin-top:46px; padding-top:30px}
.legal-also-inner h2{font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px}
.legal-also-links{display:flex; flex-wrap:wrap; gap:12px 28px; margin:0; padding:0; list-style:none}
.legal-also-links a{color:var(--ink); font-family:var(--display); font-weight:600;
  text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:2px}
.legal-also-links a:hover{color:var(--accent)}

/* ============================================================
   COOKIE CONSENT  —  banner, preferences modal, form-gate notice.
   Built at runtime by /js/consent.js. Classes prefixed .tsa-cc-.
   Ported from the TSA site, recoloured to the Show Works teal accent
   (frosted charcoal card kept neutral for both brands).
   ============================================================ */
.tsa-cc-btn{
  font-family:'Hanken Grotesk',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px; padding:12px 22px; cursor:pointer;
  border:1px solid transparent; line-height:1;
  transition:transform 200ms var(--ease), background 200ms, color 200ms, border-color 200ms;
}
.tsa-cc-btn--primary{background:var(--accent); color:#fff}
.tsa-cc-btn--primary:hover{transform:translateY(-2px); background:#2a9d88}
.tsa-cc-btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.32)}
.tsa-cc-btn--ghost:hover{border-color:var(--g3); color:var(--g3)}
.tsa-cc-btn:focus-visible{outline:2px solid var(--g3); outline-offset:2px}
@media(max-width:820px){
  .tsa-cc-btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
}

/* ── Banner — frosted-glass card, anchored bottom-left ── */
.tsa-cc-banner{
  position:fixed; z-index:9000; padding:0;   /* override the global section{padding} - banner is a <section> */
  left:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px);
  width:min(380px,calc(100vw - 32px));
  isolation:isolate; overflow:hidden; color:#fff;
  border-radius:20px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(40,40,43,.80) 0%,rgba(24,24,26,.74) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.30), 0 32px 70px -28px rgba(0,0,0,.70);
  transform:translateX(calc(-100% - 44px)); opacity:0;
  transition:transform 560ms var(--ease), opacity 420ms var(--ease);
}
.tsa-cc-banner.is-in{transform:translateX(0); opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tsa-cc-banner{background:rgba(26,26,28,.97)}
}
.tsa-cc-banner::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:-32%; left:-18%; width:78%; height:92%;
  background:radial-gradient(ellipse 60% 60% at 30% 25%, rgba(120,180,174,.24) 0%, transparent 70%);
  filter:blur(6px);
}
.tsa-cc-banner__inner{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; padding:20px 20px 18px}
.tsa-cc-banner__copy{min-width:0}
.tsa-cc-banner__title{font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.01em; margin:0 0 5px}
.tsa-cc-banner__text{font-size:13px; line-height:1.55; color:rgba(255,255,255,.70); margin:0}
.tsa-cc-banner__text a{color:var(--g3); text-decoration:underline; text-underline-offset:2px}
.tsa-cc-actions{display:flex; flex-direction:column; gap:8px}
.tsa-cc-actions__row{display:flex; gap:8px}
.tsa-cc-actions__row .tsa-cc-btn{flex:1}

/* ── Preferences modal ── */
.tsa-cc-modal{position:fixed; inset:0; z-index:9500}
.tsa-cc-modal__backdrop{
  position:absolute; inset:0; background:rgba(15,15,15,.74);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity 300ms var(--ease);
}
.tsa-cc-modal.is-in .tsa-cc-modal__backdrop{opacity:1}
.tsa-cc-modal__panel{
  position:absolute; top:50%; left:50%;
  width:min(520px,calc(100vw - 32px)); max-height:88vh; overflow-y:auto; overflow-x:hidden;
  transform:translate(-50%,-46%); opacity:0;
  transition:transform 320ms var(--ease), opacity 320ms var(--ease);
  color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:20px;
  background:
    radial-gradient(ellipse 55% 38% at 18% 6%, rgba(120,180,174,.20) 0%, transparent 60%),
    linear-gradient(180deg,rgba(42,42,45,.86) 0%,rgba(24,24,26,.82) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.30), 0 40px 90px -24px rgba(0,0,0,.70);
  padding:clamp(26px,4vw,40px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tsa-cc-modal__panel{background:rgba(26,26,28,.98)}
}
.tsa-cc-modal.is-in .tsa-cc-modal__panel{transform:translate(-50%,-50%); opacity:1}
.tsa-cc-modal__panel:focus{outline:none}
.tsa-cc-modal__close{
  position:absolute; top:12px; right:12px; width:36px; height:36px;
  border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background 200ms, transform 250ms;
}
.tsa-cc-modal__close:hover{background:var(--accent); color:#fff; transform:rotate(90deg)}
.tsa-cc-modal__title{
  font-family:var(--display); font-weight:700; text-transform:none;
  font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; margin:0 0 10px; color:#fff;
}
.tsa-cc-modal__intro{font-size:14px; line-height:1.6; color:rgba(255,255,255,.70); margin:0 0 22px}
.tsa-cc-modal__intro a{color:var(--g3); text-decoration:underline; text-underline-offset:2px}
.tsa-cc-rows{display:grid; gap:2px; margin-bottom:24px}
.tsa-cc-row{display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.12)}
.tsa-cc-row:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.tsa-cc-row__text{min-width:0}
.tsa-cc-row__title{display:block; font-weight:700; font-size:15px; color:#fff; margin-bottom:3px}
.tsa-cc-row__desc{display:block; font-size:13px; line-height:1.5; color:rgba(255,255,255,.62)}
.tsa-cc-row__note{display:flex; align-items:baseline; gap:7px; margin-top:8px;
  font-size:12px; font-weight:700; line-height:1.45; color:var(--g3)}
.tsa-cc-row__note::before{content:''; position:relative; top:4px; flex:0 0 auto;
  width:6px; height:6px; border-radius:999px; background:var(--g3)}

/* Toggle switch */
.tsa-cc-switch{position:relative; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; cursor:pointer}
.tsa-cc-switch.is-locked{cursor:default}
.tsa-cc-switch input{position:absolute; opacity:0; width:46px; height:26px; margin:0; cursor:inherit}
.tsa-cc-switch__track{width:46px; height:26px; border-radius:999px; background:rgba(255,255,255,.20);
  position:relative; transition:background 200ms var(--ease); flex:0 0 auto}
.tsa-cc-switch__track::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:999px; background:#fff; transition:transform 200ms var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tsa-cc-switch input:checked + .tsa-cc-switch__track{background:var(--accent)}
.tsa-cc-switch input:checked + .tsa-cc-switch__track::after{transform:translateX(20px)}
.tsa-cc-switch input:focus-visible + .tsa-cc-switch__track{outline:2px solid var(--g3); outline-offset:2px}
.tsa-cc-switch.is-locked .tsa-cc-switch__track{background:var(--accent); opacity:.55}
.tsa-cc-switch__label{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.tsa-cc-modal__actions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap}

/* ── Form-gate notice (inert on Show Works) ── */
.tsa-cc-formnotice{border:1px dashed rgba(128,128,128,.4); border-radius:8px;
  padding:20px; text-align:left; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.tsa-cc-formnotice__lead{margin:0 0 12px; font-weight:700; color:var(--ink)}
.tsa-cc-formnotice__btn{margin:0 0 12px}
.tsa-cc-formnotice__alt{margin:0; font-size:12.5px; opacity:.85}
.tsa-cc-formnotice__alt a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}

/* Lock background scroll while the modal is open */
body.tsa-cc-modal-open{overflow:hidden}

/* ── Announcement toast — frosted glass, bottom-right, with the Luna
   Park head popping up from behind the card. The glass lives on an inner
   __panel so the head can sit behind it (lower z) and peek over the top
   edge without being clipped. Cookie banner is bottom-left, so no clash. */
.sw-announce{
  position:fixed; z-index:8900;
  right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px);
  width:min(360px,calc(100vw - 32px));
  isolation:isolate;
  transform:translateY(22px); opacity:0;
  transition:transform 560ms var(--ease), opacity 420ms var(--ease);
}
.sw-announce.is-in{transform:translateY(0); opacity:1}

/* the head sits behind the panel and pops up over the top edge */
.sw-announce__head{
  position:absolute; z-index:0; left:22px; top:-80px; width:142px; height:auto;
  transform:translateY(40px) scale(.84); transform-origin:50% 100%; opacity:0;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));
  transition:transform 560ms cubic-bezier(.34,1.56,.64,1) 380ms, opacity 320ms ease 380ms;
}
.sw-announce.is-in .sw-announce__head{transform:translateY(0) scale(1); opacity:1}

.sw-announce__panel{
  position:relative; z-index:1; overflow:hidden; color:#fff;
  border-radius:20px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(40,40,43,.80) 0%,rgba(24,24,26,.74) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.30), 0 32px 70px -28px rgba(0,0,0,.70);
  padding:22px 20px 18px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sw-announce__panel{background:rgba(26,26,28,.97)}
}
.sw-announce__panel::after{   /* signature arch-gradient hairline along the top */
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:var(--arch);
}
.sw-announce__panel::before{  /* teal bloom, mirrored from the cookie banner */
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:-32%; right:-18%; width:78%; height:92%;
  background:radial-gradient(ellipse 60% 60% at 70% 25%, rgba(120,180,174,.24) 0%, transparent 70%);
  filter:blur(6px);
}
.sw-announce__close{
  position:absolute; top:11px; right:11px; z-index:3; width:30px; height:30px;
  border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:20px; line-height:1; cursor:pointer; transition:background 200ms, transform 250ms;
}
.sw-announce__close:hover{background:var(--accent); transform:rotate(90deg)}
.sw-announce__close:focus-visible{outline:2px solid var(--g3); outline-offset:2px}
.sw-announce__tag{position:relative; z-index:1; font-family:'Hanken Grotesk',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g3); margin:0 0 6px; padding-right:34px}
.sw-announce__title{position:relative; z-index:1; font-family:var(--display); font-weight:700; font-size:20px;
  letter-spacing:-.02em; line-height:1.05; color:#fff; margin:0 0 7px}
.sw-announce__text{position:relative; z-index:1; font-size:13px; line-height:1.55; color:rgba(255,255,255,.72); margin:0}
.sw-announce__cta{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:.5em;
  margin-top:15px; padding:12px 22px; border-radius:999px; background:var(--accent); color:#fff;
  font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; transition:background 200ms, transform 250ms}
.sw-announce__cta:hover{background:#2a9d88; transform:translateY(-2px)}
.sw-announce__cta:focus-visible{outline:2px solid var(--g3); outline-offset:2px}
.sw-announce__cta span{transition:transform 250ms var(--ease)}
.sw-announce__cta:hover span{transform:translateX(4px)}
@media(max-width:480px){
  .sw-announce__head{width:120px; top:-66px; left:16px}
  .sw-announce__title{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .sw-announce,.sw-announce.is-in{transform:none; transition:opacity 300ms linear}
  .sw-announce__head,.sw-announce.is-in .sw-announce__head{transform:none; transition:opacity 300ms linear}
  .sw-announce__close:hover,.sw-announce__cta:hover{transform:none}
}

/* ---------- testimonials (homepage) ---------- */
/* Ported from the TSA homepage card-stack, recoloured to Show Works teal.
   Dark frosted-glass cards; uses the global `section` padding + `.reveal` hooks. */
.testimonials{position:relative; isolation:isolate; overflow:hidden; background:var(--dark); color:#fff; z-index:1}
/* self-contained teal glow pools (top-right + bottom-left), not tuned to a neighbour */
.testimonials::before{content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle 640px at 85% -4%, rgba(31,122,107,.16) 0%, transparent 62%),
    radial-gradient(circle 600px at 16% 106%, rgba(31,122,107,.16) 0%, transparent 62%)}
.testimonials__wrap{position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:0 clamp(20px,5vw,80px)}
.testimonials__grid{display:grid; gap:clamp(34px,5vw,76px); grid-template-columns:minmax(280px,0.82fr) 1.18fr; align-items:center}

/* LEFT - copy + dots */
.testimonials__eyebrow{display:inline-flex; align-items:center; gap:14px; font-family:var(--body); font-weight:700;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.testimonials__eyebrow-rule{display:block; width:34px; height:2px; background:var(--accent)}
.testimonials__h2{font-family:var(--display); font-size:clamp(32px,4.4vw,58px); line-height:1.0; text-transform:uppercase; margin:20px 0 16px}
.testimonials__dek{color:rgba(255,255,255,.6); max-width:44ch; font-size:clamp(15px,1.15vw,17px); line-height:1.6}
.testimonials__dots{display:flex; gap:10px; margin-top:clamp(24px,3vw,36px)}
.testimonials__dot{appearance:none; cursor:pointer; padding:0; width:10px; height:10px; border-radius:999px;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.12);
  transition:width 280ms var(--ease), background 280ms var(--ease)}
.testimonials__dot[aria-selected="true"]{width:32px; background:var(--accent); border-color:var(--accent)}
.testimonials__dot:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* prev/next arrows */
.testimonials__nav{display:flex; gap:12px; margin-top:clamp(20px,2.6vw,30px)}
.testimonials__arrow{position:relative; width:46px; height:46px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease)}
.testimonials__arrow::before{content:''; position:absolute; top:50%; left:50%; width:9px; height:9px;
  border-right:2px solid #fff; border-bottom:2px solid #fff}
.testimonials__arrow--prev::before{transform:translate(-30%,-50%) rotate(135deg)}
.testimonials__arrow--next::before{transform:translate(-70%,-50%) rotate(-45deg)}
.testimonials__arrow:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px)}
.testimonials__arrow:hover::before{border-color:#fff}
.testimonials__arrow:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* RIGHT - frosted-glass card stack */
.testimonials__stage{position:relative}
.testimonials__stack{position:relative; display:grid; touch-action:pan-y}
.testimonial-card{grid-area:1 / 1; isolation:isolate; display:flex; flex-direction:column; gap:20px;
  padding:clamp(28px,3.2vw,44px); border-radius:22px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(48,48,52,.88) 0%, rgba(26,26,29,.92) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.28), 0 32px 80px -22px rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.28);
  transform-origin:top center; will-change:transform, opacity;
  transition:transform 600ms var(--ease), opacity 600ms var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .testimonial-card{background:rgba(30,30,33,.98)}
}
.testimonial-card__bloom{position:absolute; inset:-60px -50px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 45% 50% at 78% 22%, rgba(31,122,107,.30) 0%, transparent 62%),
    radial-gradient(ellipse 35% 40% at 18% 82%, rgba(31,122,107,.16) 0%, transparent 62%);
  filter:blur(8px);
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 50%, #000 0%, #000 55%, transparent 92%);
          mask-image:radial-gradient(ellipse 55% 60% at 50% 50%, #000 0%, #000 55%, transparent 92%)}
/* stack offsets - JS only sets data-pos; back cards fan up so their top edges peek */
.testimonial-card[data-pos="0"]{transform:translateY(0) scale(1); opacity:1; z-index:40}
.testimonial-card[data-pos="1"]{transform:translateY(-20px) scale(.95); opacity:.65; z-index:30}
.testimonial-card[data-pos="2"]{transform:translateY(-40px) scale(.90); opacity:.40; z-index:20}
.testimonial-card[data-pos="3"]{transform:translateY(-40px) scale(.90); opacity:0; z-index:10}
.testimonial-card:not([data-pos="0"]){pointer-events:none}
.testimonial-card[data-pos="0"]{cursor:grab}
.testimonial-card.is-dragging{transition:none; cursor:grabbing;
  transform:translateX(var(--drag, 0px)) rotate(calc(var(--drag, 0px) * 0.02deg))}

.testimonial-card__mark{color:var(--accent); opacity:.9; flex:none}
.testimonial-card__quote{margin:0; font-size:clamp(18px,1.9vw,23px); line-height:1.5; color:#fff; font-weight:400}
.testimonial-card__foot{margin-top:auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.testimonial-card__by{display:flex; align-items:center; gap:14px}
.testimonial-card__avatar{flex:none; width:48px; height:48px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; overflow:hidden; font-family:var(--display); font-weight:700;
  font-size:16px; letter-spacing:.04em; color:#fff;
  background:linear-gradient(150deg, #3fae9b 0%, var(--accent) 72%); border:1px solid rgba(255,255,255,.25)}
.testimonial-card__name{display:block; font-weight:700; font-size:15px}
.testimonial-card__role{display:block; color:rgba(255,255,255,.6); font-size:13px; line-height:1.35}
.testimonial-card__tag{margin-left:auto; align-self:center; font-family:var(--body); font-weight:700;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); text-decoration:none;
  background:rgba(31,122,107,.10); border:1px solid rgba(31,122,107,.32); border-radius:100px; padding:7px 13px;
  white-space:nowrap; transition:background 220ms var(--ease), border-color 220ms var(--ease)}
.testimonial-card__tag:hover{background:rgba(31,122,107,.18); border-color:rgba(31,122,107,.55)}
.testimonial-card__tag:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.testimonials__status{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media(max-width:820px){
  .testimonials__grid{grid-template-columns:1fr}
  .testimonials__stage{order:2; margin-top:26px}
  .testimonials__dots{justify-content:flex-start; order:3}
  .testimonial-card[data-pos="1"]{transform:translateY(-16px) scale(.96); opacity:.6}
  .testimonial-card[data-pos="2"]{transform:translateY(-30px) scale(.93); opacity:.36}
}
@media(max-width:440px){
  .testimonial-card{padding:24px 20px; gap:16px}
  .testimonial-card__quote{font-size:18px}
  .testimonial-card__tag{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .testimonial-card{transition:opacity 200ms}
  .testimonial-card[data-pos="0"]{transform:none}
  .testimonial-card[data-pos="1"],
  .testimonial-card[data-pos="2"],
  .testimonial-card[data-pos="3"]{transform:none; opacity:0; pointer-events:none}
}