/* ──────────────────────────────────────────────────────────────
   Rayan HealthInfra+ — concept homepage.
   Colour, easing and shell tokens are lifted from Rayan Architects
   V2 so this reads as the same practice. Two things are deliberately
   not inherited: the accent, which becomes a healthcare green, and
   the type scale, which is rebuilt as a single ratio rather than the
   per-component clamps the parent site accumulated.
   ────────────────────────────────────────────────────────────── */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Text-safe green. 4.83:1 on --bg and 5.36:1 carrying white, so it
     clears AA as body type on the cream, as large type anywhere, and
     as a filled band carrying white. This is the brand colour and it
     is used on structure: numerals, buttons, bands. */
  --accent:         #15795C;
  /* Graphic-only green. 2.85:1 on --bg, below the text floor, so it is
     confined to rules, seams, dots and marks on dark grounds. */
  --accent-lift:    #2FA37B;
  /* Lighter still, for small type over the dark hero imagery only. */
  --accent-on-dark: #7FD6B4;

  --bg:             #F5F3ED;
  --cream:          #FAF8F3;
  --ink:            #1A1A1A;
  --muted:          #6B6B6B;              /* 4.80:1 on --bg */
  --hairline:       rgba(0, 0, 0, 0.08);
  --hairline-strong:rgba(0, 0, 0, 0.18);

  /* ── Type. One major-third ladder (×1.25) off a 1.18rem lead, so every
     display size is a step on the same scale instead of a number picked
     per component. Line-height and tracking follow the step: tighter as
     the step rises, which is the only reason either should vary. ── */
  --t-0: 0.72rem;
  --t-1: 0.86rem;
  --t-2: clamp(1rem, 0.94rem + 0.28vw, 1.18rem);
  --t-3: clamp(1.18rem, 1.02rem + 0.62vw, 1.48rem);
  --t-4: clamp(1.4rem, 1.08rem + 1.05vw, 1.84rem);
  --t-5: clamp(1.65rem, 1.02rem + 1.9vw, 2.3rem);
  --t-6: clamp(1.95rem, 1.08rem + 2.9vw, 2.88rem);
  --t-7: clamp(2.3rem, 1.05rem + 4.2vw, 3.6rem);
  --t-8: clamp(2.7rem, 0.95rem + 5.9vw, 4.5rem);
  --t-9: clamp(3.05rem, 0.7rem + 7.9vw, 5.63rem);
  --t-10:clamp(3.4rem, 0.2rem + 10.4vw, 7.03rem);

  --lh-tight: 0.92; --lh-snug: 0.98; --lh-mid: 1.12; --lh-copy: 1.6;
  --ls-10: -0.042em; --ls-9: -0.04em;  --ls-8: -0.036em;
  --ls-7:  -0.03em;  --ls-6: -0.024em; --ls-5: -0.02em; --ls-4: -0.016em;

  --gutter:         clamp(1.25rem, 5vw, 5rem);
  --flag-clear:     3.25rem;
  --shell:          1400px;
}

@font-face { font-family: 'Satoshi'; src: url('../vendor/satoshi/satoshi-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../vendor/satoshi/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../vendor/satoshi/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../vendor/satoshi/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; overscroll-behavior-x: none; }
html { scroll-padding-top: 5rem; }
body {
  font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip; letter-spacing: -0.005em;
  font-size: var(--t-2); line-height: var(--lh-copy);
}
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
img, video, canvas { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #FFF; }
::-moz-selection { background: var(--accent); color: #FFF; }
.tabular { font-variant-numeric: tabular-nums; }
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
/* Over the dark hero the ink-green ring disappears, so interactive
   elements on that ground take the light ring instead. */
.hero a:focus-visible, .nav:not(.is-scrolled) a:focus-visible,
.foot a:focus-visible, .band a:focus-visible {
  outline-color: #FFF;
}

/* The shell grows past the design width rather than leaving a fixed
   column stranded in the middle of a very wide display. */
.container { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1700px) { :root { --shell: 1560px; } }
@media (min-width: 2100px) { :root { --shell: 1760px; --gutter: 6rem; } }

/* ── Skip link ─────────────────────────────────────────────── */
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 0.75rem 1.15rem;
  border-radius: 999px; font-size: var(--t-1); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: top 250ms var(--ease-out-quart);
}
.skip:focus { top: 1rem; }

/* ── Concept flag ──────────────────────────────────────────── */
.flag {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.48rem 0.95rem; border-radius: 999px;
  background: rgba(26, 26, 26, 0.76); color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 600ms var(--ease-out-quart);
}
body.is-lit .flag { opacity: 1; }
.flag i { width: 5px; height: 5px; border-radius: 999px; background: var(--accent-lift); }
.flag__short { display: none; }
@media (max-width: 899px) {
  /* At 390px the full sentence runs the width of the screen and lands on
     the hero's scroll cue and progress bar. The short form clears both. */
  .flag { font-size: 0.52rem; letter-spacing: 0.12em; padding: 0.4rem 0.7rem; bottom: 0.85rem; right: 0.85rem; }
  .flag__long { display: none; }
  .flag__short { display: inline; }
}

/* ── Preloader ─────────────────────────────────────────────── */
.pre {
  position: fixed; inset: 0; z-index: 150; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 700ms var(--ease-out-quart);
}
.pre__inner { width: min(420px, 68vw); text-align: center; }
.pre__label {
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(245, 243, 237, 0.72); margin: 0 0 1.1rem;
}
.pre__rule { height: 1px; background: rgba(245, 243, 237, 0.2); overflow: hidden; }
.pre__rule i { display: block; height: 100%; width: 0%; background: var(--accent-lift); }
.pre__num {
  margin: 1.1rem 0 0; font-size: 0.62rem; letter-spacing: 0.2em;
  color: rgba(245, 243, 237, 0.72); font-variant-numeric: tabular-nums;
}
body.is-lit .pre { opacity: 0; pointer-events: none; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  padding: max(1.4rem, env(safe-area-inset-top, 0px)) clamp(1.25rem, 3.5vw, 3rem);
  display: flex; justify-content: center; pointer-events: none;
  transition: padding 450ms var(--ease-out-expo);
}
.nav::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 180%;
  background: linear-gradient(180deg, rgba(8,12,10,0.62) 0%, rgba(8,12,10,0.28) 45%, transparent 100%);
  pointer-events: none; opacity: 1;
  transition: opacity 350ms ease;
}
.nav.is-scrolled::before { opacity: 0; }
.nav__pill {
  pointer-events: auto; display: flex; align-items: center; gap: 2.5rem;
  width: 100%; max-width: none; padding: 0.3rem 0;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition:
    max-width 600ms var(--ease-out-expo), padding 450ms var(--ease-out-expo),
    gap 450ms var(--ease-out-expo), background 350ms ease,
    border-color 350ms ease, backdrop-filter 350ms ease,
    -webkit-backdrop-filter 350ms ease, box-shadow 350ms ease;
}
.nav.is-scrolled { padding: max(1rem, env(safe-area-inset-top, 0px)) 2rem; }
.nav.is-scrolled .nav__pill {
  max-width: 780px; padding: 0.5rem 0.55rem 0.5rem 1.2rem; gap: 1.5rem;
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              0 8px 32px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
}
.nav__mark {
  display: inline-flex; align-items: baseline; gap: 0.06em;
  color: var(--bg); text-decoration: none;
  font-size: var(--t-2); font-weight: 500; letter-spacing: var(--ls-4);
  /* Two elements in a flex row: without this the wordmark breaks across
     two lines in the narrow pill and the plus floats away from it. */
  white-space: nowrap; flex-shrink: 0;
  transition: color 350ms ease;
}
.nav.is-scrolled .nav__mark { color: var(--ink); }
.nav__mark b { font-weight: 500; }
.nav__mark i { font-style: normal; color: var(--accent-on-dark); }
.nav.is-scrolled .nav__mark i { color: var(--accent); }
.nav__links { display: flex; gap: 1.4rem; align-items: center; margin-left: auto; }
.nav__link {
  position: relative; font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bg);
  text-decoration: none; padding: 0.25rem 0;
  transition: color 250ms var(--ease-out-quart);
}
.nav.is-scrolled .nav__link { color: var(--ink); }
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--accent-lift); transform: scaleX(0);
  transform-origin: left center; transition: transform 350ms var(--ease-out-expo);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: transparent; color: var(--bg);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 0.7rem 1.4rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: transform 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart),
              border-color 350ms ease, color 250ms var(--ease-out-quart), box-shadow 350ms var(--ease-out-quart);
}
/* Green, not ink. The accent has to hold a structural surface or it
   never reads as the brand. 5.36:1 carrying white. */
.nav.is-scrolled .nav__cta {
  background: var(--accent); color: #FFF; border-color: var(--accent);
  box-shadow: 0 12px 28px -16px rgba(21,121,92,0.55);
}
.nav__cta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-lift); }
.nav__cta-short { display: none; }
@media (max-width: 400px) {
  /* At 320px the full label cannot sit beside the wordmark inside the pill. */
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  .nav__mark { font-size: 0.82rem; }
  .nav { padding-left: 0.75rem; padding-right: 0.75rem; }
}
.nav.is-scrolled .nav__cta .dot { background: #FFF; }
.nav__cta:active { transform: scale(0.97); }
@media (hover: hover) {
  .nav__cta:hover { transform: scale(1.02); background: var(--accent); color: #FFF;
                    border-color: var(--accent); box-shadow: 0 18px 36px -16px rgba(21,121,92,0.6); }
  .nav__cta:hover .dot { background: #FFF; }
}
@media (max-width: 899px) {
  /* .nav__links carries the margin-left:auto that pushes the CTA right, so
     hiding it alone would collapse the CTA against the mark. Move the push. */
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; padding: 0.58rem 0.9rem; font-size: 0.62rem; letter-spacing: 0.08em; }
  .nav__mark { font-size: 0.88rem; }
  .nav__pill { gap: 0.75rem; }
  .nav { padding-top: max(1rem, env(safe-area-inset-top, 0px)); }
  .nav.is-scrolled .nav__pill { max-width: calc(100% - 0.5rem); padding: 0.45rem 0.45rem 0.45rem 1rem; }
}

/* ── Hero ──────────────────────────────────────────────────────
   The stage is sticky rather than GSAP-pinned: the browser holds it in
   place with no layout shift and no pin-spacer, and ScrollTrigger is
   left to do nothing but report progress. Travel is set so each frame
   gets about 25px of scroll, the density at which a scrubbed sequence
   stops reading as a slideshow. */
.hero { position: relative; background: var(--ink); height: calc(100svh + 2200px); }
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%;
  overflow: hidden; background: var(--ink);
}
@media (max-width: 899px) { .hero { height: calc(100svh + 1250px); } }
.hero--static { height: 100vh; height: 100svh; }

.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(18px); transform: scale(1.08);
  opacity: 1; transition: opacity 500ms ease;
}
body.is-lit .hero__poster { opacity: 0; }
/* Promoted from blurred placeholder to the hero itself when the sequence
   cannot run: no AVIF support, no canvas context, or no frames fetched. */
.hero__poster.is-fallback { filter: none; transform: none; opacity: 1; }
body.is-lit .hero__poster.is-fallback { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,14,12,0.46) 0%, rgba(10,14,12,0.10) 24%,
                    rgba(10,14,12,0.04) 48%, rgba(10,14,12,0.62) 100%);
}
/* Beat copy sits over a bright facade for part of the scrub, so it carries
   its own left wash that is only painted while a beat is on screen. */
.hero__beatwash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(10,14,12,0.88) 0%, rgba(10,14,12,0.62) 26%, rgba(10,14,12,0.22) 50%, transparent 70%);
  transition: opacity 700ms var(--ease-out-quart);
}
.hero__stage[data-beat] .hero__beatwash { opacity: 1; }

.hero__stack { display: contents; }
.hero__beats {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(30rem, 62vw); pointer-events: none;
}
.beat { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; }
.beat__n {
  display: block; font-size: 0.62rem; letter-spacing: 0.28em;
  color: var(--accent-on-dark); margin: 0 0 0.9rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(10, 14, 12, 0.7);
}
.beat__t {
  margin: 0; font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--ls-9);
  font-size: var(--t-9); color: #FFF;
  /* The sequence runs from a dark blueprint to a bright dusk render, so the
     wash alone cannot be tuned for both ends. A shadow carries the rest. */
  text-shadow: 0 2px 24px rgba(10, 14, 12, 0.55);
}
.beat__s {
  margin: 1rem 0 0; font-size: var(--t-2); line-height: 1.5;
  color: rgba(255,255,255,0.88); max-width: 26ch;
  text-shadow: 0 1px 14px rgba(10, 14, 12, 0.6);
}

.hero__foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(3.1rem, 6vh, 4.4rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; pointer-events: none;
}
.hero__mark {
  margin: 0; color: #FFF; font-weight: 500; line-height: var(--lh-snug);
  letter-spacing: var(--ls-8); font-size: var(--t-8);
  text-shadow: 0 2px 30px rgba(10, 14, 12, 0.5);
}
.hero__mark i { font-style: normal; color: var(--accent-on-dark); }
.hero__cap {
  text-align: right; font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.86); line-height: 1.7;
  text-shadow: 0 1px 16px rgba(10, 14, 12, 0.75);
}
.hero__cap b { display: block; font-weight: 500; color: #FFF; }
.hero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.16); }
.hero__bar i { display: block; height: 100%; width: 0%; background: var(--accent-lift); }
.hero__cue {
  position: absolute; left: 50%; bottom: clamp(1.1rem, 2.4vh, 1.7rem);
  transform: translateX(-50%);
  font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.8); pointer-events: none;
  text-shadow: 0 1px 12px rgba(10, 14, 12, 0.7);
}
@media (max-width: 899px) {
  /* Beats and wordmark were each absolutely positioned against the stage, one
     anchored in vh and one in rem, so they converged as the viewport got
     shorter and the beat body struck through the wordmark. On phones they
     become one bottom-anchored column instead, which cannot overlap at any
     height. The beats keep their own stacking context because the three
     states sit on top of each other. */
  .hero__stack {
    display: flex; flex-direction: column; gap: clamp(1.5rem, 5vh, 2.75rem);
    position: absolute; left: var(--gutter); right: var(--gutter);
    bottom: clamp(3.4rem, 8vh, 5rem); pointer-events: none;
  }
  .hero__beats {
    position: relative; left: auto; top: auto; bottom: auto; transform: none;
    width: 100%; min-height: 11rem;
  }
  .beat { top: auto; bottom: 0; }
  .hero__foot {
    position: relative; left: auto; right: auto; bottom: auto;
    flex-direction: column; align-items: flex-start; gap: 0.9rem;
  }
  .hero__cap { text-align: left; }
  .hero__beatwash { background: linear-gradient(0deg, rgba(10,14,12,0.9) 12%, rgba(10,14,12,0.52) 46%, transparent 78%); }
}
/* A phone held in landscape keeps the mobile layout on a viewport barely
   400px tall. The beat body is the first thing to give. */
@media (max-width: 899px) and (max-height: 560px) {
  .beat__s { display: none; }
  .beat__t { font-size: 2.1rem; }
  .beat__n { margin-bottom: 0.5rem; }
  /* The reserved beat shelf has to shrink with the copy it holds, or the
     stack grows taller than the viewport and pushes the beats under the nav. */
  .hero__beats { min-height: 4.6rem; }
  .hero__stack { gap: 1rem; bottom: 2.2rem; }
  .hero__cap { line-height: 1.5; }
}

/* ── Section furniture ─────────────────────────────────────── */
.sec { padding: clamp(5rem, 14vh, 11rem) 0; }
.sec--cream { background: var(--cream); }
/* The counter has to be able to drop below the title. At 320px a display
   title and a tracked label cannot share a row, and the label was being
   pushed past the viewport edge where overflow-x:clip hid it entirely. */
.head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem clamp(1rem, 2vw, 2rem); margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.band__head { flex-wrap: wrap; }
.head__t { font-weight: 500; font-size: var(--t-10); line-height: var(--lh-tight); letter-spacing: var(--ls-10); margin: 0; }
.head__c {
  font-weight: 500; font-size: var(--t-1); letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums; color: var(--muted); flex-shrink: 0;
}
.over { font-size: var(--t-0); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.2rem; }

/* ── Statement ─────────────────────────────────────────────── */
.stmt__grid { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
@media (min-width: 860px) { .stmt__grid { grid-template-columns: 1fr 4fr; } }
.stmt__p {
  font-weight: 400; font-size: var(--t-7); line-height: var(--lh-mid);
  letter-spacing: var(--ls-7); margin: 0;
  /* Measure has to hold after JS splits this into word spans, or the
     single most important sentence runs 40ch-plus on a wide display. */
  max-width: 20ch;
}
.stmt__p .w { opacity: 0.24; transition: opacity 200ms linear; }
.stmt__sub { margin: 1.8rem 0 0; font-size: var(--t-3); line-height: var(--lh-copy); color: var(--muted); max-width: 46ch; }

/* ── Proof. The numerals are the page's largest green field: at these
   sizes --accent clears AA by a wide margin and the band is where the
   brand colour has to register. ── */
.proof { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof__i { padding: clamp(2rem, 5vh, 3.4rem) 0; border-left: 1px solid var(--hairline); padding-left: clamp(1rem, 2.4vw, 2rem); }
.proof__i:first-child { border-left: 0; padding-left: 0; }
.proof__n {
  font-weight: 500; font-size: var(--t-9); line-height: var(--lh-tight);
  letter-spacing: var(--ls-9); margin: 0; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.proof__l { margin: 0.8rem 0 0; font-size: var(--t-0); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 759px) {
  .proof__grid { grid-template-columns: 1fr; }
  .proof__i { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding: 1.6rem 0; }
  .proof__i:first-child { border-top: 0; }
}

/* ── Capability ────────────────────────────────────────────── */
.cap__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 760px) { .cap__grid { grid-template-columns: repeat(3, 1fr); } }
.cap__i { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--hairline-strong); }
.cap__i::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
  background: var(--accent-lift); transition: width 900ms var(--ease-out-expo);
}
.cap__i.is-in::before { width: 100%; }
.cap__n { font-size: 0.66rem; letter-spacing: 0.22em; color: var(--accent); margin: 0 0 1.3rem; font-variant-numeric: tabular-nums; }
.cap__t { font-weight: 500; font-size: var(--t-5); line-height: var(--lh-mid); letter-spacing: var(--ls-5); margin: 0; }
.cap__b { margin: 0.9rem 0 0; font-size: var(--t-2); line-height: var(--lh-copy); color: var(--muted); max-width: 34ch; }

/* ── Work ──────────────────────────────────────────────────── */
.work__lead { margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.tile { position: relative; display: block; margin: 0; }
.tile__media { position: relative; overflow: hidden; background: var(--hairline); border-radius: 2px; aspect-ratio: 4 / 3; }
.tile__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(10,14,12,0.30) 100%);
  opacity: 0; transition: opacity 500ms var(--ease-out-quart);
}
.tile:hover .tile__media::after { opacity: 1; }
.tile__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.035); transition: transform 900ms var(--ease-out-expo);
}
@media (hover: hover) { .tile:hover .tile__img { transform: scale(1.075); } }
/* A caption shelf tall enough for a two-line project name, so one long
   title does not push its caption block past its row neighbour's and break
   the shared baseline. The location is allowed to wrap onto its own line
   rather than squeezing the title into a third line in a narrow column,
   which is the case that would overrun the shelf. */
.tile__cap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.3rem 1rem;
  padding-top: 0.9rem; min-height: 3.4em;
}
.tile__n { flex: 1 1 11ch; }
.tile__n { margin: 0; font-weight: 500; font-size: var(--t-3); letter-spacing: var(--ls-4); line-height: 1.22; }
.tile__l { margin: 0; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.tile--lead .tile__media { aspect-ratio: 16 / 9; }
.tile--lead .tile__n { font-size: var(--t-5); }

.work__grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2.4rem); margin-top: clamp(2.5rem, 6vh, 4.5rem); }
@media (min-width: 640px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  /* A regular wide-narrow alternation on twelve columns. Every tile keeps
     the same 4:3 frame, and the offset that staggers the rows is a fixed
     step applied to the narrow tile, so the stagger reads as a rhythm
     rather than as three photos bottom-aligned by accident. */
  .work__grid { grid-template-columns: repeat(12, 1fr); }
  .work__grid .tile:nth-child(4n+1) { grid-column: span 7; }
  .work__grid .tile:nth-child(4n+2) { grid-column: span 5; margin-top: clamp(2rem, 5vw, 5.5rem); }
  .work__grid .tile:nth-child(4n+3) { grid-column: span 5; }
  .work__grid .tile:nth-child(4n+4) { grid-column: span 7; margin-top: clamp(2rem, 5vw, 5.5rem); }
}

/* ── Full-bleed plate ──────────────────────────────────────── */
.plate { position: relative; height: clamp(28rem, 80vh, 52rem); overflow: hidden; background: var(--ink); }
.plate__img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
/* The scrim carries a green cast so the brand colour sits on a full-bleed
   surface rather than only on small elements. */
.plate__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,26,20,0.34) 0%, rgba(8,26,20,0.10) 42%, rgba(6,30,23,0.78) 100%);
}
.plate__body { position: absolute; inset: auto 0 0 0; padding: 0 0 clamp(2.5rem, 8vh, 5rem); }
.plate__t { margin: 0; color: #FFF; font-weight: 500; line-height: var(--lh-mid); letter-spacing: var(--ls-7); font-size: var(--t-7); max-width: 18ch; }
.plate__s { margin: 1.1rem 0 0; color: rgba(255,255,255,0.86); font-size: var(--t-2); line-height: var(--lh-copy); max-width: 46ch; }

/* ── Band. A static green field, not a scrolling word loop: it carries
   what the practice actually builds, and it is the page's largest area
   of brand colour. ── */
.band { background: var(--accent); color: #FFF; padding: clamp(3.5rem, 10vh, 7rem) 0; }
.band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.band__t { margin: 0; font-weight: 500; font-size: var(--t-7); line-height: var(--lh-mid); letter-spacing: var(--ls-7); color: #FFF; }
.band__c { margin: 0; font-size: var(--t-0); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.92); flex-shrink: 0; }
.band__grid { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,0.26); }
@media (min-width: 760px) { .band__grid { grid-template-columns: repeat(3, 1fr); } }
.band__i { padding: clamp(1.4rem, 3vh, 2.2rem) 0; border-bottom: 1px solid rgba(255,255,255,0.26); }
/* Stacked, the last item's rule dangles under the final line with nothing
   below it but section padding. */
.band__i:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .band__i { border-bottom: 0; border-left: 1px solid rgba(255,255,255,0.26); padding-left: clamp(1rem, 2.4vw, 2rem); padding-right: clamp(1rem, 2vw, 2rem); }
  .band__i:first-child { border-left: 0; padding-left: 0; }
}
.band__n { margin: 0 0 0.7rem; font-size: 0.66rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums; }
.band__k { margin: 0; font-weight: 500; font-size: var(--t-4); line-height: var(--lh-mid); letter-spacing: var(--ls-4); color: #FFF; }
.band__v { margin: 0.6rem 0 0; font-size: var(--t-2); line-height: var(--lh-copy); color: rgba(255,255,255,0.92); max-width: 30ch; }

/* ── Close ─────────────────────────────────────────────────── */
.close__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
@media (min-width: 860px) { .close__grid { grid-template-columns: 3fr 2fr; } }
.close__t { margin: 0; font-weight: 500; font-size: var(--t-10); line-height: var(--lh-tight); letter-spacing: var(--ls-10); }
.close__b { margin: 1.5rem 0 0; font-size: var(--t-3); line-height: var(--lh-copy); color: var(--muted); max-width: 44ch; }
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--accent); color: #FFF; border: 1px solid var(--accent);
  padding: 1.05rem 1.9rem; border-radius: 999px; text-decoration: none;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 18px 38px -22px rgba(21,121,92,0.7);
  transition: transform 250ms var(--ease-out-quart), background-color 300ms var(--ease-out-quart),
              border-color 300ms ease, box-shadow 350ms var(--ease-out-quart);
}
.btn .dot { width: 6px; height: 6px; border-radius: 999px; background: #FFF; }
.btn:active { transform: scale(0.98); }
@media (hover: hover) {
  .btn:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 22px 46px -22px rgba(0,0,0,0.5); }
}
.close__alt { margin: 1.15rem 0 0; font-size: var(--t-1); color: var(--muted); }
.close__alt a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-lift); padding-bottom: 1px; }
.close__alt a:hover { color: var(--ink); border-color: var(--ink); }

/* ── Footer ────────────────────────────────────────────────── */
.foot {
  background: var(--ink); color: rgba(245,243,237,0.82);
  padding: clamp(3.5rem, 8vh, 6rem) 0 calc(clamp(3rem, 7vh, 5rem) + var(--flag-clear));
}
.foot__grid { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end; justify-content: space-between; }
.foot__mark { margin: 0; color: #FFF; font-weight: 500; font-size: var(--t-6); letter-spacing: var(--ls-6); line-height: 1; }
.foot__mark i { font-style: normal; color: var(--accent-lift); }
/* 8.2:1 and 7.4:1 on the ink ground. */
.foot__note { margin: 0.9rem 0 0; font-size: var(--t-1); line-height: var(--lh-copy); color: rgba(245,243,237,0.7); max-width: 40ch; }
.foot__meta { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,243,237,0.66); text-align: right; line-height: 1.9; }
@media (max-width: 720px) { .foot__meta { text-align: left; } }

/* ── Reveal primitives ─────────────────────────────────────── */
.r-line { display: block; overflow: hidden; }
.r-line > span { display: block; transform: translateY(105%); }
.r-up { opacity: 0; transform: translateY(24px); }
.r-media { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .r-line > span { transform: none; }
  .r-up { opacity: 1; transform: none; }
  .r-media { clip-path: none; }
  .stmt__p .w { opacity: 1; }
  .tile__img { transform: none; }
  .cap__i::before { width: 100%; }
  /* A scrubbed canvas is the animation here most likely to cause
     vestibular discomfort, so the scrub is not created at all and the
     hero settles on the completed building. */
  .hero { height: 100vh; height: 100svh; }
  .hero__beatwash { display: none; }
}

/* 404. The one page that is not the concept itself, sharing its type. */
body.is-404 { display: flex; min-height: 100svh; align-items: center; }
body.is-404 .sec { width: 100%; }