/* ============================================================
   LŪMM INC: homepage
   Two themes, switched by the bulb in the header. Dark is the
   default: it is how lit fixtures read best. Every colour comes
   from a token so both themes resolve as complete sets.
   ============================================================ */
:root{
  color-scheme: dark;
  /* Lūmm palette (brand guidelines 2026). Dark is the default ground: Ink. */
  --ink:#17130F; --bone:#F1ECE1; --brass:#A7864C; --charcoal:#2C2823; --stone:#8A8378; --mist:#D8D2C6;
  /* The elements: one accent per composition */
  --ember:#B85C38; --tide:#35545B; --canopy:#3F4B34; --aurora:#5B5A82;

  --bg:var(--ink);
  --bg-2:#1E1A15;
  --surface:#25201A;
  --line:#3A342C;
  --fg:var(--bone);
  --fg-2:var(--mist);
  --fg-3:var(--stone);
  --fg-4:#B8B1A5;
  --gold:var(--brass);
  --gold-2:#C2A46B;
  --on-gold:var(--ink);
  --btn-bg:rgba(241,236,225,.03);
  --btn-bg-hover:rgba(167,134,76,.14);
  --hdr-bg:rgba(23,19,15,.9);
  --toast-bg:rgba(37,32,26,.96);
  --img-bg:#211C17;

  --ff-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* motion tokens (Emil Kowalski's curves): arrivals, on-screen moves, sheets */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);

  --gutter: clamp(20px, 5vw, 88px);
  --maxw: 1440px;
}
/* Light ground: Bone. Stone and Brass are darkened for text so captions and labels stay readable (4.5:1). */
:root[data-lumm="light"]{
  color-scheme: light;
  --bg:var(--bone);
  --bg-2:#E8E1D3;
  --surface:#F8F5EE;
  --line:var(--mist);
  --fg:var(--ink);
  --fg-2:var(--charcoal);
  --fg-3:#6A6357;
  --fg-4:#4A443B;
  --gold:#80652F;
  --gold-2:#5F4A20;
  --on-gold:var(--bone);
  --btn-bg:rgba(23,19,15,.02);
  --btn-bg-hover:rgba(167,134,76,.12);
  --hdr-bg:rgba(241,236,225,.92);
  --toast-bg:rgba(248,245,238,.97);
  --img-bg:#E3DCCE;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ff-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .45s ease, color .45s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; text-wrap:balance; }
p{ margin:0; }
/* even rag: no single-word last lines, never break inside a word */
p, li, dd, blockquote, figcaption{ text-wrap:pretty; overflow-wrap:normal; hyphens:manual; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--gold); color:var(--on-gold); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* ---------- type ---------- */
.display{
  font-family:var(--ff-display);
  font-weight:700;
  font-stretch:122%;
  line-height:0.96;
  letter-spacing:-0.005em;
  text-transform:uppercase;
}
.h-xl{ font-size:clamp(2.9rem, 9.4vw, 9.6rem); letter-spacing:0.005em; }
.h-lg{ font-size:clamp(1.9rem, 4.2vw, 4rem); }
.h-md{ font-size:clamp(1.45rem, 2.5vw, 2.3rem); }
.lede{ font-size:clamp(1.02rem,1.25vw,1.22rem); line-height:1.6; color:var(--fg-2); max-width:60ch; }
.body{ color:var(--fg-3); max-width:58ch; font-size:0.98rem; }

/* Section label, framed the way the mark frames the L: a bold bracket on the left, a thin, slightly
   shorter one on the right. ("The bracket frames the letter the way a room frames light.") */
.eyebrow{
  position:relative; display:inline-flex; align-items:center; width:max-content; max-width:100%;
  padding:.78em 1.08em .74em 1.35em; line-height:1;
  font-family:var(--ff-mono); font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before, .eyebrow::after{ content:""; position:absolute; width:.72em; border:0 solid currentColor; pointer-events:none; }
.eyebrow::before{ left:0; top:0; bottom:0; border-width:2px 0 2px 2px; }
.eyebrow::after{ right:0; top:.3em; bottom:.3em; border-width:1px 1px 1px 0; }
.eyebrow--center{ margin-inline:auto; }
.meta{
  font-family:var(--ff-mono); font-size:0.68rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--fg-3);
}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- header ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px var(--gutter);
  transition:background-color .4s ease, backdrop-filter .4s ease, padding .4s ease, transform .45s var(--ease-out);
}
/* slides away while reading down, returns on the first scroll up or when focus enters it */
.hdr.is-away{ transform:translateY(-101%); }
.hdr.is-away:focus-within{ transform:none; }
.hdr.is-stuck{ background:var(--hdr-bg); backdrop-filter:blur(14px); padding-block:13px; border-bottom:1px solid var(--line); }
/* over the photographic hero the header is always light, in either theme */
.hdr:not(.is-stuck){ --fg:var(--bone); --fg-4:var(--mist); --line:rgba(255,255,255,.22); --btn-bg:rgba(255,255,255,.05); }

.logo{ display:flex; align-items:center; gap:13px; }
.logo b{ font-family:var(--ff-display); font-size:0.95rem; letter-spacing:0.3em; font-weight:600; font-stretch:112%; color:var(--fg); }
.logo__mark{ display:block; color:var(--fg); }
.logo__mark svg{ height:28px; width:auto; display:block; }

.nav{ display:flex; gap:30px; }
.nav a{
  font-family:var(--ff-mono); font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--fg-4); padding-bottom:3px;
  background-image:linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-size:0% 1px, 0 1px;
  background-position:100% 100%, 0 100%;
  transition:background-size .34s ease, color .34s ease;
}
.nav a:hover,.nav a[aria-current]{ color:var(--fg); background-size:0% 1px, 100% 1px; }
@media (max-width:1100px){ .nav{ display:none; } }
.hdr__right{ display:flex; align-items:center; gap:16px; }
@media (max-width:640px){ .hdr__right .btn{ display:none; } }

/* ---------- the bulb: theme switch ---------- */
.bulb{
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); background:var(--btn-bg);
  transition:border-color .4s ease, background-color .4s ease;
}
.bulb:hover{ border-color:var(--gold); }
.bulb svg{ width:22px; height:24px; overflow:visible; }
.bulb g{ stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.bulb .glass{ fill:transparent; transition:fill .45s ease, stroke .45s ease; }
.bulb .fil{ opacity:.45; transition:opacity .45s ease, stroke .45s ease; }
.bulb .rays{ opacity:0; transform:scale(.72); transform-origin:12px 11px; transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.5,1); }
/* lights on */
:root[data-lumm="light"] .bulb{ color:var(--gold); }
:root[data-lumm="light"] .bulb .glass{ fill:rgba(167,134,76,.22); }
:root[data-lumm="light"] .bulb .fil{ opacity:1; }
:root[data-lumm="light"] .bulb .rays{ opacity:1; transform:scale(1); }

/* ---------- buttons ---------- */
/* Buttons: quiet, rectangular, no arrows. Primary is a solid block of the text colour (Bone on Ink,
   Ink on Bone) that turns Brass on hover. Secondary is a hairline that warms on hover. */
.btn{
  --btn-fill:var(--fg); --btn-text:var(--bg);
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px 0 calc(28px + .16em);
  border:1px solid color-mix(in srgb, var(--fg) 34%, transparent); background:transparent; color:var(--fg);
  font-family:var(--ff-mono); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; white-space:nowrap;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .14s var(--ease-out);
}
.btn:hover{ border-color:var(--brass); background:color-mix(in srgb, var(--brass) 14%, transparent); }
.btn:active{ transform:scale(.97); }
.btn--solid{ background:var(--btn-fill); border-color:var(--btn-fill); color:var(--btn-text); }
.btn--solid:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } .btn:active{ transform:none; } }

.tlink{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  font-family:var(--ff-mono); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--fg); padding-bottom:4px;
  background-image:linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-size:0% 1px, 100% 1px;
  background-position:100% 100%, 0 100%;
  transition:background-size .34s ease, color .3s ease;
}
.tlink:hover{ color:var(--gold); background-size:100% 1px, 0% 1px; }

/* ---------- image wrapper ---------- */
.gl{ position:relative; overflow:hidden; background:var(--img-bg); }
.gl img{ width:100%; height:100%; object-fit:cover; }
/* linked images answer a hover with a slow, slight zoom; plain photographs stay still */
a .gl img{ transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
a:hover .gl img, a:focus-visible .gl img{ transform:scale(1.035); }
@media (prefers-reduced-motion: reduce){ a .gl img{ transition:none; } a:hover .gl img, a:focus-visible .gl img{ transform:none; } }

/* ---------- hero: photographic, so it stays dark in both themes ---------- */
/* the hero fills the whole screen, edge to edge and top to bottom */
.hero{ position:relative; height:100vh; height:100svh; min-height:620px; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:clamp(112px,15vh,156px); background:var(--ink); }
.hero__bg{ position:absolute; inset:-8% 0; }
.hero__bg .gl{ width:100%; height:100%; background:var(--ink); }
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(23,19,15,0) 0%, rgba(23,19,15,.42) 55%, rgba(23,19,15,.86) 100%),
    linear-gradient(180deg, rgba(23,19,15,.66) 0%, rgba(23,19,15,.14) 34%, rgba(23,19,15,.92) 100%);
}
.hero__inner{ position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); color:var(--bone); }
/* the brand line as the site's main heading: big, but a sentence, so it wraps to two or three lines */
/* the site's main heading: who Lūmm is, in one sentence set large, balanced across two or three lines */
.hero__title{ font-size:clamp(2.9rem, 6.6vw, 7rem); line-height:.98; letter-spacing:-0.02em; max-width:15ch; text-wrap:balance; }
.hero__title .l{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hero__title .l>span{ display:block; }
.hero__sub{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px; margin-top:20px;
  font-family:var(--ff-mono); font-size:clamp(.62rem,1vw,.76rem); letter-spacing:0.32em;
  text-transform:uppercase; color:var(--mist);
}
.hero__sub b{ font-weight:400; color:var(--brass); }
.hero__row{ display:flex; flex-wrap:wrap; gap:40px; align-items:flex-end; justify-content:space-between; margin-top:44px; }
.hero__lede{ max-width:44ch; color:#CBC4B7; font-size:1rem; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__cta .btn{ --fg:var(--bone); --btn-fill:var(--bone); --btn-text:var(--ink); }

/* ---------- sections ---------- */
.sec{ padding-block:clamp(72px,11vh,150px); position:relative; }
.sec--tight{ padding-block:clamp(56px,8vh,110px); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(28px,6vw,96px); align-items:center; }
@media (max-width:920px){ .split{ grid-template-columns:1fr; } }
.stack{ display:flex; flex-direction:column; gap:22px; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,24px); }
.pair .gl{ aspect-ratio:4/5; }
.pair .gl:first-child{ margin-top:clamp(20px,5vw,64px); }

/* ---------- band: a cinematic pause between sections ---------- */
.band{ position:relative; height:clamp(340px,68vh,720px); margin:0; overflow:hidden; background:var(--ink); }
.band .gl{ position:absolute; inset:-14% 0; }
/* light it yourself: a soft spotlight follows the pointer and the rest of the band dims (fine pointers only) */
.band__light{
  position:absolute; left:0; top:0; z-index:1; width:220vmax; height:220vmax; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(23,19,15,0) 0, rgba(23,19,15,0) 7%, rgba(23,19,15,.6) 22%, rgba(23,19,15,.62) 100%);
  opacity:0; transition:opacity .6s var(--ease-out); will-change:transform;
}
.band.is-lit .band__light{ opacity:1; }
/* the caption sits on a dark ground so it always reads, whatever the image */
.band__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(23,19,15,.82) 0%, rgba(23,19,15,.4) 26%, rgba(23,19,15,0) 54%); }
.band__cap{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(26px,5vh,52px); z-index:1; margin:0;
  display:grid; gap:10px; justify-items:start; color:var(--bone);
}
.band__title{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:300; font-size:clamp(1.9rem,3.4vw,3.2rem); line-height:1.02; max-width:22ch; text-wrap:balance; }
.band__meta{ font-family:var(--ff-body); font-weight:600; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); }
.band__link{ margin-top:6px; color:var(--bone); }

/* ---------- recent projects: centred ---------- */
.projects{ background:var(--bg-2); border-block:1px solid var(--line); }
.projects__head{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding-bottom:clamp(40px,6vh,66px); }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,34px); }
@media (max-width:900px){ .grid3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid3{ grid-template-columns:1fr; } }
.card{ color:inherit; display:flex; flex-direction:column; }
.card .gl{ aspect-ratio:4/5; }
.card__ft{ display:grid; gap:9px; padding-top:16px; border-top:1px solid var(--line); margin-top:16px; }
.card__ttl{
  font-family:var(--ff-display); font-weight:700; font-stretch:118%;
  font-size:clamp(1rem,1.35vw,1.35rem); text-transform:uppercase; line-height:1.08;
  letter-spacing:0.005em; color:var(--fg); transition:color .35s ease;
}
.card:hover .card__ttl{ color:var(--gold); }
.card__cat{ line-height:1.7; }
.projects__foot{ display:flex; justify-content:center; padding-top:clamp(36px,5vh,58px); }
.projects__foot .tlink{ align-self:center; }

/* ---------- how we work ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1000px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--bg); padding:30px 26px 34px; display:flex; flex-direction:column; gap:12px; transition:background-color .45s ease; }
.step:hover{ background:var(--surface); }
.step__n{ font-family:var(--ff-mono); font-size:0.66rem; letter-spacing:0.24em; color:var(--gold); }
.step h3{ font-family:var(--ff-display); font-weight:700; font-stretch:115%; font-size:1.02rem; text-transform:uppercase; letter-spacing:0.02em; line-height:1.25; color:var(--fg); }
.step p{ color:var(--fg-3); font-size:0.9rem; line-height:1.6; }

/* ---------- story ---------- */
.founder{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(26px,4vw,64px); align-items:center; }
@media (max-width:760px){ .founder{ grid-template-columns:1fr; } }
.founder .gl{ aspect-ratio:1/1; }
.voice blockquote{ margin:0; font-weight:300; font-size:clamp(1.06rem,1.4vw,1.34rem); line-height:1.55; color:var(--fg-2); }
.voice footer{ margin-top:16px; display:flex; gap:12px; align-items:center; }
.voice footer i{ width:22px; height:1px; background:var(--gold); display:block; flex:none; }

/* ---------- closing ---------- */
.cta{ background:var(--bg-2); border-top:1px solid var(--line); }
.cta__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,90px); align-items:end; }
@media (max-width:900px){ .cta__grid{ grid-template-columns:1fr; align-items:start; } }
.dl{ display:grid; gap:20px; margin:0; }
.dl div{ border-top:1px solid var(--line); padding-top:14px; }
.dl dt{ font-family:var(--ff-mono); font-size:0.64rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--fg-3); }
.dl dd{ margin:6px 0 0; font-size:1rem; color:var(--fg-2); }

/* ---------- footer ---------- */
.ftr{ background:var(--bg); border-top:1px solid var(--line); padding-block:clamp(50px,8vh,90px) 30px; }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,4vw,60px); }
@media (max-width:860px){ .ftr__top{ grid-template-columns:1fr 1fr; } }
.ftr .ftr__h{ font-family:var(--ff-mono); font-size:0.64rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ftr a{ color:var(--fg-4); transition:color .3s; font-size:0.92rem; }
.ftr a:hover{ color:var(--fg); }
.tagline{ display:block; color:var(--fg-2); font-weight:300; font-size:clamp(1.35rem,1.8vw,1.6rem); line-height:1.2; max-width:22ch; }
.ftr__btm{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:clamp(40px,6vh,70px); padding-top:22px; }


@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

[hidden]{ display:none !important; }

/* ============================================================
   INNER PAGES: built on the homepage tokens above
   ============================================================ */

/* ---------- page hero: dark in both themes, like the home hero ---------- */
.phero{
  position:relative; background:var(--ink); color:var(--bone); overflow:hidden;
  padding-block:clamp(128px,18vh,190px) clamp(48px,8vh,96px);
}
.phero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px; background:rgba(255,255,255,.1);
}
.phero__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,6vw,100px); align-items:end;
}
.phero--text .phero__grid{ grid-template-columns:minmax(0,1fr); }
/* full-bleed inner hero: a room photograph behind the text, which sits bottom-left on a soft dark gradient */
.phero--image{ min-height:clamp(560px,78vh,840px); display:flex; align-items:flex-end; }
.phero--image > .phero__grid{ position:relative; z-index:2; width:100%; grid-template-columns:minmax(0,1fr); }
.phero--image > .phero__grid > div{ max-width:min(100%, 980px); }
.phero__bg{ position:absolute; inset:0; overflow:hidden; background:var(--ink); }
.phero__bg .gl{ position:absolute; inset:0; background:var(--ink); }
.phero__bg img{ width:100%; height:100%; object-fit:cover; }
.phero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(23,19,15,.88) 0%, rgba(23,19,15,.62) 38%, rgba(23,19,15,.12) 78%),
    linear-gradient(0deg, rgba(23,19,15,.9) 0%, rgba(23,19,15,0) 52%),
    linear-gradient(180deg, rgba(23,19,15,.55) 0%, rgba(23,19,15,0) 22%); }
/* the picture settles into place as the page opens */
.has-motion .phero__bg img{ animation:phero-settle 2.4s var(--ease-out) both; }
@keyframes phero-settle{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
@media (max-width:640px){ .phero--image{ min-height:clamp(520px,82vh,720px); } }
@media (max-width:900px){ .phero__grid{ grid-template-columns:1fr; } }
.phero .eyebrow{ color:var(--brass); }
.phero h1{ margin-top:22px; }
.h-page{ font-size:clamp(2.6rem, 7.2vw, 7.2rem); }
.phero__lede{ margin-top:26px; max-width:48ch; color:#CBC4B7; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.65; }
.phero__media .gl{ aspect-ratio:5/4; background:#211C17; }
.phero__crumbs{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:34px;
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone);
}
.phero__crumbs a{ color:var(--mist); transition:color .3s; }
.phero__crumbs a:hover{ color:#C2A46B; }

/* ---------- facts strip ---------- */
.facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line); }
@media (max-width:860px){ .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.facts div{ padding:26px clamp(14px,2vw,28px) 28px; border-left:1px solid var(--line); display:grid; gap:8px; align-content:start; }
.facts div:first-child{ border-left:0; padding-left:0; }
@media (max-width:860px){
  .facts div:nth-child(3){ border-left:0; padding-left:0; }
  .facts div:nth-child(n+3){ border-top:1px solid var(--line); }
}
.facts dt{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3); }
.facts dd{
  margin:0; font-family:var(--ff-display); font-weight:700; font-stretch:118%; text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.8rem); line-height:1.05; color:var(--fg);
}

/* ---------- principles (not a sequence, so no numbers) ---------- */
.principles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(26px,4vw,60px); }
@media (max-width:860px){ .principles{ grid-template-columns:1fr; } }
.principle{ display:grid; gap:14px; align-content:start; padding-top:22px; border-top:1px solid var(--gold); }
.principle h3{ font-family:var(--ff-display); font-weight:700; font-stretch:115%; text-transform:uppercase; font-size:1.1rem; letter-spacing:.02em; color:var(--fg); }
.principle p{ color:var(--fg-3); font-size:.95rem; }

/* ---------- founder, long form ---------- */
.bio{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,6vw,100px); align-items:start; }
@media (max-width:860px){ .bio{ grid-template-columns:1fr; } }
.bio__media{ position:sticky; top:110px; display:grid; gap:14px; }
@media (max-width:860px){ .bio__media{ position:static; } }
.bio__media .gl{ aspect-ratio:760/673; }
.bio__text{ display:grid; gap:22px; }
.bio__text .body{ max-width:62ch; }
.pull{
  margin:0; padding:0; border:0;
  font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.45; color:var(--fg-2); font-weight:300; max-width:34ch;
}

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:860px){ .quotes{ grid-template-columns:1fr; } }
.quote{ background:var(--bg); margin:0; padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; gap:26px; justify-content:space-between; transition:background-color .45s ease; }
.quote blockquote{ margin:0; font-size:clamp(1.02rem,1.3vw,1.2rem); line-height:1.6; color:var(--fg-2); }
.quote blockquote::before{ content:"“"; display:block; font-family:var(--ff-display); font-weight:700; font-size:3.4rem; line-height:.6; color:var(--gold); margin-bottom:14px; }
.quote figcaption{ display:grid; gap:4px; }
.quote figcaption b{ font-family:var(--ff-display); font-weight:700; font-stretch:115%; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; color:var(--fg); }

/* ---------- services list ---------- */
.svc{ border-top:1px solid var(--line); }
.svc__row{
  display:grid; grid-template-columns:70px minmax(0,1fr) minmax(0,1.05fr) minmax(0,.9fr);
  gap:clamp(18px,3vw,48px); padding-block:clamp(30px,5vh,52px); border-bottom:1px solid var(--line);
  align-items:start;
}
@media (max-width:1100px){ .svc__row{ grid-template-columns:56px minmax(0,1fr) minmax(0,1.2fr); } .svc__list{ grid-column:2 / -1; } }
@media (max-width:640px){ .svc__row{ grid-template-columns:1fr; gap:14px; } .svc__list{ grid-column:auto; } }
.svc__n{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.24em; color:var(--gold); padding-top:8px; }
.svc__row h3{
  font-family:var(--ff-display); font-weight:700; font-stretch:118%; text-transform:uppercase;
  font-size:clamp(1.3rem,2.1vw,2rem); line-height:1.02; color:var(--fg); transition:color .35s ease;
}
.svc__row:hover h3{ color:var(--gold); }
.svc__row p{ color:var(--fg-3); font-size:.98rem; max-width:52ch; }
.svc__list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.svc__list li{
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4);
  padding:9px 0; border-bottom:1px dashed var(--line);
}
.svc__list li:first-child{ padding-top:4px; }
.marks{ display:flex; flex-wrap:wrap; gap:8px; }
.marks li{
  border:1px solid var(--line); padding:7px 11px; border-bottom-style:solid;
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; color:var(--fg-2);
}
.marks li:first-child{ padding-top:7px; }

/* ---------- who we work with ---------- */
.clients{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px); }
@media (max-width:900px){ .clients{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .clients{ grid-template-columns:1fr; } }
.client{ display:grid; gap:10px; align-content:start; }
.client h3{ font-family:var(--ff-display); font-weight:700; font-stretch:115%; text-transform:uppercase; font-size:1rem; letter-spacing:.03em; color:var(--fg); }
.client p{ color:var(--fg-3); font-size:.92rem; }

/* ---------- projects index ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); padding:10px 15px;
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-4);
  background:var(--btn-bg); transition:border-color .3s, color .3s, background-color .3s;
}
.chip sup{ font-size:.58rem; color:var(--fg-3); letter-spacing:0; top:0; }
.chip:hover{ border-color:var(--gold); color:var(--fg); }
.chip[aria-pressed="true"]{ border-color:var(--gold); color:var(--fg); background:var(--btn-bg-hover); }
.chip[aria-pressed="true"] sup{ color:var(--gold); }

.plist{ display:grid; gap:clamp(56px,9vh,120px); }
.prow{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(26px,5vw,80px); align-items:center; color:inherit; }
.prow:nth-child(even){ grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
.prow:nth-child(even) .prow__media{ order:2; }
@media (max-width:860px){
  .prow, .prow:nth-child(even){ grid-template-columns:1fr; }
  .prow:nth-child(even) .prow__media{ order:0; }
}
.prow__media .gl{ aspect-ratio:4/3; }
.prow__text{ display:grid; gap:20px; align-content:center; }
.prow__idx{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.24em; color:var(--gold); }
.prow__ttl{ transition:color .35s ease; }
.prow:hover .prow__ttl{ color:var(--gold); }
.prow .dl{ gap:12px; }
.prow .dl div{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding-top:11px; align-items:baseline; }
.prow .dl dd{ margin:0; font-size:.94rem; }
.prow .tlink{ margin-top:6px; }
.prow[hidden]{ display:none !important; }

/* ---------- project detail ---------- */
.pd{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(30px,6vw,110px); align-items:start; }
@media (max-width:900px){ .pd{ grid-template-columns:1fr; } }
.pd__aside{ position:sticky; top:110px; }
@media (max-width:900px){ .pd__aside{ position:static; } }
.pd__aside .dl dd{ font-size:.94rem; line-height:1.55; }
.pd__body{ display:grid; gap:clamp(34px,5vh,56px); }
.ticks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(18px,3vw,40px); }
@media (max-width:600px){ .ticks{ grid-template-columns:1fr; } }
.ticks li{ padding:14px 0; border-top:1px solid var(--line); color:var(--fg-2); font-size:.96rem; line-height:1.55; display:grid; grid-template-columns:6px 1fr; gap:16px; align-items:start; }
/* bullet: a small square in the project's element colour (one accent per composition), Brass when none is set */
.ticks li::before{ content:""; width:6px; height:6px; background:var(--el, var(--brass)); transform:translateY(.62em); }

.gallery{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(10px,1.4vw,20px); }
.gallery .gl{ aspect-ratio:4/3; }
.g-3{ grid-column:span 3; } .g-2{ grid-column:span 2; } .g-4{ grid-column:span 4; } .g-6{ grid-column:span 6; }
.g-6.gl{ aspect-ratio:21/9; }
.g-2.gl{ aspect-ratio:4/5; }
.g-4.gl{ aspect-ratio:8/5; }
@media (max-width:700px){
  .gallery{ grid-template-columns:1fr 1fr; }
  .g-2,.g-3{ grid-column:span 1; } .g-4,.g-6{ grid-column:span 2; }
  .g-3.gl,.g-2.gl{ aspect-ratio:4/5; } .g-4.gl{ aspect-ratio:4/3; }
}
.gallery__note{ margin-top:16px; }

.pnav{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; border-top:1px solid var(--line); padding-top:30px; }
.pnav a{ display:grid; gap:8px; color:inherit; }
.pnav a:last-child{ text-align:right; justify-items:end; }
.pnav b{ font-family:var(--ff-display); font-weight:700; font-stretch:118%; text-transform:uppercase; font-size:clamp(.95rem,1.8vw,1.5rem); line-height:1.05; color:var(--fg); transition:color .35s; }
.pnav a:hover b{ color:var(--gold); }
.pnav .grid-ico{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); transition:border-color .3s; justify-self:center; text-align:center; }
.pnav .grid-ico:hover{ border-color:var(--gold); }
@media (max-width:560px){ .pnav{ grid-template-columns:1fr 1fr; } .pnav .grid-ico{ display:none; } }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(36px,7vw,120px); align-items:start; }
@media (max-width:920px){ .contact{ grid-template-columns:1fr; } }
.form{ display:grid; gap:30px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:30px clamp(18px,3vw,36px); }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:8px; min-width:0; }
.field label, .field legend{
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3); padding:0;
}
.field label i, .field legend i{ font-style:normal; color:var(--gold); }
.field input, .field select, .field textarea{
  width:100%; min-width:0; font:inherit; font-weight:300; font-size:1.02rem; color:var(--fg);
  background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:10px 0 12px; transition:border-color .3s ease;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:28px;
}
.field select option{ background:var(--surface); color:var(--fg); }
.field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field input::placeholder, .field textarea::placeholder{ color:var(--fg-3); opacity:.7; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--gold); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ box-shadow:0 1px 0 0 var(--gold); }
.field [aria-invalid="true"]{ border-bottom-color:#D0664F; }
.field__err{ font-size:.82rem; color:#D0664F; min-height:0; }
.field__err:empty{ display:none; }
fieldset.field{ border:0; margin:0; padding:0; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.opt span{
  display:block; border:1px solid var(--line); padding:10px 14px;
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-4);
  transition:border-color .3s, color .3s, background-color .3s;
}
.opt input:hover + span{ border-color:var(--gold); }
.opt input:checked + span{ border-color:var(--gold); color:var(--fg); background:var(--btn-bg-hover); }
.opt input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:3px; }
.form__foot{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.form__foot .meta{ max-width:40ch; line-height:1.7; }
.form__ok{
  border:1px solid var(--gold); background:var(--btn-bg-hover); padding:22px 24px; display:grid; gap:8px;
}
.form__ok b{ font-family:var(--ff-display); font-weight:700; font-stretch:115%; text-transform:uppercase; color:var(--fg); letter-spacing:.02em; }
.form__ok p{ color:var(--fg-2); }

.aside{ display:grid; gap:44px; }
.next{ list-style:none; margin:0; padding:0; counter-reset:n; display:grid; }
.next li{ counter-increment:n; display:grid; grid-template-columns:44px 1fr; gap:6px 12px; padding:16px 0; border-top:1px solid var(--line); }
.next li::before{ content:counter(n,decimal-leading-zero); font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.2em; color:var(--gold); padding-top:4px; grid-row:span 2; }
.next b{ font-family:var(--ff-display); font-weight:700; font-stretch:115%; text-transform:uppercase; font-size:.92rem; letter-spacing:.03em; color:var(--fg); }
.next p{ color:var(--fg-3); font-size:.9rem; }
.todo{ color:var(--fg-3); font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.04em; }

/* ---------- misc ---------- */
.sec-head{ display:grid; gap:16px; margin-bottom:clamp(34px,5vh,60px); }
.sec-head--row{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; }
.sec-head--row > div:not(.filters){ display:grid; gap:16px; }
.muted{ background:var(--bg-2); border-block:1px solid var(--line); }

/* bundle preview: toast for pages that are out of scope */
#soon{
  position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); z-index:60;
  background:var(--toast-bg); border:1px solid var(--line); color:var(--fg-2);
  padding:12px 18px; font-family:var(--ff-mono); font-size:0.66rem; letter-spacing:0.18em;
  text-transform:uppercase; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
#soon.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- projects update (Oct 2026) ---------- */
.tag{ display:inline-flex; align-items:center; gap:8px; width:max-content; padding:6px 10px; border:1px solid var(--gold); font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.prow__top{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; }
.credit{ margin-top:18px; color:var(--fg-3); }
.gl--plate{ background:var(--bone); }
.gl--plate img{ object-fit:contain; }
.gallery .gl.g-tall{ aspect-ratio:3/4; }
.dl--2{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(18px,3vw,40px); }
@media (max-width:600px){ .dl--2{ grid-template-columns:1fr; } }
.studio-sec + .studio-sec{ border-top:1px solid var(--line); }
.studio-intro{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,5vw,80px); align-items:start; margin-bottom:clamp(34px,5vh,60px); }
@media (max-width:900px){ .studio-intro{ grid-template-columns:1fr; } }
.studio-intro .stack{ display:grid; gap:18px; }
.variants{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); margin-top:clamp(26px,4vh,44px); }
@media (max-width:700px){ .variants{ grid-template-columns:1fr; } }
.variant{ display:grid; gap:14px; align-content:start; }
.variant .gl{ aspect-ratio:4/5; }
.variant h3{ font-family:var(--ff-display); font-weight:600; font-size:1.05rem; letter-spacing:-.02em; color:var(--fg); }
.variant .dl{ gap:10px; }
.variant .dl div{ display:grid; grid-template-columns:96px 1fr; gap:10px; padding-top:9px; }
.variant .dl dd{ margin:0; font-size:.9rem; }
.card__idx{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.22em; color:var(--gold); }

/* ============================================================
   TYPOGRAPHY (brand guidelines 2026)
   Loaded last so it overrides the earlier Archivo / Plex Mono rules.

   Display       Cormorant Garamond Light 300: page titles, big statements
   Section       Cormorant Garamond Medium 500: section and card headings
   Wordmark,     Cormorant Garamond
   pull quotes
   Labels        Inter SemiBold 600, tracked caps
   Body          Inter Regular 400
   ============================================================ */
:root{
  --ff-display:"Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --ff-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono:var(--ff-body);
}

body{ font-family:var(--ff-body); font-weight:400; font-size:16px; line-height:1.7; font-feature-settings:"cv11","ss01"; }

/* Every Cormorant element: reset Inter's stylistic sets, which would swap Cormorant glyphs */
.display, .card__ttl, .step h3, .principle h3, .client h3, .svc__row h3, .pnav b, .next b, .form__ok b,
.facts dd, .pull, .voice blockquote, .quote blockquote::before, .logo b, .el__name, .tagline{
  font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-stretch:normal; text-transform:none;
}

/* ---------- display: Light, generous size, tight leading ---------- */
.display{ font-weight:300; line-height:1; letter-spacing:-0.012em; }
.h-xl{ font-size:clamp(3.8rem, 11.5vw, 11.5rem); letter-spacing:-0.02em; line-height:.9; }
.h-page{ font-size:clamp(3rem, 7.8vw, 7.6rem); letter-spacing:-0.02em; line-height:.96; }
.h-lg{ font-size:clamp(2.4rem, 5vw, 4.8rem); line-height:1.02; }
/* section headings: Medium */
.h-md{ font-size:clamp(1.9rem, 3.1vw, 2.9rem); font-weight:500; letter-spacing:-0.01em; line-height:1.08; }

/* ---------- section-level headings: Medium ---------- */
.card__ttl, .step h3, .principle h3, .client h3, .svc__row h3, .pnav b, .next b, .form__ok b, .facts dd{
  font-weight:500; letter-spacing:-0.005em; line-height:1.12;
}
.card__ttl{ font-size:clamp(1.5rem,2vw,1.8rem); }
.step h3{ font-size:1.45rem; }
.principle h3{ font-size:1.6rem; }
.client h3{ font-size:1.45rem; }
.svc__row h3{ font-size:clamp(1.8rem,2.7vw,2.5rem); line-height:1.06; }
.pnav b{ font-size:clamp(1.35rem,2.3vw,2rem); }
.next b{ font-size:1.3rem; }
.form__ok b{ font-size:1.7rem; }
.facts dd{ font-size:clamp(1.6rem,2.3vw,2.25rem); font-weight:300; line-height:1.05; }

/* ---------- pull quotes: Cormorant Light, a change of voice ---------- */
.pull, .voice blockquote{
  font-style:normal; font-weight:300;
  font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.28; letter-spacing:-0.005em; color:var(--fg-2);
}
.quote blockquote{ font-weight:400; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.7; }
.quote blockquote::before{ font-weight:500; font-size:4.2rem; line-height:.6; }

/* ---------- body text: Inter Regular ---------- */
.lede, .phero__lede, .hero__lede{ font-family:var(--ff-body); font-weight:400; }
.lede{ font-size:clamp(1.06rem,1.25vw,1.22rem); line-height:1.65; letter-spacing:-0.01em; }
.body, .principle p, .client p, .step p, .svc__row p, .next p, .form__ok p{ font-weight:400; }
.body{ font-size:1rem; line-height:1.75; }
.field input, .field select, .field textarea{ font-family:var(--ff-body); font-weight:400; }

/* ---------- labels, nav, buttons, meta: Inter SemiBold, tracked caps ---------- */
.eyebrow, .meta, .nav a, .btn, .tlink, .hero__sub, .step__n, .dl dt, .ftr .ftr__h,
.phero__crumbs, .facts dt, .svc__n, .svc__list li, .marks li, .chip, .prow__idx,
.field label, .field legend, .opt span, .next li::before, .todo, #soon, .quote figcaption b, .el__words{
  font-family:var(--ff-body); font-weight:600; font-stretch:normal;
}
.eyebrow{ font-size:.66rem; letter-spacing:.24em; }
.meta{ font-size:.68rem; letter-spacing:.12em; }
.nav a{ font-size:.7rem; letter-spacing:.16em; }
.btn, .tlink{ font-size:.7rem; letter-spacing:.16em; }
.dl dt, .facts dt, .ftr .ftr__h, .phero__crumbs, .field label, .field legend{ font-size:.66rem; letter-spacing:.18em; }
.step__n, .svc__n, .prow__idx, .next li::before{ font-variant-numeric:tabular-nums; letter-spacing:.16em; }
.svc__list li, .opt span, .chip{ font-size:.68rem; letter-spacing:.12em; }
.marks li{ letter-spacing:.05em; }
.quote figcaption b{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
.hero__sub{ letter-spacing:.24em; }
.hero__sub b{ font-weight:600; }
.todo{ font-size:.9rem; letter-spacing:0; font-weight:400; }

/* ---------- wordmark: Cormorant Garamond, always "Lūmm" ---------- */
.logo b{ font-weight:500; font-size:1.55rem; letter-spacing:.01em; line-height:1; }
.ftr .logo b{ font-size:1.9rem; }

/* ============================================================
   THE NATURE SYSTEM
   Four elements, one accent per composition. --el is set inline
   to one of --ember, --tide, --canopy, --aurora.
   ============================================================ */
.elements{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px); margin-top:clamp(34px,6vh,64px); }
@media (max-width:980px){ .elements{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .elements{ grid-template-columns:1fr; } .el__sw{ aspect-ratio:3/1; } }
.el{ display:flex; flex-direction:column; gap:10px; }
.el__sw{ display:block; aspect-ratio:16/9; background:var(--el); box-shadow:inset 0 0 0 1px rgba(241,236,225,.08); margin-bottom:14px; }
.el__name{ font-weight:300; font-size:clamp(2rem,2.8vw,2.6rem); line-height:1; letter-spacing:-0.01em; color:var(--fg); }
.el__words{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg); }
.el__words--muted{ color:var(--fg-3); }
.el .body{ font-size:.95rem; }

/* on a project page: one element beside the details */
.el--card{ gap:8px; padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.el--card .el__sw{ aspect-ratio:auto; width:44px; height:44px; margin-bottom:8px; }
.el--card .el__name{ font-size:clamp(2.2rem,3vw,2.8rem); }

/* small label used on cards, lists and studio pieces */
.el-tag{ display:inline-flex; align-items:center; gap:9px; width:max-content; font-family:var(--ff-body); font-weight:600; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2); }
.el-tag i{ width:10px; height:10px; background:var(--el); box-shadow:inset 0 0 0 1px rgba(241,236,225,.14); flex:none; }
.card__ft .el-tag{ margin-bottom:8px; }

/* header button matches the 44px theme switch beside it */
.btn--hdr{ min-height:44px; padding:0 20px 0 calc(20px + .16em); }

/* ============================================================
   HOW WE WORK: one stage at a time
   The active stage is framed by the brand bracket.
   ============================================================ */
.proc{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr); gap:clamp(28px,5vw,88px); align-items:start; }
.proc__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.proc__tab{
  position:relative; width:100%; display:grid; grid-template-columns:2.6rem 1fr; align-items:baseline; gap:10px;
  padding:16px 22px 16px 22px; text-align:left; color:var(--fg-3);
  transition:color .25s ease;
}
.proc__tab::before, .proc__tab::after{ content:""; position:absolute; width:14px; border:0 solid var(--brass); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.proc__tab::before{ left:0; top:0; bottom:0; border-width:2px 0 2px 2px; }
.proc__tab::after{ right:0; top:6px; bottom:6px; border-width:1px 1px 1px 0; }
.proc__tab:hover{ color:var(--fg-2); }
.proc__tab[aria-selected="true"]{ color:var(--fg); }
.proc__tab[aria-selected="true"]::before, .proc__tab[aria-selected="true"]::after{ opacity:1; }
.proc__tab:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.proc__n{ font-family:var(--ff-body); font-weight:600; font-size:.68rem; letter-spacing:.16em; font-variant-numeric:tabular-nums; color:var(--brass); }
.proc__t{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:clamp(1.35rem,1.9vw,1.75rem); line-height:1.15; }

.proc__panels{ display:grid; }
.proc__panel{ grid-area:1/1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(22px,3vw,44px); align-items:start; outline:none; }
.proc__media{ aspect-ratio:4/5; }
.proc__media img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.proc__copy{ display:grid; gap:16px; align-content:start; }
.proc__count{ font-family:var(--ff-body); font-weight:600; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); }
.proc__h{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:300; font-size:clamp(2.1rem,3.2vw,3rem); line-height:1.02; color:var(--fg); }
.proc__items{ list-style:none; margin:6px 0 0; padding:0; display:grid; }
.proc__items li{ padding:10px 0; border-top:1px solid var(--line); font-size:.92rem; color:var(--fg-2); }
.proc__items li:last-child{ border-bottom:1px solid var(--line); }

/* once the script is running, one stage shows at a time and the others crossfade out */
.proc.is-ready .proc__panel{ opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
.proc.is-ready .proc__panel.is-on{ opacity:1; visibility:visible; transition:opacity .45s ease; }
.proc.is-ready .proc__panel:not(.is-on) .proc__media img{ transform:scale(1.04); }
/* without the script: every stage in sequence, no list */
.proc:not(.is-ready){ grid-template-columns:1fr; }
.proc:not(.is-ready) .proc__list{ display:none; }
.proc:not(.is-ready) .proc__panels{ gap:56px; }
.proc:not(.is-ready) .proc__panel{ grid-area:auto; }

@media (max-width:1100px){ .proc__panel{ grid-template-columns:1fr; } .proc__media{ aspect-ratio:16/10; } }
@media (max-width:860px){
  .proc{ grid-template-columns:1fr; gap:26px; }
  .proc__list{ display:flex; gap:4px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none; }
  .proc__list::-webkit-scrollbar{ display:none; }
  .proc__list li{ scroll-snap-align:center; flex:none; }
  .proc__tab{ width:auto; grid-template-columns:auto auto; padding:12px 18px; white-space:nowrap; }
  .proc__t{ font-size:1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .proc.is-ready .proc__panel, .proc.is-ready .proc__panel.is-on, .proc__media img, .proc__tab, .proc__tab::before, .proc__tab::after{ transition:none; }
  .proc.is-ready .proc__panel:not(.is-on) .proc__media img{ transform:none; }
}

/* ============================================================
   ABOUT: one story in five chapters
   ============================================================ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.chap__grid{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:start; }
.chap__rail{ position:sticky; top:110px; display:grid; gap:10px; }
.chap__n{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:300; font-size:clamp(3.2rem,5vw,4.6rem); line-height:.8; color:var(--brass); font-variant-numeric:lining-nums; }
.chap__name{ font-family:var(--ff-body); font-weight:600; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); }
.chap__body{ display:grid; gap:clamp(28px,4vh,48px); min-width:0; }
.chap__body > .h-lg{ max-width:18ch; }
@media (max-width:860px){
  .chap__grid{ grid-template-columns:1fr; gap:18px; }
  .chap__rail{ position:static; grid-auto-flow:column; justify-content:start; align-items:end; gap:16px; }
  .chap__n{ font-size:3rem; }
}

/* chapter 1 */
.idea{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,64px); align-items:start; }
.idea .lede{ max-width:56ch; }
.idea__img{ aspect-ratio:4/5; }
.idea__pull{ max-width:30ch; padding-top:clamp(18px,3vh,30px); border-top:1px solid var(--line); }
@media (max-width:860px){ .idea{ grid-template-columns:1fr; } .idea__img{ aspect-ratio:4/3; } }

/* chapter 2 */
.maker{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(24px,4vw,64px); align-items:start; }
.maker__media{ margin:0; display:grid; gap:12px; }
.maker__media .gl{ aspect-ratio:4/5; }
@media (max-width:860px){ .maker{ grid-template-columns:1fr; } .maker__media{ max-width:420px; } }

/* chapter 3 */
.method{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px); align-items:start; }
.mini-els{ list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.mini-els li{ display:grid; grid-template-columns:28px 1fr; column-gap:14px; align-items:center; }
.mini-els i{ grid-row:span 2; width:28px; height:28px; background:var(--el); box-shadow:inset 0 0 0 1px rgba(241,236,225,.1); }
.mini-els b{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:1.45rem; line-height:1.05; color:var(--fg); }
.mini-els span{ font-weight:600; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); }
@media (max-width:860px){ .method{ grid-template-columns:1fr; } }

/* chapter 4: pillars as rows, like a specification */
.pillars{ margin:0; display:grid; border-bottom:1px solid var(--line); }
.pillars div{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(14px,3vw,48px); padding:clamp(18px,2.6vh,26px) 0; border-top:1px solid var(--line); align-items:baseline; }
.pillars dt{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:clamp(1.45rem,2.1vw,1.9rem); line-height:1.1; color:var(--fg); }
.pillars dd{ margin:0; color:var(--fg-2); max-width:56ch; }
@media (max-width:640px){ .pillars div{ grid-template-columns:1fr; gap:6px; } }

/* chapter 5 */
.testis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,64px); }
.testi{ margin:0; display:grid; gap:20px; align-content:start; padding-top:22px; border-top:1px solid var(--line); }
.testi blockquote{ margin:0; font-size:1.02rem; line-height:1.75; color:var(--fg-2); }
.testi figcaption{ display:grid; gap:2px; }
.testi figcaption b{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:1.35rem; color:var(--fg); }
.testi figcaption span{ font-size:.85rem; color:var(--fg-3); }
@media (max-width:860px){ .testis{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICES: the promise, the journey, the work
   ============================================================ */
.promise__line{ font-weight:300; font-size:clamp(2.4rem,5.2vw,5rem); line-height:1.02; max-width:20ch; color:var(--fg); }
.promise__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,6vw,96px); margin-top:clamp(36px,6vh,72px); align-items:start; }
.promise__points{ margin:0; display:grid; border-bottom:1px solid var(--line); }
.promise__points div{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:18px; padding:18px 0; border-top:1px solid var(--line); align-items:baseline; }
.promise__points dt{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:1.35rem; line-height:1.15; color:var(--fg); }
.promise__points dd{ margin:0; color:var(--fg-2); font-size:.95rem; }
@media (max-width:860px){ .promise__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .promise__points div{ grid-template-columns:1fr; gap:4px; } }

/* journey: a pinned photograph on the left follows the stage being read on the right */
.journey{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,6vw,96px); align-items:start; }
.journey__media{ position:sticky; top:110px; aspect-ratio:4/5; display:grid; }
.journey__img{ grid-area:1/1; opacity:0; transition:opacity .6s ease; }
.journey__img.is-on{ opacity:1; }
.journey__stages{ list-style:none; margin:0; padding:0; display:grid; }
.stage{ display:grid; gap:16px; padding:clamp(34px,7vh,72px) 0; border-top:1px solid var(--line); min-height:52vh; align-content:start; }
.stage:first-child{ border-top:0; padding-top:0; }
.stage__img{ display:none; aspect-ratio:16/10; }
.stage__n{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:300; font-size:clamp(2.6rem,4vw,3.6rem); line-height:.8; color:var(--fg-3); transition:color .4s ease; }
.stage.is-on .stage__n{ color:var(--brass); }
.stage__h{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:clamp(1.9rem,2.8vw,2.6rem); line-height:1.06; color:var(--fg); }
.stage .body{ max-width:52ch; }
.stage__meta{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; margin-top:6px; }
.stage__k{ font-weight:600; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); margin-bottom:10px; }
.stage__list{ list-style:none; margin:0; padding:0; display:grid; }
.stage__list li{ padding:8px 0; border-top:1px solid var(--line); font-size:.92rem; color:var(--fg-2); }
.stage__list.marks{ display:flex; flex-wrap:wrap; gap:8px; }
.stage__list.marks li{ border:1px solid var(--line); padding:7px 12px; font-weight:600; font-size:.78rem; letter-spacing:.06em; }
.stage__v{ font-size:.95rem; color:var(--fg-2); padding-top:8px; border-top:1px solid var(--line); }
@media (max-width:860px){
  .journey{ grid-template-columns:1fr; }
  .journey__media{ display:none; }
  .stage{ min-height:0; }
  .stage__img{ display:block; }
}
@media (max-width:520px){ .stage__meta{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .journey__img, .stage__n{ transition:none; } }

/* the work by sector: real projects as proof */
.sectors{ margin:4px 0 0; display:grid; border-bottom:1px solid var(--line); }
.sectors div{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:16px; padding:14px 0; border-top:1px solid var(--line); align-items:baseline; }
.sectors dt{ font-weight:600; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); }
.sectors dd{ margin:0; display:flex; flex-wrap:wrap; gap:4px 18px; }
.sectors a{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:1.25rem; color:var(--fg); background-image:linear-gradient(var(--brass),var(--brass)); background-repeat:no-repeat; background-size:0 1px; background-position:0 100%; transition:background-size .3s ease, color .3s ease; }
.sectors a:hover{ color:var(--brass); background-size:100% 1px; }

@media (max-width:420px){ .mini-els{ grid-template-columns:1fr; } }

/* ============================================================
   PROJECT CASE STUDY: the brief, the element, the approach, the result
   ============================================================ */
.cs{ display:grid; gap:clamp(34px,5.5vh,60px); margin-top:clamp(30px,5vh,52px); }
.cs__part{ display:grid; grid-template-columns:minmax(0,8.5rem) minmax(0,1fr); gap:clamp(16px,3vw,40px); padding-top:22px; border-top:1px solid var(--line); }
.cs__head{ display:grid; gap:8px; align-content:start; }
.cs__n{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:300; font-size:2.4rem; line-height:.8; color:var(--brass); }
.cs__label{ font-family:var(--ff-body); font-weight:600; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); }
.cs__content{ display:grid; gap:16px; align-content:start; min-width:0; }
.cs__content .body{ max-width:62ch; }
.cs__sub{ margin-top:10px; font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:1.45rem; line-height:1.1; color:var(--fg); }
.cs__el{ display:flex; align-items:center; gap:18px; }
.cs__sw{ width:52px; height:52px; flex:none; background:var(--el, var(--brass)); box-shadow:inset 0 0 0 1px rgba(241,236,225,.1); }
.cs__el-name{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:300; font-size:clamp(2.2rem,3.2vw,2.9rem); line-height:.95; color:var(--fg); }
@media (max-width:640px){ .cs__part{ grid-template-columns:1fr; gap:12px; } .cs__head{ grid-auto-flow:column; justify-content:start; align-items:end; gap:14px; } }

/* privacy and terms pages */
.pd__block{ display:grid; gap:14px; }
.pd__block h2{ margin-top:18px; font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:clamp(1.5rem,2.2vw,1.9rem); line-height:1.1; color:var(--fg); }
.pd__block .body{ max-width:64ch; }

/* ============================================================
   PROJECTS: filter by sector and by element
   ============================================================ */
.filters{ display:grid; gap:14px; margin-bottom:clamp(30px,5vh,56px); }
.filters__group{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filters__label{ width:5.5rem; flex:none; font-weight:600; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); }
.chip--el{ display:inline-flex; align-items:center; gap:8px; }
.chip--el i{ width:9px; height:9px; background:var(--el); flex:none; }
.chip--el[aria-pressed="true"]{ border-color:var(--el); background:color-mix(in srgb, var(--el) 22%, transparent); }
.filters__status{ margin-top:4px; color:var(--fg-3); }
.plist__empty{ padding:28px 0; border-top:1px solid var(--line); color:var(--fg-2); display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }
@media (max-width:640px){ .filters__label{ width:100%; } }
.el--link:hover .tlink{ color:var(--gold); background-size:100% 1px, 0% 1px; }
.el--link:focus-visible{ outline:2px solid var(--brass); outline-offset:6px; }
@media (max-width:520px){ .hero__cta .btn{ flex:1 1 100%; } }

/* ============================================================
   HOME HERO FILM
   The still image sits underneath; the film fades in over it once it is actually playing.
   ============================================================ */
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; pointer-events:none; }
.hero__video.is-playing{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } }

/* ============================================================
   MOTION SYSTEM
   Gated by html.has-motion (set in <head> only when the visitor has not asked for reduced motion).
   Every reveal fires once. Body text never moves.
   ============================================================ */

/* images: a cover in the section's own colour lifts away from the bottom up, like light rising, while the
   picture settles from 1.06. The cover is a transformed layer, never a clip on the element itself, so the
   visibility observer can always see the element and the reveal stays on the compositor. */
.muted, .cta{ --rv-cover:var(--bg-2); }
.has-motion .rv, .has-motion .rv-wipe{ position:relative; }
.has-motion .rv::after, .has-motion .rv-wipe::after{
  content:""; position:absolute; inset:-1px; z-index:2; pointer-events:none;
  background:var(--rv-cover, var(--bg));
}
.has-motion .rv::after{ transform-origin:50% 0; transition:transform 1.1s var(--ease-in-out); }
.has-motion .rv.is-in::after{ transform:scaleY(0); }
.has-motion .rv img{ transition:transform 1.6s var(--ease-out); }
.has-motion .rv:not(.is-in) img{ transform:scale(1.06); }

/* element swatches: the cover slides off to the right */
.has-motion .rv-wipe::after{ transform-origin:100% 50%; transition:transform .9s var(--ease-in-out); }
.has-motion .rv-wipe.is-in::after{ transform:scaleX(0); }

/* section labels: the bracket closes around the label */
.has-motion .eyebrow::before, .has-motion .eyebrow::after{ transition:transform .8s var(--ease-out), opacity .6s ease; }
.has-motion .eyebrow:not(.is-in)::before{ transform:translateX(-.6em); opacity:0; }
.has-motion .eyebrow:not(.is-in)::after{ transform:translateX(.6em); opacity:0; }

/* already on screen when the page opens: no reveal, so nothing flickers */
.rv-now, .rv-now img, .rv-now::before, .rv-now::after, .rv-now .el__lit{ transition:none !important; }

/* ============================================================
   PAGE TRANSITIONS (View Transitions, where the browser supports them)
   A short crossfade between pages; project images travel from the list or card into the project.
   ============================================================ */
@view-transition{ navigation:auto; }
.hdr{ view-transition-name:site-header; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.42s; animation-timing-function:var(--ease-out); }
::view-transition-group(*){ animation-duration:.7s; animation-timing-function:var(--ease-in-out); }
::view-transition-old(site-header), ::view-transition-new(site-header){ animation:none; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ============================================================
   HERO INDEX: the Nature System, following the film
   Left: the room now showing, linked to its project. Right: one segment per element, filling as it plays.
   ============================================================ */
.hero__index{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--gutter) clamp(16px,2.6vh,24px);
  border-top:1px solid rgba(241,236,225,.16); color:var(--bone);
}
.hero__index[hidden]{ display:none; }
.hero__now{ position:relative; min-height:22px; flex:1 1 auto; min-width:0; }
.hero__now-item{ position:absolute; left:0; top:50%; display:inline-flex; align-items:center; gap:14px; white-space:nowrap;
  opacity:0; transform:translateY(calc(-50% + 6px)); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out); pointer-events:none; }
.hero__now-item.is-on{ opacity:1; transform:translateY(-50%); pointer-events:auto; }
.hero__now .el-tag{ color:var(--bone); }
.hero__now-link{ font-family:var(--ff-display); font-feature-settings:"kern","liga"; font-weight:500; font-size:1.2rem; line-height:1; color:var(--bone);
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:0 1px; background-position:0 100%; transition:background-size .3s var(--ease-out); padding-bottom:2px; }
.hero__now-link:hover, .hero__now-link:focus-visible{ background-size:100% 1px; }
.hero__chapters{ display:flex; gap:clamp(10px,1.6vw,22px); flex:none; }
.hero__ch{ display:grid; gap:9px; width:clamp(64px,7vw,104px); padding:6px 0; text-align:left; color:var(--bone); opacity:.5; transition:opacity .3s ease; }
.hero__ch:hover, .hero__ch[aria-current="true"]{ opacity:1; }
.hero__ch:focus-visible{ outline:2px solid var(--brass); outline-offset:4px; opacity:1; }
.hero__ch-name{ font-family:var(--ff-body); font-weight:600; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; }
.hero__ch-track{ position:relative; display:block; height:2px; background:rgba(241,236,225,.22); overflow:hidden; }
/* the element colours are deep, so the fill is lifted toward Bone to read over the film */
.hero__ch-track i{ position:absolute; inset:0; background:color-mix(in srgb, var(--el) 55%, var(--bone)); transform-origin:0 50%; transform:scaleX(0); }
@media (max-width:760px){
  .hero__index{ flex-wrap:wrap; row-gap:10px; }
  .hero__now{ flex-basis:100%; }
  .hero__now-link{ font-size:1.05rem; }
  .hero__chapters{ flex:1 1 auto; }
  .hero__ch{ width:auto; flex:1 1 0; }
  .hero__ch-name{ font-size:.54rem; letter-spacing:.14em; }
  .hero{ padding-bottom:150px; }
}
@media (prefers-reduced-motion: reduce){ .hero__now-item{ transition:none; } }

/* the segment now showing is also the pause control: a small pause mark on hover, a play mark while paused */
.hero__ch-name{ display:inline-flex; align-items:center; gap:8px; }
.hero__ch-name::after{ content:""; width:7px; height:8px; flex:none; opacity:0; transition:opacity .2s ease;
  background:linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px); }
@media (hover: hover) and (pointer: fine){ .hero__ch[aria-current="true"]:hover .hero__ch-name::after{ opacity:.85; } }
.hero__ch[aria-current="true"]:focus-visible .hero__ch-name::after{ opacity:.85; }
.hero__ch.is-paused .hero__ch-name::after{ opacity:1; width:0; height:0; background:none;
  border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent currentColor; }

/* ============================================================
   HERO HEADLINES: one per room of the film
   All lines share one grid cell (sized to the tallest, bottom-aligned), so the sub-line and buttons never move.
   Arrival: each word resolves out of a soft blur, 70ms apart, like light coming up. Exit: quicker, all at once.
   ============================================================ */
/* specific enough to beat the older `.hero__title .l > span { display:block }` rule */
.hero__title .l > .hero__heads{ display:grid; align-items:end; }
.hero__head{ grid-area:1/1; }
.hero__head .w{ display:inline-block; opacity:0; filter:blur(10px); transition:opacity .3s ease, filter .3s ease; }
.hero__head.is-on .w{ opacity:1; filter:blur(0);
  transition:opacity .9s var(--ease-out) calc(var(--i) * 70ms + 160ms), filter 1s var(--ease-out) calc(var(--i) * 70ms + 160ms); }
@media (prefers-reduced-motion: reduce){ .hero__head .w, .hero__head.is-on .w{ transition:none; filter:none; } }

/* contact: social links side by side */
.dl dd.follow{ display:flex; flex-wrap:wrap; gap:8px 22px; }

/* legal pages: plain lists with a small Brass mark */
.legal__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; max-width:64ch; }
.legal__list li{ position:relative; padding-left:22px; color:var(--fg-3); line-height:1.7; }
.legal__list li::before{ content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; background:var(--brass); }
.legal__list li b{ color:var(--fg-2); }
.pd__block h2{ scroll-margin-top:110px; }

/* Inline text link: underlined, sentence case, used inside running text (legal pages, form note). */
.ilink{ color:var(--fg-2); text-decoration:underline; text-decoration-color:var(--brass); text-decoration-thickness:1px; text-underline-offset:3px; transition:color .2s ease, text-decoration-color .2s ease; }
@media (hover:hover) and (pointer:fine){ .ilink:hover{ color:var(--fg); text-decoration-color:currentColor; } }
.ilink:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; border-radius:1px; }

/* Legal pages: one column that starts on the same line as the hero headline, held to a reading measure. */
.legal{ max-width:72ch; }

/* Consent banner: a quiet card in the corner. It never blocks the page, and Decline and Accept carry equal weight. */
.consent{
  position:fixed; z-index:50; left:var(--gutter); bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:min(420px, calc(100vw - 2 * var(--gutter))); display:grid; gap:12px; padding:22px 22px 20px;
  background:var(--toast-bg); border:1px solid var(--line); box-shadow:0 20px 50px rgba(10,8,6,.32);
}
.consent[hidden]{ display:none; }
.consent__title{ margin:0; font-family:var(--ff-display); font-weight:500; font-size:1.4rem; line-height:1.15; color:var(--fg); }
.consent__text{ margin:0; font-size:.88rem; line-height:1.6; color:var(--fg-3); }
.consent__btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.consent__btns .btn{ min-height:46px; padding-inline:14px; }
.consent .btn:focus-visible, .ftr__btn:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
html.has-motion .consent{ opacity:0; transform:translateY(12px); transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); }
html.has-motion .consent.is-on{ opacity:1; transform:none; transition-duration:.3s; }
@media (max-width:560px){ .consent{ left:16px; width:calc(100vw - 32px); bottom:calc(16px + env(safe-area-inset-bottom,0px)); padding:18px; } }

/* Footer button that reads as a link (Cookie settings). */
.ftr__btn{ appearance:none; background:none; border:0; padding:0; margin:0; font:inherit; font-size:0.92rem; color:var(--fg-4); cursor:pointer; text-align:left; transition:color .3s; }
.ftr__btn:hover{ color:var(--fg); }

/* Nature System light studies (replace the flat colour swatches). A dark niche with the element's light in it.
   The light switches on once as the panel scrolls into view; on hover the light drifts a little and brightens. */
.el__light{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; margin-bottom:14px; background:#120E0B;
  box-shadow:inset 0 0 0 1px rgba(241,236,225,.07); }
.el__light svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.el__lit, .el__drift{ transform-box:view-box; transform-origin:50% 50%; }
.has-motion .el__lit{ transition:opacity 1.6s var(--ease-out); }
.has-motion .el__light:not(.is-in) .el__lit{ opacity:.08; }
.has-motion .el__drift{ transition:transform 1.1s var(--ease-out), opacity .6s ease; }
@media (hover:hover) and (pointer:fine){
  .has-motion .el--link:hover .el__light--ember .el__drift{ transform:translateY(-7px); }
  .has-motion .el--link:hover .el__light--tide .el__drift{ transform:translate(9px,-3px); }
  .has-motion .el--link:hover .el__light--canopy .el__drift{ transform:translate(6px,4px) rotate(.6deg); }
  .has-motion .el--link:hover .el__light--aurora .el__drift{ transform:translateX(-12px); }
}
/* The link sits at the foot of each card, on one line across the row, with room above it. */
.el .body{ margin-bottom:18px; }
.el--link .tlink{ margin-top:auto; }

/* Skip link: hidden until a keyboard user tabs to it, then it slides into the top-left corner. */
.skip{ position:fixed; left:12px; top:12px; z-index:100; padding:12px 18px; background:var(--fg); color:var(--bg);
  font-family:var(--ff-body); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  transform:translateY(-160%); transition:transform .2s var(--ease-out); }
.skip:focus{ transform:none; outline:2px solid var(--brass); outline-offset:2px; }
main:focus{ outline:none; }
@media (prefers-reduced-motion: reduce){ .skip{ transition:none; } }