/* ==========================================================================
   Float and Fly Guiding — 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);
  /* the V1 side-slide reveals start 48px off-axis; clip (not hidden) so
     position:sticky keeps working */
  overflow-x: clip;
}
@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 */
/* Nav drawer up to 1079px. The inline bar needs more than 1024px now that
   there are seven top-level items plus the brand and the Book a Trip CTA -
   V3 in particular, because Archivo sets the wordmark wider than Bitter. */
@media (max-width: 1079px) {
  .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: 1080px) {
  .nav-toggle { display: none; }
  /* Tight minimum gap matters: at exactly 1024px with seven top-level items,
     V3 overflowed by 10px because Archivo sets "FLOAT AND FLY" wider than V1's
     Bitter. Seven gaps at the old 0.9rem floor left no room for the CTA. */
  .nav-menu { display: flex; align-items: center; gap: clamp(0.55rem, 1.5vw, 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; }
/* --hero-y moves the visible crop. Larger % shows more of the lower part of
   the photograph, i.e. the image shifts UP. Set per page via a style attribute
   on the .page-hero element. */
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% var(--hero-y, 50%);
}
.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);
}

/* ---------- 12b. Scrolling image strip ---------------------------------- */
/* Continuous horizontal marquee. The track holds the images twice so the loop
   is seamless; the second copy is aria-hidden so screen readers and the
   accessible name are not doubled up.
   Under prefers-reduced-motion the animation is dropped entirely and it
   becomes an ordinary scroll/swipe strip, which is also the no-JS behaviour. */

.marquee {
  position: relative;
  overflow: hidden;
  /* bleed to the viewport edges regardless of the container it sits in */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50vw);
}
.marquee::before,
.marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8vw; z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.bg-paper .marquee::before { background: linear-gradient(90deg, var(--paper), transparent); }
.bg-paper .marquee::after  { background: linear-gradient(270deg, var(--paper), transparent); }

.marquee-track {
  display: flex;
  gap: var(--s-3);
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
/* set by the pause button in main.js */
.marquee.is-paused .marquee-track { animation-play-state: paused; }

/* Pause / play control. WCAG 2.2.2 requires a way to stop motion that runs
   longer than five seconds, which is what lets this banner move on its own for
   everyone rather than being switched off for reduced-motion users. */
.marquee-toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff;
  background: rgba(10, 18, 14, .62);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.marquee-toggle:hover { background: rgba(10, 18, 14, .85); border-color: #fff; }
.marquee-toggle::before {
  content: ""; width: 0; height: 0;
  border-left: 7px solid #fff; border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* while running, show the pause glyph instead of the play triangle */
.marquee:not(.is-paused) .marquee-toggle::before {
  width: 8px; height: 10px; border: 0;
  border-left: 3px solid #fff; border-right: 3px solid #fff;
}

.marquee-track figure { margin: 0; flex: 0 0 auto; }
.marquee-track img {
  height: 210px; width: auto;
  border-radius: var(--radius);
  background: var(--paper-2);
}
@media (min-width: 720px) { .marquee-track img { height: 260px; } }
@media (min-width: 1200px) { .marquee-track img { height: 300px; } }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--s-3) / 2))); }
}

/* Deliberately NOT switched off under prefers-reduced-motion: Graham wants the
   banner to move on its own for everyone, and the pause button above provides
   the WCAG 2.2.2 mechanism to stop it. Reduced-motion users get a slower pass
   rather than no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 110s; }
}

/* ---------- 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); }

/* Callouts and notices keep their own light backgrounds inside a dark band, so
   they must NOT inherit the white body colour - that made them unreadable. */
.section-media .notice-warn,
.section-media .notice-warn p,
.section-media .notice-warn strong { color: #5c4310; }
[data-theme="dark"] .section-media .notice-warn,
[data-theme="dark"] .section-media .notice-warn p,
[data-theme="dark"] .section-media .notice-warn strong { color: #f0d9a8; }
.section-media .callout,
.section-media .callout p { color: var(--fg); }
.section-media .callout h3 { color: var(--ink); }
.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);
}
.casl-note strong { color: rgba(255,255,255,.8); }

/* Contact page: phone + email are the only way to book (no form). */
.contact-direct { display: grid; gap: var(--s-3); margin: var(--s-5) 0; }
.contact-line {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 8px; background: var(--paper);
  text-decoration: none; color: var(--fg);
}
.contact-line:hover { border-color: var(--brand); background: var(--brand-tint); }
.contact-label {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.contact-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-xl); color: var(--brand-dark);
  overflow-wrap: anywhere;
}
.contact-facts li { margin-bottom: var(--s-4); }
main .casl-note { color: var(--muted); font-size: var(--t-sm); margin-top: var(--s-5); }
main .casl-note strong { color: var(--fg); }

/* ---------- 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; }

.split.split-top { align-items: start; }

/* Phones: booking is phone/email only, so both stay one tap away on every page.
   Hidden from 1080px up, where the header "Book a Trip" button is visible. */
.mobile-book { display: none; }
@media (max-width: 1079px) {
  .mobile-book {
    display: grid; grid-template-columns: 1.6fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--brand-dark);
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-book a {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 var(--s-3);
    color: #fff; font-weight: 700; font-size: var(--t-sm);
    letter-spacing: .04em; text-decoration: none;
  }
  .mobile-book a + a { border-left: 1px solid rgba(255,255,255,.22); }
  .mobile-book a:active { background: var(--brand); }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}
@media print { .mobile-book { display: none; } }