/* ==========================================================================
   YOI Studio — Retail Experience Design
   Design system. Hand-built, no framework.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Brand palette — carried over from YOI's own tools so the site, the
     ProjectTracker and the fee quotation all read as one identity. */
  --cream:      #F5F3EF;
  --paper:      #FFFFFF;
  --charcoal:   #1E1E1C;
  --mid:        #6B6B68;
  --light:      #AEADA8;
  --border:     #DDDBD6;
  --gold:       #B89A6A;

  /* Cinematic darks */
  --ink:        #12110F;
  --ink-deep:   #0A0908;
  --ink-soft:   #1C1A17;
  --ink-line:   rgba(245,243,239,.14);

  --font-display: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --t-hero:  clamp(2.75rem, 7.2vw, 7rem);
  --t-h1:    clamp(2.25rem, 5.4vw, 4.75rem);
  --t-h2:    clamp(1.85rem, 3.8vw, 3.25rem);
  --t-h3:    clamp(1.3rem, 2.1vw, 1.85rem);
  --t-lead:  clamp(1.05rem, 1.45vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-small: .875rem;
  --t-micro: .75rem;

  --shell: 1440px;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --sec-y: clamp(5rem, 11vw, 11rem);

  /* Confident, unhurried motion. Expo-out is the "Apple" curve. */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--gold); color:#fff; }

/* --- 2. Typography ------------------------------------------------------- */
h1,h2,h3,h4{ margin:0; font-weight:400; }

.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.02em;
}
.t-hero{ font-size:var(--t-hero); }
.t-h1{ font-size:var(--t-h1); }
.t-h2{ font-size:var(--t-h2); }
.t-h3{ font-size:var(--t-h3); line-height:1.2; }

.eyebrow{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
  display:block;
}
.eyebrow--muted{ color:var(--mid); }
.on-dark .eyebrow--muted{ color:var(--light); }

.lead{
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--mid);
  max-width:46ch;
}
.on-dark .lead{ color:rgba(245,243,239,.72); }

.measure{ max-width:68ch; }
.measure-tight{ max-width:54ch; }

.on-dark{ background:var(--ink); color:var(--cream); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:var(--cream); }

/* --- 3. Layout ----------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(3.5rem,7vw,6.5rem); }

.rule{ height:1px; background:var(--border); border:0; margin:0; }
.on-dark .rule, .rule--dark{ background:var(--ink-line); }

.grid{ display:grid; gap:clamp(1.5rem,3vw,2.75rem); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* Editorial split: sticky label column + flowing content column */
.split{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.split__aside{ position:sticky; top:clamp(6rem,12vh,9rem); }

/* --- 4. Navigation ------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.35rem var(--gutter);
  color:var(--cream);
  transition:background .5s var(--ease), color .5s var(--ease),
             padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(10,9,8,.55), rgba(10,9,8,0));
  opacity:1; transition:opacity .5s var(--ease);
  pointer-events:none;
}
.nav.is-solid{
  background:rgba(245,243,239,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  color:var(--charcoal);
  padding-block:.95rem;
  box-shadow:0 1px 0 var(--border);
}
.nav.is-solid::before{ opacity:0; }
.nav.is-hidden{ transform:translateY(-100%); }
.nav{ transition:transform .5s var(--ease), background .5s var(--ease),
                 color .5s var(--ease), padding .5s var(--ease); }

/* --- Logo -----------------------------------------------------------------
   Both marks are set in type rather than shipped as bitmaps: they stay crisp
   at any size, recolour with the surrounding text, and cost no extra request. */
.wordmark{
  font-family:"Poppins", var(--font-sans);
  font-weight:600; font-size:1.2rem; line-height:1; letter-spacing:-.005em;
  display:inline-block;
}

.logo-lockup{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:11.6em; height:11.6em;
  border:1px solid currentColor;
  font-family:"Poppins", var(--font-sans);
  font-size:1rem; line-height:1; color:inherit;
}
.logo-lockup__yoi{
  font-weight:300; font-size:2.85em; letter-spacing:.07em;
  padding-left:.07em;             /* optical centring against the tracking */
}
.logo-lockup__yoi i{ font-style:normal; position:relative; }
.logo-lockup__yoi i::after{       /* the macron above the I */
  content:""; position:absolute; left:50%; top:-.30em;
  transform:translateX(-50%);
  width:.66em; height:.055em; background:currentColor;
}
.logo-lockup__cn{
  display:flex; align-items:center; gap:.85em; margin-top:.62em;
  font-family:"Noto Sans SC", var(--font-sans);
  font-size:1.2em; font-weight:400; letter-spacing:.1em;
}
.logo-lockup__cn i{ display:block; width:2em; height:1px; background:currentColor; }
.logo-lockup__ds{
  margin-top:.75em; font-size:.63em; font-weight:400; letter-spacing:.3em;
  text-transform:uppercase;
}
.logo-lockup--sm{ font-size:.72rem; }

.nav__links{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.2rem); }
.nav__links a{
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; opacity:.82; position:relative; padding-block:.35rem;
  transition:opacity .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ opacity:1; }

.nav__cta{
  border:1px solid currentColor; border-radius:100px;
  padding:.55rem 1.15rem !important; opacity:1 !important;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.nav__cta::after{ display:none !important; }
.nav__cta:hover{ background:currentColor; }
.nav:not(.is-solid) .nav__cta:hover{ color:var(--ink); }
.nav.is-solid .nav__cta:hover{ color:var(--cream); }

.nav__burger{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; margin-right:-10px; padding:0;
  position:relative;
}
.nav__burger i{
  position:absolute; left:11px; right:11px; height:1.5px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.nav__burger i:nth-child(1){ top:17px; }
.nav__burger i:nth-child(2){ bottom:17px; }
body.menu-open .nav__burger i:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
body.menu-open .nav__burger i:nth-child(2){ transform:translateY(-4.75px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--ink); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
body.menu-open{ overflow:hidden; }
body.menu-open .menu{ opacity:1; visibility:visible; }
.menu a{
  font-family:var(--font-display); font-size:clamp(2rem,8vw,3.5rem);
  line-height:1.25; letter-spacing:-.02em;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
body.menu-open .menu a{ opacity:1; transform:none; }
.menu a:nth-child(1){ transition-delay:.06s }
.menu a:nth-child(2){ transition-delay:.11s }
.menu a:nth-child(3){ transition-delay:.16s }
.menu a:nth-child(4){ transition-delay:.21s }
.menu a:nth-child(5){ transition-delay:.26s }
.menu a:nth-child(6){ transition-delay:.31s }
.menu__foot{
  margin-top:auto; padding-top:2.5rem; font-size:var(--t-small);
  color:rgba(245,243,239,.6); display:flex; flex-wrap:wrap; gap:.5rem 2rem;
}

/* --- 5. Cinematic hero --------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  /* Column, bottom-aligned: the title block and the caption/dots row stack at
     the foot of the frame. Row direction would put them side by side. */
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--ink-deep);
  color:var(--cream);
}
.hero__stage{ position:absolute; inset:0; }
.hero__frame{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 2s var(--ease-soft);
  will-change:opacity;
}
.hero__frame.is-active{ opacity:1; }
.hero__frame img{
  width:100%; height:100%; object-fit:cover;
  /* Slow push-in gives stills the feel of a moving plate. */
  animation:kenburns 14s linear forwards;
  transform-origin:var(--origin,center);
}
@keyframes kenburns{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.13); }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,9,8,.88) 0%, rgba(10,9,8,.45) 38%, rgba(10,9,8,.18) 62%, rgba(10,9,8,.42) 100%),
    radial-gradient(120% 85% at 50% 100%, rgba(10,9,8,.5), transparent 60%);
}
.hero__body{
  position:relative; z-index:2;
  width:100%;
  padding-bottom:clamp(3.5rem,8vh,6rem);
  padding-top:9rem;
}
.hero__title{ max-width:17ch; }
.hero__title .word{
  display:inline-block; overflow:hidden; vertical-align:top;
}
.hero__title .word > span{
  display:inline-block;
  transform:translateY(105%);
  animation:riseIn 1.15s var(--ease) forwards;
}
@keyframes riseIn{ to{ transform:none; } }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:.6rem clamp(1rem,2.6vw,2.4rem);
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  font-size:var(--t-small); letter-spacing:.06em;
  color:rgba(245,243,239,.78);
  opacity:0; animation:fadeUp 1s var(--ease) .85s forwards;
}
.hero__meta span{ position:relative; }
.hero__meta span+span::before{
  content:""; position:absolute; left:calc(clamp(1rem,2.6vw,2.4rem) / -2);
  top:.62em; width:3px; height:3px; border-radius:50%;
  background:var(--gold);
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.hero__foot{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding:0 var(--gutter) clamp(1.5rem,3vh,2.25rem);
  opacity:0; animation:fadeUp 1s var(--ease) 1.1s forwards;
}
.hero__caption{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,243,239,.62);
}
.hero__dots{ display:flex; gap:.5rem; }
.hero__dots button{
  width:26px; height:2px; border:0; padding:0; cursor:pointer;
  background:rgba(245,243,239,.28); position:relative; overflow:hidden;
}
.hero__dots button.is-active{ background:rgba(245,243,239,.28); }
.hero__dots button.is-active::after{
  content:""; position:absolute; inset:0; background:var(--cream);
  transform-origin:left; animation:dotFill 6.5s linear forwards;
}
@keyframes dotFill{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

.scroll-cue{
  position:absolute; left:50%; bottom:clamp(1.5rem,3vh,2.25rem);
  transform:translateX(-50%); z-index:2;
  width:1px; height:46px; background:rgba(245,243,239,.25); overflow:hidden;
}
.scroll-cue::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  animation:cue 2.6s var(--ease-soft) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%);} 55%,100%{ transform:translateY(100%);}
}

/* --- 6. Scroll reveals --------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.1s }
[data-reveal-delay="2"]{ transition-delay:.2s }
[data-reveal-delay="3"]{ transition-delay:.3s }
[data-reveal-delay="4"]{ transition-delay:.4s }

.img-mask{ overflow:hidden; }
.img-mask img{ transition:transform 1.4s var(--ease); will-change:transform; }
[data-reveal] .img-mask img{ transform:scale(1.08); }
[data-reveal].is-in .img-mask img{ transform:scale(1); }

/* --- 7. Statement blocks ------------------------------------------------- */
.statement{
  font-family:var(--font-display);
  font-size:clamp(1.65rem,3.5vw,3rem);
  line-height:1.18; letter-spacing:-.015em;
  max-width:22ch;
}
.statement em{ font-style:italic; color:var(--gold); }

.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  border-top:1px solid var(--border); padding-top:2.5rem;
}
.on-dark .stat-row{ border-color:var(--ink-line); }
.stat__n{
  font-family:var(--font-display); font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:1; letter-spacing:-.02em; display:block;
}
.stat__l{
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mid); margin-top:.7rem; display:block; line-height:1.5;
}
.on-dark .stat__l{ color:var(--light); }

/* --- 8. Featured stories / project cards --------------------------------- */
.story{ display:block; position:relative; }
.story__media{
  position:relative; overflow:hidden; background:var(--ink-soft);
  aspect-ratio:4/3;
}
.story__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.5s var(--ease), filter 1s var(--ease);
}
.story:hover .story__media img{ transform:scale(1.05); }
.story__index{
  position:absolute; top:1.1rem; left:1.25rem; z-index:2;
  font-size:var(--t-micro); letter-spacing:.16em; color:rgba(255,255,255,.85);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.story__body{ padding-top:1.35rem; }
.story__kicker{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mid); display:block; margin-bottom:.6rem;
}
.on-dark .story__kicker{ color:var(--light); }
.story__title{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.3vw,2rem);
  line-height:1.12; letter-spacing:-.015em;
}
.story__desc{ color:var(--mid); font-size:var(--t-small); margin:.7rem 0 0; max-width:44ch; }
.on-dark .story__desc{ color:rgba(245,243,239,.66); }
.story__tags{
  margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem;
}
.tag{
  font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:100px; padding:.3rem .75rem;
  color:var(--mid);
}
.on-dark .tag{ border-color:var(--ink-line); color:var(--light); }

/* Hero-scale story (the flagship) */
.story--feature .story__media{ aspect-ratio:16/9; }
.story--feature .story__title{ font-size:clamp(1.9rem,3.6vw,3rem); }

/* --- 9. Link affordances ------------------------------------------------- */
.link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-small); letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; padding-bottom:.35rem;
  border-bottom:1px solid currentColor;
  transition:gap .4s var(--ease);
}
.link:hover{ gap:1rem; }
.link svg{ width:15px; height:9px; flex:none; }

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--charcoal); color:var(--cream);
  border:1px solid var(--charcoal); border-radius:100px;
  padding:.95rem 1.8rem; cursor:pointer;
  font-size:var(--t-small); letter-spacing:.08em; font-weight:500;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn:active{ transform:scale(.985); }
.btn--ghost{ background:transparent; color:inherit; border-color:currentColor; }
.btn--ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--lg{ padding:1.15rem 2.3rem; font-size:.9375rem; }

/* --- 10. Services -------------------------------------------------------- */
.cap{
  border-top:1px solid var(--border);
  padding-top:1.9rem;
  display:grid; gap:1rem;
}
.on-dark .cap{ border-color:var(--ink-line); }
.cap__n{
  font-size:var(--t-micro); letter-spacing:.18em; color:var(--gold);
}
.cap__t{ font-family:var(--font-display); font-size:var(--t-h3); line-height:1.1; }
.cap ul{ margin:.35rem 0 0; padding:0; list-style:none; }
.cap li{
  font-size:var(--t-small); color:var(--mid);
  padding:.5rem 0; border-bottom:1px solid var(--border);
}
.on-dark .cap li{ color:var(--light); border-color:var(--ink-line); }
.cap li:last-child{ border-bottom:0; }

/* --- 11. Process timeline ------------------------------------------------ */
.process{ counter-reset:step; display:grid; gap:0; }
.process__step{
  counter-increment:step;
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.6rem,3vw,2.4rem) 0;
  border-top:1px solid var(--ink-line);
  align-items:start;
  position:relative;
}
.process__step:last-child{ border-bottom:1px solid var(--ink-line); }
.process__step::before{
  content:"0" counter(step);
  font-family:var(--font-display); font-size:1.5rem; color:var(--gold);
  line-height:1;
}
.process__t{ font-family:var(--font-display); font-size:var(--t-h3); line-height:1.15; }
.process__d{ color:rgba(245,243,239,.62); font-size:var(--t-small); margin:0; }
.process__step{ transition:background .5s var(--ease); }
.process__step:hover{ background:rgba(245,243,239,.03); }

/* --- 12. Research / editorial -------------------------------------------- */
.paper-card{
  display:grid; gap:1rem; align-content:start;
  padding:clamp(1.6rem,2.6vw,2.2rem);
  background:var(--paper); border:1px solid var(--border);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
  height:100%;
}
.paper-card:hover{ transform:translateY(-4px); box-shadow:0 22px 60px rgba(30,30,28,.09); }
.paper-card__meta{
  display:flex; gap:.75rem; align-items:center;
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mid);
}
.paper-card__meta b{ color:var(--gold); font-weight:500; }
.paper-card__t{ font-family:var(--font-display); font-size:var(--t-h3); line-height:1.16; }
.paper-card__x{ font-size:var(--t-small); color:var(--mid); margin:0; }
.paper-card__f{
  margin-top:auto; padding-top:.6rem; font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal);
}

/* Long-form article body */
.article{ max-width:70ch; margin-inline:auto; }
.article > * + *{ margin-top:1.5rem; }
.article h2{
  font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.14; letter-spacing:-.015em; margin-top:3.5rem;
}
.article h3{
  font-size:1.125rem; font-weight:600; letter-spacing:-.005em; margin-top:2.5rem;
}
.article p{ margin:0; color:#33322F; }
.article ul,.article ol{ margin:0; padding-left:1.3rem; color:#33322F; }
.article li{ margin-bottom:.6rem; }
.article strong{ font-weight:600; color:var(--charcoal); }
.article figure{ margin:3rem 0; }
.article figcaption{
  font-size:var(--t-micro); letter-spacing:.06em; color:var(--mid);
  margin-top:.85rem; line-height:1.6;
}
.article blockquote{
  margin:3rem 0; padding-left:clamp(1.25rem,3vw,2rem);
  border-left:2px solid var(--gold);
  font-family:var(--font-display); font-size:clamp(1.35rem,2.4vw,1.85rem);
  line-height:1.3; letter-spacing:-.01em;
}
.article .callout{
  background:var(--paper); border:1px solid var(--border);
  padding:clamp(1.4rem,2.4vw,2rem); margin:2.5rem 0;
}
.article .callout p{ font-size:var(--t-small); }
.article .callout > *+*{ margin-top:.85rem; }

.data-table{ width:100%; border-collapse:collapse; font-size:var(--t-small); margin:2rem 0; }
.data-table th,.data-table td{
  text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--border);
  vertical-align:top;
}
.data-table th{
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--mid); font-weight:500;
}
.data-table td:not(:first-child){ font-variant-numeric:tabular-nums; }
.table-scroll{ overflow-x:auto; }

/* --- 13. Case-study components ------------------------------------------- */
.case-hero{
  position:relative; min-height:88svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--ink-deep); color:var(--cream); overflow:hidden;
}
.case-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.case-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,.9) 0%, rgba(10,9,8,.35) 45%, rgba(10,9,8,.35) 100%);
}
.case-hero__body{ position:relative; z-index:2; width:100%; padding-bottom:clamp(3rem,7vh,5rem); }

.factsheet{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(1.25rem,2.5vw,2.5rem);
}
.fact__l{
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mid); display:block; margin-bottom:.45rem;
}
.on-dark .fact__l{ color:var(--light); }
.fact__v{ font-size:var(--t-small); line-height:1.5; }

.chapter{ scroll-margin-top:6rem; }
.chapter__n{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:.9rem;
}

.figure figcaption{
  font-size:var(--t-micro); letter-spacing:.06em; color:var(--mid);
  margin-top:.85rem; line-height:1.6; max-width:56ch;
}
.on-dark .figure figcaption{ color:var(--light); }
.figure--full{ margin-inline:calc(var(--gutter) * -1); }

.chapter-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(245,243,239,.9);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.chapter-nav__inner{
  display:flex; gap:1.75rem; overflow-x:auto; scrollbar-width:none;
  padding:.9rem var(--gutter);
}
.chapter-nav__inner::-webkit-scrollbar{ display:none; }
.chapter-nav a{
  white-space:nowrap; font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--mid); padding-block:.3rem;
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.chapter-nav a:hover{ color:var(--charcoal); }
.chapter-nav a.is-active{ color:var(--charcoal); border-color:var(--gold); }

/* --- 14. Interactive: before/after slider -------------------------------- */
.ba{
  position:relative; overflow:hidden; user-select:none; touch-action:pan-y;
  cursor:ew-resize; background:var(--ink-soft);
  /* Must match the source pair's ratio — object-fit:cover would otherwise crop
     each half differently and the two views would stop corresponding. */
  aspect-ratio:2.6/1;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:2px; background:var(--cream); transform:translateX(-1px);
  box-shadow:0 0 22px rgba(0,0,0,.45); pointer-events:none;
}
.ba__handle::after{
  content:""; position:absolute; top:50%; left:50%;
  width:54px; height:54px; transform:translate(-50%,-50%);
  border:1.5px solid var(--cream); border-radius:50%;
  background:rgba(10,9,8,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ba__handle::before{
  content:"‹ ›"; position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%); color:var(--cream);
  font-size:1.15rem; letter-spacing:.1em; line-height:1;
}
.ba__tag{
  position:absolute; bottom:1.1rem; z-index:3;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream); background:rgba(10,9,8,.55);
  padding:.4rem .8rem; border-radius:100px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ba__tag--l{ left:1.1rem; } .ba__tag--r{ right:1.1rem; }

/* --- 15. Interactive: store plan ----------------------------------------- */
.plan{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
}
.plan__svg{ width:100%; height:auto; background:var(--ink-soft); }
.plan__svg .zone{ cursor:pointer; transition:opacity .4s var(--ease); }
.plan__svg .zone rect,.plan__svg .zone path{ transition:fill .4s var(--ease); }
.plan__svg .zone:hover{ opacity:.85; }
.plan__svg .zone.is-active rect,.plan__svg .zone.is-active path{ fill:var(--gold); }
/* Labels sit on a translucent fill over near-black, so they have to be light
   until the zone is selected and the fill goes gold. */
.plan__svg .zone text{ fill:rgba(245,243,239,.82); transition:fill .4s var(--ease); }
.plan__svg .zone:hover text{ fill:var(--cream); }
.plan__svg .zone.is-active text{ fill:#12110F; }
.plan__panel{ min-height:min(340px,52vw); }
.plan__step{
  font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:.85rem;
}
.plan__t{ font-family:var(--font-display); font-size:var(--t-h3); line-height:1.15; margin-bottom:.9rem; }
.plan__d{ color:rgba(245,243,239,.7); font-size:var(--t-small); margin:0 0 1.25rem; }
.plan__img{ aspect-ratio:3/2; overflow:hidden; background:var(--ink-deep); }
.plan__img img{ width:100%; height:100%; object-fit:cover; }
.plan__fade{ animation:fadeUp .6s var(--ease); }
.plan__legend{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem;
}
.plan__legend button{
  background:none; border:1px solid var(--ink-line); border-radius:100px;
  padding:.4rem .9rem; cursor:pointer; color:var(--light);
  font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.plan__legend button:hover{ color:var(--cream); border-color:var(--light); }
.plan__legend button.is-active{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* --- 16. Interactive: day / night lighting ------------------------------- */
.daynight{ position:relative; overflow:hidden; background:var(--ink-deep); }
.daynight img{ width:100%; display:block; transition:filter 1.4s var(--ease-soft); }
.daynight[data-mode="night"] img{
  filter:brightness(.52) contrast(1.16) saturate(.86) hue-rotate(-8deg);
}
.daynight__toggle{
  position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; background:rgba(10,9,8,.5);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(245,243,239,.22); border-radius:100px; padding:3px;
}
.daynight__toggle button{
  background:none; border:0; cursor:pointer; color:rgba(245,243,239,.7);
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  padding:.5rem 1.1rem; border-radius:100px;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.daynight__toggle button.is-active{ background:var(--cream); color:var(--ink); }
.daynight__glow{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity 1.4s var(--ease-soft);
  background:radial-gradient(60% 45% at 50% 62%, rgba(184,154,106,.42), transparent 70%);
  mix-blend-mode:screen;
}
.daynight[data-mode="night"] .daynight__glow{ opacity:1; }

/* --- 17. Forms ----------------------------------------------------------- */
.form{ display:grid; gap:2.25rem; }
.field{ display:grid; gap:.65rem; }
.field > label,.fieldset > legend{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mid); padding:0;
}
.field input,.field textarea,.field select{
  width:100%; font:inherit; font-size:1rem; color:var(--charcoal);
  background:transparent; border:0; border-bottom:1px solid var(--border);
  padding:.7rem 0; border-radius:0;
  transition:border-color .4s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold);
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; cursor:pointer; }

.fieldset{ border:0; padding:0; margin:0; display:grid; gap:.9rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip{ position:relative; }
.chip span{
  display:inline-block; cursor:pointer;
  border:1px solid var(--border); border-radius:100px;
  padding:.6rem 1.15rem; font-size:var(--t-small);
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.chip span:hover{ border-color:var(--light); }
/* Selected state. The sibling rule is the no-JS baseline; `:has()` and the
   `.is-on` class (set by initChips) cover engines that don't re-invalidate a
   sibling's style when checkedness changes. */
.chip input:checked + span,
.chip:has(input:checked) span,
.chip.is-on span{
  background:var(--charcoal); border-color:var(--charcoal); color:var(--cream);
}
.chip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

.form__note{ font-size:var(--t-micro); color:var(--mid); line-height:1.6; }
.form__status{ font-size:var(--t-small); }

/* --- 18. Footer ---------------------------------------------------------- */
.footer{ background:var(--ink); color:var(--cream); padding-top:clamp(4rem,8vw,7rem); }
.footer a{ transition:color .3s var(--ease); }
.footer a:hover{ color:var(--gold); }
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(3rem,6vw,5rem);
}
.footer__h{
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--light); margin:0 0 1.15rem;
}
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; font-size:var(--t-small); }
.footer__bottom{
  border-top:1px solid var(--ink-line);
  padding:1.6rem 0 2rem;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  font-size:var(--t-micro); letter-spacing:.06em; color:rgba(245,243,239,.5);
}

/* --- 19. Utilities ------------------------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--charcoal); color:var(--cream); padding:.8rem 1.2rem;
  transition:top .3s var(--ease);
}
.skip:focus{ top:1rem; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.text-gold{ color:var(--gold); }
.mt-0{ margin-top:0 } .mt-1{ margin-top:.75rem } .mt-2{ margin-top:1.5rem }
.mt-3{ margin-top:2.25rem } .mt-4{ margin-top:3rem } .mt-5{ margin-top:4.5rem }
.mb-0{ margin-bottom:0 }
.flow > * + *{ margin-top:1.25rem; }

/* --- 20. Responsive ------------------------------------------------------ */
@media (max-width:1080px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .plan{ grid-template-columns:1fr; }
  .process__step{ grid-template-columns:3.5rem minmax(0,1fr); }
  .process__d{ grid-column:2; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split__aside{ position:static; }
  .stat-row{ grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
  .hero__body{ padding-top:7rem; }
  .hero__title{ max-width:14ch; }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .story--feature .story__media{ aspect-ratio:4/3; }
  .figure--full{ margin-inline:0; }
}

/* --- 21. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__frame img{ animation:none; transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__title .word > span{ transform:none; }
  .hero__meta,.hero__foot{ opacity:1; }
}

/* --- 22. Print ----------------------------------------------------------- */
@media print{
  .nav,.menu,.chapter-nav,.scroll-cue,.hero__dots,.daynight__toggle{ display:none !important; }
  body{ background:#fff; }
  .on-dark{ background:#fff !important; color:#000 !important; }
}