/* ============================================================
   STUDIO SA'MO — base · components · layout
   Architectural-editorial system. Depends on tokens.css.
   Fonts: Metana (self-hosted, display) + Hanken Grotesk (body,
   via tokens @import) + IBM Plex Mono (metadata, via @import).
   ============================================================ */

/* Metana — display, solid */
@font-face{ font-family:'Neue Metana Next'; src:url('/assets/fonts/NeueMetanaNext-SemiBold.otf') format('opentype'); font-weight:100 900; font-style:normal; font-display:swap; }
/* Outline cut — reserved for the oversized service index letters only */
@font-face{ font-family:'Neue Metana Next Outline'; src:url('/assets/fonts/NeueMetanaNextOutline-Black.otf') format('opentype'); font-weight:100 900; font-style:normal; font-display:swap; }

/* ---- Reset / base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-weight:var(--w-regular); font-size:var(--t-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
::selection{ background:var(--accent-soft); color:var(--ink); }
:focus-visible{ outline:none; box-shadow:var(--focus); }

/* ---- Layout ---- */
.container,.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wide{ max-width:var(--wide); }
.section{ padding-block:var(--sec); position:relative; }
.section--sm{ padding-block:var(--sec-sm); }
.section--band{ background:var(--band); }
.section--dark{ background:var(--dark); color:var(--on-dark); }
.measure{ max-width:var(--measure); }

/* ---- Micro-label (mono, uppercase, tracked) — the only "graphic" gesture ---- */
.label,.eyebrow{
  font-family:var(--mono); font-weight:var(--w-medium); text-transform:uppercase;
  letter-spacing:var(--track-label); font-size:var(--t-xs); line-height:var(--lh-label); color:var(--muted);
}
.label--accent,.eyebrow--accent{ color:var(--accent); }
.label--ink{ color:var(--ink); }
.clash{ color:var(--accent); }  /* orange emphasis word inside a heading or line */
.tick{ display:inline-flex; align-items:center; gap:.85rem; }
.tick::before{ content:''; width:26px; height:1px; background:var(--accent); flex:0 0 auto; }
.eyebrow--tick{ display:inline-flex; align-items:center; gap:.85rem; }
.eyebrow--tick::before{ content:''; width:26px; height:1px; background:var(--accent); flex:0 0 auto; }
.section--dark .label,.section--dark .eyebrow{ color:var(--on-dark-muted); }

/* ---- Display / headings (Metana, sentence case, tight tracking) ---- */
.display,.h1,.h2,.h3,h1,h2,h3{ font-family:var(--display); font-weight:var(--w-semibold); color:var(--ink); text-wrap:pretty; }
.section--dark .display,.section--dark .h1,.section--dark .h2,.section--dark .h3{ color:var(--on-dark); }
.h1{ font-size:var(--t-h1); line-height:var(--lh-hero); letter-spacing:var(--track-display); }
.h2{ font-size:var(--t-h2); line-height:var(--lh-display); letter-spacing:var(--track-display); }
.h3{ font-size:var(--t-h3); line-height:var(--lh-heading); letter-spacing:var(--track-tight); }
.hero-type{ font-size:var(--t-hero); line-height:var(--lh-hero); letter-spacing:var(--track-display); }

/* ---- Text ---- */
.lead{ font-size:var(--t-md); line-height:1.5; color:var(--ink-2); }
.muted{ color:var(--muted); }
.body-copy{ color:var(--ink-2); }
.body-copy + .body-copy{ margin-top:var(--s4); }
strong,b{ font-weight:var(--w-semibold); }

/* ---- Rules / section head ---- */
.rule{ border:0; border-top:var(--bw) solid var(--hairline); margin:0; }
.section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s6); padding-bottom:var(--s4); border-bottom:var(--bw) solid var(--hairline); margin-bottom:clamp(2.5rem,5vw,4.5rem); flex-wrap:wrap; }
.section-head__l{ max-width:52ch; }
.section-head .h2{ margin-top:var(--s4); }

/* ---- Links ---- */
.link-underline{ position:relative; color:inherit; transition:color var(--dur-micro) var(--ease); }
.link-underline::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--accent); transition:width var(--dur) var(--ease); }
.link-underline:hover{ color:var(--accent-deep); }
.link-underline:hover::after{ width:100%; }

/* ---- CTA text-link (mono, underline, arrow) ---- */
.cta{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-weight:var(--w-medium); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); color:var(--ink); border-bottom:var(--bw) solid var(--ink); padding-bottom:4px; transition:gap var(--dur) var(--ease),color var(--dur-micro),border-color var(--dur-micro); }
.cta:hover{ gap:1rem; color:var(--accent); border-color:var(--accent); }
.section--dark .cta{ color:var(--on-dark); border-color:var(--on-dark); }
.section--dark .cta:hover{ color:var(--accent); border-color:var(--accent); }

/* ---- Buttons (flat, print-like — no pill, no shadow) ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-family:var(--mono); font-weight:var(--w-medium); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); border:var(--bw) solid transparent; border-radius:var(--radius); cursor:pointer; white-space:nowrap; transition:background var(--dur-micro) var(--ease),color var(--dur-micro),border-color var(--dur-micro); }
.btn--sm{ height:38px; padding:0 18px; }
.btn--md{ height:46px; padding:0 24px; }
.btn--lg{ height:54px; padding:0 30px; }
.btn--full{ width:100%; }
.btn--primary{ background:var(--accent); color:var(--ground-2); }
.btn--primary:hover{ background:var(--accent-deep); }
.btn--ink{ background:var(--ink); color:var(--ground); }
.btn--ink:hover{ background:#000; }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--ground); }
.btn--secondary{ background:transparent; color:var(--ink); border-color:var(--hairline-strong); }
.btn--secondary:hover{ border-color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--accent); }
.btn--ghost:hover{ color:var(--accent-deep); }
.btn--ondark{ background:var(--accent); color:var(--ground-2); }
.btn--ondark:hover{ background:var(--accent-deep); }
.btn--ghost-ondark{ background:transparent; color:var(--on-dark); border-color:var(--hairline-on-dark); }
.btn--ghost-ondark:hover{ background:rgba(241,234,220,0.08); }
.btn--on-orange{ background:var(--ground-2); color:var(--accent-deep); }

/* ============================================================
   NAV — quiet, flat, mono links (no pill)
   ============================================================ */
#nav{ position:sticky; top:0; z-index:50; background:var(--ground); border-bottom:var(--bw) solid var(--hairline); }
#nav.nav-hidden{ transform:translateY(-102%); opacity:0; pointer-events:none; }
.nav-inner{ min-height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4); }
.nav-inner > .brand{ justify-self:start; }
.nav-inner > .nav-links{ justify-self:center; }        /* links sit in the MIDDLE */
.nav-inner > .nav-right{ justify-self:end; display:flex; align-items:center; gap:var(--s5); }
.logo img{ height:38px; width:auto; }
.logo--sm img{ height:34px; }
/* brand: clean monogram + SA'MO / Studio wordmark */
.brand{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); }
.brand__mark{ height:34px; width:auto; display:block; }
.brand__wm{ font-family:var(--display); font-weight:var(--w-semibold); text-transform:uppercase; letter-spacing:.02em; font-size:15px; line-height:1.04; border-left:2px solid var(--ink); padding-left:12px; }
.brand__wm small{ display:block; font-family:var(--mono); font-weight:500; font-size:9px; letter-spacing:.22em; color:var(--muted); }
@media(max-width:520px){ .brand__wm{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-link{ font-family:var(--mono); font-weight:var(--w-medium); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); color:var(--ink); transition:color var(--dur-micro) var(--ease); }
.nav-link:hover{ color:var(--accent); }
.nav-cta{ color:var(--ink); border-bottom:var(--bw) solid var(--ink); padding-bottom:2px; }
.nav-cta:hover{ color:var(--accent); border-color:var(--accent); }
.nav-link[aria-current="page"]{ color:var(--accent); }

/* services dropdown */
.nav-dd{ position:relative; }
.nav-dd__menu{ position:absolute; top:calc(100% + 12px); left:0; min-width:210px; background:var(--ground-2); border:var(--bw) solid var(--hairline); padding:var(--s2); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease),visibility var(--dur-micro); }
.nav-dd:hover .nav-dd__menu,.nav-dd:focus-within .nav-dd__menu,.nav-dd__menu.open{ opacity:1; visibility:visible; transform:none; }
.nav-dd__menu a{ display:block; padding:9px 12px; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); color:var(--ink); transition:color var(--dur-micro); }
.nav-dd__menu a:hover{ color:var(--accent); }

/* hamburger */
.nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:10px; cursor:pointer; background:transparent; border:0; color:inherit; }
.nav-burger span{ display:block; height:1.5px; width:100%; background:currentColor; transition:transform var(--dur-micro) var(--ease),opacity var(--dur-micro); }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:45; background:var(--ground); color:var(--ink); padding:96px var(--pad) var(--s7); overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur); }
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu__inner{ display:flex; flex-direction:column; max-width:var(--maxw); margin-inline:auto; }
.mobile-menu__link{ display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; background:transparent; border:0; border-bottom:var(--bw) solid var(--hairline); padding:var(--s5) 0; color:var(--ink); cursor:pointer; font-family:var(--display); font-weight:var(--w-semibold); font-size:clamp(1.9rem,7vw,2.6rem); letter-spacing:var(--track-tight); }
.mobile-menu__acc::after{ content:'+'; font-family:var(--mono); font-size:1.4rem; }
.mobile-menu__acc[aria-expanded="true"]::after{ content:'\2013'; }
.mobile-menu__sub{ display:none; flex-direction:column; gap:var(--s2); padding:var(--s3) 0 var(--s5) var(--s3); }
.mobile-menu__sub.open{ display:flex; }
.mobile-menu__sub a{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-sm); color:var(--muted); padding:var(--s2) 0; }
.mobile-menu__cta{ margin-top:var(--s6); }
body.menu-open{ overflow:hidden; }
@media(max-width:820px){ .nav-links .hide-sm{ display:none; } .nav-burger{ display:flex; } }
@media(min-width:821px){ .mobile-menu{ display:none; } }

/* ============================================================
   HERO (editorial, bone)
   ============================================================ */
.hero{ padding-block:clamp(3.5rem,9vw,7rem) 0; }
.hero__eyebrow{ margin-bottom:1.6rem; }
.hero__title{ max-width:16ch; }
.hero__row{ display:grid; grid-template-columns:1fr; gap:var(--s6); margin-top:2.4rem; align-items:end; }
@media(min-width:900px){ .hero__row{ grid-template-columns:1.1fr 1fr; } }
.hero__lead{ max-width:36ch; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:1.2rem 2.2rem; margin-top:2.4rem; padding-top:1.4rem; border-top:var(--bw) solid var(--hairline); }

/* full-bleed image band */
.bleed{ margin-top:clamp(3rem,6vw,5rem); }
.bleed__img{ width:100%; height:min(82vh,780px); object-fit:cover; filter:var(--img-grade); }
.bleed__cap{ margin-top:.9rem; }

/* ============================================================
   Selected work grid
   ============================================================ */
.work-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,4vw,4rem) clamp(1.5rem,3vw,3rem); }
@media(min-width:680px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1040px){ .work-grid{ grid-template-columns:repeat(3,1fr); } }
.work-card__fig{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--band); }
.work-card__fig img{ width:100%; height:100%; object-fit:cover; filter:var(--img-grade); transition:transform var(--dur-img) var(--ease); }
.work-card:hover .work-card__fig img{ transform:scale(1.04); }
/* No mix-blend-mode: blending over a filtered photo forces a backdrop read-back and
   pulls the whole card off the compositor fast path. Deeper orange reads the same. */
.work-card__no{ position:absolute; top:.9rem; left:.9rem; z-index:2; font-family:var(--mono); font-size:var(--t-xs); color:var(--accent-deep); }
.work-card__name{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-lg); letter-spacing:var(--track-tight); margin-top:1rem; }
.work-card__meta{ margin-top:.5rem; }
@media(min-width:1040px){ .work-card--offset{ transform:translateY(3.5rem); } }

/* Status chip — "Built" / "Design". Honest labelling of unbuilt work. */
.work-card__status{ position:absolute; top:.9rem; right:.9rem; z-index:2; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); line-height:1; padding:6px 9px; background:var(--ground); color:var(--ink); }
.work-card__status--design{ background:var(--ink); color:var(--ground); }

/* Work index filter row */
.work-filter{ display:flex; flex-wrap:wrap; gap:var(--s5); align-items:baseline; padding-bottom:var(--s5); margin-bottom:clamp(2rem,4vw,3.5rem); border-bottom:var(--bw) solid var(--hairline); }
.work-filter__btn{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); color:var(--muted); background:transparent; border:0; padding:0 0 3px; cursor:pointer; border-bottom:var(--bw) solid transparent; transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease); }
.work-filter__btn:hover{ color:var(--ink); }
.work-filter__btn[aria-pressed="true"]{ color:var(--accent); border-bottom-color:var(--accent); }
.work-filter__count{ margin-left:auto; }
.work-card[hidden]{ display:none; }

/* ============================================================
   Services — bordered rows w/ oversized index (from the brutalist mockup)
   ============================================================ */
.svc-list{ border-bottom:var(--bw-2) solid var(--ink); }
.svc{ display:grid; grid-template-columns:1fr; gap:var(--s4) clamp(24px,5vw,72px); padding-block:clamp(34px,5vw,58px); border-top:var(--bw-2) solid var(--ink); align-items:start; color:inherit; }
@media(min-width:820px){ .svc{ grid-template-columns:0.7fr 1.3fr; } }
.svc__l{ display:flex; flex-direction:column; gap:16px; }
.svc__idx{ font-family:var(--out); font-weight:400; font-size:clamp(2.6rem,5vw,4.4rem); line-height:.8; color:var(--ink); }
.svc__lab{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--muted); }
.svc__lab b{ color:var(--accent); font-weight:500; }
.svc__t{ font-family:var(--display); font-weight:var(--w-semibold); text-transform:uppercase; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:var(--track-tight); line-height:.98; }
.svc__d{ margin-top:18px; color:var(--ink-2); font-size:16px; line-height:1.9; max-width:52ch; }
.svc__best{ margin-top:24px; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--muted); }
.svc__t,.svc__idx{ transition:color var(--dur-micro) var(--ease); }
.svc:hover .svc__t{ color:var(--accent-deep); }
.svc:hover .svc__idx{ color:var(--accent); }

/* ============================================================
   Featured project — DHA 5 sketch ⇄ live (restyled flat/warm)
   ============================================================ */
.residence__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s6); flex-wrap:wrap; padding-bottom:var(--s5); border-bottom:var(--bw) solid var(--hairline); margin-bottom:var(--s7); }
.residence__desc{ margin-top:var(--s4); max-width:54ch; color:var(--ink-2); }
.seg{ display:inline-flex; border:var(--bw) solid var(--ink); }
.seg__btn{ appearance:none; border:0; background:transparent; cursor:pointer; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); color:var(--ink); padding:11px 22px; transition:background var(--dur-micro) var(--ease),color var(--dur-micro); }
.seg__btn + .seg__btn{ border-left:var(--bw) solid var(--ink); }
.seg__btn.is-active{ background:var(--ink); color:var(--ground); }
.residence-shots{ display:grid; grid-template-columns:1fr; gap:var(--s5); }
@media(min-width:768px){ .residence-shots{ grid-template-columns:repeat(3,1fr); } }
.res-shot{ position:relative; width:100%; aspect-ratio:1.4; overflow:hidden; background:var(--band); }
.res-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--img-grade); }
/* Render -> Reality reveal. Transforms only, no clip-path: an animating clip-path
   on a GPU-promoted layer can rasterise once and never repaint, which is why this
   worked in Edge but not Chrome. Outer mask slides in, inner counter-slides, so the
   photo never appears to move. No leading edge: any overlay bleeds a strip of the
   incoming image over the render, which reads as an artefact. */
.res-shot .res-reveal{ position:absolute; inset:0; z-index:2; overflow:hidden;
  transform:translate3d(-101%,0,0); transition:transform 1500ms cubic-bezier(.72,0,.18,1); }
.res-shot .res-reveal__in{ position:absolute; inset:0;
  transform:translate3d(101%,0,0); transition:transform 1500ms cubic-bezier(.72,0,.18,1); }
.res-shot .res-reveal img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:var(--img-grade); transform:scale(1.12);
  transition:transform 1900ms cubic-bezier(.16,1,.3,1); }
#drawnbuilt.show-live .res-shot .res-reveal,
#drawnbuilt.show-live .res-shot .res-reveal__in{ transform:translate3d(0,0,0); }
#drawnbuilt.show-live .res-shot .res-reveal img{ transform:scale(1); }
/* wider stagger so the three frames read as one sweep crossing the page */
.residence-shots .res-shot:nth-child(2) .res-reveal,
.residence-shots .res-shot:nth-child(2) .res-reveal__in,
.residence-shots .res-shot:nth-child(2) .res-reveal img{ transition-delay:200ms; }
.residence-shots .res-shot:nth-child(3) .res-reveal,
.residence-shots .res-shot:nth-child(3) .res-reveal__in,
.residence-shots .res-shot:nth-child(3) .res-reveal img{ transition-delay:400ms; }
/* the frame lifts fractionally as reality lands */
#drawnbuilt .res-shot{ transition:transform 1500ms cubic-bezier(.72,0,.18,1); }
#drawnbuilt.show-live .res-shot{ transform:translateY(-6px); }
.res-shot__tag{ position:absolute; left:0; bottom:0; z-index:3; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--ground); background:var(--ink); padding:6px 11px; }
.residence-foot{ display:grid; grid-template-columns:1fr; gap:var(--s7); margin-top:var(--s7); padding-top:var(--s6); border-top:var(--bw) solid var(--hairline); }
@media(min-width:900px){ .residence-foot{ grid-template-columns:1.5fr 1fr; gap:var(--s9); } }
.residence-copy p{ color:var(--ink-2); } .residence-copy p + p{ margin-top:var(--s4); }
.residence-specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
.residence-spec .k{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--accent); }
.residence-spec .v{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-base); margin-top:var(--s2); }

/* ============================================================
   Process (numbered steps)
   ============================================================ */
.process-grid{ display:grid; grid-template-columns:1fr; gap:0; border-top:var(--bw) solid var(--hairline); }
@media(min-width:760px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .process-grid{ grid-template-columns:repeat(4,1fr); } }
.process-step{ padding:var(--s6) var(--s5) var(--s6) 0; border-bottom:var(--bw) solid var(--hairline); }
.process-step__num{ font-family:var(--mono); font-size:var(--t-sm); color:var(--accent); }
.process-step__title{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-lg); letter-spacing:var(--track-tight); margin-top:var(--s4); }
.process-step__desc{ margin-top:var(--s3); color:var(--ink-2); font-size:var(--t-sm); }

/* ============================================================
   Studio (people) + beliefs
   ============================================================ */
.studio-grid{ display:grid; grid-template-columns:1fr; gap:var(--s8); }
@media(min-width:900px){ .studio-grid{ grid-template-columns:1fr 1fr; gap:var(--s9); } }
.person__head{ display:flex; align-items:center; gap:var(--s5); }
.person__fig{ width:118px; flex:0 0 auto; aspect-ratio:4/5; overflow:hidden; background:var(--band); }
.person__fig img{ width:100%; height:100%; object-fit:cover; filter:var(--img-grade); }
.person__name{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-lg); letter-spacing:var(--track-tight); }
.person__role{ margin-top:var(--s2); }
.person__quote{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-md); line-height:1.35; letter-spacing:var(--track-tight); margin-top:var(--s6); }
.person__bio{ margin-top:var(--s4); color:var(--ink-2); font-size:var(--t-sm); max-width:48ch; }
.beliefs{ display:grid; grid-template-columns:1fr; gap:var(--s6); border-top:var(--bw) solid var(--hairline); padding-top:var(--s7); }
@media(min-width:680px){ .beliefs{ grid-template-columns:repeat(3,1fr); } }
.belief h3{ font-size:var(--t-lg); letter-spacing:var(--track-tight); }
.belief p{ margin-top:var(--s3); color:var(--ink-2); font-size:var(--t-sm); }

/* ============================================================
   Statement band
   ============================================================ */
.statement h2{ max-width:20ch; margin-top:var(--s4); }
.statement p{ margin-top:var(--s5); max-width:56ch; }

/* ============================================================
   Contact form (flat inputs)
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:var(--s8); }
@media(min-width:960px){ .contact-grid{ grid-template-columns:5fr 6fr; gap:var(--s9); } }
.contact-detail .value{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-md); margin-top:var(--s2); }
.contact-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); margin-top:var(--s7); }
.field{ display:block; margin-bottom:var(--s5); }
.field__label{ display:block; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--ink); margin-bottom:var(--s2); }
.field__label .req{ color:var(--accent); }
.field__hint{ font-size:var(--t-xs); color:var(--muted); margin-top:var(--s2); }
.input,.textarea{ width:100%; font-family:var(--body); font-size:var(--t-sm); color:var(--ink); background:var(--ground-2); border:var(--bw) solid var(--hairline-strong); border-radius:var(--radius); padding:0 var(--s3); transition:border-color var(--dur-micro); }
.input{ height:48px; } .textarea{ padding:var(--s3); min-height:130px; resize:vertical; line-height:1.5; }
.input:focus,.textarea:focus{ outline:none; border-color:var(--accent); }
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.form-row{ display:grid; grid-template-columns:1fr; gap:0; }
@media(min-width:560px){ .form-row{ grid-template-columns:1fr 1fr; gap:var(--s5); } }

/* ============================================================
   Footer — the black "ending patch" (giant wordmark + columns + legal)
   ============================================================ */
.footer{ background:var(--dark); color:var(--on-dark); }
.footer__in{ padding-block:clamp(64px,10vw,110px) 40px; }
.footer__big{ display:flex; align-items:flex-end; gap:clamp(18px,4vw,44px); flex-wrap:wrap; }
.footer__wm{ font-family:var(--display); font-weight:var(--w-semibold); text-transform:uppercase; letter-spacing:-.03em; line-height:.78; font-size:clamp(4.5rem,17vw,13rem); color:var(--on-dark); }
.footer__wm .clash{ color:var(--accent); }
.footer__est{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--on-dark-muted); padding-bottom:16px; }
.footer__row{ display:grid; grid-template-columns:1fr; gap:var(--s6); margin-top:clamp(40px,6vw,64px); padding-top:var(--s6); border-top:var(--bw) solid var(--hairline-on-dark); }
@media(min-width:760px){ .footer__row{ grid-template-columns:1.5fr 1fr 1fr 1.3fr; } }
.footer__blurb{ color:var(--on-dark-muted); font-size:var(--t-sm); line-height:1.9; max-width:34ch; }
.footer__addr{ margin-top:var(--s4); font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-2xs); line-height:2; color:var(--on-dark-muted); max-width:34ch; }
.footer__col{ display:flex; flex-direction:column; align-items:flex-start; }
.footer__col-h{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--accent); margin-bottom:var(--s3); }
.footer__col a{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); color:var(--on-dark); line-height:2.3; transition:color var(--dur-micro); }
.footer__col a:hover{ color:var(--accent); }
.footer__process{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-xs); color:var(--on-dark-muted); line-height:2.3; }
.footer__legal{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(36px,5vw,56px); color:var(--on-dark-muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-2xs); }

/* ============================================================
   Sub-page hero (stubs) + placeholder slot
   ============================================================ */
.page-hero{ padding-block:clamp(3.5rem,9vw,7rem) clamp(2.5rem,5vw,4rem); border-bottom:var(--bw) solid var(--hairline); }
.page-hero .h1{ margin-top:var(--s4); }
.page-hero__lead{ max-width:56ch; margin-top:var(--s5); font-size:var(--t-md); color:var(--ink-2); }
.placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--s3); min-height:300px; padding:var(--s8) var(--s6); border:var(--bw) dashed var(--hairline-strong); background:repeating-linear-gradient(45deg,transparent,transparent 13px,rgba(34,28,23,.025) 13px,rgba(34,28,23,.025) 26px); color:var(--muted); }
.placeholder__tag{ color:var(--accent); }
.placeholder h3{ font-size:var(--t-lg); letter-spacing:var(--track-tight); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* hidden state applies ONLY when site.js has added html.reveal-on — so if the
   script never runs, content stays fully visible (no blank sections). */
.reveal-on .reveal{ opacity:0; transform:translateY(22px); transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out); }
.reveal-on .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:80ms; } .reveal.d2{ transition-delay:160ms; } .reveal.d3{ transition-delay:240ms; } .reveal.d4{ transition-delay:320ms; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal-on .reveal{ opacity:1; transform:none; transition:none; }
  .work-card__fig img,.res-shot .res-reveal,.res-shot .res-reveal__in,.res-shot .res-reveal img,#drawnbuilt .res-shot{ transition:none; }
}

/* ============================================================
   Case study pages
   ============================================================ */
.cs-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:var(--s5) var(--s6); padding-block:var(--s6); border-top:var(--bw) solid var(--hairline); border-bottom:var(--bw) solid var(--hairline); }
/* auto-fit so the five facts (Location, Type, Area, Scope, Status) never leave a ragged row */
.cs-fact__k{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--accent); }
.cs-fact__v{ margin-top:var(--s2); font-size:var(--t-base); color:var(--ink); }
.cs-lede{ margin-block:clamp(3rem,7vw,6rem) 0; }
/* Height-capped and centred. At full container width a portrait lede rendered well
   over 1600px tall — you had to scroll the picture. Ratio is kept, nothing cropped. */
.cs-lede img{ width:auto; max-width:100%; height:auto; max-height:min(62vh,540px); margin-inline:auto; filter:var(--img-grade); border:var(--bw) solid var(--hairline-strong); }
.cs-cap{ margin-top:var(--s3); }
.cs-split{ display:grid; grid-template-columns:1fr; gap:var(--s6); }
@media(min-width:860px){ .cs-split{ grid-template-columns:30ch 1fr; gap:clamp(2rem,5vw,5rem); } }
/* Block titles ("The brief", "The move"…): display face at heading size, kept orange.
   These ran as 11px mono labels and were far too quiet for what they anchor. */
.cs-split h2{
  font-family:var(--display); font-weight:var(--w-semibold);
  font-size:var(--t-h3); line-height:var(--lh-heading);
  letter-spacing:var(--track-tight); text-transform:none; color:var(--accent);
}
.cs-split p{ font-size:var(--t-md); line-height:var(--lh-body); color:var(--ink-2); max-width:62ch; }
.cs-split p + p{ margin-top:var(--s5); }
/* Masonry columns rather than a grid: the photos mix portrait and landscape, so
   packing by column keeps the wall tight with no cropping and no ragged rows.
   Three columns puts each image near a third of the old two-up width — roughly
   55% less area — so most of the set reads at a glance instead of one per screen. */
.cs-gallery{ column-count:1; column-gap:clamp(1rem,2vw,1.75rem); }
@media(min-width:700px){ .cs-gallery{ column-count:2; } }
@media(min-width:1040px){ .cs-gallery{ column-count:3; } }
/* Framed, and the frame clips the hover zoom so it never spills onto neighbours. */
.cs-fig{
  margin:0 0 clamp(1rem,2vw,1.75rem); break-inside:avoid; -webkit-column-break-inside:avoid;
  border:var(--bw) solid var(--hairline-strong); overflow:hidden; background:var(--band);
  transition:border-color var(--dur-micro) var(--ease);
}
.cs-fig img{
  width:100%; height:auto; display:block; background:var(--band); filter:var(--img-grade);
  transition:transform 450ms var(--ease);
}
.cs-fig:hover{ border-color:var(--accent); }
.cs-fig:hover img{ transform:scale(1.04); }
/* the former full-bleed figure now sits in the flow with the rest */
.cs-fig--wide{ grid-column:auto; }
/* caption sits inside the frame, so the whole figure reads as one card */
.cs-fig figcaption{ margin:0; padding:var(--s3); font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--muted); }
.cs-note{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--muted); padding:var(--s4) 0; border-top:var(--bw) solid var(--hairline); }
.cs-next{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--s5); padding-top:var(--s6); border-top:var(--bw) solid var(--hairline); }
.cs-next__name{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-xl); letter-spacing:var(--track-tight); }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,6vw,5rem); }
@media(min-width:900px){ .contact-grid{ grid-template-columns:1.1fr 1fr; } }
.chan{ display:block; padding:var(--s5) 0; border-top:var(--bw) solid var(--hairline); }
.chan:last-of-type{ border-bottom:var(--bw) solid var(--hairline); }
.chan__k{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--accent); }
.chan__v{ display:flex; align-items:baseline; gap:.7rem; margin-top:var(--s2); font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-lg); letter-spacing:var(--track-tight); color:var(--ink); transition:color var(--dur-micro) var(--ease); }
.chan:hover .chan__v{ color:var(--accent); }
.chan__note{ margin-top:var(--s2); font-size:var(--t-sm); color:var(--muted); }
.field{ display:block; margin-bottom:var(--s5); }
.field__l{ display:block; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--muted); margin-bottom:var(--s2); }
.field input,.field select,.field textarea{ width:100%; font-family:var(--body); font-size:var(--t-base); color:var(--ink); background:var(--ground-2); border:var(--bw) solid var(--hairline-strong); border-radius:var(--radius); padding:13px 14px; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:var(--focus); border-color:var(--accent); }
.field__row{ display:grid; grid-template-columns:1fr; gap:0 var(--s5); }
@media(min-width:560px){ .field__row{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   Studio + services pages
   ============================================================ */
.studio-shots{ display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,3vw,2.5rem); }
@media(min-width:640px){ .studio-shots{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
.studio-shots img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:var(--img-grade); background:var(--band); }
.cred{ display:grid; grid-template-columns:1fr; gap:var(--s6); padding-block:var(--s6); border-top:var(--bw) solid var(--hairline); }
@media(min-width:760px){ .cred{ grid-template-columns:repeat(3,1fr); } }
.cred__k{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--accent); }
.cred__v{ margin-top:var(--s2); color:var(--ink-2); }
.step-list{ display:grid; grid-template-columns:1fr; gap:0; }
.step{ display:grid; grid-template-columns:1fr; gap:var(--s3); padding-block:var(--s6); border-top:var(--bw) solid var(--hairline); }
@media(min-width:760px){ .step{ grid-template-columns:8ch 26ch 1fr; gap:var(--s6); align-items:baseline; } }
.step__n{ font-family:var(--mono); font-size:var(--t-xs); color:var(--accent); }
.step__t{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-lg); letter-spacing:var(--track-tight); }
.step__d{ color:var(--ink-2); max-width:56ch; }
.faq{ border-top:var(--bw) solid var(--hairline); padding-block:var(--s5); }
.faq__q{ font-family:var(--display); font-weight:var(--w-semibold); font-size:var(--t-md); letter-spacing:var(--track-tight); }
.faq__a{ margin-top:var(--s3); color:var(--ink-2); max-width:62ch; }

/* ============================================================
   Service pages (interior design · architecture · turnkey)
   Each block is a distinct step in the story, so it gets a real divider and a
   heading you can actually read — these ran as 11px mono labels and disappeared.
   ============================================================ */
/* Orange rule between every block, and one directly under the hero, so each
   service reads as a set of clearly separated segments. */
.svc-page .page-hero{ border-bottom:var(--bw-3) solid var(--accent); }
.svc-page .section + .section{ border-top:var(--bw-3) solid var(--accent); }
/* Service block titles keep the ink colour — sizing comes from .cs-split h2. */
.svc-page .cs-split h2{ color:var(--ink); }

/* Homepage hero pair — portrait-led, because every source image is portrait */
.hero-pair{ display:grid; grid-template-columns:1fr; gap:clamp(1.25rem,2.5vw,2rem); margin-top:clamp(2rem,4vw,3.25rem); }
/* Columns size to the photos and the pair sits centred, side by side. */
@media(min-width:760px){ .hero-pair{ grid-template-columns:auto auto; justify-content:center; align-items:start; } }
.hero-pair figure{ margin:0; }
/* Whole image, never cropped: cap the HEIGHT and let width follow the photo's own
   ratio, so nothing gets cut off. 70vh/588px is 40% up on the previous 50vh/420px. */
.hero-pair img{ width:auto; max-width:100%; height:auto; max-height:min(70vh,588px); filter:var(--img-grade); background:var(--band); }
@media(min-width:760px){ .hero-pair figure:nth-child(2){ transform:translateY(clamp(1rem,2.2vw,2rem)); } }
.hero-pair figcaption{ margin-top:var(--s3); font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--muted); }
/* Drawn -> Built comparison uses the portrait frame the photos actually are */
#drawnbuilt .res-shot{ aspect-ratio:3/4; }
/* Row held to 85% and centred: 15% smaller in both axes (the 3/4 ratio carries the
   height down with the width), so the toggle and all three frames sit on screen
   together and the whole sweep plays in view. */
@media(min-width:768px){ #drawnbuilt .residence-shots{ max-width:85%; margin-inline:auto; } }

/* Drawn/Built toggle — signposted, because people miss segmented controls */
.seg-wrap{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.seg-hint{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:var(--t-2xs); color:var(--accent); }
.seg-hint__pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:segPulse 1.9s var(--ease) infinite; }
@keyframes segPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.55); opacity:.35; } }
.seg__btn{ min-width:92px; }
#drawnbuilt .seg{ box-shadow:0 0 0 4px var(--accent-soft); }
@media(prefers-reduced-motion:reduce){
  .seg-hint__pulse{ animation:none; }
  }

/* ============================================================
   BLUEPRINT TEXTURE — carried over from the v1 mockup, dialled right down
   Three background layers: a top/bottom fade in the block's own colour, then the
   horizontal and vertical drafting lines. The fade is a gradient rather than
   mask-image, so it costs nothing extra to paint and the grid never stops on a
   hard edge — it eases in and back out.
   ============================================================ */
.section--band,
.page-hero,
.footer,
.section--blueprint{
  background-image:
    linear-gradient(180deg, var(--bp-surface) 0%, transparent 20%, transparent 80%, var(--bp-surface) 100%),
    linear-gradient(var(--bp-line) var(--bp-w), transparent var(--bp-w)),
    linear-gradient(90deg, var(--bp-line) var(--bp-w), transparent var(--bp-w));
  background-size:100% 100%, var(--bp-size) var(--bp-size), var(--bp-size) var(--bp-size);
  background-repeat:no-repeat, repeat, repeat;
}
.section--band{ --bp-surface:var(--band); --bp-line:var(--bp-line-light); }
.page-hero{ --bp-surface:var(--ground); --bp-line:var(--bp-line-light); }
.footer{ --bp-surface:var(--dark); --bp-line:var(--bp-line-dark); }
/* the one deep patch — blue ink under an orange grid */
.section--blueprint{ background-color:var(--blueprint); --bp-surface:var(--blueprint); --bp-line:var(--bp-line-dark); }

/* On-dark corrections the dark band needs (these rules only ever fire inside
   .section--dark, so nothing on the light pages moves). */
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--on-dark); }
.section--dark .eyebrow--accent{ color:var(--accent); }        /* keep the orange eyebrow */
.section--dark .section-head{ border-bottom-color:var(--hairline-on-dark); }
.section--dark .process-grid{ border-top-color:var(--hairline-on-dark); }
.section--dark .process-step{ border-bottom-color:var(--hairline-on-dark); }
.section--dark .process-step__desc{ color:var(--on-dark-muted); }
/* Footer: non-clickable clarifier for the WhatsApp-only number */
.footer__hint{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-nav); font-size:var(--t-2xs); color:var(--on-dark-muted); line-height:2.3; }

/* ============================================================
   MOBILE PASS — everything below 720px
   ============================================================ */
@media(max-width:719px){
  /* Display type: the clamp minimums were set for desktop and overflow narrow
     screens, where body{overflow-x:hidden} silently clipped them. */
  .h1{ font-size:clamp(2.1rem,8.5vw,3rem); }
  .h2{ font-size:clamp(1.75rem,7vw,2.4rem); }
  .h3{ font-size:clamp(1.3rem,5.4vw,1.8rem); }
  .hero__title{ max-width:none; }
  .hero__lead,.page-hero__lead{ max-width:none; }

  /* Section rhythm: desktop spacing wastes a phone screen */
  .section{ padding-block:clamp(3rem,11vw,4.5rem); }
  .section--sm{ padding-block:clamp(2.25rem,8vw,3.5rem); }

  /* Section heads stack instead of squeezing two columns together */
  .section-head{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
  .section-head .label,.section-head p.label{ text-align:left !important; max-width:none !important; }

  /* Hero pair: one image at a time, no offset */
  .hero-pair figure:nth-child(2){ transform:none; }
  .hero-pair img{ height:clamp(300px,58vw,420px); }
  .hero__meta{ gap:.7rem 1.4rem; }

  /* Rendered/Reality: stack the head, let the toggle breathe and stay tappable */
  .residence__head{ flex-direction:column; align-items:flex-start; }
  .seg-wrap{ width:100%; }
  .seg{ flex:1; }
  .seg__btn{ flex:1; min-width:0; padding:14px 16px; }
  .residence-shots{ gap:var(--s4); }
  #drawnbuilt .res-shot{ aspect-ratio:4/5; }

  /* Work filter: horizontal scroll beats wrapping into three ragged rows */
  .work-filter{ gap:var(--s4); overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .work-filter::-webkit-scrollbar{ display:none; }
  .work-filter__btn{ white-space:nowrap; padding-bottom:8px; }
  .work-filter__count{ margin-left:0; white-space:nowrap; }
  .work-card--offset{ transform:none; }

  /* Case study: facts two-up, captions closer */
  .cs-facts{ gap:var(--s4) var(--s5); }
  .cs-split h2{ margin-bottom:var(--s2); }
  .cs-next{ flex-direction:column; align-items:flex-start; gap:var(--s4); }

  /* Contact: full-width tappable rows */
  .chan{ padding:var(--s5) 0; }
  .chan__v{ font-size:var(--t-md); }
  .field input,.field select,.field textarea{ font-size:16px; }  /* 16px stops iOS zoom-on-focus */

  /* Footer stacks; keep the address readable */
  .footer__legal{ flex-direction:column; gap:var(--s3); }
  .footer__addr{ max-width:none; }
}

/* Tap targets: 44px minimum for anything interactive on touch devices */
@media(hover:none){
  .nav-link,.mobile-menu__sub a,.work-filter__btn,.footer__col a{ min-height:44px; display:flex; align-items:center; }
  .mobile-menu__sub a{ padding-block:6px; }
  .nav-burger{ width:48px; height:48px; }
}

/* Never allow a horizontal scrollbar, whatever the content */
html,body{ max-width:100%; overflow-x:hidden; }
img,video,figure,table{ max-width:100%; }

/* Render / Reality toggle, made deliberately hard to miss */
.seg-wrap{ gap:var(--s3); }
.seg-hint{ font-size:var(--t-xs); letter-spacing:var(--track-nav); }
#drawnbuilt .seg{ border-width:var(--bw-2); box-shadow:0 0 0 5px var(--accent-soft); }
#drawnbuilt .seg__btn{ min-width:132px; padding:16px 26px; font-size:var(--t-sm); letter-spacing:.1em; }
#drawnbuilt .seg__btn.is-active{ background:var(--accent); color:var(--ground-2); }
#drawnbuilt .seg__btn:not(.is-active):hover{ background:var(--accent-soft); }
@media(max-width:719px){ #drawnbuilt .seg__btn{ min-width:0; padding:15px 12px; } }
/* footer address links to Google Maps */
.footer__addr a{ color:inherit; transition:color var(--dur-micro) var(--ease); }
.footer__addr a:hover{ color:var(--accent); }

/* Long unbreakable strings (email, addresses) must not push a phone screen sideways */
.chan__v,.footer__col a,.footer__addr,.cred__v{ overflow-wrap:anywhere; }
@media(max-width:719px){
  /* the Google Maps CTA needs its own line under the address */
  .cred__v .cta{ display:inline-flex; margin-top:var(--s4); }
  .cs-facts{ grid-template-columns:repeat(2,1fr); }
}