/* SD Creative Studio · styles
   Tokens, then the hero, then the page, then the gates. */

:root{
  --canvas:#FFFDF7;
  --canvas-2:#F2EDE1;
  --panel:#F7F3EA;
  --ink:#1C1915;
  --ink-2:#26221C;
  --accent:#CBA10E;
  --accent-hover:#B8920C;
  --accent-muted:rgba(203,161,14,.16);
  --gold-text:#9C7C09;          /* gold for text on cream: 4.0:1, large text only */
  --text:#1C1915;
  --text-2:#6F6654;
  --on-dark:#FFFDF7;
  --on-dark-2:#BFB6A4;
  --line:#E3DCCB;
  --line-strong:#8E8470;
  --line-dark:rgba(255,253,247,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(255,253,247,.95),0 3px 12px rgba(255,253,247,.8),0 10px 40px rgba(255,253,247,.85);
  /* Fraunces replaces Bodoni Moda: same editorial character, but its strokes
     hold up at small sizes and on lower-contrast screens, where a didone's
     hairlines disappear. */
  --font-d:"Fraunces",Georgia,"Times New Roman",serif;
  --label:#57503F;      /* small mono labels: 7.3:1 on cream, was 5.5:1 */
  --font-b:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-m:"DM Mono","SFMono-Regular",Consolas,monospace;
  --gutter:clamp(24px,6vw,96px);
  --nav-h:92px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text);font-family:var(--font-b);font-size:1.0625rem;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;opacity:0;animation:pagein 1s var(--ease) forwards}
@keyframes pagein{to{opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
button{font:inherit}
.mono{font-family:var(--font-m);font-weight:400}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:fixed;top:-60px;left:16px;z-index:100;background:var(--ink);color:var(--canvas);padding:10px 16px;border-radius:6px;text-decoration:none;font-size:.85rem;transition:top .3s}
.skip:focus{top:12px}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- the paper environment (one fixed layer behind everything) ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env::before{content:"";position:absolute;inset:-30%;background:radial-gradient(ellipse 40% 35% at 30% 30%,rgba(203,161,14,.10),transparent 70%),radial-gradient(ellipse 45% 40% at 75% 70%,rgba(111,102,84,.08),transparent 70%);animation:envdrift 80s ease-in-out -20s infinite alternate}
.env::after{content:"";position:absolute;inset:0;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envdrift{from{transform:translate(-3%,-2%) rotate(0deg)}to{transform:translate(3%,2%) rotate(3deg)}}
.nav,main,.footer,.marquee{position:relative;z-index:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-b);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;line-height:1;text-shadow:none;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn-gold{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn-gold:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--ink);color:var(--canvas);border-color:var(--ink);transform:translateY(-1px)}
.dark .btn-ghost{color:var(--on-dark);border-color:rgba(255,253,247,.5)}
.dark .btn-ghost:hover{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}
.btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);transition:background .5s var(--ease),border-color .5s,box-shadow .5s}
.nav.scrolled{background:rgba(255,253,247,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* A soft cream fade under the transparent nav. The hero footage carries its
   own sparkles and pencil marks, and at some widths one lands beside the
   wordmark and reads as a blemish on the logo. This keeps the brand on clean
   ground without flattening the footage, and fades out once the solid bar
   takes over. */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-64px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,253,247,.94) 0%,rgba(255,253,247,.74) 42%,rgba(255,253,247,.3) 74%,rgba(255,253,247,0) 100%);transition:opacity .5s var(--ease)}
.nav.scrolled::before{opacity:0}
.nav-inner{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter)}
/* the full stacked lockup carries its own wordmark, so the header shows the
   logo alone and gives it the height it needs to stay readable */
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand img{height:58px;width:auto}
.nav-links{display:flex;gap:34px}
.nav-links a{position:relative;text-decoration:none;font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.btn-nav{padding:13px 22px}
.menu-btn{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;margin-right:-10px}
.menu-btn span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);top:50%;transition:transform .4s var(--ease)}
.menu-btn span:first-child{transform:translateY(-5px)}
.menu-btn span:last-child{transform:translateY(4px)}
.menu-btn[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
.menu{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--line);padding:24px var(--gutter) 32px;display:none;flex-direction:column;gap:18px}
.menu a{text-decoration:none;color:var(--ink);font-family:var(--font-d);font-weight:600;font-size:1.7rem}
.menu a.btn{font-family:var(--font-b);font-size:.78rem;align-self:flex-start;margin-top:8px}
body.menu-open .menu{display:flex}

/* ---------- the gold thread: the page spine ---------- */
.spine{position:fixed;left:calc(var(--gutter)/2 - 1px);top:0;bottom:0;width:2px;z-index:40;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.spine.show{opacity:1}
.spine-line{position:absolute;top:calc(var(--nav-h) + 16px);bottom:28px;left:0;width:2px;background:var(--line)}
.spine-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0))}
.spine-nodes{list-style:none;margin:0;padding:0;position:absolute;top:calc(var(--nav-h) + 16px);bottom:28px;left:0;width:2px}
.spine-nodes li{position:absolute;left:-5px;top:var(--y,0);width:12px;height:12px;border-radius:50%;background:var(--canvas);border:2px solid var(--line-strong);transition:background .4s,border-color .4s,transform .4s var(--ease);pointer-events:auto}
.spine-nodes li a{position:absolute;inset:-6px;display:block;border-radius:50%}
.spine-nodes li span{position:absolute;left:14px;top:-2px;font-family:var(--font-m);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;opacity:0;transition:opacity .4s;writing-mode:vertical-rl;transform-origin:left top}
.spine-nodes li.active{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
.spine-nodes li.done{background:var(--accent);border-color:var(--accent)}
.spine-nodes li.active span{opacity:1}
.spine-end{position:absolute;left:-4px;bottom:22px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.spine-top{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;display:none}
.spine-top-fill{height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- hero ---------- */
/* Scrubbed by ordinary scrolling, so the journey needs a long runway: each
   beat holds for several flicks rather than flashing past. */
.hero{position:relative;height:1100vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas);isolation:isolate}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--canvas)}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);will-change:transform;pointer-events:none}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(255,253,247,0) 40%,rgba(255,253,247,.38) 100%)}
.ring{position:absolute;right:var(--gutter);bottom:26px;width:26px;height:26px;color:var(--accent);transform:rotate(-90deg);opacity:.95;transition:opacity .6s}
.ring circle{transition:stroke-dashoffset .15s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.tag{position:absolute;top:calc(var(--nav-h) + 10px);right:var(--gutter);z-index:3;background:rgba(255,253,247,.62);border:1px solid rgba(142,132,112,.35);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:7px 11px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}

.band{position:absolute;inset:0;opacity:0;pointer-events:none;text-shadow:var(--tshadow);z-index:2}
.band.on{pointer-events:auto}
.band .btn{text-shadow:none}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1))}
/* the tagline only holds the opening frames, which are near-white paper, so
   the scrim is light and dissolves with the band rather than sitting over the
   footage for the whole journey */
.b1::before{background:linear-gradient(to bottom,rgba(255,253,247,.86) 0%,rgba(255,253,247,.72) 28%,rgba(255,253,247,.38) 46%,rgba(255,253,247,.1) 60%,rgba(255,253,247,0) 70%)}
.jband::before{background:linear-gradient(to top,rgba(255,253,247,.94) 0%,rgba(255,253,247,.86) 30%,rgba(255,253,247,.5) 48%,rgba(255,253,247,0) 66%)}
.b7::before{background:linear-gradient(to bottom,rgba(255,253,247,.86) 0%,rgba(255,253,247,0) 30%,rgba(255,253,247,0) 64%,rgba(255,253,247,.9) 100%)}

/* the tagline anchors the top of the frame for the whole journey, so it sits
   at the top rather than centred, leaving the lower half to the footage and
   the journey words */
.b1{display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--nav-h) + 5vh) var(--gutter) 0}
.bcue::before{display:none}
.kicker{font-family:var(--font-m);font-weight:500;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-bottom:1rem}
.h-hero{font-family:var(--font-b);font-variation-settings:"wdth" 125,"wght" 800;font-weight:800;font-size:clamp(2.9rem,8vw,7.8rem);line-height:.98;letter-spacing:-.005em;text-transform:uppercase;margin:.15em 0 .5em}
.h-hero .line{display:block}
.grow{position:relative;display:inline-block}
.uline{position:absolute;left:0;bottom:-.08em;width:100%;height:.14em;overflow:visible}
.uline path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ku,0))}
.b1{--ku:clamp(0,(var(--k,0) - .62)*2.8,1)}
.cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--label);text-shadow:none}
.chev{width:8px;height:8px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);animation:bob 2.4s var(--ease) -.6s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(6px) rotate(45deg);opacity:1}}

.jline{position:absolute;left:var(--gutter);bottom:21vh;max-width:26ch;font-family:var(--font-d);font-style:italic;font-weight:500;font-size:clamp(1.5rem,2.7vw,2.6rem);line-height:1.15;color:var(--ink)}

.rail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:8vh;z-index:2;opacity:0;pointer-events:none;isolation:isolate}
.rail::before{content:"";position:absolute;inset:-40px -10% -9vh;z-index:-1;background:linear-gradient(to top,rgba(255,253,247,.92),rgba(255,253,247,.7) 60%,rgba(255,253,247,0))}
.rail-words{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0 0 18px}
.rail-words li{font-family:var(--font-b);font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.8rem,1.55vw,1.4rem);color:var(--text-2);opacity:.45;transition:opacity .5s var(--ease),color .5s,transform .5s var(--ease)}
.rail-words li.done{opacity:.75;color:var(--ink)}
.rail-words li.active{color:var(--ink);opacity:1;transform:translateY(-4px)}
.rail-line{position:relative;height:2px;background:var(--line)}
.rail-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--t,0))}
.rail-nodes{position:absolute;left:0;right:0;bottom:-5px;height:12px}
.rail-nodes i{position:absolute;top:0;width:12px;height:12px;border-radius:50%;background:var(--canvas);border:2px solid var(--line-strong);transform:translateX(-50%);transition:background .4s,border-color .4s,transform .4s var(--ease)}
.rail-nodes i.done{background:var(--accent);border-color:var(--accent)}
.rail-nodes i.active{background:var(--accent);border-color:var(--accent);transform:translateX(-50%) scale(1.3)}

.h-settle{position:absolute;top:calc(var(--nav-h) + 5vh);left:var(--gutter);right:var(--gutter);text-align:center;font-family:var(--font-d);font-weight:700;font-size:clamp(2.2rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.01em}
.settle-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:7vh;text-align:center}
.settle-sub{font-family:var(--font-b);font-size:clamp(1rem,1.3vw,1.2rem);color:var(--text-2);max-width:52ch;margin:0 auto 22px}
.b7 .settle-sub{--ks:clamp(0,(var(--k,0) - .45)*3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
.b7 .btns{--kb:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px));justify-content:center}

/* text choreography: transform and opacity only, all off the band's --k */
.split .vis{display:inline}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.e-write .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*4,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.15em))}
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*26px))}
.e-slide .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*48px))}
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - .1)*3.2,1);opacity:var(--kc);transform:scale(calc(.6 + .52*var(--kc) - .12*var(--ks)))}
.e-depth .vis{display:inline-block;--kc:clamp(0,var(--k,0)*1.3,1);opacity:var(--kc);transform:scale(calc(.86 + .14*var(--kc)))}

/* the static hero (phones, portrait tablets, reduced motion) */
.hero-static{display:none;position:relative;min-height:100svh;padding:calc(var(--nav-h) + 20px) var(--gutter) 40px;background:var(--canvas)}
.hs-inner{margin:auto;width:100%;max-width:560px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.h-hero-static{font-family:var(--font-b);font-variation-settings:"wdth" 125,"wght" 800;font-weight:800;text-transform:uppercase;font-size:clamp(2.3rem,10.5vw,3.8rem);line-height:.98;letter-spacing:-.005em}
.h-hero-static span{display:block}
.h-hero-static .grow{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.08em;text-underline-offset:.12em}
/* sized so all five words hold one line on a 375px phone rather than
   leaving MARKETING orphaned underneath */
.hs-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;list-style:none;padding:0;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.hs-rail li+li::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin:0 7px;vertical-align:middle}
.hs-logo{width:min(220px,55%);margin:10px 0}
.hero-static .settle-sub{margin-bottom:6px}
.hero-static .btns{flex-direction:column;width:100%;max-width:320px}
.hero-static .btn{width:100%}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:var(--canvas);overflow:hidden;padding:18px 0}
.mq-track{display:flex;align-items:center;gap:44px;width:max-content;padding-left:44px;animation:mq 42s linear infinite;animation-play-state:paused}
.marquee.live .mq-track{animation-play-state:running}
.mq-track span{font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.spark{display:inline-block;width:11px;height:11px;background:var(--accent);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);flex:none}
@keyframes mq{to{transform:translateX(-33.3333%)}}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(5rem,12vh,9rem) 0;scroll-margin-top:var(--nav-h)}
.alt{background:var(--canvas-2)}
.dark{background:var(--ink);color:var(--on-dark)}
.dark .kicker{color:var(--on-dark-2)}
.dark .sub{color:var(--on-dark-2)}
.dark .gold{color:var(--accent)}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin:0 auto;position:relative}
.wrap.narrow{width:min(780px,100% - 2*var(--gutter))}
.sec-head{max-width:860px;margin-bottom:clamp(2.5rem,6vh,4rem)}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .h2{margin-inline:auto}
.h2{font-family:var(--font-d);font-weight:700;font-size:clamp(2.3rem,4.6vw,4.4rem);line-height:1.04;letter-spacing:-.012em;margin:0 0 1.2rem;max-width:18ch}
.gold{font-style:italic;font-weight:600;color:var(--gold-text);white-space:nowrap;background:linear-gradient(var(--accent),var(--accent)) no-repeat left 96%/0% 2px;transition:background-size 1.1s var(--ease) .55s;padding-bottom:.04em}
.sec.in .gold{background-size:100% 2px}
.body{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.65;max-width:58ch;color:var(--text)}
.dark .body{color:var(--on-dark)}
.sub{font-family:var(--font-d);font-style:italic;font-weight:500;font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.4;color:var(--text-2);max-width:46ch}
.cue-h{display:flex;align-items:center;gap:10px;margin-top:1.4rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.cue-drag,.cue-touch{display:none}

/* gallery arrows: a mouse at a narrow window has no swipe and no scrollbar,
   so the strip needs real controls */
.track-nav{display:none;gap:10px;margin-top:16px}
.tnav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;position:relative;transition:background .3s,border-color .3s,transform .3s var(--ease),opacity .3s}
.tnav:hover:not(:disabled){background:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.tnav:disabled{opacity:.3;cursor:default}
.tnav::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1.6px solid var(--ink);border-right:1.6px solid var(--ink)}
.tnav:hover:not(:disabled)::before{border-color:var(--canvas)}
.tprev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.tnext::before{transform:translate(-65%,-50%) rotate(45deg)}
.arrow{width:26px;height:1px;background:var(--text-2);position:relative}
.arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--text-2);border-right:1px solid var(--text-2);transform:rotate(45deg)}

/* entrances: choreography via .in, retired via .done */
.sec .part{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.sec.in .part{opacity:1;transform:none}
.sec.done .part{transition-delay:0s}

/* the swoosh from the logo, drawn faint behind two headlines */
.swoosh{position:absolute;left:50%;top:-10%;width:min(900px,120%);transform:translateX(-50%);opacity:.35;pointer-events:none;z-index:0}
.swoosh path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease) .2s}
.sec.in .swoosh path{stroke-dashoffset:0}
.sec.in .swoosh{animation:breathe 7s ease-in-out -2s infinite alternate}
@keyframes breathe{from{opacity:.22}to{opacity:.42}}
.swoosh-dark{opacity:.25;top:-20%}
.contact .wrap{position:relative}
/* :not(.swoosh) matters: a bare position:relative here would drop the decorative
   curve back into the flow and open a few hundred px of dead space above the headline */

/* gold flecks in the dark sections */
.flecks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.flecks i{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:0;animation:fleck var(--d,16s) linear var(--dl,-4s) infinite;animation-play-state:paused}
.sec.live .flecks i{animation-play-state:running}
.flecks i:nth-child(1){--x:8%;--y:80%;--d:18s;--dl:-2s}
.flecks i:nth-child(2){--x:22%;--y:90%;--d:22s;--dl:-9s}
.flecks i:nth-child(3){--x:37%;--y:70%;--d:16s;--dl:-5s}
.flecks i:nth-child(4){--x:52%;--y:95%;--d:24s;--dl:-13s}
.flecks i:nth-child(5){--x:64%;--y:75%;--d:19s;--dl:-7s}
.flecks i:nth-child(6){--x:78%;--y:88%;--d:21s;--dl:-16s}
.flecks i:nth-child(7){--x:88%;--y:66%;--d:17s;--dl:-3s}
.flecks i:nth-child(8){--x:94%;--y:92%;--d:23s;--dl:-11s}
@keyframes fleck{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.5}50%{transform:translate(18px,-70px) scale(1)}90%{opacity:.35}100%{transform:translate(-12px,-150px) scale(.7);opacity:0}}

/* ---------- showreel ---------- */
.reel{position:relative;width:min(100%,calc(78vh*16/9));aspect-ratio:16/9;margin:0 auto;border-radius:6px;overflow:hidden;background:var(--ink-2)}
.reel-mask{position:absolute;inset:0;overflow:hidden}
.reel-poster{position:absolute;inset:-9% 0;background:radial-gradient(ellipse 50% 60% at 50% 55%,rgba(203,161,14,.2),transparent 70%),var(--ink-2);background-size:cover;background-position:center;will-change:transform}
.reel-poster::after{content:"";position:absolute;inset:0;background:url("logo-mark.png") center/min(28%,220px) no-repeat;opacity:.12}
.reel.has-poster .reel-poster::after{display:none}
#reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.reel.playing #reel-video{opacity:1}
.reel.playing .reel-poster,.reel.playing .play{opacity:0;pointer-events:none}
.play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:transparent;border:0;color:var(--canvas);cursor:pointer;transition:opacity .5s}
.play[aria-disabled="true"]{cursor:default}
.play-ring{position:relative;width:96px;height:96px;border-radius:50%;border:1.5px solid rgba(255,253,247,.7);display:grid;place-items:center;transition:transform .5s var(--ease),background .5s}
.play-ring::before{content:"";width:0;height:0;border-left:18px solid var(--accent);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.play-ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:pulse 3.6s ease-out -1.2s infinite;animation-play-state:paused}
.sec.live .play-ring::after{animation-play-state:running}
.play:not([aria-disabled="true"]):hover .play-ring{transform:scale(1.08);background:rgba(203,161,14,.14)}
.play-label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2)}
.reel-empty .play-ring{opacity:.4}
.reel-empty .play-ring::after{display:none}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.55);opacity:0}}

/* ---------- slots (designed empty states until the real work lands) ---------- */
.slot{position:relative;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;color:var(--text-2);transition:border-color .4s}
.slot span{font-family:var(--font-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.slot small{font-family:var(--font-m);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.slot::before{content:"";position:absolute;inset:12px;border:1px dashed var(--line-strong);border-radius:4px;opacity:.45;pointer-events:none}
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease),transform 1.2s var(--ease)}
.slot.seen img,.slot.seen video{clip-path:inset(0 0 0 0)}
.slot.filled::before,.slot.filled span,.slot.filled small{display:none}
.dark .slot{background:var(--ink-2);border-color:var(--line-dark)}

/* ---------- graphic design: the sideways gallery ---------- */
.design{padding:0}
.design-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,4vh,3rem);overflow:hidden;padding-top:var(--nav-h)}
.design-head{margin-bottom:0}
.design-head .h2{margin-bottom:.6rem}
.track{display:flex;gap:clamp(18px,2.4vw,36px);list-style:none;margin:0;padding:0 var(--gutter);will-change:transform}
/* every card is sized by height and takes its width from the real
   artwork's aspect, so the row reads as four different objects */
.card{flex:none;display:flex;flex-direction:column;gap:14px;--h:min(60vh,44vw)}
.card .slot{height:var(--h);width:auto}
.c-brochure .slot{aspect-ratio:4/3}
.c-standee .slot{aspect-ratio:1080/1461}
.c-stationery .slot{aspect-ratio:3000/1980}
.c-packaging .slot{aspect-ratio:1/1}
.card-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.card-meta span{font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.card-meta p{font-family:var(--font-d);font-style:italic;font-weight:500;font-size:1.15rem;color:var(--ink)}
.card .slot img{transform:scale(1.03)}
.card:hover .slot img{transform:scale(1)}

/* ---------- social ---------- */
.split-2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.split-2.rev{grid-template-columns:.95fr 1.05fr}
.points{list-style:none;padding:0;margin:1.6rem 0 2rem;max-width:46ch}
.points li{padding:12px 0 12px 28px;border-top:1px solid var(--line);position:relative;font-weight:500}
.points li:last-child{border-bottom:1px solid var(--line)}
.points li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;transform:translateY(-50%);background:var(--accent);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
/* the 3x3 campaign grid. The posts are 4:5, so the tiles are 4:5 and
   nothing gets cropped. */
.grid-wrap{will-change:transform}
.feed-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:14px;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot.fourfive{aspect-ratio:4/5;border-radius:3px}
.slot.fourfive::before{inset:8px}
.slot.fourfive small{font-size:.58rem}
.feed-cue{margin-top:14px;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--label);text-align:right}

/* ---------- video editing ---------- */
/* sized by height so three portrait cards spread across the full column
   instead of leaving a dead strip on the right */
.reels{display:flex;justify-content:space-between;gap:clamp(14px,2.4vw,32px);list-style:none;margin:0;padding:0}
.slot.tall{height:min(600px,64vh);aspect-ratio:9/16;width:auto;border-radius:14px}
.reel-card{position:relative}
.reel-card .slot video{cursor:pointer}
/* a sound badge that tells the truth: muted preview until the visitor asks */
.slot.tall.filled::after{content:"MUTED";position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--font-m);font-size:.56rem;letter-spacing:.16em;padding:6px 9px;border-radius:999px;background:rgba(8,8,15,.62);color:#FFFDF7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:background .3s,color .3s}
.slot.tall.sound::after{content:"SOUND ON";background:var(--accent);color:var(--ink)}

/* ---------- contact ---------- */
.contact .wrap>*:not(.swoosh){position:relative;z-index:1}
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.form{display:grid;gap:18px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);padding:0}
.opt{margin-left:6px;padding:2px 7px;border:1px solid rgba(255,253,247,.26);border-radius:999px;font-size:.56rem;letter-spacing:.14em;color:rgba(255,253,247,.55)}
.field legend{margin-bottom:8px}
input,textarea{width:100%;background:rgba(255,253,247,.04);border:1px solid rgba(255,253,247,.24);border-radius:6px;padding:14px 16px;color:var(--on-dark);font:inherit;font-size:1rem;transition:border-color .3s,background .3s;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,253,247,.06)}
::placeholder{color:rgba(255,253,247,.42)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,253,247,.24);border-radius:6px;cursor:pointer;transition:border-color .3s,background .3s;font-size:.95rem}
.check:has(input:checked){border-color:var(--accent);background:rgba(203,161,14,.1)}
.check input{accent-color:var(--accent);width:16px;height:16px;margin:0;padding:0}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{color:var(--on-dark-2);font-size:.74rem;letter-spacing:.04em}
/* the reply promise moved out of the headline area, so it lives by the button */
.form-promise{margin-top:-6px;font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2)}
.form.sent .form-promise{display:none}
.form-note.err{color:#E8B4A6}
.form-done{padding:26px;border:1px solid var(--accent);border-radius:6px}
.done-line{font-family:var(--font-d);font-size:1.6rem;margin-bottom:.4rem}
.done-sub{color:var(--on-dark-2)}
.done-sub a{color:var(--accent)}
.form.sent .row-2,.form.sent fieldset,.form.sent .field,.form.sent .form-foot{display:none}
.direct-list{list-style:none;padding:0;border-top:1px solid var(--line-dark);margin-top:0}
.direct-list li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line-dark)}
.direct-list span.mono{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.direct-list a{color:var(--on-dark);text-decoration:none;font-family:var(--font-d);font-size:1.2rem;border-bottom:1px solid transparent;transition:border-color .3s,color .3s;word-break:break-word}
.direct-list a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.thread-end{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:var(--accent);margin-top:60px;box-shadow:0 0 0 7px rgba(203,161,14,.18)}
.thread-end::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:44px;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(203,161,14,0),var(--accent))}

/* ---------- footer ---------- */
/* four columns that actually fill the width, then a rule and a bottom bar,
   so nothing wraps into an L-shape with a void beside it */
.footer{background:var(--ink);color:var(--on-dark-2);padding:clamp(3rem,7vh,5rem) 0 2rem;border-top:1px solid var(--line-dark)}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,4vw,3rem);align-items:start;padding-bottom:clamp(2rem,5vh,3.2rem)}
.foot-brand img{width:min(190px,60%);margin-bottom:16px}
.foot-tag{font-family:var(--font-d);font-style:italic;font-weight:500;color:var(--on-dark);font-size:1.22rem;margin-bottom:10px}
.foot-place{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.foot-head{font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
/* :not(.btn) matters: this rule outranks .btn-gold and would repaint the
   button's label in the muted link colour, leaving it unreadable on gold */
.foot-col a:not(.btn){text-decoration:none;color:var(--on-dark-2);font-weight:500;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;transition:color .3s var(--ease)}
.foot-col a:not(.btn):hover{color:var(--accent)}
.foot-cta{gap:16px}
.foot-cta .btn{padding:13px 22px}
.foot-mail{text-transform:none!important;letter-spacing:.02em!important;font-family:var(--font-d);font-size:.98rem!important;word-break:break-word}
.foot-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:14px 28px;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--line-dark)}
.foot-copy{font-size:.82rem}
.foot-proj{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.68}

/* ---------- the lightbox ---------- */
.lb-hit{position:absolute;inset:0;z-index:3;background:transparent;border:0;padding:0;cursor:zoom-in;transition:background .35s var(--ease)}
.lb-hit:hover{background:rgba(203,161,14,.14)}
.lb-hit::after{content:"";position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(8,8,15,.55) no-repeat center/12px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 15v5h-5M15 4h5v5M9 20H4v-5'/%3E%3C/svg%3E");opacity:0;transform:scale(.8);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lb-hit:hover::after,.lb-hit:focus-visible::after{opacity:1;transform:scale(1)}
body.lb-open{overflow:hidden}
/* Hidden by default and shown only by an explicit class. Relying on the
   hidden attribute alone is fragile: any display value on .lb outranks the
   UA rule and the overlay covers the whole page. Three guards now, so a
   stale or half-loaded stylesheet can never leave it stuck open. */
.lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(14,12,9,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lb[hidden]{display:none!important}
.lb.open{display:grid;animation:lbin .3s var(--ease)}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%;max-height:100%}
.lb-stage img{max-width:min(1200px,100%);max-height:calc(100vh - clamp(150px,22vh,210px));width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.lb-cap{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;justify-content:center;color:var(--on-dark);text-align:center}
.lb-cap .mono{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
#lb-text{font-family:var(--font-d);font-style:italic;font-size:1.05rem;color:var(--on-dark-2)}
.lb-count{color:var(--on-dark-2)!important}
.lb-close,.lb-nav{position:absolute;z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,253,247,.28);background:rgba(255,253,247,.06);cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.lb-close:hover,.lb-nav:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.lb-close{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.lb-close::before,.lb-close::after{content:"";position:absolute;left:50%;top:50%;width:19px;height:1.6px;background:var(--on-dark)}
.lb-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.lb-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lb-close:hover::before,.lb-close:hover::after{background:var(--ink)}
.lb-nav{top:50%;margin-top:-26px}
.lb-prev{left:clamp(8px,2vw,28px)}
.lb-next{right:clamp(8px,2vw,28px)}
.lb-nav::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-top:1.6px solid var(--on-dark);border-right:1.6px solid var(--on-dark)}
.lb-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.lb-next::before{transform:translate(-65%,-50%) rotate(45deg)}
.lb-nav:hover::before{border-color:var(--ink)}
@media (max-width:640px){
  .lb-nav{top:auto;bottom:clamp(12px,4vw,24px);margin-top:0;width:46px;height:46px}
  .lb-prev{left:22%}
  .lb-next{right:22%}
  .lb-stage img{max-height:calc(100vh - 250px)}
  .lb-cap{gap:6px;flex-direction:column}
}

/* audit hook: hides glyphs so the legibility audit can sample the real backdrop */
html.audit .band .vis,html.audit .band .kicker,html.audit .band .cue,html.audit .settle-sub,html.audit .b7 .btns,html.audit .rail-words{visibility:hidden}

/* ---------- the five static-hero gates (identical strings live in main.js) ----------
   Phones, portrait tablets and reduced motion get the designed still hero.
   No scroll-driven video, no gesture handling, and no film downloaded. */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{display:none}
  .hero-static{display:flex}
}

/* the gallery goes native under the same gates, plus narrow windows */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce),(max-width:900px){
  .design{padding:clamp(5rem,12vh,9rem) 0}
  .design-pin{height:auto!important}
  .design-sticky{position:static;height:auto;overflow:visible;padding-top:0}
  /* scroll-padding keeps snap from eating the track's own lead-in padding */
  .track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;padding-bottom:12px;transform:none!important;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:start;--h:min(62vw,54vh)}
  .track{cursor:grab}
  .track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
  .track.dragging .lb-hit{cursor:grabbing}
  .cue-desk{display:none}
  .cue-drag{display:inline}
  .track-nav{display:flex}
  .cue-h .arrow{display:none}
}
/* a real touchscreen swipes natively, so it gets the swipe wording and no arrows */
@media (pointer:coarse) and (max-width:1024px){
  .cue-drag{display:none}
  .cue-touch{display:inline}
  .track-nav{display:none}
  .track{cursor:auto}
}

/* shallow desktop windows keep the scrub but lose the small overlays */
@media (max-height:560px){.cue,.tag{display:none}}

/* ---------- spine visibility ---------- */
@media (max-width:1023px),(pointer:coarse){
  .spine{display:none}
  .spine-top{display:block}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .split-2,.split-2.rev{grid-template-columns:1fr}
  .grid-wrap{margin-top:1.5rem}
  .px,.grid-wrap{transform:none!important}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links,.btn-nav{display:none}
  .menu-btn{display:block}
  /* the brand block takes its own row so the three link columns stay level */
  .foot-top{grid-template-columns:1fr 1fr 1fr}
  .foot-brand{grid-column:1/-1;margin-bottom:.5rem}
  .foot-brand img{width:170px}
}
@media (max-width:640px){
  :root{--nav-h:76px}
  .row-2,.checks{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .foot-cta{grid-column:1/-1}
  .foot-cta .btn{width:100%}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  /* three 9:16 cards across a phone are too small to read as work: swipe them instead */
  .reels{display:flex;gap:12px;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);margin-inline:calc(-1*var(--gutter));width:calc(100% + 2*var(--gutter));scrollbar-width:none}
  .reels::-webkit-scrollbar{display:none}
  .reel-card{flex:0 0 58vw;scroll-snap-align:start}
  .slot.tall{height:auto;width:100%;border-radius:10px}
  .card-meta{flex-direction:column;align-items:flex-start;gap:2px}
  /* the 16:9 reel box is short on a phone, so the play control shrinks with it */
  .play{gap:10px}
  .play-ring{width:62px;height:62px}
  .play-ring::before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;margin-left:4px}
  .play-label{font-size:.56rem;letter-spacing:.16em}
  .direct-list li{grid-template-columns:80px 1fr}
  .brand img{height:46px}
  .h2{max-width:none}
}
/* a phone held sideways: the static hero has to fit a 390px-tall screen */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero-static{min-height:auto;padding:calc(var(--nav-h) + 6px) var(--gutter) 22px}
  .hs-inner{gap:7px;max-width:680px}
  .h-hero-static{font-size:clamp(1.7rem,5vw,2.5rem)}
  .hs-logo{width:min(112px,18%);margin:0}
  .hero-static .settle-sub{font-size:.95rem}
  .hs-rail{font-size:.58rem}
  .hero-static .btns{flex-direction:row;max-width:none;justify-content:center}
  .hero-static .btn{width:auto}
}
@media (pointer:coarse){
  .btn,.menu-btn,.play,.lb-close,.lb-nav{min-height:44px}
  /* footer links are small type, so the tap area grows without moving them */
  .foot-col{gap:0}
  .foot-col a:not(.btn){padding-block:13px}
  .foot-head{margin-bottom:9px}
  .foot-cta{gap:14px}
  .foot-cta a:not(.btn){padding-block:13px}
}

/* ---------- reduced motion: final states, drives stopped ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  body{opacity:1}
  .sec .part{opacity:1;transform:none}
  .swoosh path{stroke-dashoffset:0}
  .gold{background-size:100% 2px}
  .slot img,.slot video{clip-path:none;transform:none}
  .spine-fill,.spine-top-fill{transform:none}
  .mq-track{transform:none}
  .px,.grid-wrap,.reel-poster{transform:none!important}
}