/* QUIET FORM — prelaunch site
   Two films run with the scroll (canvas frame sequences inside sticky stages);
   copy, panels and type move over them. Everything else is quiet editorial. */
:root{
  --ivory:#F1ECE3;
  --paper:#F7F4EE;
  --stone:#D9D3C8;
  --wall:#8F857A;
  --wall-hi:#9D9488;
  --ink:#1D1C1A;
  --mute:#5B574F;
  --mute-d:#ABA69D;
  --acid:#C9F04A;
  --err:#8E2A1C;
  --gut:clamp(16px,4vw,64px);
  --nav:68px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --focus:var(--ink);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--ink) var(--ivory)}
html.js:not(.flat){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:hidden}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--display);font-weight:400;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em}
button{font:inherit;color:inherit}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--ivory);padding:12px 16px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 1px rgba(29,28,26,.4);flex:none}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;background:#EDE7DA;box-shadow:inset 0 0 0 1px rgba(29,28,26,.28);margin-right:8px;vertical-align:-1px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 26px;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.btn .arr{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(6px)}
.btn:active{transform:scale(.98)}
.btn-dark{background:var(--ink);color:var(--ivory)}
.btn-dark:hover{background:#000}
.btn-dark .arr{color:var(--acid)}
.btn-acid{background:var(--acid);color:var(--ink)}
.btn-acid:hover{background:#D9FA70}
.btn-wide{width:100%}
.btn-film{
  display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 8px;border-radius:999px;cursor:pointer;
  background:rgba(241,236,227,.46);border:1px solid rgba(29,28,26,.42);color:var(--ink);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.btn-film:hover{background:rgba(241,236,227,.72);border-color:var(--ink)}
.btn-film .pl{position:relative;width:36px;height:36px;border-radius:50%;background:var(--ink);flex:none}
.btn-film .pl::after{content:"";position:absolute;left:14px;top:12px;border-left:10px solid var(--acid);border-top:6px solid transparent;border-bottom:6px solid transparent}
.btn-film .dur{opacity:.6;font-variant-numeric:tabular-nums}
html:not(.js) .btn-film{display:none}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav);padding-inline:var(--gut);
  display:flex;align-items:center;gap:28px;color:var(--ink);
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease),opacity 1s var(--ease) .5s;
}
.nav[data-theme="light"]{background:rgba(241,236,227,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(29,28,26,.08)}
.nav[data-theme="dark"]{color:var(--ivory);--focus:var(--ivory)}
.wordmark{font-stretch:62%;font-weight:800;font-size:21px;letter-spacing:.08em;text-decoration:none;margin-right:auto;white-space:nowrap}
.nav-links{display:flex;gap:32px}
.nav-links a,.foot-links a{position:relative;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:10px 0}
.nav-links a::after,.foot-links a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover::after,.foot-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background-color .3s,color .3s}
.nav-cta:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.nav[data-theme="dark"] .nav-cta:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.menu-btn{display:none;align-items:center;gap:12px;min-height:44px;min-width:44px;padding:0 2px 0 10px;background:none;border:0;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.menu-lines{position:relative;width:24px;height:10px}
.menu-lines i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.menu-lines i:first-child{top:0}.menu-lines i:last-child{top:8.5px}
.menu-open .menu-lines i:first-child{top:4.25px;transform:rotate(45deg)}
.menu-open .menu-lines i:last-child{top:4.25px;transform:rotate(-45deg)}
.nav.menu-open{background:var(--ivory);color:var(--ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;--focus:var(--ink)}
.menu{position:fixed;inset:0;z-index:45;background:var(--ivory);padding:calc(var(--nav) + 32px) var(--gut) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto}
.menu[hidden]{display:none}
.menu a{display:block;padding:12px 0;border-bottom:1px solid rgba(29,28,26,.14);text-decoration:none;font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:clamp(46px,13.5vw,84px);line-height:1}
.menu-foot{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:32px}

/* =========================================================
   REELS · sticky stage + frame canvas + overlays
   ========================================================= */
.reel{position:relative;background:var(--wall)}
.reel-a{height:560vh}
.reel-b{height:440vh}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage{position:absolute;inset:0;overflow:hidden;background:var(--wall)}
.poster,.poster img{position:absolute;inset:0;width:100%;height:100%}
.poster img,img.poster{object-fit:cover}
.reel-a .poster img{object-position:62% 50%}
.cv{position:absolute;inset:0;width:100%;height:100%}
.cv-bg{opacity:0}
.live .cv-bg{opacity:1}
.reel-a .stage::after{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:3;pointer-events:none;background:linear-gradient(rgba(241,236,227,.34),rgba(241,236,227,0))}
.stage-fade{display:none}

/* the word behind the hoodie (JS places it on the hood; the cut-out canvas sits on top) */
.ghost{position:absolute;z-index:1;left:var(--gx,64%);top:var(--gy,12%);margin:0;pointer-events:none;
  font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:var(--gs,26vw);line-height:.8;letter-spacing:-.015em;white-space:nowrap;
  color:rgba(246,242,234,.7);will-change:transform,opacity;
  transform:translate3d(-50%,0,0)}
.ghost span{display:block}
html:not(.js) .ghost,.flat .ghost{display:none}
.cv-fg{z-index:2}

/* overlay scenes: JS toggles .on from the reel's progress */
.sc,.sheet,.split .sl,.split .sr,.float{will-change:transform,opacity}
.sc{position:absolute;z-index:4;opacity:0;visibility:hidden;transform:translateY(26px);
  transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .5s}
.sc.on{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease),visibility 0s}

.sc-hero{left:var(--gut);bottom:clamp(84px,12vh,128px);width:min(600px,42vw)}
.hero-title{font-weight:700;font-size:clamp(58px,6.6vw,124px);line-height:.86;letter-spacing:-.01em}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.li{display:block}
.ln:first-child{font-stretch:62%;text-transform:uppercase}
.ln-2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.9em;line-height:1;letter-spacing:-.035em;padding-left:.03em}
.hero-sub{margin-top:20px;text-wrap:balance;font-family:var(--serif);font-size:clamp(22px,1.8vw,30px);line-height:1.15;max-width:18em}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* the piece: an ivory sheet slides in over the pocket close-up */
.sheet{position:absolute;z-index:5;left:0;top:0;bottom:0;width:min(470px,36vw);
  display:flex;flex-direction:column;gap:16px;padding:calc(var(--nav) + 18px) clamp(24px,2.6vw,40px) clamp(22px,3.4vh,36px);
  background:var(--ivory);box-shadow:24px 0 60px -30px rgba(29,28,26,.45);
  transform:translateX(-103%);visibility:hidden;transition:transform .8s var(--ease-io),visibility 0s .8s}
.sheet.on{transform:none;visibility:visible;transition:transform 1.1s var(--ease),visibility 0s}
.sheet-top{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid rgba(29,28,26,.16);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.sheet-title{font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:clamp(40px,3.4vw,58px);line-height:.88}
.sheet-title em{display:block;font-size:1.08em;line-height:.95}
.sheet-body{font-size:15px;line-height:1.5;color:var(--mute);max-width:30em}
.sheet-pic{flex:1;min-height:0;border-radius:6px;overflow:hidden;background:#8D867C}
.sheet-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.sheet-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:4px}
.sheet-meta dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.sheet-meta dd{font-family:var(--serif);font-size:24px;line-height:1.1}
.sheet > *{transition:opacity .6s var(--ease),transform .9s var(--ease)}
.sheet:not(.on) > *{opacity:0;transform:translateX(-24px)}
.sheet.on > *:nth-child(2){transition-delay:.08s}.sheet.on > *:nth-child(3){transition-delay:.14s}
.sheet.on > *:nth-child(4){transition-delay:.2s}.sheet.on > *:nth-child(5){transition-delay:.26s}.sheet.on > *:nth-child(6){transition-delay:.32s}

.big{font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:clamp(64px,8.4vw,156px);line-height:.85;letter-spacing:-.005em;text-wrap:balance}
.big em{display:block;font-size:1.04em;line-height:.95}
.sc-hem{right:var(--gut);top:50%;margin-top:-1.2em;text-align:right;transform:translateY(calc(-50% + 26px))}
.sc-hem.on{transform:translateY(-50%)}
.tag{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.tag i{display:block;width:48px;height:1px;background:currentColor}
.sc-turn{left:var(--gut);top:50%;width:min(46vw,760px);transform:translateY(calc(-50% + 26px))}
.sc-turn.on{transform:translateY(-50%)}

.subs{position:absolute;z-index:4;right:var(--gut);bottom:84px;max-width:22em;text-align:right;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.6vw,26px);line-height:1.2;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.subs.on{opacity:1;transform:none}
.status{position:absolute;z-index:4;right:var(--gut);bottom:34px;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.rail{position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:6px}
.rail button{min-height:44px;padding:0 14px;background:none;border:0;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.5;transition:opacity .4s}
.rail button:hover,.rail button[aria-current="true"]{opacity:1}
.rail-bar{position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:rgba(29,28,26,.22)}
.rail-bar b,.b-bar b{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(0)}

/* ---------- reel B: the lifestyle film between split type ---------- */
.reel-b .stage{left:50%;right:auto;width:calc(100vh * 9 / 16);width:calc(100svh * 9 / 16);transform:translateX(-50%)}
@media (min-width:761px) and (min-aspect-ratio:801/1000){
  .reel-b .stage::before,.reel-b .stage::after{content:"";position:absolute;top:0;bottom:0;width:9.5%;z-index:2;pointer-events:none}
  .reel-b .stage::before{left:0;background:linear-gradient(90deg,var(--wall),rgba(143,133,122,0))}
  .reel-b .stage::after{right:0;background:linear-gradient(270deg,var(--wall),rgba(143,133,122,0))}
}
.reel-b .poster{object-position:50% 40%}
.split{position:absolute;inset:0;z-index:4;pointer-events:none;--half:calc(100svh * 9 / 32)}
.sl,.sr{position:absolute;max-width:calc(50% - var(--half) - var(--gut) - 24px);text-wrap:balance;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),transform .8s var(--ease),visibility 0s .5s}
.sl{right:calc(50% + var(--half) + 24px);top:26%;text-align:right;transform:translateX(-36px);
  font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:clamp(56px,7.2vw,138px);line-height:.84}
.sr{left:calc(50% + var(--half) + 24px);top:50%;transform:translateX(36px);
  font-size:clamp(46px,5.6vw,104px);line-height:.94}
.sr em{letter-spacing:-.035em}
.split.on .sl,.split.on .sr{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease),visibility 0s}
.split.on .sr{transition-delay:.1s}
.float{position:absolute;z-index:5;width:clamp(150px,12vw,214px);margin:0;padding:8px 8px 12px;border-radius:14px;
  background:rgba(241,236,227,.95);
  box-shadow:0 26px 50px -26px rgba(29,28,26,.6);
  opacity:0;visibility:hidden;transform:translateY(34px) scale(.96);transition:opacity .5s var(--ease),transform .8s var(--ease),visibility 0s .5s}
.float.on{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--ease),transform 1.1s var(--ease),visibility 0s}
.float img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.float figcaption{display:flex;align-items:baseline;gap:8px;padding:10px 4px 0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.float figcaption span{font-family:var(--serif);font-style:italic;font-size:16px;letter-spacing:0;text-transform:none;color:var(--mute)}
.f1{left:calc(50% + var(--half, 28vh) - 70px);top:16%;--half:calc(100svh * 9 / 32)}
.f2{right:calc(50% + var(--half, 28vh) - 70px);bottom:14%;--half:calc(100svh * 9 / 32)}
.b-foot{position:absolute;z-index:4;left:var(--gut);bottom:26px;display:flex;align-items:center;gap:18px}
.b-cap{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.b-bar{position:absolute;z-index:4;right:var(--gut);bottom:50px;width:160px;height:1px;background:rgba(29,28,26,.22)}

/* =========================================================
   EDITORIAL SECTIONS
   ========================================================= */
.rl{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.rl > *{display:block}
.h2{font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:clamp(56px,8vw,150px);line-height:.86;letter-spacing:-.005em}
.h2 em{font-size:1.05em;line-height:.95}
.body{max-width:26em;color:var(--mute)}
.meta{display:flex;gap:28px;margin:24px 0 30px;padding-top:16px;border-top:1px solid rgba(29,28,26,.18);font-family:var(--serif);font-size:24px}
.meta span+span{color:var(--mute)}

/* collection: the three pieces */
.col{padding:clamp(110px,13vw,220px) var(--gut) clamp(110px,12vw,200px)}
.col-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px clamp(24px,5vw,96px);align-items:end}
.col-side{padding-bottom:10px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(64px,7vw,120px)}
.card figure{display:block}
.card-pic{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--stone)}
.card-pic img{width:100%;height:100%;object-fit:cover}
.card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px;border-bottom:1px solid rgba(29,28,26,.16);padding-bottom:12px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.card figcaption em{font-size:20px;letter-spacing:-.01em;color:var(--mute)}
.card:nth-child(2){margin-top:clamp(40px,6vw,110px)}
.card:nth-child(3){margin-top:clamp(20px,3vw,55px)}
@media (hover:hover){
  .card-pic img,.story-pic img,.join-pic img{transition:transform 1.4s var(--ease)}
  .card:hover .card-pic img{transform:scale(1.045)}
}

/* story: dark */
.story{background:var(--ink);color:var(--ivory);padding:clamp(110px,12vw,210px) var(--gut);--focus:var(--ivory)}
.story-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 24px;align-items:end}
.story-title{grid-column:1/9;font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:clamp(54px,7.4vw,140px);line-height:.86}
.story-title em{color:var(--acid);font-size:1.06em;line-height:1}
.story-pic{grid-column:9/13;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:#2c2b28}
.story-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.tenets{grid-column:1/13;display:flex;flex-wrap:wrap;gap:10px 0;padding-top:26px;border-top:1px solid rgba(241,236,227,.16);font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.06em}
.tenets span{display:inline-flex;align-items:center}
.tenets span+span::before{content:"";width:28px;height:1px;margin:0 16px;background:var(--acid)}

/* join */
.join{background:var(--stone);padding:clamp(100px,11vw,180px) var(--gut)}
.join-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px;align-items:center}
.join-pic{grid-column:1/6;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:#b9b2a6}
.join-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.join-copy{grid-column:7/13}
.join-title{font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:clamp(64px,8.6vw,156px);line-height:.86}
.join-title em{font-size:1.04em;line-height:.95}
.form{margin-top:clamp(36px,4vw,60px);max-width:560px}
.demo-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:7px 14px;border:1px dashed rgba(29,28,26,.55);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.flabel{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.field{display:flex;gap:12px;align-items:stretch}
.field input{flex:1;min-width:0;min-height:56px;padding:0 2px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;font:inherit;font-size:20px;color:var(--ink);caret-color:var(--ink)}
.field input::placeholder{color:#6F6A62}
.field input:focus{outline:none;border-bottom-width:3px}
.field input:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.field .btn{min-height:56px}
.fmsg{margin-top:14px;min-height:1.6em;font-size:15px;color:#4B473F}
.form.is-error input{border-bottom-color:var(--err)}
.form.is-error .fmsg{color:var(--err);font-weight:600}
.form.is-demo .fmsg{color:var(--ink);font-weight:500}
.form .btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* footer */
.foot{background:var(--ink);color:var(--ivory);padding:clamp(56px,6vw,90px) var(--gut) calc(28px + env(safe-area-inset-bottom));--focus:var(--ivory);overflow:hidden}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 34px}
.foot-mark{display:flex;justify-content:space-between;gap:.16em;margin-top:clamp(56px,8vw,140px);font-stretch:62%;font-weight:800;text-transform:uppercase;text-decoration:none;font-size:clamp(70px,20.6vw,400px);line-height:.8;letter-spacing:-.01em;overflow:hidden;padding-top:.04em}
.foot-mark span{display:block}
.foot-bot{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid rgba(241,236,227,.14);font-size:13px;color:var(--mute-d)}
.credit a{color:var(--ivory);text-underline-offset:3px}
.credit a:hover{color:var(--acid)}

/* theatre: the films with sound and captions */
.theatre{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ivory);--focus:var(--ivory)}
.theatre::backdrop{background:rgba(14,13,12,.94)}
.th-in{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(18px + env(safe-area-inset-top)) var(--gut) calc(18px + env(safe-area-inset-bottom))}
.th-frame{display:flex;justify-content:center;width:100%;min-height:0}
.th-frame video{width:auto;height:auto;max-width:min(1280px,100%);max-height:calc(100svh - 120px);background:#000;border-radius:6px}
.th-frame video::cue{font-family:var(--display);font-size:18px;background:rgba(29,28,26,.8);color:#fff}
.th-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;width:min(1280px,100%);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.th-x{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid rgba(241,236,227,.4);border-radius:999px;background:none;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.th-x:hover{background:var(--ivory);color:var(--ink)}
.th-x span{font-size:18px;line-height:1;letter-spacing:0}

/* =========================================================
   MOTION · intro + reveals (only when JS runs and motion is allowed)
   ========================================================= */
.js:not(.flat):not(.ready) .hero-title .li{transform:translateY(108%)}
.js:not(.flat):not(.ready) .sc-hero .hero-sub,.js:not(.flat):not(.ready) .sc-hero .acts,.js:not(.flat):not(.ready) .status,.js:not(.flat):not(.ready) .rail,.js:not(.flat):not(.ready) .nav{opacity:0}
.js:not(.flat):not(.ready) .ghost span{opacity:0;transform:translateY(22%)}
.ready .hero-title .li{transition:transform 1.3s var(--ease) .15s}
.ready .hero-title .ln-2 .li{transition-delay:.27s}
.ready .sc-hero .hero-sub,.ready .sc-hero .acts,.ready .status,.ready .rail{transition:opacity 1s var(--ease) .6s}
.ready .sc-hero .acts{transition-delay:.72s}
.ready .ghost span{transition:opacity 1.6s var(--ease),transform 1.8s var(--ease)}

.js:not(.flat) .rl > *{transform:translateY(106%);transition:transform 1.2s var(--ease)}
.js:not(.flat) .in .rl > *,.js:not(.flat) .rl.in > *{transform:none}
.in .rl:nth-child(2) > *{transition-delay:.08s}.in .rl:nth-child(3) > *{transition-delay:.16s}.in .rl:nth-child(4) > *{transition-delay:.24s}
.js:not(.flat) .rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js:not(.flat) .rv.in{opacity:1;transform:none}
.js:not(.flat) .wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-io)}
.js:not(.flat) .wipe img{transform:scale(1.14);transition:transform 1.9s var(--ease)}
.js:not(.flat) .wipe.in{clip-path:inset(0 0 0 0)}
.js:not(.flat) .wipe.in img{transform:none}
.js:not(.flat) .card-pic img,.js:not(.flat) .story-pic img,.js:not(.flat) .join-pic img{scale:1.1}
.trio .card:nth-child(2) .wipe{transition-delay:.1s}.trio .card:nth-child(3) .wipe{transition-delay:.2s}
.js:not(.flat) .foot-mark span{transform:translateY(80%);transition:transform 1.5s var(--ease)}
.js:not(.flat) .foot-mark.in span{transform:none}
.foot-mark span+span{transition-delay:.1s}

/* =========================================================
   LAYOUT · tablet + phone
   ========================================================= */
@media (max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .col-head{grid-template-columns:1fr}
  .story-title{grid-column:1/13}
  .story-pic{grid-column:5/13}
  .join-pic{grid-column:1/13;order:2;aspect-ratio:4/3}
  .join-copy{grid-column:1/13}
}

/* portrait screens: the product film sits in a top frame, copy lives in a dark band below */
@media (max-width:760px),(max-aspect-ratio:4/5){
  .reel-a{height:500vh;background:var(--ink)}
  .reel-a .stick{--box:min(62svh,128vw);background:var(--ink)}
  .reel-a .stage{bottom:auto;height:var(--box)}
  .reel-a .poster img{object-position:50% 50%}
  .stage-fade{display:block;position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;background:linear-gradient(rgba(29,28,26,0),var(--ink))}
  .reel-a .sc{left:var(--gut);right:var(--gut);width:auto;color:var(--ivory);--focus:var(--ivory)}
  .sc-hero{bottom:calc(64px + env(safe-area-inset-bottom))}
  .hero-title{font-size:clamp(46px,13vw,76px)}
  .hero-sub{font-size:21px;margin-top:12px}
  .acts{margin-top:18px;flex-wrap:nowrap}
  .sc-hero .btn-dark{background:var(--ivory);color:var(--ink);flex:1;min-width:0;padding:0 18px}
  .sc-hero .btn-dark .arr{color:var(--ink)}
  .reel-a .btn-film{flex:none;width:52px;padding:0;justify-content:center;background:rgba(241,236,227,.08);border-color:rgba(241,236,227,.4);color:var(--ivory)}
  .reel-a .btn-film > span:not(.pl){display:none}
  .btn-film .pl{background:var(--ivory)}
  .btn-film .pl::after{border-left-color:var(--ink)}
  .sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:calc(100svh - var(--nav) - 10px);gap:12px;border-radius:20px 20px 0 0;
    padding:20px var(--gut) calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -30px rgba(0,0,0,.6);transform:translateY(104%)}
  .sheet:not(.on) > *{transform:translateY(16px)}
  .sheet-title{font-size:clamp(40px,11vw,56px)}
  .sheet-body{font-size:14px}
  .sheet-pic{flex:none;height:min(26svh,220px)}
  .big{font-size:clamp(50px,14.5vw,84px)}
  .sc-hem,.sc-turn{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));margin:0;transform:translateY(26px);text-align:left;width:auto}
  .sc-hem.on,.sc-turn.on{transform:none}
  .subs{right:auto;left:var(--gut);bottom:auto;top:calc(var(--box) + 2px);text-align:left;color:rgba(241,236,227,.72);font-size:19px}
  .status{display:none}
  .rail{bottom:calc(10px + env(safe-area-inset-bottom));color:var(--ivory)}
  .rail-bar{background:rgba(241,236,227,.22)}

  .reel-b{height:400vh}
  .reel-b .stage{left:0;width:100%;transform:none;-webkit-mask-image:none;mask-image:none}
  .reel-b .stage::before,.reel-b .stage::after{content:"";position:absolute;left:0;right:0;z-index:3;pointer-events:none}
  .reel-b .stage::before{top:0;height:42%;background:linear-gradient(rgba(29,28,26,.62),rgba(29,28,26,0))}
  .reel-b .stage::after{bottom:0;height:46%;background:linear-gradient(rgba(29,28,26,0),rgba(29,28,26,.72))}
  .split{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) calc(92px + env(safe-area-inset-bottom))}
  .sl,.sr{position:relative;left:auto;right:auto;top:auto;max-width:none;color:var(--ivory);text-align:left;transform:translateY(18px)}
  .sl{font-size:clamp(48px,14vw,88px)}
  .sr{font-size:clamp(40px,11.4vw,72px);margin-top:4px}
  .split:not(.on){visibility:hidden}
  .float{display:none}
  .b-foot{bottom:calc(22px + env(safe-area-inset-bottom));color:var(--ivory);right:var(--gut);justify-content:space-between}
  .reel-b .btn-film{background:rgba(241,236,227,.1);border-color:rgba(241,236,227,.4);color:var(--ivory);min-height:46px;padding-right:16px}
  .b-bar{display:none}
}

@media (max-width:640px){
  :root{--nav:60px}
  body{font-size:16px}
  .wordmark{font-size:19px}
  .col-side .btn{width:100%}
  .trio{grid-template-columns:1fr 1fr;gap:28px 14px}
  .trio .card:first-child{grid-column:1/-1}
  .card:nth-child(2),.card:nth-child(3){margin-top:0}
  .card figcaption{flex-direction:column;gap:2px}
  .story-pic{grid-column:3/13}
  .tenets{font-size:17px}
  .tenets span+span::before{width:16px;margin:0 10px}
  .field{flex-direction:column}
  .field .btn{width:100%}
  .foot-links{flex-direction:column;gap:0}
  .foot-links a{padding:12px 0}
  .foot-bot{flex-direction:column}
  .b-cap{display:none}
}
@media (max-height:640px) and (min-aspect-ratio:4/5){
  .sheet-pic{display:none}
}

/* =========================================================
   STILL LAYOUT · no JS, reduced motion, ?static
   The films become single frames; every word stays readable.
   ========================================================= */
html:not(.js) .reel,.flat .reel{height:auto}
html:not(.js) .stick,.flat .stick{position:relative;height:100vh;height:100svh;min-height:560px}
html:not(.js) .sheet,html:not(.js) .sc-hem,html:not(.js) .sc-turn,html:not(.js) .subs,html:not(.js) .rail,html:not(.js) .float,html:not(.js) .b-bar,
.flat .sheet,.flat .sc-hem,.flat .sc-turn,.flat .subs,.flat .rail,.flat .float,.flat .b-bar{display:none}
html:not(.js) .split-1 .sl,html:not(.js) .split-1 .sr,.flat .split-1 .sl,.flat .split-1 .sr{opacity:1;visibility:visible;transform:none}
html:not(.js) .sc-hero{opacity:1;visibility:visible;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}