/* self-hosted fonts (Google Fonts subsets: latin, latin-ext, greek; variable weights) */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/commissioner-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/commissioner-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/commissioner-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/exo2-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/exo2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/fonts/jetbrainsmono-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/assets/fonts/jetbrainsmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Play Recording Studio - shared design system */
:root{
  --canvas:#0c0e0b; --panel:#151a14;
  --accent:#45b33d; --accent-hover:#5ecb54; --accent-muted:#274f23;
  --ember:#c9924f;
  --text-secondary:#9aa694; --text-primary:#eef2ea;
  --hairline:rgba(154,166,148,.16); --hairline-strong:rgba(154,166,148,.38);
  --display:'Exo 2',system-ui,sans-serif; --body:'Commissioner',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --tshadow:0 1px 2px rgba(4,6,4,.95),0 3px 12px rgba(4,6,4,.78),0 10px 44px rgba(4,6,4,.8);
  --ease:cubic-bezier(.22,.75,.28,1); --ease-soft:cubic-bezier(.4,.1,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--text-primary);font-family:var(--body);line-height:1.6;opacity:0;transition:opacity .5s var(--ease-soft)}
body.ready{opacity:1}
img,video{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent-muted);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 42% 30% at 24% 22%,rgba(69,179,61,.05),transparent 70%),
             radial-gradient(ellipse 38% 30% at 78% 74%,rgba(201,146,79,.045),transparent 70%);
  animation:envdrift 75s var(--ease-soft) -20s infinite alternate}
@keyframes envdrift{from{transform:translate3d(-2%,-1.5%,0)}to{transform:translate3d(2%,1.5%,0)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ===== language pairing for long-form pages (legal) ===== */
html[lang="en"] .only-el{display:none}
html:not([lang="en"]) .only-en{display:none}

/* ===== nav: logo + lang + burger (all viewports) ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;gap:1rem;
  padding:.8rem clamp(1.2rem,4vw,3rem);background:linear-gradient(rgba(12,14,11,.88),rgba(12,14,11,0));backdrop-filter:blur(2px)}
.logo{text-decoration:none}
.logo img{display:block;height:64px;width:64px}
@media (max-width:720px){.logo img{height:50px;width:50px}}
nav .navtools{margin-left:auto;display:flex;gap:.8rem;align-items:center}
.lang{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-secondary);border:1px solid var(--hairline-strong);padding:.28rem .8rem;min-height:44px;min-width:44px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.lang:hover{color:var(--text-primary);border-color:var(--accent)}
.burger{position:relative;width:52px;height:44px;border:1px solid var(--hairline-strong);display:grid;place-items:center;transition:border-color .3s var(--ease)}
.burger:hover{border-color:var(--accent)}
.burger:active,.lang:active{transform:scale(.95)}
.burger .bars{position:relative;width:20px;height:12px;display:block}
.burger .bars::before,.burger .bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--text-primary);transition:transform .35s var(--ease),top .35s var(--ease),bottom .35s var(--ease)}
.burger .bars::before{top:0}
.burger .bars::after{bottom:0}
body.menu-open .burger .bars::before{top:5px;transform:rotate(45deg)}
body.menu-open .burger .bars::after{bottom:5px;transform:rotate(-45deg)}
.skip{position:absolute;left:-999px;top:0;background:var(--panel);color:var(--text-primary);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== fullscreen menu overlay ===== */
.menu{position:fixed;inset:0;z-index:60;background:rgba(9,11,8,.97);display:flex;flex-direction:column;justify-content:center;overflow-y:auto;
  padding:clamp(6rem,14vh,9rem) clamp(1.4rem,8vw,7rem) clamp(2.4rem,7vh,4rem);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
body.menu-open .menu{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
body.menu-open{overflow:hidden}
.menu a.mlink{display:flex;align-items:baseline;gap:1.1rem;text-decoration:none;padding:.55rem 0;border-bottom:1px solid var(--hairline);
  font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4.6vw,3rem);letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);
  opacity:0;transform:translateY(14px);transition:color .3s var(--ease),opacity .5s var(--ease),transform .5s var(--ease)}
.menu a.mlink:first-of-type{border-top:1px solid var(--hairline)}
body.menu-open .menu a.mlink{opacity:1;transform:none}
body.menu-open .menu a.mlink:nth-of-type(2){transition-delay:.05s,.05s,.05s}
body.menu-open .menu a.mlink:nth-of-type(3){transition-delay:.1s,.1s,.1s}
body.menu-open .menu a.mlink:nth-of-type(4){transition-delay:.15s,.15s,.15s}
body.menu-open .menu a.mlink:nth-of-type(5){transition-delay:.2s,.2s,.2s}
.menu a.mlink:hover,.menu a.mlink[aria-current="page"]{color:var(--text-primary)}
.menu a.mlink[aria-current="page"] .mnum{color:var(--accent)}
.menu .mnum{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.3em;color:var(--accent-muted);transition:color .3s var(--ease)}
.menu a.mlink:hover .mnum{color:var(--accent)}
.menu .mfoot{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:baseline}
.menu .mfoot a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-secondary);text-decoration:none}
.menu .mfoot a:hover{color:var(--accent)}

main{position:relative;z-index:1;background:var(--canvas)}
.page-head{padding:clamp(7.5rem,15vh,10rem) clamp(1.2rem,6vw,4rem) 0;max-width:1200px;margin:0 auto}
section{position:relative;padding:clamp(3.4rem,7vw,6rem) clamp(1.2rem,6vw,4rem);max-width:1200px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;position:relative}
.kicker::after{content:"";position:absolute;left:0;bottom:-6px;width:2.2rem;height:1px;background:var(--accent);opacity:.5;animation:kglow 5s var(--ease-soft) -2s infinite}
@keyframes kglow{0%,100%{opacity:.3}50%{opacity:.85}}
h1.title,h2.title{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.8vw,2.8rem);line-height:1.15;max-width:26ch}
.lede{margin-top:1.1rem;color:var(--text-secondary);max-width:58ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.06em;
  background:var(--accent);color:#081107;padding:.85rem 1.9rem;min-height:44px;text-decoration:none;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 30px rgba(69,179,61,.25)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.12s}
.btn.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--hairline-strong)}
.btn.ghost:hover{border-color:var(--accent);box-shadow:none}
.btn.mini{font-size:.78rem;padding:.5rem 1.15rem;min-height:40px;letter-spacing:.08em}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* staggered variant: the container reveals instantly, its children cascade */
.reveal.stagger{transform:none}
.reveal.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.stagger.in>*{opacity:1;transform:none}
.reveal.stagger.in>*:nth-child(2){transition-delay:.06s}
.reveal.stagger.in>*:nth-child(3){transition-delay:.12s}
.reveal.stagger.in>*:nth-child(4){transition-delay:.18s}
.reveal.stagger.in>*:nth-child(5){transition-delay:.24s}
.reveal.stagger.in>*:nth-child(6){transition-delay:.3s}
.reveal.stagger.in>*:nth-child(n+7){transition-delay:.36s}

/* ===== prose (legal pages) ===== */
.prose{max-width:760px}
.prose h1{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.8vw,2.8rem);line-height:1.15}
.prose h2{font-family:var(--display);font-weight:600;font-size:1.15rem;margin-top:2.2rem}
.prose h2.h1like{font-size:clamp(1.7rem,3.8vw,2.8rem);line-height:1.15;margin-top:0}
.prose p{margin-top:.9rem;color:var(--text-secondary)}
.prose ul{margin:.9rem 0 0 1.1rem;color:var(--text-secondary)}
.prose li{margin-top:.35rem}
.prose a{color:var(--text-primary)}
.prose a:hover{color:var(--accent)}
.prose strong{color:var(--text-primary);font-weight:500}

/* ===== pinned services showcase ===== */
.showcase{position:relative;height:210vh}
.showcase .pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);align-items:center;
  gap:0;max-width:none;margin:0;padding:0}
.showcase .visual{position:relative;height:100vh;width:100%;overflow:hidden;border:none;border-right:1px solid var(--hairline)}
.showcase .copy{position:relative;height:100vh;display:flex;flex-direction:column}
.showcase .copy-head{padding:clamp(7rem,14vh,9rem) clamp(1.8rem,4.5vw,4.5rem) 0}
.showcase .copy-head .title{font-size:clamp(1.25rem,1.9vw,1.75rem);max-width:none}
.showcase .copy-head .lede{margin-top:.7rem;font-size:.92rem}
.showcase .rotor{position:relative;flex:1;min-height:0}
.showcase .copy-foot{padding:0 clamp(1.8rem,4.5vw,4.5rem) clamp(1.5rem,4vh,2.4rem);display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.showcase .copy-foot .foot-line{font-family:var(--display);font-weight:600;font-size:1.02rem}
.showcase .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-soft)}
.showcase .visual img.on{opacity:1}
.showcase .svc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 clamp(1.8rem,4.5vw,4.5rem);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.showcase .svc.on{opacity:1;transform:none;pointer-events:auto}
.showcase .svc h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.15}
.showcase .svc p{margin-top:.9rem;color:var(--text-secondary);max-width:46ch}
.showcase .svc .credit{margin-top:.8rem;font-family:var(--mono);font-size:.68rem;color:var(--ember)}
.showcase .idx{font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;color:var(--accent);margin-bottom:.9rem;display:block}
.showcase .dots{position:absolute;right:clamp(.9rem,2vw,1.6rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.55rem;z-index:1}
.showcase .dots i{width:6px;height:6px;background:var(--hairline-strong);transition:background .4s var(--ease),transform .4s var(--ease)}
.showcase .dots i.on{background:var(--accent);transform:scale(1.35)}
.showcase .svc .m-img{display:none}
@media (max-width:900px),(max-height:700px),(prefers-reduced-motion: reduce){
  .showcase{height:auto}
  .showcase .pin{position:static;height:auto;display:block;padding-top:0}
  .showcase .visual{display:none}
  .showcase .copy{min-height:0;height:auto;display:block}
  .showcase .copy-head{padding:clamp(6.5rem,13vh,8rem) clamp(1.2rem,6vw,4rem) 1.6rem}
  .showcase .rotor{position:static}
  .showcase .copy-foot{padding:0 clamp(1.2rem,6vw,4rem) 2rem}
  .showcase .svc{position:static;display:block;opacity:1;transform:none;pointer-events:auto;margin-bottom:2.6rem;padding:0 clamp(1.2rem,6vw,4rem)}
  .showcase .svc .m-img{display:block;border:1px solid var(--hairline);margin-bottom:1rem;width:100%;height:auto}
  .showcase .dots{display:none}
}

/* ===== page hero header (photo behind the page head) ===== */
.page-hero{position:relative;min-height:clamp(400px,64vh,640px);display:flex;align-items:flex-end;overflow:hidden}
.page-hero img{position:absolute;left:0;right:0;top:-14%;width:100%;height:128%;object-fit:cover;will-change:transform}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,11,.55),rgba(12,14,11,.12) 40%,rgba(12,14,11,.2) 62%,var(--canvas))}
.page-hero .ph-inner{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:7.5rem clamp(1.2rem,6vw,4rem) 2.2rem;text-shadow:var(--tshadow)}
@media (prefers-reduced-motion: reduce){.page-hero img{top:0;height:100%;transform:none!important}}

/* ===== full-bleed photo bands ===== */
section.photo-band{max-width:none;margin:0;padding:0;position:relative;height:clamp(340px,74vh,660px);overflow:hidden}
.photo-band img{position:absolute;left:0;right:0;top:-16%;width:100%;height:132%;object-fit:cover;will-change:transform}
@media (prefers-reduced-motion: reduce){.photo-band img{top:0;height:100%;transform:none!important}}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,11,.34),rgba(12,14,11,0) 30%,rgba(12,14,11,0) 62%,rgba(12,14,11,.66))}
.photo-band .pb-cap{position:absolute;left:clamp(1.2rem,6vw,4rem);bottom:1.5rem;z-index:1;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-primary);text-shadow:0 1px 6px rgba(4,6,4,.8)}
.photo-band .pb-cap::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.6em;background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%)}

/* ===== map band (contact, consent-gated) ===== */
section.map-band{max-width:none;margin:0;padding:0;height:clamp(320px,52vh,520px);position:relative;
  border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline)}
.map-band iframe{width:100%;height:100%;border:0;display:block;
  filter:invert(90%) hue-rotate(180deg) saturate(.35) contrast(.92)}
.map-shell{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--panel);text-align:center;padding:1.5rem}
.map-shell p{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-secondary);max-width:44ch}

/* ===== section color rhythm (full-bleed variants) ===== */
section.tint,section.inv{position:relative}
section.tint::before,section.inv::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-1}
section.tint::before{background:linear-gradient(180deg,#0e130d,#0a0f09)}
section.inv{--canvas:#23271f;--panel:#2c312a;
  --hairline:rgba(200,210,195,.14);--hairline-strong:rgba(200,210,195,.32);
  color:var(--text-primary)}
section.inv::before{background:#23271f}
section.inv .btn.ghost{color:var(--text-primary)}

/* ===== editorial: stats band ===== */
h1.title.xl{font-size:clamp(2.3rem,5.2vw,3.8rem);max-width:22ch}
.stats-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong)}
.stat{padding:1.6rem 1.2rem 1.4rem;border-right:1px solid var(--hairline)}
.stat:last-child{border-right:none}
.stat b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;color:var(--text-primary)}
.stat span{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-secondary)}

/* ===== editorial: room rows (spec sheet) ===== */
.rooms{border-top:1px solid var(--hairline-strong)}
.room{display:grid;grid-template-columns:minmax(70px,110px) 1.2fr .8fr;gap:clamp(1rem,3vw,2.6rem);align-items:start;
  padding:2.1rem 0;border-bottom:1px solid var(--hairline);transition:background .4s var(--ease)}
.room:hover{background:rgba(69,179,61,.03)}
.room .num{font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,5.5vw,4.4rem);line-height:.9;color:var(--accent-muted);transition:color .4s var(--ease)}
.room:hover .num{color:var(--accent)}
.room h3{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.12}
.room .tag{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem}
.room p{margin-top:.6rem;color:var(--text-secondary);font-size:.93rem;max-width:52ch}
.room .specs{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
  border-left:1px solid var(--hairline-strong);padding-left:1.1rem;line-height:2.05;align-self:stretch}
@media (max-width:760px){.room{grid-template-columns:minmax(56px,70px) 1fr}.room .specs{grid-column:2;border-left:none;padding-left:0;margin-top:.6rem}}

/* ===== editorial: gear rack rows ===== */
.rack{border-top:1px solid var(--hairline-strong)}
.rack-row{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:clamp(1rem,3vw,2.6rem);padding:1.5rem 0;border-bottom:1px solid var(--hairline)}
.rack-row h3{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);padding-top:.35rem}
.rack-row ul{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.35rem}
.rack-row li{list-style:none;color:var(--text-secondary);font-size:.95rem;display:inline-flex;align-items:center}
.rack-row li:not(:last-child)::after{content:"";width:.42em;height:.42em;margin:0 .8em;background:var(--accent-muted);clip-path:polygon(0 0,100% 50%,0 100%);flex:none}
@media (max-width:640px){.rack-row{grid-template-columns:1fr;gap:.5rem}}

/* ===== editorial: lineup wall (clients) ===== */
.clients{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.55rem}
.clients li{list-style:none;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.9vw,1.45rem);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-secondary);opacity:.6;display:inline-flex;align-items:center;
  transition:opacity .5s var(--ease),color .5s var(--ease)}
.clients li:not(:last-child)::after{content:"";width:.5em;height:.5em;margin:0 .75em;background:var(--hairline-strong);clip-path:polygon(0 0,100% 50%,0 100%);flex:none;transition:background .5s var(--ease)}
.clients li.lit{opacity:1;color:var(--text-primary)}
.clients li.lit:not(:last-child)::after{background:var(--accent)}

/* ===== editorial: pull quote carousel ===== */
.quote-hero{margin-top:2.6rem;padding:2.6rem 0 3.8rem;border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline);position:relative;min-height:clamp(17rem,36vh,22rem)}
.quote-hero::before{content:"«";position:absolute;top:.4rem;left:-.08em;font-family:var(--display);font-weight:600;font-size:clamp(4rem,9vw,7rem);line-height:1;color:var(--accent);opacity:.85}
.q-slide{position:absolute;inset:2.6rem 0 3.8rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.q-slide.on{opacity:1;transform:none;pointer-events:auto}
.quote-hero blockquote{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.28;max-width:26ch;padding:0 clamp(3.6rem,8vw,6rem)}
.quote-hero::after{content:"»";position:absolute;bottom:.2rem;right:-.04em;font-family:var(--display);font-weight:600;font-size:clamp(4rem,9vw,7rem);line-height:1;color:var(--accent);opacity:.85;pointer-events:none}
.quote-hero cite{display:block;margin-top:1.2rem;font-family:var(--mono);font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.q-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:1.1rem;display:flex;gap:.55rem}
.q-dots button{width:20px;height:20px;padding:0;display:grid;place-items:center}
.q-dots button::before{content:"";width:6px;height:6px;background:var(--hairline-strong);transition:background .4s var(--ease),transform .4s var(--ease)}
.q-dots button.on::before{background:var(--accent);transform:scale(1.35)}
@media (prefers-reduced-motion: reduce){
  .quote-hero{min-height:0}
  .q-slide{position:static;opacity:1;transform:none;pointer-events:auto;margin-bottom:2rem}
  .q-dots{display:none}
}

/* ===== fader + clients ===== */
.mix{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,5vw,4rem);margin-top:2.6rem;align-items:start}
.fader{user-select:none;touch-action:none;text-align:center;cursor:grab}
.fader:active{cursor:grabbing}
.fader .rail{position:relative;width:56px;height:240px;margin:0 auto;background:var(--panel);border:1px solid var(--hairline)}
.fader .fill{position:absolute;left:6px;right:6px;bottom:6px;background:linear-gradient(var(--accent-hover),var(--accent-muted));height:calc(6px + (100% - 12px)*var(--p,0));opacity:.35}
.fader .knob{position:absolute;left:-6px;right:-6px;height:30px;background:#20281e;border:1px solid var(--hairline-strong);
  bottom:calc((100% - 30px)*var(--p,0));box-shadow:0 3px 10px rgba(0,0,0,.5)}
.fader .knob::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--accent);opacity:calc(.4 + .6*var(--p,0))}
.fader .hint{margin-top:.9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);max-width:12ch;margin-left:auto;margin-right:auto}

/* ===== brand boxes (tv/radio projects) ===== */
.brandgrid{margin-top:2.6rem;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.brand{background:var(--canvas);padding:1.6rem .9rem;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-weight:600;font-size:clamp(.82rem,1.1vw,1rem);letter-spacing:.12em;text-transform:uppercase;line-height:1.3;
  color:var(--text-secondary);transition:color .35s var(--ease),background .35s var(--ease)}
.brand:hover{color:var(--text-primary);background:var(--panel)}
.brand.trail{background:var(--accent);color:#081107;transition:background .18s var(--ease),color .18s var(--ease)}

/* ===== gallery: two-row drifting carousel ===== */
.gal{display:grid;gap:1px;margin-top:1rem}
.gal-row{overflow:hidden}
.gal .track{display:flex;width:max-content;animation:galslide 80s linear infinite}
.gal-row.rev .track{animation-direction:reverse}
.gal .track img{height:clamp(160px,26vh,260px);width:auto;aspect-ratio:1/1;display:block;margin-right:1px}
.gal-row:hover .track{animation-play-state:paused}
.gal.gal-paused .track{animation-play-state:paused!important}
@keyframes galslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .gal .track{animation:none!important;width:auto}
  .gal-row{overflow-x:auto}
}

/* ===== form / contact ===== */

.contact-grid{display:grid;grid-template-columns:1fr;gap:2.6rem;margin-top:2.4rem}
@media (min-width:900px){.contact-grid{grid-template-columns:1.1fr .9fr}}
form .row{margin-bottom:1rem}
label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.4rem}
input,textarea{width:100%;background:var(--panel);border:1px solid var(--hairline-strong);color:var(--text-primary);
  font:inherit;padding:.75rem .9rem;transition:border-color .3s var(--ease)}
input:focus,textarea:focus{border-color:var(--accent)}
textarea{min-height:120px;resize:vertical}
.form-note{margin-top:.8rem;font-size:.85rem;color:var(--text-secondary)}
.form-note.ok{color:var(--accent)}
.side .block{margin-bottom:1.6rem}
.side .block h4,.side .block .h4{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.4rem}
.side .block a{text-decoration:none}
.side .block a:hover{color:var(--accent)}
.bigtel{font-family:var(--display);font-weight:600;font-size:1.5rem}

/* ===== footer ===== */
footer{border-top:1px solid var(--hairline);padding:2.4rem calc(clamp(1.2rem,6vw,4rem) + 76px) 2rem clamp(1.2rem,6vw,4rem);position:relative;z-index:1;background:var(--canvas)}
footer .frow{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:baseline}
footer .frow + .frow{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--hairline)}
footer p,footer a,footer button{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-secondary)}
footer a,footer button{text-decoration:none}
footer a:hover,footer button:hover{color:var(--text-primary)}
footer .socials,footer .legal{display:flex;flex-wrap:wrap;gap:1.2rem}
footer .fol .fh4{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.6rem}
footer .socials{gap:.7rem}
footer .socials a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hairline-strong);color:var(--text-secondary);transition:color .3s var(--ease),border-color .3s var(--ease)}
footer .socials a:hover{color:var(--accent);border-color:var(--accent)}
footer .socials svg{width:18px;height:18px;display:block}
footer .dev a{color:var(--text-secondary)}
footer .dev a:hover{color:var(--accent)}

/* ===== contact pod (floating, bottom right) ===== */
.pod{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear 0s}
body.pod-gated .pod,body.ck-open .pod{opacity:0;pointer-events:none;transform:translateY(12px);visibility:hidden;transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.pod-items{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.pod-item{width:48px;height:48px;background:var(--panel);border:1px solid var(--accent);display:grid;place-items:center;color:var(--accent);
  opacity:0;transform:translateY(10px);pointer-events:none;visibility:hidden;
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease),visibility 0s linear .35s}
.pod.open .pod-item{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s,0s,0s,0s,0s}
.pod.open .pod-item:nth-child(1){transition-delay:.06s,.06s,0s,0s}
.pod-item:hover{background:var(--accent);color:#081107}
.pod-item svg{width:20px;height:20px;display:block}
.pod-main{width:56px;height:56px;background:var(--accent);color:#081107;display:grid;place-items:center;
  box-shadow:0 8px 30px rgba(69,179,61,.3);transition:background .3s var(--ease),transform .3s var(--ease)}
.pod-main:hover{background:var(--accent-hover);transform:translateY(-2px)}
.pod-main:active{transform:scale(.94);transition-duration:.12s}
.pod-main .ic{position:relative;width:18px;height:18px;display:block}
.pod-main .ic::before,.pod-main .ic::after{content:"";position:absolute;transition:opacity .25s var(--ease)}
.pod-main .ic::before{inset:0;background:#081107;clip-path:polygon(12% 0,100% 50%,12% 100%);opacity:1}
.pod-main .ic::after{top:0;bottom:0;left:2px;width:14px;opacity:0;
  background:linear-gradient(90deg,#081107 0 5px,transparent 5px 9px,#081107 9px 14px)}
.pod.open .pod-main .ic::before{opacity:0}
.pod.open .pod-main .ic::after{opacity:1}

/* ===== cookie banner ===== */
.ckbar{position:fixed;left:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:80;max-width:420px;
  background:var(--panel);border:1px solid var(--hairline-strong);padding:1.2rem 1.3rem;display:none}
.ckbar.on{display:block}
.ckbar p{font-size:.85rem;color:var(--text-secondary)}
.ckbar p a{color:var(--text-primary)}
.ckbar p a:hover{color:var(--accent)}
.ckbar .ckrow{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.7rem}
.ckbar .btn{font-size:.82rem;padding:.55rem 1.2rem}
@media (max-width:600px){.ckbar{right:clamp(1rem,3vw,1.6rem);max-width:none}}

.mob-only{display:none}
@media (max-width:640px){.mob-only{display:block}}

/* ===== small-screen layout ===== */
@media (max-width:640px){
  .mix{grid-template-columns:1fr;gap:2rem}
  .fader,.fader-only{display:none}
  .clients li{opacity:1;color:var(--text-primary)}
  .clients li:not(:last-child)::after{background:var(--accent)}
  .quote-hero blockquote{padding:0 1.4rem;font-size:1.3rem}
  .quote-hero::before,.quote-hero::after{font-size:3rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal,.reveal.stagger>*{opacity:1!important;transform:none!important}
  .clients li{opacity:1!important;color:var(--text-primary)!important}
  .menu a.mlink{opacity:1;transform:none}
  body{opacity:1}
}