/*
Theme Name: The Business Owners Society
Theme URI: https://thebusinessownerssociety.co.uk
Author: James Nicholson
Description: Bespoke theme for The Business Owners Society — a UK business growth membership. Ink navy, signal red and off-white. Includes a full blog, comparison and trade page templates, and a free-scan capture template.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bos
Tags: business, membership, custom-colors, custom-menu, blog, block-styles, wide-blocks
*/

/*
      Fonts are self-hosted in assets/fonts. No Google Fonts request.
      Two reasons: it removes a third-party round trip on first paint, and
      it keeps visitor IP addresses off Google's servers — which for a UK
      business site selling to UK businesses is the safer default.
      Source Sans 3 is a variable font, so one file covers 400 to 700.
    */

    @font-face {
      font-family: "Anton";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("assets/fonts/anton-400.woff2") format("woff2");
    }

    @font-face {
      font-family: "Barlow Condensed";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("assets/fonts/barlowcond-500.woff2") format("woff2");
    }

    @font-face {
      font-family: "Barlow Condensed";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("assets/fonts/barlowcond-600.woff2") format("woff2");
    }

    @font-face {
      font-family: "Barlow Condensed";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("assets/fonts/barlowcond-700.woff2") format("woff2");
    }

    @font-face {
      font-family: "Source Sans 3";
      font-style: normal;
      font-weight: 200 900;
      font-display: swap;
      src: url("assets/fonts/sourcesans-var.woff2") format("woff2-variations");
    }

    @font-face {
      font-family: "IBM Plex Mono";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("assets/fonts/plexmono-500.woff2") format("woff2");
    }

    @font-face {
      font-family: "IBM Plex Mono";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("assets/fonts/plexmono-600.woff2") format("woff2");
    }

/*
      Palette — sampled from the approved design
      Ink Navy    #000C21   the ground for the header, hero and every dark band
      Signal Red  #BD0406   one accent, used for emphasis and action only
      Off White   #FCFCFC   the page ground below the hero
      Chalk       #EDEFF3   alternate band and quiet fills
      Slate       #5A6376   secondary text on light
      Mist        #9AA7BC   secondary text on navy

      Type
      Anton             display — headlines, the logo, big numerals
      Barlow Condensed  labels, navigation, buttons, card titles
      Source Sans 3     body copy
      IBM Plex Mono     data and eyebrows
    */

    :root {
      --navy: #000C21;
      --navy-2: #0A1B38;
      --red: #BD0406;
      --red-hot: #E4101A;
      --white: #FFFFFF;
      --off: #FCFCFC;
      --chalk: #EDEFF3;
      --ink: #000C21;
      --muted: #5A6376;
      --mist: #9AA7BC;
      --line: rgba(0, 12, 33, 0.18);
      --line-strong: rgba(0, 12, 33, 0.45);
      --line-navy: rgba(255, 255, 255, 0.22);

      /* Aliases — the previous palette names, kept so every existing rule
         keeps working. Change a colour here, not in a hundred places. */
      --bottle: var(--navy);
      --oxblood: var(--red);
      --charcoal: var(--ink);
      --paper: var(--off);
      --sage: var(--chalk);

      --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
      --font-label: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
      --font-body: "Source Sans 3", system-ui, Arial, sans-serif;
      --font-mono: "IBM Plex Mono", ui-monospace, monospace;

      /* Major-third type scale */
      --text-xs: clamp(0.73rem, 0.7rem + 0.1vw, 0.79rem);
      --text-sm: clamp(0.88rem, 0.84rem + 0.15vw, 0.98rem);
      --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
      --text-lg: clamp(1.2rem, 1.12rem + 0.36vw, 1.42rem);
      --text-xl: clamp(1.44rem, 1.29rem + 0.68vw, 1.88rem);
      --text-2xl: clamp(1.73rem, 1.48rem + 1.12vw, 2.45rem);
      --text-3xl: clamp(2.07rem, 1.65rem + 1.92vw, 3.3rem);
      --text-display: clamp(2.05rem, 1.15rem + 3.05vw, 4rem);

      --space-1: 0.5rem;
      --space-2: 0.75rem;
      --space-3: 1rem;
      --space-4: 1.5rem;
      --space-5: 2rem;
      --space-6: 3rem;
      --space-7: 4.5rem;
      --space-8: 6.5rem;
      --max: 75rem;
    }

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

    html {
      scroll-behavior: smooth;
      overflow-x: clip;
    }

    body {
      margin: 0;
      min-width: 0;
      overflow-x: clip;
      color: var(--charcoal);
      background: var(--paper);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.56;
      text-rendering: optimizeLegibility;
    }

    h1,
    h2,
    h3,
    p,
    blockquote,
    figure {
      margin-top: 0;
    }

    h1,
    h2 {
      font-family: var(--font-display);
      font-synthesis: none;
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: 0.002em;
      text-transform: uppercase;
      text-wrap: balance;
    }

    h3 {
      font-family: var(--font-label);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: 0.005em;
      text-wrap: balance;
    }

    /* Anton is a single weight. Never let a browser synthesise a bolder one. */
    h1 strong, h2 strong { font-weight: 400; }

    p {
      text-wrap: pretty;
    }

    a {
      color: inherit;
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.17em;
    }

    a:hover {
      color: var(--oxblood);
    }

    a:focus-visible,
    button:focus-visible {
      outline: 3px solid var(--oxblood);
      outline-offset: 4px;
    }

    .shell {
      width: min(calc(100% - 2.5rem), var(--max));
      margin-inline: auto;
    }

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

    /* ---------------------------------------------------------------
       Header — navy, two rows. Row one is the logo lockup and the four
       nouns; row two is navigation. The nouns sit in the header on every
       page because they are the clarity layer, not homepage decoration.
       --------------------------------------------------------------- */

    .site-header {
      border-bottom: 0;
      color: var(--white);
      background: var(--navy);
    }

    .header-inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: stretch;
      gap: clamp(1rem, 3vw, 2.5rem);
      min-height: 4.6rem;
      padding-block: 0.85rem;
    }

    /* The lockup: THE | 104 | CLUB, the numerals in a red box. */
    /* The lockup stacks: THE BUSINESS OWNERS over SOCIETY, the mark in red.
       max-width is what forces the wrap — a 27-character name set on one
       line would crowd the noun bar off the header. */
    .brand {
      display: flex;
      flex-wrap: wrap;
      align-self: center;
      align-items: flex-start;
      gap: 3px;
      max-width: 15rem;
      color: var(--white);
      font-family: var(--font-display);
      font-size: clamp(1.02rem, 1.55vw, 1.32rem);
      letter-spacing: 0.012em;
      line-height: 1;
      text-decoration: none;
      text-transform: uppercase;
    }

    .brand span {
      display: inline-flex;
      align-items: center;
      padding: 0.26em 0.34em 0.22em;
      color: var(--navy);
      background: var(--white);
      white-space: nowrap;
    }

    .brand .brand-mark {
      color: var(--white);
      background: var(--red);
      font-family: var(--font-display);
      font-size: 1em;
      letter-spacing: 0.01em;
    }

    .brand:hover .brand-mark { background: var(--red-hot); }
    .brand:focus-visible { outline-offset: 6px; }

    .noun-bar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
    }

    .noun {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: 0.6rem;
      min-width: 0;
      padding: 0.1rem clamp(0.7rem, 1.6vw, 1.3rem);
    }

    .noun + .noun { border-left: 1px solid var(--line-navy); }

    .noun-icon {
      width: 1.35rem;
      height: 1.35rem;
      flex: none;
      margin-top: 0.05rem;
      color: var(--white);
    }

    .noun-text { min-width: 0; }

    .noun strong {
      display: block;
      font-family: var(--font-label);
      font-size: clamp(0.95rem, 1.5vw, 1.16rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .noun span {
      display: block;
      color: var(--mist);
      font-size: var(--text-xs);
      line-height: 1.3;
    }

    .header-nav-row { border-top: 1px solid var(--line-navy); }

    .nav {
      display: flex;
      align-items: center;
      gap: clamp(0.9rem, 2.2vw, 2rem);
      min-height: 3rem;
      font-family: var(--font-label);
      font-size: 1.02rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* items_wrap outputs bare <li>s, so kill the markers explicitly. */
    .nav li { display: inline-flex; align-items: center; list-style: none; margin: 0; }
    .nav a { color: var(--white); text-decoration: none; }
    .nav a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red-hot); text-decoration-thickness: 2px; }

    .nav .nav-cta {
      margin-left: auto;
      padding: 0.45rem 0.95rem;
      border-bottom: 0;
      color: var(--white);
      background: var(--red);
      font-weight: 700;
    }

    .nav .nav-cta:hover { background: var(--red-hot); text-decoration: none; }

    /* ---------------------------------------------------------------
       Hero — navy band, blocked headline, photograph on the right.
       --------------------------------------------------------------- */

    .hero {
      padding-block: clamp(2.2rem, 5vw, 4rem) clamp(2rem, 4vw, 3.2rem);
      border-bottom: 0;
      color: var(--white);
      background: var(--navy);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 1.08fr);
      column-gap: clamp(1.6rem, 4vw, 4rem);
      row-gap: var(--space-5);
      align-items: start;
    }

    .hero-copy { min-width: 0; }

    .hero h1 {
      max-width: none;
      margin-bottom: var(--space-4);
      font-size: var(--text-display);
    }

    /* Each line is its own block of colour. The middle line inverts so the
       three bands read as one object rather than a stack of highlights. */
    .hero h1 span {
      display: table;
      white-space: nowrap;
      margin-top: 0.09em;
      padding: 0.1em 0.22em 0.16em;
      color: var(--white);
      background: var(--red);
      line-height: 0.98;
    }

    .hero h1 span:first-child { margin-top: 0; }

    .hero h1 .b-white {
      color: var(--navy);
      background: var(--white);
    }

    .hero-sub {
      max-width: 40rem;
      margin-bottom: var(--space-5);
      color: #DDE3EC;
      font-size: var(--text-lg);
      line-height: 1.45;
    }

    .hero-sub strong { color: var(--white); font-weight: 700; }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-3);
    }

    .button {
      display: inline-flex;
      min-height: 3.25rem;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 0.8rem 1.5rem;
      border: 2px solid var(--red);
      border-radius: 0;
      color: var(--white);
      background: var(--red);
      font-family: var(--font-label);
      font-size: 1.16rem;
      font-weight: 700;
      letter-spacing: 0.045em;
      line-height: 1;
      text-decoration: none;
      text-transform: uppercase;
      transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .button::before {
      content: "";
      width: 0;
      height: 0;
      border-left: 0.55em solid currentColor;
      border-top: 0.36em solid transparent;
      border-bottom: 0.36em solid transparent;
    }

    .button:hover {
      border-color: var(--red-hot);
      color: var(--white);
      background: var(--red-hot);
      transform: translateY(-2px);
    }

    /* On the navy hero the button is white with a red arrow — the mockup's
       primary action. Elsewhere it stays solid red. */
    .hero .button {
      border-color: var(--white);
      color: var(--navy);
      background: var(--white);
    }

    .hero .button::before { border-left-color: var(--red); }
    .hero .button:hover { border-color: var(--white); color: var(--navy); background: #E9EDF3; }

    .small-print {
      margin: 0;
      color: var(--muted);
      font-size: var(--text-xs);
      line-height: 1.4;
    }

    .hero .small-print { color: var(--mist); font-size: var(--text-sm); }

    .hero-visual { min-width: 0; margin: 0; }

    .hero-photo-frame {
      display: block;
      border: 1px solid var(--line-navy);
      padding: 0.55rem;
    }

    .hero-photo-frame img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1400 / 928;
      object-fit: cover;
    }

    .photo-placeholder {
      display: grid;
      min-height: 16rem;
      place-items: center;
      border: 1px solid var(--line-strong);
      background: var(--chalk);
      padding: var(--space-4);
      color: var(--navy);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      line-height: 1.45;
      text-align: center;
      text-transform: uppercase;
    }

    .hero .photo-placeholder {
      border-color: var(--line-navy);
      background: transparent;
      color: var(--white);
    }

    .hero-photo { min-height: 0; aspect-ratio: 4 / 3; }

    .founder-credit {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      margin: 0;
      padding-top: 0.65rem;
      color: var(--muted);
      font-size: var(--text-xs);
    }

    .founder-credit strong { color: var(--charcoal); font-weight: 700; }
    .hero .founder-credit { color: var(--mist); }
    .hero .founder-credit strong { color: var(--white); }

    .stats {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: var(--space-2);
      border-top: 1px solid var(--line-navy);
      border-bottom: 0;
    }

    .stat {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 0.85rem;
      min-width: 0;
      padding: 1.1rem clamp(0.8rem, 2vw, 1.5rem);
    }

    .stat + .stat { border-left: 1px solid var(--line-navy); }

    .stat strong {
      color: var(--white);
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.4vw, 3.4rem);
      font-variant-numeric: tabular-nums;
      font-weight: 400;
      letter-spacing: 0.005em;
      line-height: 0.85;
    }

    .stat span {
      display: block;
      color: var(--white);
      font-family: var(--font-label);
      font-size: clamp(0.98rem, 1.5vw, 1.14rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.05;
      text-transform: uppercase;
    }

    .stat em {
      display: block;
      margin-top: 0.2rem;
      color: var(--mist);
      font-size: var(--text-xs);
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    /* ---------------------------------------------------------------
       Ticker — the strip under the hero. Static by design: a moving
       marquee is unreadable and nobody can click it.
       --------------------------------------------------------------- */

    .ticker {
      display: flex;
      align-items: stretch;
      color: var(--white);
      background: var(--navy);
      border-bottom: 1px solid var(--line-strong);
      font-family: var(--font-label);
      font-size: 1rem;
      letter-spacing: 0.03em;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .ticker::-webkit-scrollbar { display: none; }

    .ticker-live {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      flex: none;
      padding: 0.7rem 1.1rem;
      background: var(--red);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .ticker-live::before {
      content: "";
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background: var(--white);
    }

    .ticker-items {
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
    }

    .ticker-items span {
      padding: 0.7rem clamp(0.9rem, 2vw, 1.6rem);
      white-space: nowrap;
    }

    .ticker-items span + span { border-left: 1px solid var(--line-navy); }
    .ticker-items b { font-weight: 700; }

    .ticker-motto {
      flex: none;
      padding: 0.7rem 1.1rem;
      background: var(--red);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .section {
      padding-block: clamp(4.5rem, 9vw, var(--space-8));
      border-bottom: 1px solid var(--line-strong);
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(17rem, 0.6fr);
      gap: var(--space-5);
      align-items: end;
      margin-bottom: clamp(2.25rem, 5vw, 4rem);
    }

    .section h2 {
      max-width: 18ch;
      margin-bottom: 0;
      font-size: var(--text-3xl);
      font-weight: 800;
    }

    .section-intro {
      max-width: 34rem;
      margin: 0;
      color: var(--muted);
      font-size: var(--text-lg);
      line-height: 1.45;
    }

    .nobodies {
      background: var(--white);
    }

    .nobody-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--line-strong);
      border-bottom: 1px solid var(--line-strong);
    }

    .nobody {
      min-width: 0;
      padding: clamp(1.5rem, 3vw, 2.5rem);
    }

    .nobody + .nobody {
      border-left: 1px solid var(--line);
    }

    .nobody-label {
      margin-bottom: var(--space-4);
      color: var(--oxblood);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .nobody h3 {
      margin-bottom: 0.75rem;
      font-size: var(--text-xl);
    }

    .nobody p:last-child {
      margin-bottom: 0;
      color: var(--muted);
    }

    .catalogue {
      background: var(--paper);
    }

    .catalogue-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      border: 1px solid var(--line-strong);
      background: var(--line-strong);
    }

    .catalogue-card {
      min-width: 0;
      min-height: 23rem;
      display: flex;
      flex-direction: column;
      padding: clamp(1.35rem, 2.5vw, 2.25rem);
      background: var(--white);
    }

    .catalogue-card h3 {
      max-width: 15ch;
      margin-bottom: 0.85rem;
      padding-bottom: 0.85rem;
      border-bottom: 3px solid var(--red);
      font-size: var(--text-lg);
      letter-spacing: 0.015em;
      text-transform: uppercase;
    }

    .catalogue-number {
      display: block;
      margin: auto 0 0.85rem;
      color: var(--red);
      font-family: var(--font-display);
      font-size: clamp(4.5rem, 8vw, 7rem);
      font-variant-numeric: tabular-nums;
      font-weight: 400;
      line-height: 0.82;
      letter-spacing: 0.005em;
    }

    .catalogue-card p {
      margin-bottom: 0;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: var(--text-sm);
      line-height: 1.48;
    }

    .comparison {
      color: var(--white);
      background: var(--bottle);
    }

    .comparison .section-intro {
      color: rgba(255, 255, 255, 0.78);
    }

    .comparison-table-wrap {
      width: 100%;
      overflow: visible;
    }

    .comparison table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      color: var(--white);
      font-size: var(--text-sm);
    }

    .comparison col:first-child {
      width: 49%;
    }

    .comparison col:nth-child(2) {
      width: 34%;
    }

    .comparison col:last-child {
      width: 17%;
    }

    .comparison th,
    .comparison td {
      padding: 1rem 1.15rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.26);
      vertical-align: top;
      text-align: left;
      overflow-wrap: anywhere;
    }

    .comparison th {
      color: var(--sage);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .comparison td:last-child,
    .comparison th:last-child {
      text-align: right;
      white-space: nowrap;
    }

    .comparison a {
      color: var(--white);
      text-decoration-color: rgba(255, 255, 255, 0.62);
    }

    .comparison a:hover {
      color: var(--sage);
      text-decoration-color: var(--sage);
    }

    .comparison .total-row td {
      border-top: 2px solid var(--white);
      font-weight: 700;
    }

    .comparison .club-row {
      color: var(--charcoal);
      background: var(--sage);
    }

    .comparison .club-row td {
      border-bottom-color: var(--sage);
      font-weight: 700;
    }

    .price-note {
      margin: 0.8rem 0 0;
      color: rgba(255, 255, 255, 0.68);
      font-size: var(--text-xs);
    }

    .year {
      background: var(--white);
    }

    .move-grid {
      counter-reset: move;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--line-strong);
      border-left: 1px solid var(--line-strong);
    }

    .move {
      counter-increment: move;
      min-width: 0;
      min-height: 5.5rem;
      display: grid;
      grid-template-columns: 2.3rem 1fr;
      gap: 0.8rem;
      align-items: center;
      padding: clamp(1.1rem, 1.8vw, 1.5rem);
      border-right: 1px solid var(--line-strong);
      border-bottom: 1px solid var(--line-strong);
      font-family: var(--font-label);
      font-size: var(--text-lg);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: 0.005em;
      text-transform: uppercase;
    }

    .move::before {
      content: counter(move, decimal-leading-zero);
      align-self: center;
      color: var(--red);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0;
    }

    .proof {
      background: var(--paper);
    }

    .proof-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(1.25rem, 3vw, 2.5rem);
    }

    .quote-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line-strong);
      background: var(--white);
    }

    .quote-photo {
      min-height: 0;
      aspect-ratio: 16 / 9;
      border: 0;
      border-bottom: 1px solid var(--line-strong);
    }

    .quote-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: clamp(1.5rem, 3vw, 2.5rem);
    }

    .placeholder-tag {
      align-self: flex-start;
      margin-bottom: var(--space-4);
      padding-bottom: 0.2rem;
      border-bottom: 1px solid var(--oxblood);
      color: var(--oxblood);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    blockquote {
      margin-bottom: var(--space-5);
      font-family: var(--font-label);
      font-size: var(--text-lg);
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.025em;
    }

    .quote-credit {
      margin: auto 0 0;
      color: var(--muted);
      font-size: var(--text-sm);
    }

    .quote-credit strong {
      color: var(--charcoal);
    }

    .join {
      border-bottom: 0;
      color: var(--white);
      background: var(--charcoal);
    }

    .join-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
      gap: clamp(2rem, 6vw, 6rem);
      align-items: end;
    }

    .join h2 {
      max-width: 15ch;
      margin-bottom: var(--space-4);
    }

    .join p {
      max-width: 46rem;
      margin-bottom: 0;
      color: rgba(255, 255, 255, 0.74);
      font-size: var(--text-lg);
    }

    .join-action {
      display: grid;
      gap: var(--space-3);
      justify-items: start;
    }

    /* On any navy band the primary action is a white block; on light
       sections it stays solid red. One rule, no exceptions. */
    .join .button {
      border-color: var(--white);
      color: var(--navy);
      background: var(--white);
    }

    .join .button::before { border-left-color: var(--red); }

    .join .button:hover {
      border-color: var(--white);
      color: var(--navy);
      background: #E9EDF3;
    }

    .site-footer {
      padding-block: 1.5rem;
      color: rgba(255, 255, 255, 0.65);
      background: var(--charcoal);
      font-size: var(--text-xs);
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .footer-inner p {
      margin: 0;
    }

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

      .stats {
        grid-column: 1;
      }

      .header-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
      }

      .noun-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--line-navy);
        padding-top: 0.8rem;
      }

      .noun { padding-block: 0.35rem; }
      .noun:nth-child(odd) { border-left: 0; }
      .noun:nth-child(n + 3) { border-top: 1px solid var(--line-navy); padding-top: 0.7rem; }

      .hero-copy {
        padding-top: 0;
      }

      .hero h1 {
        max-width: 100%;
      }

      .hero-visual {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.55fr);
        gap: var(--space-3);
        align-items: end;
      }

      .founder-credit {
        display: block;
        padding: 1rem;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .founder-credit span {
        display: block;
      }

      .section-head,
      .join-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
      }

      .section h2 {
        max-width: 20ch;
      }

      .nobody-grid,
      .catalogue-grid,
      .move-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .nobody:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
        border-left: 0;
      }

      .catalogue-card {
        min-height: 21rem;
      }

      .comparison col:first-child {
        width: 43%;
      }

      .comparison col:nth-child(2) {
        width: 37%;
      }

      .comparison col:last-child {
        width: 20%;
      }
    }

    @media (max-width: 42.5rem) {
      .shell {
        width: min(calc(100% - 1.5rem), var(--max));
      }

      .header-inner {
        min-height: 4.25rem;
      }

      /* The links stay on mobile. Hiding them without offering a menu in
         their place leaves a phone visitor with one button and no way to
         look round the site. They wrap instead. */
      .nav {
        flex-wrap: wrap;
        gap: 0.5rem 0.95rem;
        padding-block: 0.55rem;
        font-size: 0.95rem;
      }

      .nav .nav-cta {
        order: 99;
        width: 100%;
        margin-left: 0;
        margin-top: 0.2rem;
        text-align: center;
      }

      .noun-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .noun:nth-child(3) {
        border-left: 0;
      }

      .noun:nth-child(n + 3) {
        border-top: 1px solid var(--line);
      }

      .hero-visual {
        grid-template-columns: minmax(0, 1fr);
      }

      .stats {
        grid-template-columns: minmax(0, 1fr);
      }

      .stat + .stat {
        border-top: 1px solid var(--line);
        border-left: 0;
      }

      .nobody-grid,
      .catalogue-grid,
      .move-grid,
      .proof-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .nobody + .nobody,
      .nobody:last-child {
        grid-column: auto;
        border-top: 1px solid var(--line);
        border-left: 0;
      }

      .catalogue-card {
        min-height: 19rem;
      }

      .comparison table,
      .comparison tbody,
      .comparison tr,
      .comparison td {
        display: block;
        width: 100%;
      }

      .comparison thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .comparison tr {
        padding-block: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      }

      .comparison td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 0.46fr) minmax(0, 0.54fr);
        gap: 0.75rem;
        padding: 0.32rem 0;
        border: 0;
        text-align: left;
        white-space: normal;
      }

      .comparison td::before {
        content: attr(data-label);
        color: var(--sage);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-weight: 600;
        line-height: 1.4;
        text-transform: uppercase;
      }

      .comparison td:last-child {
        text-align: left;
        white-space: normal;
      }

      .comparison .total-row td {
        border-top: 0;
      }

      .comparison .club-row {
        margin-top: 0.75rem;
        padding: 1rem;
      }

      .comparison .club-row td::before {
        color: var(--bottle);
      }

      .footer-inner {
        display: grid;
      }
    }

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

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }

/* ============================================================
   ADDITIONS — components beyond the homepage
   ============================================================ */
.prose{max-width:44rem}
.prose h2{margin-top:var(--space-6);margin-bottom:var(--space-3);font-size:var(--text-2xl);font-weight:800}
.prose h3{margin-top:var(--space-5);margin-bottom:var(--space-2);font-size:var(--text-xl);font-weight:700}
.prose p{margin-bottom:var(--space-3)}
.prose ul,.prose ol{margin:0 0 var(--space-4);padding-left:1.35rem}
.prose li{margin-bottom:.5rem}
.prose>*:first-child{margin-top:0}
.lead{font-size:var(--text-lg);line-height:1.45}

.crumb{margin-bottom:var(--space-3);color:var(--muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

.page-head{padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line-strong)}
.page-head h1{max-width:20ch;margin-bottom:var(--space-3);font-size:var(--text-3xl);font-weight:800}
.page-head .lead{max-width:44rem;margin-bottom:0;color:var(--muted)}

.eyebrow{margin-bottom:var(--space-2);color:var(--oxblood);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase}

.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line-strong);background:var(--line-strong)}
.cols-3>*{min-width:0;padding:clamp(1.35rem,2.5vw,2rem);background:var(--white)}

.panel{border:1px solid var(--line-strong);background:var(--white);padding:clamp(1.5rem,3vw,2.25rem)}
.panel.tint{background:var(--sage)}
.panel.dark{color:var(--white);background:var(--bottle);border-color:var(--bottle)}
.panel.dark a{color:var(--white)}
.panel h2,.panel h3{margin-bottom:var(--space-2);font-size:var(--text-xl);font-weight:700}
.panel p:last-child{margin-bottom:0}

.rule-list{border-top:1px solid var(--line-strong)}
.rule-list>div{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.rule-list .n{color:var(--oxblood);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600}
.rule-list h3{margin-bottom:.35rem;font-size:var(--text-lg)}
.rule-list p{margin-bottom:0;color:var(--muted);font-size:var(--text-sm)}

table.data{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
table.data th{padding:.85rem 1rem;border-bottom:1px solid var(--line-strong);color:var(--muted);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-align:left;text-transform:uppercase;white-space:nowrap}
table.data td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data .num{font-family:var(--font-mono);white-space:nowrap;text-align:right}
table.data tr.us td{background:var(--sage);font-weight:700}
.table-wrap{overflow-x:auto;border:1px solid var(--line-strong);background:var(--white)}
.table-wrap table.data{min-width:34rem}

.yes{color:var(--bottle);font-weight:700}
.no{color:var(--oxblood);font-weight:700}
.part{color:var(--muted);font-weight:600}

form.capture{display:grid;gap:var(--space-3);max-width:30rem}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--font-label);font-size:var(--text-sm);font-weight:700}
.field input,.field select{padding:.85rem .9rem;border:1px solid var(--line-strong);border-radius:2px;background:var(--white);color:var(--charcoal);font-family:inherit;font-size:var(--text-base)}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--oxblood);outline-offset:2px}
.field .hint{color:var(--muted);font-size:var(--text-xs)}
button.button{cursor:pointer;font-family:var(--font-label)}
.formnote{margin:0;color:var(--muted);font-size:var(--text-xs)}
.ok{display:none;padding:1rem 1.15rem;border-left:4px solid var(--bottle);background:var(--sage);font-size:var(--text-sm)}
.ok.show{display:block}

.calc{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.calc-out{padding:clamp(1.5rem,3vw,2.25rem);color:var(--white);background:var(--bottle)}
.calc-out .big{display:block;font-family:var(--font-label);font-size:clamp(2.6rem,6vw,4rem);font-weight:800;line-height:1;letter-spacing:-.05em}
.calc-out .cap{display:block;margin-top:.5rem;color:var(--sage);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase}
.calc-out hr{margin:1.35rem 0;border:0;border-top:1px solid rgba(255,255,255,.3)}
.calc-out p{margin-bottom:0;color:rgba(255,255,255,.82);font-size:var(--text-sm)}

.linklist{display:grid;gap:1px;border:1px solid var(--line-strong);background:var(--line-strong)}
.linklist a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.1rem 1.35rem;background:var(--white);text-decoration:none}
.linklist a:hover{background:var(--sage);color:var(--charcoal)}
.linklist strong{display:block;font-family:var(--font-label);font-size:var(--text-base)}
.linklist span{display:block;margin-top:.15rem;color:var(--muted);font-size:var(--text-sm)}
.linklist .arrow{color:var(--oxblood);font-family:var(--font-mono)}

.footnote{margin-top:var(--space-3);color:var(--muted);font-size:var(--text-xs)}
.site-footer .footer-inner{flex-wrap:wrap}
.footer-nav{display:flex;flex-wrap:wrap;gap:1rem}
.footer-nav li{list-style:none;margin:0}
.footer-nav a{text-decoration:none}
.footer-nav a:hover{color:var(--white)}

@media (max-width:56rem){
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:42.5rem){
  .cols-2,.cols-3{grid-template-columns:minmax(0,1fr)}
}

    @media (max-width: 40rem) {
      .header-inner { padding-block: 0.7rem; }

      .noun-bar { grid-template-columns: minmax(0, 1fr); }
      .noun { border-left: 0 !important; }
      .noun + .noun { border-top: 1px solid var(--line-navy); padding-top: 0.55rem; }

      .nav { flex-wrap: wrap; gap: 0.7rem 1rem; padding-block: 0.6rem; }
      .nav .nav-cta { margin-left: 0; }

      .stats { grid-template-columns: minmax(0, 1fr); }
      .stat + .stat { border-left: 0; border-top: 1px solid var(--line-navy); }

      .hero h1 span { padding: 0.08em 0.18em 0.14em; white-space: normal; }

      .ticker-motto { display: none; }
    }

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

    /* ---------------------------------------------------------------
       Founder — the photograph earns its place here rather than in the
       hero, where a portrait competes with the product for attention.
       --------------------------------------------------------------- */

    .founder {
      background: var(--chalk);
    }

    .founder-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
      column-gap: clamp(2rem, 5vw, 4.5rem);
      row-gap: var(--space-5);
      align-items: start;
    }

    .founder-photo {
      margin: 0;
      min-width: 0;
      position: sticky;
      top: 2rem;
    }

    .founder-photo img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1511 / 1128;
      object-fit: cover;
      border: 1px solid var(--line-strong);
    }

    .founder-photo figcaption {
      margin-top: 0.7rem;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .founder-copy { min-width: 0; }

    .founder-copy h2 {
      max-width: 16ch;
      margin-bottom: var(--space-4);
      font-size: var(--text-2xl);
    }

    .founder-copy p {
      max-width: 40rem;
      margin-bottom: var(--space-3);
    }

    .founder-copy .lede {
      font-size: var(--text-lg);
      line-height: 1.45;
    }

    .founder-copy .footnote {
      margin-top: var(--space-4);
      padding-left: 1.1rem;
      border-left: 3px solid var(--red);
      color: var(--muted);
      font-size: var(--text-sm);
    }

    .founder-copy .button { margin-top: var(--space-3); }

    @media (max-width: 56rem) {
      .founder-grid { grid-template-columns: minmax(0, 1fr); }
      .founder-photo { position: static; }
    }

    /* ---------------------------------------------------------------
       Text on the navy bands.

       The muted greys and the red eyebrow are tuned for the light page
       ground and drop below 4.5:1 on navy. Every dark band gets a lighter
       set. Checked with a contrast pass over the whole site, not by eye.
       --------------------------------------------------------------- */

    .hero .eyebrow,
    .comparison .eyebrow,
    .join .eyebrow {
      color: #FF6A6C;
    }

    .hero .hint,
    .hero .formnote,
    .hero .crumb,
    .hero .footnote,
    .comparison .hint,
    .comparison .formnote,
    .comparison .footnote,
    .comparison .price-note,
    .join .footnote {
      color: var(--mist);
    }

    .hero label,
    .hero legend {
      color: var(--white);
    }

    .site-footer { color: #B7C1D0; }