/* GENERATED by tools/build-site.js - do not edit.
   Source: css/fonts.css, css/tokens.css, css/base.css, css/layout.css, css/site.css, css/components.css, css/motion.css
   Edit those, then re-run the build. */

/* ---- fonts.css ---- */
/* Accentri - web fonts
   Variable faces, latin subset, self-hosted. Variable rather than static cuts
   because the design uses weights the statics do not carry (620, 650, 680). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2-variations'),
       url('../fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/eb-garamond-variable.woff2') format('woff2-variations'),
       url('../fonts/eb-garamond-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-adjusted fallbacks
   Shown while the webfont loads. size-adjust scales the local face so its
   x-height and advance width match the real one, which keeps the swap from
   reflowing the page (measured 0.089 CLS on mobile before these existed).
   Ratios measured by comparing rendered advance widths of the real face and
   the local fallback at 100px (Inter/Arial 1929:1779, Garamond/Georgia 1626:1807). */

@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  size-adjust: 108.4%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'EBGaramond-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 90%;
  ascent-override: 95%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ---- tokens.css ---- */
/* Accentri - design tokens
   Ported from the Claude Design project "Accentri website redesign"
   (Accentri.dc.html, hero variant A). The prototype carries its values as
   inline styles; this is the same system expressed once.

   Two deliberate departures from the prototype, both contrast fixes:
   - its faintest grey #8A8F81 is 3.02:1 on ivory, so small text uses --faint
     (#6B7063, 4.64:1) and #8A8F81 survives only as --hairline-ink for rules.
   - the footer's last line ran at 55% ivory (3.91:1); here it is 72% (5.49:1).
   ========================================================================== */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --ivory: #F7F4EE;          /* page */
  --surface: #FFFCF6;        /* raised panels, cards, form */
  --line: rgba(23, 77, 42, 0.16);
  --line-soft: rgba(23, 77, 42, 0.14);
  --line-mid: rgba(23, 77, 42, 0.2);     /* mid hairline - folds three ad-hoc alphas */
  --line-strong: rgba(23, 77, 42, 0.3);  /* decorative rules only - 1.68:1, not a control edge */
  --line-control: rgba(23, 77, 42, 0.65);/* interactive boundaries (inputs, ghost buttons) - ~3.6:1, clears WCAG 1.4.11 */

  /* ---- Ink ------------------------------------------------------------- */
  --ink: #141710;            /* headings - 16.5:1 */
  --body: #4B5044;           /* running copy - 7.6:1 */
  --lead: #3A3F32;           /* leads and intros - 9.9:1 */
  --nav-ink: #2C3126;        /* navigation - 12.2:1 */
  --faint: #6B7063;          /* eyebrows, micro-labels - 4.6:1 */
  --hairline-ink: #8A8F81;   /* decorative only, never text */

  /* ---- Brand ----------------------------------------------------------- */
  --green: #174D2A;
  --green-hover: #0D3218;
  --green-tint: rgba(23, 77, 42, 0.05);
  --on-green: #F7F4EE;

  /* ---- Framework sides ------------------------------------------------- */
  --hard: #174D2A;
  --soft: #1E4A55;
  --soft-line: rgba(30, 74, 85, 0.18);

  /* ---- Adoption ramp ---------------------------------------------------
     Each level has a fill (bars, chips, badges) and a separate text colour.
     The fills are chosen for white - or, on amber, dark - numerals; the text
     variants are the only ones used for words. */
  --l1: #B0603A;  --l1-text: #96502F;  --l1-on: #FFFFFF;
  --l2: #1E3A5F;  --l2-text: #1E3A5F;  --l2-on: #FFFFFF;
  --l3: #5E7A52;  --l3-text: #4E6844;  --l3-on: #FFFFFF;
  --l4: #D9822B;  --l4-text: #8F5511;  --l4-on: #14170F;
  --l5: #174D2A;  --l5-text: #174D2A;  --l5-on: #FFFFFF;
  --track: rgba(23, 77, 42, 0.14);

  /* ---- Type ------------------------------------------------------------ */
  --font-text: 'Inter', 'Inter-fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'EB Garamond', 'EBGaramond-fallback', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display - EB Garamond, weight 500 */
  --fs-hero: clamp(3.25rem, 8.4vw, 8.25rem);      /* 52 → 132 */
  --fs-h1: clamp(2.625rem, 5.6vw, 5.25rem);       /* 42 → 84 */
  --fs-h1-sm: clamp(2.375rem, 4.8vw, 4.25rem);    /* 38 → 68 */
  --fs-h2: clamp(2.125rem, 3.6vw, 3.25rem);       /* 34 → 52 */
  --fs-serif-lg: 2.125rem;                        /* 34 */
  --fs-serif-md: 1.75rem;                         /* 28 */
  --fs-serif-sm: 1.6875rem;                       /* 27 */
  --fs-serif-xs: 1.5rem;                          /* 24 */

  /* Text - Inter */
  --fs-lead: 1.125rem;       /* 18   page leads */
  --fs-body-lg: 1.03125rem;  /* 16.5 long-form */
  --fs-body: 1rem;           /* 16 */
  --fs-body-sm: 0.96875rem;  /* 15.5 */
  --fs-meta: 0.90625rem;     /* 14.5 */
  --fs-sm: 0.875rem;         /* 14 */
  --fs-nav: 0.84375rem;      /* 13.5 */
  --fs-label: 0.71875rem;    /* 11.5 buttons */
  --fs-micro: 0.6875rem;     /* 11   eyebrows - the floor for text */

  --lh-display: 0.98;
  --lh-snug: 1.15;
  --lh-body: 1.64;

  --track-display: -0.022em;
  --track-hero: -0.025em;
  --track-eyebrow: 0.18em;
  --track-label: 0.14em;
  --track-index: 0.16em;
  --track-mark: 0.22em;

  /* ---- Space ----------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.375rem; --sp-6: 2rem;
  --sp-7: 2.75rem;  --sp-8: 3.5rem;   --sp-9: 5.5rem;

  --section-y: clamp(3.5rem, 7vw, 6rem);

  /* ---- Structure ------------------------------------------------------- */
  --shell-max: 73.75rem;     /* 1180px */
  --shell-gutter: clamp(1.25rem, 4vw, 2rem);
  --radius: 2px;
  --header-h: 4.75rem;       /* 76px */

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-walk: 550ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Stacking -------------------------------------------------------- */
  --z-header: 20;
  --z-menu: 70;
}

/* ---- base.css ---- */
/* Accentri - reset and element defaults */

*,
*::before,
*::after { box-sizing: border-box; }

/* The UA rule for [hidden] loses to any author `display`. Keep it decisive. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Sticky footer. Deliberately a viewport unit on body alone: with
     `html { height: 100% }` the percentage re-resolves against the full page
     height during a full-page render, which stretches main and pushes the
     footer out of frame on any page taller than one screen. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-wrap: pretty;
  overflow-x: hidden;
}

/* main must not grow. The footer is pushed down by an auto margin instead:
   auto margins absorb only positive free space, so on a page taller than the
   viewport they resolve to zero and nothing is stretched. `flex: 1` here would
   inflate main to whatever body's min-height resolved to. */
main { flex: 0 1 auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  color: var(--ink);
  text-wrap: balance;
}

/* The design's signature: "Hybrids", "project", "Accentri Anchoring" set in
   Garamond italic where the old build used a teal accent. */
.italic { font-style: italic; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { text-wrap: pretty; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* One visible focus ring everywhere. The prototype sets outline:none on its
   form controls; that is reinstated here. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: rgba(23, 77, 42, 0.14); }
/* On the green band and footer the 14%-green wash is imperceptible - invert. */
.band ::selection,
.site-footer ::selection { background: rgba(247, 244, 238, 0.85); color: var(--green); }

/* Sticky masthead - keep anchor landings clear of it. */
#main { scroll-margin-top: calc(var(--header-h) + 1rem); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: calc(var(--z-menu) + 1);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--sp-3) var(--sp-5);
  background: var(--green);
  color: var(--on-green);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: var(--on-green); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .menu-panel, .menu-panel * { transition-property: none !important; }
}

/* ---- layout.css ---- */
/* Accentri - layout primitives */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
}

.section { padding-block: var(--section-y); }
.section--top { padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--sp-8); }
.section--flush-top { padding-block: 0 var(--sp-8); }
.section--flush { padding-block: 0 var(--section-y); }

/* ==========================================================================
   Page opener - eyebrow, then headline beside its lead
   ========================================================================== */
.opener__eyebrow { margin-bottom: var(--sp-6); }
.opener__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-8);
  align-items: end;
}
.opener__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.opener__lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--lead);
  margin-bottom: var(--sp-2);
}

/* ==========================================================================
   Rules - a stack of numbered rows separated by hairlines
   ========================================================================== */
.rows > * { border-top: 1px solid var(--line); }
.rows > *:last-child { border-bottom: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 13.75rem 1fr;
  gap: var(--sp-7);
  padding-block: var(--sp-7);
}
.row__icon { margin-bottom: var(--sp-4); }
.row__title {
  font-size: var(--fs-serif-sm);
  line-height: 1.14;
}
.row__copy {
  max-width: 62ch;
  font-size: var(--fs-body-lg);
  line-height: 1.66;
  color: var(--body);
}

/* ==========================================================================
   Bordered grid - cards separated by 1px of the border colour showing through
   ========================================================================== */
.grid-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid-frame > * { background: var(--surface); padding: var(--sp-7) var(--sp-6); }

/* Two panes sharing one frame, no gap. */
.split-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.split-frame > * + * { border-left: 1px solid var(--line); }

/* ==========================================================================
   Full-bleed green band
   ========================================================================== */
.band {
  background: var(--green);
  color: var(--on-green);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.band h2, .band h3 { color: var(--on-green); }
/* The global green ring is invisible on the green band (same fix the footer has). */
.band :focus-visible { outline-color: var(--on-green); }
.band__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--sp-8);
  align-items: center;
}

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* ==========================================================================
   Prose - long-form legal/editorial copy (privacy statement)
   ========================================================================== */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); font-size: var(--fs-serif-sm); }
.prose p { margin-bottom: var(--sp-4); font-size: var(--fs-body-lg); line-height: 1.66; color: var(--body); }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.prose__draft {
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--l4);
  background: var(--surface);
  color: var(--lead);
}

/* ==========================================================================
   Responsive - the prototype is desktop-only, so every multi-column
   construction gets its own fallback here.
   ========================================================================== */
@media (max-width: 60rem) {
  .opener__grid,
  .band__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-6); }
}

@media (max-width: 46rem) {
  .grid-frame,
  .split-frame { grid-template-columns: minmax(0, 1fr); }
  .split-frame > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .grid-frame > * { padding: var(--sp-6) var(--sp-5); }
}

/* ---- site.css ---- */
/* Accentri - site chrome: masthead and footer */

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  height: var(--header-h);
}

/* ---- Wordmark ---------------------------------------------------------- */
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 2.75rem;
  color: var(--ink);
}
.wordmark__mark { width: 1.625rem; flex: none; }
.wordmark__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-mark);
  color: var(--green);
}
.wordmark__tagline {
  display: block;
  margin-top: 0.1875rem;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--faint);
}

/* ---- Primary navigation ------------------------------------------------ */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2.4vw, 1.875rem);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--nav-ink);
  font-size: var(--fs-nav);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--green); }
/* The underline is the design's current-page marker - a 2px rule under the
   label, not a hover flourish. */
.nav__link[aria-current]::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0.5rem;
  height: 2px;
  background: var(--green);
}
.nav__link[aria-current] { color: var(--green); }

/* ---- Solutions dropdown - a native <details> disclosure ----------------
   Works without JS (click/Enter/Space toggles); nav.js only adds close-on-
   Escape and close-on-outside-click. */
.nav__dropdown { position: relative; display: inline-flex; align-items: center; }
.nav__summary { gap: 0.4rem; list-style: none; }
.nav__summary::-webkit-details-marker { display: none; }
.nav__caret {
  width: 0.4rem; height: 0.4rem; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.nav__dropdown[open] .nav__caret { transform: translateY(1px) rotate(-135deg); }
.nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  min-width: 15.5rem;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(23, 77, 42, 0.12);
}
.nav__menu a {
  padding: 0.6875rem var(--sp-4);
  border-radius: var(--radius);
  color: var(--nav-ink);
  font-size: var(--fs-nav);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__menu a:hover { background: var(--green-tint); color: var(--green); }
.nav__menu a[aria-current] { color: var(--green); font-weight: 500; }

/* ---- Menu toggle ------------------------------------------------------- */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  color: var(--green);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.menu-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 0.5rem;
  flex: none;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { bottom: 0; }
[aria-expanded='true'] .menu-toggle__bars::before { transform: translateY(3.25px) rotate(45deg); }
[aria-expanded='true'] .menu-toggle__bars::after { transform: translateY(-3.25px) rotate(-45deg); }

/* ---- Off-canvas navigation --------------------------------------------- */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--sp-9);
  background: var(--ivory);
  visibility: hidden;
  opacity: 0;
  /* visibility flips at 0s: while it animates the panel is still invisible
     and .focus() inside it would silently do nothing. */
  transition: opacity var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
.menu-panel[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear 0s;
}
.menu-panel__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}
.menu-panel__link {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  color: var(--green);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
}
.menu-panel__link[aria-current] { font-style: italic; }
/* Discipline links nested under the Solutions parent - quieter and smaller. */
.menu-panel__sublink {
  font-size: clamp(1.125rem, 5vw, 1.5rem);
  color: var(--nav-ink);
}
.menu-panel__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--shell-gutter);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--green);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .menu-panel__close:hover { background: var(--green-tint); }
  .menu-panel__link:hover { font-style: italic; }
}

body[data-menu-open='true'] { overflow: hidden; }

/* The nav plus the Contact button need ~52rem; below that it collapses. */
@media (max-width: 52rem) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

@media (max-width: 22rem) {
  .masthead__inner { gap: var(--sp-3); }
  .wordmark__mark { width: 1.375rem; }
  .wordmark__name { font-size: 0.875rem; letter-spacing: 0.14em; }
  .wordmark__tagline { letter-spacing: 0.12em; }
  /* Label is hidden below, leaving only the 18px bars - pin a real 44px target. */
  .menu-toggle { gap: 0; min-width: 2.75rem; justify-content: center; }
  .menu-toggle__label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ==========================================================================
   Footer - brand green, three zones, oversized mark
   ========================================================================== */
.site-footer {
  margin-top: auto;      /* sticky footer - see the note on main in base.css */
  background: var(--green);
  color: var(--on-green);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-9);
}
.site-footer__name {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.05;
}
.site-footer__disciplines {
  font-size: 0.8125rem;
  line-height: 1.7;
  /* 0.72 keeps this at 5.5:1 on the green; the prototype's 0.55 was 3.9:1. */
  color: rgba(247, 244, 238, 0.85);
}
.site-footer__meta {
  margin-top: var(--sp-5);
  font-size: 0.75rem;
  color: rgba(247, 244, 238, 0.72);
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: var(--fs-nav);
  color: rgba(247, 244, 238, 0.85);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__nav a:hover,
.site-footer__nav a[aria-current] { color: var(--on-green); }
.site-footer__nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

.site-footer__mark { width: 5.5rem; opacity: 0.9; justify-self: end; }

/* The global green ring is invisible on green. */
.site-footer :focus-visible { outline-color: var(--on-green); }

/* Comfortable rhythm on a pointer, a real 44px target on a finger. */
@media (hover: none) and (pointer: coarse) {
  .site-footer__nav { gap: 0; }
  .site-footer__nav a { min-height: 2.75rem; }
}

@media (max-width: 60rem) {
  .site-footer__inner { grid-template-columns: 1fr auto; gap: var(--sp-6) var(--sp-7); }
  .site-footer__mark { grid-row: 1; grid-column: 2; width: 4rem; }
  .site-footer__nav { grid-column: 1 / -1; flex-flow: row wrap; gap: var(--sp-2) var(--sp-5); }
}
@media (max-width: 30rem) {
  .site-footer__name { font-size: 1.75rem; }
}

/* ---- components.css ---- */
/* Accentri - components */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.875rem;
  padding: 0.9375rem 1.5rem;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: var(--on-green);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition-property: background-color, border-color, color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.btn:hover { color: var(--on-green); }
@media (hover: hover) {
  .btn:hover { background: var(--green-hover); border-color: var(--green-hover); }
}

.btn--ghost { background: transparent; color: var(--green); border-color: var(--line-control); }
.btn--ghost:hover { color: var(--green-hover); }
@media (hover: hover) {
  .btn--ghost:hover { background: var(--green-tint); border-color: var(--green); }
}

/* Reversed, for use inside a green band. */
.btn--on-green { background: var(--ivory); color: var(--green); border-color: var(--ivory); }
.btn--on-green:hover { color: var(--green); }
@media (hover: hover) {
  .btn--on-green:hover { background: #FFFDF8; border-color: #FFFDF8; }
}

/* Press feedback - touch devices get the hover colours on :active (no transform,
   so nothing shifts layout). Without this a tap shows no response until nav. */
.btn:active { background: var(--green-hover); border-color: var(--green-hover); }
.btn--ghost:active { background: var(--green-tint); border-color: var(--green); }
.btn--on-green:active { background: #FFFDF8; border-color: #FFFDF8; }

.btn--sm { min-height: 2.75rem; padding: 0.75rem 1.125rem; font-size: var(--fs-micro); }

/* Quiet underlined link-button. */
.btn-inline {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--green);
  border-bottom: 1px solid var(--line-control);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.btn-inline:hover { border-color: var(--green); color: var(--green-hover); }

/* ==========================================================================
   Eyebrow
   ========================================================================== */
.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow--index { letter-spacing: var(--track-index); }
.eyebrow--on-green { color: rgba(247, 244, 238, 0.72); }

/* ==========================================================================
   Icons - line glyphs that support titled items (replace index numbers)
   ========================================================================== */
.icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  color: var(--green);
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.tabs__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.8125rem 1.25rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--faint);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}
.tabs__link:hover { color: var(--green); }
.tabs__link[aria-current] { color: var(--green); border-bottom-color: var(--green); }
@media (max-width: 30rem) {
  .tabs__link { padding-inline: var(--sp-2); letter-spacing: 0.05em; }
}

/* ==========================================================================
   Disclosure - native <details>, so it works with JS disabled
   ========================================================================== */
.disclose {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--green));
  background: var(--surface);
  padding: var(--sp-4) 1.125rem;
}
.disclose > summary { display: flex; flex-direction: column; gap: 0.3125rem; }
.disclose__title { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.disclose__question { font-size: 0.84375rem; color: var(--faint); }
.disclose__body {
  margin-top: var(--sp-4);
  font-size: 0.90625rem;
  line-height: 1.62;
  color: var(--body);
}

/* Strip the default marker, keep an affordance of our own. */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }
summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ==========================================================================
   Step disclosure - number, title, ownership tag and coverage bars
   ========================================================================== */
.step { border-top: 1px solid var(--line); padding-block: var(--sp-5); }
.step:last-of-type { border-bottom: 1px solid var(--line); }
.step > summary {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 1.125rem;
  align-items: center;
}
.step__num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent-text);
  font-size: 0.78125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step__title { display: block; font-size: 1.03125rem; font-weight: 600; color: var(--ink); }
.step__question { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--faint); }
.step__meta { display: flex; flex-direction: column; gap: 0.5625rem; align-items: flex-end; }
.step__owner {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.step__body {
  margin: var(--sp-4) 0 0 3.125rem;
  max-width: 64ch;
  font-size: 0.9375rem;
  line-height: 1.64;
  color: var(--body);
}

/* Coverage bars */
.coverage { display: flex; gap: 3px; width: 10rem; }
.coverage span { flex: 1; height: 3px; background: var(--track); }
.coverage [data-on='1'] { background: var(--l1); }
.coverage [data-on='2'] { background: var(--l2); }
.coverage [data-on='3'] { background: var(--l3); }
.coverage [data-on='4'] { background: var(--l4); }
.coverage [data-on='5'] { background: var(--l5); }

@media (max-width: 46rem) {
  .step > summary { grid-template-columns: 2rem 1fr; row-gap: var(--sp-3); }
  .step__meta { grid-column: 2; align-items: flex-start; }
  .step__body { margin-left: 0; }
  .coverage { width: 100%; max-width: 12rem; }
}

/* ==========================================================================
   Legend
   ========================================================================== */
.legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.875rem; }
.legend__bar { display: block; height: 3px; margin-bottom: var(--sp-2); background: var(--accent); }
.legend__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
}
@media (max-width: 34rem) {
  .legend { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-4); }
}

/* ==========================================================================
   Level card
   ========================================================================== */
.level {
  display: grid;
  grid-template-columns: 2.125rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
}
.level__num {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.level__name { margin-bottom: 0.375rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.level__question { margin-bottom: var(--sp-2); font-size: 0.84375rem; font-weight: 500; color: var(--accent-text); }
.level__detail { font-size: var(--fs-sm); line-height: 1.6; color: var(--body); }

/* ==========================================================================
   Walkthrough - the one genuinely interactive piece
   ========================================================================== */
.walk {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--sp-6) 2.25rem 1.875rem;
}
.walk__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.walk__title { font-size: 1.875rem; line-height: 1.1; }
.walk__controls { display: flex; gap: 0.625rem; }
.walk__track {
  position: relative;
  height: 3px;
  margin-bottom: 1.125rem;
  background: rgba(23, 77, 42, 0.12);
  overflow: hidden;
}
.walk__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: var(--l1);
  transition: width var(--dur-walk) var(--ease-out), background-color var(--dur-walk) var(--ease-out);
}
.walk__chips { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.walk__chip {
  flex: 1 1 8.75rem;
  min-height: 2.75rem;
  padding: var(--sp-4);
  text-align: left;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  color: var(--lead);
  transition: background-color var(--dur-walk) var(--ease-out),
              color var(--dur-walk) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.walk__chip[data-on='true'] { background: var(--accent); color: var(--accent-on); }
.walk__chip[data-current='true'] { box-shadow: 0 6px 18px rgba(23, 77, 42, 0.18); }
@media (hover: hover) {
  .walk__chip:not([data-on='true']):hover { background: var(--green-tint); }
}
.walk__chip-n { display: block; margin-bottom: 0.375rem; font-size: var(--fs-micro); letter-spacing: 0.14em; opacity: 0.75; font-variant-numeric: tabular-nums; }
/* At 0.75 the numeral on the active amber chip (dark-on-amber) drops to ~4.18:1. */
.walk__chip[data-on='true'] .walk__chip-n { opacity: 1; }
.walk__chip-name { display: block; font-size: var(--fs-sm); font-weight: 500; }
.walk__detail {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2.25rem;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}
.walk__question { font-family: var(--font-display); font-size: 1.5625rem; line-height: 1.28; color: var(--ink); }
.walk__copy { font-size: var(--fs-body); line-height: 1.66; color: var(--body); }

@media (max-width: 46rem) {
  .walk { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .walk__detail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .walk__controls { width: 100%; }
  .walk__controls .btn { flex: 1; }
}

/* ==========================================================================
   Form
   ========================================================================== */
.form-card { border: 1px solid var(--line); background: var(--surface); padding: var(--sp-8); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--faint);
}
.field__control {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-control);
  background: transparent;
  font-size: 0.96875rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field__control:hover { border-bottom-color: var(--green); }
.field__control:focus-visible { border-bottom-color: var(--green); }
textarea.field__control {
  min-height: 8rem;
  padding: var(--sp-3);
  border: 1px solid var(--line-control);
  resize: vertical;
}
.field__control[type='file'] { font-size: 0.8125rem; padding-block: var(--sp-3); }
.field__control[type='file']::file-selector-button {
  margin-right: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: none;
  color: var(--green);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.field__control[aria-invalid='true'] { border-color: var(--l1-text); }
.field__error:empty { display: none; }
.field__error { font-size: 0.8125rem; line-height: 1.4; color: var(--l1-text); }

.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.125rem; margin-top: 1.75rem; }
.form-status { font-size: 0.84375rem; color: var(--body); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* Audience selector - a real <fieldset>/<legend>, reset to the field rhythm. */
.audience { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.audience > .field__label { padding: 0; }
.audience__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.audience__opt {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 2.75rem; font-size: var(--fs-body-sm); color: var(--lead); cursor: pointer;
}
.audience__opt input { accent-color: var(--green); width: 1.1em; height: 1.1em; }

/* Optional marker, help text, privacy notice */
.field__optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }
.field__help { font-size: 0.8125rem; line-height: 1.4; color: var(--faint); }
.form-consent { font-size: 0.8125rem; line-height: 1.5; color: var(--faint); }
.form-consent a { text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot - off-screen; a real visitor never sees or fills it. */
.hp-field {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0;
}
.form-note { margin-top: var(--sp-4); font-size: 0.8125rem; color: var(--faint); }

@media (max-width: 40rem) {
  .form-card { padding: var(--sp-6) var(--sp-5); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Placeholder plate - where authentic photography will go
   ========================================================================== */
.plate {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 10;
  padding: 1.125rem;
  background: repeating-linear-gradient(135deg, rgba(23, 77, 42, 0.08) 0 2px, transparent 2px 12px);
}
.plate span { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint); }

/* ---- motion.css ---- */
/* Accentri - motion
   ==========================================================================
   The vocabulary is the design's own: its stylesheet defines
   `@keyframes rise { opacity 0 -> 1; translateY 16px -> 0 }` and never uses it,
   and its only two transitions run at .5s/.55s. So: slow, soft, 16px. Nothing
   springy, nothing that loops, nothing that draws attention to itself.

   Three rules this file obeys:
   1. Only opacity and transform animate. Both are compositor-only, so motion
      can never contribute to CLS.
   2. Everything is gated on `html.js`. Without JavaScript no element is ever
      left at opacity 0 - the page is simply static.
   3. prefers-reduced-motion switches it off entirely rather than shortening it.
   ========================================================================== */

:root {
  --dur-rise: 620ms;
  --ease-rise: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   The observer adds .is-in; until then the element sits 16px low and clear.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-rise) var(--ease-rise),
              transform var(--dur-rise) var(--ease-rise);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Group children are observed individually, not as a block. Observing the
   container instead made a tall list fire all at once the moment its top edge
   clipped the viewport - by the time you reached row four it had long since
   animated. The stagger is applied by JS, and only to items that genuinely
   arrive together; a row entering on its own gets no delay. */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-rise) var(--ease-rise),
              transform var(--dur-rise) var(--ease-rise);
}
.js [data-reveal-group] > .is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Hero entrance
   Above the fold, so it plays on load rather than on scroll - revealing it
   twice would be the one thing worse than not revealing it at all.
   -------------------------------------------------------------------------- */
.js .hero__title,
.js .hero__tagline,
.js .hero__actions {
  animation: rise var(--dur-rise) var(--ease-rise) both;
}
.js .hero__tagline { animation-delay: 90ms; }
.js .hero__actions { animation-delay: 170ms; }

/* The mark drifts in slightly later and further, because it is scenery. */
.js .hero__mark {
  animation: markIn 1100ms var(--ease-rise) both;
  animation-delay: 120ms;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes markIn {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 0.06; transform: none; }
}

/* --------------------------------------------------------------------------
   Disclosures
   Native <details> snaps. `interpolate-size` lets height animate to and from
   `auto`; where it is unsupported the disclosure simply opens instantly, which
   is exactly today's behaviour.
   -------------------------------------------------------------------------- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .disclose,
  .step {
    /* details-content is the anonymous box holding everything after summary */
    &::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: block-size var(--dur) var(--ease-out),
                  content-visibility var(--dur) allow-discrete,
                  opacity var(--dur) var(--ease-out);
    }
    &[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* The summary chevron: a quiet affordance that the row opens. */
.disclose > summary,
.step > summary { position: relative; }
.disclose__title { padding-right: 1.5rem; }
.disclose > summary::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.disclose[open] > summary::after { transform: rotate(-135deg); border-color: var(--green); }
.disclose > summary:hover::after { border-color: var(--green); }

/* Steps carry no chevron - their right column holds the ownership tag and
   coverage bars - so the title itself takes the hover cue, as do disclosures. */
.disclose > summary:hover .disclose__title,
.step > summary:hover .step__title { color: var(--green); }

/* --------------------------------------------------------------------------
   Masthead
   Flat against the page until you leave the top, then it earns its edge.
   -------------------------------------------------------------------------- */
.masthead {
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.js .masthead { border-bottom-color: transparent; }
.js .masthead[data-scrolled='true'] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(23, 77, 42, 0.05);
}

/* --------------------------------------------------------------------------
   Small interactive touches
   -------------------------------------------------------------------------- */
/* The arrow on a quiet link leans forward on hover. */
.btn-inline { gap: 0.4em; }
.btn-inline > .arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
@media (hover: hover) {
  .btn-inline:hover > .arrow { transform: translateX(4px); }
  /* Cards lift by a hair - 1px, not a pop. Only .office is interactive; .level
     is a static <article> and had a transition it could never fire. */
  .office { transition: transform var(--dur) var(--ease-out); }
  .office:hover { transform: translateY(-1px); }
}

/* --------------------------------------------------------------------------
   Off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .hero__title,
  .js .hero__tagline,
  .js .hero__actions,
  .js .hero__mark { animation: none !important; }
  .js .hero__mark { opacity: 0.06; }
  .js .masthead { border-bottom-color: var(--line); }
}