/* ==========================================================================
   Tour Operator Growth — site stylesheet
   Typography-led, dashboard-textured. No frameworks, no build step.
   ========================================================================== */

/* --- Fonts (self-hosted, latin + latin-ext) ------------------------------ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* The five named colours. Everything else on the page is a neutral derived
     from them, or one of the two working values the header needs. */
  --green-900:     #1d3a2c;   /* primary dark ground */
  --green-950:     #16301f;   /* deeper ground, section alternation */
  --cream:         #f5f5ee;   /* text on dark; the page ground */
  --gold:          #d9b36c;   /* accent, on the dark ground only */
  --teal:          #6faf9a;   /* second accent */
  /* Body copy and supporting lines reversed out of the green. */
  --on-dark:       rgba(245, 245, 238, 0.78);
  --on-dark-quiet: rgba(245, 245, 238, 0.55);

  --bg:            var(--cream);
  --bg-sunk:       #EAEAE0;
  --surface:       #FFFFFF;
  --ink:           #1A1B17;
  --text:          #33362E;
  --muted:         #66695D;
  --rule:          #E2DED2;
  --rule-strong:   #CFC9B9;
  --accent:        var(--green-900);
  /* Hover darkens the green rather than lifting it: a solid button that
     brightens reads as a different button, one that deepens reads as the
     same button being pressed. */
  --accent-hover:  var(--green-950);
  --accent-press:  #12271a;
  /* A reversed button on the dark ground cannot darken — brightening it to
     white would make it the loudest thing on the page — so it warms instead. */
  --reverse-hover: #EDEDE2;
  --accent-wash:   #EDF1EC;
  /* Gold reads as emphasis only while it is scarce, so on the light ground it
     appears in one place: the wordmark's lower rule. Everything that used to
     carry a brass edge — cards, panels, marks — is green now. */
  --accent-2:      var(--gold);
  --accent-2-ink:  #7A5E35;   /* dark enough for small text on a light ground */
  --accent-2-lit:  var(--gold);
  /* The hero, reversed out of --green-900. Measured against #1d3a2c:
     cream 11.32:1, body 7.56:1, quiet 4.61:1, gold 6.27:1, teal 4.89:1 —
     and green on a gold button, 6.27:1. */
  --hero-ink:      var(--cream);
  --hero-body:     var(--on-dark);
  --hero-eyebrow:  var(--gold);
  --hero-quiet:    var(--on-dark-quiet);
  --hero-rule:     var(--teal);
  --accent-2-wash: #F4EEE3;
  --accent-2-rule: #D8C7A8;
  --focus:         #7A5E35;

  --serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* One centred container. Everything on the page — prose, figures, cards,
     nav, footer — is measured against this, so the page has a single true
     width rather than two competing ones. */
  --frame: 1140px;
  --prose: var(--frame);
  --wide:  var(--frame);
  --figure: var(--frame);
  --measure: 68ch;     /* running text, left-aligned inside the frame */
  /* The left margin inside the container, reserved for section numbers and
     quote rules. Zero on a narrow screen, where numbers stack above instead. */
  --rail: 0px;
  --gutter: 24px;
  --nav-h: 68px;
  --toc-h: 46px;
}

@media (min-width: 900px) {
  :root { --rail: 56px; }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--toc-h) + 18px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

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

.wrap {
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--rail)) var(--gutter);
}
/* Figures, cards and split blocks sit on the same container and the same left
   edge as the prose; only their right edge runs further, out to the container. */
.band > .figure,
.band > .cards,
.band > .split {
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--rail)) var(--gutter);
}

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

main { display: block; }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.45rem + 2.6vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.5rem, 1.28rem + 0.95vw, 2rem);
  line-height: 1.2;
  margin: 2.6em 0 0.7em;
}
/* Inside a band the padding sets the rhythm, so the heading needs no margin.
   /contact/ and 404.html are not banded and keep the margin above. */
.band h2 { margin-top: 0; }

/* --- Section heads -------------------------------------------------------- */

.section-head { margin-bottom: 0.7em; }
.section-head h2 { margin: 0; }

/* The paragraph that opens a section sets it up, so it is set a step larger
   than the paragraphs that follow. */
.sect-lede {
  font-size: 1.09rem;
  line-height: 1.62;
  color: var(--ink);
  max-width: 68ch;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 2.1em 0 0.45em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }

.lede {
  font-size: clamp(1.24rem, 1.08rem + 0.62vw, 1.55rem);
  /* 400 is the bottom of the DM Sans axis. The old 350 was for Inter and is
     silently clamped here, so it is written as what it actually renders. */
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 1.5em;
  max-width: 60ch;     /* wider than the prose column below it */
  text-wrap: pretty;
}

ul, ol { margin: 1.6em 0 1.6em; padding-left: 1.2em; max-width: var(--measure); }
/* --- Specification panels ------------------------------------------------ */
/* Every list in the running copy is what the client actually gets. Set apart
   from the argument around it, on its own plate with a brass edge, rather than
   trailing off the end of a paragraph as an afterthought. Marked in build.py. */
.spec {
  list-style: none;
  max-width: min(100%, 920px);
  margin: 2em 0;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: 3px;
  font-size: 0.985rem;
}
.spec li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.85em;
}
.spec li:last-child { margin-bottom: 0; }
/* The same hover the cards take, so the panels read as part of one system:
   the three plain sides deepen to the green and the brass top rule is left
   alone. No lift here, though — a panel is not a link, and the rise is the
   part of the card treatment that reads as "press me". Behind (hover: hover),
   so a tap on a phone cannot leave a panel stuck in the hovered state. */
.spec {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .spec:hover {
    border-left-color: var(--accent);
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
    box-shadow: 0 6px 18px -10px rgba(31, 59, 44, 0.35);
  }
}
/* A brass rule for a mark — the same one the card marks and the diagrams use. */
.spec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 10px;
  height: 2px;
  background: var(--accent-2-ink);
}
/* Two columns where the items are short enough to take the narrower measure;
   build.py decides which, and one column below the breakpoint regardless. */
@media (min-width: 720px) {
  .spec.cols { columns: 2; column-gap: 44px; }
  .spec.cols li { break-inside: avoid; }
}
/* A panel keeps its own light ground wherever it sits, so it keeps light ink. */
.band--dark .spec { color: var(--text); }
.band--dark .spec strong { color: var(--ink); }
.band--dark .spec a { color: var(--accent); }
li { margin-bottom: 0.3em; }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--rule-strong); }
ol li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }

strong { color: var(--ink); font-weight: 600; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transition: text-decoration-color 0.15s ease, color 0.15s ease,
              text-decoration-thickness 0.15s ease;
}
/* Scoped away from the buttons: a .cta sets its own colour, and a bare
   a:hover would outrank it and paint the label the colour of its own fill. */
a:not(.cta):not(.btn):visited { color: var(--accent); }
a:not(.cta):not(.btn):hover { color: var(--accent); }
a:hover { text-decoration-color: var(--accent); }
/* Reversed out, an ordinary link is cream and hovers to the teal. */
.band--dark a:not(.cta),
.hero-band a:not(.cta) { color: var(--cream); }
.band--dark a:not(.cta):hover,
.hero-band a:not(.cta):hover {
  color: var(--teal);
  text-decoration-color: var(--teal);
}

/* --- Breadcrumb ---------------------------------------------------------- */

.crumb {
  font-size: 0.83rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.6em;
}
.crumb a { color: var(--muted); text-decoration-color: var(--rule-strong); }
.crumb a:hover { color: var(--accent); }

/* --- Call to action ------------------------------------------------------ */

.cta, .btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  /* Colour only: nothing about a button moves, scales or lifts. */
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cta { margin: 1.4em 0 0.4em; }
/* The ask is one unit: air above it, air below the line beneath it, and almost
   none in between. */
@media (hover: hover) {
  .cta:hover, .btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
}
.cta:active, .btn:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--rule-strong);
}
@media (hover: hover) {
  .btn-ghost:hover { background: var(--accent-wash); color: var(--accent);
                     border-color: var(--accent); }
}

.cta-sub {
  font-size: 0.94rem;
  color: var(--muted);
  margin: 0.85em 0 1.8em;
}

/* --- Pull-out note ------------------------------------------------------- */

.note {
  background: var(--bg-sunk);
  border-left: 3px solid var(--accent);
  padding: 20px 24px;
  margin: 1.9em 0;
  font-size: 0.985rem;
}
.note strong { color: var(--accent-2-ink); letter-spacing: 0.01em; }
.note p:last-child { margin-bottom: 0; }

.more {
  font-size: 0.98rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 1.1em;
  margin-top: 2em;
}

/* --- FAQ ----------------------------------------------------------------- */
/* Native <details>, so every answer is in the HTML the server sends and the
   whole FAQ is crawlable and readable with JavaScript off. Each sits on the
   surface tone, which differs from both the page ground and the wash. */

.faq {
  display: grid;
  gap: 10px;
  margin-top: 1.6em;
  max-width: var(--prose);
}
.qa {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  border-radius: 3px;
}
.qa[open] { border-left-color: var(--accent-2-ink); }
.qa summary {
  display: block;               /* removes the default marker in Firefox */
  cursor: pointer;
  padding: 15px 54px 15px 22px;
  position: relative;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 {
  display: inline;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}
.qa summary:hover h3 { color: var(--accent); }
.qa summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
/* The chevron, drawn rather than shipped as an asset. */
.qa summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--accent-2-ink);
  border-bottom: 2px solid var(--accent-2-ink);
  transform: rotate(45deg);
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .qa summary::after { transition: transform 0.18s ease; }
}
.qa-body { padding: 0 24px; }
.qa-body > *:first-child { margin-top: 0; }
.qa-body > *:last-child { margin-bottom: 18px; }
/* Should a FAQ ever land in a dark band, it keeps its own light ground. */
.band--dark .qa { color: var(--text); }
.band--dark .qa h3 { color: var(--ink); }

/* --- Figures (the dashboard illustrations) ------------------------------- */

.figure {
  /* The diagrams are the most distinctive thing here, so they get room and
     they sit on the frame — squarely in the column, not floating wider. */
  margin: clamp(2.6rem, 3.4vw, 3.8rem) auto;
  max-width: var(--frame);
  padding-inline: var(--gutter);
}
.figure-inner {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 28px clamp(16px, 3vw, 40px) 22px;
}
.figure img { display: block; width: 100%; height: auto; }
/* A photograph fills its plate — no white surround, no drop shadow. */
.figure--photo .figure-inner { padding: 0; overflow: hidden; background: var(--bg-sunk); }
.figure--photo img { border-radius: 3px; }
.figure figcaption {
  max-width: 68ch;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--accent-2-ink);
  letter-spacing: 0.005em;
}
.figure figcaption strong {
  color: var(--accent-2-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Bands: one per H2, alternating ground ------------------------------- */

.band {
  /* Generous, and deliberately so: the space before a heading is what makes a
     long page read as chapters instead of one column. */
  padding-block: clamp(40px, 3.6vw, 58px);
}
.band--wash {
  background: var(--bg-sunk);
}

/* One dark band per page — the closing call to action, reversed out of the
   accent. It is the only place the green covers any area, which is what makes
   it read as a moment rather than as decoration. Marked in build.py. */
.band--dark {
  background: var(--accent);
  color: var(--on-dark);
  padding-block: clamp(44px, 4.2vw, 68px);
}
/* Every heading level, not just h2 — an h3 left at --ink is invisible here. */
.band--dark h2,
.band--dark h3,
.band--dark h4,
.band--dark strong { color: var(--cream); }
/* Cards and notes keep their own light ground, so they keep light-ground ink. */
.band--dark .card,
.band--dark .note,
.band--dark .figure-inner { color: var(--text); }
.band--dark .note strong { color: var(--accent-2-ink); }
.band--dark .more { color: var(--on-dark-quiet); border-top-color: rgba(245, 245, 238, 0.22); }
.band--dark .card h3,
.band--dark .card h4,
.band--dark .card strong { color: var(--ink); }
.band--dark .card a { color: var(--accent); }
.band--dark .card li::marker { color: var(--rule-strong); }
.band--dark a {
  color: var(--cream);
  text-decoration-color: rgba(245, 245, 238, 0.42);
}
.band--dark a:hover { text-decoration-color: var(--cream); }
.band--dark :focus-visible { outline-color: var(--accent-2-lit); }
.band--dark .cta {
  background: var(--cream);
  color: var(--accent);
  border-color: var(--cream);
}
.band--dark .cta:active { background: var(--reverse-hover); border-color: var(--reverse-hover); }
@media (hover: hover) {
  .band--dark .cta:hover {
    background: var(--reverse-hover);
    border-color: var(--reverse-hover);
  }
}
.band--dark .cta-sub { color: var(--on-dark-quiet); }
.band--dark .sect-lede { color: var(--on-dark); }
.band--dark li::marker { color: var(--accent-2-lit); }
.band--dark .pull { border-left-color: var(--accent-2-lit); }
/* The diagram keeps its light plate, so it reads as a panel laid on the green. */
.band--dark .figure figcaption {
  color: var(--accent-2-lit);
  border-left-color: var(--accent-2-lit);
}
.band--dark .figure figcaption strong { color: var(--accent-2-lit); }
.band:last-of-type {
  padding-bottom: clamp(48px, 5vw, 72px);
}
/* The band's padding is the only space below its last element. Without this the
   trailing paragraph margin, the figure margin and the padding all stack, and
   the gap reads as a rendering fault rather than as space. */
.band > *:last-child,
.band .wrap > *:last-child,
.band .split-body > *:last-child { margin-bottom: 0; }
.band > .figure:last-child { margin-bottom: 0; }
.band > .figure:first-child { margin-top: 0; }
/* The first band now follows the dark hero, so it wants air rather than less. */
/* The contact page runs its form in a bare .wrap rather than a band, so it
   needs the same breathing room under the hero that a band gets. */
.hero-band + .band,
.hero-band + .wrap {
  padding-top: clamp(30px, 3vw, 44px);
}

/* --- Cards: the five areas ----------------------------------------------- */

.cards {
  max-width: var(--figure);
  margin: 2.4rem auto 0.6rem;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* A set of four sits 3 + 1 in the three-column grid, which reads as a row with
   a corner missing. Two columns keeps it square. */
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* An odd count leaves the last card alone beside an empty cell; let it run
   the full width instead, which reads as the set closing rather than a gap. */
.cards--2 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card {
  position: relative;                /* the stretched link anchors to this */
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  padding: 26px 28px 24px;
  /* Column flow pushes the link to the foot, so cards in a row line up
     whatever the length of their copy. */
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}
/* Where a set ends short of a full row the last card takes the brass rule, so
   it does not read as four-plus-a-spare. A set closed by the offer card below
   is already a full row, and the brass belongs to the offer instead. */
.card:last-child { border-top-color: var(--accent); }
/* Hover deepens the three plain sides to the green and leaves the top rule
   alone, so a brass-topped card stays brass-topped. Written as three sides
   rather than the border-color shorthand, which would take the top with it.
   Guarded on (hover: hover) so a tap on a phone cannot leave a card stuck in
   the hovered state. */
@media (hover: hover) {
  .card:hover {
    border-left-color: var(--accent);
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
  }
}

/* The keyboard focus ring is drawn on the card, not on the invisible overlay.
   Brass, so it never reads as the green hover state. */
.card:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.card:focus-within .card-more a { outline: none; }

.card-mark {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  color: var(--accent);
  flex: none;
}

.card-more {
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 0.9rem;
  font-weight: 600;
  max-width: none;
}
.card-more a {
  text-decoration-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
/* The whole card is clickable, but not by stretching the link over the card:
   an ::after overlay sits above the words and swallows the drag, so nobody can
   select or copy the copy. site.js forwards a click on the card to the link
   instead, and bails out when the pointer actually made a text selection. With
   JavaScript off the link itself still works — only the extra hit area goes. */
.js .card-linked { cursor: pointer; }
.js .card-linked h3,
.js .card-linked p { cursor: auto; }
.card h3 {
  margin: 0 0 0.5em;
  font-size: 1.16rem;
  line-height: 1.25;
}
.card h3 a { text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.card p {
  margin: 0;
  max-width: 56ch;          /* keeps the full-width fifth card on the measure */
  font-size: 0.96rem;
  line-height: 1.65;
}
/* A card that carries more than one paragraph needs the break between them. */
.card p + p { margin-top: 0.9em; }
/* Written as p.card-more so it outweighs the .card p reset above and the auto
   margin survives: that is what holds the links on one line across a row. */
.card p.card-more { margin: auto 0 0; }
.band--wash .card { background: var(--bg); }

/* The diagnostic is an offer, not a service. It keeps the padding, the type
   sizes and the row height of its neighbours, and separates itself on the fill:
   the wash ground rather than the card ground, so on a wash band the card reads
   as part of the section it sits in while the services read as laid on top of
   it. Brass throughout, and no mark — the five services each have one, and the
   absence is what keeps the two kinds legible at a glance. */
.card--offer,
.band--wash .card--offer {
  background: var(--bg-sunk);
  border-color: var(--rule);
  border-top-color: var(--accent);
}
.card--offer .card-more a {
  text-decoration-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
/* Restated here because the shorthand above sets all four sides and sits after
   .card:hover, so it would otherwise win. The offer card deepens to the same
   green as the rest — only the top rule keeps its own colour. */
@media (hover: hover) {
  .card--offer:hover {
    border-left-color: var(--accent);
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
  }
}

/* The link at the foot answers to the card, not just to itself, so the whole
   card reads as one target: hovering anywhere brings its underline up to full
   strength and doubles it. The offer card answers in brass. */
.card:hover .card-more a,
.card .card-more a:hover {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.card--offer:hover .card-more a,
.card--offer .card-more a:hover {
  text-decoration-color: var(--accent-2-ink);
}

/* The lift is the one thing here that moves, so it is the one thing gated on
   reduced motion. Two pixels and a soft shadow — enough to register, not
   enough to bounce. The colour transitions above run either way. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card {
    transition: border-color 0.15s ease, transform 0.15s ease,
                box-shadow 0.15s ease;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -10px rgba(31, 59, 44, 0.35);
  }
}

/* --- Pull quotes ---------------------------------------------------------- */
/* Switched off in build.py, but the treatment is here: the darker gold rather
   than the green, so a quote never competes with a section heading. */
.pull {
  border-left: 2px solid var(--accent-2-ink);
  padding-left: clamp(18px, 2vw, 28px);
}

.pull {
  margin: 3.4rem 0 3.2rem;
  max-width: 34ch;
}
.pull .pull-rule {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 22px;
}
.pull p {
  margin: 0;
  max-width: none;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + 1.15vw, 2.05rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* --- Portrait ------------------------------------------------------------- */

.portrait {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* Set per photograph by build.py from the file's real dimensions. Used on a
     narrow screen, where the photograph sits above the text and nothing is
     cropped. */
  aspect-ratio: var(--portrait-ratio, 17 / 20);
  object-fit: cover;
  object-position: center 22%;
}

/* Side by side, the photograph is cropped to whatever height the text turns
   out to be, so the two columns finish level on every page. The crop is taken
   from the top and bottom around the face, never from the sides. */
@media (min-width: 901px) {   /* matches where .split becomes two columns */
  .split .portrait { height: 100%; }
  .split .portrait img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 300px;
  }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 56px);
  /* stretch, not start: the photograph takes its height from the text beside
     it. Sticky is gone with it — an item that fills its row has nowhere to
     stick to. */
  align-items: stretch;
}
.split-body > *:first-child { margin-top: 0; }

/* --- Header / nav -------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The logo: the name between two rules. The upper rule is the wordmark's own
   colour so the two always match; the lower one is brass, a quarter of the
   width, flush right. The letterspacing is the design — it is what makes the
   name read as a mark rather than as a line of text. */
.wordmark {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  border-top: 2px solid currentColor;
}
.wordmark-text {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  /* The trailing letterspace is real space, so the padding is nudged left to
     put the name optically in the centre of the two rules. */
  padding: 0.55em 0 0.5em 0.19em;
}
.wordmark::after {
  content: "";
  display: block;
  height: 2px;
  width: 25%;
  margin-left: auto;
  background: var(--accent-2-ink);
}
.wordmark:hover { color: var(--ink); }
@media (max-width: 460px) {
  /* Below this the lockup would crowd the menu button. */
  .wordmark-text { font-size: 0.8rem; letter-spacing: 0.14em; }
}
@media (max-width: 380px) {
  /* On the narrowest phones the wordmark and the menu button no longer both
     fit on the line — the header was running 33px past the viewport. The
     lockup steps down once more and the space around it closes up. */
  .wordmark-text { font-size: 0.72rem; letter-spacing: 0.1em; }
  .nav { gap: 12px; }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list > li { margin: 0; position: relative; }

.nav-link, .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 3px;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover, .nav-toggle:hover { background: var(--accent-wash); color: var(--accent); }
.nav-link[aria-current="page"] { color: var(--accent); font-weight: 600; }

.nav-toggle .chev {
  width: 9px; height: 9px;
  transition: transform 0.18s ease;
}
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-cta { margin-left: 8px; padding: 10px 20px; font-size: 0.9rem; }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 268px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 12px 32px -12px rgba(26, 27, 23, 0.22);
  padding: 8px;
  margin: 0;
  list-style: none;
  display: none;
}
.nav-item-has-menu[data-open="true"] .dropdown { display: block; }
/* The panel opens 6px below the button and reaches further left than the button
   does, so a pointer travelling diagonally from "Services" down to the first
   item crosses a band that belongs to neither — the menu closes under the
   cursor before it arrives. This bridges the gap: transparent, invisible, and a
   descendant of the panel, so hovering it still counts as being inside the
   item. Same problem and same fix on the sub-menu, which opens to one side. */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 8px;
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 8px 12px;
  font-size: 0.91rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 3px;
}
.dropdown a:hover { background: var(--accent-wash); color: var(--accent); }
.dropdown a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Sub-menu: the demand-generation channels under Digital Marketing. The parent
   stays a link to its own page; the chevron beside it opens the flyout. */
.dropdown .has-sub {
  position: relative;
  display: flex;
  align-items: center;
}
.dropdown .has-sub > a { flex: 1 1 auto; }
.sub-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 3px;
  color: var(--muted);
  cursor: pointer;
}
.sub-toggle:hover { background: var(--accent-wash); color: var(--accent); }
.sub-toggle .chev {
  width: 9px;
  height: 9px;
  transform: rotate(-90deg);
  transition: transform 0.16s ease;
}

.subdropdown {
  position: absolute;
  top: -8px;
  left: calc(100% + 6px);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 12px 32px -12px rgba(26, 27, 23, 0.22);
  padding: 8px;
  margin: 0;
  list-style: none;
  display: none;
}
.subdropdown::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 8px;
}
/* If it would run off the right edge, it opens to the left instead. */
.dropdown .has-sub.flip .subdropdown { left: auto; right: calc(100% + 6px); }
.dropdown .has-sub.flip .subdropdown::before { right: auto; left: 100%; }
.dropdown .has-sub[data-open="true"] > .subdropdown,
.dropdown .has-sub:hover > .subdropdown,
.dropdown .has-sub:focus-within > .subdropdown { display: block; }
.subdropdown li { margin: 0; }
.subdropdown a {
  display: block;
  padding: 8px 12px;
  font-size: 0.91rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 3px;
}
.subdropdown a:hover { background: var(--accent-wash); color: var(--accent); }
.subdropdown a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.nav-burger { display: none; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--bg-sunk);
  padding: 56px 0 40px;
}
.footer-grid {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-grid h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; font-size: 0.93rem; }
.footer-grid a { color: var(--text); text-decoration-color: var(--rule-strong); }
.footer-grid a:hover { color: var(--accent); }
.footer-blurb { font-size: 0.93rem; color: var(--muted); max-width: 34ch; margin: 0 0 1em; }
/* .footer-grid a sets a colour, so the logo has to reclaim its own; the
   font-size now lives on the inner span. */
.footer-blurb .wordmark { color: var(--accent); margin-bottom: 14px; }
.footer-blurb .wordmark:hover { color: var(--ink); }
.footer-blurb .wordmark-text { font-size: 0.88rem; }

.footer-base {
  max-width: var(--wide);
  margin: 40px auto 0;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- Home hero ----------------------------------------------------------- */

/* --- The hero band ------------------------------------------------------- */
/* Every page opens on the accent, full bleed, so the introduction is visibly a
   different thing from the argument below it. Two moves and no more: the
   five-areas motif bleeding off the right edge as texture, and a brass hairline
   at the base. No gradient, no imagery, nothing that moves. */

.hero-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green-900);
  color: var(--on-dark);
}
/* One soft teal glow, low and to the right, behind everything. It is the only
   thing in the hero besides type — no pattern, no wash across the whole band. */
.hero-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 175, 154, 0.24) 0, transparent 68%);
  pointer-events: none;
}

.hero {
  padding-block: clamp(48px, 6vw, 76px) clamp(54px, 6.6vw, 84px);
  position: relative;
}
/* The hero reads as one column, narrower than the frame, so the headline breaks
   where it should rather than wherever the container ends. */
.hero-col {
  position: relative;
  max-width: 760px;
}

/* Reversed-out contents. Every value is measured against the green. */
.hero-band .eyebrow,
.hero-band .crumb {
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  font-weight: 500;
}
.hero-band .crumb a { color: var(--gold); text-decoration-color: rgba(217, 179, 108, 0.5); }
.hero-band .crumb a:hover { text-decoration-color: var(--gold); }

.hero-band h1:not(.eyebrow),
.hero-band .hero-title {
  color: var(--cream);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.125rem, 1.15rem + 3.9vw, 3.875rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 15ch;
  text-wrap: balance;
  margin: 0;
}
/* The one accented word. Gold and italic, and nothing else in the hero is. */
.hero-band h1:not(.eyebrow) em,
.hero-band .hero-title em {
  font-style: italic;
  color: var(--gold);
}
.hero-band .lede {
  color: var(--on-dark);
  font-size: 17px;
  line-height: 1.75;
  max-width: 660px;
  text-wrap: pretty;
  margin: 0;
}
.hero-band .cta-sub {
  color: var(--on-dark-quiet);
  font-size: 14px;
  margin: 30px 0 0;
}
.hero-band a:not(.cta) { color: var(--cream); }

/* Gold into teal into nothing — the same rule that divides sections below. */
.hero-band .rule {
  display: block;
  height: 3px;
  width: min(230px, 60%);
  margin: 34px 0 36px;
  background: linear-gradient(90deg, var(--gold), var(--teal), rgba(111, 175, 154, 0));
}

/* The one primary call to action on the page. Green on gold, never cream. */
.hero-band .cta {
  background: var(--gold);
  color: var(--green-900);
  border-color: var(--gold);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  padding: 17px 30px;
  border-radius: 2px;
  margin-top: 30px;
}
.hero-band .cta-sub + .cta { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .hero-band .cta { transition: none; }
}
.hero-band .cta:active { background: var(--cream); border-color: var(--cream); }
@media (hover: hover) {
  .hero-band .cta:hover {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--green-900);
  }
}
.hero-band :focus-visible { outline-color: var(--gold); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 1.9em 0 0.6em;
}
.hero-actions .cta, .hero-actions .btn { margin: 0; }

/* --- Stat strip ---------------------------------------------------------- */

.strip {
  border-block: 1px solid var(--rule);
  background: var(--surface);
  margin: 3.5rem 0;
}
.strip-inner {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 34px var(--gutter);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.strip-item { border-left: 2px solid var(--accent); padding-left: 14px; }
.strip-item .k {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.strip-item .v { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }

/* --- Forms --------------------------------------------------------------- */

.form { margin: 2.5em 0 1em; }
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: 0.005em;
}
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; margin-top: 3px; }
.field .req { color: var(--accent); font-weight: 600; }

.field input, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:hover, .field textarea:hover { border-color: var(--muted); }
/* The green border and glow confirm the active field for a mouse user; the
   outline is left alone so a keyboard user still gets the brass ring every
   other control has. */
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.field textarea { min-height: 150px; resize: vertical; }

/* The booking calendar. A third-party frame cannot be styled from here, so the
   job is to give it a clean, correctly sized hole to sit in: the prose measure,
   the same edge as a card, and a height that leaves the calendar itself no
   reason to scroll on a phone. */
.scheduler {
  max-width: var(--figure);
  margin: 2em 0 1.4em;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
}
.scheduler iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}
@media (max-width: 700px) {
  .scheduler iframe { height: 900px; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin: 1.4em 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  font-size: 0.97rem;
}
.form-status[hidden] { display: none; }
.form-status.is-error { border-left-color: #8B2E2E; background: #FBF0EE; }
.form-status p:last-child { margin-bottom: 0; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.form-foot .cta { margin: 0; }
.form-foot button[disabled] { opacity: 0.6; cursor: progress; }
.form-note { font-size: 0.87rem; color: var(--muted); margin: 0; }

/* --- 404 ----------------------------------------------------------------- */

.center-page { text-align: center; padding-block: clamp(72px, 11vw, 140px) 40px; }
.center-page .rule { margin-inline: auto; }
.center-page .hero-actions { justify-content: center; }

/* --- Motion -------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .strip-inner { grid-template-columns: repeat(2, 1fr); gap: 22px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-blurb { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .split .portrait { max-width: 420px; height: auto; }
}

@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 780px) {
  .cards { gap: 16px; }
  .card:last-child { grid-column: auto; }
}

@media (max-width: 860px) {
  /* No hover on a phone: the sub-menu stacks under its parent, indented, and
     opens only from the chevron. */
  .subdropdown {
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    border-left: 2px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    margin: 2px 0 6px 14px;
    padding: 0 0 0 8px;
  }
  .dropdown .has-sub { flex-wrap: wrap; }
  .dropdown .has-sub > .subdropdown { flex: 1 0 calc(100% - 14px); }
  .dropdown .has-sub:hover > .subdropdown,
  .dropdown .has-sub:focus-within > .subdropdown { display: none; }
  .dropdown .has-sub[data-open="true"] > .subdropdown { display: block; }
  .dropdown .has-sub[data-open="true"] .sub-toggle .chev { transform: rotate(0deg); }
  .sub-toggle { width: 38px; height: 38px; }

  .nav-burger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    padding: 8px 13px;
    font: 500 0.88rem var(--sans);
    color: var(--ink);
    cursor: pointer;
  }
  .nav-burger:hover { border-color: var(--accent); color: var(--accent); }
  .nav-burger .bars { display: block; width: 15px; height: 9px; position: relative; }
  .nav-burger .bars::before, .nav-burger .bars::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  }
  .nav-burger .bars::before { top: 0; }
  .nav-burger .bars::after { bottom: 0; }

  .nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 30px -22px rgba(26, 27, 23, 0.35);
    padding: 10px var(--gutter) 22px;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
  .site-header[data-menu="open"] .nav-panel { display: block; }
  .site-header { position: sticky; }
  .nav { position: relative; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-top: 1px solid var(--rule); }
  .nav-link, .nav-toggle { padding: 13px 2px; width: 100%; justify-content: space-between; font-size: 1rem; }
  .nav-toggle { text-align: left; }
  .dropdown {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 10px 14px;
    min-width: 0;
    border-left: 2px solid var(--rule);
    margin-left: 2px;
  }
  .nav-item-has-menu[data-open="true"] .dropdown { display: block; }
  .dropdown a { padding: 9px 10px; font-size: 0.95rem; }
  .nav-cta { margin: 18px 0 0; display: block; text-align: center; padding: 14px 20px; font-size: 0.95rem; }
}

@media (min-width: 861px) {
  .nav-panel { display: block !important; }
  .nav-burger { display: none; }
  /* Bridges the 6px gap so the menu survives the pointer crossing it. */
  .nav-item-has-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
  }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  body { font-size: 1.02rem; }
  .figure-inner { padding: 18px 14px 16px; }
  .figure { margin: 2.2rem auto; }
  .strip-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .note { padding: 16px 18px; }
  .band { padding-block: 26px; }
  .card { padding: 22px 22px 24px; }
  .pull { margin: 2.6rem 0 2.4rem; max-width: none; }
  .pull .pull-rule { margin-bottom: 16px; }
}

@media print {
  .site-header, .site-footer, .cta, .btn { display: none; }
  body { background: #fff; }
}

/* --- Legal pages --------------------------------------------------------- */
/* Privacy and terms. Prose only: no bands, no cards, a narrower measure than
   the marketing pages because the clauses are read rather than scanned. */

.legal { max-width: 46rem; }
.legal h2 { margin-top: 2.2em; font-size: 1.35rem; }
.legal p { margin: 0 0 1.1em; }
.legal .spec { margin-bottom: 1.6em; }

.legal-meta {
  margin: 0 0 2.4em;
  padding-left: 16px;
  border-left: 2px solid var(--rule-strong);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Wide content scrolls inside its own box rather than pushing the page. */
.table-scroll { overflow-x: auto; margin: 0 0 1.6em; }

.legal-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.legal-table th,
.legal-table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.legal-table thead th {
  border-bottom: 2px solid var(--accent);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* --- Cookie consent ------------------------------------------------------ */
/* A slim bar, not a modal: nothing is dimmed, nothing is trapped, and the page
   stays usable while it is open. Injected by script only when no choice has
   been recorded, so it costs returning visitors nothing at all. */

.consent {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--green-950);
  border-top: 2px solid var(--gold);
  color: var(--on-dark);
  font-size: 0.86rem;
  line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom, 0);
  animation: consent-in 220ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}
@keyframes consent-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.consent-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.consent p { margin: 0; flex: 1 1 20rem; }
.consent a { color: var(--gold); }
.consent a:hover { color: var(--cream); }

.consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.consent button {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--gold);
  color: var(--green-900);
}
.consent button.is-ghost {
  background: transparent;
  border-color: rgba(245, 245, 238, 0.4);
  color: var(--cream);
}
@media (hover: hover) {
  .consent button:hover { background: var(--cream); }
  .consent button.is-ghost:hover {
    background: rgba(245, 245, 238, 0.1);
    border-color: var(--cream);
  }
}
.consent button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .consent { font-size: 0.82rem; }
  .consent-inner { padding: 10px var(--gutter); gap: 8px 12px; }
  .consent p { flex: 1 1 100%; }
  .consent-actions { flex: 1 1 auto; }
  .consent button { flex: 1 1 auto; padding: 9px 12px; }
}