/* ==========================================================================
   Float and Fly Guide Service — shared stylesheet
   Hand-written CSS only. No framework, no CDN.

   Palettes: :root = green (V1) · [data-theme="blue"] = V2 · [data-theme="dark"] = V3
   Derived from the client's badge logo (charcoal-green ink, olive, river blue)
   and the structural DNA of the three reference guide sites.
   ========================================================================== */

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

:root {
  /* palette — V1 GREEN (default, used by all inner pages) */
  --bg:          #ffffff;
  --paper:       #f5f2e9;   /* warm cream, from the logo's badge field */
  --paper-2:     #ebe6d8;
  --ink:         #15231d;   /* near-black green, the logo's line colour */
  --fg:          #1a2420;
  --muted:       #5b6b63;
  --brand:       #2f6b4f;
  --brand-dark:  #1d4433;
  --brand-tint:  #e6efe9;
  --accent:      #7d8f3f;   /* olive, from the logo's lettering */
  --on-brand:    #ffffff;
  --on-accent:   #15231d;
  --line:        #d8d3c4;
  --line-soft:   #e8e4d9;

  /* type */
  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-display:   800;
  --display-tt:   none;
  --display-ls:   -0.015em;

  /* fluid type scale */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --t-xl:   clamp(1.3rem, 0.7vw + 1.13rem, 1.6rem);
  --t-2xl:  clamp(1.55rem, 1.3vw + 1.25rem, 2.1rem);
  --t-3xl:  clamp(1.9rem, 2.2vw + 1.4rem, 2.9rem);
  --t-4xl:  clamp(2.25rem, 3.6vw + 1.4rem, 4rem);

  /* space */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 4rem;
  --s-9: 5.5rem;   --s-10: 7.5rem;

  /* layout */
  --container: 1180px;
  --container-wide: 1400px;
  --container-prose: 720px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow:    0 1px 2px rgba(21,35,29,.06), 0 4px 16px rgba(21,35,29,.07);
  --shadow-lg: 0 2px 4px rgba(21,35,29,.07), 0 12px 40px rgba(21,35,29,.13);
  --header-h: 76px;

  /* rgb triplet for photo-band scrims (used via rgba(var(--scrim-rgb), a)) */
  --scrim-rgb: 10, 18, 14;        /* green-black */
}

/* ---------- V2 BLUE ---------- */
[data-theme="blue"] {
  --bg:          #ffffff;
  --paper:       #eef4f9;
  --paper-2:     #dde8f1;
  --ink:         #0e1c2b;
  --fg:          #16273a;
  --muted:       #556b80;
  --brand:       #1d5f96;
  --brand-dark:  #133f66;
  --brand-tint:  #e4eef6;
  --accent:      #b96a1f;
  --on-brand:    #ffffff;
  --on-accent:   #ffffff;
  --line:        #cbd9e5;
  --line-soft:   #e2ebf2;

  --scrim-rgb: 9, 18, 28;         /* blue-black */

  --font-display: "Jost", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-display:   600;
  --display-tt:   none;
  --display-ls:   -0.02em;
  --radius: 2px;
  --radius-lg: 4px;
  --shadow:    0 1px 2px rgba(14,28,43,.06), 0 4px 16px rgba(14,28,43,.08);
  --shadow-lg: 0 2px 4px rgba(14,28,43,.08), 0 14px 44px rgba(14,28,43,.14);
}

/* ---------- V3 BLACK & ORANGE ---------- */
[data-theme="dark"] {
  --bg:          #0d0d0f;
  --paper:       #16171a;
  --paper-2:     #1f2125;
  --ink:         #f5f5f3;
  --fg:          #ececea;
  --muted:       #a6a6a2;
  --brand:       #f26b1d;
  --brand-dark:  #c4501a;
  --brand-tint:  #241a13;
  --accent:      #ffb547;
  --on-brand:    #12100e;   /* dark text on orange — white would fail AA */
  --on-accent:   #12100e;
  --line:        #33343a;
  --line-soft:   #23252a;

  --scrim-rgb: 8, 8, 9;           /* near-black */

  --font-display: "Archivo", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-display:   800;
  --display-tt:   uppercase;
  --display-ls:   0.005em;
  --radius: 2px;
  --radius-lg: 3px;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 4px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6);
}

/* ---------- 2. Reset & base --------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: var(--display-tt);
  letter-spacing: var(--display-ls);
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); line-height: 1.25; }
h4 { font-size: var(--t-lg); line-height: 1.3; }

p  { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }
[data-theme="dark"] a:hover { color: var(--accent); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; color: var(--ink); }
small { font-size: var(--t-xs); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: var(--on-brand);
  padding: var(--s-3) var(--s-5); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ---------- 3. Layout helpers ------------------------------------------- */

.container   { width: 100%; max-width: var(--container);      margin-inline: auto; padding-inline: 16px; }
.container-w { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: 16px; }
.prose       { max-width: var(--container-prose); }
.prose > * + h2 { margin-top: var(--s-7); }
.prose > * + h3 { margin-top: var(--s-6); }

@media (min-width: 720px) {
  .container, .container-w { padding-inline: 32px; }
}

.section    { padding-block: var(--s-8); }
.section-lg { padding-block: var(--s-9); }
.section-sm { padding-block: var(--s-7); }
@media (min-width: 900px) {
  .section    { padding-block: var(--s-9); }
  .section-lg { padding-block: var(--s-10); }
}

.bg-paper  { background: var(--paper); }
.bg-ink    { background: var(--ink);  color: var(--bg); }
.bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }
[data-theme="dark"] .bg-ink { background: var(--paper-2); color: var(--fg); }
[data-theme="dark"] .bg-ink h2, [data-theme="dark"] .bg-ink h3 { color: var(--ink); }
.bg-brand  { background: var(--brand); color: var(--on-brand); }
.bg-brand h2, .bg-brand h3 { color: var(--on-brand); }

.center  { text-align: center; }
.mx-auto { margin-inline: auto; }

/* section heading block */
.sect-head { max-width: 680px; margin-bottom: var(--s-7); }
.sect-head.center { margin-inline: auto; }
.sect-head p { color: var(--muted); font-size: var(--t-lg); margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-3);
}
.bg-ink .eyebrow, .bg-brand .eyebrow { color: var(--accent); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.btn-primary   { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }

.btn-accent    { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-accent:hover { filter: brightness(.92); color: var(--on-accent); }

.btn-outline   { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: var(--on-brand); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-lg { font-size: var(--t-base); padding: 1.1rem 2.25rem; }
.btn-sm { font-size: var(--t-xs); padding: 0.7rem 1.25rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row.center { justify-content: center; }

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

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: visible;            /* lets the badge overhang into the hero */
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; flex-shrink: 0; }

/* The badge straddles the header/hero boundary rather than being clipped by the
   header. The negative bottom margin keeps the header its original height while
   the logo hangs below it, so nothing above is cut off. It always carries the
   cream field it was drawn on — the artwork is dark ink on transparent and would
   otherwise vanish against a dark hero photo. */
.brand img {
  width: 104px; height: 104px;
  margin-bottom: -30px;
  position: relative; z-index: 2;
  background: #f5f2e9;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 2px 12px rgba(10, 18, 14, .22);
}

@media (max-width: 819px) {
  .brand img { width: 78px; height: 78px; margin-bottom: -20px; padding: 3px; }
  .brand { gap: 0.6rem; }
}
@media (max-width: 420px) {
  .brand img { width: 64px; height: 64px; margin-bottom: -16px; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.brand-sub {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 9px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu { list-style: none; margin: 0; padding: 0; }
.nav-menu > li { display: flex; align-items: center; }
.nav-menu > li > a,
.nav-menu > li > .nav-parent {
  display: flex; align-items: center; gap: 0.3em;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.25;                 /* identical on <a> and <button> */
  color: var(--fg); text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  margin: 0; padding: 0.6rem 0;
}
.nav-menu a[aria-current="page"] { color: var(--brand); }
.nav-menu > li > a:hover, .nav-menu > li > .nav-parent:hover { color: var(--brand); }
.nav-parent::after {
  content: ""; width: 0.4em; height: 0.4em; margin-left: 0.15em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.nav-cta { flex-shrink: 0; }

/* mobile first: drawer */
@media (max-width: 1023px) {
  .nav-menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: var(--s-3) 16px var(--s-5);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-header.is-open .nav-menu { display: block; }
  .nav-menu > li { border-bottom: 1px solid var(--line-soft); }
  .nav-menu > li:last-child { border-bottom: 0; }
  .nav-menu > li > a, .nav-menu > li > .nav-parent {
    width: 100%; padding: 0.9rem 0; justify-content: space-between;
  }
  .nav-sub { list-style: none; margin: 0 0 var(--s-3); padding: 0 0 0 var(--s-4); display: none; }
  .nav-item.is-open .nav-sub { display: block; }
  .nav-item.is-open .nav-parent::after { transform: rotate(225deg) translateY(-2px); }
  .nav-sub a {
    display: block; padding: 0.55rem 0; font-size: var(--t-sm);
    color: var(--muted); text-decoration: none;
  }
  .nav-sub a:hover { color: var(--brand); }
  .nav-cta { display: none; }
}

/* desktop: inline bar with hover dropdowns */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-menu { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.7rem); }
  .nav-menu > li { position: relative; }
  .nav-sub {
    position: absolute; top: 100%; left: -0.9rem;
    list-style: none; margin: 0; padding: var(--s-2) 0;
    min-width: 258px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .nav-item:hover .nav-sub,
  .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-sub a {
    display: block; padding: 0.6rem 1.1rem;
    font-size: var(--t-sm); color: var(--fg); text-decoration: none;
  }
  .nav-sub a:hover { background: var(--brand-tint); color: var(--brand-dark); }
  [data-theme="dark"] .nav-sub a:hover { color: var(--accent); }
  .nav-sub .sub-note {
    display: block; padding: 0.35rem 1.1rem var(--s-2);
    font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); font-weight: 650;
  }
}

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

.hero { position: relative; isolation: isolate; color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,18,14,.62) 0%, rgba(10,18,14,.46) 45%, rgba(10,18,14,.78) 100%);
}
.hero-inner {
  padding-block: clamp(3.5rem, 11vw, 8.5rem);
  max-width: 800px;
}
.hero h1 { color: #fff; margin-bottom: var(--s-5); }
.hero-lede {
  font-size: var(--t-lg);
  color: rgba(255,255,255,.93);
  max-width: 60ch;
  margin-bottom: var(--s-5);
}
.hero-eyebrow {
  display: inline-block;
  font-size: var(--t-xs); font-weight: 650;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  margin-bottom: var(--s-5);
}
/* The three things Sasha actually sells. Sits directly above the buttons, and
   reads as chips so it stays legible over any hero photograph. */
.hero-meta {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 var(--s-6);
  padding: 0;
}
.hero-meta:last-child { margin-bottom: 0; }   /* chips are now the last thing in the hero */
.hero-meta li {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.6rem 1.05rem;
  border: 1.5px solid rgba(255,255,255,.62);
  border-radius: var(--radius);
  background: rgba(10, 18, 14, .42);
}
[data-theme="dark"] .hero-meta li {
  border-color: var(--brand);
  color: var(--accent);
  background: rgba(8, 8, 9, .55);
}
@media (min-width: 720px) {
  .hero-meta li { font-size: var(--t-base); padding: 0.65rem 1.25rem; }
}

/* page hero (inner pages) */
.page-hero { position: relative; isolation: isolate; color: #fff; }
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,18,14,.66), rgba(10,18,14,.74));
}
.page-hero-inner { padding-block: clamp(2.75rem, 7vw, 5rem); max-width: 760px; }
.page-hero h1 { color: #fff; font-size: var(--t-3xl); margin-bottom: var(--s-3); }
.page-hero p { color: rgba(255,255,255,.9); font-size: var(--t-lg); margin-bottom: 0; }

.breadcrumb { font-size: var(--t-xs); margin-bottom: var(--s-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; color: rgba(255,255,255,.7); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: .6; }
.breadcrumb a { color: rgba(255,255,255,.88); }
.breadcrumb [aria-current] { color: #fff; font-weight: 600; }

/* ---------- 7. Grids & cards -------------------------------------------- */

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--s-6); }
}

.card {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
[data-theme="dark"] .card { background: var(--paper); }
.card-link:hover, .card-link:focus-within {
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) { .card-link:hover { transform: none; } }

.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-link:hover .card-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .card-link:hover .card-media img { transform: none; } }

.card-body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: var(--s-2); }
.card-body h3 a { color: inherit; text-decoration: none; }
.card-body h3 a:hover { color: var(--brand); }
.card-body p { color: var(--muted); font-size: var(--t-sm); }
.card-tag {
  align-self: flex-start;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--brand-dark); background: var(--brand-tint);
  padding: 0.28rem 0.6rem; border-radius: 999px;
  margin-bottom: var(--s-3);
}
[data-theme="dark"] .card-tag { color: var(--accent); }
.card-more {
  margin-top: auto; padding-top: var(--s-4);
  font-size: var(--t-sm); font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--brand);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.card-more::after { content: "→"; transition: transform .2s ease; }
.card-link:hover .card-more::after { transform: translateX(4px); }

/* simple feature block (icon-free, text only) */
.feature {
  padding: var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
[data-theme="dark"] .feature { background: var(--paper); }
.feature h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.feature p { color: var(--muted); font-size: var(--t-sm); margin-bottom: 0; }
.feature-num {
  display: block;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--t-xl); color: var(--accent);
  margin-bottom: var(--s-2);
}

/* ---------- 8. Split (image + text) ------------------------------------- */

.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split-wide-text { grid-template-columns: 1.15fr 1fr; }
  .split.reverse > :first-child { order: 2; }
}
.split-media img { border-radius: var(--radius-lg); width: 100%; }
.split-media figcaption {
  font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-2);
}

/* ---------- 9. Rates ---------------------------------------------------- */

.rate-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .rate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rate-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.rate-card {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
[data-theme="dark"] .rate-card { background: var(--paper); }
.rate-card.featured { border-top-color: var(--accent); box-shadow: var(--shadow); }
.rate-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-1); }
.rate-hours {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-5);
}
.rate-lines { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.rate-lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  font-size: var(--t-sm);
}
.rate-lines li:last-child { border-bottom: 0; }
.rate-lines .rate-who { color: var(--muted); }
.rate-lines .rate-amt {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--t-xl); color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap;
}
.rate-card .btn { margin-top: auto; }
.rate-note {
  font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-3); margin-bottom: 0;
}

/* included / bring lists */
.check-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.check-list li {
  position: relative; padding-left: 1.75rem; margin-bottom: var(--s-3);
  font-size: var(--t-sm);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.7rem; height: 0.4rem;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
[data-theme="dark"] .check-list li::before { border-color: var(--accent); }

/* ---------- 10. Season chart -------------------------------------------- */

.season-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.season {
  width: 100%; min-width: 660px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.season caption {
  text-align: left; font-size: var(--t-xs); color: var(--muted);
  padding-bottom: var(--s-3);
}
.season th, .season td {
  padding: 0.6rem 0.3rem; text-align: center; border-bottom: 1px solid var(--line-soft);
}
.season thead th {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.season tbody th {
  text-align: left; padding-right: var(--s-4); white-space: nowrap;
  font-weight: 650; color: var(--ink);
}
.season .s-cell { padding: 0.35rem 0.2rem; }
.season .s-bar { display: block; height: 22px; border-radius: 2px; background: var(--line-soft); }
.season .s-bar.peak  { background: var(--brand); }
.season .s-bar.good  { background: var(--accent); opacity: .85; }
.season .s-bar.some  { background: var(--brand); opacity: .3; }
.season-key {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-4); font-size: var(--t-xs); color: var(--muted);
}
.season-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.season-key i { width: 1.1rem; height: 0.7rem; border-radius: 2px; display: inline-block; }

/* ---------- 11. FAQ accordion ------------------------------------------- */

.faq { max-width: 820px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--s-2) 0;
}
.faq details[open] { padding-bottom: var(--s-4); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--t-lg); line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; margin-top: 0.4em;
  width: 0.72rem; height: 0.72rem;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq summary:hover { color: var(--brand); }
.faq .faq-a { color: var(--muted); font-size: var(--t-base); }
.faq .faq-a > *:last-child { margin-bottom: 0; }

/* ---------- 12. Gallery ------------------------------------------------- */

.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (min-width: 1040px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); background: var(--paper-2);
}

/* ---------- 13. Quote / testimonial ------------------------------------- */

.quote {
  max-width: 760px; margin-inline: auto; text-align: center;
}
.quote blockquote {
  margin: 0 0 var(--s-5);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-2xl); line-height: 1.35; color: var(--ink);
  text-transform: none; letter-spacing: -0.01em;
}
.bg-ink .quote blockquote { color: #fff; }
.quote cite {
  font-style: normal; font-size: var(--t-sm); font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ---------- 14. CTA band ------------------------------------------------ */

.cta-band { position: relative; isolation: isolate; color: #fff; text-align: center; }
.cta-band-media { position: absolute; inset: 0; z-index: -2; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,18,14,.74), rgba(10,18,14,.82));
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); font-size: var(--t-lg); max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: var(--s-6); }

/* ---------- 14b. Photo-backed section ----------------------------------- */
/* A full-width section with a photograph behind the copy. The gradient is
   weighted to the left, where the prose sits, so the text stays legible while
   the right-hand side of the photograph shows through. */

.section-media { position: relative; isolation: isolate; color: #fff; }
.section-media-bg { position: absolute; inset: 0; z-index: -2; }
.section-media-bg img { width: 100%; height: 100%; object-fit: cover; }

/* Default: copy on the left, so the scrim is heaviest on the left and lets the
   right of the photograph show through. */
.section-media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(var(--scrim-rgb), .90) 0%,
    rgba(var(--scrim-rgb), .80) 44%,
    rgba(var(--scrim-rgb), .46) 100%);
}
/* Modifier: centred copy, so the scrim has to be even across the width. */
.section-media.sm-center::after {
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .88) 0%,
    rgba(var(--scrim-rgb), .80) 50%,
    rgba(var(--scrim-rgb), .90) 100%);
}
@media (max-width: 899px) {
  /* no room for the photo to breathe beside the text on a phone */
  .section-media::after {
    background: linear-gradient(180deg, rgba(var(--scrim-rgb), .86), rgba(var(--scrim-rgb), .90));
  }
}
.section-media h2, .section-media h3, .section-media h4 { color: #fff; }
.section-media p,
.section-media .sect-head p { color: rgba(255, 255, 255, .92); }
.section-media .eyebrow { color: var(--accent); }
.section-media .eyebrow::after { background: var(--accent); }
.section-media a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.section-media a:hover { color: var(--accent); }
.section-media strong { color: #fff; }

/* ---------- 15. Forms --------------------------------------------------- */

.form-grid { display: grid; gap: var(--s-4); }
@media (min-width: 620px) { .form-grid .span-2 { grid-column: 1 / -1; } .form-grid { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--t-sm); font-weight: 650; color: var(--ink); }
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--t-base); color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  width: 100%;
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea { background: var(--paper-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: 2px solid var(--brand-tint); outline-offset: 0;
}
.field textarea { min-height: 150px; resize: vertical; }
.field-hint { font-size: var(--t-xs); color: var(--muted); }

.form-consent {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: var(--t-xs); color: var(--muted);
}
.form-consent input { width: auto; flex-shrink: 0; margin-top: 0.15rem; }

/* ---------- 16. Notices & callouts -------------------------------------- */

.callout {
  padding: var(--s-5);
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm);
}
.callout > *:last-child { margin-bottom: 0; }
.callout h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }

.notice-warn {
  padding: var(--s-4) var(--s-5);
  background: #fff8e6;
  border-left: 3px solid #c98a12;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm); color: #5c4310;
}
[data-theme="dark"] .notice-warn { background: #2a2113; color: #f0d9a8; }
.notice-warn > *:last-child { margin-bottom: 0; }

.info-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.info-table th, .info-table td {
  text-align: left; padding: 0.8rem 0.6rem;
  border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.info-table thead th {
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.info-table th[scope="row"] { font-weight: 650; color: var(--ink); white-space: nowrap; padding-right: var(--s-4); }
.table-wrap { overflow-x: auto; }

/* ---------- 17. Version picker (review only) ---------------------------- */
/* Sits in the footer on every page. The top banner it replaced was removed
   2026-09-17. Each card wears its own palette so the choice is readable before
   you click, which also means the card IS the swatch. Delete this whole
   section together with the markup at launch. */

.version-picker {
  margin-top: var(--s-8);
  padding: var(--s-6);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
}
.site-footer .version-picker h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-xl);
  letter-spacing: var(--display-ls);
  text-transform: none;
  color: #fff;
  margin-bottom: var(--s-2);
}
.version-picker > p {
  font-size: var(--t-base);
  color: rgba(255, 255, 255, .74);
  margin-bottom: var(--s-6);
  max-width: 62ch;
}

.version-list { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 680px) { .version-list { grid-template-columns: repeat(3, 1fr); } }

.vp-card {
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.35rem;
  padding: 1.35rem 1.4rem;
  border: 2px solid;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.vp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  filter: brightness(1.1);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .vp-card:hover { transform: none; } }

/* the three palettes, hardcoded so each card looks like its own version
   regardless of which theme's footer it is sitting in */
.vp-v1 { background: #2f6b4f; border-color: #4a8a6a; }
.vp-v2 { background: #1d5f96; border-color: #3a83c0; }
.vp-v3 { background: #0d0d0f; border-color: #f26b1d; }

.vp-num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: var(--display-ls);
  text-transform: none;
  color: #fff;
}
.vp-name {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.vp-v1 .vp-name { color: #bcd8c6; }
.vp-v2 .vp-name { color: #bdd8ee; }
.vp-v3 .vp-name { color: #ffb547; }

/* the one you are currently looking at - marked by main.js, not in the markup,
   because the footer has to stay identical across all pages */
.vp-card[aria-current="page"] {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}
/* The marker is a real element present on every card, so the footer markup
   stays identical across all pages; it is only revealed on the current one.
   Avoids CSS content escapes entirely - a mangled escape here previously
   wrote NUL bytes into this stylesheet. */
.vp-here {
  display: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-top: 0.15rem;
}
.vp-card[aria-current="page"] .vp-here { display: block; }

/* ---------- 18. Footer -------------------------------------------------- */

.site-footer {
  background: var(--ink); color: rgba(255,255,255,.78);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--t-sm);
}
[data-theme="dark"] .site-footer { background: var(--paper); }
.site-footer h3 {
  color: #fff; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: var(--s-4);
}
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--s-7); } }

/* The footer is dark in every theme, and the logo is dark ink on transparent —
   so it always needs the cream badge field behind it. */
.footer-brand img {
  width: 88px; height: 88px; margin-bottom: var(--s-4);
  background: #f5f2e9; border-radius: 50%; padding: 4px;
}
.footer-brand p { color: rgba(255,255,255,.68); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: var(--s-2); }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  font-size: var(--t-xs); color: rgba(255,255,255,.6);
}
.footer-bottom a { color: rgba(255,255,255,.72); }
.jagg-credit { font-size: var(--t-xs); }

.casl-note {
  font-size: 0.75rem; color: rgba(255,255,255,.55);
  max-width: 62ch; margin-top: var(--s-3);
}

/* ---------- 19. Scroll reveal ------------------------------------------- */
/* Driven by JS with setProperty(..., 'important') so prefers-reduced-motion
   never leaves an element stuck at opacity 0. See main.js. */

.reveal { opacity: 1; }

/* ---------- 20. Utilities ----------------------------------------------- */

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0 !important; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.text-muted { color: var(--muted); }
.lede { font-size: var(--t-lg); color: var(--muted); }
.nowrap { white-space: nowrap; }