/* ============================================================
   APIA STUDIO LAB — Architectural gravitas, warm minimalism
   Design system
   ============================================================ */

:root{
  /* Warm minimalist palette — let the photography speak */
  --paper:        #F3EFE7;   /* warm white / cream base        */
  --paper-2:      #ECE7DC;   /* slightly deeper cream          */
  --sand:         #DED6C5;   /* stone / sand                   */
  --stone:        #B8AE9C;   /* muted stone grey-beige         */
  --ink:          #1A1813;   /* near-black warm ink            */
  --ink-soft:     #4A463C;   /* secondary text                 */
  --ink-faint:    #8C8474;   /* tertiary / meta                */
  --brass:        #A07D3D;   /* muted brass / gold accent      */
  --brass-deep:   #856631;
  --forest:       #2C352B;   /* deep forest green              */
  --line:         rgba(26,24,19,.14);
  --line-soft:    rgba(26,24,19,.08);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --pad: clamp(22px, 6vw, 120px);
  --maxw: 1560px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  font-weight:300;
  line-height:1.6;
  cursor:none;
}
/* keep native cursor on touch / coarse pointers */
@media (hover:none), (pointer:coarse){ body{ cursor:auto; } }

::selection{ background:var(--brass); color:var(--paper); }

img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:none; }

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Type scale ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--brass);
}
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.96;
  letter-spacing:-.01em;
}
.serif{ font-family:var(--serif); font-weight:300; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:7px; height:7px; border-radius:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:width .35s var(--ease), height .35s var(--ease), background .35s;
}
.cursor-ring{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(160,125,61,.55);
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease-out), height .4s var(--ease-out),
             border-color .4s, background .4s, opacity .4s;
}
body.c-hover .cursor{ width:0; height:0; }
body.c-hover .cursor-ring{
  width:74px; height:74px; border-color:var(--brass);
  background:rgba(160,125,61,.07);
}
body.c-view .cursor-ring{
  width:96px; height:96px; mix-blend-mode:normal;
  background:rgba(26,24,19,.86); border-color:transparent;
}
.cursor-ring .lbl{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--sans); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--paper);
  opacity:0; transition:opacity .3s; white-space:nowrap;
}
body.c-view .cursor-ring .lbl{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-ring{ display:none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--paper);
  display:grid; place-items:center;
}
.loader__inner{ text-align:center; overflow:hidden; }
.loader__mark{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(54px,9vw,120px); line-height:1;
  letter-spacing:.04em;
  display:flex; gap:.02em; justify-content:center;
}
.loader__mark span{ display:inline-block; transform:translateY(110%); }
.loader__sub{
  margin-top:18px; font-size:10px; letter-spacing:.5em;
  text-transform:uppercase; color:var(--ink-faint);
  opacity:0;
}
.loader__bar{
  margin:30px auto 0; width:min(240px,40vw); height:1px;
  background:var(--line); position:relative; overflow:hidden;
}
.loader__bar i{
  position:absolute; inset:0; background:var(--brass);
  transform:scaleX(0); transform-origin:left;
}
.loader__pct{
  margin-top:14px; font-size:10px; letter-spacing:.3em; color:var(--ink-faint);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad);
  mix-blend-mode:difference; color:#fff;
  transition:padding .5s var(--ease);
}
.nav.scrolled{ padding-top:18px; padding-bottom:18px; }
.nav__logo{ display:flex; align-items:center; gap:13px; }
.nav__monogram{ width:auto; height:30px; display:block; }
.nav__word{
  font-family:var(--serif); font-size:19px; letter-spacing:.34em;
  font-weight:400; padding-left:2px;
}
.nav__links{ display:flex; gap:38px; align-items:center; }
.nav__links a{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  position:relative; padding:4px 0; font-weight:400;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  border:1px solid rgba(255,255,255,.55); border-radius:40px;
  padding:11px 22px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s;
}
.nav__cta:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.nav__burger{ display:none; }

@media (max-width:880px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; height:100svh; min-height:620px;
  overflow:hidden; background:var(--ink);
}
.hero__media{ position:absolute; inset:-6% 0 0 0; will-change:transform; }
.hero__media img{
  filter:brightness(.82) contrast(1.02) saturate(.96);
  transform:scale(1.12);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 40%, rgba(10,9,7,.55) 100%),
    linear-gradient(180deg, rgba(10,9,7,.45) 0%, transparent 28%, transparent 55%, rgba(10,9,7,.72) 100%);
}
#hero-canvas{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero__content{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(40px,7vh,80px);
  color:var(--paper);
}
.hero__eyebrow{
  color:rgba(243,239,231,.78); margin-bottom:24px;
  display:flex; align-items:center; gap:16px;
  overflow:hidden;
}
.hero__eyebrow span{ display:inline-block; }
.hero__eyebrow .ln{ width:46px; height:1px; background:rgba(243,239,231,.5); }
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(78px,17vw,290px); line-height:.84;
  letter-spacing:-.02em; margin-left:-.02em;
}
.hero__title .word{ display:block; overflow:hidden; }
.hero__title .word i{ display:inline-block; font-style:normal; }
.hero__row{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px; margin-top:30px;
}
.hero__tag{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,2.4vw,30px); color:rgba(243,239,231,.92);
  max-width:30ch; line-height:1.25;
}
.hero__scroll{
  display:flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(243,239,231,.7);
}
.hero__scroll .dot{
  width:30px; height:48px; border:1px solid rgba(243,239,231,.4);
  border-radius:20px; position:relative;
}
.hero__scroll .dot::after{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:3px; height:8px; border-radius:2px; background:var(--brass);
  animation:scrolldot 1.8s var(--ease) infinite;
}
@keyframes scrolldot{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,18px)} }

/* ============================================================
   SHARED SECTION SCAFFOLD
   ============================================================ */
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(40px,6vw,86px); }
.sec-head .idx{ font-size:11px; letter-spacing:.3em; color:var(--ink-faint); }

/* reveal primitives */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.r-delay-1{ transition-delay:.08s } .r-delay-2{ transition-delay:.16s }
.r-delay-3{ transition-delay:.24s } .r-delay-4{ transition-delay:.32s }

/* line mask reveal for big headings */
.lmask{ overflow:hidden; }
.lmask > *{ display:block; transform:translateY(105%); transition:transform 1.1s var(--ease-out); }
.lmask.in > *{ transform:none; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding:clamp(110px,16vh,210px) 0; background:var(--paper); }
.manifesto__lead{
  font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--brass); margin-bottom:48px;
}
.manifesto__big{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(30px,5.2vw,82px); line-height:1.08; letter-spacing:-.01em;
  max-width:18ch;
}
.manifesto__big em{ font-style:italic; color:var(--brass); }
.manifesto__foot{
  margin-top:clamp(54px,8vw,96px); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:32px; border-top:1px solid var(--line); padding-top:34px;
}
.manifesto__foot p{ max-width:46ch; color:var(--ink-soft); font-size:15px; }
.manifesto__by{ text-align:right; }
.manifesto__by .n{ font-family:var(--serif); font-size:22px; }
.manifesto__by .r{ font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }

/* ============================================================
   PHILOSOPHY — Place / Material / Experience
   ============================================================ */
.philosophy{ padding:clamp(40px,7vh,90px) 0 clamp(90px,13vh,160px); background:var(--paper-2); }
.phil-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.phil{
  background:var(--paper-2); padding:clamp(34px,3.4vw,60px) clamp(26px,2.4vw,44px) clamp(50px,5vw,80px);
  position:relative; transition:background .6s var(--ease);
}
.phil:hover{ background:var(--paper); }
.phil__num{ font-family:var(--serif); font-size:clamp(40px,5vw,78px); color:var(--sand); line-height:1; transition:color .6s var(--ease); }
.phil:hover .phil__num{ color:var(--brass); }
.phil__name{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; margin:26px 0 18px; }
.phil__title{ font-family:var(--serif); font-size:clamp(24px,2.4vw,34px); margin-bottom:18px; line-height:1.1; }
.phil__body{ color:var(--ink-soft); font-size:14.5px; max-width:34ch; }
@media (max-width:820px){ .phil-grid{ grid-template-columns:1fr; } }

/* ---------- INTERLUDE (full-bleed image carousel) ---------- */
.interlude{ position:relative; height:clamp(460px,84vh,860px); overflow:hidden; background:#0d0b08; color:var(--paper); }
.interlude__viewport{ position:absolute; inset:0; }
.interlude .slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.5s var(--ease-out); z-index:0; }
.interlude .slide.is-active{ opacity:1; z-index:1; }
.interlude .slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); filter:brightness(.9) saturate(.98); }
.interlude .slide.is-active img{ transform:scale(1.1); transition:transform 8s linear; } /* slow ken-burns */

.interlude__veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,5,.3) 0%,transparent 22%,transparent 46%,rgba(8,7,5,.8) 100%); }

/* content — bottom-left editorial */
.interlude__content{ position:absolute; left:var(--pad); bottom:clamp(40px,8vh,84px); z-index:4; max-width:82vw; }
.il-kicker{ display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--brass); margin-bottom:16px; }
.il-kicker .ln{ width:38px; height:1px; background:var(--brass); }
.il-namewrap{ overflow:hidden; }
.il-name{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,6.6vw,112px); line-height:1.0; letter-spacing:-.01em;
  padding-bottom:.14em; transform:translateY(112%); transition:transform 1s var(--ease-out); }
.il-name.in{ transform:none; }
.il-locwrap{ overflow:hidden; margin-top:6px; }
.il-loc{ font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.9vw,24px); opacity:.85;
  transform:translateY(112%); transition:transform 1s var(--ease-out) .08s; }
.il-loc.in{ transform:none; }

/* controls — bottom-right cluster */
.interlude__controls{ position:absolute; right:var(--pad); bottom:clamp(40px,8vh,84px); z-index:4; display:flex; align-items:center; gap:24px; }
.il-count{ font-family:var(--serif); font-size:15px; letter-spacing:.18em; }
.il-count b{ font-weight:400; } .il-count .tot{ opacity:.5; }
.il-arrows{ display:flex; gap:12px; }
.il-arrow{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-size:26px; line-height:1; color:var(--paper);
  border:1px solid rgba(243,239,231,.42); background:rgba(20,18,14,.15); backdrop-filter:blur(3px);
  transition:background .4s var(--ease-out), color .4s, border-color .4s, transform .4s var(--ease-out); }
.il-arrow:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.il-arrow.prev:hover{ transform:translateX(-3px); } .il-arrow.next:hover{ transform:translateX(3px); }

/* progress ticks */
.interlude__ticks{ position:absolute; left:var(--pad); right:var(--pad); bottom:0; z-index:4; display:flex; gap:10px; }
.interlude__ticks .tick{ flex:1; height:2px; background:rgba(243,239,231,.18); position:relative; overflow:hidden; }
.interlude__ticks .tick i{ position:absolute; inset:0; background:var(--brass); transform:scaleX(0); transform-origin:left; }
.interlude__ticks .tick.done i{ transform:scaleX(1); }
.interlude__ticks .tick.active i{ transform:scaleX(1); transition:transform 6s linear; }

@media (max-width:640px){
  .interlude__controls{ gap:14px; } .il-arrow{ width:46px; height:46px; font-size:22px; }
}
@media (prefers-reduced-motion:reduce){
  .interlude .slide.is-active img{ transform:scale(1.04); transition:none; }
  .interlude .slide{ transition:opacity .4s linear; }
  .interlude__ticks .tick.active i{ transition:none; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ padding:clamp(100px,15vh,190px) 0; background:var(--paper); }
.services__head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(50px,7vw,90px); }
.services__head h2{ font-family:var(--serif); font-size:clamp(34px,5vw,74px); line-height:1; }
.services__head p{ color:var(--ink-soft); max-width:40ch; font-size:15px; }
.svc-list{ border-top:1px solid var(--line); }
.svc{
  display:grid; grid-template-columns:60px 1.1fr 2fr 60px; gap:24px; align-items:center;
  padding:clamp(26px,3vw,42px) 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding .55s var(--ease);
}
.svc__no{ font-size:11px; letter-spacing:.2em; color:var(--ink-faint); }
.svc__name{ font-family:var(--serif); font-size:clamp(22px,2.6vw,38px); transition:transform .55s var(--ease), color .55s; }
.svc__desc{ color:var(--ink-soft); font-size:14.5px; max-width:48ch; }
.svc__arrow{ justify-self:end; opacity:0; transform:translateX(-12px); transition:opacity .5s var(--ease), transform .5s var(--ease); color:var(--brass); }
.svc::before{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out); }
.svc:hover::before{ transform:scaleX(1); }
.svc:hover{ padding-left:18px; padding-right:18px; }
.svc:hover .svc__name{ color:var(--brass-deep); }
.svc:hover .svc__arrow{ opacity:1; transform:translateX(0); }
@media (max-width:820px){
  .services__head{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:40px 1fr; gap:8px 18px; }
  .svc__desc{ grid-column:1/-1; padding-left:58px; }
  .svc__arrow{ display:none; }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.work{ padding:clamp(90px,12vh,150px) 0 clamp(60px,8vh,110px); background:var(--ink); color:var(--paper); }
.work .sec-head .idx{ color:rgba(243,239,231,.5); }
.work .sec-head{ margin-bottom:clamp(14px,2vw,24px); }
.work__title{ font-family:var(--serif); font-size:clamp(34px,5vw,76px); }
.work__sub{ color:rgba(243,239,231,.62); font-size:14.5px; max-width:42ch; margin-top:14px; }

.proj{ padding:clamp(60px,9vh,130px) 0; border-top:1px solid rgba(243,239,231,.13); }
.proj__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,72px); align-items:center; }
.proj:nth-of-type(even) .proj__visual{ order:2; }
.proj__visual{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  transform-style:preserve-3d; perspective:1200px;
}
.proj__img{ position:absolute; inset:0; overflow:hidden; }
.proj__img img{ transform:scale(1.08); transition:transform 1.4s var(--ease-out); filter:saturate(.98); will-change:transform; }
.proj:hover .proj__img img{ transform:scale(1.0); }
.proj__count{
  position:absolute; top:18px; left:18px; z-index:3;
  font-family:var(--serif); font-size:13px; letter-spacing:.2em;
  color:var(--paper); mix-blend-mode:difference;
}
.proj__tag{
  position:absolute; bottom:18px; right:18px; z-index:3;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  background:rgba(243,239,231,.12); backdrop-filter:blur(6px);
  border:1px solid rgba(243,239,231,.22); padding:7px 13px; border-radius:30px;
}
.proj__info{ max-width:46ch; }
.proj__idx{ font-family:var(--serif); font-size:clamp(60px,8vw,118px); color:rgba(160,125,61,.32); line-height:.8; }
.proj__name{ font-family:var(--serif); font-size:clamp(34px,4.4vw,64px); line-height:1; margin:10px 0 6px; }
.proj__loc{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); margin-bottom:26px; }
.proj__desc{ color:rgba(243,239,231,.72); font-size:15px; line-height:1.7; margin-bottom:30px; }
.proj__meta{ display:flex; gap:36px; flex-wrap:wrap; border-top:1px solid rgba(243,239,231,.14); padding-top:22px; }
.proj__meta div .k{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(243,239,231,.5); margin-bottom:5px; }
.proj__meta div .v{ font-family:var(--serif); font-size:17px; }
@media (max-width:880px){
  .proj__grid{ grid-template-columns:1fr; gap:28px; }
  .proj:nth-of-type(even) .proj__visual{ order:0; }
}

/* gallery strip under hero projects */
.strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.strip > div{ aspect-ratio:3/4; overflow:hidden; }
.strip img{ transition:transform 1.2s var(--ease-out); }
.strip > div:hover img{ transform:scale(1.05); }

/* ============================================================
   ABOUT / FOUNDERS
   ============================================================ */
.about{ padding:clamp(110px,16vh,200px) 0; background:var(--paper); }
.about__head{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; margin-bottom:clamp(56px,8vw,104px); }
.about__intro{ max-width:none; }
.about__intro h2{ font-family:var(--serif); font-size:clamp(44px,6.6vw,104px); line-height:1.02; letter-spacing:-.01em; padding-right:.06em; }
.about__lead{
  margin:0 0 .35em; font-family:var(--serif); font-weight:300;
  font-size:clamp(22px,2.5vw,36px); line-height:1.34; max-width:30ch; color:var(--ink);
}
@media (max-width:760px){
  .about__head{ grid-template-columns:1fr; gap:34px; align-items:start; }
  .about__lead{ font-size:clamp(22px,5vw,30px); }
}
.about__lead em{ font-style:italic; color:var(--brass); }
.founders{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,90px); border-top:1px solid var(--line); padding-top:clamp(44px,5vw,70px); }
.founder__portrait{ aspect-ratio:4/5; overflow:hidden; margin-bottom:34px; background:var(--sand); }
.founder__portrait img{ filter:grayscale(1) contrast(1.03); transform:scale(1.04); transition:transform 1.4s var(--ease-out), filter .8s; }
.founder:hover .founder__portrait img{ transform:scale(1); filter:grayscale(.55) contrast(1.03); }
.founder__mono{
  width:64px; height:64px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-size:24px;
  color:var(--brass); margin-bottom:26px;
}
.founder__name{ font-family:var(--serif); font-size:clamp(28px,3.2vw,44px); line-height:1; }
.founder__role{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); margin:14px 0 22px; }
.founder__bio{ color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:42ch; }
@media (max-width:760px){ .founders{ grid-template-columns:1fr; gap:54px; } }

/* process timeline */
.process{ padding:clamp(80px,11vh,150px) 0; background:var(--forest); color:var(--paper); }
.process .sec-head .idx{ color:rgba(243,239,231,.5); }
.process__title{ font-family:var(--serif); font-size:clamp(30px,4.4vw,64px); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(40px,6vw,72px); }
.step{ padding:34px 26px 50px; border-top:1px solid rgba(243,239,231,.2); position:relative; }
.step__n{ font-family:var(--serif); font-size:13px; letter-spacing:.2em; color:var(--brass); margin-bottom:30px; }
.step__name{ font-family:var(--serif); font-size:clamp(21px,2.2vw,30px); margin-bottom:14px; }
.step__d{ font-size:13.5px; color:rgba(243,239,231,.66); line-height:1.6; }
.step::after{ content:""; position:absolute; top:-1px; left:0; width:0; height:1px; background:var(--brass); transition:width 1.1s var(--ease-out); }
.step.in::after{ width:100%; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(110px,16vh,200px) 0; background:var(--paper); }
.contact__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(50px,7vw,110px); }
.contact__title{ font-family:var(--serif); font-size:clamp(44px,7vw,118px); line-height:1.04; letter-spacing:-.01em; padding-bottom:.2em; margin-bottom:-.14em; }
.contact__title em{ font-style:italic; color:var(--brass); }
.contact__lead{ margin:34px 0 46px; color:var(--ink-soft); font-size:15.5px; max-width:40ch; line-height:1.75; }
.contact__direct .k{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.contact__direct .row{ margin-bottom:26px; }
.contact__direct a,.contact__direct span{ font-family:var(--serif); font-size:clamp(20px,2.2vw,28px); display:block; transition:color .4s; }
.contact__direct a:hover{ color:var(--brass); }

.form{ display:grid; gap:0; }
.field{ position:relative; border-bottom:1px solid var(--line); padding:22px 0 12px; }
.field label{ position:absolute; top:24px; left:0; font-size:14px; color:var(--ink-faint); pointer-events:none; transition:all .4s var(--ease); letter-spacing:.02em; }
.field input,.field textarea,.field select{
  width:100%; background:none; border:none; outline:none;
  font-family:var(--sans); font-size:16px; color:var(--ink); font-weight:300;
  padding:2px 0; resize:none; cursor:none;
}
.field select{ cursor:none; }
.field textarea{ min-height:80px; }
.field input:focus + label, .field.filled label,
.field textarea:focus + label, .field.filled.area label{ top:2px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }
.field.sel label{ top:2px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }
.field::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); }
.field:focus-within::after{ transform:scaleX(1); }
.form__submit{
  margin-top:38px; display:inline-flex; align-items:center; gap:16px;
  align-self:start; border:1px solid var(--ink); border-radius:40px;
  padding:16px 32px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  overflow:hidden; position:relative; transition:color .5s var(--ease);
}
.form__submit span{ position:relative; z-index:2; }
.form__submit::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .5s var(--ease-out); z-index:1; }
.form__submit:hover{ color:var(--paper); }
.form__submit:hover::before{ transform:translateY(0); }
.form__note{ margin-top:18px; font-size:12px; color:var(--ink-faint); }
@media (max-width:820px){ .contact__grid{ grid-template-columns:1fr; gap:60px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--paper); padding:clamp(70px,9vh,120px) 0 40px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:clamp(50px,7vw,90px); border-bottom:1px solid rgba(243,239,231,.14); }
.footer__brand .m{ font-family:var(--serif); font-size:clamp(40px,6vw,92px); line-height:.9; letter-spacing:.02em; }
.footer__brand .t{ font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:rgba(243,239,231,.55); margin-top:18px; }
.footer__col h4{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(243,239,231,.5); margin-bottom:22px; font-weight:400; }
.footer__col a,.footer__col p{ display:block; font-family:var(--serif); font-size:18px; margin-bottom:12px; color:rgba(243,239,231,.85); transition:color .4s; }
.footer__col a:hover{ color:var(--brass); }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top:34px; font-size:11px; letter-spacing:.1em; color:rgba(243,239,231,.5); }
.footer__bottom a:hover{ color:var(--brass); }
@media (max-width:760px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }

/* marquee divider */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; background:var(--paper); white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:48px; animation:marq 38s linear infinite; }
.marquee span{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,44px); color:var(--ink); }
.marquee span::after{ content:"·"; margin-left:48px; color:var(--brass); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:850; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:0 var(--pad); transform:translateY(-101%); transition:transform .8s var(--ease-out);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--serif); font-size:clamp(34px,9vw,56px); line-height:1.18; }
.mobile-menu a:active{ color:var(--brass); }

/* misc */
.muted{ color:var(--ink-faint); }

/* responsive nudges */
@media (max-width:600px){
  .manifesto__foot{ flex-direction:column; }
  .manifesto__by{ text-align:left; }
  .proj__meta{ gap:24px; }
  .strip{ grid-template-columns:1fr 1fr; }
}