/* ============================================================
   CASE STUDY — shared system
   Each page sets its brand tokens (--b-*) in its own <style>.
   ============================================================ */
:root{
  --ink-0:#0b0b0d;
  --ink:#121214;
  --cream:#f4f2ec;
  --text:rgba(244,242,236,.92);
  --muted:rgba(244,242,236,.62);
  --faint:rgba(244,242,236,.36);
  --line:rgba(244,242,236,.09);
  --line-2:rgba(244,242,236,.16);
  --red:#ef4424;
  --red-rgb:239,68,36;

  --ease:cubic-bezier(.16,1,.3,1);
  --sans:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --serif:'the-seasons', 'The Seasons', 'Bodoni Moda', 'Didot', Georgia, serif;
  --gutter:clamp(20px, 4vw, 56px);
  --maxw:1440px;
  --section:clamp(96px, 12vw, 168px);
  --nav-h:76px;

  /* brand defaults (overridden per page) */
  --b-bg:#121214;
  --b-deep:#0b0b0d;
  --b-1:#2b354d;
  --b-2:#1e4866;
  --b-accent:#4290ba;
  --b-accent-rgb:66,144,186;
  --b-fg:#f4f2ec;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html:not(.lenis){ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  margin:0; background:var(--b-deep); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.page{ overflow-x:clip; position:relative; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--b-accent); color:#fff; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--b-accent); outline-offset:4px; border-radius:6px; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* ambient backdrop */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(var(--b-accent-rgb),.22), transparent 70%),
    radial-gradient(50% 50% at 0% 80%, rgba(var(--b-accent-rgb),.12), transparent 70%),
    var(--b-deep);
}
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.06;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }
main, footer{ position:relative; z-index:1; }

/* type */
.display{
  font-family:var(--sans); font-variation-settings:"wdth" 112; font-weight:500;
  letter-spacing:-.045em; line-height:.94; color:var(--cream);
}
.it{
  font-family:var(--serif); font-style:normal; font-weight:400; font-variation-settings:normal;
  letter-spacing:-.01em; font-size:1.04em; line-height:.8; color:var(--b-accent);
}
.label{
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-variation-settings:"wdth" 108;
}
.kicker{ display:flex; align-items:center; gap:14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h); display:flex; align-items:center; transition:transform .6s var(--ease); }
.nav.is-hidden{ transform:translateY(-110%); }
.nav-bg{
  position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s var(--ease);
  background:linear-gradient(to bottom, rgba(11,11,13,.82), rgba(11,11,13,.5));
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav.is-scrolled .nav-bg{ opacity:1; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; }
.brand{ display:flex; align-items:center; border-radius:8px; }
.brand img{ height:30px; width:auto; transition:transform .5s var(--ease); }
.brand:hover img{ transform:rotate(-4deg) scale(1.04); }
.brand:active img{ transform:scale(.96); }
.nav-mid{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.nav-mid b{ color:var(--cream); font-weight:500; }
.nav-right{ display:flex; align-items:center; gap:10px; }

.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px; height:46px; padding:0 20px; border-radius:999px;
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn .arr{ display:inline-block; transition:transform .5s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-ghost{ color:var(--cream); box-shadow:0 0 0 1px var(--line-2) inset; background:rgba(244,242,236,.03); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(244,242,236,.38) inset; }
.btn-ghost:hover .arr.back{ transform:translateX(-4px); }
.btn-ghost:active{ transform:scale(.97); }
.btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 30px -8px rgba(var(--red-rgb),.55), 0 1px 0 rgba(255,255,255,.25) inset; }
.btn-red::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform .9s var(--ease); }
.btn-red:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(var(--red-rgb),.7), 0 1px 0 rgba(255,255,255,.25) inset; }
.btn-red:hover::before{ transform:translateX(120%); }
.btn-red:active{ transform:scale(.97); }

/* progress bar */
.progress{ position:fixed; left:0; right:0; top:0; height:2px; z-index:101; background:var(--b-accent); transform:scaleX(0); transform-origin:left; box-shadow:0 0 12px rgba(var(--b-accent-rgb),.8); }

/* ============================================================
   HERO
   ============================================================ */
.c-hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 clamp(28px, 5vh, 56px); overflow:hidden; isolation:isolate;
}
.c-hero-bg{ position:absolute; inset:0; z-index:-1; }
.c-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, var(--b-deep) 4%, rgba(11,11,13,.2) 50%, rgba(11,11,13,.55)); }
.c-hero-top{ display:flex; justify-content:space-between; gap:20px; margin-bottom:auto; padding-top:clamp(20px, 6vh, 60px); }
.c-title{ margin:0; font-size:clamp(3.4rem, 13.5vw, 14rem); line-height:.86; }
.c-title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.c-title .line > span{ display:inline-block; }
.c-title .line:nth-child(2){ padding-left:clamp(0px, 16vw, 300px); }
.js .c-title .line > span{ transform:translateY(105%); transition:transform 1.5s var(--ease); }
.is-loaded .c-title .line > span{ transform:none; }
.is-loaded .c-title .line:nth-child(2) > span{ transition-delay:.12s; }
.c-sub{ max-width:42ch; margin:28px 0 0; color:var(--muted); font-size:clamp(16px, 1.4vw, 20px); line-height:1.6; }
.c-meta{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px;
  margin-top:clamp(36px, 6vh, 64px); padding-top:24px; border-top:1px solid var(--line-2);
}
.c-meta dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.c-meta dd{ margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--cream); }
.c-meta a{ border-bottom:1px solid var(--line-2); transition:border-color .3s var(--ease), color .3s var(--ease); }
.c-meta a:hover{ border-color:var(--b-accent); color:var(--b-accent); }
.c-meta a:active{ opacity:.6; }
.fade-up{ }
.js .fade-up{ opacity:0; transform:translateY(24px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.is-loaded .fade-up{ opacity:1; transform:none; }
.is-loaded .d1{ transition-delay:.35s; } .is-loaded .d2{ transition-delay:.5s; } .is-loaded .d3{ transition-delay:.65s; }

/* ============================================================
   SHOWCASE — the hero media flies toward the viewer
   ============================================================ */
.showcase{ position:relative; height:220vh; }
@media (min-width: 961px){
  /* pulled up under the hero: let clicks pass through the empty stage */
  .showcase{ margin-top:-12vh; pointer-events:none; }
  .showcase-media{ pointer-events:auto; }
}
.showcase-stage{ position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden; }
.showcase-media{
  position:relative; width:100vw; height:100svh; overflow:hidden; border-radius:28px;
  transform:scale(.74); will-change:transform;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
}
.showcase-cap{
  position:absolute; left:var(--gutter); bottom:clamp(24px, 5vh, 48px); z-index:3;
  display:flex; gap:14px; align-items:center; color:var(--cream); font-size:14px; opacity:0;
}
.showcase-cap .dot{ width:8px; height:8px; border-radius:50%; background:var(--b-accent); box-shadow:0 0 0 4px rgba(var(--b-accent-rgb),.25); }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding:var(--section) 0; position:relative; }
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:40px; align-items:end; margin-bottom:clamp(44px, 6vw, 80px); }
.sec-title{ margin:16px 0 0; font-size:clamp(2.6rem, 6.4vw, 6rem); }
.sec-head:not(:has(.sec-aside)){ grid-template-columns:1fr; }
.sec-aside{ margin:0; color:var(--muted); font-size:16px; max-width:40ch; justify-self:end; }

.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].in{ opacity:1; transform:none; }
.js [data-reveal="2"]{ transition-delay:.08s; } .js [data-reveal="3"]{ transition-delay:.16s; } .js [data-reveal="4"]{ transition-delay:.24s; }

/* statement */
.statement{ margin:0; max-width:24ch; font-size:clamp(2rem, 4.8vw, 4.6rem); font-weight:400; letter-spacing:-.035em; line-height:1.08; font-variation-settings:"wdth" 106; color:var(--cream); }
.statement .w{ display:inline-block; }
.has-gsap .statement .w{ opacity:.14; }
.trio{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 3vw, 48px); margin-top:clamp(56px, 7vw, 104px); padding-top:32px; border-top:1px solid var(--line); }
.trio .n{ display:block; font-size:13px; color:var(--b-accent); letter-spacing:.06em; margin-bottom:18px; font-variant-numeric:tabular-nums; }
.trio h3{ margin:0 0 10px; font-size:20px; font-weight:500; color:var(--cream); letter-spacing:-.01em; font-variation-settings:"wdth" 108; }
.trio p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.75; }

/* brand board */
.board{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; }
.tile{
  position:relative; overflow:hidden; border-radius:24px; min-height:300px;
  display:grid; place-items:center; padding:clamp(28px, 4vw, 64px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -30px rgba(0,0,0,.6);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
}
.tile:hover{ transform:translateY(-6px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--b-accent-rgb),.25); }
.tile img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform 1.2s var(--ease); }
.tile:hover img{ transform:scale(1.04); }
.tile .tag{
  position:absolute; left:20px; top:18px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:currentColor; opacity:.6;
}
.span-8{ grid-column:span 8; } .span-6{ grid-column:span 6; } .span-4{ grid-column:span 4; } .span-12{ grid-column:span 12; }
.tall{ min-height:520px; }

.swatches{ display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0,1fr)); gap:16px; margin-top:16px; }
.swatch{
  position:relative; border-radius:24px; min-height:240px; padding:22px;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 24px 48px -24px rgba(0,0,0,.6);
  transition:transform .8s var(--ease);
}
.swatch:hover{ transform:translateY(-8px); }
.swatch b{ display:block; font-weight:500; font-size:16px; }
.swatch span{ font-size:13px; letter-spacing:.08em; opacity:.7; font-variant-numeric:tabular-nums; }

/* devices */
.devices{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px, 4vw, 64px); align-items:center; }
.browser{ border-radius:16px; overflow:hidden; background:#0d0f12; box-shadow:0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.browser-bar{ height:34px; display:flex; align-items:center; gap:7px; padding:0 14px; background:rgba(255,255,255,.05); }
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.browser-bar span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:14px; height:20px; padding:0 12px; border-radius:6px; display:flex; align-items:center; font-size:11px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); }
.browser img{ width:100%; }
.phone{
  position:relative; width:clamp(220px, 22vw, 300px); aspect-ratio:9/19.5; border-radius:44px; padding:10px;
  background:linear-gradient(145deg, #2a2a2e, #0e0e10);
  box-shadow:0 60px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.phone-screen{ position:relative; width:100%; height:100%; border-radius:35px; overflow:hidden; background:#000; }
.phone-screen img{ width:100%; height:auto; animation:phone-scroll 26s cubic-bezier(.45,0,.55,1) infinite alternate; }
.phone-screen.still img{ animation:none; height:100%; object-fit:cover; }
.phone:hover .phone-screen img{ animation-play-state:paused; }
.phone::after{ content:''; position:absolute; top:20px; left:50%; width:30%; height:22px; margin-left:-15%; border-radius:999px; background:#000; }
@keyframes phone-scroll{ 0%,6%{ transform:translateY(0); } 94%,100%{ transform:translateY(calc(-100% + var(--screen-h, 560px))); } }

/* horizontal gallery */
.hs{ position:relative; padding:calc(var(--nav-h) + 8px) 0 40px; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.hs-head{ margin-bottom:clamp(32px, 4vw, 56px); }
.hs-viewport{ overflow:hidden; }
.hs-track{ display:flex; gap:16px; width:max-content; padding:0 var(--gutter); will-change:transform; }
.hs-item{
  position:relative; flex:none; height:min(60vh, 600px); border-radius:24px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
.hs-item img{ height:100%; width:auto; transition:transform 1.4s var(--ease); }
.hs-item:hover img{ transform:scale(1.04); }
.hs-item figcaption{ position:absolute; left:16px; bottom:14px; padding:6px 12px; border-radius:999px; font-size:12px; color:var(--cream); background:rgba(11,11,13,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hs-count{ font-variant-numeric:tabular-nums; color:var(--faint); font-size:13px; white-space:nowrap; }

/* quote */
.quote{ margin:0 auto; max-width:20ch; text-align:center; font-size:clamp(2.2rem, 5.6vw, 5.4rem); line-height:1.02; }

/* next project */
.next{ display:block; position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(56px, 9vw, 140px) 0; isolation:isolate; }
.next-bg{ position:absolute; inset:0; z-index:-1; opacity:0; transform:scale(1.08); transition:opacity .8s var(--ease), transform 1.4s var(--ease); }
.next-bg img{ width:100%; height:100%; object-fit:cover; }
.next-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,13,.9), rgba(11,11,13,.45)); }
.next:hover .next-bg{ opacity:1; transform:none; }
.next .label{ display:block; margin-bottom:18px; }
.next h2{ margin:0; font-size:clamp(3rem, 10vw, 10rem); transition:transform .9s var(--ease); }
.next:hover h2{ transform:translateX(24px); }
.next:active h2{ transform:translateX(12px) scale(.99); }
.next .go{ position:absolute; right:var(--gutter); top:50%; width:clamp(64px, 8vw, 112px); aspect-ratio:1; margin-top:calc(clamp(64px, 8vw, 112px) / -2); border-radius:50%; display:grid; place-items:center; background:var(--red); color:#fff; box-shadow:0 18px 40px -10px rgba(var(--red-rgb),.6); transition:transform .8s var(--ease); }
.next:hover .go{ transform:rotate(-45deg) scale(1.06); }

footer{ padding:28px 0 36px; }
.foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--faint); }
.foot nav{ display:flex; gap:24px; }
.foot a{ color:var(--muted); transition:color .3s var(--ease); border-radius:4px; }
.foot a:hover{ color:var(--cream); }
.foot a:active{ opacity:.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  :root{ --nav-h:68px; }
  .nav-mid{ display:none; }
  .c-title .line:nth-child(2){ padding-left:0; }
  .c-meta{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sec-head{ grid-template-columns:1fr; }
  .sec-aside{ justify-self:start; }
  .trio{ grid-template-columns:1fr; gap:32px; }
  .board{ grid-template-columns:1fr; }
  .span-8, .span-6, .span-4, .span-12{ grid-column:auto; }
  .tall{ min-height:380px; }
  .swatches{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .devices{ grid-template-columns:1fr; justify-items:center; }
  .showcase{ height:auto; }
  .showcase-stage{ position:relative; height:auto; padding:0 var(--gutter); }
  .showcase-media{ transform:none; width:100%; height:auto; aspect-ratio:4/5; }
  .showcase-cap{ opacity:1; }
  .hs-viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .hs-viewport::-webkit-scrollbar{ display:none; }
  .hs{ min-height:0; padding:var(--section) 0 0; }
  .hs-item{ height:58vh; scroll-snap-align:center; }
  .next .go{ display:none; }
}
/* phones: everything static — no looping hero backgrounds, no grain, no heavy blur */
@media (max-width: 960px){
  .grain{ display:none; }
  .nav-bg{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(11,11,13,.94); }
  .c-hero-bg *, .badge svg{ animation:none !important; }
  .tiles i{ opacity:calc(var(--o) * .55); }
  .js .c-title .line > span, .js .fade-up{ transition-duration:.8s; }
}
@media (max-width: 600px){
  .nav-right .btn-red{ display:none; }
  .c-hero-top .label:last-child{ display:none; }
  .swatch{ min-height:170px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js [data-reveal], .js .fade-up, .js .c-title .line > span{ opacity:1; transform:none; }
  .showcase-media{ transform:none; }
}