/* POSEIDON — master website system. Built to the Master Website Execution Manual.
   Canvas: warm off-white. Type: one grotesk, many weights. Serif = <10%, editorial contrast only. */

:root{
--paper:#F3F1EB;--paper-2:#EAE7DE;--ink:#0A0A0A;--muted:#6F6B64;--line:#D7D2C8;
--dark:#090909;--dark-line:rgba(243,241,235,.16);--dark-muted:#9A958C;
--font:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
--font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
--pad:clamp(20px,4vw,72px);--max:1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--ink);text-decoration:none;transition:opacity .25s ease}
a:hover{opacity:.6}
a:active{opacity:.45}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---- type ---- */
.display{font-weight:700;font-size:clamp(38px,7.4vw,132px);line-height:.82;letter-spacing:-.045em;text-transform:uppercase}
.display--md{font-size:clamp(40px,6.4vw,110px)}
.statement{font-weight:700;font-size:clamp(30px,4.6vw,80px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.statement--sm{font-size:clamp(24px,3vw,48px)}
.eyebrow{font-size:11px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:34ch}
.body{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--ink);max-width:70ch}
.body--muted{color:var(--muted)}
.serif-i{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.sect{padding:clamp(72px,10vw,168px) 0;position:relative}
.sect--tight{padding:clamp(48px,6vw,96px) 0}
.sect--dark{background:var(--dark);color:var(--paper)}
.sect--dark .eyebrow,.sect--dark .meta,.sect--dark .body--muted{color:var(--dark-muted)}
.sect--dark a{color:var(--paper)}
.rule{height:1px;background:var(--line);border:0}
.sect--dark .rule{background:var(--dark-line)}

/* ---- links / CTA ---- */
.cta-link{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--ink);transition:gap .3s ease}
.cta-link:hover{opacity:1;gap:20px}
.sect--dark .cta-link{border-color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:opacity .25s ease}
.btn:hover{opacity:.82}
.sect--dark .btn{background:var(--paper);color:var(--ink)}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--ink)}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__in{max-width:var(--max);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{width:132px;height:auto}
.nav__links{display:flex;gap:clamp(18px,2.4vw,38px);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.nav__links a{position:relative;padding:4px 0;opacity:1}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.7,0,.3,1)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__burger{display:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.menu{position:fixed;inset:0;z-index:900;background:var(--dark);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:var(--pad);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.menu.open{opacity:1;visibility:visible}
.menu a{color:var(--paper);font-weight:700;font-size:clamp(38px,10vw,68px);line-height:1.05;letter-spacing:-.04em;text-transform:uppercase}
.menu__close{position:absolute;top:22px;right:var(--pad);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.menu__foot{position:absolute;bottom:var(--pad);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dark-muted)}
@media (max-width:900px){.nav__links{display:none}.nav__burger{display:block}}

/* ---- hero ---- */
.hero{padding-top:clamp(120px,15vh,190px);padding-bottom:clamp(48px,6vw,88px)}
.hero__display{margin:clamp(24px,3vw,44px) 0 clamp(28px,4vw,56px)}
.hero__foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;padding-top:24px;border-top:1px solid var(--line)}
.hero__meta{justify-self:end;text-align:right;max-width:38ch}
@media (max-width:820px){.hero__foot{grid-template-columns:1fr}.hero__meta{justify-self:start;text-align:left}}

/* masked line reveal */
.rv{display:block;overflow:hidden;margin-block:-.38em -.38em}
.rv>span{display:block;padding-block:.38em .38em;transform:translateY(103%);animation:rvUp 1.05s cubic-bezier(.16,.84,.24,1) forwards}
.rv:nth-of-type(2)>span{animation-delay:.09s}
.rv:nth-of-type(3)>span{animation-delay:.18s}
@keyframes rvUp{to{transform:translateY(0)}}
.io{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.84,.24,1)}
.io.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv>span{animation:none;transform:none}.io{opacity:1;transform:none;transition:none}.marquee__track,.reel__track{animation:none}}

/* ---- marquee ---- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:clamp(18px,2.4vw,34px) 0;white-space:nowrap}
.sect--dark .marquee{border-color:var(--dark-line)}
.marquee__track{display:inline-flex;gap:clamp(28px,4vw,64px);align-items:center;animation:mq 46s linear infinite;font-weight:700;font-size:clamp(30px,4.6vw,74px);line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.marquee__track span{display:inline-flex;align-items:center;gap:clamp(28px,4vw,64px)}
.marquee__dot{width:10px;height:10px;flex:0 0 auto;background:currentColor;border-radius:50%;opacity:.45}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- two-sided model ---- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:clamp(40px,5vw,80px)}
.two__col{background:var(--paper);padding:clamp(28px,3.4vw,56px) clamp(24px,3vw,48px);display:flex;flex-direction:column;gap:20px}
.two__col .eyebrow{margin-bottom:4px}
.two__claim{font-weight:700;font-size:clamp(22px,2.3vw,34px);line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;max-width:20ch}
.two__col .cta-link{margin-top:auto;align-self:flex-start}
@media (max-width:820px){.two{grid-template-columns:1fr}}

/* ---- cases (featured + hub) ---- */
.head-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:clamp(32px,4vw,64px)}
@media (max-width:820px){.head-row{grid-template-columns:1fr}}
.cases{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(32px,3.4vw,56px) clamp(16px,2vw,28px)}
.card{display:flex;flex-direction:column;gap:14px;grid-column:span 2}
.card--hero{grid-column:span 6}
.card--half{grid-column:span 3}
.card--third{grid-column:span 2}
.card__frame{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:4/5}
.card--hero .card__frame{aspect-ratio:16/8}
.card--half .card__frame{aspect-ratio:5/4}
.card__frame img,.card__frame video{width:100%;height:100%;object-fit:cover}
.card__frame image-slot{width:100%;height:100%;--slot-bg:var(--paper-2);--slot-fg:#8b877e}
.card__frame>*{transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.card:hover .card__frame>*{transform:scale(1.035)}
.card__title{font-weight:700;font-size:clamp(20px,1.8vw,28px);line-height:1.05;letter-spacing:-.03em;text-transform:uppercase}
.card--hero .card__title{font-size:clamp(28px,3.4vw,56px)}
.card__hook{color:var(--muted);font-size:15px;line-height:1.45;max-width:44ch}
.card__meta{display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sect--dark .card__frame{background:#161616}
@media (max-width:900px){.cases{grid-template-columns:1fr}.card,.card--hero,.card--half,.card--third{grid-column:1}}

/* ---- filter bar ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters button{font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;min-height:44px;border:1px solid var(--line);color:var(--muted);transition:background .25s,color .25s,border-color .25s}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:700px){.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filters button{flex:0 0 auto}}

/* ---- system / steps ---- */
.steps{border-top:1px solid var(--line);margin-top:clamp(32px,4vw,64px)}
.sect--dark .steps{border-color:var(--dark-line)}
.step{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:clamp(20px,3vw,56px);align-items:baseline;padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--line)}
.sect--dark .step{border-color:var(--dark-line)}
.step>*{transition:transform .4s cubic-bezier(.16,.84,.24,1)}
.step:hover>*{transform:translateX(12px)}
.steps--rev .step__num{grid-column:2;grid-row:1}.steps--rev .step__title{grid-column:1;grid-row:1}.steps--rev .step__copy{grid-column:2;grid-row:2}
@media (max-width:820px){.steps--rev .step__num,.steps--rev .step__title,.steps--rev .step__copy{grid-column:1;grid-row:auto}}
.step__num{font-size:12px;letter-spacing:.2em;color:var(--muted)}
.step__title{font-weight:700;font-size:clamp(24px,3vw,50px);line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.step__copy{color:var(--muted);font-size:clamp(15px,1.1vw,17px);line-height:1.55;max-width:52ch}
@media (max-width:820px){.step{grid-template-columns:1fr;gap:10px}}

/* ---- talent cards ---- */
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,2.6vw,44px) clamp(16px,2vw,28px)}
.tcard{display:flex;flex-direction:column;gap:12px}
.tcard__frame{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:3/4}
.tcard__frame image-slot,.tcard__frame img,.tcard__frame video{width:100%;height:100%;object-fit:cover;--slot-bg:var(--paper-2);--slot-fg:#8b877e}
.tcard__frame>*{transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.tcard:hover .tcard__frame>*{transform:scale(1.035)}
.tcard__name{font-weight:700;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.02em;text-transform:uppercase;line-height:1.1}
@media (max-width:1000px){.roster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.roster{grid-template-columns:repeat(2,1fr)}}

/* ---- statement interruption ---- */
.interrupt{min-height:auto;display:flex;align-items:center;padding:clamp(56px,7vw,104px) 0}
.interrupt .display{max-width:22ch}
.interrupt--media{overflow:hidden}
.interrupt--media>.interrupt__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;--slot-bg:#141414;--slot-fg:#6d6a64;z-index:0}
.interrupt--media video,.interrupt--media img{width:100%;height:100%;object-fit:cover}
.interrupt__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(9,9,9,.82) 0%,rgba(9,9,9,.62) 45%,rgba(9,9,9,.34) 100%)}
.interrupt--media>.wrap{position:relative;z-index:2}

/* ---- buckets (brand advisory) ---- */
.buckets{border-top:1px solid var(--line);margin-top:clamp(32px,4vw,64px)}
.bucket{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,56px);padding:clamp(26px,3.2vw,48px) 0;border-bottom:1px solid var(--line);align-items:start}
.bucket__label{font-weight:700;font-size:clamp(22px,2.6vw,42px);line-height:1;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink)}
.bucket__title{font-weight:400;font-size:clamp(16px,1.15vw,18px);line-height:1.5;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:clamp(2px,.5vw,8px);max-width:34ch}
.bucket__list{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--muted);margin-top:clamp(2px,.5vw,8px)}
.bucket__list span{padding:6px 12px;border:1px solid var(--line)}
@media (max-width:820px){.bucket{grid-template-columns:1fr;gap:10px}.bucket__title,.bucket__list{margin-top:0}}

/* ---- 3-path contact ---- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:clamp(40px,5vw,80px)}
.path{background:var(--paper);padding:clamp(28px,3.4vw,52px) clamp(22px,2.6vw,40px);display:flex;flex-direction:column;gap:16px;min-height:clamp(240px,26vw,340px)}
.sect--dark .paths{background:var(--dark-line)}
.sect--dark .path{background:var(--dark)}
.path__title{font-weight:700;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.03em;text-transform:uppercase;line-height:1.05}
.path .cta-link{margin-top:auto;align-self:flex-start}
@media (max-width:820px){.paths{grid-template-columns:1fr}}

/* ---- text + media ---- */
.tm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,80px);align-items:center}
.tm--rev .tm__media{order:-1}
.tm__media{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.tm__media image-slot,.tm__media img,.tm__media video{width:100%;height:100%;object-fit:cover;--slot-bg:var(--paper-2);--slot-fg:#8b877e}
@media (max-width:820px){.tm{grid-template-columns:1fr}.tm--rev .tm__media{order:0}.tm__media{aspect-ratio:4/3;max-width:420px}}

/* ---- three-column idea row ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:clamp(40px,5vw,72px)}
.trio>div{background:var(--paper);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:12px}
.sect--dark .trio{background:var(--dark-line)}
.sect--dark .trio>div{background:var(--dark)}
@media (max-width:820px){.trio{grid-template-columns:1fr}}

/* ---- article (case + profile) ---- */
.art-hero{margin-top:64px;height:clamp(320px,66svh,700px);overflow:hidden;background:var(--paper-2)}
.art-hero image-slot,.art-hero img,.art-hero video{width:100%;height:100%;object-fit:cover;--slot-bg:var(--paper-2);--slot-fg:#8b877e}
.art-head{padding-block:clamp(36px,5vw,80px) clamp(28px,3vw,48px)}
.art-title{font-weight:700;font-size:clamp(34px,5.4vw,92px);line-height:.92;letter-spacing:-.04em;text-transform:uppercase;margin:14px 0 20px;max-width:24ch}
.art-hook{font-family:var(--font-serif);font-style:italic;font-size:clamp(22px,2.4vw,38px);line-height:1.2;max-width:34ch;color:var(--ink)}
.blocks{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(20px,3vw,64px);padding:clamp(28px,3vw,48px) 0;border-top:1px solid var(--line)}
.blocks h2{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400}
.blocks p{font-size:clamp(16px,1.2vw,19px);line-height:1.6;max-width:66ch}
.blocks p+p{margin-top:14px}
.blocks--solo{grid-template-columns:minmax(0,1fr)}
.blocks--solo p{font-size:clamp(17px,1.35vw,21px);max-width:74ch}
@media (max-width:820px){.blocks{grid-template-columns:1fr;gap:12px}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}
.gallery image-slot{aspect-ratio:4/5;--slot-bg:var(--paper-2);--slot-fg:#8b877e}
.gallery>img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.gallery--1>img{aspect-ratio:16/10}
.gallery--1{grid-template-columns:minmax(0,1fr)}
.gallery--1 image-slot{aspect-ratio:16/10}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery--2 image-slot{aspect-ratio:1/1}
@media (max-width:700px){.gallery{grid-template-columns:1fr}}
.takeaway{padding:clamp(56px,8vw,128px) 0}
.pull{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(20px,3vw,64px);padding:clamp(28px,3vw,48px) 0;border-top:1px solid var(--line)}
@media (max-width:820px){.pull{grid-template-columns:1fr;gap:12px}}
.factlist{display:flex;flex-direction:column}
.factlist div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.factlist div span:first-child{color:var(--muted)}
.profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,80px);align-items:start}
@media (max-width:900px){.profile{grid-template-columns:1fr}}

/* ---- logo wall ---- */
.logo-wall{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:clamp(32px,4vw,64px)}
.logo-wall__cell{aspect-ratio:16/9;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:clamp(14px,2vw,30px)}
.logo-wall__cell image-slot{width:100%;height:100%;--slot-bg:transparent;--slot-fg:#a8a49b}
@media (max-width:900px){.logo-wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.logo-wall{grid-template-columns:repeat(2,1fr)}}

/* ---- forms ---- */
.form{display:grid;gap:22px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{appearance:none;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0 12px;font-family:var(--font);font-size:17px;color:var(--ink);outline:none;transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.form-sent{padding:clamp(48px,7vw,110px) 0;font-weight:700;font-size:clamp(24px,3vw,48px);letter-spacing:-.03em;text-transform:uppercase;line-height:1.05;max-width:26ch}

/* ---- footer ---- */
.footer{background:var(--paper);color:var(--ink);padding:clamp(56px,7vw,110px) 0 32px;border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:16px}
.footer ul{list-style:none;display:grid;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.footer a{color:var(--ink)}
.footer__mark{font-weight:700;font-size:clamp(48px,13vw,220px);line-height:.82;letter-spacing:-.055em;margin:clamp(48px,6vw,96px) 0 clamp(24px,3vw,40px)}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(56px,7vw,104px);padding-top:22px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}.footer__bottom{flex-direction:column}}

/* ================= MOTION LAYER — v2 (inspo-informed: rotator, rails, hover-swap, parallax) ================= */
.nav{transition:transform .55s cubic-bezier(.16,.84,.24,1)}
.nav--hide{transform:translateY(-102%)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* word rotator (Home section 02 / motion line) */
.rot{display:flex;flex-direction:column;gap:0;margin-top:clamp(18px,2.4vw,34px)}
.rot__win{display:block;overflow:hidden;height:.9em;line-height:.9}
.rot__stack{display:block;transform:translateY(calc(var(--i,0) * -.9em));transition:transform .52s cubic-bezier(.16,.84,.24,1)}
.rot__stack.nt{transition:none}
.rot__stack>span{display:block;height:.9em;line-height:.9;white-space:nowrap}
.rot__prog{display:flex;gap:6px;margin-top:clamp(22px,3vw,40px)}
.rot__prog i{width:34px;height:2px;background:var(--line);position:relative;overflow:hidden}
.rot__prog i.on::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:rotBar 1.7s linear forwards}
@keyframes rotBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* hover-swap labels (auto-applied to every .cta-link / .btn) */
.swp{position:relative;display:block;overflow:hidden;height:1.2em}
.swp>span{display:flex;align-items:center;gap:10px;height:1.2em;transition:transform .5s cubic-bezier(.16,.84,.24,1)}
.cta-link:hover .swp>span,.btn:hover .swp>span,.tcard:hover .swp>span,.card:hover .swp>span{transform:translateY(-100%)}
.cta-link:hover{opacity:1}
.btn:hover{opacity:1}

/* thin metadata rail */
.rail{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(12px,1.4vw,18px) 0;margin-top:clamp(32px,4vw,64px)}
.sect--dark .rail{border-color:var(--dark-line)}
.rail__track{display:inline-flex;align-items:center;gap:clamp(20px,2.6vw,40px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:mq 64s linear infinite}
.rail--rev .rail__track{animation-direction:reverse}
.rail:hover .rail__track,.marquee:hover .marquee__track{animation-play-state:paused}
.rail__dot{width:4px;height:4px;flex:0 0 auto;border-radius:50%;background:currentColor;opacity:.5}
.rail__note{display:flex;justify-content:space-between;gap:16px;padding-top:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* parallax + hover scale, combined through custom properties */
.card__frame>img,.card__frame>video,.card__frame>image-slot,.tm__media>img,.tm__media>video,.tm__media>image-slot,.tcard__frame>img,.tcard__frame>video,.tcard__frame>image-slot,.art-hero>img,.art-hero>video,.art-hero>image-slot{height:112%;margin-top:-6%}
.card__frame>*,.tm__media>*,.tcard__frame>*,.art-hero>*{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.gallery image-slot,.logo-wall__cell image-slot{transform:translate3d(0,var(--py,0px),0)}
.card:hover .card__frame>*,.tcard:hover .tcard__frame>*{--ps:1.045;transform:translate3d(0,var(--py,0px),0) scale(var(--ps))}
.card__title,.tcard__name{transition:opacity .35s ease}
.card:hover .card__meta,.tcard:hover .meta{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.rot__stack{transition:none}.rot__prog i.on::after{animation:none;transform:none}.card__frame>*,.tm__media>*,.tcard__frame>*,.art-hero>*{transition:none}}

/* ---- hero media band ---- */
.hero__media{position:relative;width:100vw;margin:clamp(28px,4vw,56px) 0 clamp(28px,3.6vw,56px);margin-left:calc(50% - 50vw);height:clamp(340px,66svh,780px);overflow:hidden;background:var(--paper-2);clip-path:inset(0 0 0 0);animation:bandOpen 1.5s cubic-bezier(.16,.84,.24,1) .25s both}
@keyframes bandOpen{from{clip-path:inset(18% 0 18% 0)}to{clip-path:inset(0 0 0 0)}}
.hero__video{width:100%;height:112%;margin-top:-6%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.02));transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.slot-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8b877e;text-align:center;padding:0 24px}
.slot-note b{font-weight:700;color:var(--ink)}
.hero__scrim{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(9,9,9,.5),rgba(9,9,9,0))}
.hero__over{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(16px,2vw,26px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero__over .meta{color:rgba(243,241,235,.92);max-width:52ch}
.hero__scroll{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero__scroll::after{content:"";width:1px;height:26px;background:currentColor;transform-origin:top;animation:scrollTick 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes scrollTick{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0) translateY(26px)}}
@media (max-width:700px){.hero__over{flex-direction:column;align-items:flex-start;gap:10px}.hero__scroll{display:none}}
@media (prefers-reduced-motion:reduce){.hero__media{animation:none}.hero__scroll::after{animation:none}.hero__video{transition:none}}

/* ---- full-bleed logo hero (still background) ---- */
.hero-full{position:relative;min-height:76svh;background:var(--paper);color:var(--ink);display:flex;align-items:flex-end;overflow:hidden;padding:clamp(64px,9vh,104px) 0 clamp(28px,4vh,56px)}
.hero-full__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;--slot-bg:var(--paper-2);--slot-fg:var(--muted);transform:scale(1.16) translate(3.4%,3.4%);animation:heroIn 2.4s cubic-bezier(.16,.84,.24,1) both}
image-slot.hero-full__bg img{width:100%;height:100%;object-fit:cover}
@keyframes heroIn{from{transform:scale(1.24) translate(3.4%,3.4%);opacity:0}to{transform:scale(1.16) translate(3.4%,3.4%);opacity:1}}
.hero-full__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(243,241,235,.94) 0%,rgba(243,241,235,.88) 12%,rgba(243,241,235,.66) 26%,rgba(243,241,235,.4) 44%,rgba(243,241,235,.34) 62%,rgba(243,241,235,.54) 100%)}
.hero-full .slot-note{top:clamp(92px,13vh,150px);color:var(--muted);z-index:1;transform:translateX(-50%)}
.hero-full .slot-note b{color:var(--ink)}
.hero-full__in{position:relative;z-index:4;width:100%;display:flex;flex-direction:column;gap:clamp(16px,2.2vh,28px)}
.hero-full .eyebrow{color:var(--muted)}
.hero-mark{margin:0;line-height:0}
.hero-mark img{width:82%;max-width:none;height:auto;animation:markIn 1.6s cubic-bezier(.16,.84,.24,1) .15s both}
@keyframes markIn{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
.hero-full__claim{font-weight:700;font-size:clamp(22px,2.6vw,44px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);overflow:hidden}
.hero-full__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,56px);align-items:end;padding-top:clamp(18px,2.6vh,34px);border-top:1px solid var(--line);margin-top:clamp(8px,2vh,24px)}
.hero-full__foot .lede{color:var(--ink)}
.hero-full__meta{color:var(--muted);text-align:right;max-width:32ch;justify-self:end;align-self:baseline}
.hero-full .hero__scroll{color:var(--muted)}
.nav--over{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;color:var(--ink)}
.nav--over .nav__links a,.nav--over .nav__burger{color:var(--ink)}
@media (max-width:900px){.hero-full__foot{grid-template-columns:1fr;gap:14px}.hero-full__meta{text-align:left;justify-self:start}}
@media (prefers-reduced-motion:reduce){.hero-full__bg,.hero-mark img{animation:none}}

/* ================= MOTION LAYER — v3 (editorial index, word reveals, corner meta) ================= */
/* hero corner address — fixed studio metadata, top-right of the hero frame */
.hero-addr{position:absolute;top:clamp(88px,13vh,132px);right:var(--pad);z-index:2;display:grid;gap:3px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,241,235,.62);text-align:right;animation:fadeSoft 1.6s ease 1s both}
@keyframes fadeSoft{from{opacity:0}to{opacity:1}}
@media (max-width:900px){.hero-addr{display:none}}

/* word-by-word masked reveal — [data-split] */
[data-split]{--wd:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.w>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform 1s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--d) * 42ms)}
[data-split].in .w>i{transform:none}

/* editorial partnership index — oversized rows, cursor-following peek */
.px{border-top:1px solid var(--line);margin-top:clamp(32px,4vw,64px)}
.sect--dark .px{border-color:var(--dark-line)}
.px__row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:clamp(14px,2.4vw,40px);padding:clamp(14px,1.7vw,26px) 0;border-bottom:1px solid var(--line);overflow:hidden}
.px__row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s cubic-bezier(.16,.84,.24,1);z-index:0}
.px__row:hover::before{transform:none}
.px__row>*{position:relative;z-index:1;transition:color .45s ease,transform .6s cubic-bezier(.16,.84,.24,1)}
.px__row:hover>*{color:var(--paper)}
.px__row:hover .px__pair{transform:translateX(clamp(10px,1.6vw,26px))}
.px__row:hover .px__idx,.px__row:hover .px__tag{color:rgba(243,241,235,.66)}
.px__idx{font-size:11px;letter-spacing:.2em;color:var(--muted);min-width:2.4em}
.px__pair{font-weight:700;font-size:clamp(20px,3.1vw,52px);line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.px__pair em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;text-transform:none;font-size:.82em;padding:0 .12em}
.px__tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:700px){.px__row{grid-template-columns:auto minmax(0,1fr)}.px__tag{display:none}}
.px__peek{position:fixed;top:0;left:0;width:clamp(180px,20vw,280px);aspect-ratio:3/4;pointer-events:none;z-index:700;opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .4s ease,transform .6s cubic-bezier(.16,.84,.24,1);overflow:hidden;background:var(--paper-2)}
.px__peek image-slot,.px__peek img,.px__peek video{width:100%;height:100%;object-fit:cover;--slot-bg:var(--paper-2);--slot-fg:#8b877e}
.px__row:hover .px__peek{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:900px){.px__peek{display:none}}
@media (prefers-reduced-motion:reduce){.w>i{transform:none;transition:none}.px__row::before,.px__row>*{transition:none}.px__peek{display:none}.hero-addr{animation:none}}

/* inline hero rotator — slots are taller than the glyph box so ascender/descender
   bleed from the neighbouring word stays inside its own slot instead of showing
   at the window's clipping edge. Text is centred in the slot; the extra height is
   pulled back out with negative margin so the line sits where it always did. */
.rot--inline{flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:.26em;margin-top:0;line-height:1}
.rot--inline .rot__win{height:1.34em;line-height:1;margin-block:-.17em;overflow:hidden}
.rot--inline .rot__stack{transform:translateY(calc(var(--i,0) * -1.34em));will-change:transform}
.rot--inline .rot__stack>span{height:1.34em;line-height:1;display:flex;align-items:center}

/* reels slider — vertical video, drag / snap / arrows */
.reels{overflow-x:auto;overflow-y:hidden;scroll-padding-left:var(--pad);scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.reels::-webkit-scrollbar{display:none}
.reels.drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.reels__track{display:flex;gap:clamp(12px,1.6vw,24px);padding:0 var(--pad);width:max-content}
.reels__item{flex:0 0 auto;width:clamp(210px,21vw,320px);scroll-margin-left:var(--pad);display:flex;flex-direction:column;gap:12px}
.reels__frame{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--paper-2)}
.reels__frame video,.reels__frame img,.reels__frame image-slot{display:block;width:100%;height:100%;object-fit:cover;--slot-bg:var(--paper-2);--slot-fg:#8b877e;transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.reels__item:hover .reels__frame video,.reels__item:hover .reels__frame img{transform:scale(1.03)}
.reels__play{position:absolute;left:14px;bottom:14px;padding:8px 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);background:rgba(9,9,9,.5);backdrop-filter:blur(6px);transition:background .3s ease}
.reels__play:hover{background:rgba(9,9,9,.78)}
.reels__item.playing .reels__play{background:var(--paper);color:var(--ink)}
.reels__cap{font-weight:700;font-size:clamp(14px,1.1vw,18px);letter-spacing:-.02em;text-transform:uppercase;line-height:1.15}
.reels__sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.reels__nav{display:flex;gap:8px;align-self:end}
.reels__arrow{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.reels__arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:700px){.reels__item{width:66vw}.reels__nav{display:none}}

/* partnership reel — visuals sliding through, full-bleed */
.preel{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,2.4vw,34px) 0}
.sect--dark .preel{border-color:var(--dark-line)}
.preel__track{display:flex;gap:clamp(12px,1.6vw,24px);width:max-content;animation:mq 64s linear infinite}
.preel:hover .preel__track{animation-play-state:paused}
.preel__item{flex:0 0 auto;width:clamp(200px,20vw,330px);display:flex;flex-direction:column;gap:12px}
.preel__frame{aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.preel__frame image-slot,.preel__frame img,.preel__frame video{width:100%;height:100%;object-fit:cover;--slot-bg:var(--paper-2);--slot-fg:#8b877e;transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.preel__item:hover .preel__frame>*{transform:scale(1.04)}
.preel__cap{font-weight:700;font-size:clamp(13px,1.05vw,17px);line-height:1.15;letter-spacing:-.02em;text-transform:uppercase}
.preel__cap em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;padding:0 .1em}
.preel__tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.preel__item{width:64vw}}
@media (prefers-reduced-motion:reduce){.preel__track{animation:none}.preel{overflow-x:auto}}

.footer__bottom em,.lede em,.menu__foot em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.footer__bottom span:last-child,.menu__foot span:last-child{text-transform:none}
.lede em{font-size:1.06em}
.display em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:1.06em;line-height:.8;padding-right:.05em}
.display--sent{text-transform:uppercase}
#enquiry .tm{align-items:start}
@media (min-width:821px){#enquiry .tm>div:first-child{position:sticky;top:120px}}
.reels__empty{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line)}

/* ---- image carousel (used where there is no video) ---- */
.gal{position:relative;width:100%;height:100%;overflow:hidden;background:var(--paper-2)}
.gal__track{display:flex;height:100%;width:100%;transform:translate3d(calc(var(--i,0) * -100%),0,0);transition:transform 1.05s cubic-bezier(.16,.84,.24,1)}
.gal__cell{flex:0 0 100%;height:100%}
.gal__cell image-slot,.gal__cell img{display:block;width:100%;height:100%;object-fit:cover;--slot-bg:var(--paper-2);--slot-fg:#8b877e}
.art-hero .gal__dots{display:none}
.gal__dots{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;z-index:2}
.gal__dots>*{display:block;width:18px;height:2px;padding:0;border:0;background:rgba(243,241,235,.42);transition:background .3s}
.gal__dots>*.on{background:var(--paper)}
.gal--lg .gal__dots{left:22px;bottom:22px;gap:8px}
.gal--lg .gal__dots>*{width:28px;height:3px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.gal__track{transition:none}}

/* ---- branded portfolio cards ---- */
.card--work .card__title{font-size:clamp(24px,2.2vw,36px)}
.card--work.card--hero .card__title{font-size:clamp(34px,4.4vw,72px)}
.card--work .card__hook{font-size:16px;max-width:52ch}

/* ---- service offer ---- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:clamp(36px,4vw,68px)}
.svc__item{background:var(--paper);padding:clamp(26px,3vw,48px) clamp(22px,2.6vw,44px);display:flex;flex-direction:column;gap:16px}
.svc__title{font-weight:700;font-size:clamp(22px,2.2vw,34px);line-height:1.02;letter-spacing:-.035em;text-transform:uppercase;max-width:24ch;text-wrap:balance}
.svc__copy{color:var(--muted);font-size:16px;line-height:1.55;max-width:46ch}
.svc__list{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.svc__list span{white-space:nowrap}
.svc--tiers{grid-template-columns:repeat(3,1fr)}
.svc__step{font-size:11px;letter-spacing:.18em;color:var(--muted)}
@media (max-width:820px){.svc{grid-template-columns:1fr}.svc--tiers{grid-template-columns:1fr}}

/* ---- two-sided model, compact ---- */
.duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr);gap:clamp(26px,3.4vw,64px);align-items:start}
.duo__head .statement{max-width:16ch}
.duo__lede{margin-top:18px;max-width:32ch;font-size:16px}
.duo__rows{border-top:1px solid var(--line)}
.duo__row{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:10px clamp(18px,2.2vw,40px);padding:clamp(18px,2.1vw,30px) 0;border-bottom:1px solid var(--line)}
.duo__body{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.duo__row>.eyebrow{font-weight:700;font-size:clamp(22px,2.1vw,34px);line-height:1;letter-spacing:-.035em;color:var(--ink)}
.duo__claim{font-weight:400;font-size:clamp(15px,.19vw + 14.26px,17px);line-height:1.35;letter-spacing:0;text-transform:none;max-width:34ch;color:var(--muted)}
.duo__copy{font-size:15px;max-width:46ch}
@media (max-width:900px){.duo,.duo__row{grid-template-columns:1fr}}

/* ---- client logo stripe ---- */
.stripe{display:grid;gap:clamp(16px,1.9vw,32px);margin-top:clamp(28px,3.4vw,52px);--mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.stripe__row{overflow:hidden;-webkit-mask-image:var(--mask);mask-image:var(--mask)}
.stripe__track{display:flex;align-items:center;gap:clamp(34px,4.4vw,78px);width:max-content;animation:stripe-run var(--dur,52s) linear infinite}
.stripe__row--rev .stripe__track{animation-direction:reverse}
.stripe:hover .stripe__track{animation-play-state:paused}
.stripe__cell{flex:0 0 auto;height:clamp(30px,3.1vw,46px);display:flex;align-items:center;justify-content:center}
.stripe__cell img{height:100%;width:auto;max-width:clamp(90px,11vw,168px);object-fit:contain;opacity:.62;transition:opacity .4s}
/* stacked lockups: taller cell, capped width, so optical weight matches wordmarks */
.stripe__cell[data-shape="stacked"]{height:clamp(52px,5.4vw,80px)}
.stripe__cell[data-shape="stacked"] img{max-width:clamp(64px,7vw,104px)}
.stripe__cell[data-shape="square"]{height:clamp(40px,4.2vw,62px)}
.stripe__cell[data-shape="square"] img{max-width:clamp(74px,8vw,124px)}
.stripe__cell:hover img{opacity:1}
@keyframes stripe-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.stripe__track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}

/* ---- talent profile focus list ---- */
.focus{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line);padding-top:22px}
.focus h2{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 16px}
.focus ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.focus li{font-size:15px;line-height:1.4;padding-left:16px;position:relative}
.focus li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--ink)}
@media (max-width:640px){.focus ul{grid-template-columns:1fr}}

/* ================= CRAFT CORRECTIONS ================= */
/* press feedback lands on pointer-down, not on release */
.btn:active{transform:scale(.985)}
.btn{transition:opacity .25s ease,transform .12s ease-out}
.cta-link:active{opacity:.6}
.filters button:active,.reels__arrow:active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.reels__play:active{background:rgba(9,9,9,.85)}

/* carousel dots carried a 18x2px hit area — pad it out to a real target */
.gal__dots{gap:0;margin:0 -4px -12px}
.gal__dots>*{position:relative;background:none;width:auto;height:auto;padding:12px 4px}
.gal__dots>*::after{content:"";display:block;width:18px;height:2px;background:rgba(243,241,235,.42);transition:background .3s}
.gal__dots>*.on::after{background:var(--paper)}
.gal--lg .gal__dots{gap:0;margin:0 -5px -14px}
.gal--lg .gal__dots>*{padding:14px 5px}
.gal--lg .gal__dots>*::after{width:28px;height:3px}

/* tracking is size-specific: display tracking this tight only works at large sizes */
@media (max-width:760px){
.display{letter-spacing:-.028em;line-height:.9}
.display--md{letter-spacing:-.028em}
.statement{letter-spacing:-.024em}
.footer__mark{letter-spacing:-.038em}
.art-title{letter-spacing:-.026em}
.menu a{letter-spacing:-.026em}
}

/* translucency + contrast preferences (§14) */
@media (prefers-reduced-transparency:reduce){
.nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav--over{background:rgba(9,9,9,.92)}
.reels__play{background:rgba(9,9,9,.9);backdrop-filter:none}
.interrupt__scrim{background:rgba(9,9,9,.78)}
}
@media (prefers-contrast:more){
:root{--muted:#4A4740;--line:#B4AEA2;--dark-muted:#C9C4BA}
.nav{background:var(--paper);backdrop-filter:none}
.filters button{border-color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
.step>*,.btn,a{transition:none}
.gal__dots>*::after{transition:none}
}


/* ================= RESPONSIVE LAYER — fluid across phone / iPad / desktop =================
   Goal: no jolts while resizing. Type and rhythm interpolate continuously between
   390px and 1440px; breakpoints only change LAYOUT (column counts), never size. */

/* --- 1. fluid type that actually interpolates (the old vw middle terms never
       reached their max below ~1550px, so body copy was stuck at its floor) --- */
html,body{font-size:clamp(16px,.19vw + 15.26px,18px)}
.lede{font-size:clamp(17px,.476vw + 15.14px,22px)}
.body{font-size:clamp(15.5px,.238vw + 14.57px,18px)}
.step__copy{font-size:clamp(15px,.19vw + 14.26px,17px)}
.duo__copy{font-size:clamp(15px,.143vw + 14.44px,16.5px)}
.blocks p{font-size:clamp(16px,.286vw + 14.89px,19px)}
.reels__cap{font-size:clamp(14px,.381vw + 12.51px,18px)}
.nav__logo{width:clamp(104px,8.5vw,132px)}

/* --- 2. iPhone safe areas (notch / home indicator / landscape ears) --- */
:root{--pad:max(clamp(20px,4vw,72px),env(safe-area-inset-left),env(safe-area-inset-right))}
.nav__in{padding-top:max(16px,env(safe-area-inset-top))}
.menu{padding-top:max(var(--pad),calc(env(safe-area-inset-top) + 56px));padding-bottom:max(var(--pad),calc(env(safe-area-inset-bottom) + 56px))}
.menu__close{top:max(22px,calc(env(safe-area-inset-top) + 14px))}
.menu__foot{bottom:max(var(--pad),env(safe-area-inset-bottom))}
.footer{padding-bottom:max(32px,calc(env(safe-area-inset-bottom) + 20px))}

/* --- 3. touch behaviour --- */
html{-webkit-text-size-adjust:100%}
a,button,.reels__item,.card,.tcard{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  /* hover-only affordances would otherwise stick after a tap */
  .card:hover .card__frame>*,.tcard:hover .tcard__frame>*,.reels__item:hover .reels__frame video,
  .reels__item:hover .reels__frame img,.preel__item:hover .preel__frame>*,.tm__media>*{transform:none}
  .step:hover>*{transform:none}
  .cta-link:hover{gap:12px}
  .filters button:hover{color:var(--muted);border-color:var(--line)}
  .filters button.on{color:var(--paper);border-color:var(--ink)}
  .reels__play{background:rgba(9,9,9,.62)}
}
/* horizontal rails: native momentum, and let vertical swipes pass through */
.reels,.filters{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.filters{scroll-padding-inline:var(--pad)}

/* --- 4. menu must never trap content on short screens --- */
.menu{overflow-y:auto}
.menu nav{display:flex;flex-direction:column;gap:clamp(2px,1vh,10px)}

/* --- 5. iPad landscape (1024) was showing a 4-up roster; 3-up reads far better --- */
@media (max-width:1080px){.roster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.roster{grid-template-columns:repeat(2,1fr)}}

/* --- 6. iPad portrait: keep two columns where they still work, so the page
       does not collapse to a single ribbon the moment the nav goes to burger --- */
@media (max-width:900px) and (min-width:601px){
  .svc{grid-template-columns:1fr 1fr}
  .svc--tiers{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr 1fr}
  .trio{grid-template-columns:1fr}
}

/* --- 7. phone tier --- */
@media (max-width:600px){
  .sect{padding:clamp(56px,13vw,96px) 0}
  .sect--tight{padding:clamp(40px,9vw,64px) 0}
  .hero{padding-top:clamp(104px,26vw,140px)}
  .hero__display{margin:clamp(18px,5vw,28px) 0 clamp(22px,6vw,34px)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:26px}
  .footer__mark{margin:clamp(36px,10vw,56px) 0 20px}
  .form{gap:18px}
  .btn{padding:16px 24px;justify-content:center;text-align:center}
  .gal--lg .gal__dots{left:14px;bottom:14px}
  .stripe{gap:14px}
}

/* --- 8. hero rotator: a wrapped word inside the fixed-height window would clip --- */
.rot--inline .rot__stack>span{white-space:nowrap}
@media (max-width:600px){.hero-full__claim{font-size:clamp(19px,5.4vw,26px)}}

/* --- 9. short landscape (phone on its side): 100svh + a full-width wordmark
       overflowed a clipped hero. Let the hero size to its content instead. --- */
@media (orientation:landscape) and (max-height:620px){
  .hero-full{min-height:auto;padding:clamp(72px,16vh,96px) 0 clamp(18px,4vh,28px)}
  .hero-mark img{max-width:min(100%,440px)}
  .hero-full__claim{font-size:clamp(18px,2.6vh,24px)}
  .hero-full__in{gap:clamp(10px,2vh,18px)}
  .hero-addr,.hero__scroll{display:none}
  .hero-full::after{height:clamp(80px,18vh,140px)}
  .interrupt{min-height:auto;padding:clamp(56px,14vh,96px) 0}
}

/* --- 10. full-bleed rails: 100vw overflows by the scrollbar width on desktop,
       which made the page twitch during resize. Measure against the wrapper. --- */
.preel{width:auto;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
@supports (width:100cqw){.preel{width:auto}}


/* ================= MOBILE MEDIA SECTIONS =================
   Reel rails and the full-bleed interruption were sized in desktop proportions:
   a 9/16 frame at 66vw is 117vw tall, so each tile became a full screen of video,
   and the interruption's LEFT-TO-RIGHT scrim put the headline over the bright
   side of the image once the layout went single-column. */

/* --- reel rails --- */
@media (max-width:700px){
  .reels__track{gap:10px}
  .reels__item{width:min(58vw,300px)}
  .reels__frame{aspect-ratio:auto;height:min(96vw,470px)}
  .reels__cap{font-size:14px}
  .reels__sub{font-size:10.5px;letter-spacing:.14em}
  .reels__play{left:10px;bottom:10px;padding:7px 11px;font-size:10.5px}
}
@media (max-width:420px){
  .reels__item{width:66vw}
  .reels__frame{height:min(112vw,440px)}
}

/* --- authority interruption --- */
@media (max-width:820px){
  .interrupt{min-height:auto;padding:clamp(48px,11vw,80px) 0}
  .interrupt .display{max-width:16ch}
  /* portrait needs a vertical scrim: the horizontal one left the type
     sitting on the lit half of the frame */
  .interrupt__scrim{background:linear-gradient(to bottom,rgba(9,9,9,.55) 0%,rgba(9,9,9,.72) 45%,rgba(9,9,9,.9) 100%)}
  .interrupt--media{min-height:42svh}
}
@media (max-width:520px){
  .interrupt--media{min-height:38svh}
  .interrupt .display{max-width:14ch}
}


/* hero on phones: 100svh + a 1.16 zoom made the video read as a wall of
   footage with the wordmark crushed into the bottom. Shorter frame, less crop. */
@media (max-width:700px){
  .hero-full{min-height:auto;padding:clamp(112px,26vw,150px) 0 clamp(30px,7vw,44px)}
  .hero-full__bg{transform:scale(1.1) translate(3%,3%)}
  .hero-full::after{height:clamp(70px,14vw,120px)}
  .hero-mark img{max-width:min(100%,420px)}
  .hero-addr{display:none}
  .hero-full__foot{padding-top:18px;margin-top:6px}
  .hero-full__meta{max-width:100%;font-size:10.5px;letter-spacing:.14em}
}
@media (max-width:700px){
  @keyframes markIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}


/* Parallax translates these media up to ~18px inside a fixed-ratio frame, which
   exposed the frame background as a strip at the bottom of every roster card.
   Give the media vertical slack to travel in instead of sizing it exactly. */
.tcard__frame>img,.tcard__frame>video,.tcard__frame>image-slot,
.card__frame>img,.card__frame>video,.card__frame>image-slot,
.tm__media>img,.tm__media>video,.tm__media>image-slot,
.art-hero>img,.art-hero>video,.art-hero>image-slot{height:calc(100% + 48px);margin-top:-24px}
@media (prefers-reduced-motion:reduce),(max-width:759px){
.tcard__frame>img,.tcard__frame>video,.tcard__frame>image-slot,
.card__frame>img,.card__frame>video,.card__frame>image-slot,
.tm__media>img,.tm__media>video,.tm__media>image-slot,
.art-hero>img,.art-hero>video,.art-hero>image-slot{height:100%;margin-top:0}
}


/* hero foot carrying two paragraphs instead of lede + meta: the statement holds
   a short measure, the supporting line fills the column that was sitting empty */
.hero__foot--split{align-items:baseline}
.hero__foot--split .lede{max-width:24ch}
.hero__foot--split .body{max-width:46ch}
@media (max-width:820px){.hero__foot--split{gap:16px}.hero__foot--split .lede,.hero__foot--split .body{max-width:52ch}}


/* Talent "why" interruption: shorter frame than the homepage statement band */
#transformation.interrupt{min-height:auto;padding:clamp(56px,7vw,96px) 0}
@media (max-width:820px){#transformation.interrupt--media{min-height:auto}}
@media (max-width:520px){#transformation.interrupt--media{min-height:auto}}



@media (max-width:820px){.wrap[style*="1fr auto"]{grid-template-columns:1fr!important;align-items:start!important;gap:24px!important}.wrap[style*="1fr auto"]>.btn{justify-self:start;width:auto;line-height:1.2}}

/* signature: one grotesk across the whole line */
.display--sent em,.footer__bottom em,.menu__foot em{font-family:var(--font);font-style:normal;text-transform:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;padding:0}

@media (max-width:700px){.card__frame,.card--half .card__frame,.card--third .card__frame{aspect-ratio:4/3}.card--hero .card__frame{aspect-ratio:16/10}.cases{gap:28px}.card__title{font-size:20px}}