@charset "utf-8";
/* ==========================================================================
   Open Door Consulting
   Design system + homepage. See DESIGN.md for the rationale behind every
   token. Colours are OKLCH; the ink hue (241) and brass hue (86) are sampled
   from the existing logo, so `--ink-800` is #0C2C41 and `--brass` is #DAAF49.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — paper */
  --paper:        oklch(0.982 0.0035 241);
  --paper-2:      oklch(0.958 0.0050 241);
  --paper-3:      oklch(0.925 0.0070 241);

  /* Surfaces — ink */
  --ink-950:      oklch(0.155 0.0280 243);
  --ink-900:      oklch(0.205 0.0400 242);
  --ink-800:      oklch(0.281 0.0535 241);   /* the logo navy */
  --ink-700:      oklch(0.360 0.0500 240);

  /* Text */
  --text:         oklch(0.245 0.0300 242);   /* 15.4:1 on paper  */
  --text-muted:   oklch(0.455 0.0280 241);   /*  6.9:1 on paper  */
  --on-ink:       oklch(0.955 0.0050 240);   /* 17.1:1 on ink-950 */
  --on-ink-muted: oklch(0.780 0.0120 240);   /*  9.8:1 on ink-950 */

  /* Brass — logo gold. Never small text on a light surface. */
  --brass:        oklch(0.774 0.1283 86);
  --brass-deep:   oklch(0.520 0.1050 80);    /*  5.3:1 on paper  */

  /* Per-surface roles, remapped by .on-ink */
  --surface:      var(--paper);
  --fg:           var(--text);
  --fg-muted:     var(--text-muted);
  --hairline:     var(--paper-3);
  --accent-text:  var(--brass-deep);

  /* Type */
  --font-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-text:    "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
  --step-1:  clamp(1.1875rem, 1.11rem + 0.38vw, 1.4375rem);
  --step-2:  clamp(1.4375rem, 1.31rem + 0.63vw, 1.9375rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.625rem);
  --step-4:  clamp(2rem, 1.6rem + 2vw, 3.375rem);
  --step-5:  clamp(2.25rem, 1.7rem + 2.3vw, 3.5rem);

  --measure: 68ch;
  --measure-tight: 54ch;

  /* Space */
  --sp-1: 0.5rem;   --sp-2: 0.75rem;  --sp-3: 1rem;    --sp-4: 1.5rem;
  --sp-5: 2rem;     --sp-6: 3rem;     --sp-7: 4rem;    --sp-8: 6rem;
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --shell: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  /* Depth — semantic scale, no arbitrary values */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;

  --mark-void: var(--ink-800);
}

/* Ink surfaces remap the role tokens rather than overriding every rule. */
.on-ink {
  --surface:     var(--ink-900);
  --fg:          var(--on-ink);
  --fg-muted:    var(--on-ink-muted);
  --hairline:    var(--ink-800);
  --accent-text: var(--brass);
  --mark-void:   var(--ink-950);
  color: var(--fg);
  background: var(--surface);
}
.on-ink--deep { --surface: var(--ink-950); --hairline: oklch(0.26 0.045 241); }

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 380;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--fg);
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--brass); color: var(--ink-950); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: var(--z-modal);
  padding: 0.75rem 1.25rem;
  background: var(--brass);
  color: var(--ink-950);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  transition: top var(--dur) var(--ease-out-expo);
}
.skip-link:focus { top: 1rem; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose p { color: var(--fg); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg);
}

/* Section heading block: a hairline, the heading, an optional standfirst.
   Deliberately NOT an uppercase tracked eyebrow — that grammar is banned. */
/* The rule spans the full shell; only the text is held to a measure, so the
   heading block lines up with the full-width content beneath it. */
.sec-head h2, .sec-head__sub { max-width: var(--measure); }
.sec-head__rule {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.sec-head__rule--brass {
  background: linear-gradient(90deg, var(--brass) 0 clamp(56px, 8vw, 104px), var(--hairline) clamp(56px, 8vw, 104px));
}
.sec-head h2 { font-size: var(--step-3); }
.sec-head__sub {
  margin-top: var(--sp-4);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: var(--measure-tight);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 560;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart),
    color var(--dur) var(--ease-out-quart),
    transform var(--dur) var(--ease-out-quart);
}
.btn__arrow { transition: transform var(--dur) var(--ease-out-expo); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--brass);
  color: var(--ink-950);           /* 9.5:1 */
  border-color: var(--brass);
}
.btn--primary:hover {
  background: oklch(0.83 0.132 86);
  border-color: oklch(0.83 0.132 86);
}

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: color-mix(in oklab, var(--fg) 32%, transparent);
}
.btn--ghost:hover {
  border-color: var(--fg);
  background: color-mix(in oklab, var(--fg) 7%, transparent);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Quiet inline link with an underline that grows on hover */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 560;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--accent-text);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease-out-expo);
}
.link:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

/* Default state — and the only state without JS: the header sits over the ink
   hero and scrolls away with it. Nothing is fixed, so it can never float
   illegibly over a paper section if the script fails to load. */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  color: var(--on-ink);
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* JS upgrade: once past the hero, the header returns as a slim pinned bar,
   hidden while scrolling down and revealed on scroll-up. */
.site-header.is-pinned {
  position: fixed;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--paper-3);
  color: var(--text);
  transition: transform 420ms var(--ease-out-expo);
}
.site-header.is-pinned .site-header__inner { min-height: 4.25rem; }
.site-header.is-pinned.is-away { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 5rem;
}

/* Logo lockup: SVG mark + type-set wordmark (selectable, sharp at any size) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.logo__mark { width: auto; height: 2.25rem; color: var(--brass); }
.logo__type { display: grid; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}
.logo__sub {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentColor 62%, transparent);
  margin-top: 0.3rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  list-style: none;
}
.nav__link {
  font-size: 0.9375rem;
  font-weight: 450;
  text-decoration: none;
  color: inherit;
  opacity: 0.82;
  position: relative;
  padding-block: 0.35rem;
  transition: opacity var(--dur) var(--ease-out-quart);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out-expo);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { opacity: 1; font-weight: 560; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { padding: 0.7rem 1.15rem; }

/* Mobile menu */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  border-radius: 2px;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 560;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; width: 15px; }
.nav-toggle__bars span {
  height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform var(--dur) var(--ease-out-expo), opacity var(--dur);
}
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6.5rem, 13vh, 9rem) clamp(4rem, 8vw, 6.5rem);
}
.hero::after {                      /* a slow lift from the base of the fold */
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, color-mix(in oklab, var(--ink-800) 42%, transparent), transparent);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__promise {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--brass);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__promise::before {
  content: "";
  width: clamp(28px, 4vw, 52px);
  height: 1px;
  background: var(--brass);
}

.hero h1 {
  font-size: var(--step-5);
  line-height: 1.08;
  letter-spacing: -0.026em;
}

.hero__sub {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-ink-muted);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   7. Influence graph — the site's one piece of imagery.
      A stakeholder map: nodes on a deliberate grid, one brass path traced
      through the system. Generated SVG, never stock photography.
   -------------------------------------------------------------------------- */

.graph { width: 100%; height: auto; overflow: visible; }
.graph__edge {
  fill: none;
  stroke: var(--ink-700);
  stroke-width: 1;
  opacity: 0.85;
}
.graph__node { fill: var(--ink-950); stroke: var(--ink-700); stroke-width: 1.25; }
.graph__node--major { stroke: var(--on-ink-muted); }
.graph__path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.graph__path-node { fill: var(--brass); stroke: none; }
.graph__halo { fill: none; stroke: var(--brass); stroke-width: 1; opacity: 0.28; }

/* --------------------------------------------------------------------------
   8. Proof strip — the credential line under the hero
   -------------------------------------------------------------------------- */

.proof {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.proof__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem) clamp(1.5rem, 4vw, 3.5rem);
}
.proof__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--fg-muted);
}
.proof__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   9. Index rows — the six advisory areas, set as a briefing-folder contents
      page rather than six identical cards. Full borders only, no side stripes.
   -------------------------------------------------------------------------- */

.index { border-top: 1px solid var(--hairline); }

.index__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(0.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.2vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: background-color var(--dur) var(--ease-out-quart);
}
.index__row:hover { background: color-mix(in oklab, var(--fg) 3.5%, transparent); }

.index__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--fg);
  margin: 0;
}
.index__body { color: var(--fg-muted); line-height: 1.6; }
.index__best {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  color: var(--accent-text);
}
.index__best b { font-weight: 560; }

/* The differentiator row is marked, not caged — a brass rule above it. */
.index__row--flag { border-top: 2px solid var(--brass); }
.index__flag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   10. Statement — one sentence, display size, full-bleed ink
   -------------------------------------------------------------------------- */

.statement { padding-block: clamp(4.5rem, 10vw, 8rem); }
/* Sized in rem, not ch: `ch` here would resolve against the inherited body
   size, not the display size the blockquote actually sets at. */
.statement__inner { max-width: 42rem; }
.statement blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.statement blockquote em {
  font-style: italic;
  color: var(--brass);
}
.statement__mark {
  width: clamp(60px, 9vw, 110px);
  height: 1px;
  background: var(--brass);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   11. Difference — two-column argument
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.split__aside h2 { font-size: var(--step-3); }
.split__aside p { margin-top: var(--sp-4); color: var(--fg-muted); }
.split__aside .link { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   The Open Door Lens — Andrew's six questions. This is the firm's named
   framework, which is the one place on the page numbers are earned: they
   label a defined set a client is meant to remember, not section scaffolding.
   -------------------------------------------------------------------------- */

.lens__title { font-size: var(--step-2); }
.lens__intro {
  margin-top: var(--sp-3);
  color: var(--fg-muted);
  max-width: 46ch;
}
.lens__grid {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
}
.lens__item { border-top: 1px solid var(--hairline); padding-top: var(--sp-3); }
.lens__n {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.45rem;
}
.lens__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.lens__q { margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-muted); }

@media (max-width: 34rem) { .lens__grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Testimonial. Set as type, deliberately without the client's logo — a loud
   supplier badge would fight the palette and pull the page toward vendor.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Testimonial carousel.

   Default (and the only state without JS): every quote is visible in a grid.
   Nothing is hidden by the markup, so a script that never runs cannot hide
   client proof. The script opts in by adding .is-live.
   -------------------------------------------------------------------------- */

.carousel.is-live .quotes {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}
.carousel.is-live .quote {
  grid-area: 1 / 1;                 /* stack for a crossfade; height = tallest */
  /* Natural height, top-aligned. The three quotes differ a lot in length, and
     stretching the short ones would strand their attribution at the bottom of
     the tallest slide. The container still sizes to the tallest, so switching
     slides never shifts the page. */
  height: auto;
  align-self: start;
  opacity: 0;
  visibility: hidden;               /* also removes it from the a11y tree + tab order */
  transition: opacity 600ms var(--ease-out-quart), visibility 0s linear 600ms;
}
.carousel.is-live .quote.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms var(--ease-out-quart), visibility 0s;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 46rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.carousel__dots { display: flex; gap: 0.5rem; }

/* Hairline dots to match the rest of the system. The button is a 44x24 target
   for WCAG 2.5.8; only the 2px rule inside it is visible. */
.carousel__dot {
  position: relative;
  width: 44px; height: 24px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.carousel__dot::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: color-mix(in oklab, var(--fg) 24%, transparent);
  transition: background-color var(--dur) var(--ease-out-quart);
}
.carousel__dot:hover::before { background: color-mix(in oklab, var(--fg) 45%, transparent); }
.carousel__dot[aria-current="true"]::before { background: var(--brass); }

.carousel__toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.7rem 0.4rem 0.5rem;
  background: none;
  border: 1px solid color-mix(in oklab, var(--fg) 22%, transparent);
  border-radius: 2px;
  color: var(--fg-muted);
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart);
}
.carousel__toggle:hover { color: var(--fg); border-color: color-mix(in oklab, var(--fg) 45%, transparent); }
.carousel__icon {
  width: 9px; height: 10px;
  background: currentColor;
  /* two bars = pause */
  clip-path: polygon(0 0, 3px 0, 3px 10px, 0 10px, 0 0, 6px 0, 9px 0, 9px 10px, 6px 10px);
}
.carousel[data-playing="false"] .carousel__icon {
  clip-path: polygon(0 0, 9px 50%, 0 100%);   /* triangle = play */
}

/* Sized to hold two quotes side by side, and to reflow to three or one
   without redesign as more arrive. */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2.75rem, 5vw, 4.5rem);
  align-items: start;
}
.quote { margin: 0; display: flex; flex-direction: column; height: 100%; }
.quote__mark { width: clamp(48px, 7vw, 84px); height: 1px; background: var(--brass); margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--fg);
  text-wrap: pretty;
}
.quote blockquote p + p { margin-top: 1rem; color: var(--fg-muted); }
.quote figcaption {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.2rem;
}
.quote__name { font-weight: 600; }
.quote__role { font-size: 0.9375rem; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   Positioning creed + hero triad
   -------------------------------------------------------------------------- */

.creed {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.creed__line {
  font-size: var(--step-3);
  line-height: 1.14;
  margin: 0;
}
.creed__body { color: var(--fg-muted); }
.creed__body p + p { margin-top: 1rem; }
@media (max-width: 52rem) { .creed { grid-template-columns: 1fr; } }

/* Andrew's three-verb line, closing the hero */
.triad {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.triad span { color: var(--brass); }

.statement__attrib {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   12. Specialism panel — workers compensation
   -------------------------------------------------------------------------- */

.specialism {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--hairline);
  /* Adapts to whichever surface it sits on — paper or ink */
  background: color-mix(in oklab, var(--fg) 4%, var(--surface));
}
.specialism h2 { font-size: var(--step-3); }
.specialism__body { margin-top: var(--sp-4); color: var(--fg-muted); max-width: 52ch; }
.specialism__list { list-style: none; display: grid; gap: 0.85rem; }
.specialism__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.specialism__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.specialism__list li::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--brass);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   13. Sectors
   -------------------------------------------------------------------------- */

/* Fixed column counts rather than auto-fit: there are eight cells, so 4 / 2 / 1
   all divide evenly and the grid never leaves a hairline-coloured hole. */
.sectors {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (max-width: 68rem) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .sectors { grid-template-columns: minmax(0, 1fr); } }

/* The eighth cell: an invitation rather than a sector. */
.sectors__cta a { display: flex; flex-direction: column; justify-content: space-between; }
.sectors__cta .sectors__name { color: var(--accent-text); }
.sectors__cta .sectors__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 560;
  color: var(--accent-text);
}
.sectors__cta a:hover .btn__arrow { transform: translateX(3px); }
.sectors li { background: var(--surface); }
.sectors a {
  display: block;
  height: 100%;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur) var(--ease-out-quart);
}
.sectors a:hover { background: color-mix(in oklab, var(--brass) 10%, var(--surface)); }
.sectors__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: block;
}
.sectors__note {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   14. Close + footer
   -------------------------------------------------------------------------- */

.close { padding-block: clamp(5rem, 11vw, 9rem); position: relative; overflow: hidden; }
.close__inner { max-width: 46rem; }   /* rem, for the same reason as .statement__inner */
.close h2 { font-size: var(--step-4); line-height: 1.12; }
.close p { margin-top: var(--sp-4); color: var(--fg-muted); max-width: 50ch; }

.contact-direct {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) clamp(2rem, 5vw, 4rem);
  font-size: 0.9375rem;
}
.contact-direct dt { color: var(--fg-muted); margin-bottom: 0.3rem; }
.contact-direct dd { margin: 0; }
.contact-direct a { text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--brass) 60%, transparent); }
.contact-direct a:hover { border-bottom-color: var(--brass); }

.site-footer { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--hairline); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
}
.site-footer__meta { font-size: 0.875rem; color: var(--fg-muted); }
.site-footer__meta p + p { margin-top: 0.3rem; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; }
.site-footer__nav a { font-size: 0.875rem; text-decoration: none; color: var(--fg-muted); }
.site-footer__nav a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   15. Motion
       Content renders visible by default; JS adds .reveal-ready to opt in,
       so a no-JS / headless render never ships a blank section.
   -------------------------------------------------------------------------- */

/* The `will-*` classes are applied BY the script, never by the markup. If
   site.js 404s, throws, or the renderer is headless, no element is ever
   hidden and the page ships complete. Reveals enhance; they never gate. */

.will-reveal { opacity: 0; transform: translateY(14px); }
.will-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Hero first-load choreography — the page's one orchestrated moment.
   `.anim` is set on <html> by a head guard that carries its own timeout
   failsafe, so a script that never arrives cannot leave the hero blank. */
.anim .hero [data-hero] { opacity: 0; transform: translateY(18px); }
.anim .hero.is-ready [data-hero] {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
  transition-delay: var(--hero-delay, 0ms);
}

/* Graph draw-in. --len is measured per element by the script. */
.anim .graph__edge,
.anim .graph__path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
.anim .graph__node,
.anim .graph__path-node,
.anim .graph__halo { opacity: 0; }

.anim .hero.is-ready .graph__edge,
.anim .hero.is-ready .graph__path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease-out-quart);
  transition-delay: var(--draw-delay, 0ms);
}
.anim .hero.is-ready .graph__node,
.anim .hero.is-ready .graph__path-node {
  opacity: 1;
  transition: opacity 500ms ease;
  transition-delay: var(--draw-delay, 0ms);
}
.anim .hero.is-ready .graph__halo {
  opacity: 0.28;
  transition: opacity 700ms ease;
  transition-delay: var(--draw-delay, 0ms);
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { max-width: 460px; margin-inline: auto; opacity: 0.9; }
  .split, .specialism { grid-template-columns: 1fr; }
  .index__row { grid-template-columns: 1fr; gap: 0.9rem; }
}

@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; }

  /* The whole nav becomes a panel anchored to the bottom edge of the header,
     so it tracks the header's height whether it is full or pinned-slim. */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-5);
    background: var(--ink-950);
    color: var(--on-ink);
    border-bottom: 1px solid var(--ink-800);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;                       /* so the rule spans the full row */
    padding-block: 1rem;
    border-bottom: 1px solid var(--ink-800);
    font-size: 1.0625rem;
    opacity: 1;
  }
  .nav__link::after { content: none; }
  .nav__cta { margin-top: var(--sp-4); justify-content: center; }
}

@media (max-width: 34rem) {
  .logo__mark { height: 1.9rem; }
  .logo__name { font-size: 1.05rem; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { gap: 0.75rem; }
  .steps__item { grid-template-columns: 1.75rem 1fr; gap: 0.75rem; }
}

/* --------------------------------------------------------------------------
   17. Reduced motion + print
   -------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }
  /* Nothing may stay hidden waiting on a transition that will not run. */
  .will-reveal,
  .anim .hero [data-hero] { opacity: 1 !important; transform: none !important; }
  .graph__edge, .graph__path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .graph__node, .graph__path-node { opacity: 1 !important; }
  .graph__halo { opacity: 0.28 !important; }
  .site-header.is-pinned { transition: none !important; }
}

@media print {
  .site-header, .hero__figure, .btn-row, .nav-toggle { display: none !important; }
  .on-ink, .on-ink--deep { background: #fff !important; color: #000 !important; }
  body { font-size: 11pt; }
}