/* =============================================================================
   Salsag Digital Consulting
   Single stylesheet. No build step, no dependencies.

   Palette is fixed by the brand guide (Logo Variations.pdf). The deliberate
   choice here is that Off White is the canvas and Almost Black appears only
   twice per page — the Intake Year band and the footer. Electric Lime is
   rationed so it lands as an event, never as ambient colour.

   Layer order controls all specificity. Add new rules to the right layer
   rather than escalating selectors.
   ========================================================================== */

@layer reset, base, layout, components, sections, motion, utilities;

/* -----------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand palette.
     The lime is sampled from the final logo artwork and confirmed by the client
     as #C1D833. (The older brand PDF listed Electric Lime as #C7F000, a much
     more acid green — that value is superseded, do not reinstate it.) */
  --ink: #111111;       /* Almost Black  — primary   */
  --graphite: #292929;  /* Graphite      — secondary */
  --lime: #c1d833;      /* Lime          — accent    */
  --paper: #f4f3ee;     /* Off White     — canvas    */
  --grey: #858585;      /* Soft Grey     — secondary text */

  /* Derived surfaces */
  --paper-sunk: #ebe9e0;
  --paper-raised: #fbfaf7;

  /* Lime is far too light to read as text on paper, so it comes in three
     strengths: the brand value for fills, a deeper one for marks and rules,
     and a dark one for the rare case where accent-coloured text must pass
     contrast. Never set body copy in --lime. */
  --lime-deep: #8fa522;
  --lime-ink: #5f6e12;
  --lime-wash: rgba(193, 216, 51, 0.2);

  /* Semantic tokens — these flip inside .on-dark */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-dim: #5a5a5a;
  --fg-mute: var(--grey);
  --surface: var(--paper-raised);
  --line: rgba(17, 17, 17, 0.16);
  --line-soft: rgba(17, 17, 17, 0.08);

  /* Type */
  --font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, sfmono-regular, consolas, monospace;
  --wide: 118%;   /* display width axis  */
  --semiwide: 106%;

  /* Fluid type scale */
  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.18rem, 1.09rem + 0.42vw, 1.44rem);
  --step-2: clamp(1.42rem, 1.24rem + 0.86vw, 1.98rem);
  --step-3: clamp(1.7rem, 1.36rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.05rem, 1.42rem + 3vw, 3.9rem);
  /* Capped at 5.6rem so the hero headline sets as three full lines rather than
     leaving a one-word orphan on the first. */
  --step-5: clamp(2.5rem, 1.5rem + 4.9vw, 5.6rem);

  /* Space */
  --s1: 0.375rem;
  --s2: 0.625rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.25rem;
  --s6: 3.25rem;
  --s7: 5rem;
  --s8: 7.5rem;
  /* Two stacked sections each contribute this, so the gap between them is
     double. It was 8.5rem, which read as a hole rather than breathing room. */
  --section-y: clamp(2.75rem, 5.5vw, 5.75rem);

  /* Layout */
  --wrap: 78rem;
  --wrap-narrow: 46rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --header-h: 4.5rem;

  /* Geometry — the notch is derived from the logo's 60° hex grid.
     tan(60°) ≈ 1.732, so a 14px horizontal cut drops 24px vertically. */
  --notch: 14px;
  --notch-y: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* Dark context. Only the semantic tokens flip; brand values stay intact. */
.on-dark {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-dim: #b3b3ae;
  --fg-mute: #8d8d88;
  --surface: var(--graphite);
  --line: rgba(244, 243, 238, 0.18);
  --line-soft: rgba(244, 243, 238, 0.09);

  background: var(--bg);
  color: var(--fg);
}

/* -----------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
  }

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

  img {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
  }

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

  /* Lime on paper is too low-contrast to read as a focus ring on its own,
     so on light surfaces it gets an ink halo. */
  :where(:not(.on-dark) *):focus-visible {
    outline-color: var(--ink);
    box-shadow: 0 0 0 6px var(--lime-wash);
  }
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

@layer base {
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: 1.6;
    font-stretch: 100%;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  strong {
    font-weight: 600;
  }

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

  /* Display type — the expanded width axis is the site's signature voice. */
  .display {
    font-stretch: var(--wide);
    font-weight: 800;
    font-size: var(--step-5);
    line-height: 0.94;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .h1 {
    font-stretch: var(--semiwide);
    font-weight: 800;
    font-size: var(--step-4);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }

  .h2 {
    font-stretch: var(--semiwide);
    font-weight: 700;
    font-size: var(--step-3);
    line-height: 1.05;
    letter-spacing: -0.025em;
  }

  .h3 {
    font-weight: 650;
    font-size: var(--step-1);
    line-height: 1.25;
    letter-spacing: -0.015em;
  }

  .lead {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--fg-dim);
    max-width: 40ch;
  }

  /* Mono utility voice: eyebrows, indices, field labels. Used sparingly —
     it reads as measurement, which is what performance marketing sells. */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }

  .eyebrow::before {
    content: "";
    width: 1.65em;
    height: 0;
    border-top: 2px solid var(--lime);
    flex: none;
  }

  .prose p + p {
    margin-top: 1em;
  }

  .prose a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--lime-deep);
  }

  .prose a:hover {
    background: var(--lime);
    color: var(--ink);
    text-decoration-color: transparent;
  }
}

/* -----------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap-narrow {
    max-width: var(--wrap-narrow);
  }

  .section {
    padding-block: var(--section-y);
  }

  .section-tight {
    padding-block: calc(var(--section-y) * 0.6);
  }

  /* For the section immediately after the hero, where a full top pad on top of
     the hero's own padding reads as a hole in the page. */
  .section-flush {
    padding-top: calc(var(--section-y) * 0.5);
  }

  /* Section masthead: eyebrow + title on the left, optional note on the right */
  .masthead {
    display: grid;
    gap: var(--s4);
    grid-template-columns: 1fr;
    align-items: end;
    padding-bottom: var(--s5);
    margin-bottom: var(--s6);
    border-bottom: 1px solid var(--line);
  }

  .masthead > * {
    min-width: 0;
  }

  .masthead__note {
    color: var(--fg-dim);
    max-width: 44ch;
  }

  .masthead__cue {
    display: block;
    margin-top: 0.7em;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime-ink);
  }

  @media (min-width: 56rem) {
    .masthead {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: var(--s6);
    }
  }

  .stack > * + * {
    margin-top: var(--flow, var(--s3));
  }

  .grid {
    display: grid;
    gap: var(--s4);
  }

  .grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  }

  .split {
    display: grid;
    gap: var(--s6);
    align-items: center;
  }

  @media (min-width: 56rem) {
    .split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split--wide-left {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
  }
}

/* -----------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

@layer components {
  /* ---- Skip link ---- */
  .skip {
    position: absolute;
    left: var(--s3);
    top: var(--s3);
    z-index: 200;
    padding: 0.7em 1.1em;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease);
  }

  .skip:focus-visible {
    transform: none;
  }

  /* ---- Logo lockup ----
     Built in markup rather than as a flat image so it stays crisp, recolours
     with its context, and remains selectable text for screen readers.
     Swap in assets/logo/lockup.svg here if the original vector arrives. */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--fg);
  }

  .logo__mark {
    width: auto;
    height: 2.1rem;
    flex: none;
    overflow: visible;
  }

  .logo__mark .arm-k {
    stroke: currentColor;
  }

  .logo__mark .arm-l {
    stroke: var(--lime);
  }

  .logo__text {
    display: grid;
    gap: 0.14em;
  }

  .logo__word {
    font-stretch: 100%;
    font-weight: 800;
    font-size: 1.32rem;
    line-height: 0.9;
    letter-spacing: -0.035em;
  }

  .logo__tag {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lime-deep);
  }

  .on-dark .logo__tag {
    color: var(--lime);
  }

  @media (max-width: 26rem) {
    .logo__tag {
      display: none;
    }
  }

  /* ---- Buttons ----
     The notch lives on a pseudo-element so clip-path never eats the focus
     ring, which it would if applied to the button box itself. */
  .btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.95em 1.5em;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s var(--ease);
  }

  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
    clip-path: polygon(
      0 0,
      calc(100% - var(--notch)) 0,
      100% var(--notch-y),
      100% 100%,
      var(--notch) 100%,
      0 calc(100% - var(--notch-y))
    );
  }

  .btn__chev {
    flex: none;
    transition: transform 0.25s var(--ease);
  }

  .btn:hover .btn__chev,
  .btn:focus-visible .btn__chev {
    transform: translateX(0.28em);
  }

  .btn--primary {
    color: var(--bg);
  }

  .btn--primary::before {
    background: var(--fg);
  }

  .btn--primary:hover {
    color: var(--ink);
  }

  .btn--primary:hover::before {
    background: var(--lime);
  }

  .btn--accent {
    color: var(--ink);
  }

  .btn--accent::before {
    background: var(--lime);
  }

  .btn--accent:hover::before {
    background: var(--fg);
  }

  .btn--accent:hover {
    color: var(--bg);
  }

  .btn--ghost {
    color: var(--fg);
  }

  .btn--ghost::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--line);
  }

  .btn--ghost:hover::before {
    background: var(--fg);
    box-shadow: inset 0 0 0 1.5px var(--fg);
  }

  .btn--ghost:hover {
    color: var(--bg);
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
  }

  /* ---- Header ---- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  }

  .site-header.is-stuck {
    border-bottom-color: var(--line);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: var(--header-h);
  }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.1rem);
  }

  .nav__link {
    position: relative;
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    padding-block: 0.35em;
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .nav__link[aria-current="page"] {
    font-weight: 650;
  }

  .header__cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.6em 0.2em;
  }

  .nav-toggle__bars {
    display: grid;
    gap: 4px;
    width: 22px;
  }

  .nav-toggle__bars span {
    height: 2px;
    background: currentColor;
    transition: transform 0.3s var(--ease), opacity 0.2s linear;
  }

  [aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
    transform: translateY(6px) 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(-6px) rotate(-45deg);
  }

  /* Mobile panel */
  .nav-panel {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 99;
    display: grid;
    align-content: start;
    gap: var(--s2);
    padding: var(--s5) var(--gutter) var(--s6);
    background: var(--paper);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1.25rem);
    transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
      visibility 0s linear 0.32s;
  }

  .nav-panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .nav-panel a {
    font-stretch: var(--semiwide);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-decoration: none;
    padding-block: 0.42em;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav-panel a[aria-current="page"] {
    color: var(--ink);
  }

  .nav-panel a[aria-current="page"]::before {
    content: "▸ ";
    color: var(--lime-deep);
  }

  .nav-panel .btn {
    margin-top: var(--s4);
    justify-content: center;
  }

  @media (min-width: 60rem) {
    .nav-toggle,
    .nav-panel {
      display: none;
    }

    .header__cta {
      display: inline-flex;
    }
  }

  @media (max-width: 59.99rem) {
    .nav {
      display: none;
    }
  }

  /* ---- Cards ---- */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
      box-shadow 0.3s var(--ease);
  }

  .card__index {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    color: var(--fg-mute);
  }

  .card__title {
    font-weight: 650;
    font-size: var(--step-1);
    letter-spacing: -0.015em;
    line-height: 1.2;
  }

  .card p {
    color: var(--fg-dim);
    font-size: var(--step--1);
    line-height: 1.6;
  }

  .card--link {
    text-decoration: none;
  }

  .card--link:hover {
    transform: translateY(-3px);
    border-color: var(--line);
    box-shadow: -6px 6px 0 var(--lime);
  }

  /* ---- Chevron list: the logo's arrowhead doing real work as a marker ---- */
  .chev-list {
    display: grid;
    gap: 0.55em;
  }

  .chev-list li {
    position: relative;
    padding-left: 1.5em;
    font-size: var(--step--1);
    line-height: 1.55;
  }

  .chev-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 0.42em;
    height: 0.42em;
    border-right: 2.5px solid var(--lime-deep);
    border-top: 2.5px solid var(--lime-deep);
    transform: rotate(45deg);
  }

  .on-dark .chev-list li::before {
    border-color: var(--lime);
  }

  /* ---- Figures ----
     The container owns the aspect ratio so the image can be cropped to the
     layout without ever shifting it. The notch repeats the logo's 60° corner. */
  .figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--paper-sunk);
    clip-path: polygon(
      0 0,
      calc(100% - 26px) 0,
      100% 45px,
      100% 100%,
      26px 100%,
      0 calc(100% - 45px)
    );
  }

  .figure--band {
    aspect-ratio: 2 / 1;
  }

  .figure--wide {
    aspect-ratio: 16 / 9;
  }

  .figure--portrait {
    aspect-ratio: 3 / 4;
  }

  @media (max-width: 40rem) {
    .figure--band {
      aspect-ratio: 4 / 3;
    }
  }

  .figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.34) contrast(1.06);
    transition: filter 0.5s var(--ease), transform 0.7s var(--ease);
  }

  .figure:hover img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.02);
  }

  .figure figcaption {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    color: var(--fg-mute);
    padding-top: 0.8em;
  }

  /* ---- Accordion (FAQ) ---- */
  .faq {
    border-top: 1px solid var(--line);
  }

  .faq details {
    border-bottom: 1px solid var(--line);
  }

  .faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) 0;
    font-weight: 600;
    font-size: var(--step-1);
    letter-spacing: -0.015em;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: "";
    flex: none;
    width: 0.6em;
    height: 0.6em;
    margin-top: 0.35em;
    border-right: 2.5px solid var(--fg);
    border-bottom: 2.5px solid var(--fg);
    transform: rotate(45deg);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
  }

  .faq details[open] summary::after {
    transform: rotate(-135deg);
    border-color: var(--lime-deep);
  }

  .faq details[open] summary {
    color: var(--ink);
  }

  .faq__body {
    padding-bottom: var(--s4);
    max-width: 62ch;
    color: var(--fg-dim);
  }

  /* ---- Forms ---- */
  .field {
    display: grid;
    gap: 0.45em;
  }

  .field label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }

  .field .req {
    color: var(--lime-ink);
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    padding: 0.85em 1em;
    background: var(--paper-raised);
    border: 1.5px solid var(--line);
    border-radius: 0;
    font-size: var(--step-0);
    transition: border-color 0.2s linear, background 0.2s linear;
  }

  .field textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    border-color: var(--grey);
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: var(--ink);
    background: #fff;
  }

  /* Pairs of short fields sit side by side. The general .grid-2 minimum is too
     wide to ever resolve to two columns inside the form's narrower column. */
  .field-row {
    display: grid;
    gap: var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  }

  .field__hint {
    font-size: var(--step--2);
    color: var(--fg-mute);
  }

  .field__error {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: #b3231b;
  }

  .field[data-invalid] input,
  .field[data-invalid] select,
  .field[data-invalid] textarea {
    border-color: #b3231b;
    background: #fdf4f3;
  }

  .form-status {
    padding: var(--s3) var(--s4);
    border-left: 4px solid var(--lime);
    background: var(--lime-wash);
    font-size: var(--step--1);
  }

  .form-status[data-state="error"] {
    border-left-color: #b3231b;
    background: #fdf4f3;
  }

  .form-status:empty {
    display: none;
  }

  /* Spam honeypot — hidden from people, visible to bots */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ---- Footer ---- */
  .site-footer {
    padding-block: var(--s7) var(--s5);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--s6);
    padding-bottom: var(--s6);
    border-bottom: 1px solid var(--line);
  }

  @media (min-width: 52rem) {
    .site-footer__grid {
      grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
      gap: var(--s5);
    }
  }

  .footer-blurb {
    margin-top: var(--s4);
    max-width: 34ch;
    font-size: var(--step-0);
    color: var(--fg-dim);
  }

  .footer-nav {
    display: grid;
    gap: 0.6em;
    font-size: var(--step--1);
  }

  .footer-nav a {
    text-decoration: none;
    color: var(--fg-dim);
    transition: color 0.2s linear;
    width: fit-content;
  }

  .footer-nav a:hover {
    color: var(--lime);
  }

  .footer-heading {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-mute);
    margin-bottom: var(--s3);
  }

  .site-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s3);
    padding-top: var(--s4);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    color: var(--fg-mute);
  }

  .site-footer__base a {
    text-decoration: none;
  }

  .site-footer__base a:hover {
    color: var(--lime);
  }
}

/* -----------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

@layer sections {
  /* ---- Hero ---- */
  .hero {
    position: relative;
    overflow: hidden;
    /* Bottom padding is deliberately much smaller than the top: the meta strip
       already closes the hero, and stacking a full hero pad against the next
       section's pad left an enormous dead gap. */
    padding-block: clamp(3rem, 7.5vw, 6.5rem) clamp(2rem, 3.5vw, 3rem);
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    max-width: 60rem;
  }

  .hero__title {
    margin-block: var(--s4) 0;
    /* Greedy wrapping, not balanced. Balancing equalises line lengths, which
       here strands the first word on a line of its own; filling each line
       gives three full-width lines and a much stronger block of type. */
    text-wrap: wrap;
  }

  /* The lime sweep — the page-load payoff.
     Painted as a background gradient rather than a positioned pseudo-element
     so the phrase stays breakable: box-decoration-break gives each line
     fragment its own highlight instead of one box spanning the whole run.
     Keeping it breakable is what lets the headline wrap greedily into three
     full lines rather than stranding a word. */
  .hero__mark-word {
    background-image: linear-gradient(var(--lime), var(--lime));
    background-repeat: no-repeat;
    background-position: 0 0.66em;
    background-size: 100% 0.26em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero__lead {
    margin-top: var(--s5);
    max-width: 46ch;
    font-size: var(--step-1);
    color: var(--fg-dim);
  }

  .hero__actions {
    margin-top: var(--s5);
  }

  .hero__meta {
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }

  /* Oversized logo geometry bled off the right edge. Decorative only.
     Sized by height because the mark's viewBox is much taller than it is wide,
     so a width-based size would blow past the hero vertically. */
  .hero__geo {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -7%;
    height: min(74%, 22rem);
    width: auto;
    transform: translateY(-50%);
    opacity: 0.09;
    pointer-events: none;
  }

  .hero__geo .arm-k {
    stroke: var(--ink);
  }

  .hero__geo .arm-l {
    stroke: var(--lime-deep);
  }

  @media (min-width: 64rem) {
    .hero__geo {
      opacity: 1;
      right: 3vw;
      height: min(82%, 30rem);
    }

    .hero__geo .arm-k {
      stroke: rgba(17, 17, 17, 0.09);
    }

    .hero__geo .arm-l {
      stroke: var(--lime);
    }
  }

  /* ---- Intake Year: the signature band ----
     A horizontally scrollable calendar of the education marketing year.
     This is the site's proof of sector knowledge in place of a portfolio. */
  .intake {
    position: relative;
    padding-block: var(--section-y);
    overflow: hidden;
  }

  .intake__head {
    display: grid;
    gap: var(--s4);
    align-items: end;
    margin-bottom: var(--s5);
  }

  @media (min-width: 56rem) {
    .intake__head {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .season {
    margin-bottom: var(--s6);
  }

  .season svg {
    display: block;
  }

  .intake__progress {
    position: relative;
    height: 2px;
    background: var(--line);
    margin-bottom: var(--s4);
  }

  .intake__progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p, 12%);
    background: var(--lime);
    transition: width 0.12s linear;
  }

  .intake__scroller {
    display: flex;
    gap: var(--s3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s4);
    /* Bleed the track to the viewport edge so it reads as continuous */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--graphite) transparent;
  }

  .intake__scroller::-webkit-scrollbar {
    height: 6px;
  }

  .intake__scroller::-webkit-scrollbar-thumb {
    background: var(--graphite);
  }

  .phase {
    flex: 0 0 min(21rem, 78vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s4) var(--s5) var(--s4) var(--s4);
    background: var(--surface);
    border-left: 3px solid var(--lime);
    /* Chevron point on the trailing edge — the mark's arrowhead as structure */
    clip-path: polygon(
      0 0,
      calc(100% - 22px) 0,
      100% 50%,
      calc(100% - 22px) 100%,
      0 100%
    );
    transition: background 0.3s var(--ease);
  }

  .phase:hover {
    background: #333333;
  }

  .phase__when {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lime);
  }

  .phase__title {
    font-stretch: var(--semiwide);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .phase p {
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--fg-dim);
  }

  .intake__hint {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-mute);
    display: flex;
    align-items: center;
    gap: 0.6em;
  }
  /* ---- Founding note: honest framing of a brand-new agency ---- */
  .founding {
    position: relative;
    padding: var(--s5);
    background: var(--paper-sunk);
    border-left: 4px solid var(--lime);
  }

  @media (min-width: 56rem) {
    .founding {
      padding: var(--s6);
    }
  }

  /* ---- Big closing CTA ---- */
  .cta-block {
    display: grid;
    gap: var(--s5);
    padding-block: var(--section-y);
    border-top: 1px solid var(--line);
  }

  @media (min-width: 56rem) {
    .cta-block {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: var(--s6);
      align-items: center;
    }
  }

  /* ---- Page header for interior pages ---- */
  .page-head {
    padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem);
    border-bottom: 1px solid var(--line);
  }

  .page-head__title {
    margin-top: var(--s4);
    max-width: 22ch;
  }

  .page-head__lead {
    margin-top: var(--s4);
    max-width: 52ch;
    font-size: var(--step-1);
    color: var(--fg-dim);
  }

  /* ---- Breadcrumb ---- */
  .crumbs {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }

  .crumbs a {
    text-decoration: none;
  }

  .crumbs a:hover {
    color: var(--ink);
  }
}

/* -----------------------------------------------------------------------------
   Motion
   Reveal styles are scoped to .js so content is never hidden without scripting.
   -------------------------------------------------------------------------- */

@layer motion {
  .js .reveal {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .js .reveal[data-delay="1"] { transition-delay: 0.07s; }
  .js .reveal[data-delay="2"] { transition-delay: 0.14s; }
  .js .reveal[data-delay="3"] { transition-delay: 0.21s; }
  .js .reveal[data-delay="4"] { transition-delay: 0.28s; }
  .js .reveal[data-delay="5"] { transition-delay: 0.35s; }

  /* Orchestrated hero entrance: one sequence, not scattered effects */
  .js .hero__inner > * {
    animation: rise 0.85s var(--ease) backwards;
  }

  .js .hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
  .js .hero__inner > *:nth-child(2) { animation-delay: 0.14s; }
  .js .hero__inner > *:nth-child(3) { animation-delay: 0.26s; }
  .js .hero__inner > *:nth-child(4) { animation-delay: 0.36s; }
  .js .hero__inner > *:nth-child(5) { animation-delay: 0.44s; }

  .js .hero__mark-word {
    animation: sweep 0.75s var(--ease) 0.72s backwards;
  }

  /* The geo element carries its own translateY(-50%), so it needs an entrance
     keyframe that preserves it rather than the generic `rise`. */
  .js .hero__geo {
    animation: geo-in 1.4s var(--ease) 0.2s backwards,
      drift 14s ease-in-out 1.6s infinite;
  }

  @keyframes geo-in {
    from {
      opacity: 0;
      transform: translateY(calc(-50% + 2rem));
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(1.5rem);
    }
  }

  @keyframes sweep {
    from {
      background-size: 0% 0.26em;
    }
  }

  @keyframes drift {
    0%, 100% {
      transform: translateY(-50%) rotate(0deg);
    }
    50% {
      transform: translateY(calc(-50% - 14px)) rotate(-1.5deg);
    }
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .hero__mark-word {
    animation: none !important;
    background-size: 100% 0.26em !important;
  }

  .js .hero__geo {
    transform: translateY(-50%) !important;
  }
}

/* -----------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .lime {
    color: var(--lime-ink);
  }

  .on-dark .lime {
    color: var(--lime);
  }

  .measure {
    max-width: 62ch;
  }

  .mt-4 { margin-top: var(--s4); }
  .mt-5 { margin-top: var(--s5); }
  .mt-6 { margin-top: var(--s6); }

  .no-js-hide {
    display: none;
  }

  .js .no-js-hide {
    display: revert;
  }
}

/* =============================================================================
   Visual components
   Added so the page has something to look at between the paragraphs. Each of
   these carries information the prose would otherwise have to spell out.
   ========================================================================== */

@layer components {
  /* ---------------------------------------------------------------------------
     Flip cards — "who we work with"

     Front is a photograph and a name; the back turns over to the detail. Both
     faces stay in the DOM and in the accessibility tree at all times, so the
     rotation is decoration only and screen readers read straight through.
     Hover is gated behind (hover: hover) so touch devices are not left with a
     card stuck mid-flip; there the button press does the work.
     ------------------------------------------------------------------------ */
  .flip {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    aspect-ratio: 3 / 4;
    perspective: 1400px;
    cursor: pointer;
  }

  .flip__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.75s var(--ease);
  }

  .flip[aria-expanded="true"] .flip__inner {
    transform: rotateY(180deg);
  }

  @media (hover: hover) {
    .flip:hover .flip__inner,
    .flip:focus-visible .flip__inner {
      transform: rotateY(180deg);
    }
  }

  .flip__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    clip-path: polygon(
      0 0,
      calc(100% - 20px) 0,
      100% 34px,
      100% 100%,
      20px 100%,
      0 calc(100% - 34px)
    );
  }

  .flip__face--front {
    background: var(--paper-sunk);
  }

  .flip__face--front img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5) contrast(1.05);
    transition: filter 0.6s var(--ease);
  }

  .flip:hover .flip__face--front img {
    filter: grayscale(0) contrast(1);
  }

  /* Ink scrim so the label stays readable over any photograph */
  .flip__face--front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(17, 17, 17, 0.92) 0%,
      rgba(17, 17, 17, 0.55) 34%,
      rgba(17, 17, 17, 0) 68%
    );
  }

  .flip__label {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.3rem;
    padding: var(--s4);
    color: var(--paper);
  }

  .flip__index {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    color: var(--lime);
  }

  .flip__title {
    font-stretch: var(--semiwide);
    font-weight: 700;
    font-size: var(--step-1);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .flip__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
  }

  .flip__hint svg {
    transition: transform 0.3s var(--ease);
  }

  .flip:hover .flip__hint svg {
    transform: translateX(0.3em);
  }

  .flip__face--back {
    transform: rotateY(180deg);
    justify-content: flex-start;
    gap: var(--s3);
    padding: var(--s5) var(--s4);
    background: var(--ink);
    color: var(--paper);
    border-left: 3px solid var(--lime);
  }

  .flip__face--back .flip__title {
    color: var(--paper);
  }

  .flip__body {
    font-size: var(--step--1);
    line-height: 1.6;
    color: #b8b8b2;
  }

  .flip__points {
    display: grid;
    gap: 0.5em;
    margin-top: auto;
    padding-top: var(--s3);
    border-top: 1px solid rgba(244, 243, 238, 0.16);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.06em;
    color: var(--lime);
  }

  /* ---------------------------------------------------------------------------
     Capability tiles — "what we do"
     ------------------------------------------------------------------------ */
  .cap-grid {
    display: grid;
    gap: var(--s4);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 44rem) {
    .cap-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 68rem) {
    .cap-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .cap {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
    clip-path: polygon(
      0 0,
      calc(100% - 18px) 0,
      100% 31px,
      100% 100%,
      18px 100%,
      0 calc(100% - 31px)
    );
  }

  .cap:hover {
    transform: translateY(-4px);
    border-color: var(--line);
  }

  .cap__media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-sunk);
  }

  .cap__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5) contrast(1.05);
    transition: filter 0.55s var(--ease), transform 0.8s var(--ease);
  }

  .cap:hover .cap__media img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.04);
  }

  /* Same plate treatment as the service bands, so the home summary and the
     services page read as one system */
  .cap__badge {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.65em;
    padding: 0.62em 1em;
    background: var(--ink);
    color: var(--paper);
  }

  .cap__icon {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--paper);
  }

  .cap__icon .ic-l {
    stroke: var(--lime);
  }

  .cap__num {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    color: var(--lime);
  }

  .cap__body {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    flex: 1;
    padding: var(--s4);
  }

  .cap__title {
    font-stretch: var(--semiwide);
    font-weight: 700;
    font-size: var(--step-1);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .cap__blurb {
    font-size: var(--step--1);
    color: var(--fg-dim);
    line-height: 1.55;
  }

  .cap__list {
    display: grid;
    gap: 0.35em;
    margin-top: auto;
    padding-top: var(--s3);
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--fg-mute);
  }

  /* ---------------------------------------------------------------------------
     Stepper — the process

     Deliberately NOT another card grid. "What we do" is already six icon tiles,
     and a five-card process beside it read as the same module twice. This is a
     numbered track driving one large panel: the sequence is stated once by the
     track, and only the selected step's copy is on screen, so the section stays
     short no matter how much detail each step carries.

     Built as an ARIA tabs widget — arrow keys, Home and End all move between
     steps. Every panel stays in the markup, and with scripting off the track
     hides and all five panels simply stack.
     ------------------------------------------------------------------------ */
  .stepper__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: var(--s5);
  }

  /* The rail the markers sit on, stopping short of the first and last centres */
  .stepper__track::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--line);
  }

  .stepper__dot {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 0 0.2rem;
    text-align: center;
  }

  .stepper__n {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--fg-mute);
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
      color 0.35s var(--ease), transform 0.35s var(--ease);
  }

  .stepper__label {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg-mute);
    transition: color 0.3s var(--ease);
  }

  .stepper__dot:hover .stepper__n {
    border-color: var(--lime-deep);
    color: var(--fg);
  }

  .stepper__dot[aria-selected="true"] .stepper__n {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--ink);
    transform: scale(1.1);
  }

  .stepper__dot[aria-selected="true"] .stepper__label {
    color: var(--fg);
  }

  @media (max-width: 44rem) {
    .stepper__track {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .stepper__n {
      width: 42px;
      height: 42px;
    }

    .stepper__track::before {
      top: 20px;
    }

    /* Names would collide at this width; the panel heading carries them */
    .stepper__label {
      display: none;
    }
  }

  .stepper__panel {
    display: grid;
    gap: var(--s5);
    padding: var(--s6) var(--s5);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    clip-path: polygon(
      0 0,
      calc(100% - 22px) 0,
      100% 38px,
      100% 100%,
      22px 100%,
      0 calc(100% - 38px)
    );
  }

  @media (min-width: 56rem) {
    .stepper__panel {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
      gap: var(--s7);
      align-items: center;
      padding: var(--s7) var(--s6);
    }
  }

  .stepper__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lime-ink);
  }

  .stepper__title {
    margin-top: var(--s3);
    font-stretch: var(--semiwide);
    font-weight: 800;
    font-size: var(--step-3);
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
  }

  .stepper__text {
    margin-top: var(--s4);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--fg-dim);
    max-width: 52ch;
  }

  /* The deliverable, called out rather than buried in another sentence */
  .chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    margin-top: var(--s4);
    padding: 0.7em 1.1em;
    background: var(--lime-wash);
    border-left: 3px solid var(--lime);
    font-size: var(--step--1);
  }

  .chip b {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime-ink);
    white-space: nowrap;
  }

  /* Art side: the step's icon at scale, over an oversized outline numeral.
     No photography here on purpose — the capability tiles already carry the
     photographs, and repeating them is what made the two sections twin. */
  .stepper__art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 170px;
  }

  .stepper__art-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: clamp(8rem, 17vw, 14rem);
    font-weight: 300;
    line-height: 1;
    color: var(--ink);
    opacity: 0.07;
    user-select: none;
  }

  .stepper__art svg {
    position: relative;
    width: clamp(100px, 15vw, 158px);
    height: auto;
    color: var(--ink);
  }

  .stepper__art .ic-l {
    stroke: var(--lime-deep);
  }

  /* Only the selected panel shows once scripting is available. The base rule
     leaves them all visible so a no-JS visitor still gets every step. */
  .js .stepper__panel {
    display: none;
  }

  .js .stepper__panel.is-active {
    display: grid;
    animation: panel-in 0.45s var(--ease);
  }

  .no-js .stepper__track {
    display: none;
  }

  .no-js .stepper__panel + .stepper__panel {
    margin-top: var(--s4);
  }

  @keyframes panel-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .js .stepper__panel.is-active {
      animation: none;
    }

    .stepper__dot[aria-selected="true"] .stepper__n {
      transform: none;
    }
  }


  /* ---------------------------------------------------------------------------
     Service bands — image on one side, capability on the other, alternating
     ------------------------------------------------------------------------ */
  .band {
    display: grid;
    gap: var(--s5);
    padding-block: var(--s6);
    border-top: 1px solid var(--line);
  }

  @media (min-width: 62rem) {
    .band {
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
      gap: var(--s7);
      align-items: center;
      padding-block: var(--s7);
    }

    /* Alternate the image side so the page does not read as one long column,
       mirroring the track widths as well. Without the second rule the media
       lands in the wider column on even rows and the photograph grows on
       alternate bands, which meant two different crop sizes to supply. */
    .band:nth-of-type(even) .band__media {
      order: 2;
    }

    .band:nth-of-type(even) {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    }
  }

  .band__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--paper-sunk);
    clip-path: polygon(
      0 0,
      calc(100% - 24px) 0,
      100% 41px,
      100% 100%,
      24px 100%,
      0 calc(100% - 41px)
    );
  }

  .band__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) contrast(1.06);
    transition: filter 0.6s var(--ease), transform 0.8s var(--ease);
  }

  .band:hover .band__media img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.03);
  }

  /* Number plate sitting on the image corner */
  .band__plate {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.75em 1.15em;
    background: var(--ink);
    color: var(--paper);
  }

  .band__plate svg {
    width: 30px;
    height: 30px;
    color: var(--paper);
  }

  .band__plate .ic-l {
    stroke: var(--lime);
  }

  .band__num {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    color: var(--lime);
  }

  .band__title {
    font-stretch: var(--semiwide);
    font-weight: 700;
    font-size: var(--step-3);
    letter-spacing: -0.03em;
    line-height: 1.02;
  }

  .band__blurb {
    margin-top: var(--s3);
    font-size: var(--step-1);
    color: var(--fg-dim);
    max-width: 40ch;
  }

  .band__services {
    display: grid;
    gap: 0;
    margin-top: var(--s5);
    border-top: 1px solid var(--line);
  }

  .band__services li {
    position: relative;
    padding: var(--s3) 0 var(--s3) 1.7rem;
    border-bottom: 1px solid var(--line-soft);
  }

  .band__services li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: calc(var(--s3) + 0.42em);
    width: 0.42em;
    height: 0.42em;
    border-right: 2.5px solid var(--lime-deep);
    border-top: 2.5px solid var(--lime-deep);
    transform: rotate(45deg);
  }

  .band__services h3 {
    font-weight: 650;
    font-size: var(--step-0);
    letter-spacing: -0.01em;
  }

  .band__services p {
    margin-top: 0.15em;
    font-size: var(--step--1);
    color: var(--fg-dim);
    line-height: 1.5;
  }

  /* ---------------------------------------------------------------------------
     Data visuals
     ------------------------------------------------------------------------ */
  .viz {
    margin: 0;
  }

  .viz svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .viz figcaption {
    margin-top: var(--s3);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--fg-mute);
  }

  /* Funnel */
  .funnel__band {
    transition: opacity 0.3s var(--ease);
  }

  /* Sized generously because the SVG is scaled down to fit its column; these
     land at roughly 17px and 11px once rendered. */
  .funnel__stage {
    font-family: var(--font-sans);
    font-weight: 650;
    font-size: 21px;
    fill: var(--ink);
  }

  .funnel__tag {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.09em;
    fill: var(--lime-ink);
  }

  /* Seasonality curve, drawn on the dark band */
  .season__grid {
    stroke: rgba(244, 243, 238, 0.14);
    stroke-width: 1;
  }

  .season__area {
    fill: rgba(193, 216, 51, 0.16);
  }

  .season__line {
    fill: none;
    stroke: var(--lime);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .season__month {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    fill: #8d8d88;
  }

  .season__peak {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    fill: var(--lime);
  }

  .season__dot {
    fill: var(--lime);
  }

  /* Declared before the media query below, which switches it on. Same layer and
     same specificity, so source order decides the winner. */
  .funnel__legend {
    display: none;
    gap: 0.6em;
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
  }

  .funnel__legend li {
    display: grid;
    gap: 0.15em;
  }

  .funnel__legend b {
    font-weight: 650;
  }

  .funnel__legend span {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    color: var(--lime-ink);
  }

  /* SVG text is measured in user units, so it shrinks with the whole drawing.
     On a phone these charts render at roughly 0.4x, which turns 11px labels
     into 4px. Scaling the type up inside the viewBox is the only way to keep
     them legible at both ends. */
  @media (max-width: 48rem) {
    .season__month {
      font-size: 24px;
    }

    .season__peak {
      font-size: 22px;
    }

    .season__line {
      stroke-width: 5;
    }

    .season__dot {
      r: 9;
    }

    .season__grid {
      stroke-width: 2;
    }

    /* SVG text cannot wrap, and at this width the channel tags run off the
       edge of the drawing. They move into an HTML list underneath instead. */
    .funnel__stage {
      font-size: 34px;
    }

    .funnel__tag {
      display: none;
    }

    .funnel__legend {
      display: grid;
    }
  }

  /* Draw-on animation for the curve */
  .js .season__line {
    stroke-dasharray: var(--len, 1400);
    stroke-dashoffset: var(--len, 1400);
  }

  .js .season.is-in .season__line {
    transition: stroke-dashoffset 1.6s var(--ease);
    stroke-dashoffset: 0;
  }

  .js .season__area,
  .js .season__dot,
  .js .season__peak {
    opacity: 0;
    transition: opacity 0.7s var(--ease) 0.9s;
  }

  .js .season.is-in .season__area,
  .js .season.is-in .season__dot,
  .js .season.is-in .season__peak {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip__inner {
    transition: none !important;
    transform: none !important;
  }

  /* Without the rotation the two faces have to cross-fade instead */
  .flip__face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: none !important;
  }

  .flip__face--back {
    transform: none !important;
    opacity: 0;
  }

  .flip:hover .flip__face--back,
  .flip:focus-visible .flip__face--back,
  .flip[aria-expanded="true"] .flip__face--back {
    opacity: 1;
  }

  .js .season__line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .js .season__area,
  .js .season__dot,
  .js .season__peak {
    opacity: 1 !important;
  }
}