/* ============================================================================
   RIVET Studio — one-page site
   Breakpointless · fluid typography · full-bleed (Anduril-style)
   Brand tokens lifted from the RIVET Design System Figma (dhtvRhs44QuwV1QdgOhMlr).
   No @media WIDTH breakpoints for layout — only prefers-reduced-motion / color-scheme.
   ============================================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
/* <picture> is only an AVIF-with-fallback wrapper — it must not add a box, so the inner <img>
   stays the real flex/grid/block child (keeps align-self, width:100%, object-fit, absolute inset).
   The <source> must be boxless too: under a display:contents parent it otherwise becomes a PHANTOM
   flex/grid item (owner-caught: it split the cred-avatar grid into two row tracks and pushed the
   headshot ~17px below center). */
picture { display: contents; }
picture source { display: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

/* ============================================================================
   TOKENS — RIVET brand (base / light mode), from Figma variables
   ============================================================================ */
:root {
  /* Type faces — Figma NN-family */
  --font-01: 'TASA Orbiter', system-ui, sans-serif;      /* headings + body */
  --font-02: 'Stick No Bills', system-ui, sans-serif;    /* display wordmarks / numbers */
  --font-03: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace; /* tracked all-caps labels */

  /* Theme colours — Figma theme/* (base mode) */
  --background: #d2d5d9;
  --background-2: #edf0f5;
  --border: rgba(33, 36, 41, 0.2);
  --text-heading: #111a26;
  --text: #4a5666;
  --icon: #ff6c2f;                 /* the RIVET orange */
  --icon-hover: #ffa782;
  --rivet-border: #77808c;
  --logo-top: #1d2c40;
  --btn-primary-bg: #ff6c2f;
  --btn-primary-text: #111a26;
  --btn-primary-bg-hover: #ffa782;
  --btn-primary-text-hover: #662b13;
  --btn-secondary-text: #111a26;
  --link: #ff6c2f;
  --link-hover: #99411c;
  --neutral-100-o20: rgba(237, 240, 245, 0.2);

  /* Type scale — Figma font-size/* + fluid clamp() (desktop bound == Figma px) */
  --fs-text-xxs: clamp(0.5rem, 0.4489rem + 0.2273vw, 0.625rem);
  --fs-text-xs:  clamp(0.625rem, 0.5739rem + 0.2273vw, 0.75rem);
  --fs-text-s:   clamp(0.875rem, 0.8239rem + 0.2273vw, 1rem);        /* 14 → 16 */
  --fs-text-body:clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);       /* 16 → 18 */
  --fs-text-l:   clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);    /* 18 → 20 */
  --fs-eyebrow:  clamp(0.625rem, 0.5739rem + 0.2273vw, 0.75rem);
  --fs-h6: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);            /* 18 */
  --fs-h5: clamp(1.375rem, 1.3239rem + 0.2273vw, 1.5rem);         /* 24 */
  --fs-h4: clamp(1.75rem, 1.6477rem + 0.4545vw, 2rem);           /* 32 */
  --fs-h3: clamp(2.25rem, 1.9432rem + 1.3636vw, 3rem);          /* 48 */
  --fs-h2: clamp(2.5rem, 1.8864rem + 2.7273vw, 4rem);         /* 64 */
  --fs-h1: clamp(2.75rem, 1.9318rem + 3.6364vw, 5rem);       /* 44 → 80 */

  /* Oversized display steps — keep scaling toward full-bleed (Anduril) */
  --fs-mega:     clamp(3rem, 0.25rem + 10.9vw, 13.125rem);   /* $5.1B+ / 3 UNICORNS / 34 BRANDS — Figma 210px @1920 */
  --fs-city:     clamp(3.75rem, 30vw, 14rem);   /* NYC / LAS / SFO wordmarks — viewport-proportional so phones get them BIG (~112px @375); Figma 224 cap at desktop */
  --fs-wordmark: clamp(4.5rem, 0.5rem + 29vw, 42rem);    /* footer RIVET wordmark */

  /* Spacing — Figma space/* + site/* (fluid) */
  --space-1: clamp(0.25rem, 0.1477rem + 0.4545vw, 0.5rem);
  --space-2: clamp(0.5rem, 0.3977rem + 0.4545vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
  --space-4: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
  --space-5: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
  --space-6: clamp(1.75rem, 1.4432rem + 1.3636vw, 2.5rem);
  --space-7: clamp(2.25rem, 1.9432rem + 1.3636vw, 3rem);
  --space-8: clamp(2.5rem, 1.8864rem + 2.7273vw, 4rem);
  --site-margin: clamp(1.25rem, 0.1818rem + 3.6364vw, 3rem);   /* 20 → 48 gutter */
  --site-gutter: 1rem;
  --section-space-small: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);   /* 48 → 80 */
  --section-space-main:  clamp(4rem, 2.7727rem + 5.4545vw, 7rem);   /* 64 → 112 */
  --section-space-top:   clamp(6rem, 3.5rem + 11vw, 14rem);         /* hero top 224 */

  /* Radii + borders */
  --radius-small: 3px;
  --radius-round: 99999px;
  --bw: 2px;                        /* border-width/main */

  --maxw: 1728px;                   /* Figma content max (1920 − 2×96) — a soft cap, not a hard column */
}

/* Dark sections (contact) — Figma theme dark mode */
[data-theme="dark"] {
  --background: #111a26;
  --background-2: #0c121a;
  --border: rgba(237, 240, 245, 0.2);
  --text-heading: #edf0f5;
  --text: #a5abb3;
  --rivet-border: #47505c;
  --btn-secondary-text: #edf0f5;
}

/* ============================================================================
   BASE ELEMENTS
   ============================================================================ */
body {
  font-family: var(--font-01);
  font-size: var(--fs-text-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--background);
  overflow-x: clip;                 /* safety net vs any bleed-induced h-scroll */
}

h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: 600; }
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: 1; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { text-wrap: pretty; }

::selection { background: var(--icon); color: #fff; }

/* ============================================================================
   PRIMITIVES
   ============================================================================ */

/* Full-bleed section: fills the whole width, content inset by a fluid gutter. */
.section {
  width: 100%;
  padding-block: var(--section-space-main);
  padding-inline: var(--site-margin);
}
.section--tight { padding-block: var(--section-space-small); }

/* Inner content wrapper — soft-capped, never a hard centered column. */
.inner { width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* Break an element back out to the true edge from inside a padded section. */
.bleed { margin-inline: calc(-1 * var(--site-margin)); }

/* Reading measure for prose (a per-element cap, not a page column). */
.measure { max-width: 62ch; }

/* THE breakpointless-collapse linchpin: N columns → 1 with no @media.
   min(100%, --col) keeps the track floor from ever exceeding the container. */
.cols {
  display: grid;
  gap: var(--gap, var(--space-6));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 20rem)), 1fr));
}

/* Eyebrow / mono label */
.eyebrow {
  font-family: var(--font-03);
  font-size: var(--fs-text-s);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
}
.eyebrow--accent { color: var(--icon); }

/* A hairline rule under a heading/eyebrow (Figma div.border) */
.rule { border: 0; border-top: var(--bw) solid var(--border); }

/* Brand text selection (owner): orange highlight, dark navy text — mirrors the contact-button hover */
::selection { background: var(--icon); color: #111a26; }

/* THE rivet outline — every inline-SVG rivet detail (nav rail bars, number-card bars, ⊗ screws)
   takes its stroke from this one rule, so the weight/colour stays uniform site-wide (1px, matching
   the nav hairline). Standalone SVG FILES embed the same class in their own <style> (an <img>/
   background SVG can't see page CSS): assets/rivet-bar.svg, assets/rivet-bar-v.svg. */
.RivetStroke { stroke: var(--rivet-border); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-03);
  font-weight: 500;
  font-size: var(--fs-text-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--text-heading);
}
/* Text button with the orange dash (Figma a.btn) */
.btn--dash::before {
  content: "";
  width: 48px;
  height: var(--bw);
  background: var(--icon);
  flex: none;
  transition: width 0.2s ease;
}
.btn--dash:hover::before { width: 64px; }

/* Icon font */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Accessibility ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  background: var(--text-heading);
  color: var(--background);
  padding: 0.6em 1em;
  border-radius: var(--radius-small);
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--space-4); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--icon);
  outline-offset: 3px;
}
.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;
}

/* ============================================================================
   SITE HEADER / NAV
   ============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  container-type: inline-size;   /* query context for the hamburger swap (see MOBILE/TABLET NAV) */
  container-name: header;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rivet-border);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--border); }

/* Top rivet rail — bordered bars of hexagon rivets (full-bleed, decorative).
   No-JS fallback tiles the static bar; JS enhances to a dynamic edge-to-edge fill
   (main.js initRivetRail) where bar count + hexagons-per-bar flex so every bar is
   complete and the first/last hug the gutter — no sliced bars at the edges. */
.rivet-rail {
  width: 100%;
  height: 34px;
  background-image: url("assets/rivet-bar.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 20px;
}
.rivet-rail.is-dynamic {
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 6.857px;
  overflow: clip;
}
.rivet-rail__bar { flex: 0 0 auto; height: 20px; display: block; }

/* Main nav row: logo (left) · links (centered) · make-contact (right) */
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  width: 100%;
  padding-inline: var(--site-margin);
  padding-block: clamp(0.75rem, 1.55vw, 1.85rem);   /* → the Figma 128px bar at 1920 (68.7 logo + 2×29.6) */
}
.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 3.2vw, 4rem);
  flex-wrap: nowrap;
  justify-content: center;
}
.site-nav__links a {
  font-family: var(--font-03);
  font-weight: 500;
  font-size: 1.125rem;   /* Figma fixed 18 (was --fs-text-l → 20 at desktop) */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-heading);
  transition: color 0.2s ease;
}
.site-nav__links a:hover { color: var(--icon); }
/* Scroll-spy active state (main.js initScrollSpy flags the nav link whose section is in view):
   the current link stays orange (same as hover). The Make-contact CTA is not a spy target. */
.site-nav__links a.is-current { color: var(--icon); }

/* Make-contact — rectangular, orange-outlined, dark label (Figma nav button) */
.btn--contact {
  flex: 0 0 auto;
  margin-inline-start: auto;
  /* Figma control size, FIXED (not viewport-clamped — it was shrinking at laptop widths): 48 tall, 33 inline, 16px/0.1em label */
  height: 3rem;
  padding-inline: 2.0625rem;
  background: transparent;   /* rides the frosted nav surface (an opaque chip glowed over the dark section); hover supplies the fill */
  color: var(--btn-secondary-text);
  border: 1px solid var(--icon);
  border-radius: 0;
  font-size: 1rem;
  letter-spacing: 0.1em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn--contact:hover { background: var(--icon); color: #111a26; }   /* owner: dark navy label on the orange hover fill */

/* ============================================================================
   MOBILE/TABLET NAV — hamburger + slide-out drawer (owner request 2026-07-10).
   Swap point = a CONTAINER query on the header (the site's no-width-@media rule;
   same mechanism as the hero swap). JS-gated via html.js so no-JS keeps the
   flex-wrap fallback. The drawer lives at BODY level: the header's
   backdrop-filter creates a containing block that would trap position:fixed.
   ============================================================================ */
.nav-toggle {
  display: none;   /* shown below 60rem when JS is up */
  width: 3rem; height: 3rem; flex: none;
  margin-inline-start: auto;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--icon);
  color: var(--text-heading);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: var(--icon); color: #111a26; }
.nav-toggle .material-symbols-outlined { font-size: 26px; }
@container header (max-width: 60rem) {
  html.js .site-nav { display: none; }
  html.js .site-header .btn--contact { display: none; }
  html.js .nav-toggle { display: inline-flex; }
}
/* NOTE: the scrim + drawer carry the `hidden` ATTRIBUTE in the markup as a stale-CSS safety
   net (a partial deploy once rendered the drawer as in-flow content on the live site). The
   explicit display values here deliberately override [hidden] once THIS stylesheet loads. */
.nav-scrim {
  display: block;
  position: fixed; inset: 0; z-index: 98;
  background: rgba(17, 26, 38, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
body.menu-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
/* Drawer surface = the NAV's frosted light (blueprint look, owner-tuned), with the
   1px rivet-border keyline on its left edge — reads as the nav folding out. */
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
  width: min(21rem, 86vw);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid var(--rivet-border);   /* the blueprint keyline */
  display: flex; flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6) var(--space-7);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.35s;
}
body.menu-open .mobile-drawer { transform: none; visibility: visible; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.mobile-drawer__close {
  align-self: flex-end;
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--icon);   /* matches the hamburger + MAKE CONTACT outline */
  color: var(--text-heading);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-drawer__close:hover, .mobile-drawer__close:focus-visible { background: var(--icon); color: #111a26; }
.mobile-drawer__links { display: flex; flex-direction: column; }
.mobile-drawer__links li:first-child a { border-top: 1px solid var(--border); }
.mobile-drawer__links a {
  display: block;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);   /* soft blueprint hairlines between links */
  font-family: var(--font-03); font-weight: 500;
  font-size: 1.25rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-heading);
  transition: color 0.2s ease;
}
.mobile-drawer__links a:hover, .mobile-drawer__links a:focus-visible { color: var(--icon); }
.mobile-drawer__cta { margin-top: auto; width: 100%; justify-content: center; margin-inline-start: 0; }   /* inherits the standard MAKE-CONTACT look on the light surface */

/* ============================================================================
   ACCORDION (capabilities)  —  grid-rows 0fr↔1fr, all-open by default (no-JS safe)
   ============================================================================ */
.accordions { --cap-indent: clamp(3rem, 5.73vw, 6.875rem); margin-top: var(--space-5); }   /* the Figma 110px dot column, shared by header + panel */
.accordion { border-bottom: var(--bw) solid var(--border); }   /* Figma: each group closes with a rule (none above the first) */
.accordion__head-wrap { margin: 0; font-weight: inherit; }
.accordion__header {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-block: var(--space-4) var(--space-6);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-heading);
}
/* Orange ⬢ bullet in the fixed indent column (Figma 16px glyph, lh 40.8 aligns with the H3 cap) */
.accordion__dot {
  flex: 0 0 clamp(1.5rem, 5.73vw, 6.875rem);   /* shrinks harder than --cap-indent on tiny screens */
  font-family: var(--font-01);
  font-size: 1rem;
  line-height: 2.55;
  color: var(--icon);
}
.accordion__titlewrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.67vw, 2rem);
  min-width: 0;
  padding-right: clamp(0.25rem, 3.33vw, 4rem);
}
.accordion__title {
  font-family: var(--font-01);
  font-weight: 600;
  /* Figma 01-H3 (48) at desktop, but with a PHONE-SIZED floor so "Communications" fits a
     375px column on one line — no mid-word breaking (owner: "I'd rather it not hyphenate") */
  font-size: clamp(1.4rem, 0.5rem + 4.5vw, 3rem);
  line-height: 1.3;
  color: var(--text-heading);
}
.accordion__desc {
  font-family: var(--font-01);
  font-size: var(--fs-text-body);   /* Figma 01-Text-Body */
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
}
/* expand_circle_up at ExtraLight (Figma): open points up, closed flips down */
.accordion__chevron {
  flex: none;
  font-size: 32px;
  font-variation-settings: "wght" 200;
  color: var(--text-heading);
  transform: rotate(180deg);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion[data-open="true"] .accordion__chevron { transform: none; }
.accordion__header:hover .accordion__chevron { color: var(--icon); }

.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;                 /* default OPEN → no-JS shows content */
  transition: grid-template-rows 0.4s ease;
}
.accordion[data-open="false"] .accordion__panel { grid-template-rows: 0fr; }
.accordion__panel-inner { overflow: hidden; min-height: 0; }
/* Tiles fill the row (auto-fit collapses empty tracks → each group's tiles stretch to full
   width like the Figma 7/5/6-up rows), indented under the dot column. */
.accordion__grid {
  display: grid;
  gap: clamp(1.25rem, 1.67vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  padding-left: var(--cap-indent);
  padding-bottom: var(--space-7);
}
.cap-item { display: flex; flex-direction: column; gap: var(--site-gutter); }
/* Icon box: full tile width × the Figma 201px, Thin (100-weight) icon at ~100px */
.cap-item__icon {
  width: 100%;
  height: clamp(8rem, 10.47vw, 12.5625rem);
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 1px;
  background: var(--background);
  color: var(--text-heading);
}
.cap-item__icon .material-symbols-outlined {
  font-size: clamp(56px, 5.2vw, 100px);
  font-variation-settings: "wght" 100;
}
.cap-item__label { font-size: var(--fs-text-s); color: var(--text); line-height: 1.6; letter-spacing: 0.03em; }

/* ============================================================================
   LOCATIONS switcher  —  owner's flip module contract
   ============================================================================ */
/* Figma 10217:6228: three fixed ~338px modules spread edge-to-edge (justify-between) */
.locations { padding-block: var(--section-space-main); }   /* Figma section-space/main 112 */
.locations__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: start;
  margin-top: clamp(2.5rem, 3.33vw, 4rem);   /* Figma gap 64 below the eyebrow block */
  container-type: inline-size;
  container-name: locgrid;
}
/* Below the 3-up fit (3×338 + gaps) the fixed-width modules would stack left-aligned —
   go full-width instead so the big ICAOs CENTER on tablet/mobile (owner-caught). */
@container locgrid (max-width: 68.5rem) {
  .locations__grid .location_time_module_wrap { width: 100%; }   /* extra specificity: the base width rule comes later in source */
}
.location_time_module_wrap {
  flex: 0 0 auto;   /* no shrink — modules wrap whole instead of squeezing the big ICAOs */
  width: min(100%, 21.125rem);   /* Figma module 338 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.location_icao_text {
  font-family: var(--font-02);
  font-weight: 400;
  font-size: var(--fs-city);
  line-height: 0.9;
  color: var(--text-heading);
  white-space: nowrap;
}
.location_meta { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.location_hex { color: var(--icon); font-size: 0.9em; line-height: 1; }
.location_hours_text {
  font-family: var(--font-03);
  font-weight: 500;
  font-size: var(--fs-text-s);
  letter-spacing: 0.1em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.location_city_text {
  font-family: var(--font-03);
  font-size: var(--fs-text-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-heading);
}
/* (the rotating module carries no extra chrome in the Figma — the flip animation signals it) */

/* ============================================================================
   CONTACT FORM
   ============================================================================ */
.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: grid; gap: var(--space-2); }
.field label {
  font-family: var(--font-03);
  font-size: var(--fs-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.field input, .field textarea {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: 0.8em 1em;
  color: var(--text-heading);
  font-family: var(--font-01);
}
.field input:focus, .field textarea:focus { border-color: var(--icon); outline: none; }
.field textarea { resize: vertical; min-height: 7rem; }
.form__status { font-family: var(--font-03); font-size: var(--fs-text-s); min-height: 1.2em; text-transform: uppercase; letter-spacing: 0.1em; }   /* ALL CAPS (owner) — matches the mono-label system */
.form__status.is-error { color: #ff5c6c; }
.form__status.is-ok { color: var(--icon); }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@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;
  }
}
html { scroll-behavior: smooth; }
/* Anchor targets clear the sticky nav (JS keeps --nav-height current) */
[id] { scroll-margin-top: calc(var(--nav-height, 6rem) + 0.5rem); }

/* ============================================================================
   REVEAL (subtle)
   ============================================================================ */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================================
   NAV brand mark
   ============================================================================ */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand__mark { width: auto; height: clamp(3rem, 3.6vw, 4.2919rem); flex: none; }   /* Figma 68.67 @1920 */
.site-nav.is-open { /* mobile disclosure open — flex-wrap already keeps it usable */ }

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
  position: relative;
  width: 100%;
  /* Fill the viewport BELOW the sticky nav so the whole hero (copy + diagram + ↓)
     is framed without scrolling. --nav-height is measured in main.js (initHeroFit);
     svh keeps it stable under the mobile browser toolbar. */
  min-height: max(34rem, calc(100svh - var(--nav-height, 6rem)), var(--hero-graph-fit, 0px));
  padding-block: 0 clamp(var(--space-4), 2.5vh, var(--space-6));
  overflow: clip;
  display: flex;
  flex-direction: column;
  container-type: inline-size;   /* query context for the narrow-screen diagram swap */
  container-name: hero;
}
/* Node-graph occupies the band from below the copy to just above the bottom; the image
   is object-fit:contain, so it always SCALES to stay fully framed (never overflows) on
   any viewport height, left-aligned so FOUNDER hugs the keyline. */
.hero__diagram {
  position: absolute;
  top: var(--hero-graph-top, max(17rem, 27%));   /* main.js initHeroFit sets --hero-graph-top just below the intro copy so the graph never overlaps it at any viewport height; the fallback clears it for no-JS */
  bottom: clamp(0.5rem, 1.5vh, 1.25rem);   /* small — the graph's low branches are on the RIGHT, clear of the bottom-left ↓ box */
  /* LEFT and RIGHT both track the copy's content column (the .inner is maxw-centered above 1728px).
     Below that there's no gutter, so both clamp to the site-margin (laptop = full-width, unchanged).
     Above it the diagram stays WITHIN the content column instead of bleeding into the wide-monitor
     gutter — so the fan reaches the content edge, not the viewport edge (owner: it overshot ~544px on
     a large monitor; laptop was perfect). Pairs with the width-driven-size freeze in main.js initHeroFit. */
  left: calc(max(0px, (100% - var(--maxw)) / 2) + var(--site-margin));
  right: calc(max(0px, (100% - var(--maxw)) / 2) + var(--site-margin));
  padding-left: clamp(var(--space-4), 3vw, var(--space-6));       /* FOUNDER shares the copy's left inset */
  margin: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;   /* pin the row to the JS-computed top (center would re-sink it in the band) */
}
/* Separate SVGs at a COMMON scale: each height = its viewBox-height ÷ 546 (the fan's
   viewBox height, rendered at 100% of the band), so FOUNDER stays small and the hexagon
   is proportional. The line (a flex CSS rule, not an SVG) stretches → full-width, FOUNDER left. */
.hd-row {
  display: flex;
  align-items: center;
  width: 100%;
  /* WIDTH-driven height → the graph keeps a CONSISTENT Figma proportion (hexagon ≈40%
     from the left, fan reaching the right) at every window size, instead of ballooning on
     tall windows and collapsing on short/wide ones. 30vw ≈ the Figma 1920 proportion.
     main.js initHeroFit overrides via --hero-graph-h with a PROGRESSIVE fit (see there):
     below-copy → lift-beside-copy (Figma) → shrink → floor+scroll, so laptops with browser
     chrome keep the full-size graph without cutting off the bottom nodes. */
  height: var(--hero-graph-h, clamp(15rem, 30vw, 80rem));
}
.hd-founder { height: 15.02%; width: auto; flex: 0 0 auto; }   /* 82/546 of the row height */
.hd-logo    { height: 35.71%; width: auto; flex: 0 0 auto; }   /* 195/546 */
.hd-nodes   { height: 100%;   width: auto; flex: 0 0 auto; }   /* 546/546 */
.hd-line    { flex: 1 1 auto; height: 1px; min-width: 1.5rem; background: var(--rivet-border); }

/* Hero LOTTIE players (main.js initHeroLottie): the four AE comps replace the static SVGs
   once they've ALL loaded (.is-lottie on the row; the <img>s above stay as the no-JS /
   reduced-motion / failure state). Same common scale (sizes ÷ the 546 fan height, in
   row-height units via --hgh), but per the AE staging (Pre-Stage.json) the LINE and the FAN
   run LONGER and TUCK UNDER FOUNDER/the hexagon so the traveling dashes emerge from beneath
   them — negative margins + z-order reproduce that overlap (the comps' --background fills
   make them opaque). Comp sizes: Founder 85² · Line 500×8 · Logo 169×195 · Nodes 1000×546. */
.hd-row { --hgh: var(--hero-graph-h, clamp(15rem, 30vw, 80rem)); }
.hd-lot { display: none; flex: 0 0 auto; pointer-events: none; }
.hd-lot svg { display: block; overflow: visible; }   /* the 8px non-scaling dashes may exceed the scaled box */
.hd-lot--founder { width: calc(var(--hgh) * 0.15568); height: calc(var(--hgh) * 0.15568); z-index: 4; }  /* 85/546 — the same 82 circle + stroke gutter */
.hd-lot--logo    { width: calc(var(--hgh) * 0.30952); height: calc(var(--hgh) * 0.35714); z-index: 3; }  /* 169/546 × 195/546 */
.hd-lot--nodes   { width: calc(var(--hgh) * 1.83150); height: var(--hgh); z-index: 1;
                   margin-left: calc(var(--hgh) * -0.07025); }   /* 38.4/546 of trunk tucked under the hexagon */
.hd-lot--line    { flex: 1 1 0; height: calc(var(--hgh) * 0.01465); min-width: 1.5rem; z-index: 2;   /* 8/546 — the dash thickness */
                   margin-left:  calc(var(--hgh) * -0.09236);    /* 50.4/546 under FOUNDER */
                   margin-right: calc(var(--hgh) * -0.08922); }  /* 48.7/546 under the hexagon */
.hd-row.is-lottie > .hd-founder, .hd-row.is-lottie > .hd-line,
.hd-row.is-lottie > .hd-logo, .hd-row.is-lottie > .hd-nodes { display: none; }
.hd-row.is-lottie > .hd-lot { display: block; }
/* Stroke discipline (owner): hairlines stay 1px at every scale, exactly like the static
   SVGs' non-scaling-stroke — the comps are drawn at 2 native. The 8px round-cap orange
   dashes keep their authored weight (selected by width, not color, so the founder/logo
   pulse — an animated stroke COLOR — can't flicker the width). */
.hd-lot svg path { vector-effect: non-scaling-stroke; }
.hd-lot svg path:not([stroke-width="8"]) { stroke-width: 1px; }

/* VERTICAL hero Lottie (the mobile-motif swap — the owner's rotated AE cut, vert/*-VERT.json;
   main.js mounts a .hdm-lot column and flips .is-lottie on .hero__diagram-m; the static
   spine/fan motif stays as the no-JS / reduced-motion / failure state). The vert comps are
   exact 90° rotations of the wide set, so the same drawing units apply with 546 = the fan
   comp WIDTH: child widths are % of the column, and the Pre-Stage tuck-under overlaps are
   negative BLOCK margins in % (CSS resolves block-margin % against the INLINE size — exactly
   this column's scale basis). Same z-order + stroke rules ride on .hd-lot. */
.hdm-lot { display: none; }
.hero__diagram-m.is-lottie .hdm-spine,
.hero__diagram-m.is-lottie .hdm-fan { display: none; }
.hero__diagram-m.is-lottie .hdm-lot {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;   /* the fan spreads symmetrically — center the column in the pitch */
  width: min(100%, 26rem);
}
.hdm-lot .hd-lot { display: block; }
.hdm-lot__founder { width: 26%;     aspect-ratio: 85 / 85;    z-index: 4; }   /* owner 2026-07-12: much bigger than the drawn 85/546=15.57% */
.hdm-lot__line    { width: 1.465%;  aspect-ratio: 8 / 200;    z-index: 2;    /* owner: the natural 500 length read as empty space — the comp
                       is SQUASHED to a 200-unit box (preserveAspectRatio:none in main.js, like the desktop stretch in reverse; non-scaling
                       strokes keep 1px/8px) → visible span ≈ 25% of the natural cut. Tuck-under margins stay full-size. */
                    position: relative;
                    margin-top: -9.236%;      /* 50.4/546 under FOUNDER */
                    margin-bottom: -8.922%; } /* 48.7/546 under the hexagon */
/* The line svg goes OUT OF FLOW: its viewBox ratio (8:500) would otherwise set the flex item's
   content height and defeat the squashed aspect-ratio box (live-caught — the box measured the
   natural 500 despite aspect-ratio 8/200). */
.hdm-lot__line svg { position: absolute; inset: 0; }
.hdm-lot__logo    { width: 30.952%; aspect-ratio: 169 / 195;  z-index: 3; }
.hdm-lot__nodes   { width: 100%;    aspect-ratio: 546 / 1000; z-index: 1;
                    margin-top: -7.025%; }    /* 38.4/546 of trunk under the hexagon */

/* Narrow-screen VERTICAL motif (the wide graph is hidden below): the same founder → line →
   hexagon → fan story rotated 90° — spine down the 72px left column, inline-SVG curves fanning
   to the outcome nodes, HTML labels. The curves SVG stretches to the list height
   (preserveAspectRatio:none) and pathLength=100 keeps the orange dash arcs proportional; all
   strokes stay 1px via non-scaling-stroke. Lives in the pitch flow so the hero grows if needed;
   swapped via the hero container query. (Lottie seam: swap for the vertical animation cut.) */
.hero__diagram-m { display: none; }
.hdm-spine { display: flex; flex-direction: column; align-items: center; width: 72px; flex: none; }
.hdm-founder { width: clamp(48px, 10vw, 72px); height: auto; }
.hdm-vline { width: 1px; height: clamp(1.5rem, 4vw, 3rem); background: var(--rivet-border); }
.hdm-hex { width: clamp(48px, 11vw, 80px); height: auto; }
.hdm-fan { position: relative; }
.hdm-curves { position: absolute; inset-block: 0; left: 0; width: 72px; height: 100%; }
.hdm-curves path { fill: none; stroke: var(--rivet-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hdm-curves .hdm-arc { stroke: var(--icon); stroke-width: 3; }
.hdm-list { margin-left: 72px; display: flex; flex-direction: column; }
.hdm-list li {
  height: clamp(2.75rem, 7vw, 4rem);   /* fixed rows → the SVG's 10/30/50/70/90% exits hit each row's centre */
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-03); font-size: var(--fs-text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-heading);
}
.hdm-dot {
  width: 13px; height: 13px; border: 1px solid var(--rivet-border); border-radius: 50%;
  flex: none; background: var(--background);
  margin-left: -7px;   /* overlap the curve end → the node sits ON the line, like the desktop fan */
}
.hdm-dot--on { background: var(--icon); border-color: var(--icon); }
@container hero (max-width: 52rem) {
  .hero__diagram { display: none; }
  .hero__diagram-m {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: clamp(var(--space-6), 6vh, var(--space-8));
  }
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-inline: var(--site-margin);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.hero__text { max-width: min(100%, 50rem); display: flex; flex-direction: column; flex: 1 1 auto; }
/* L-bracket keyline: the headline sits FLUSH to the hero top (hero has no top padding),
   so its right border drops straight from the nav hairline, then its bottom border turns
   left, and the pitch's left border carries down to the ↓ box — one continuous keyline. */
.hero__headline {
  width: 100%;
  padding-top: clamp(2rem, 4vh, 3.5rem);
  padding-bottom: clamp(var(--space-5), 3vw, 3rem);
  border-bottom: 1px solid var(--rivet-border);   /* match the nav's bottom hairline */
  border-right: 1px solid var(--rivet-border);
}
/* Figma 01-H2: TASA Orbiter SemiBold, font-size/H2 = 64px, line-height 1, tracking 0. */
.hero__headline h1 { font-size: var(--fs-h2); font-weight: 600; line-height: 1; letter-spacing: 0; }
.hero__pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-5), 3vw, 3rem);
  padding-left: clamp(var(--space-4), 3vw, var(--space-6));
  padding-top: clamp(var(--space-5), 3vw, 3rem);
  border-left: 1px solid var(--rivet-border);   /* match the nav's bottom hairline */
  flex: 1 1 auto;
}
/* Figma 01-Text-Body: TASA Orbiter Regular 18px, line-height 1.5 */
.hero__sub { font-family: var(--font-01); font-size: var(--fs-text-s); font-weight: 400; line-height: 1.5; color: var(--text); max-width: 44rem; }
.hero__foot {
  margin-top: auto;   /* push the foot (↓ terminus + START BUILDING) to the bottom of the pitch */
  display: flex;
  align-items: center;
  gap: var(--space-4) clamp(var(--space-5), 3vw, var(--space-7));
  flex-wrap: wrap;
}
.hero__downbox {
  width: 55px; height: 56px; flex: none;   /* 55px + the 1px keyline on the left = a 56px square */
  display: grid; place-items: center;
  border: 1px solid var(--rivet-border);   /* match the nav's bottom hairline */
  border-left: 0;                          /* the pitch keyline IS the box's left stroke — one 1px line, so it can't
                                              double under fractional display scaling (was: box border overlapping the keyline) */
  background: var(--neutral-100-o20);
  color: var(--text-heading);
  margin-left: calc(-1 * clamp(var(--space-4), 3vw, var(--space-6)));   /* pull the box flush to the keyline's inner edge */
}
.hero__downbox .material-symbols-outlined { font-size: 24px; }
/* The ↓ box is a LINK to #track-record (owner request); hover fills orange but KEEPS the
   1px rivet-border stroke (owner-tuned — the box stays part of the keyline system) */
a.hero__downbox { cursor: pointer; transition: background-color 0.2s ease; }
a.hero__downbox:hover, a.hero__downbox:focus-visible { background: var(--icon); color: #111a26; }

/* ============================================================================
   TRACK RECORD — big numbers (Figma 10217:5491: rule ABOVE the eyebrow; stat
   rows = vertical rivet bar · display number · full-height dashed rule · copy ·
   ⊗ screws at the card's top-right + bottom-right)
   ============================================================================ */
.track-record .rule { margin: 0; }
.track-record__eyebrow {
  font-size: var(--fs-h5);              /* Figma 03-Eyebrow-L: DM Mono, H5, 0.2em tracking */
  letter-spacing: 0.2em;
  padding-top: var(--site-gutter);
  margin-bottom: clamp(2rem, 2.5vw, 3rem);
}
.numbers { display: flex; flex-direction: column; gap: clamp(var(--space-6), 3.2vw, 3.75rem); }
.number-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: clamp(9rem, 13.5vw, 16.25rem);   /* Figma h 260 @1920 */
  border: var(--bw) solid var(--border);
  background: var(--background);
  overflow: clip;
  container-type: inline-size;   /* lets the dashed rule hide itself when the card stacks */
  container-name: numcard;
}
/* When the card stacks (copy wraps under the number) the dashed divider would land as a
   stray sliver at the right edge (owner-caught on mobile) — hide it below the stack point. */
@container numcard (max-width: 35rem) {
  .number-card__rule { display: none; }
}
/* Vertical rivet bar on the card's left edge — JS (initNumberBars) builds an exact-fit
   inline SVG (constant hexagon pitch, whole hexagons only); no-JS keeps this tiled fallback. */
.number-card__bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 22px;
  background: url("assets/rivet-bar-v.svg") left top / 22px 260px repeat-y;
}
.number-card__bar.is-dynamic { background: none; }
.number-card__bar svg { display: block; }
.number-card__figure {
  flex: 999 1 min(100%, 18rem);   /* soaks up the surplus → the copy column stays ≈ its basis */
  display: flex;
  align-items: center;
  min-width: 0;
  padding-block: clamp(1.25rem, 2.5vw, 3rem);
  padding-inline: clamp(2.25rem, 2.5vw, 3rem);   /* min clears the 22px bar */
}
.number-card__value {
  font-family: var(--font-02);
  font-weight: 400;
  font-size: var(--fs-mega);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--text);
}
/* Full-height dashed divider. When the card stacks on narrow screens it wraps onto the
   figure's line as a 2px sliver against the card's right border — effectively invisible. */
.number-card__rule {
  flex: 0 0 0px;
  align-self: stretch;
  border-inline-start: var(--bw) dashed var(--border);
}
.number-card__copy {
  flex: 1 1 min(100%, clamp(16rem, 28.3vw, 33.9375rem));   /* Figma copy column 543 @1920 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2vw, 2rem);
  padding-inline-start: calc(22px + 1rem);   /* always clears the rivet bar when the card stacks on narrow screens */
  font-size: var(--fs-text-l);
  line-height: 1.5;
  color: var(--text);
}
/* ⊗ screws — the Figma SCRW-14 as inline SVG (circle stroke via .RivetStroke, filled phillips
   cross). Generic: corner modifiers place one in any corner of a position:relative box.
   Used by the number cards (tr+br) and the capabilities focus tabs (all four). */
.scrw { position: absolute; width: 18px; height: 18px; }
.scrw--tl { top: 4px; left: 4px; }
.scrw--tr { top: 4px; right: 4px; }
.scrw--bl { bottom: 4px; left: 4px; }
.scrw--br { bottom: 4px; right: 4px; }
.scrw circle { fill: var(--background); }
.scrw path { fill: var(--rivet-border); }
.track-record__cta { margin-top: clamp(2rem, 2.5vw, 3rem); }

/* ============================================================================
   MISSION
   ============================================================================ */
/* Figma 10217:5619 — 9-col grid: heading 3 cols, body 6 cols (1:2), 30px gap */
.mission__grid { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 1.6vw, 1.875rem); }
.mission__head { flex: 1 1 16rem; border-top: 1px solid var(--border); padding-top: var(--space-4); }
.mission__head h2 { font-size: var(--fs-h3); line-height: 1.3; text-wrap: balance; }
.mission__body { flex: 2 1 26rem; border-top: 1px solid var(--border); padding-top: var(--site-gutter); display: flex; flex-direction: column; gap: clamp(2rem, 2.5vw, 3rem); }
.mission__body p { font-size: var(--fs-text-body); color: var(--text); }

/* ============================================================================
   TEAM
   ============================================================================ */
.team__grid { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 2.5vw, 3rem); }
.team-card {
  flex: 1 1 26rem;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-5), 3vw, 3.125rem);
  border: var(--bw) solid var(--border);
  border-radius: 6px;
  background: var(--background);
}
/* Horizontal rivet bar across the top — JS (initTeamBars) builds one complete hexagon bar
   (sparser ~24.2px pitch per the Figma team bar); no-JS keeps this tiled fallback. */
.rvt-bar-h {
  display: block;
  height: 20px; width: 100%;
  background: url("assets/rivet-bar.svg") left center / auto 20px repeat-x;
  margin-bottom: var(--site-gutter);
}
.rvt-bar-h.is-dynamic { background: none; }
.rvt-bar-h svg { display: block; }
.team-card__photo {
  width: clamp(140px, 14vw, 270px); height: clamp(140px, 14vw, 270px);   /* Figma 270 @1920 */
  border-radius: 50%; object-fit: cover; align-self: flex-start;
  margin-bottom: var(--space-4);
}
.team-card__name { font-family: var(--font-01); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; margin-bottom: var(--space-2); }
.team-card__role { font-family: var(--font-03); font-weight: 500; font-size: var(--fs-text-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--icon); margin-bottom: var(--space-3); }
.team-card__bio {
  display: flex; flex-direction: column; gap: var(--space-4);
  font-size: var(--fs-text-body); line-height: 1.5; color: var(--text);
  margin-bottom: var(--space-4);
}
.team-card__bio strong { color: var(--text-heading); font-weight: 600; }
/* 2×2 stat grid — separate bordered cells with 4px gaps (Figma), orange mono H4 values */
.team-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));   /* 2×2 on desktop (never 3-up ≤2560) → 1-up on narrow */
  gap: 4px;
  margin-top: auto;
  padding-top: var(--site-gutter);
}
.stat {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-2);
  border: 1px solid var(--border);
  padding: var(--site-gutter);
  min-width: 0;
  min-height: clamp(4rem, 4.95vw, 5.9375rem);   /* Figma 95 @1920 */
}
.stat__value {
  font-family: var(--font-03); font-weight: 500;
  font-size: var(--fs-h4);
  letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.3; color: var(--icon);
}
.stat__label { font-family: var(--font-03); font-weight: 500; font-size: var(--fs-text-xxs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); line-height: 1.5; }
/* Full-width LinkedIn button at the bottom — standardized OUTLINE variant (1px orange, rectangular; see the button
   system by .btn--contact). */
.team-card__linkedin {
  display: grid; place-items: center;
  margin-top: var(--site-gutter);
  padding: clamp(0.75rem, 0.87vw, 1.05rem);
  border: 1px solid var(--icon);
  border-radius: 0;
  transition: background-color 0.2s ease;
}
.team-card__linkedin:hover { background: var(--icon); }   /* matches the MAKE-CONTACT hover: solid orange fill, navy mark on top */
.team-card__linkedin img { width: 40px; height: 40px; }

/* ============================================================================
   CLIENTS — logo wall
   ============================================================================ */
.clients__title { font-family: var(--font-01); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; max-width: 100%; margin-bottom: var(--space-7); }   /* Figma 10324:7113 (2026-07-20): "We specialize in frontier industries" — one line at desktop, no ch cap */
/* Figma 10217:5817: exactly 7 columns at desktop — the clamp'd min tracks ~1/7.8 of the viewport
   so auto-fit lands on 7 from ~1024px up, then degrades 6 → 2 breakpointlessly below. */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(7rem, 12.8vw, 14rem)), 1fr)); }
.logo-cell {
  border: 1px solid var(--border);
  aspect-ratio: 233 / 103;   /* Figma cell ≈233×103 */
  display: grid;
  place-items: center;
  padding: 4px;
}
/* Logo box capped at the Figma 164×100 (≈70% of the desktop cell), scaling down with the cell */
.logo-cell img { width: min(164px, 70%); height: min(100px, 85%); object-fit: contain; }

/* ============================================================================
   CAPABILITIES — intro + focus tabs (the accordion CSS is in the components block)
   ============================================================================ */
.capabilities__kicker {
  display: block;
  font-size: var(--fs-h5);              /* Figma eyebrow-L: DM Mono, H5, 0.2em */
  letter-spacing: 0.2em;
  margin-top: var(--site-gutter);
}
.capabilities__rule { margin-top: var(--space-8); }
/* Focus tabs (Figma 302×150 boxes, 30px gaps, Stick No Bills, ⊗ screws in all four corners) */
.focus-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(9rem, 15.7vw, 18.875rem)), 1fr));
  gap: clamp(1.25rem, 1.56vw, 1.875rem);
  margin-top: var(--space-6);
}
.focus-tabs li {
  position: relative;
  aspect-ratio: 302 / 150;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-4) clamp(var(--space-5), 2vw, var(--space-6));
  border: 1px solid var(--border);
  background: var(--background);
  font-family: var(--font-02);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.08vw, 2.5rem);   /* Figma ≈40px @1920 */
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-heading);
}
/* ============================================================================
   CASE STUDY — MARA (Figma 10217:6081: narrow keylined lede ≈1 : image 2.78,
   bottom-left frosted stat tiles on a darkened aerial)
   ============================================================================ */
/* Standalone kicker above the whole 3-block case study (Figma 10324:7377 — eyebrow-L, same
   register as .capabilities__kicker / .track-record__eyebrow, hairline rule above) */
.case-study .rule { margin: 0; }
.case-study__kicker {
  font-size: var(--fs-h5);
  letter-spacing: 0.2em;
  padding-top: var(--space-4);                 /* Figma ≈24px below the rule */
  margin-bottom: clamp(1.5rem, 2vw, 2.5rem);   /* Figma ≈30-40px down to the keylined grid */
}
.case-study__grid { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: var(--space-6); align-items: stretch; }
.case-study__lede {
  flex: 1 1 20rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.56vw, 1.875rem);   /* Figma stack gap 30 */
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);    /* the lede keyline */
  padding-top: clamp(2.5rem, 3.18vw, 3.8125rem);   /* Figma 61 */
  padding-inline: clamp(1.25rem, 1.6vw, 1.9375rem);
}
.case-study__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
/* Eyebrow stacks over the ⬢ page-dots (Figma), rule above */
.case-study__eyebrow { display: flex; flex-direction: column; gap: var(--space-1); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.case-study__eyebrow .eyebrow, .cult__eyebrow .eyebrow, .charts__eyebrow .eyebrow { font-size: var(--fs-text-s); letter-spacing: 0.1em; }
/* The ⬢ page-dots are LINKS between the three case-study blocks (owner request) */
.hexes { display: inline-flex; gap: 10px; font-size: 1rem; line-height: 2.55; }
.hex { color: var(--rivet-border); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; }
a.hex:hover, a.hex:focus-visible { color: var(--icon); transform: translateY(-1px); }
.hex--accent { color: var(--icon); }
.case-study__body { display: flex; flex-direction: column; gap: clamp(2rem, 2.8vw, 3.375rem); }   /* Figma ≈54 between paragraphs */
.case-study__body p { font-size: var(--fs-text-l); line-height: 1.5; color: var(--text); }
.cred-cards { display: flex; flex-direction: column; gap: clamp(1.25rem, 1.56vw, 1.875rem); margin-top: auto; }
/* Cred card (Figma): 2px border, avatar cell (dashed divider at its right) + text cell */
.cred { display: flex; align-items: stretch; border: var(--bw) solid var(--border); border-radius: 2px; padding: 2px; }
.cred__avatar {
  flex: none;
  display: grid; place-items: center;
  padding: var(--space-3) var(--space-4);
  border-right: var(--bw) dashed var(--border);
}
.cred__avatar img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; background: var(--icon); }
.cred__text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); min-width: 0; }
.cred__title { font-family: var(--font-01); font-weight: 600; font-size: var(--fs-h6); color: var(--text-heading); line-height: 1.6; }
.cred__role { font-family: var(--font-03); font-size: var(--fs-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }

.case-study__media {
  flex: 2.78 1 min(100%, 30rem);   /* Figma 1199 : 431 lede */
  position: relative;
  overflow: clip;
  border-radius: 0 2px 2px 0;
  min-height: 32rem;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  container: csmedia / inline-size;   /* the stat tiles stack on the PANEL's width, not the viewport's */
}
/* Below ~800px of panel width three-across tiles can't hold the big DM-Mono numbers
   (owner-caught: "14,900%" spilling its tile) → stack the stats vertically */
@container csmedia (max-width: 50rem) {
  .stat-tiles { flex-direction: column; }
  .stat-tile { flex: none; width: 100%; }
}
.case-study__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Figma darkening overlays (two stacked 20% washes) so the frosted tiles read */
.case-study__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(16, 18, 22, 0.36); pointer-events: none; }
/* Figma update: 3 tiles span the bottom in a ROW (was a 4-tile vertical stack) — full-width, equal thirds, wrapping to
   a stack on a narrow media panel. */
.stat-tiles { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--site-gutter); padding: clamp(1rem, 1.35vw, 1.625rem); width: 100%; }
.stat-tile {
  flex: 1 1 min(100%, 12rem);
  min-width: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(237, 240, 245, 0.05);   /* Figma neutral-100 @5% over the dark wash */
  border-left: 2px solid var(--icon);
  padding: clamp(1rem, 1.25vw, 1.5rem) clamp(1rem, 1.25vw, 1.5rem) clamp(1rem, 1.25vw, 1.5rem) clamp(1.05rem, 1.35vw, 1.625rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.8vw, 1rem);
}
.stat-tile__value { font-family: var(--font-03); font-weight: 500; font-size: var(--fs-h3); letter-spacing: 0.03em; color: #edf0f5; line-height: 1.1; text-transform: uppercase; }
.stat-tile__label { font-family: var(--font-03); font-weight: 500; font-size: var(--fs-text-s); letter-spacing: 0.1em; text-transform: uppercase; color: #edf0f5; }
.stat-tile__sub { font-family: var(--font-01); font-size: var(--fs-text-s); color: #a5abb3; letter-spacing: 0.03em; line-height: 1.6; }

/* ---- Case study part 2: the "cult" (Figma 10217:6153: full-height left keyline,
   ⊗ screw atop the intro, intro 370 : cards 1213 with a 24/64 stagger) ---- */
/* The keyline CONNECTS to the case-study lede's keyline above (owner-caught): both sections'
   paddings at the seam are zeroed and the cult's top spacing moves INSIDE the keylined wrapper,
   so the 1px line runs unbroken from the lede top down through the whole cult block. */
.case-study { padding-block-end: 0; }
.cult { padding-block: 0; }
.cult .inner {
  border-left: 1px solid var(--border);   /* the section keyline */
  padding-left: clamp(1.25rem, 1.6vw, 1.9375rem);
  padding-top: clamp(2rem, 2.5vw, 3rem);   /* the Figma 48px between the sections, inside the keyline */
  padding-bottom: var(--section-space-small);   /* the cult's bottom space INSIDE the keyline → it chains into the charts block below */
}
.cult__banner { width: 100%; height: clamp(11rem, 20.8vw, 25rem); object-fit: cover; border-radius: 3px; margin-bottom: clamp(1.5rem, 1.875vw, 2.25rem); display: block; }
/* MAGAZINE FLOW (owner 2026-07-13; replaces the old intro|cards flex row + the 2-col outro): the
   six cards FLOAT right and the heading + every paragraph are normal-flow blocks — their LINE
   boxes shorten beside the float and run full width once past it (true reflow). flow-root
   contains the float inside the keyline chain. The eyebrow block stays a flex container (a BFC)
   so its border-top narrows beside the float instead of running under the cards. The old
   30px-gap + 24px-pt rhythm is kept as margin-top + padding-top on each block. */
.cult .inner { container: cultflow / inline-size; }
.cult__flow { display: flow-root; }
.cult__scrw { position: static; flex: none; margin-top: clamp(1rem, 1.25vw, 1.5rem); }   /* the .scrw base is absolute; here it sits in flow at the top of the text column (the old intro pt) */
.cult__title { font-size: var(--fs-h4); line-height: 1.3; margin-top: clamp(1.25rem, 1.56vw, 1.875rem); }
.cult__eyebrow { display: flex; flex-direction: column; gap: var(--space-1); border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: clamp(1.25rem, 1.56vw, 1.875rem); }
.cult__lead { font-size: var(--fs-text-l); line-height: 1.5; color: var(--text); padding-top: clamp(1rem, 1.25vw, 1.5rem); margin-top: clamp(1.25rem, 1.56vw, 1.875rem); }
.cult__cards {
  float: right;
  /* cards cap at 76% of the flow; the text keeps ≥ the Figma 338px column (23rem − the 30px gap) */
  width: min(76%, calc(100% - 23rem));
  margin-left: clamp(1.25rem, 1.56vw, 1.875rem);
  margin-bottom: clamp(1.25rem, 1.56vw, 1.875rem);
  display: flex; flex-direction: column; gap: var(--site-gutter);
  padding-top: clamp(2rem, 3.33vw, 4rem);   /* the Figma 24/64 stagger vs the text top */
}
/* Too narrow for a side column → a plain stack (flex ignores floats): heading → intro ¶s → cards */
@container cultflow (max-width: 52rem) {
  .cult__flow { display: flex; flex-direction: column; }
  .cult__cards { float: none; width: 100%; margin-left: 0; order: 1; }
}
.cult-card { display: flex; flex-wrap: wrap; gap: var(--site-gutter); border: 1px solid var(--border); border-radius: 3px; padding: clamp(1.25rem, 1.25vw, 1.5rem); background: var(--background); }
.cult-card__text { flex: 1 1 min(100%, 15rem); display: flex; flex-direction: column; gap: var(--space-3); align-self: center; min-width: 0; }
.cult-card__cat { font-family: var(--font-03); font-weight: 500; font-size: var(--fs-text-s); letter-spacing: 0.1em; text-transform: uppercase; color: var(--icon); }
.cult-card__title { font-family: var(--font-01); font-weight: 600; font-size: var(--fs-h4); color: var(--text-heading); line-height: 1.3; }
.cult-card__desc { font-size: var(--fs-text-s); line-height: 1.6; letter-spacing: 0.03em; color: var(--text); max-width: 21.125rem; }   /* Figma 338px */
.cult-card__thumbs { flex: 0 1 clamp(20rem, 34.5vw, 41.375rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--site-gutter); }   /* 2 × ~322px thumbs @1920, text takes the rest */
.cult-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 3px; overflow: clip; position: relative; background: var(--background-2); }
.cult-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cult-thumb--play::after {
  content: "play_circle";
  font-family: 'Material Symbols Outlined';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 44px; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}
.cult-thumb--play:hover::after { transform: scale(1.1); }

/* ---- Case study part 3: the metric grid over a faded chart ---- */
/* The charts block (Figma 10228:4489) continues the case-study keyline chain: the section's
   block paddings are zeroed (the space above lives INSIDE the cult's keyline) and the intro
   column carries the border-left, stretching the full row height. */
.charts { padding-top: 0; padding-bottom: var(--section-space-small); }   /* owner: a little breathing room between the 3×3 grid and the dark contact section (was flush) */
.charts__grid { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: var(--space-6); align-items: stretch; }
.charts__intro {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.56vw, 1.875rem);
  border-left: 1px solid var(--border);
  padding-top: clamp(2.5rem, 3.125vw, 3.75rem);   /* Figma 60 */
  padding-inline: clamp(1.25rem, 1.6vw, 1.9375rem);
}
.charts__scrw { position: static; flex: none; }   /* the .scrw base is absolute; here it sits in flow atop the intro (mirrors .cult__scrw) */
.charts__title { font-size: var(--fs-h4); line-height: 1.3; }
.charts__eyebrow { display: flex; flex-direction: column; gap: var(--space-1); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.charts__lead { font-size: var(--fs-text-l); line-height: 1.5; color: var(--text); padding-top: clamp(1rem, 1.25vw, 1.5rem); }
.charts__panel { flex: 2.78 1 min(100%, 30rem); position: relative; overflow: clip; border-radius: 0; isolation: isolate; padding: var(--space-4); }
.charts__bg { position: absolute; inset: 0; z-index: 0; }
.charts__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Figma exact (get_design_context 10228:4489): a DARK NAVY wash over the MARA photo — the photo stays VISIBLE
   (industrial texture) but darkened for readability; the dark panel flows into the dark contact section below. */
.charts__bg::after { content: ""; position: absolute; inset: 0; background: rgba(17, 26, 38, 0.75); }
/* 3×3 at desktop (Figma), degrading 2 → 1 on narrow */
.metric-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: var(--site-gutter); }
/* Figma: a frosted dark chip on the wash — neutral-900 @20% + 12px blur, so the card is darker than the gaps (the
   photo shows more between cards) and the light type reads high-contrast. */
.metric {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(33, 36, 41, 0.2);
  border-left: 2px solid var(--icon);
  padding: clamp(1.25rem, 1.67vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--site-gutter);
}
.metric__value { font-family: var(--font-03); font-weight: 500; font-size: var(--fs-h4); letter-spacing: 0.12em; text-transform: uppercase; color: var(--icon); line-height: 1.3; }
.metric__title { font-family: var(--font-01); font-weight: 600; font-size: var(--fs-h6); color: #edf0f5; line-height: 1.6; }
.metric__desc { font-family: var(--font-01); font-size: var(--fs-text-xxs); letter-spacing: 0.03em; color: #edf0f5; line-height: 1.5; }
.metric__tag { font-family: var(--font-03); font-weight: 500; font-size: var(--fs-text-xxs); letter-spacing: 0.12em; text-transform: uppercase; color: #edf0f5; border-top: 1px solid rgba(237, 240, 245, 0.2); padding-top: 0.8125rem; margin-top: auto; }

/* ============================================================================
   CONTACT (dark)
   ============================================================================ */
.contact {
  background: var(--background);
  color: var(--text);
  border-block: 4px solid var(--icon);
  padding-block: clamp(4.5rem, 2rem + 10.5vw, 14rem);   /* Figma section-space/page-top = 224 */
}
.contact .inner { display: flex; flex-direction: column; gap: clamp(1.25rem, 1.56vw, 1.875rem); }   /* Figma gap 30 */
.nato {
  border: 1px solid var(--border);
  padding: var(--space-7) clamp(var(--space-5), 2.5vw, 3rem);   /* Figma 48/48 */
  position: relative;   /* the ⊗ .scrw screws (inline SVG, markup) pin to its corners */
}
.nato__text {
  font-family: var(--font-02);
  font-weight: 400;
  font-size: clamp(1.5rem, 0.7rem + 2.5vw, 3rem);
  line-height: 1.3;
  text-transform: uppercase;
  text-align: justify;
  color: var(--text);
  word-spacing: 0.2em;
}
.nato__accent { font-weight: 600; color: var(--icon); }

.contact__grid { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 1.56vw, 1.875rem); align-items: center; }   /* Figma: equal columns, vertically centred, gap 30 */
.contact__intro { flex: 1 1 20rem; display: flex; flex-direction: column; gap: var(--space-4); }
.contact__kicker {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-03); font-weight: 500;
  font-size: var(--fs-h4);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-heading);
}
.contact__kicker .hex { font-family: var(--font-01); }
.contact__lead { font-size: var(--fs-text-l); line-height: 1.5; color: var(--text); }
.contact__hint { font-family: var(--font-03); font-size: var(--fs-text-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); margin-top: var(--space-4); }   /* Figma lead→hint gap 48 (24 grid gap + 24) */

.contact__form {
  flex: 1 1 20rem;
  border: 1px solid var(--border);
  padding: clamp(2rem, 3.4vw, 4.0625rem) clamp(1.5rem, 2.55vw, 3.0625rem);   /* Figma 65/49 */
  align-content: center;   /* fields FILL the card width (Figma); centre only vertically */
}
.contact__form .field label { color: var(--text-heading); }   /* Figma labels #edf0f5 */
.contact__form .field input,
.contact__form .field textarea {
  background: rgba(237, 240, 245, 0.05);
  border-radius: 2px;
  color: var(--text-heading);
  font-size: var(--fs-h6);      /* Figma input text: TASA SemiBold 18 */
  font-weight: 600;
  padding: 0.8125rem 1.0625rem;
}
.contact__form .field input::placeholder,
.contact__form .field textarea::placeholder { color: var(--text); opacity: 0.75; }
/* Contact + careers CTA — the standardized OUTLINE variant (owner 2026-07-12: the careers CTA dropped the last
   SOLID fill, so every boxed button is now the one system — transparent fill, 1px orange stroke, rectangular,
   orange fill + navy label on hover; twin to .btn--contact). */
.btn--submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%;
  background: transparent;
  color: var(--text-heading);
  border: 1px solid var(--icon); border-radius: 0;
  padding: 0.75rem 1.5rem;   /* Figma py-12 px-24 */
  font-family: var(--font-03);
  font-size: var(--fs-text-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn--submit:hover { background: var(--icon); color: #111a26; }   /* dark navy label on the orange hover fill, like .btn--contact */
.btn--submit .material-symbols-outlined { font-size: 12px; }   /* Figma 12px arrow */
/* Contact-section "Make contact" submit: on the dark contact bg the resting label rides `--btn-secondary-text`
   (#edf0f5) instead of the heading ink — border/fill/hover all come from the base now. The explicit :hover keeps
   the navy label winning over this later-in-source override. */
.contact__form .btn--submit { color: var(--btn-secondary-text); }
.contact__form .btn--submit:hover { color: #111a26; }
.contact__form .form__status:empty { display: none; }

/* ============================================================================
   LOCATIONS (extra) + CAREERS + FOOTER
   ============================================================================ */
.locations__eyebrow { font-size: var(--fs-h5); letter-spacing: 0.2em; padding-top: var(--site-gutter); }   /* Figma eyebrow-L below its rule */
.locations .rule { margin: 0; }

/* Figma 10217:6258 — 9-col grid: button 2 cols, text 7 cols, 30px gap, rules above both */
.careers__grid { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 1.56vw, 1.875rem); align-items: start; }
.careers__cta { flex: 2 1 11rem; border-top: 1px solid var(--border); padding-top: var(--space-4); }
.careers__btn { display: flex; width: 100%; text-decoration: none; }   /* the button fills its column (Figma) */
.careers__body { flex: 7 1 22rem; border-top: 1px solid var(--border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.careers__title { font-size: var(--fs-h3); line-height: 1.3; }
.careers__body p { font-size: var(--fs-text-body); color: var(--text); }

.site-footer { padding-top: var(--section-space-main); overflow: clip; }
.site-footer .inner { padding-inline: var(--site-margin); }
/* Ghost RIVET wordmark — the REAL logotype SVG (Figma 10217:6266; dark #212429 ink),
   ghosted to the Figma tone via opacity. Replaced the old Stick-No-Bills letter spread. */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1585.27 / 240;
  opacity: 0.18;
  margin-top: var(--space-5);
}
/* Bottom bar (Figma Footer 6): 2px border, ~90 tall, © left + the full lockup right */
.site-footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-4) var(--space-6);
  min-height: clamp(3.5rem, 4.7vw, 5.625rem);
  border: var(--bw) solid var(--border);
  padding-block: var(--space-3);
  padding-inline: var(--site-margin);
}
.site-footer__copy {
  font-family: var(--font-03); font-weight: 500;
  font-size: var(--fs-text-s); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text);
}

/* Legal link in the footer bar. It inherits --text (5.07:1, AA) so contrast is
   fine; what it lacks is any signal that it IS a link - same colour as the copy
   beside it. Underlined rather than coloured: --link is #ff6c2f, which measures
   1.92:1 here (QA-REPORT Finding B). Hover takes the darker brand orange. */
.site-footer__legal {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* A <button> does not inherit text-transform - the UA stylesheet resets it on form
   controls - so without this the footer read "PRIVACY" beside "Cookies". */
.site-footer__legal-btn {
  text-transform: inherit;
  letter-spacing: inherit;
  /* PRIVACY and COOKIES are two separate destinations, and at this tracking a single
     word space reads as one run of text. The margin is on the SECOND item only, so
     the gap after "RESERVED." is unchanged. */
  margin-left: 1.1em;
}
.site-footer__legal:hover,
.site-footer__legal:focus-visible { color: var(--link-hover); }
/* The RIVET Studio lockup: hexagon mark + a text column (RIVET over STUDIO), per the Figma */
.site-footer__logo { display: flex; align-items: center; gap: 10px; flex: none; }
.site-footer__logo img { display: block; }
.fl-mark   { width: 46.39px;  height: 53.57px; }
.fl-text   { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.fl-rivet  { width: 141.54px; height: 21.43px; }
.fl-studio { width: 73.87px;  height: 7.14px; }

/* Nav: below 60rem (header container query) the bar swaps to the hamburger + slide-out
   drawer (JS only — no-JS keeps the flex-wrap fallback). Styles live in the
   MOBILE/TABLET NAV block near the header styles. */

/* ============================================================================
   COOKIE CONSENT
   A bottom sheet rather than a modal: it must not trap somebody who has not
   decided yet, and the site stays fully usable behind it. Every colour, face and
   space below is an existing token - nothing new enters the design system.
   ============================================================================ */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  background: var(--background-2);
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--site-margin);
}
.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.consent__copy { flex: 1 1 32rem; }
.consent__title {
  font-family: var(--font-01);
  font-size: var(--fs-h6);
  line-height: 1.2;
  color: var(--text-heading);
  margin: var(--space-2) 0 0;
}
.consent__text {
  font-family: var(--font-01);
  font-size: var(--fs-text-s);
  line-height: 1.55;
  color: var(--text);
  margin-top: var(--space-2);
  max-width: 68ch;
}
/* --link is #ff6c2f = 1.92:1 on this surface (QA-REPORT Finding B); --link-hover
   is 4.56:1 and passes AA, so the two are swapped here exactly as on the policy. */
.consent__text a {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.consent__text a:hover, .consent__text a:focus-visible { color: var(--link); }

.consent__actions { display: flex; gap: var(--space-3); flex: 0 0 auto; flex-wrap: wrap; }

/* Both choices are the same weight on purpose. Making Accept loud and Decline
   quiet is the pattern that turns a consent prompt into a nudge. */
.btn--consent {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-03); font-size: var(--fs-text-s);
  letter-spacing: 0.1em; text-transform: uppercase;
  height: 3rem; padding-inline: 1.75rem; border-radius: 0;
  background: transparent;
  border: 1px solid var(--icon);
  color: var(--text-heading);
  transition: background 0.18s ease, color 0.18s ease;
}
.btn--consent:hover { background: var(--icon); color: #111a26; }

/* ---- Cookie settings dialog ------------------------------------------------
   A real modal, unlike the banner: by the time somebody opens this they have
   engaged with the choice, so trapping focus is correct rather than hostile. */
.consent-dialog-wrap { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--space-4); }
.consent-dialog-wrap[hidden] { display: none; }
.consent-dialog__backdrop { position: absolute; inset: 0; background: rgba(17, 26, 38, 0.55); }
body.is-consent-open { overflow: hidden; }

.consent-dialog {
  position: relative;
  width: min(38rem, 100%);
  max-height: min(85vh, 46rem);
  overflow-y: auto;
  background: var(--background-2);
  border: 1px solid var(--border);
  padding: var(--space-5);
}
.consent-dialog__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: none; border: 0; padding: 0.25rem; cursor: pointer;
  color: var(--text); line-height: 0;
}
.consent-dialog__close:hover { color: var(--text-heading); }
.consent-dialog__title {
  font-family: var(--font-01); font-size: var(--fs-h5); line-height: 1.15;
  color: var(--text-heading); margin: var(--space-2) 0 var(--space-4);
}
.consent-cats { display: grid; gap: 0; }
.consent-cat {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}
.consent-cat--toggle { cursor: pointer; }
.consent-cat__copy h3 {
  font-family: var(--font-01); font-size: var(--fs-text-body);
  color: var(--text-heading); margin: 0;
}
.consent-cat__copy p {
  font-family: var(--font-01); font-size: var(--fs-text-s); line-height: 1.55;
  color: var(--text); margin: 0.4em 0 0; max-width: 42ch;
}
.consent-pill {
  flex: none;
  font-family: var(--font-03); font-size: var(--fs-text-xxs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); border: 1px solid var(--border);
  padding: 0.35em 0.7em; white-space: nowrap;
}

/* The switch is a real checkbox with a painted track, so it keeps native keyboard
   behaviour and the label's `for` association rather than re-implementing either. */
.consent-switch { flex: none; position: relative; width: 3rem; height: 1.6rem; }
.consent-switch input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.consent-switch__track {
  position: absolute; inset: 0;
  border: 1px solid var(--icon);
  background: transparent;
  transition: background 0.18s ease;
}
.consent-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: calc(1.6rem - 8px); height: calc(1.6rem - 8px);
  background: var(--icon);
  transition: transform 0.18s ease;
}
.consent-switch input:checked + .consent-switch__track { background: color-mix(in srgb, var(--icon) 22%, transparent); }
.consent-switch input:checked + .consent-switch__track::after { transform: translateX(1.4rem); }
.consent-switch input:focus-visible + .consent-switch__track { outline: 2px solid var(--icon); outline-offset: 2px; }

.consent-dialog__note {
  font-family: var(--font-01); font-size: var(--fs-text-s); line-height: 1.55;
  color: var(--text); margin: var(--space-4) 0 0;
  border-top: 1px solid var(--border); padding-top: var(--space-4);
}
.consent-dialog__actions {
  display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4);
}
.consent-dialog__actions .btn--consent { flex: 1 1 auto; }

/* The footer trigger is a <button> wearing the footer link's clothes, so "Privacy
   Policy" and "Cookie settings" read as one pair rather than a link beside a control. */
.site-footer__legal-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 40rem) {
  .consent__inner { align-items: stretch; }
  .consent__actions { width: 100%; }
  .btn--consent { flex: 1 1 auto; }
}