*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
:root{
  --ink:#16120F;
  --bone:#F4EFE8;
  --surface:#E8E0D5;
  --on-light:#1A1512;
  --on-dark:#F4EFE8;
  --accent:#C0392B;
  --g-bone:#E8E0D5;
  --g-ink:#16120F;
  --g-grey:#B9BBB6;
  --g-light:#E4E2DE;
  --g-forest:#102018;
  --g-terra:#E0A05A;
  --g-blush:#EAD2B8;
  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --disp:'Jost',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);background:var(--bone);color:var(--on-light);
  -webkit-font-smoothing:antialiased;line-height:1.6;font-size:17px;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:.35em;font-size:12px;font-weight:500;opacity:.6;margin:0 0 18px}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--disp);
  text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:500;
  padding:15px 28px;border:1px solid transparent;cursor:pointer;min-height:48px;
  transition:background .25s,color .25s,transform .25s;border-radius:2px;
}
.btn-primary{background:var(--ink);color:var(--on-dark)}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px)}
.btn-primary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ===== HEADER ===== */
.hdr{position:sticky;top:0;z-index:60;background:rgba(244,239,232,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(22,18,15,.1);transition:background .3s,color .3s,border-color .3s}
.hdr-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:18px}
.menu-btn{display:none;align-items:center;gap:9px;background:none;border:none;cursor:pointer;color:inherit;font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;font-size:12px;padding:8px 4px;min-height:44px}
.menu-bars{display:inline-flex;flex-direction:column;gap:5px}
.menu-bars span{width:22px;height:2px;background:currentColor;display:block}
.hdr-nav{display:flex;gap:26px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;font-weight:500}
.hdr-nav a{position:relative;padding:6px 0}
.hdr-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .3s}
.hdr-nav a:hover::after,.hdr-nav a:focus-visible::after{width:100%}
.brand{margin:0 auto;display:flex;align-items:center}
/* logo picture elements */
.logo-dark{display:block}
.logo-light{display:none}
.brand img{height:20px;width:auto}
.hdr-utils{display:flex;align-items:center;gap:14px}
.currency select{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:11px;background:transparent;border:1px solid rgba(22,18,15,.25);color:inherit;padding:8px 10px;border-radius:2px;max-width:170px;cursor:pointer}
.util-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:inherit}
.util-link:hover{color:var(--accent)}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* dark header variant (over hero) */
.hdr.on-dark{background:rgba(22,18,15,.6);color:var(--on-dark);border-color:rgba(244,239,232,.15)}
.hdr.on-dark .logo-dark{display:none}
.hdr.on-dark .logo-light{display:block}
.hdr.on-dark .currency select{border-color:rgba(244,239,232,.3)}

/* ===== DRAWER ===== */
.drawer-scrim{position:fixed;inset:0;background:rgba(22,18,15,.5);z-index:90;backdrop-filter:blur(2px)}
.drawer{position:fixed;top:0;left:0;height:100%;width:min(86%,360px);background:var(--ink);color:var(--on-dark);z-index:100;transform:translateX(-100%);transition:transform .4s cubic-bezier(.6,0,.2,1);display:flex;flex-direction:column;padding:22px}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.drawer-title{font-family:var(--disp);letter-spacing:.3em;font-size:13px}
.menu-close{background:none;border:1px solid rgba(244,239,232,.3);color:inherit;font-family:var(--disp);text-transform:uppercase;letter-spacing:.18em;font-size:11px;padding:8px 14px;cursor:pointer;border-radius:2px;min-height:40px}
.drawer-nav{display:flex;flex-direction:column;gap:4px}
.drawer-nav a{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:18px;padding:14px 0;border-bottom:1px solid rgba(244,239,232,.12)}
.drawer-nav a:hover{color:var(--accent)}
.drawer-foot{margin-top:auto;padding-top:20px}
.drawer-foot select{width:100%;background:transparent;border:1px solid rgba(244,239,232,.3);color:inherit;padding:12px;font-family:var(--disp);font-size:12px;letter-spacing:.08em;border-radius:2px}

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 52%}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(22,18,15,.55) 0%,rgba(22,18,15,.05) 30%,rgba(22,18,15,.15) 55%,rgba(22,18,15,.85) 100%),
  radial-gradient(120% 80% at 30% 90%,rgba(22,18,15,.7),transparent 60%)}
.hero-content{position:relative;z-index:3;color:var(--on-dark);padding:0 var(--pad) clamp(70px,11vh,140px);max-width:var(--maxw);margin:0 auto;width:100%}
.hero-kicker{font-family:var(--disp);text-transform:uppercase;letter-spacing:.4em;font-size:12px;margin:0 0 14px;opacity:.85}
.hero-h1{font-family:var(--disp);text-transform:uppercase;font-weight:600;letter-spacing:.04em;line-height:.92;margin:0;font-size:clamp(3.1rem,12vw,8rem)}
.hero-sub{font-size:clamp(1.05rem,2.4vw,1.45rem);max-width:30ch;margin:22px 0 30px;opacity:.92}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.play-btn{display:inline-flex;align-items:center;gap:12px;background:rgba(244,239,232,.08);border:1px solid rgba(244,239,232,.4);color:var(--on-dark);font-family:var(--disp);text-transform:uppercase;letter-spacing:.18em;font-size:12px;padding:12px 20px 12px 12px;cursor:pointer;border-radius:40px;min-height:48px;transition:background .25s,transform .25s}
.play-btn:hover{background:rgba(244,239,232,.18);transform:translateY(-2px)}
.play-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--on-dark);color:var(--ink);flex:0 0 auto}
.hero-marquee{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(244,239,232,.18);overflow:hidden;background:rgba(22,18,15,.35)}
.marquee-track{display:flex;gap:24px;white-space:nowrap;padding:11px 0;animation:scrollX 40s linear infinite;color:var(--on-dark);font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;opacity:.85}
.marquee-track span{flex:0 0 auto}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ===== CAPABILITIES ===== */
.caps{background:var(--ink);color:var(--on-dark);padding:clamp(70px,12vw,140px) 0}
.caps-head{max-width:760px;margin-bottom:clamp(40px,7vw,70px)}
.caps-head .eyebrow{opacity:.55}
.caps-title{font-family:var(--disp);text-transform:uppercase;font-weight:600;letter-spacing:.03em;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;margin:0 0 22px}
.caps-intro{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:46ch;opacity:.85;margin:0}
.caps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));border-top:1px solid rgba(244,239,232,.16)}
.cap{display:flex;align-items:baseline;gap:18px;padding:24px 6px;border-bottom:1px solid rgba(244,239,232,.16);transition:background .3s,padding-left .3s}
.cap:hover{background:rgba(244,239,232,.05);padding-left:18px}
.cap-no{font-family:var(--disp);font-size:13px;letter-spacing:.1em;color:var(--accent);min-width:26px}
.cap-name{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:500}
.caps-foot{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1rem,2.4vw,1.4rem);margin:clamp(40px,7vw,64px) 0 0;max-width:34ch}
.process{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:48px;padding-top:34px;border-top:1px solid rgba(244,239,232,.16);font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:12px;opacity:.7}
.process i{color:var(--accent);font-style:normal}

/* ===== BRANDS ===== */
.brands{background:var(--bone)}
.brands-head{text-align:center;padding-top:clamp(70px,12vw,130px);padding-bottom:clamp(40px,7vw,70px);max-width:680px}
.brands-head .eyebrow{opacity:.55}
.brands-title{font-family:var(--disp);text-transform:uppercase;font-weight:600;letter-spacing:.04em;font-size:clamp(2.4rem,8vw,5rem);line-height:1;margin:0 0 18px}
.brands-lede{font-size:1.05rem;opacity:.75;margin:0 auto;max-width:52ch}

.case{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(80vh,720px)}
.case.ground-bone{background:var(--g-bone)}
.case.ground-ink{background:var(--g-ink)}
.case.ground-grey{background:var(--g-grey)}
.case.ground-light{background:var(--g-light)}
.case.ground-forest{background:var(--g-forest)}
.case.ground-terra{background:var(--g-terra)}
.case.ground-blush{background:var(--g-blush)}
.case.dark{color:var(--on-dark)}
.case[data-img="right"] .case-media{order:2}
.case-media{position:relative;overflow:hidden;min-height:380px}
.case-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.case:hover .case-media img{transform:scale(1.04)}
.case-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,6vw,80px)}
.case-no{font-family:var(--disp);font-size:clamp(2.6rem,5vw,4rem);font-weight:300;line-height:1;opacity:.28;margin-bottom:12px}
.case.dark .case-no{opacity:.4}
.case-name{font-family:var(--disp);text-transform:uppercase;font-weight:600;letter-spacing:.03em;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.05;margin:0 0 12px}
.case-credit{font-style:italic;opacity:.7;margin:0 0 4px;font-size:.95rem}
.case-tag{font-family:var(--disp);text-transform:uppercase;letter-spacing:.18em;font-size:12px;margin:6px 0 0;color:var(--ink)}
.case.dark .case-tag{color:var(--on-dark)}
.case-quote{margin:20px 0 0;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.7;max-width:46ch}
.case-quote.plain{font-style:normal}
.explore{display:inline-flex;align-items:center;gap:.6em;margin-top:30px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:500;border:1px solid currentColor;padding:13px 24px;border-radius:2px;align-self:flex-start;transition:background .25s,color .25s,gap .25s}
.case .explore:hover{background:var(--ink);color:var(--bone);gap:1em}
.case.dark .explore:hover{background:var(--bone);color:var(--ink)}
.case.ground-ink .explore:hover{background:var(--bone);color:var(--ink)}

/* ===== SIGNUP ===== */
.signup{background:var(--ink);color:var(--on-dark);padding:clamp(80px,14vw,160px) 0;text-align:center}
.signup-inner{max-width:640px}
.signup-ico{color:var(--accent);display:inline-flex;margin-bottom:20px}
.signup-title{font-family:var(--disp);text-transform:uppercase;font-weight:600;letter-spacing:.05em;font-size:clamp(2rem,7vw,3.8rem);line-height:1;margin:0 0 14px}
.signup-sub{opacity:.78;margin:0 0 34px;font-size:1.05rem}
.signup-form{max-width:520px;margin:0 auto}
.field{display:flex;gap:10px;flex-wrap:wrap}
.field input{flex:1 1 200px;min-width:0;background:transparent;border:1px solid rgba(244,239,232,.35);color:var(--on-dark);padding:14px 18px;font-family:var(--body);font-size:15px;border-radius:2px;min-height:50px}
.field input::placeholder{color:rgba(244,239,232,.55)}
.field input:focus{border-color:var(--accent);outline:none}
.field .btn{flex:0 0 auto}
.form-msg{margin:16px 0 0;font-size:14px;min-height:20px;color:var(--g-terra)}
.form-msg.err{color:#f0a89e}

/* ===== FOOTER ===== */
.ftr{background:#100D0B;color:var(--on-dark);padding:clamp(50px,8vw,80px) 0}
.ftr-inner{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.ftr-logo{height:22px;width:auto;opacity:.9}
.ftr-ig{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(244,239,232,.25);border-radius:50%;color:inherit;transition:background .25s,color .25s}
.ftr-ig:hover{background:var(--accent);border-color:var(--accent)}
.ftr-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:12px;opacity:.85}
.ftr-links a:hover{color:var(--accent)}
.ftr-copy{font-size:12.5px;opacity:.5;letter-spacing:.04em;margin:0}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(8,6,5,.9)}
.modal-body{position:relative;width:min(960px,100%)}
.modal-close{position:absolute;top:-44px;right:0;background:none;border:none;color:var(--on-dark);font-family:var(--disp);text-transform:uppercase;letter-spacing:.16em;font-size:12px;cursor:pointer;padding:8px;min-height:40px}
.modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:3px;overflow:hidden}
.modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== REVEAL ===== */
/* Only apply hidden state when JS has loaded (.js-ready on body) */
.js-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.js-ready .reveal.in{opacity:1;transform:none}
/* Fallback: if JS never ran, all reveals show immediately */
body:not(.js-ready) .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js-ready .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .hdr-nav.left{display:none}
  .menu-btn{display:inline-flex}
  .brand{margin-left:auto;margin-right:auto}
  .currency{display:none}
  .case{grid-template-columns:1fr}
  .case[data-img="right"] .case-media{order:0}
  .case-media{min-height:62vw;max-height:80vh}
  .case-body{padding:clamp(32px,8vw,56px) var(--pad)}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{min-height:92svh}
  .hdr-utils{gap:6px}
  .util-link{width:38px;height:38px}
  .field .btn{flex:1 1 100%}
  .caps-grid{grid-template-columns:1fr}
  .case-media{min-height:54vw}
  .brand img{height:17px}
}