/* Self-hosted webfonts. Regenerate with tools/fetch_fonts.py. */
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Caveat-latin-ext-normal-Wnz6HAc5bAfYB2Q7aDYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Caveat-latin-normal-Wnz6HAc5bAfYB2Q7ZjYYiAzcPA.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;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Caveat-latin-ext-normal-Wnz6HAc5bAfYB2Q7aDYYiAzcPDKo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Caveat-latin-normal-Wnz6HAc5bAfYB2Q7ZjYYiAzcPA.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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-latin-ext-italic-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ7ZXk8kD6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-latin-italic-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ7ZXk8g.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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-latin-ext-normal-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-latin-normal-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-latin-ext-normal--F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-latin-normal--F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-latin-ext-normal--F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgsAXHNlYzg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-latin-normal--F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgsAXHNk.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-ext-italic-zYXEKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbM4jw8V78x9OWIhqbQ5g0voKE7-jfBVSl7w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-italic-zYXEKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbM4jw8V78x9OWIhqbQ5g6voKE7-jfBVQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-ext-normal-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-normal-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-ext-normal-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-normal-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-ext-normal-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-latin-normal-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.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;
}

/* ==========================================================================
   SantiXS — the one stylesheet.

   Organised as: tokens → reset → type → shell → chrome → primitives → pages
   → responsive. Every colour and size is a token; nothing below the token
   block hardcodes a hex value. Selectors stay at one class deep so nothing
   here silently outranks anything else.

   build.mjs concatenates fonts.css ahead of this file into one stylesheet, so
   there is no @import here and no second request before the faces resolve.
   ========================================================================== */

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

:root {
  /* Palette. Sampled from santixs.com; the names say the job, not the hue. */
  --shell-ink:   #2c2c2c;   /* masthead, colophon, dark panels               */
  --paper:       #ffffff;
  --paper-alt:   #f6f6f6;
  --wash:        #e7e7e7;   /* the tinted band behind photographic sections  */
  --amber:       #ffb400;   /* call-to-action fill and the numbered cards    */
  --gold:        #c99119;   /* the XS in the wordmark, colophon base row     */
  --indigo:      #25318d;   /* every eyebrow and stat label on light ground  */
  --navy:        #272964;
  --taupe:       #5d4c4b;
  --flag:        #ff0000;   /* used exactly once, on the homepage            */
  --claret:      #8b0000;   /* the headline figures on a case study          */
  --chalk:       #cccccc;   /* the handwritten aside over photography        */

  --ink:         #2c2c2c;
  --ink-strong:  #000000;
  --ink-soft:    #323232;
  --ink-invert:  #ffffff;
  --rule:        #e7e7e7;
  --rule-invert: rgba(255, 255, 255, 0.22);

  /* Type. Four faces, each with one job. */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand:    'Caveat', 'Bradley Hand', cursive;

  /* Scale. Anchored to the source's desktop sizes, fluid below that. */
  --t-hero:    clamp(2rem, 1.05rem + 3.6vw, 2.75rem);   /* 32 → 44 */
  --t-display: clamp(1.75rem, 1.1rem + 2.5vw, 2.5rem);  /* 28 → 40 */
  --t-stat:    clamp(2rem, 1.25rem + 2.6vw, 2.5625rem); /* 32 → 41 */
  --t-card:    clamp(1.25rem, 1.05rem + 0.7vw, 1.5625rem);
  --t-kicker:  clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --t-lede:    1.1875rem;
  --t-body:    1.125rem;
  --t-ui:      1rem;
  --t-small:   0.875rem;
  --t-meta:    0.75rem;
  --t-micro:   0.6875rem;

  /* Layout. */
  --shell:  70rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --flow:   1.15rem;                  /* default gap between stacked text */
  --band:   clamp(3.5rem, 8vw, 6.5rem);
  --band-tight: clamp(2.5rem, 5vw, 4rem);
  --masthead: 6.5rem;                   /* the sticky header eats this much of
                                         the viewport; anchors clear it       */
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
summary::-webkit-details-marker { display: none; }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--amber);
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: var(--t-meta);
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Type primitives
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  font-optical-sizing: auto;
}

/* Fraunces ships one weight here; italic is the emphasis, never faux bold. */
.display--italic { font-style: italic; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
}
.eyebrow--soft     { color: var(--ink-soft); }
.eyebrow--on-dark  { color: var(--ink-invert); }
.eyebrow--muted    { color: var(--wash); }
.eyebrow--amber    { color: var(--amber); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
}

.kicker {
  font-family: var(--display);
  font-size: var(--t-kicker);
  line-height: 1.3;
  color: var(--ink);
}

.strike { text-decoration: line-through; }
.flag   { color: var(--flag); }

/* The accent the source lifts one word of a heading with. Paired with
   .display--italic in a hero title, on its own in a kicker. */
.accent { color: var(--amber); }
.claret { color: var(--claret); }

/* A run of arrow links, one per line. */
.link-list { display: grid; gap: 0.8rem; justify-items: start; }

.arrow-link {
  font-size: var(--t-ui);
  font-style: italic;
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.arrow-link:hover { text-decoration-thickness: 2px; }
.arrow-link__arrow { font-style: normal; padding-left: 0.2em; }

.button {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  background: var(--amber);
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.button:hover { background: var(--gold); }

/* --------------------------------------------------------------------------
   4. Shell and sections
   -------------------------------------------------------------------------- */

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

.section {
  position: relative;
  padding-block: var(--band);
  background: var(--paper);
  color: var(--ink);
}
/* A section that is a jump target must not land under the sticky masthead. */
.section[id] { scroll-margin-top: var(--masthead); }
.section--alt   { background: var(--paper-alt); }
.section--dark  { background: var(--shell-ink); color: var(--paper-alt); }

.section--dark .display { color: var(--paper-alt); }
.section--dark .lede { color: var(--paper-alt); }
.section--dark .eyebrow { color: var(--wash); }
.section--dark .kicker { color: var(--paper-alt); }
.section--dark .arrow-link { color: var(--amber); }

/* A photograph laid under a section at low opacity — texture, not imagery.
   No mask-image and no backdrop-filter: both crash Safari on fixed layers. */
.section--photo:not(.section--dark) { background: var(--wash); }
.section__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
}
.section__inner { position: relative; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--flow);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head .display { max-width: 20ch; }

/* Content pushed into the right half — the source does this once, on the
   homepage, to let the section read as an answer rather than a statement. */
/* Text pushed past the middle of the band, with the left half left empty and a
   margin still open on the right — the column is narrower than the space it is
   given, which is what makes the copy read as an aside rather than a column. */
.section--offset .section__inner {
  display: grid;
  grid-template-columns: 39% 41%;
  gap: var(--gutter);
}
.section--offset .section__inner > * { grid-column: 2; }

/* --------------------------------------------------------------------------
   5. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--shell-ink);
  color: var(--wash);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  min-height: var(--masthead);
}
.masthead__brand { display: block; flex-shrink: 0; }
.masthead__brand img { width: clamp(7rem, 14vw, 10.25rem); height: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.2vw, 1.9rem);
}
.nav__link {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--wash);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nav__link:hover { color: var(--amber); }
.nav__link--cta { color: var(--paper); }

/* The two grouped items are <details>; the submenu is absolutely positioned
   so opening one never reflows the bar. */
.nav__group { position: relative; }
.nav__group > .nav__link { list-style: none; }
.nav__submenu {
  position: absolute;
  top: calc(100% + 1.35rem);
  left: -1rem;
  min-width: 14rem;
  padding: 0.75rem 0;
  background: var(--shell-ink);
  border-top: 2px solid var(--amber);
}
.nav__sublink {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--wash);
  text-decoration: none;
  white-space: nowrap;
}
.nav__sublink:hover { color: var(--amber); }

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(26rem, 70svh);
  padding-block: clamp(2.5rem, 4vw, 3.25rem);
  color: var(--ink-invert);
  overflow: hidden;
}
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 20, 20, 0.72) 0%, rgba(20, 20, 20, 0.66) 55%, rgba(20, 20, 20, 0.6) 100%);
}
.hero--open .hero__photo::after {
  background: linear-gradient(100deg, rgba(20, 20, 20, 0.7) 0%, rgba(20, 20, 20, 0.44) 45%, rgba(20, 20, 20, 0.12) 100%);
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--flow);
}
.hero__title {
  font-size: var(--t-hero);
  line-height: 1.14;
  color: var(--ink-invert);
  max-width: 26ch;
  margin-block: 0.4rem 0.35rem;
}
.hero__lede { font-size: var(--t-body); max-width: 56ch; }
.hero__kicker {
  font-family: var(--display);
  font-size: var(--t-kicker);
  line-height: 1.3;
  max-width: 30ch;
}
.hero__cta { margin-top: 0.9rem; }
.hero__mark { height: 2.5rem; width: auto; margin-bottom: 0.4rem; }
.hero__meta {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--chalk);
}

/* --------------------------------------------------------------------------
   7. Logo strip
   -------------------------------------------------------------------------- */

.logo-strip { padding-block: clamp(1.75rem, 3vw, 2.5rem); background: var(--paper-alt); }
.logo-strip__inner { display: flex; flex-direction: column; gap: 1.5rem; }
.logo-strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem 2.25rem;
}
.logo-strip__list img {
  height: clamp(1.6rem, 3.4vw, 2.5rem);
  width: auto;
  object-fit: contain;
}
.logo-strip__note { max-width: 48ch; }

/* --------------------------------------------------------------------------
   8. Cards, lists, stats
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--amber);
  color: var(--ink);
}
.card__link {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.card--linked { padding: 0; }
.card--linked .card__link { padding: clamp(1.5rem, 3vw, 2.25rem); }
.card--linked:hover { background: var(--gold); }

.card__number {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  color: var(--indigo);
}
.card__title {
  font-size: var(--t-card);
  line-height: 1.2;
  color: var(--paper);
}
.card__body { font-size: var(--t-ui); line-height: 1.55; }

/* Numbered prose. The numbers carry order that the reader needs — these are
   sequenced diagnoses and build phases, not decoration. */
.numbered {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: none;
}
.numbered__item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.numbered__index {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  color: var(--indigo);
  padding-top: 0.35rem;
}
.numbered__icon { width: 2.25rem; height: 2.25rem; opacity: 0.85; }
.numbered__term {
  font-family: var(--display);
  font-size: var(--t-kicker);
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.numbered__meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
}
.numbered__body { font-size: var(--t-ui); max-width: 62ch; }
.numbered__body > p + p { margin-top: 0.85rem; }

/* The OUTPUT / BEST WHEN slot under an entry. */
.meta-block {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
}
.meta-block__label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.meta-block__body { font-family: var(--display); font-size: var(--t-ui); line-height: 1.45; }
.meta-block__body ul { display: grid; gap: 0.4rem; font-family: var(--body); }
.meta-block__body li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-small);
}
.meta-block__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 1px;
  background: var(--amber);
}
.section--dark .meta-block { border-top-color: var(--rule-invert); }
.section--dark .meta-block__label { color: var(--wash); }

/* Trailing link or line after a block of content. */
.stack__after { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.section--dark .numbered__item { border-top-color: var(--rule-invert); }
.section--dark .numbered__index { color: var(--amber); }
.section--dark .numbered__term  { color: var(--paper-alt); }

.stats {
  display: grid;
  grid-template-columns: repeat(var(--stat-columns, auto-fit), minmax(11rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat__value {
  font-family: var(--display);
  font-size: var(--t-stat);
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}
.stat__label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
}
.stat__note { font-size: var(--t-ui); color: var(--ink); max-width: 40ch; }
.stat--claret .stat__value { color: var(--claret); }

.section--dark .stat__value { color: var(--paper-alt); }
.section--dark .stat__label { color: var(--amber); }

.proof-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.proof-row + .proof-row { margin-top: clamp(2rem, 4vw, 3rem); }
.proof-row__summary {
  font-size: var(--t-body);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  max-width: 52ch;
}

/* Term/definition pairs: a mono label over a paragraph. */
.terms { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.terms--split { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.terms__pair { display: flex; flex-direction: column; gap: 0.5rem; }
.terms__term {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
}
.terms__def { margin: 0; font-size: var(--t-ui); max-width: 56ch; }
.section--dark .terms__term { color: var(--amber); }

.quote {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 52ch;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--amber);
}
.quote__text {
  font-family: var(--display);
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--ink);
}
.quote__attribution {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--indigo);
}
.quote__role { color: var(--ink-soft); }
.section--dark .quote__text { color: var(--paper-alt); }
.section--dark .quote__attribution,
.section--dark .quote__role { color: var(--wash); }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* The four build layers on a case study: a Fraunces heading in the left
   column, its paragraphs in the right, one rule between each. */
.layers { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.layer {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.75rem clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.layer__title { font-size: var(--t-card); line-height: 1.2; color: var(--navy); }
.layer__body { display: grid; gap: 0.9rem; font-size: var(--t-ui); max-width: 62ch; }

/* Dashed list items — the amber tick the source uses inside dense lists. */
.marks { display: grid; gap: 0.6rem; }
.marks li { position: relative; padding-left: 1.5rem; }
.marks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.75rem;
  height: 1px;
  background: var(--amber);
}
.marks strong { font-weight: 600; }

.check { display: flex; flex-direction: column; gap: 1rem; }
.check__heading { font-size: var(--t-kicker); }
.check__list { display: grid; gap: 0.7rem; }
.check__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-ui);
}
.check__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 1px;
  background: var(--indigo);
}
.check--no .check__list li::before { background: var(--flag); }

/* The list of question groups at the top of the FAQ. Each entry is a plain
   fragment link, so it works before any script runs. */
.jump { padding-block: var(--band-tight); }
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.jump-nav__label { flex-shrink: 0; }
.jump-nav__list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.jump-nav__list a {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 0.15rem;
}
.jump-nav__list a:hover { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }

/* Accordion. <details> keeps it working with scripting off. */
.faq { display: grid; }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
}
.faq__question::after {
  content: '+';
  font-family: var(--mono);
  font-size: var(--t-lede);
  line-height: 1;
  color: var(--indigo);
}
.faq__item[open] .faq__question::after { content: '−'; }
.faq__answer { padding-bottom: 1.5rem; max-width: 68ch; }
.faq__answer > p + p { margin-top: 0.85rem; }

/* --------------------------------------------------------------------------
   9. Call-to-action band
   -------------------------------------------------------------------------- */

.cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--flow);
  align-items: flex-start;
  max-width: 42ch;
}
.cta-band__action { margin-top: 0.75rem; }
.cta-band__hand {
  font-family: var(--hand);
  font-size: 1.5rem;
  color: var(--taupe);
}

/* --------------------------------------------------------------------------
   10. Prose (legal pages, blog posts)
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; font-size: var(--t-ui); line-height: 1.7; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-kicker);
  line-height: 1.2;
  color: var(--ink-strong);
  margin-top: 2.5rem;
}
.prose h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: var(--t-ui);
  color: var(--ink-strong);
  margin-top: 1.75rem;
}
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--indigo); text-underline-offset: 0.2em; }
.prose blockquote {
  padding-left: 1.25rem;
  border-left: 2px solid var(--amber);
  font-family: var(--display);
  font-size: var(--t-lede);
  line-height: 1.45;
}
.prose strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Blog
   -------------------------------------------------------------------------- */

/* Category tabs. These are links to real pages, not a filter widget, so the
   active one is marked with aria-current and reads as the current page. */
.tabs {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  overflow-x: auto;
}
.tabs__list { display: flex; gap: 0.4rem 1.5rem; flex-wrap: wrap; }
.tabs__tab {
  display: inline-block;
  padding-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs__tab:hover { color: var(--ink-strong); }
.tabs__tab--active { color: var(--ink-strong); border-bottom-color: var(--amber); }

.post-list { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.post-card__cover { overflow: hidden; background: var(--wash); }
.post-card__cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; gap: 0.7rem; }
.post-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-card);
  line-height: 1.2;
  color: var(--ink-strong);
}
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.post-card__excerpt { font-size: var(--t-ui); max-width: 60ch; }
.post-card__meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.post-header {
  display: flex;
  flex-direction: column;
  gap: var(--flow);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.post-header__title { font-size: var(--t-display); max-width: 20ch; }
.post-header__meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.post-hero { margin-bottom: clamp(2rem, 4vw, 3rem); }
.post-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-footer {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   12. Contact / booking
   -------------------------------------------------------------------------- */

.booking {
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.booking__aside { display: flex; flex-direction: column; gap: var(--flow); }
.booking__points { display: grid; gap: 0.7rem; }
.booking__points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-ui);
}
.booking__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 1px;
  background: var(--amber);
}
/* Calendly is a third-party iframe; it gets a fixed floor so the page does not
   jump when it finishes loading, and a plain link underneath in case the
   embed is blocked. */
.booking__note {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--wash);
}
.booking__panel { background: var(--paper); padding: clamp(0.75rem, 2vw, 1.25rem); }
.booking__embed { min-height: 44rem; border: 1px solid var(--rule); }
.booking__embed iframe { display: block; width: 100%; height: 44rem; border: 0; }
.booking__fallback { margin-top: 1rem; font-size: var(--t-small); color: var(--ink); }
.booking__fallback a { color: var(--indigo); }

/* --------------------------------------------------------------------------
   13. Figures
   -------------------------------------------------------------------------- */

.figure { display: flex; flex-direction: column; gap: 0.85rem; }
.figure img { width: 100%; }
.figure__caption { font-size: var(--t-ui); color: var(--ink); max-width: 52ch; }
.section--dark .figure__caption { color: var(--paper-alt); }

/* The founder portrait: name and role stacked under the frame, in the mono
   face so the caption reads as a credit rather than as body copy. */
.portrait { position: sticky; top: calc(var(--masthead) + 1.5rem); }
.portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.portrait__caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
}
.portrait__name { color: var(--ink-strong); }
.portrait__role { color: var(--ink-soft); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
/* A figure beside prose reads better when the prose gets the wider column. */
.split--portrait { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); }

.stack { display: flex; flex-direction: column; gap: var(--flow); align-items: flex-start; }
.stack--wide > p { max-width: 62ch; }
.stack--lines > p { font-family: var(--display); font-size: var(--t-kicker); line-height: 1.3; }

/* --------------------------------------------------------------------------
   14. Colophon
   -------------------------------------------------------------------------- */

.colophon {
  padding-top: var(--band-tight);
  background: var(--shell-ink);
  color: var(--paper);
  font-size: var(--t-meta);
}
.colophon__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.colophon__identity { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.colophon__logo { width: 11.25rem; height: auto; }
.colophon__blurb { font-size: var(--t-ui); line-height: 1.5; max-width: 30ch; }
.colophon__where { font-size: var(--t-micro); letter-spacing: 0.04em; }

.colophon__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.colophon__column { display: flex; flex-direction: column; gap: 1rem; }
.colophon__column .eyebrow { color: var(--wash); }
.colophon__list { display: grid; gap: 0.45rem; padding-left: 1.1rem; list-style: disc; }
.colophon__list li { font-size: var(--t-meta); }

.colophon__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.6rem;
  border-top: 1px solid var(--rule-invert);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--gold);
}
.colophon__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.colophon__links a { text-decoration: none; }
.colophon__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .section--offset .section__inner { grid-template-columns: 1fr; }
  .section--offset .section__inner > * { grid-column: 1; }
  .booking { grid-template-columns: 1fr; }
  .colophon__inner { grid-template-columns: 1fr; }
  .post-card { grid-template-columns: 1fr; }
  .post-card__cover { max-width: 22rem; }
  .split--portrait { grid-template-columns: 1fr; }
  .portrait { position: static; max-width: 24rem; }
  .layer { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .masthead__inner { flex-wrap: wrap; gap: 0.75rem; padding-block: 1rem; min-height: 0; }
  .nav__list { flex-wrap: wrap; gap: 0.6rem 1.1rem; }
  .nav__submenu {
    position: static;
    min-width: 0;
    padding: 0.35rem 0 0.35rem 0.85rem;
    border-top: 0;
    border-left: 2px solid var(--amber);
  }
  .numbered__item { grid-template-columns: 1fr; gap: 0.5rem; }
  .numbered__index { flex-direction: row; align-items: center; padding-top: 0; }
  .stat__value { white-space: normal; }
}