/* ==========================================================================
   Meridian — Components (Milestone 1: Button, Section shell)
   Component tokens reference SEMANTIC tokens only (spec A1).
   Focus styling comes from the global :focus-visible rule — components
   may not restyle focus (spec A7).
   ========================================================================== */

/* ------------------------------------------------------------------
   Button — spec Part B #1
   Variants: primary · secondary · whatsapp · quiet
   States: default · hover (pointer only) · active · focus-visible ·
           disabled · loading
   Min target 44px block-size (touch comfortable; ≥24px required).
   2px radius — kinship with the blueprint node radius, nothing rounder.
   ------------------------------------------------------------------ */

.btn {
  --button-bg: transparent;
  --button-text: var(--text-primary);
  --button-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-block: var(--space-2);
  padding-inline: var(--space-6);
  border: 1px solid var(--button-border);
  border-radius: 2px;
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--font-body-latin);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-state),
              color var(--duration-micro) var(--ease-state),
              border-color var(--duration-micro) var(--ease-state),
              translate var(--duration-micro) var(--ease-state);
}
/* Tactile press — the button yields 1px under a click. Physical, not
   decorative (founder brief: motion should feel physical); reduced-motion
   collapses the travel. Loading/disabled buttons don't move. */
.btn:active:not(:disabled):not(.is-loading) { translate: 0 1px; }

.btn--primary {
  --button-bg: var(--accent);
  --button-text: var(--text-inverse);
}
@media (hover: hover) {
  .btn--primary:hover:not(:disabled):not(.is-loading) {
    --button-bg: color-mix(in srgb, var(--accent), var(--surface-primary) 14%);
  }
}
.btn--primary:active:not(:disabled) {
  --button-bg: color-mix(in srgb, var(--accent), var(--surface-primary) 24%);
}

.btn--secondary {
  --button-border: var(--text-primary);
  --button-text: var(--text-primary);
}
@media (hover: hover) {
  .btn--secondary:hover:not(:disabled):not(.is-loading) {
    --button-bg: color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}
.btn--secondary:active:not(:disabled) {
  --button-bg: color-mix(in srgb, var(--text-primary) 18%, transparent);
}

/* WhatsApp — the conversation CTA. Distinct affordance: inverse fill +
   glyph, deliberately NOT bronze (protects the ≤3-bronze budget) and
   never animated for attention (spec B1/A8). */
.btn--whatsapp {
  --button-bg: var(--surface-inverse);
  --button-text: var(--text-inverse);
}
@media (hover: hover) {
  .btn--whatsapp:hover:not(:disabled):not(.is-loading) {
    --button-bg: color-mix(in srgb, var(--surface-inverse), var(--surface-primary) 12%);
  }
}
.btn--whatsapp:active:not(:disabled) {
  --button-bg: color-mix(in srgb, var(--surface-inverse), var(--surface-primary) 22%);
}
.btn__icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

.btn--quiet {
  --button-text: var(--text-primary);
  padding-inline: var(--space-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duration-micro) var(--ease-state),
              color var(--duration-micro) var(--ease-state);
}
@media (hover: hover) {
  .btn--quiet:hover:not(:disabled) {
    --button-text: var(--accent);
    text-decoration-color: currentColor;
  }
}

.btn:disabled,
.btn[aria-disabled="true"] {
  --button-bg: var(--disabled-fill);
  --button-text: var(--text-disabled);
  --button-border: transparent;
  cursor: not-allowed;
  text-decoration: none;
}

/* Loading — spinner is information: it survives reduced-motion (base.css) */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  inline-size: 1em;
  block-size: 1em;
  inset-block-start: calc(50% - 0.5em);
  inset-inline-start: calc(50% - 0.5em);
  border: 2px solid var(--button-text);
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: btn-spin 800ms linear infinite;
}
.btn--primary.is-loading::after,
.btn--whatsapp.is-loading::after { border-color: var(--text-inverse); border-block-start-color: transparent; }
.btn--secondary.is-loading::after { border-color: var(--text-primary); border-block-start-color: transparent; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
   Section shell — spec Part B #3
   The rhythm container every band sits in: section token, optional
   meridian-arc motif slot (one arc, low contrast, dark sections only),
   theme boundary handling via [data-theme] (tokens.css remaps).
   ------------------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--section-md);
  background: var(--surface-primary);
  color: var(--text-primary);
  overflow: clip;
}
.section--lg { padding-block: var(--section-lg); }   /* homepage default */
.section--sm { padding-block: var(--section-sm); }

.section__arc {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: min(40rem, 60vw);
  block-size: 100%;
  pointer-events: none;
  color: var(--accent-decorative);
  opacity: 0.14;                    /* low contrast — motif, not message */
}
.section[data-theme="light"] .section__arc { display: none; }  /* dark sections only */

.section > .container,
.section > .container--content,
.section > .container--wide { position: relative; }

/* Iteration 2 site rhythm — warm paper and charcoal alternate across every
   primary journey, including pages that predate the chamber primitive. The
   light theme already exists in tokens; this applies it compositionally so
   long pages have orientation and proof bands do not dissolve into one dark
   scroll. Explicit theme attributes still take precedence. */
main > .section:not(.hero):nth-of-type(even),
main > article > .section:nth-of-type(even) {
  color-scheme: light;
  --surface-primary: var(--offwhite);
  --surface-raised: var(--neutral-100);
  --surface-inverse: var(--charcoal);
  --text-primary: var(--charcoal);
  --text-secondary: var(--neutral-500);
  --text-inverse: var(--offwhite);
  --text-disabled: var(--neutral-500);
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --accent: var(--bronze-700);
  --accent-decorative: var(--bronze-500);
  --focus-ring: var(--charcoal);
  --disabled-fill: var(--neutral-200);
  background-color: var(--surface-primary);
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-decorative) 9%, transparent) 1px,
    transparent 1px);
  background-size: min(9vw, 8rem) 100%;
}

/* ==========================================================================
   Milestone 2 components — Header/nav (B2), Hero (B4), Card (B5),
   Blueprint diagram block (B6), Engagement-posture (B8),
   Pull-quote/statement (B9), Footer (B10).
   ========================================================================== */

/* ------------------------------------------------------------------
   Header / navigation — 5 items + persistent CTA + EN/ع switcher.
   Sticky; focus-not-obscured via scroll-padding on :root (below).
   Mobile: sheet menu, CTA remains one tap.
   ------------------------------------------------------------------ */

:root { scroll-padding-block-start: 6rem; }   /* sticky header never obscures focus (2.4.11) */

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: var(--surface-primary);
  border-block-end: 1px solid var(--border-subtle);
}
.header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-block-size: 4.5rem;
}
.header .lockup { font-size: var(--text-h4); }
.header__home { text-decoration: none; }

/* Brand lockup — the Meridian mark + wordmark (BRAND_GUIDE §21). Additive: the
   .lockup span keeps its Fraunces wordmark styling; this wraps it with the mark.
   Mark reproduces in one ink (currentColor) — the single-colour-safe primary. */
.brand-lockup { display: inline-flex; align-items: center; gap: 0.5em; color: var(--text-primary); }
.brand-lockup__mark { flex: none; inline-size: 1.5em; block-size: 1.5em; color: currentColor; }
.brand-lockup__mark svg { display: block; inline-size: 100%; block-size: 100%; }
.header__home .brand-lockup__mark { inline-size: 1.4em; block-size: 1.4em; }

.nav { display: none; }
.nav__list {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__link {
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: color var(--duration-micro) var(--ease-state),
              text-decoration-color var(--duration-micro) var(--ease-state);
}
/* Hover draws the same underline the current-page link wears (offset 0.4em),
   so hovering previews "you are here" — one micro-pattern, reused, not a new
   idea. Same reveal grammar as .card__link and .btn--quiet. */
@media (hover: hover) {
  .nav__link:hover { color: var(--accent); text-decoration-color: currentColor; }
}
.nav__link[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-inline-start: auto;
}
.lang-switch {
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-2);
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header .btn--primary {
  min-block-size: 40px;
  padding-inline: var(--space-4);
  font-size: var(--text-small);
}

.nav-toggle { display: inline-flex; }

@media (min-width: 768px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}

/* Mobile sheet — the bar keeps lockup + CTA + Menu (CTA stays one tap);
   the language switcher lives inside the sheet below 768px. */
@media (max-width: 767.98px) {
  .nav {
    position: fixed;
    inset-block-start: 4.5rem;
    inset-inline: 0;
    background: var(--surface-primary);
    border-block-end: 1px solid var(--border-subtle);
    padding: var(--space-6) var(--gutter) var(--space-8);
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; gap: var(--space-4); }
  .nav__link { font-size: var(--text-h4); display: block; padding-block: var(--space-2); }

  .header__bar { gap: var(--space-3); }
  .header__actions { gap: var(--space-3); }
  .header__actions > .lang-switch { display: none; }
  .header .btn--primary { padding-inline: var(--space-3); }
}
.nav__lang { display: none; }
@media (max-width: 767.98px) {
  .nav__lang { display: block; border-block-start: 1px solid var(--border-subtle); margin-block-start: var(--space-4); padding-block-start: var(--space-4); }
}

/* ------------------------------------------------------------------
   Hero — typography-led; the type IS the image. One bronze CTA.
   ------------------------------------------------------------------ */

.hero { padding-block: var(--section-lg); }
.hero:not(.hero--proofline) {
  min-block-size: min(720px, 82svh);
  display: grid;
  align-items: center;
  padding-block-start: clamp(9rem, 14vw, 12rem);
  border-block-end: 1px solid var(--border-strong);
  background:
    linear-gradient(90deg, transparent 0 49.95%, color-mix(in srgb, var(--accent) 9%, transparent) 50%, transparent 50.05%),
    radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 32%),
    var(--surface-primary);
}
.hero__eyebrow {
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-block-end: var(--space-6);
}
.hero__title { max-inline-size: 18ch; }
.hero__sub {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  max-inline-size: 52ch;
  margin-block: var(--space-8) var(--space-12);
}

/* ------------------------------------------------------------------
   Cinematic brand hero (Phase 1.5, BRAND_GUIDE §25b) — the meridian arc
   motif elevated to a full-bleed atmospheric centerpiece: a concentric
   arc field + a single warm depth-glow behind oversized display type, with
   a Hollywood-grade GSAP entrance (masked line reveal + arc materialize +
   cursor parallax). Honest brand art — no product claim, no fabrication.
   The real proof lives in the sections below (The Meridian Standard + work).
   ------------------------------------------------------------------ */
.hero--cinematic {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: min(90vh, 940px);
  overflow: clip;
  isolation: isolate;
}
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
  will-change: transform;
}
.hero__glow {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-start: 60%;
  inline-size: 68vw;
  block-size: 68vw;
  max-inline-size: 1100px;
  max-block-size: 1100px;
  translate: -50% -50%;
  /* §25 material-gradient (functional depth, not decoration): a single warm
     radial that gives the charcoal ground atmosphere behind the type. */
  background: radial-gradient(circle,
              color-mix(in srgb, var(--accent) 20%, transparent) 0%,
              color-mix(in srgb, var(--accent) 6%, transparent) 34%,
              transparent 62%);
}
.hero__arcs {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  color: var(--accent);
}
.hero__inner { position: relative; z-index: 1; }

/* Interior-hero atmosphere backdrop (Phase 1.1b) — a generated charcoal/bronze
   arc-field behind the hero content. AVIF -> WebP -> JPG via image-set; masked to
   fade into the ground so text stays legible. Replaces the thin .section__arc line.
   Atmosphere only, and NEVER on the frozen homepage hero (hero--cinematic). */
.hero--atmosphere { position: relative; isolation: isolate; overflow: hidden; }
.hero--atmosphere::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--surface-primary);
  background-image: url("/assets/atmosphere/arc-field.jpg");
  background-image: image-set(
    url("/assets/atmosphere/arc-field.avif") type("image/avif"),
    url("/assets/atmosphere/arc-field.webp") type("image/webp"),
    url("/assets/atmosphere/arc-field.jpg") type("image/jpeg"));
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 90%);
}
.hero--atmosphere .section__arc { display: none; }
/* Integrated layout (Phase 1.6): editorial type leads on the left, the real
   proof sits to the right — vertically centred, arcs sweeping behind it, a
   strong elevation shadow lifting it off the atmosphere. One composition,
   not a two-column card split. Mobile stacks: identity, then proof below. */
@media (min-width: 960px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.86fr);
    gap: var(--space-16);
    align-items: center;
  }
}
.hero__title--xl {
  font-size: clamp(2.4rem, 3.7vw + 0.6rem, 4.35rem);
  line-height: 1.03;
  max-inline-size: 15ch;
  letter-spacing: -0.015em;
}
.hero__mask { display: block; overflow: clip; padding-block-end: 0.08em; }
.hero__line { display: block; }
.hero__proof {
  align-self: center;
  box-shadow: var(--shadow-3);        /* the product lifts off the atmosphere */
  margin-block-start: var(--space-8);
}
@media (min-width: 960px) { .hero__proof { margin-block-start: 0; } }
.hero__proof img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* Cinematic entrance initial state (§25b, GSAP engine). One rule hides the
   whole text block pre-paint (no FOUC); GSAP sets per-element start states
   (line masks, fades) and reveals them. The arc field + glow are hidden here
   and materialized by GSAP. All only under `.cinematic` — reduced-motion /
   no-JS never sets it, so the hero is fully visible and static in both, and
   cinematic.js reveals everything if GSAP fails to load. */
.cinematic .hero__inner { opacity: 0; }
.cinematic .hero__arcs,
.cinematic .hero__glow { opacity: 0; }

/* ------------------------------------------------------------------
   Selected-work showcase — real device-framed product captures as the
   homepage proof band (replaces the typographic-cover cards). Each item is
   one click target to its case study; the frame reads as shipped product.
   Uniform 16:10 crop so mixed source aspects present as one gallery.
   ------------------------------------------------------------------ */

.showcase__item {
  display: block;
  text-decoration: none;
  color: inherit;
}
.showcase__frame {
  transition: translate var(--duration-standard) var(--ease-state),
              box-shadow var(--duration-standard) var(--ease-state);
}
.showcase__frame img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;   /* keep the recognizable top chrome of each capture */
}
.showcase__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-block-start: var(--space-4);
}
.showcase__title { margin-block-start: var(--space-2); }
.showcase__body {
  color: var(--text-secondary);
  font-size: var(--text-body);
  margin-block-start: var(--space-2);
}
.showcase__link {
  display: inline-block;
  margin-block-start: var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duration-micro) var(--ease-state),
              color var(--duration-micro) var(--ease-state);
}
@media (hover: hover) {
  .showcase__item:hover .showcase__frame {
    translate: 0 -4px;
    box-shadow: var(--shadow-2);
  }
  .showcase__item:hover .showcase__link {
    color: var(--accent);
    text-decoration-color: currentColor;
  }
}

/* ------------------------------------------------------------------
   The Meridian Standard — principles, each proven by a REAL artifact
   (a verification run, an architecture diagram, a measured craft score),
   not a claim. Editorial rows: artifact one side, principle the other,
   alternating. (BRAND_GUIDE §25 — evidence is the anchor.)
   ------------------------------------------------------------------ */
.principle {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-12);
  border-block-start: 1px solid var(--border-subtle);
}
.principle:first-of-type { border-block-start: 0; }
@media (min-width: 900px) {
  .principle { grid-template-columns: 5fr 6fr; gap: var(--space-16); }
  .principle--flip .principle__art { order: 2; }
  .principle--flip .principle__copy { order: 1; }
}
.principle__index {
  font-family: var(--font-display-latin);
  font-variation-settings: var(--display-axes);
  font-optical-sizing: none;
  font-size: var(--text-h3);
  color: var(--accent);
  margin-block-end: var(--space-3);
}
.principle__title { margin-block-end: var(--space-4); }
.principle__body { color: var(--text-secondary); max-inline-size: 46ch; }

/* ------------------------------------------------------------------
   Case-study entrance — Selected Work as immersive full-width bands
   (no cards). Each project is one cinematic moment: a large real
   device-framed capture beside a short challenge→outcome narrative,
   revealed on scroll by GSAP (cinematic.js). Alternating sides for
   editorial rhythm. (Brief: "each project should feel like a launch film.")
   ------------------------------------------------------------------ */
.case-entrance {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-16);
  border-block-start: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
}
.case-entrance:first-of-type { border-block-start: 0; }
@media (min-width: 900px) {
  .case-entrance { grid-template-columns: 7fr 5fr; gap: var(--space-16); }
  .case-entrance--flip .case-entrance__media { order: 2; }
  .case-entrance--flip .case-entrance__body { order: 1; }
}
.case-entrance__index {
  font-family: var(--font-display-latin);
  font-variation-settings: var(--display-axes);
  font-optical-sizing: none;
  font-size: var(--text-body-lg);
  color: var(--accent);
  letter-spacing: 0.05em;
}
.case-entrance__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-block: var(--space-4) var(--space-3);
}
.case-entrance__title { margin-block-end: var(--space-4); }
.case-entrance__lead {
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  max-inline-size: 44ch;
}
.case-entrance__link {
  display: inline-block;
  margin-block-start: var(--space-6);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duration-micro) var(--ease-state),
              color var(--duration-micro) var(--ease-state);
}
.case-entrance__media { transition: box-shadow var(--duration-standard) var(--ease-state); }
.case-entrance__media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
@media (hover: hover) {
  .case-entrance:hover .case-entrance__link { color: var(--accent); text-decoration-color: currentColor; }
  .case-entrance:hover .case-entrance__media { box-shadow: var(--shadow-2); }
}
/* Initial state for [data-cinematic] scroll reveals is set by GSAP .from()
   itself (cinematic.js) — the rows are below the fold, so no flash; and if
   GSAP is absent or reduced-motion is on, nothing is hidden and the content
   is fully visible and static. No CSS pre-hide needed here (unlike the hero). */

/* ------------------------------------------------------------------
   Showroom atmosphere (homepage) — one continuous lit charcoal environment
   behind the whole page, so sections read as rooms in the same gallery, not
   separate black blocks. Quiet ambient bronze pools (restrained per the
   post-revert standard), alternating down the page, + a faint charcoal depth
   band under the hero. Decorative + aria-hidden, sits behind content; non-hero
   sections go transparent to reveal it. The FROZEN hero keeps its own opaque
   ground and is untouched. Reduced-motion: fully static (CSS only) — GSAP adds
   only a gentle scroll drift for "walking through a lit space" depth.
   ------------------------------------------------------------------ */
.showroom { position: relative; }
.showroom__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
  will-change: transform;
  /* Soft ambient bronze pools only — no hard bands, so the hero flows into the
     body with no seam. Wide, low-opacity radials that overlap into one
     continuous field; the first sits right at the hero/body boundary to bridge
     it. */
  background:
    radial-gradient(60% 26% at 72% 9%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 66%),
    radial-gradient(56% 22% at 18% 27%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 66%),
    radial-gradient(62% 24% at 82% 47%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 66%),
    radial-gradient(56% 22% at 22% 67%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 66%),
    radial-gradient(64% 26% at 70% 88%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 66%);
}
/* Non-hero sections become transparent so the environment is continuous; they
   sit above the atmosphere. The hero (frozen) is excluded and keeps its ground. */
.showroom .section:not(.hero) {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------
   Editorial lede — a bespoke two-column statement moment (replaces flat
   text-only sections): an oversized display headline holds the left, a
   supporting column sits bottom-aligned to the right. Asymmetric, designed,
   sits in the showroom atmosphere — not a left-aligned paragraph block.
   ------------------------------------------------------------------ */
.lede__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  max-inline-size: 20ch;
  text-wrap: balance;
}
.lede__body {
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  max-inline-size: 46ch;
}
.lede__body > p:first-child { margin-block-start: 0; }
@media (max-width: 899.98px) { .lede__body { margin-block-start: var(--space-8); } }
@media (min-width: 900px) {
  /* Top-aligned two-column spread: headline and supporting copy begin on the
     same line and read left→right as one composition. The body sits slightly
     inset from the top of the headline's cap height for an editorial baseline. */
  .lede { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: start; }
  .lede__body { padding-block-start: var(--space-3); }
}

/* ------------------------------------------------------------------
   Capabilities — the "what we do" clusters as editorial rows (NOT cards):
   a numbered aside on the left, the statement + body + link on the right,
   hairline dividers between. One click target per row; the whole row lights
   on hover. Unifies the page's editorial rhythm; removes the card grid.
   ------------------------------------------------------------------ */
.capability {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-12);
  border-block-start: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-standard) var(--ease-state);
}
.capability:first-of-type { border-block-start: 0; }
@media (min-width: 768px) {
  .capability { grid-template-columns: 4fr 8fr; gap: var(--space-16); align-items: start; }
}
.capability__aside { display: flex; align-items: baseline; gap: var(--space-4); }
.capability__num {
  font-family: var(--font-display-latin);
  font-variation-settings: var(--display-axes);
  font-optical-sizing: none;
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--accent);
}
.capability__name {
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--duration-micro) var(--ease-state);
}
.capability__title { font-size: var(--text-h3); margin-block-end: var(--space-4); max-inline-size: 24ch; }
.capability__body { color: var(--text-secondary); max-inline-size: 60ch; }
.capability__link {
  display: inline-block;
  margin-block-start: var(--space-6);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duration-micro) var(--ease-state),
              color var(--duration-micro) var(--ease-state);
}
@media (hover: hover) {
  .capability:hover { border-color: var(--border-strong); }
  .capability:hover .capability__name,
  .capability:hover .capability__link { color: var(--accent); }
  .capability:hover .capability__link { text-decoration-color: currentColor; }
}

/* ------------------------------------------------------------------
   Case-study chapter furniture (CINEMATIC_STANDARD) — chapter labels now use
   the fusion .plaque primitive (css/fusion/plaque.css); the standalone
   .chapter__kicker rule was retired here (Phase 4 extraction, 2026-07-13) —
   see FUSION_SYSTEM.md §3. A proof strip holds verified-not-claimed facts as
   bronze-ruled evidence.
   ------------------------------------------------------------------ */
.proof-strip {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--space-8);
}
.proof-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-6);
}
.proof-strip__list li { max-inline-size: 64ch; color: var(--text-secondary); }
.proof-strip__list strong { color: var(--text-primary); }

/* ------------------------------------------------------------------
   Device-frame figure — SHARED component (promoted from work.css
   2026-07-12 so the hero + work pages both use one source of truth).
   Real screenshots, honestly captioned; §25 window chrome opt-in.
   ------------------------------------------------------------------ */

.work-figure {
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);           /* §25: evidence sits as a raised object */
  overflow: clip;
}

/* Device/window chrome (BRAND_GUIDE §25 — product presentation). A slim title
   bar with three dots frames a capture as a real application window, so a
   screenshot reads as *shipped product*, not a loose image. Generated content
   → not announced to assistive tech. OPT-IN via .work-figure--frame: only
   genuine app/terminal screenshots are framed. Brand covers and system
   diagrams are never framed (a cover or a blueprint is not an app window). */
.work-figure--frame::before {
  content: "";
  display: block;
  block-size: 1.75rem;
  background: var(--surface-primary);
  border-block-end: 1px solid var(--border-subtle);
  /* three window dots, drawn with radial gradients (functional, §25) — no assets */
  background-image: radial-gradient(circle at 0.85rem 50%, var(--text-secondary) 3px, transparent 3.5px),
                    radial-gradient(circle at 1.75rem 50%, var(--text-secondary) 3px, transparent 3.5px),
                    radial-gradient(circle at 2.65rem 50%, var(--text-secondary) 3px, transparent 3.5px);
  background-repeat: no-repeat;
}

.work-figure img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  background: var(--surface-raised);
  color: var(--text-secondary);          /* alt text while the file lands */
  font-size: var(--text-small);
  padding: 0;
}
.work-figure figcaption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  color: color-mix(in srgb, var(--text-secondary), var(--text-primary) 24%);
  border-block-start: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
}

/* ------------------------------------------------------------------
   Card — variants: pillar (service-cluster), work-entry (honesty label
   is part of the anatomy), plain. Hover: restrained lift (A8 limits).
   ------------------------------------------------------------------ */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: var(--space-8);
  box-shadow: var(--shadow-1);            /* §25: governed rest elevation */
  transition: translate var(--duration-standard) var(--ease-state),
              border-color var(--duration-standard) var(--ease-state),
              box-shadow var(--duration-standard) var(--ease-state);
}
/* An interactive card is one that is itself a link, is marked --link, or
   contains a .card__link (the article-wrapped work/pillar cards). Hovering
   anywhere on it lifts the surface, firms the border, and lights the inner
   link so the whole card reads as one click target — the affordance the
   article-wrapped cards were silently missing. */
@media (hover: hover) {
  a.card:hover,
  .card--link:hover,
  .card:has(.card__link):hover {
    translate: 0 -4px;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);          /* rises toward the reader on hover */
  }
  a.card:hover .card__link,
  .card--link:hover .card__link,
  .card:has(.card__link):hover .card__link {
    color: var(--accent);
    text-decoration-color: currentColor;
  }
}

/* Card cover — bleeds to the card's own edges by cancelling its padding;
   1px border remains visible as the frame. Fixed aspect-ratio reserves
   the box so cards don't jump as covers load. First child, above the
   honesty label / kicker / title stack. */
.card-media {
  display: block;
  margin-block-start: calc(var(--space-8) * -1);
  margin-inline: calc(var(--space-8) * -1);
  margin-block-end: var(--space-6);
  border-start-start-radius: 2px;
  border-start-end-radius: 2px;
  overflow: clip;
}
.card-media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1280 / 769;
  object-fit: cover;
  transition: scale var(--duration-large) var(--ease-state);
}
/* Cover eases toward the viewer as its card is hovered — evidence emphasis,
   contained by .card-media's overflow: clip. Reduced-motion collapses the
   transition (base.css); the end scale is imperceptible and harmless. */
@media (hover: hover) {
  a.card:hover .card-media img,
  .card--link:hover .card-media img,
  .card:has(.card__link):hover .card-media img {
    scale: 1.03;
  }
}

.card__kicker {
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent), var(--text-primary) 24%);
  margin-block-end: var(--space-3);
}
.card__title { margin-block-end: var(--space-3); }
.card__body {
  color: color-mix(in srgb, var(--text-secondary), var(--text-primary) 22%);
  font-size: var(--text-body);
}
.card__link {
  display: inline-block;
  margin-block-start: var(--space-6);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duration-micro) var(--ease-state),
              color var(--duration-micro) var(--ease-state);
}
@media (hover: hover) {
  .card__link:hover { color: var(--accent); text-decoration-color: currentColor; }
}

/* Work entry — honesty label is anatomy, not an option */
.card--work .card__label {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-secondary), var(--text-primary) 24%);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-4);
}

/* ------------------------------------------------------------------
   Blueprint diagram block — Part D language. 1.5px strokes, thin-stroke
   nodes (2px radius), bronze approval gates on connectors. Flows
   inline-start → inline-end (auto-mirrors in RTL); horizontal scroll
   inside its own container on mobile.
   ------------------------------------------------------------------ */

.blueprint { overflow-x: auto; padding-block: var(--space-4); }
.blueprint__flow {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  min-inline-size: max-content;
}
.blueprint__node {
  border: 1.5px solid var(--text-primary);
  border-radius: 2px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-small);
  font-weight: 500;
  white-space: nowrap;
}
.blueprint__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  flex: none;
}
.blueprint__line {
  inline-size: var(--space-6);
  block-size: 0;
  border-block-start: 1.5px solid var(--text-primary);
}
.blueprint__arrow {
  inline-size: 0;
  block-size: 0;
  border-block-start: 4px solid transparent;
  border-block-end: 4px solid transparent;
  border-inline-start: 6px solid var(--text-primary);   /* mirrors in RTL */
  margin-inline-start: -2px;
}
.blueprint__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.blueprint__gate-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.blueprint__gate-label {
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ------------------------------------------------------------------
   Pull-quote / statement block — display serif, oversized, bronze rule.
   ------------------------------------------------------------------ */

.statement {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--space-8);
}
.statement__text {
  font-family: var(--font-display-latin);
  font-variation-settings: var(--display-axes);
  font-optical-sizing: none;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  max-inline-size: 18ch;   /* measured in the display face's own ch */
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   Engagement-posture block — the AED floor + one philosophy sentence.
   Explicitly NOT a pricing table; no tier component exists.
   ------------------------------------------------------------------ */

.posture { display: grid; gap: var(--space-8); }
@media (min-width: 768px) {
  .posture { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-12); }
}
.posture__philosophy { color: var(--text-secondary); }

/* ------------------------------------------------------------------
   Footer — slim sitemap, contact, language toggle, legal +
   registration slot, meridian line motif.
   ------------------------------------------------------------------ */

.footer {
  border-block-start: 1px solid var(--border-subtle);
  padding-block: var(--space-16) var(--space-8);
  position: relative;
  overflow: clip;
}
.footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer a {
  color: var(--text-secondary);
  font-size: var(--text-small);
  text-decoration: none;
}
@media (hover: hover) {
  .footer a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.25em; }
}
.footer__legal {
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
}

/* ------------------------------------------------------------------
   Form field — promoted from the contact page's local <style> (it was
   marked "promote when systematized"). Labels always visible (§19),
   errors in text not colour. Focus ring stays the global :focus-visible
   token (A7); the border-colour ladder below is the field's own response
   and does not restyle the ring.
   Interaction ladder: rest → hover (border firms) → focus (border to accent,
   under the bronze ring).
   ------------------------------------------------------------------ */

.form-stack { display: grid; gap: var(--space-6); max-inline-size: 60ch; }
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-small); font-weight: 500; }
.field__input {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  font-family: var(--font-body-latin);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  transition: border-color var(--duration-micro) var(--ease-state);
}
.form-stack__submit {
  display: grid;
  justify-items: start;
  padding-block-start: var(--space-2);
}
.form-status {
  max-inline-size: 52ch;
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border-inline-start: 2px solid var(--state-warning);
  background: color-mix(in srgb, var(--state-warning) 10%, transparent);
  color: var(--text-primary);
}
.field__input::placeholder { color: var(--text-secondary); }
@media (hover: hover) {
  .field__input:hover { border-color: var(--text-secondary); }
}
.field__input:focus-visible { border-color: var(--accent); }
textarea.field__input { min-block-size: 10rem; resize: vertical; }