/* =====================================================================
   3XS DESIGNS — MAIN STYLESHEET
   Requires tokens.css. Sections: base · chrome · home · work · project ·
   footer · responsive. Values come from tokens only.
   ===================================================================== */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:300;letter-spacing:var(--tracking-display);line-height:1.05;text-wrap:balance}
p{margin:0}
dl,dd{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor select,html.has-cursor input,html.has-cursor textarea{cursor:none}

.container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad-x)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.section{padding-block:var(--section-y)}
.dark{background:var(--bg-dark);color:var(--ink-inverse)}

.label{font-family:var(--font-body);font-weight:500;font-size:var(--text-label);line-height:1;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--muted)}
.dark .label{color:var(--muted-inverse)}
.h2{font-size:var(--h2);font-weight:400;max-width:18ch}
.prose{max-width:65ch}
.prose p + p{margin-top:1.25em}
.lead{font-size:var(--text-lead)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--font-body);font-weight:500;font-size:var(--text-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:14px 0;position:relative;transition:transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.btn::after{content:"";position:absolute;left:0;bottom:var(--s-2);height:1px;width:100%;background:currentColor;opacity:.35;transition:opacity var(--dur-fast) var(--ease)}
.btn:hover{transform:scale(1.02);color:var(--accent)}
.btn:hover::after{opacity:1}
.btn__arrow{width:22px;height:1px;background:currentColor;position:relative;transition:width var(--dur-fast) var(--ease)}
.btn__arrow::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .btn__arrow{width:32px}
.btn--solid{background:var(--accent);color:var(--bg-dark);padding:20px 36px;border-radius:999px;will-change:transform}
.btn--solid::after{display:none}
.btn--solid:hover{color:var(--bg-dark);background:var(--accent-hover)}

/* placeholder media — visible until the client's images load */
.media{margin:0;position:relative;overflow:hidden;background:var(--bg-media)}
.media__inner{position:absolute;inset:0}
.media img,.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media img{z-index:2}
.ph{
  z-index:1;
  background:
    linear-gradient(var(--ph-grid) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--ph-grid) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(160deg,var(--ph-a,var(--ph-a-default)),var(--ph-b,var(--ph-b-default)));
}
.ph__label{position:absolute;left:var(--s-3);bottom:14px;font-size:var(--text-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ph-label)}
.ph::after{content:"";position:absolute;inset:var(--s-3);border:1px solid var(--ph-rule);pointer-events:none}
.ph-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
[data-parallax] .media__inner{height:130%;top:-15%;will-change:transform}

/* =====================================================================
   CHROME — progress line, header, menu, cursor, page transition
   ===================================================================== */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform-origin:left center;transform:scaleX(0);z-index:var(--z-progress);pointer-events:none}

.header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--header-y) var(--pad-x);color:var(--ink);
  transition:transform var(--dur) var(--ease),background .5s var(--ease),color .4s var(--ease);
  will-change:transform;
}
.header--inverse{color:var(--ink-inverse)}
.header.is-scrolled{background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink)}
.header.is-hidden{transform:translateY(-110%)}
.header.is-menu-open{background:transparent;backdrop-filter:none;color:var(--ink-inverse)}
.header__logo{display:inline-flex;align-items:baseline;gap:10px;line-height:1}
.header__mark{font-family:var(--font-display);font-weight:300;font-size:var(--logo-mark);letter-spacing:var(--tracking-display)}
.header__word{font-size:var(--text-label);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;opacity:.8}
.header__menu{display:inline-flex;align-items:center;gap:14px;font-size:var(--text-label);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;min-height:var(--touch);padding:0 var(--s-1)}
.header__burger{width:28px;height:10px;position:relative}
.header__burger::before,.header__burger::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.header__burger::before{top:0}
.header__burger::after{top:9px}
.header.is-menu-open .header__burger::before{top:4.5px;transform:rotate(45deg)}
.header.is-menu-open .header__burger::after{top:4.5px;transform:rotate(-45deg)}

/* ---------- slide-out menu — left panel over a dimmed page ----------
   Panel is light and sits ABOVE the header so the logo is covered, as in
   the reference. The scrim sits BELOW the header, so the header's own
   Menu/Close button stays reachable. */
.menu__scrim{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:rgba(26,26,26,.42);
  opacity:0;visibility:hidden;
}
.menu{
  position:fixed;top:0;left:0;bottom:0;z-index:calc(var(--z-header) + 5);
  width:clamp(290px,30vw,430px);max-width:88vw;
  background:var(--bg);color:var(--ink);
  /* Off-canvas position is owned by GSAP (xPercent:-100 in scroll.js).
     Declaring a CSS transform here too would be parsed by GSAP as the
     starting x and doubled, parking the panel at -200%. */
  visibility:hidden;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,34px) clamp(26px,2.8vw,44px) clamp(28px,4vh,48px);
  box-shadow:0 0 clamp(40px,6vw,90px) rgba(26,26,26,.22);
  overflow-y:auto;overscroll-behavior:contain;
}
.menu__close{
  align-self:flex-end;width:var(--touch);height:var(--touch);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.menu__close:hover{color:var(--accent);transform:rotate(90deg)}
.menu__close svg{width:17px;height:17px;display:block}
.menu__label{
  margin-top:clamp(14px,3vh,34px);
  font-size:var(--text-micro);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.menu__list{
  list-style:none;margin:clamp(22px,4.5vh,48px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(8px,1.5vh,18px);
}
.menu__link{
  position:relative;display:inline-block;padding-left:26px;
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.5rem,2.1vw,2rem);letter-spacing:var(--tracking-display);line-height:1.15;
  color:var(--ink);
  transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
/* short dash that draws in on hover and marks the current page */
.menu__link::before{
  content:"";position:absolute;left:0;top:.62em;
  width:14px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.menu__link:hover,.menu__link:focus-visible,.menu__link[aria-current]{color:var(--accent);transform:translateX(6px)}
.menu__link:hover::before,.menu__link:focus-visible::before,.menu__link[aria-current]::before{transform:scaleX(1);opacity:1}
.menu__foot{
  margin-top:auto;padding-top:clamp(22px,5vh,44px);
  display:flex;flex-direction:column;gap:10px;
  font-size:var(--text-caption);color:var(--muted);
}
.menu__foot a{color:var(--muted);transition:color var(--dur-fast) var(--ease)}
.menu__foot a:hover{color:var(--accent)}
.menu__foot span{text-transform:uppercase;letter-spacing:.14em;font-size:var(--text-micro)}
@media (max-width:767px){
  .menu{width:min(86vw,340px)}
  .menu__link{font-size:clamp(1.5rem,7vw,2rem);padding-left:22px}
}
@media (prefers-reduced-motion:reduce){
  .menu__close:hover{transform:none}
  .menu__link:hover,.menu__link:focus-visible,.menu__link[aria-current]{transform:none}
}


.cursor{
  position:fixed;top:0;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;z-index:var(--z-cursor);
  border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity var(--dur-fast),background var(--dur-fast) var(--ease);
  will-change:transform;
}
.cursor.is-visible{opacity:1}
.cursor.is-active{width:48px;height:48px;margin:-24px 0 0 -24px;background:rgba(184,149,106,.14)}
.cursor__label{font-size:9px;font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .2s}
.cursor.has-label{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--header-bg);border-color:transparent}
.cursor.has-label .cursor__label{opacity:1;color:var(--ink)}

/* page transition: fades to the destination project's color, next page fades in from it */
.transition{position:fixed;inset:0;z-index:var(--z-transition);background:var(--bg-dark);opacity:0;visibility:hidden;pointer-events:none}

/* =====================================================================
   HOME · 1. HERO — scroll-scrubbed architectural transformation
   A tall scroll container with a sticky stage. Scroll progress scrubs a
   frame sequence (drawn to canvas) that morphs the technical floor plan
   into the finished furnished apartment. Sticky is used instead of a
   ScrollTrigger pin so no pin-spacer is injected and the sections below
   keep their exact layout.
   Scoped entirely to .hero* — these classes appear only on the homepage
   hero (project pages use .phero).
   ===================================================================== */
.hero{
  --hero-scroll:440vh;          /* total scroll distance of the sequence */
  position:relative;height:var(--hero-scroll);
  background:var(--bg);color:var(--ink);
}
.hero__stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--bg);
  display:grid;place-items:center;
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;
}
/* Two stills, no JS required to choose between them:
   --plan  holds the first paint (identical to canvas frame 1, so no flash)
   --final is the finished space, shown only under reduced motion          */
/* contain, not cover: the whole floor plan must stay readable and uncropped
   at every viewport. The frames carry their own light ground, so the
   letterboxing against --bg is invisible. */
.hero__still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  z-index:1;transition:opacity .4s var(--ease);
}
.hero.is-live .hero__still--plan{opacity:0;pointer-events:none}
/* Warm light that develops as the space becomes real */
.hero__glow{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(184,149,106,.20),transparent 70%);
  mix-blend-mode:multiply;
}
/* Just enough lift for the headline — the plan must stay visible through it.
   It clears entirely by ~24% scroll, before the rooms gain material. */
.hero__scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 54% 42% at 50% 46%,rgba(245,242,237,.50),rgba(245,242,237,0) 78%);
}
.hero__vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 clamp(60px,10vw,160px) rgba(26,26,26,.07);
}
.hero__copy{
  position:relative;z-index:4;text-align:center;padding-inline:var(--pad-x);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  will-change:transform,opacity;
}
.hero__eyebrow{
  font-size:var(--text-micro);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:14px;
}
.hero__eyebrow::before,.hero__eyebrow::after{content:"";width:28px;height:1px;background:var(--accent);opacity:.7}
.hero__tagline{
  width:min(92vw,16ch);
  font-size:var(--tagline);font-weight:300;letter-spacing:var(--tracking-display);
  line-height:1;color:var(--ink);margin:0;
}
/* Phase readout — four named stages of the transformation */
.hero__phase{
  position:absolute;z-index:4;left:var(--pad-x);bottom:36px;
  display:flex;gap:22px;flex-wrap:wrap;
  font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);
  text-transform:uppercase;color:var(--ink);
}
.hero__phase span{
  opacity:.3;transition:opacity .45s var(--ease),color .45s var(--ease);
  display:inline-flex;align-items:center;gap:9px;
}
.hero__phase span::before{content:"";width:16px;height:1px;background:currentColor;opacity:.6}
.hero__phase[data-active="plan"] [data-phase="plan"],
.hero__phase[data-active="structure"] [data-phase="structure"],
.hero__phase[data-active="render"] [data-phase="render"],
.hero__phase[data-active="interior"] [data-phase="interior"]{opacity:1;color:var(--accent)}
/* Thin architectural progress rail */
.hero__rail{
  position:absolute;z-index:4;right:var(--pad-x);bottom:36px;
  width:clamp(90px,14vw,180px);height:1px;background:var(--line);
}
.hero__rail i{
  display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
}
.hero__hint{position:absolute;z-index:4;left:50%;bottom:36px;transform:translateX(-50%);color:var(--muted)}
.hero__hint-inner{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase}
.hero__hint-line{width:1px;height:44px;background:currentColor;opacity:.5;transform-origin:top;animation:hintLine 2.2s var(--ease) infinite}
@keyframes hintLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:1024px){
  .hero{--hero-scroll:380vh}
  .hero__phase{gap:16px}
}
@media (max-width:767px){
  .hero{--hero-scroll:320vh}
  .hero__phase{display:none}
  .hero__rail{left:var(--pad-x);right:var(--pad-x);width:auto;bottom:28px}
  .hero__hint{bottom:52px}
  .hero__scrim{background:radial-gradient(ellipse 72% 34% at 50% 44%,rgba(245,242,237,.9),rgba(245,242,237,0) 76%)}
}
/* Reduced motion — deliberately softened rather than switched off.
   The sequence is scroll-SCRUBBED: the frame on screen is a pure function
   of scroll position, so nothing moves unless the reader moves it. That is
   closer to scrolling a long page than to an animation, so it stays.
   What is removed is motion the reader does NOT drive: the looping scroll
   hint below, the on-load intro (gated in animations.js), parallax (gated
   in animations.js and reset in the global block near the end of this
   file), and every CSS transition/keyframe via that same global block. */
@media (prefers-reduced-motion:reduce){
  .hero__hint-line{animation:none}
}

/* HOME · 2. INTRO */
.intro__grid{align-items:start}
.intro__text{grid-column:1/6;position:sticky;top:var(--sticky-top);display:flex;flex-direction:column;gap:var(--s-5);padding-bottom:var(--section-y)}
.intro__text .btn{align-self:flex-start}
.intro__media{grid-column:7/13;min-height:100vh;aspect-ratio:3/4}

/* HOME · 3. PILLARS */
.pillars__head{display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:var(--block-y)}
.pillars__title{font-size:var(--h2-pillars);font-weight:300;letter-spacing:var(--tracking-display);line-height:1.05;max-width:none}
.pillars__title em{font-style:normal;color:var(--accent)}
.pillars__title em.sage{color:var(--accent-2)}
.pillars__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter-featured)}
.pillar{display:flex;flex-direction:column;gap:22px;padding-top:28px;position:relative}
.pillar__rule{position:absolute;top:0;left:0;width:100%;height:1px;background:var(--accent);transform-origin:left center}
.pillar--sage .pillar__rule{background:var(--accent-2)}
.pillar__index{font-size:var(--text-micro);letter-spacing:var(--tracking-micro);color:var(--muted-inverse)}
.pillar__title{font-size:var(--h3);font-weight:400}
.pillar__body{color:var(--ink-soft-inverse);max-width:36ch;font-size:17px}
.pillar__list{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--text-small);color:var(--muted-inverse)}
.pillar__list li{display:flex;gap:12px;align-items:baseline}
.pillar__list li::before{content:"";flex:0 0 12px;height:1px;background:var(--accent);transform:translateY(-4px)}
.pillar--sage .pillar__list li::before{background:var(--accent-2)}

/* HOME · 4. PROJECTS PREVIEW  (shares .project with the work grid) */
.projects__head{display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:var(--block-y)}
.projects__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter-featured) var(--gutter);align-items:start}
.projects__foot{margin-top:var(--block-y);display:flex;justify-content:flex-end}

.project{display:block;position:relative}
.project.slot-1{grid-column:1/8}
.project.slot-2{grid-column:9/13;margin-top:120px}
.project.slot-3{grid-column:1/6;margin-top:-40px}
.project.slot-4{grid-column:6/13;margin-top:80px}
.project.slot-5{grid-column:1/8}
.project.slot-6{grid-column:8/13;margin-top:120px}
.project__media{aspect-ratio:4/3;will-change:clip-path}
.ar-34 .project__media{aspect-ratio:3/4}
.ar-11 .project__media{aspect-ratio:1/1}
.ar-169 .project__media{aspect-ratio:16/9}
.project__media .media__inner{transition:transform var(--dur-slow) var(--ease);will-change:transform}
.project:hover .project__media .media__inner{transform:scale(1.04)}
.project__meta{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:18px;overflow:hidden}
.project__title{font-family:var(--font-display);font-weight:400;font-size:var(--card-title);letter-spacing:-.01em;display:block}
.project__sub{display:block;margin-top:6px;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.project__view{flex:0 0 auto;align-self:flex-start;font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--accent);transform:translateY(120%);opacity:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.project:hover .project__view,.project:focus-visible .project__view{transform:translateY(0);opacity:1}
.project__status{display:inline-block;margin-left:10px;padding:2px 8px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;font-size:10px;letter-spacing:.1em;vertical-align:2px}

/* HOME · 5. PROCESS */
.process__head{display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:var(--block-y)}
.steps{display:flex;flex-direction:column;gap:var(--steps-gap)}
.step{align-items:center}
.step__text{grid-column:1/6;display:flex;flex-direction:column;gap:22px}
.step__media{grid-column:7/13;aspect-ratio:4/3}
.step--flip .step__text{grid-column:8/13;order:2}
.step--flip .step__media{grid-column:1/7;order:1}
.step__num{font-family:var(--font-display);font-weight:300;font-size:var(--step-num);letter-spacing:-.03em;line-height:1;color:var(--accent);opacity:.9}
.step__title{font-size:var(--h3-step);font-weight:400}
.step__body{max-width:44ch;color:var(--ink-soft)}
.step__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--text-small);color:var(--muted)}
.step__list li{display:flex;gap:12px;align-items:baseline}
.step__list li::before{content:"";flex:0 0 12px;height:1px;background:var(--accent);transform:translateY(-4px)}

/* HOME · 6. STUDIO */
.studio__grid{align-items:center}
.studio__media{grid-column:1/7;aspect-ratio:4/5}
.studio__text{grid-column:8/13;display:flex;flex-direction:column;gap:var(--s-5)}
.studio__body{color:var(--ink-soft)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);border-top:1px solid var(--line);padding-top:28px;margin-top:var(--s-2)}
.stat{display:flex;flex-direction:column;gap:var(--s-2)}
.stat__value{font-family:var(--font-display);font-weight:300;font-size:var(--stat);letter-spacing:var(--tracking-display);line-height:1;font-variant-numeric:tabular-nums}
.stat__value small{font-size:.55em;color:var(--accent);margin-left:2px}
.stat__label{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}

/* HOME · 7. CONTACT */
.contact__grid{align-items:start}
.contact__intro{grid-column:1/6;display:flex;flex-direction:column;gap:28px;position:sticky;top:var(--sticky-top)}
.contact__sub{max-width:34ch;color:var(--ink-soft-inverse);font-size:var(--text-lead)}
.contact__info{display:flex;flex-direction:column;gap:22px;margin-top:var(--s-3);padding-top:28px;border-top:1px solid var(--line-inverse)}
.contact__info-row{display:flex;flex-direction:column;gap:6px}
.contact__info a{color:var(--ink-inverse)}
.contact__info a:hover{color:var(--accent)}
.contact__social{display:flex;gap:28px;font-size:var(--text-caption);letter-spacing:.1em;text-transform:uppercase}
.contact__form{grid-column:7/13;display:flex;flex-direction:column;gap:44px}
.field{display:flex;flex-direction:column;gap:12px}
.field label{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--muted-inverse)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-inverse);border-radius:0;
  color:var(--ink-inverse);font:inherit;font-size:20px;padding:10px 0 14px;
  transition:border-color var(--dur-fast) var(--ease);appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:120px;resize:vertical}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-inverse) 50%),linear-gradient(135deg,var(--muted-inverse) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px;
}
.field select option{color:var(--ink);background:var(--bg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,242,237,.3)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:44px var(--gutter)}
.form__submit{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.form__note{font-size:var(--text-caption);color:var(--muted-inverse);max-width:30ch}
.form__success{padding:28px 0;border-top:1px solid var(--accent);color:var(--ink-inverse);font-size:var(--text-lead);max-width:40ch}

/* =====================================================================
   WORK INDEX
   ===================================================================== */
.opener{padding:calc(var(--section-y) + 72px) 0 clamp(40px,6vh,64px)}
.opener__grid{align-items:end}
.opener__text{grid-column:1/10;display:flex;flex-direction:column;gap:28px}
.opener__title{font-size:var(--h1-work);font-weight:300;letter-spacing:var(--tracking-display);line-height:.98;max-width:12ch}
.opener__aside{grid-column:10/13;display:flex;flex-direction:column;gap:14px;padding-bottom:10px;border-left:1px solid var(--line);padding-left:var(--s-4)}
.opener__stat{display:flex;flex-direction:column;gap:var(--s-1)}
.opener__stat b{font-family:var(--font-display);font-weight:400;font-size:var(--stat-small);letter-spacing:var(--tracking-display);line-height:1;font-variant-numeric:tabular-nums}
.opener__stat span{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
/* Houston skyline under the Work opener.
   Scoped to .opener--skyline so /process/, /about/ and the project pages
   keep the plain opener. The band sits BELOW the copy: extra bottom padding
   makes room for it, and it dissolves upward into --bg so the headline
   never sits on photographic detail. */
.opener--skyline{position:relative;overflow:hidden;padding-bottom:clamp(150px,26vh,300px)}
.opener--skyline > .container{position:relative;z-index:1}
.opener__skyline{
  position:absolute;left:0;right:0;bottom:0;z-index:0;
  height:clamp(190px,34vh,400px);
  pointer-events:none;user-select:none;
}
.opener__skyline img{
  /* crop to the tower line, not the freeway in the foreground */
  width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  opacity:.34;
  filter:grayscale(.45) contrast(.9) sepia(.14);
  /* strongest across the skyline itself, dissolving up into the headline
     and down into the page ground */
  -webkit-mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.65) 16%,#000 42%,rgba(0,0,0,.45) 74%,transparent 100%);
          mask-image:linear-gradient(to top,transparent 0%,rgba(0,0,0,.65) 16%,#000 42%,rgba(0,0,0,.45) 74%,transparent 100%);
}
/* keeps the photo sitting in the warm ground rather than on top of it */
.opener__skyline::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 0%,rgba(245,242,237,.28) 26%,rgba(245,242,237,0) 62%);
}
@media (max-width:767px){
  .opener--skyline{padding-bottom:clamp(110px,20vh,190px)}
  .opener__skyline{height:clamp(150px,26vh,240px)}
  .opener__skyline img{opacity:.26}
}


.toolbar{position:sticky;top:0;z-index:var(--z-toolbar);background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toolbar__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px}
.filters{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.filters::-webkit-scrollbar{display:none}
.filter{display:inline-flex;align-items:center;gap:10px;min-height:var(--touch);padding:0 14px;font-size:var(--text-label);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);white-space:nowrap;position:relative;transition:color var(--dur-fast) var(--ease)}
.filter::after{content:"";position:absolute;left:14px;right:14px;bottom:12px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.filter:hover,.filter[aria-pressed="true"]{color:var(--ink)}
.filter[aria-pressed="true"]::after{transform:scaleX(1)}
.filter__count{font-size:10px;color:var(--accent);font-variant-numeric:tabular-nums;transform:translateY(-6px)}
.views{display:flex;gap:2px;flex:0 0 auto}
.view{min-width:var(--touch);min-height:var(--touch);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:color var(--dur-fast) var(--ease)}
.view:hover,.view[aria-pressed="true"]{color:var(--ink)}
.view svg{width:18px;height:18px;display:block}

.work{padding:var(--block-y) 0 var(--section-y)}
.work__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px var(--gutter);align-items:start}
.work__empty{grid-column:1/13;padding:80px 0;color:var(--muted);text-align:center}

.work__index{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,3fr) minmax(0,2fr) 64px 110px;gap:var(--gutter);align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);position:relative;transition:color var(--dur-fast) var(--ease)}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.row:hover::after,.row:focus-visible::after{transform:scaleX(1)}
.row--head{padding:14px 0;font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.row--head::after{display:none}
.row__num{font-size:var(--text-label);letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.row__name{font-family:var(--font-display);font-weight:400;font-size:var(--row-name);letter-spacing:var(--tracking-display);line-height:1.05;transition:transform var(--dur) var(--ease)}
.row:hover .row__name{transform:translateX(12px)}
.row__loc,.row__type{font-size:var(--text-small);color:var(--muted)}
.row__year,.row__area{font-size:var(--text-small);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.thumb{position:fixed;top:0;left:0;width:300px;z-index:var(--z-thumb);pointer-events:none;opacity:0;transform-origin:center;will-change:transform}
.thumb .media{aspect-ratio:4/3}
.thumb.ar-34 .media{aspect-ratio:3/4;width:240px}
.thumb.ar-11 .media{aspect-ratio:1/1;width:260px}
.thumb.ar-169 .media{aspect-ratio:16/9;width:340px}

.cta{padding:var(--section-y) 0}
.cta__grid{align-items:end}
.cta__text{grid-column:1/9;display:flex;flex-direction:column;gap:28px}
.cta__title{font-size:var(--h2-cta);font-weight:300;letter-spacing:var(--tracking-display);line-height:1.02;max-width:14ch}
.cta__aside{grid-column:9/13;color:var(--muted-inverse);font-size:15px;max-width:30ch}
.cta__aside a{color:var(--ink-inverse)}
.cta__aside a:hover{color:var(--accent)}

/* =====================================================================
   PROJECT DETAIL
   ===================================================================== */
.phero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;color:var(--ink-inverse);background:var(--bg-dark)}
.phero__media{position:absolute;inset:0;margin:0;background:var(--bg-dark)}
.phero__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(26,26,26,.25) 0%,rgba(26,26,26,0) 35%,rgba(26,26,26,0) 55%,rgba(26,26,26,.7) 100%)}
.phero__text{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,96px);z-index:4;display:flex;flex-direction:column;gap:var(--s-4)}
.phero__label{color:var(--ink-inverse);opacity:.8}
.phero__title{font-size:var(--h1-project);font-weight:300;letter-spacing:var(--tracking-display);line-height:.98;max-width:14ch}
.phero__sub{font-family:var(--font-display);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.6rem);letter-spacing:-.01em;max-width:34ch;color:var(--ink-inverse);opacity:.85}

.pmeta{border-bottom:1px solid var(--line)}
.meta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gutter);padding:var(--s-5) 0}
.meta > div{display:flex;flex-direction:column;gap:var(--s-2);padding-left:var(--s-3);border-left:1px solid var(--line)}
.meta dt{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.meta dd{font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}

.pnarrative__aside{grid-column:1/5;position:sticky;top:var(--sticky-top);align-self:start;display:flex;flex-direction:column;gap:var(--s-3)}
.pnarrative__pull{font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,2.4vw,2.2rem);letter-spacing:var(--tracking-display);line-height:1.15;max-width:18ch}
.pnarrative__body{grid-column:6/12;color:var(--ink-soft);font-size:var(--text-lead)}

.pgallery{padding-bottom:var(--section-y)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter-featured) var(--gutter);align-items:start}
.gallery__item{margin:0;display:flex;flex-direction:column;gap:14px}
.gallery__item .media{aspect-ratio:4/3;width:100%;will-change:clip-path}
.gallery__item.ar-169 .media{aspect-ratio:16/9}
.gallery__item.ar-34 .media{aspect-ratio:3/4}
.gallery__item.ar-11 .media{aspect-ratio:1/1}
.gallery__item figcaption{display:flex;gap:14px;align-items:baseline;font-size:var(--text-caption);color:var(--muted)}
.gallery__item figcaption::before{content:attr(data-index);font-variant-numeric:tabular-nums;font-size:var(--text-micro);letter-spacing:.1em;color:var(--accent)}
.gallery__item.g-1{grid-column:1/13}
.gallery__item.g-2{grid-column:1/8}
.gallery__item.g-3{grid-column:9/13;margin-top:120px}
.gallery__item.g-4{grid-column:1/6;margin-top:-40px}
.gallery__item.g-5{grid-column:6/13;margin-top:80px}
.gallery__item.g-6{grid-column:3/11}

.pscore__head{display:flex;flex-direction:column;gap:var(--s-4);margin-bottom:var(--block-y)}
.pscore__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter-featured)}
.score{display:flex;flex-direction:column;gap:var(--s-3);padding-top:28px;position:relative}
.score__rule{position:absolute;top:0;left:0;width:100%;height:1px;background:var(--accent);transform-origin:left center}
.score--sage .score__rule{background:var(--accent-2)}
.score__label{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted-inverse)}
.score__value{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.6rem);letter-spacing:var(--tracking-display);line-height:1.1;text-wrap:balance}
.score__body{font-size:var(--text-small);color:var(--ink-soft-inverse);max-width:34ch}

.pnext{display:block;position:relative;overflow:hidden;background:var(--bg-dark);color:var(--ink-inverse);min-height:70vh;display:grid;align-items:end}
.pnext__media{position:absolute;inset:0;margin:0}
.pnext__media .media__inner{transition:transform 1.4s var(--ease)}
.pnext:hover .pnext__media .media__inner{transform:scale(1.03)}
.pnext__scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(26,26,26,.2),rgba(26,26,26,.75))}
.pnext__text{position:relative;z-index:4;padding:var(--section-y) 0;display:flex;flex-direction:column;gap:var(--s-3)}
.pnext__label{color:var(--ink-inverse);opacity:.75;display:flex;align-items:center;gap:14px}
.pnext__label::after{content:"";width:40px;height:1px;background:var(--accent)}
.pnext__name{font-size:var(--next-name);font-weight:300;letter-spacing:var(--tracking-display);line-height:.98;max-width:12ch;transition:transform var(--dur-slow) var(--ease)}
.pnext:hover .pnext__name{transform:translateX(16px)}
.pnext__sub{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-inverse);opacity:.7}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{padding:clamp(64px,10vh,120px) 0 40px;border-top:1px solid var(--line)}
.footer__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-4);font-size:var(--text-small);color:var(--muted)}
.footer__logo{justify-self:start;color:var(--ink)}
.footer__copy{text-align:center}
.footer__top{justify-self:end;display:inline-flex;align-items:center;gap:12px;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;min-height:var(--touch)}
.footer__top:hover{color:var(--accent)}
.footer__top i{width:1px;height:20px;background:currentColor;display:block;position:relative}
.footer__top i::after{content:"";position:absolute;top:0;left:-3px;width:6px;height:6px;border-left:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}

/* =====================================================================
   RESPONSIVE — 1024 · 767 · reduced motion
   ===================================================================== */
@media (max-width:1024px){
  .intro__text{grid-column:1/12;position:static;padding-bottom:0}
  .intro__media{grid-column:1/13;min-height:0;aspect-ratio:4/3;margin-top:var(--s-6)}
  .pillars__grid{gap:var(--s-5)}
  .projects__grid,.work__grid{gap:40px var(--gutter)}
  .project.slot-1,.project.slot-3,.project.slot-5{grid-column:1/7;margin-top:0}
  .project.slot-2,.project.slot-4,.project.slot-6{grid-column:7/13;margin-top:72px}
  .step__text{grid-column:1/7}
  .step__media{grid-column:7/13}
  .step--flip .step__text{grid-column:7/13}
  .step--flip .step__media{grid-column:1/7}
  .studio__media{grid-column:1/7}
  .studio__text{grid-column:7/13}
  .contact__intro{grid-column:1/13;position:static}
  .contact__form{grid-column:1/13;margin-top:56px}
  .opener__text{grid-column:1/13}
  .opener__aside{grid-column:1/13;flex-direction:row;gap:40px;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
  .row{grid-template-columns:40px minmax(0,3fr) minmax(0,2fr) 64px}
  .row__type,.row__area{display:none}
  .thumb{display:none}
  .cta__text{grid-column:1/13}
  .cta__aside{grid-column:1/13;margin-top:var(--s-5)}
  .meta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pnarrative__aside{grid-column:1/13;position:static}
  .pnarrative__body{grid-column:1/13;margin-top:var(--s-5)}
  .gallery{gap:40px var(--gutter)}
  .gallery__item.g-2{grid-column:1/8}
  .gallery__item.g-3{grid-column:8/13;margin-top:72px}
  .gallery__item.g-4{grid-column:1/7;margin-top:0}
  .gallery__item.g-5{grid-column:7/13;margin-top:72px}
  .gallery__item.g-6{grid-column:2/12}
  .pscore__grid{gap:var(--s-5)}
}
@media (max-width:767px){
  body{font-size:var(--text-body-mobile)}
  .header{padding:var(--header-y-mobile) var(--pad-x)}
  .header__mark{font-size:var(--logo-mark-mobile)}
  .pillars__grid{grid-template-columns:1fr;gap:40px}
  .project.slot-1,.project.slot-2,.project.slot-3,.project.slot-4,.project.slot-5,.project.slot-6{grid-column:1/13;margin-top:0}
  .step__text,.step__media,.step--flip .step__text,.step--flip .step__media{grid-column:1/13}
  .step__text{order:2}
  .step__media{order:1}
  .studio__media,.studio__text{grid-column:1/13}
  .studio__text{margin-top:40px}
  .stats{grid-template-columns:1fr;gap:20px}
  .form__row{grid-template-columns:1fr}
  .contact__form{gap:36px}
  .opener{padding-top:calc(var(--section-y) + 56px)}
  .opener__aside{flex-wrap:wrap;gap:20px 32px}
  .toolbar__row{gap:12px}
  .filter{padding:0 10px}
  .row{grid-template-columns:32px minmax(0,1fr) 56px;gap:var(--s-3);padding:20px 0}
  .row__loc{grid-column:2;font-size:var(--text-caption)}
  .row__year{grid-row:1;grid-column:3}
  .row--head .row__loc{display:none}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--gutter)}
  .gallery__item.g-1,.gallery__item.g-2,.gallery__item.g-3,.gallery__item.g-4,.gallery__item.g-5,.gallery__item.g-6{grid-column:1/13;margin-top:0}
  .pscore__grid{grid-template-columns:1fr;gap:40px}
  .pnext{min-height:60vh}
  .footer__row{grid-template-columns:1fr;justify-items:start}
  .footer__copy{text-align:left}
  .footer__top{justify-self:start}
}
/* =====================================================================
   PROCESS PAGE — three phases, six numbered steps.
   Uses the shared tokens and .container/.grid/.label/.h2/.prose; only the
   step list below is page-specific.
   ===================================================================== */
.phase{border-top:1px solid var(--line);padding-top:clamp(28px,4vh,48px);margin-top:clamp(48px,8vh,96px)}
.phase:first-of-type{margin-top:0}
.dark .phase{border-color:var(--line-inverse)}
.phase__head{grid-column:1/4;position:sticky;top:var(--sticky-top);align-self:start;display:flex;flex-direction:column;gap:var(--s-3)}
.phase__index{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--accent)}
.phase__name{font-family:var(--font-display);font-weight:300;font-size:clamp(1.75rem,2.6vw,2.5rem);letter-spacing:var(--tracking-display);line-height:1}
.phase__lede{grid-column:5/13;max-width:52ch;color:var(--ink-soft);font-size:var(--text-lead)}
.phase__steps{grid-column:5/13;list-style:none;margin:clamp(28px,4vh,48px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(28px,4vh,52px)}

.pstep{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3) clamp(20px,3vw,40px);align-items:baseline}
.pstep__num{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.4vw,2.25rem);letter-spacing:-.02em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.pstep__title{grid-column:2;font-family:var(--font-display);font-weight:400;font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:-.01em;line-height:1.2}
.pstep__body{grid-column:2;max-width:56ch;color:var(--ink-soft);margin-top:var(--s-2)}
/* what the client is on the hook for at this step */
.pstep__part{grid-column:2;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line);display:flex;gap:12px;align-items:baseline;font-size:var(--text-small);color:var(--muted)}
.pstep__part b{flex:0 0 auto;font-weight:500;font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent)}

.pclose{display:flex;flex-direction:column;gap:var(--s-5);align-items:flex-start;max-width:60ch}

@media (max-width:1024px){
  .phase__head{grid-column:1/13;position:static}
  .phase__lede,.phase__steps{grid-column:1/13}
  .phase__lede{margin-top:var(--s-4)}
}
@media (max-width:767px){
  .pstep{grid-template-columns:1fr;gap:var(--s-2)}
  .pstep__title,.pstep__body,.pstep__part{grid-column:1}
  .pstep__part{flex-direction:column;gap:6px}
}

/* =====================================================================
   PROJECT PAGE — editorial / cinematic layout
   Scoped entirely to .pp-*; the older .phero project template is
   untouched, so nothing else on the site changes.
   ===================================================================== */

/* ---------- 1. HERO ---------- */
.pp-hero{position:relative;height:88vh;height:88svh;min-height:520px;overflow:hidden;background:var(--bg-dark)}
.pp-hero__media{position:absolute;inset:0;overflow:hidden}
.pp-hero__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.pp-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(26,26,26,.72) 0%,rgba(26,26,26,.25) 34%,rgba(26,26,26,.05) 60%,rgba(26,26,26,.3) 100%);
}
.pp-hero__inner{
  position:absolute;inset:auto 0 0 0;padding:0 var(--pad-x) clamp(36px,6vh,72px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;
  color:var(--ink-inverse);
}
.pp-hero__title{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.5rem,6.4vw,6rem);letter-spacing:var(--tracking-display);line-height:.96;
  margin:0;max-width:14ch;
}
.pp-hero__meta{display:flex;gap:clamp(28px,5vw,72px);padding-bottom:.5em}
.pp-hero__meta div{display:flex;flex-direction:column;gap:6px}
.pp-hero__meta dt{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(245,242,237,.6)}
.pp-hero__meta dd{margin:0;font-size:var(--text-small);letter-spacing:.04em}

/* ---------- 2. INTRO ---------- */
.pp-intro{padding-block:clamp(72px,14vh,160px)}
.pp-intro__num{grid-column:1/2;font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2vw,2rem);color:var(--accent);line-height:1}
.pp-intro__body{grid-column:3/10;display:flex;flex-direction:column;gap:var(--s-5)}
.pp-intro__title{font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,4vw,3.4rem);letter-spacing:var(--tracking-display);line-height:1.02;margin:0;max-width:16ch}
.pp-intro__place{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.pp-intro__text{max-width:60ch;color:var(--ink-soft)}
.pp-intro__text p + p{margin-top:1.2em}

/* ---------- 3. IMMERSIVE STAGE (carousel) ---------- */
.pp-stage{position:relative;padding-block:clamp(24px,5vh,64px) clamp(48px,9vh,110px);overflow:hidden}
.pp-stage__viewport{
  position:relative;height:clamp(340px,68vh,760px);
  display:grid;place-items:center;
  touch-action:pan-y;cursor:grab;
}
.pp-stage__viewport.is-dragging{cursor:grabbing}
.pp-stage__slide{
  position:absolute;top:0;left:50%;height:100%;
  width:min(78vw,1180px);margin-left:calc(min(78vw,1180px) / -2);
  will-change:transform,opacity;
}
.pp-stage__frame{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg-media)}
.pp-stage__frame img{width:100%;height:100%;object-fit:cover;will-change:transform}
.pp-stage__cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,2vw,24px) clamp(16px,2.4vw,30px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-4);
  color:var(--ink-inverse);
  background:linear-gradient(to top,rgba(26,26,26,.62),rgba(26,26,26,0));
  font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.pp-stage__slide.is-active .pp-stage__cap{opacity:1}
.pp-stage__cap b{font-weight:500;color:var(--accent)}

.pp-stage__bar{
  margin-top:clamp(20px,3.5vh,40px);
  display:flex;align-items:center;gap:var(--s-5);
  padding-inline:var(--pad-x);
}
.pp-stage__count{font-family:var(--font-display);font-weight:300;font-size:var(--text-small);letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--muted)}
.pp-stage__count b{font-weight:400;color:var(--ink)}
.pp-stage__rail{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.pp-stage__rail i{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(0)}
.pp-stage__nav{display:flex;gap:var(--s-3)}
.pp-stage__btn{
  width:var(--touch);height:var(--touch);display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.pp-stage__btn:hover{color:var(--accent)}
.pp-stage__btn[disabled]{opacity:.25;pointer-events:none}
.pp-stage__btn svg{width:26px;height:9px}
.pp-stage__btn--prev:hover{transform:translateX(-4px)}
.pp-stage__btn--next:hover{transform:translateX(4px)}

/* ---------- 4. CINEMATIC FULL-BLEED ---------- */
.pp-cine{position:relative;overflow:hidden}
.pp-cine__media{position:relative;height:clamp(420px,92vh,940px);overflow:hidden}
.pp-cine__media img{position:absolute;inset:0;width:100%;height:112%;top:-6%;object-fit:cover;will-change:transform}
.pp-cine__num{
  position:absolute;right:var(--pad-x);bottom:clamp(28px,5vh,56px);
  font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,7vw,6rem);line-height:1;
  color:rgba(245,242,237,.9);mix-blend-mode:difference;
}

/* ---------- 5. ASYMMETRIC DETAIL ---------- */
.pp-detail{padding-block:clamp(72px,14vh,170px)}
.pp-detail__media{grid-column:6/13;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-media)}
.pp-detail__media img{width:100%;height:100%;object-fit:cover}
.pp-detail__text{grid-column:1/5;align-self:center;display:flex;flex-direction:column;gap:var(--s-5)}
.pp-detail__lede{font-size:var(--text-lead);color:var(--ink-soft);max-width:38ch}
.pp-words{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.pp-words li{
  font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,2.4vw,2.1rem);
  letter-spacing:var(--tracking-display);line-height:1.1;color:var(--ink);
  display:flex;align-items:baseline;gap:16px;
}
.pp-words li::before{content:"";flex:0 0 18px;height:1px;background:var(--accent);transform:translateY(-.4em)}
.pp-detail--flip .pp-detail__media{grid-column:1/8}
.pp-detail--flip .pp-detail__text{grid-column:9/13}
.pp-detail--flip .pp-detail__media{aspect-ratio:4/3}

/* ---------- 6. FACTS ---------- */
.pp-facts{padding-block:clamp(56px,10vh,120px);border-top:1px solid var(--line)}
.pp-facts__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.pp-fact dt{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-3)}
.pp-fact dd{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.2rem,2vw,1.75rem);letter-spacing:var(--tracking-display);line-height:1.15}

/* ---------- 7. FINAL ---------- */
.pp-final{position:relative;height:clamp(460px,96vh,980px);overflow:hidden;background:var(--bg-dark)}
.pp-final img{position:absolute;inset:0;width:100%;height:110%;top:-5%;object-fit:cover;will-change:transform}
.pp-final__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.66),rgba(26,26,26,.06) 55%)}
.pp-final__type{
  position:absolute;left:var(--pad-x);bottom:clamp(36px,7vh,80px);color:var(--ink-inverse);
  display:flex;flex-direction:column;gap:var(--s-3);
}
.pp-final__type h2{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,5vw,4.4rem);letter-spacing:var(--tracking-display);line-height:.98;margin:0}
.pp-final__type span{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(245,242,237,.66)}

/* ---------- 8. NEXT PROJECT ---------- */
.pp-next{position:relative;display:block;padding-block:clamp(64px,12vh,150px);overflow:hidden}
.pp-next__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);position:relative;z-index:1}
.pp-next__label{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.pp-next__name{
  font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,5vw,4rem);
  letter-spacing:var(--tracking-display);line-height:1;margin:var(--s-3) 0 0;
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);
}
.pp-next:hover .pp-next__name{transform:translateX(18px);color:var(--accent)}
.pp-next__arrow{width:44px;height:1px;background:currentColor;position:relative;transition:width var(--dur) var(--ease)}
.pp-next__arrow::after{content:"";position:absolute;right:0;top:-5px;width:10px;height:10px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.pp-next:hover .pp-next__arrow{width:74px}
.pp-next__peek{
  position:absolute;top:50%;right:14%;width:min(30vw,340px);aspect-ratio:4/3;
  transform:translate(0,-50%) scale(.94);opacity:0;pointer-events:none;overflow:hidden;z-index:0;
}
.pp-next__peek img{width:100%;height:100%;object-fit:cover}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .pp-intro__num{grid-column:1/13}
  .pp-intro__body{grid-column:1/13}
  .pp-detail__media,.pp-detail__text,
  .pp-detail--flip .pp-detail__media,.pp-detail--flip .pp-detail__text{grid-column:1/13}
  .pp-detail__text{margin-top:var(--s-6)}
  .pp-stage__slide{width:min(86vw,900px);margin-left:calc(min(86vw,900px) / -2)}
  .pp-facts__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .pp-hero{height:76vh;height:76svh}
  .pp-hero__inner{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .pp-hero__meta{gap:var(--s-6);padding-bottom:0}
  .pp-stage__viewport{height:clamp(300px,56vh,460px)}
  .pp-stage__slide{width:88vw;margin-left:-44vw}
  .pp-stage__bar{gap:var(--s-4)}
  .pp-facts__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .pp-next__peek{display:none}
  .pp-cine__media{height:clamp(340px,60vh,520px)}
  .pp-final{height:clamp(380px,70vh,560px)}
}
@media (prefers-reduced-motion:reduce){
  .pp-hero__media img,.pp-cine__media img,.pp-final img{transform:none!important}
  .pp-next:hover .pp-next__name{transform:none}
  .pp-stage__slide{transition:none}
}

/* =====================================================================
   BEFORE / AFTER — reusable transformation component
   One markup shape, four presentations chosen per pair via data-mode:
     drag    draggable divider (pointer, touch, keyboard)
     wipe-x  scroll-driven horizontal reveal
     wipe-y  scroll-driven vertical reveal
     split   two panes side by side (used when a pair's framing or
             orientation differs, where a divider would mislead)
   Scoped to .ba*; reusable by any future project page.
   ===================================================================== */
.ba{position:relative;width:100%;overflow:hidden;background:var(--bg-media);isolation:isolate}
.ba__layer{position:absolute;inset:0}
.ba__layer img{width:100%;height:100%;object-fit:cover;display:block}
.ba__after{z-index:2}                      /* revealed over the before */
.ba__before{z-index:1}
.ba[data-mode="drag"] .ba__after,
.ba[data-mode="wipe-x"] .ba__after{clip-path:inset(0 0 0 var(--ba-pos,50%))}
.ba[data-mode="wipe-y"] .ba__after{clip-path:inset(var(--ba-pos,50%) 0 0 0)}

/* the handle */
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--ba-pos,50%);z-index:4;
  width:2px;margin-left:-1px;background:rgba(245,242,237,.9);
  box-shadow:0 0 0 1px rgba(26,26,26,.12), 0 0 30px rgba(26,26,26,.25);
  cursor:ew-resize;touch-action:none;
}
.ba[data-mode="wipe-y"] .ba__handle,
.ba[data-mode="wipe-x"] .ba__handle,
.ba[data-mode="split"] .ba__handle{display:none}
.ba__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--bg);color:var(--ink);
  display:grid;place-items:center;
  box-shadow:0 6px 30px rgba(26,26,26,.28);
  transition:transform var(--dur-fast) var(--ease);
}
.ba__handle:hover .ba__grip,.ba__handle:focus-visible .ba__grip{transform:translate(-50%,-50%) scale(1.08)}
.ba__grip svg{width:22px;height:10px;display:block}

/* labels */
.ba__tag{
  position:absolute;z-index:5;bottom:clamp(14px,2vw,26px);
  font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--ink-inverse);
  text-shadow:0 1px 14px rgba(26,26,26,.75);
  pointer-events:none;
}
.ba__tag--before{left:clamp(14px,2vw,26px)}
.ba__tag--after{right:clamp(14px,2vw,26px)}
.ba__tag b{font-weight:500;color:var(--accent)}

/* split mode — two panes, no overlay */
.ba[data-mode="split"]{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.ba[data-mode="split"] .ba__layer{position:relative;inset:auto}
.ba[data-mode="split"] .ba__layer img{aspect-ratio:4/5;object-fit:cover}
.ba[data-mode="split"] .ba__tag{bottom:clamp(12px,1.6vw,20px)}
.ba[data-mode="split"] .ba__tag--after{right:auto;left:clamp(12px,1.6vw,20px)}

/* ---- the pair section that wraps a .ba ---- */
.pair{padding-block:clamp(56px,11vh,140px)}
.pair__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);margin-bottom:clamp(20px,3.5vh,40px);flex-wrap:wrap}
.pair__num{font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.pair__name{font-family:var(--font-display);font-weight:300;font-size:clamp(1.3rem,2.6vw,2.2rem);letter-spacing:var(--tracking-display);line-height:1.05;margin:0}
.pair__hint{font-size:var(--text-micro);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.pair__frame{position:relative;aspect-ratio:16/10}
.pair--tall .pair__frame{aspect-ratio:3/4;max-width:820px;margin-inline:auto}
.pair--wide .pair__frame{aspect-ratio:2/1}
.pair--split .pair__frame{aspect-ratio:auto}
.pair--split .ba{height:auto}
.pair__frame .ba{position:absolute;inset:0;height:100%}
.pair--split .pair__frame .ba{position:relative;inset:auto}

@media (max-width:767px){
  .pair__frame{aspect-ratio:4/5}
  .pair--wide .pair__frame{aspect-ratio:4/3}
  .pair--tall .pair__frame{aspect-ratio:3/4}
  .ba__grip{width:46px;height:46px}
  .ba[data-mode="split"]{grid-template-columns:1fr;gap:2px}
  .ba[data-mode="split"] .ba__layer img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .ba__handle:hover .ba__grip{transform:translate(-50%,-50%)}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  [data-parallax] .media__inner{height:100%;top:0}
  .thumb,.transition{display:none}
}