/* ============================================================
   GRAYLAB — Laboratorio de sistemas interactivos
   Light silver theme: neutral grotesk display, ghost-white
   headline words, darker hero panel with a glass slash
   (the logo mark), and the brand blue #0019ff as accent.
   ============================================================ */

/* Helvetica Now — self-hosted brand font (matches the wordmark) */
@font-face{
  font-family:'Helvetica Now Display';
  src:url('fonts/HelveticaNowDisplay.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Helvetica Now Display';
  src:url('fonts/HelveticaNowDisplayMedium.otf') format('opentype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Helvetica Now Display';
  src:url('fonts/HelveticaNowDisplayBold.otf') format('opentype');
  font-weight:600 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Helvetica Now Display Cn';
  src:url('fonts/HelveticaNowDisplay-CnBlk.otf') format('opentype');
  font-weight:900;font-style:normal;font-display:swap;
}

:root{
  --bg:        #d5d7d9;
  --panel:     #c8cbcd;
  --card:      #dfe1e3;
  --ink:       #141414;
  --text:      #141414;
  --muted:     #5e6164;
  --muted-2:   #8b8e91;
  --line:      rgba(20,20,20,.14);
  --line-2:    rgba(20,20,20,.28);
  --white:     #f2f3f4;

  --accent:      #0019ff;
  --accent-soft: #3a4dff;

  --sans:   'Helvetica Now Display', 'Space Grotesk', system-ui, sans-serif;
  --display:'Helvetica Now Display', 'Inter Tight', sans-serif;
  --poster: 'Helvetica Now Display Cn', 'Anton', sans-serif;
  --serif:  'Instrument Serif', Georgia, serif;

  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:.01em;}

/* ---------- shared bits ---------- */
.kicker{
  font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);display:inline-block;margin-bottom:24px;
}
.section-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(30px,4.6vw,56px);
  line-height:1.04;letter-spacing:-.025em;
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:13px 22px;border-radius:100px;
  cursor:pointer;transition:all .35s var(--ease);white-space:nowrap;
}
.btn-lg{padding:16px 28px;font-size:14px;}
.btn-solid{background:var(--ink);color:var(--white);border:1px solid var(--ink);}
.btn-solid:hover{background:transparent;color:var(--ink);transform:translateY(-2px);}
.btn-solid span{transition:transform .35s var(--ease);}
.btn-solid:hover span{transform:translateX(4px);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(20,20,20,.4);}
.btn-ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink);transform:translateY(-2px);}
.btn-ghost span{transition:transform .35s var(--ease);}
.btn-ghost:hover span{transform:translateX(4px);}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease),opacity .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(213,215,217,.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  padding-top:14px;padding-bottom:14px;
}
.brand{display:inline-flex;align-items:center;}
.brand-logo{
  height:32px;width:auto;color:var(--ink);
  transition:opacity .35s var(--ease);
}
.brand:hover .brand-logo{opacity:.65;}
.brand-logo-lg{height:26px;}

.nav-right{display:flex;align-items:center;gap:18px;}

.burger{
  display:flex;flex-direction:column;gap:6px;
  background:none;border:none;padding:8px 4px;cursor:pointer;
}
.burger span{width:26px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s;}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg);}

/* ── Menú de hamburguesa OCULTO por ahora ───────────────────────────────
   El botón (#burger) y su menú desplegable (#mobileMenu) siguen intactos
   en index.html y script.js — solo están escondidos visualmente.
   Para volver a mostrarlo, borra ESTA única regla. */
.burger{display:none;}

.mobile-menu{
  position:absolute;top:100%;left:0;right:0;z-index:49;
  background:rgba(213,215,217,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:6px;padding:22px var(--pad) 34px;
  border-bottom:1px solid var(--line);
}
.mobile-menu[hidden]{display:none;}
.mobile-menu a{
  font-family:var(--display);font-weight:500;font-size:clamp(20px,3vw,28px);
  letter-spacing:-.01em;padding:14px 0;border-bottom:1px solid var(--line);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.mobile-menu a:hover{color:var(--accent);padding-left:10px;}
.mobile-menu .btn{margin-top:18px;justify-content:center;border-bottom:none;font-size:13px;letter-spacing:.08em;padding:14px 22px;}
.mobile-menu .btn:hover{padding-left:22px;color:var(--white);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;
  padding:calc(78px + 2vh) var(--pad) 40px;
  overflow:hidden;
}

/* centered poster lines with the object floating between them */
.hero-lines{
  position:relative;flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(48px,13vh,168px);
  text-align:center;
}
.hero-line{
  position:relative;z-index:1;
  font-family:var(--poster);font-weight:900;
  font-size:clamp(38px,10.2vw,158px);
  line-height:.9;letter-spacing:0;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}

.hero-object{
  position:absolute;left:50%;top:50%;z-index:3;
  width:clamp(250px,31vw,430px);
  transform:translate(-50%, calc(-50% + var(--sy,0px)));
  will-change:transform;pointer-events:none;
}
.glass-loop{
  display:block;width:100%;height:auto;
  transform:translate(var(--mx,0px), var(--my,0px)) rotate(var(--rot,-8deg));
  filter:drop-shadow(20px 34px 40px rgba(28,32,42,.28));
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}

/* hero bottom row — stats left, paragraph right */
.hero-foot{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;padding-top:22px;
}
.hero-stats{display:flex;flex-direction:column;gap:5px;}
.hero-stats > div{display:grid;grid-template-columns:56px auto;align-items:baseline;gap:10px;}
.hero-stats dt{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.01em;}
.hero-stats dd{font-size:14px;color:var(--muted);}
.hero-intro{
  max-width:38ch;text-align:right;
  font-size:clamp(15px,1.3vw,17.5px);line-height:1.55;color:var(--ink);
}

/* =========================================================
   IMMERSIVE STAGE — fixed viewport, scroll drives slide
   transitions (content blurs out, next slide blurs in)
   ========================================================= */
/* single screen: the stage is fixed, so index has nothing to scroll.
   Must NOT set overflow:hidden globally — about.html shares this sheet. */
.stage{position:fixed;inset:0;overflow:hidden;}
.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:96px var(--pad);
  text-align:center;
}

.slide-dark{background:var(--ink);color:#ecedee;}
.slide-dark .kicker{color:#9a9c9e;}
.slide-dark .sl-lead{color:#a9abad;}

/* nav legibility on dark slides */
.nav.on-dark .brand-logo{color:#ecedee;}
.nav.on-dark .burger span{background:#ecedee;}
.nav.on-dark.scrolled{background:rgba(20,20,20,.72);border-bottom-color:rgba(236,237,238,.14);}

/* slide content */
.sl-inner{
  max-width:960px;
  display:flex;flex-direction:column;align-items:center;
  gap:20px;
}
.sl-inner .kicker{margin-bottom:2px;}
.sl-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(32px,4.6vw,60px);
  line-height:1.05;letter-spacing:-.025em;
}
.sl-lead{color:var(--muted);font-size:clamp(15px,1.4vw,18px);max-width:54ch;line-height:1.65;}
.sl-pull{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,3.6vw,46px);
  line-height:1.25;letter-spacing:-.02em;max-width:22ch;
}
.sl-points{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px 34px;margin-top:16px;
}
.sl-points li{max-width:200px;display:flex;flex-direction:column;gap:5px;}
.sl-points b{font-family:var(--display);font-weight:600;font-size:15px;}
.sl-points span{font-size:13.5px;color:var(--muted);line-height:1.5;}
.sl-divs{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:10px;}
.sl-divs b{font-family:var(--display);font-weight:500;font-size:clamp(24px,3vw,38px);letter-spacing:-.02em;}
.sl-divs b span{color:var(--muted-2);}
.sl-divs > li > span{display:block;font-size:14px;color:var(--muted);margin-top:3px;}
.sl-chips{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;max-width:560px;margin-top:14px;
}
.sl-chips li{
  font-size:13px;border:1px solid rgba(20,20,20,.28);
  padding:8px 15px;border-radius:100px;white-space:nowrap;
}
.sl-mark{width:min(200px,50vw);height:auto;color:var(--ink);margin-bottom:8px;}

/* =========================================================
   LANDING slide content
   ========================================================= */
.landing-core{
  position:relative;z-index:2;
  margin:auto;
  display:flex;flex-direction:column;align-items:center;
  gap:24px;
}
.landing-object{
  position:relative;z-index:3;
  width:clamp(53px,6vw,74px);
  pointer-events:none;
  transform-origin:center;
  transition:transform .5s var(--ease);
}
/* Once the tagline has typed out the mark steps back. Scaled, not re-widthed:
   browsers won't interpolate between two different clamp() values. */
.landing-object.small{transform:scale(.68);}
.landing-img{
  display:block;width:100%;height:auto;
  will-change:transform;
  filter:drop-shadow(10px 16px 22px rgba(28,32,42,.25));
}

/* GL block mark — assembles on load, then breathes in a slow cascade */
/* CSS transforms are unreliable on SVG <g>, so each half is its own SVG
   inside an HTML span — those transform predictably */
.gl-mark{
  position:relative;display:block;width:100%;
  aspect-ratio:60.19 / 57.67;
  color:var(--ink);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.gl-half{
  position:absolute;top:0;height:100%;width:38.28%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.gl-half svg{display:block;width:100%;height:100%;}
.gl-left {left:0;}
.gl-right{left:61.72%;}

/* the mark sits still — no idle animation on the individual cells */

/* wink: rotated 90° the left zigzag reads as the eyes, so dropping this
   cell one column (local +x = screen down) closes that eye */
.gl-eye{transition:transform .12s step-end;}
.landing-object.wink .gl-eye{transform:translateX(11.52px);}

/* =========================================================
   LOADER — mark splits, counts to 100, spins into the smiley
   ========================================================= */
.landing-object.split .gl-left{transform:translateX(-26px);}
.landing-object.split .gl-right{transform:translateX(26px);}
.landing-object.smile .gl-mark{transform:rotate(90deg);}

.gl-count{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(15px,1.6vw,19px);color:var(--ink);
  opacity:0;transition:opacity .3s var(--ease);
  pointer-events:none;
}
.landing-object.split .gl-count{opacity:1;}

/* while loading, only the mark is on screen */
html.is-loading{overflow:hidden;}
.landing-tag{transition:opacity .6s var(--ease);}
html.is-loading .nav,
html.is-loading .landing-tag{opacity:0;pointer-events:none;}
/* The tagline is invisible during the loader but still reserves its height,
   which pushes the mark above centre. Offset by half that reserved space so
   the loader itself sits dead centre; it glides into .small when it lifts. */
html.is-loading .landing-object{transform:translateY(36px);}
.landing-tag{
  max-width:34ch;
  font-size:clamp(15px,1.25vw,17px);line-height:1.55;
  color:var(--ink);
}
.landing-btn{margin-top:2px;}

/* typewriter caret */
.landing-tag{min-height:2.9em;}
.landing-tag.typing::after{
  content:"";display:inline-block;
  width:.55em;height:1.05em;margin-left:2px;
  background:var(--ink);vertical-align:-2px;
  animation:caret .9s step-end infinite;
}
@keyframes caret{0%,50%{opacity:1;}51%,100%{opacity:0;}}

/* =========================================================
   PROJECT RING — cards lie on a horizontal ring that is
   tilted toward the camera; navigating rotates it on Y
   ========================================================= */
.ring-stage{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  perspective:1300px;
  opacity:0;
  pointer-events:none;
}
.ring-stage.on{opacity:1;pointer-events:auto;}

/* Entrance lives on an inner wrapper, so the card's own transform stays free
   for its ring position and rotation. Staggered off --i, each card rises and
   scales into place. Default opacity is 1 so reduced-motion (which kills
   animations globally) still shows them. */
.rc-inner{
  display:block;position:relative;
  border:none;padding:0;background:none;
  width:100%;font:inherit;color:inherit;text-align:left;
  cursor:pointer;
}
.ring-stage.on .rc-inner{
  animation:cardIn .8s cubic-bezier(.22,.9,.32,1) both;
  animation-delay:calc(var(--i) * 110ms);
}
@keyframes cardIn{
  from{opacity:0;transform:scale(.62) translateY(30px);}
  to  {opacity:1;transform:none;}
}
.ring{
  /* Must stay circular: on an ellipse the positions rotate rigidly with the
     ring instead of orbiting, so cards swing along odd arcs and none lands
     square at the front. */
  --R:clamp(210px,25vw,330px);
  position:relative;width:0;height:0;
  transform-style:preserve-3d;
  --tilt:50deg;
  transform:rotateX(var(--tilt)) rotateY(var(--a,0deg));
  transition:transform .9s cubic-bezier(.45,.05,.25,1);
  cursor:grab;
}
.ring.dragging{transition:none;cursor:grabbing;}

/* cards are POSITIONED round the ring by pure translation — they never turn
   tangent, so none is ever seen edge-on. The counter-rotateY cancels the
   ring's spin so every card keeps facing the camera while it orbits. */
.ring-card{
  position:absolute;
  width:clamp(150px,17vw,230px);
  margin-left:calc(clamp(150px,17vw,230px) / -2);
  transform:var(--pos) rotateY(calc(-1 * var(--a,0deg)));
  transition:transform .9s cubic-bezier(.45,.05,.25,1);
  transform-style:preserve-3d;
}
.ring.dragging .ring-card{transition:none;}
/* 5 cards, 72° apart: x = R·sin(i·72°), z = R·cos(i·72°) */
.ring-card:nth-child(1){--pos:translate3d(0,0,var(--R));}
.ring-card:nth-child(2){--pos:translate3d(calc(var(--R) * .951),0,calc(var(--R) * .309));}
.ring-card:nth-child(3){--pos:translate3d(calc(var(--R) * .588),0,calc(var(--R) * -.809));}
.ring-card:nth-child(4){--pos:translate3d(calc(var(--R) * -.588),0,calc(var(--R) * -.809));}
.ring-card:nth-child(5){--pos:translate3d(calc(var(--R) * -.951),0,calc(var(--R) * .309));}

/* the active (top) card cancels the ring's X tilt, so it stands upright and
   faces the camera; the others stay lying in the diagonal plane */
.ring-card.is-front{
  transform:var(--pos) rotateY(calc(-1 * var(--a,0deg)))
            rotateX(calc(-1 * var(--tilt)));
}
.ring-card img{
  display:block;width:100%;height:auto;
  border-radius:2px;
  box-shadow:0 26px 44px -18px rgba(20,20,20,.45);
}
/* The title is an HTML layer over the image, not baked into the asset, so it
   stays put when the placeholder art is swapped for real project images.
   White + shadow so it reads over any artwork. */
.rc-meta{
  position:absolute;left:0;bottom:0;
  padding:0 14px 12px;
  text-align:left;pointer-events:none;
}
.rc-meta b{
  font-family:var(--display);font-weight:600;
  font-size:11.5px;letter-spacing:.02em;
  color:var(--white);
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}
/* only the upright card invites a click; the ones lying in the plane
   are navigation, not targets */
.ring-card img{transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.ring-card.is-front .rc-inner:hover img,
.ring-card.is-front .rc-inner:focus-visible img{
  transform:scale(1.045);
  box-shadow:0 34px 54px -18px rgba(20,20,20,.55);
}
.rc-inner:focus-visible{outline:2px solid var(--accent);outline-offset:6px;}

.ring-hint{
  position:absolute;left:0;right:0;bottom:clamp(22px,4vh,40px);z-index:2;
  text-align:center;pointer-events:none;
  font-family:var(--display);font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
  opacity:0;transition:opacity .8s var(--ease) .3s;
}
.ring-stage.on ~ .ring-hint{opacity:1;}

/* =========================================================
   PROJECT DETAIL — the card grows into a full-bleed hero and
   the page underneath recedes
   ========================================================= */
/* home recedes while a project is open.
   Selectors are deliberately three-deep: they have to outrank .reveal.in
   and .ring-stage.on, which both set opacity later in this sheet. */
html.detail-open .nav,
html.detail-open .stage .landing-core,
html.detail-open .stage .ring-stage,
html.detail-open .stage .ring-hint{
  opacity:0;pointer-events:none;
  transform:scale(.96);
  transition:opacity .5s var(--ease),transform .8s var(--ease);
}
html.detail-open{overflow:hidden;}

.project-detail{
  position:fixed;inset:0;z-index:60;
  background:var(--bg);
  opacity:0;transition:opacity .35s var(--ease);
}
.project-detail[hidden]{display:none;}
.project-detail.on{opacity:1;}
.pd-scroll{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transition:opacity .3s var(--ease);
}
/* moving to the next project swaps the content in place */
.project-detail.swapping .pd-scroll{opacity:0;}

/* top bar — floats over the hero in white, then takes on the same blurred
   silver panel as the main nav once the hero has scrolled past, so it stays
   legible over whatever imagery is underneath */
.pd-bar{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  pointer-events:none;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
}
.pd-bar .brand,.pd-close{pointer-events:auto;}
.pd-bar .brand-logo{height:32px;color:var(--white);transition:color .4s var(--ease);}

.project-detail.past-hero .pd-bar{
  background:rgba(213,215,217,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  padding-top:14px;padding-bottom:14px;
  pointer-events:auto;
}
.project-detail.past-hero .pd-bar .brand-logo{color:var(--ink);}
.project-detail.past-hero .pd-close{
  background:transparent;border-color:var(--line-2);color:var(--ink);
}
.project-detail.past-hero .pd-close:hover{
  background:var(--ink);color:var(--white);border-color:var(--ink);
}
.pd-close{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(242,243,244,.1);
  border:1px solid rgba(242,243,244,.34);
  color:var(--white);cursor:pointer;
  font-family:var(--display);font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 16px;border-radius:100px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.pd-close svg{width:11px;height:11px;fill:none;}
.pd-close:hover{background:var(--white);color:var(--ink);border-color:var(--white);}

/* ---- hero ---- */
.pd-hero{
  position:relative;
  height:100vh;height:100svh;
  overflow:hidden;background:var(--ink);
}
.pd-hero img{width:100%;height:100%;object-fit:cover;}
.pd-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,20,20,.42) 0 18%,transparent 46%,rgba(20,20,20,.55));
}
.pd-hero-copy{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(38px,7vh,74px);z-index:2;
  color:var(--white);
}
.pd-hero-copy .kicker{color:rgba(242,243,244,.7);margin-bottom:10px;}
.pd-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(42px,9vw,132px);line-height:.94;letter-spacing:-.035em;
}

/* ---- body ---- */
.pd-body{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(64px,10vh,120px) var(--pad) clamp(80px,12vh,150px);
}
.pd-lede{
  font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.9vw,40px);line-height:1.24;letter-spacing:-.022em;
  max-width:26ch;
}
.pd-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(44px,7vh,80px);
  border-top:1px solid var(--line);
}
.pd-meta > div{padding:20px 22px 22px 0;border-right:1px solid var(--line);}
.pd-meta > div:last-child{border-right:none;}
.pd-meta dt{
  font-family:var(--display);font-weight:600;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:8px;
}
.pd-meta dd{font-size:15px;line-height:1.5;}

.pd-section{
  display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(28px,5vw,80px);
  padding-top:clamp(56px,9vh,110px);
  align-items:start;
}
.pd-sec-head{position:sticky;top:clamp(88px,12vh,140px);}
.pd-sec-n{
  display:flex;align-items:baseline;gap:14px;margin-bottom:16px;
  font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.pd-sec-n b{font-weight:600;color:var(--ink);}
.pd-sec-n span{color:var(--muted-2);}
.pd-sec-head p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:38ch;}
.pd-sec-media{display:grid;gap:clamp(14px,2vw,22px);}
.pd-sec-media.two{grid-template-columns:1fr 1fr;}

.pd-figure{margin:0;}
.pd-figure img,.pd-figure video{
  display:block;width:100%;height:auto;border-radius:3px;
  background:var(--panel);
  box-shadow:0 30px 50px -26px rgba(20,20,20,.5);
}
.pd-figure figcaption{
  margin-top:10px;font-size:12.5px;color:var(--muted-2);letter-spacing:.01em;
}

.pd-notes{
  margin-top:clamp(64px,11vh,140px);
  padding:clamp(46px,7vh,84px) var(--pad);
  margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
  background:var(--ink);color:#ecedee;border-radius:4px;
}
.pd-notes .kicker{color:#9a9c9e;margin-bottom:18px;}
.pd-notes h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,4vw,52px);line-height:1.14;letter-spacing:-.025em;
  max-width:16ch;
}
.pd-notes p{color:#a9abad;font-size:16px;line-height:1.7;max-width:52ch;margin-top:22px;}

.pd-gallery{
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin-top:clamp(30px,5vh,56px);
}

.pd-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  margin-top:clamp(56px,9vh,110px);padding-top:26px;
  border-top:1px solid var(--line);
}
.pd-next{
  display:flex;flex-direction:column;gap:6px;text-align:right;margin-left:auto;
  cursor:pointer;background:none;border:none;padding:0;font:inherit;color:inherit;
}
.pd-next span{
  font-family:var(--display);font-weight:600;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
}
.pd-next b{
  font-family:var(--display);font-weight:500;
  font-size:clamp(24px,3.4vw,44px);line-height:1;letter-spacing:-.025em;
  transition:color .3s var(--ease);
}
.pd-next:hover b{color:var(--accent);}

/* body content rises once the hero has finished growing */
.pd-article > *:not(.pd-hero){
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.project-detail.ready .pd-article > *:not(.pd-hero){opacity:1;transform:none;}
.pd-hero-copy{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s;
}
.project-detail.ready .pd-hero-copy{opacity:1;transform:none;}

/* ---- the growing layer: one image travelling from card to hero ---- */
.pd-grow{
  position:fixed;z-index:70;overflow:hidden;
  pointer-events:none;background:var(--ink);
  box-shadow:0 26px 44px -18px rgba(20,20,20,.45);
  transition:left .78s cubic-bezier(.62,.02,.24,1),
             top .78s cubic-bezier(.62,.02,.24,1),
             width .78s cubic-bezier(.62,.02,.24,1),
             height .78s cubic-bezier(.62,.02,.24,1),
             border-radius .78s cubic-bezier(.62,.02,.24,1),
             opacity .3s var(--ease);
}
.pd-grow[hidden]{display:none;}
.pd-grow img{width:100%;height:100%;object-fit:cover;}
.pd-grow.fading{opacity:0;}

@media (max-width:900px){
  .pd-section{grid-template-columns:1fr;}
  .pd-sec-head{position:static;}
  .pd-meta{grid-template-columns:1fr 1fr;}
  .pd-meta li:nth-child(2n){border-right:none;}
}
@media (max-width:560px){
  .pd-sec-media.two{grid-template-columns:1fr;}
  .pd-meta{grid-template-columns:1fr;}
  .pd-meta li{border-right:none;border-bottom:1px solid var(--line);}
  .pd-lede{max-width:none;}
}

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
section.approach,.divisions,.philosophy,.roadmap,.quality{
  max-width:var(--maxw);margin:0 auto;padding:clamp(80px,11vh,140px) var(--pad);
}
.section-head{max-width:720px;margin-bottom:60px;}
.section-lead{color:var(--muted);font-size:clamp(15px,1.5vw,19px);max-width:52ch;margin-top:22px;line-height:1.7;}

/* 4-col approach */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.col{padding:34px 26px 30px;border-right:1px solid var(--line);}
.col:last-child{border-right:none;}
.col-head{display:flex;align-items:center;gap:9px;margin-bottom:60px;}
.col-head .ci{width:7px;height:7px;flex:none;background:var(--accent);border-radius:1px;}
.col-head span{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.16em;color:var(--muted);}
.col h3{font-family:var(--display);font-weight:500;font-size:24px;margin-bottom:14px;letter-spacing:-.01em;}
.col p{font-size:14.5px;color:var(--muted);line-height:1.7;}

/* =========================================================
   DIVISIONS
   ========================================================= */
.div-list{list-style:none;border-top:1px solid var(--line);}
.div-row{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  padding:38px 8px;border-bottom:1px solid var(--line);
  transition:padding .45s var(--ease),background .45s var(--ease);
}
.div-row:hover{padding-left:26px;padding-right:26px;background:rgba(20,20,20,.035);}
.div-main{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;}
.div-num{font-family:var(--display);font-weight:500;font-size:13px;color:var(--muted-2);}
.div-name{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.02em;line-height:1;}
.div-name span{color:var(--muted-2);transition:color .4s var(--ease);}
.div-row:hover .div-name span{color:var(--accent);}
.div-desc{width:100%;color:var(--muted);font-size:15px;margin-top:4px;padding-left:37px;}
.div-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:440px;}
.div-tags span{
  font-size:12.5px;color:var(--ink);border:1px solid rgba(20,20,20,.28);
  padding:7px 13px;border-radius:100px;white-space:nowrap;transition:all .3s var(--ease);
}
.div-row:hover .div-tags span{background:rgba(20,20,20,.05);}

/* =========================================================
   PHILOSOPHY
   ========================================================= */
.philosophy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start;}
.pull{
  font-family:var(--display);font-weight:500;
  font-size:clamp(24px,2.5vw,34px);line-height:1.32;letter-spacing:-.015em;margin-bottom:26px;
}
.phi-note{color:var(--muted);font-size:16px;max-width:42ch;line-height:1.75;}
.principles{list-style:none;}
.pr{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--line);}
.pr:last-child{border-bottom:1px solid var(--line);}
.pr-n{font-family:var(--display);font-weight:500;font-size:13px;color:var(--muted-2);padding-top:4px;}
.pr h4{font-family:var(--sans);font-weight:600;font-size:17px;margin-bottom:6px;letter-spacing:.01em;}
.pr p{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:44ch;}

/* =========================================================
   PRINCIPLE BAND — inverted
   ========================================================= */
.principle-band{
  background:var(--ink);color:#ecedee;text-align:center;
  padding:clamp(70px,11vh,130px) var(--pad);
}
.principle-band>div{max-width:920px;margin:0 auto;}
.principle-band .kicker{color:#9a9c9e;}
.big-q{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,4vw,52px);line-height:1.18;letter-spacing:-.02em;
  margin:24px 0 26px;
}
.pb-note{color:#a9abad;font-size:16px;max-width:56ch;margin:0 auto;line-height:1.7;}

/* =========================================================
   ROADMAP
   ========================================================= */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.phase{
  border:1px solid var(--line);border-radius:16px;padding:26px 22px 28px;
  background:var(--card);
  transition:transform .45s var(--ease),border-color .45s var(--ease);
}
.phase:hover{transform:translateY(-6px);border-color:var(--line-2);}
.ph-top{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.ph-id{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.ph-line{flex:1;height:1px;background:var(--line);}
.phase h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.22;margin-bottom:12px;min-height:2.4em;letter-spacing:-.01em;}
.ph-goal{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:18px;}
.ph-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.ph-list li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink);}
.ph-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--accent);border-radius:1px;}

/* =========================================================
   QUALITY
   ========================================================= */
.quality .section-head{margin-bottom:44px;}
.q-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.q-grid li{
  display:flex;align-items:center;gap:16px;padding:30px 28px;
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.01em;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .35s var(--ease);
}
.q-grid li:hover{background:rgba(20,20,20,.035);}
.q-grid li span{font-family:var(--sans);font-size:12px;color:var(--muted-2);letter-spacing:.06em;}
.q-grid li:nth-child(3n){border-right:none;}
.q-grid li:nth-last-child(-n+3){border-bottom:none;}

/* =========================================================
   CLOSING
   ========================================================= */
.closing{
  max-width:var(--maxw);margin:0 auto;text-align:center;
  padding:clamp(90px,14vh,180px) var(--pad) clamp(70px,10vh,120px);
}
.closing-mark{width:min(240px,56vw);height:auto;margin:0 auto 46px;color:var(--ink);}
.closing-final{
  font-family:var(--display);font-weight:500;
  font-size:clamp(28px,4.6vw,60px);line-height:1.18;letter-spacing:-.025em;margin-bottom:52px;
}
.closing-cta{display:flex;flex-direction:column;align-items:center;gap:22px;}
.mail{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:color .3s var(--ease),border-color .3s var(--ease);}
.mail:hover{color:var(--accent);border-color:var(--accent);}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{border-top:1px solid var(--line);padding:56px var(--pad) 40px;max-width:var(--maxw);margin:0 auto;}
.foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;padding-bottom:44px;border-bottom:1px solid var(--line);}
.foot-nav{display:flex;gap:28px;flex-wrap:wrap;}
.foot-nav a{font-size:14px;color:var(--muted);transition:color .3s var(--ease);}
.foot-nav a:hover{color:var(--ink);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;}
.foot-bottom span{font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .col:nth-child(2){border-right:none;}
  .col:nth-child(1),.col:nth-child(2){border-bottom:1px solid var(--line);}
  .phases{grid-template-columns:repeat(2,1fr);}
  .q-grid{grid-template-columns:repeat(2,1fr);}
  .q-grid li:nth-child(3n){border-right:1px solid var(--line);}
  .q-grid li:nth-child(2n){border-right:none;}
  .q-grid li:nth-last-child(-n+3){border-bottom:1px solid var(--line);}
  .q-grid li:nth-last-child(-n+2){border-bottom:none;}
}
@media (max-width:900px){
  .philosophy{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:760px){
  .nav-right .btn-ghost{display:none;}
  .hero{min-height:100vh;padding-top:96px;}
  .hero-lines{gap:clamp(70px,17vh,150px);}
  .hero-object{width:min(50vw,210px);}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:26px;}
  .hero-intro{text-align:left;max-width:none;}
  .grid-4{grid-template-columns:1fr;}
  .col{border-right:none !important;border-bottom:1px solid var(--line);}
  .phases{grid-template-columns:1fr;}
  .q-grid{grid-template-columns:1fr;}
  .q-grid li{border-right:none !important;border-bottom:1px solid var(--line) !important;}
  .q-grid li:last-child{border-bottom:none !important;}
  .div-row{grid-template-columns:1fr;gap:20px;}
  .div-tags{justify-content:flex-start;}
  .div-desc{padding-left:0;}
  .foot-top{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}