/* Ferrez Guiding. Mobile first. Colours are tokens: light below, dark in the two theme blocks.
   Brand colours sampled from Daniel's logo files and confirmed by the owner, 25 Oct 2026:
   orange #EE561F, charcoal #1D2022, ink #242425. Light mode is white with neutral greys (owner, 25 Oct 2026). */

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

:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F4F2;
  --ink: #242425;
  --ink-dim: #55534F;
  --line: #E2E2DF;
  --line-strong: #878782;
  --accent: #EE561F;
  --on-accent: #1D2022;
  --accent-text: #B03C0D;
  --dusk: linear-gradient(160deg, #A8380D 0%, #9E3240 38%, #5A2A48 70%, #1D2022 100%);
  --on-dusk: #FFFFFF;
  --photo-shade: rgba(22, 25, 29, 0.88);
  --shadow: 0 10px 30px rgba(29, 32, 34, 0.10);
  --sun-icon: block;
  --moon-icon: none;
  --logo-light: block;
  --logo-dark: none;
  --wrap: 1180px;
  --gutter: 16px;
  --bar-h: 0px;
  --radius: 10px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: light only;
}
/* The site always opens white (owner, 26 Oct 2026), whatever the phone's own setting.
   Dark mode only when the visitor ticks the header switch (a checkbox, so it works without JavaScript). */
:root:has(#theme-toggle:checked) {
  --bg: #16191D; --surface: #1F2327; --surface-2: #2A2F34; --ink: #F3F1EC; --ink-dim: #BDB9B1;
  --line: #33383E; --line-strong: #737980; --accent: #F05831; --on-accent: #16191D; --accent-text: #FF8A5E;
  --photo-shade: rgba(12, 14, 16, 0.9); --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sun-icon: none; --moon-icon: block; --logo-light: none; --logo-dark: block; color-scheme: dark only;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  overflow-x: hidden; padding-bottom: var(--bar-h);
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: 0.005em; }
h2 { font-size: clamp(2rem, 7vw, 3.2rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 12px 16px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.no-js .js-only { display: none !important; }
html:not(.no-js) .no-js-only { display: none !important; }
.eyebrow { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; }
.small { font-size: 0.92rem; color: var(--ink-dim); }
section { padding: 64px 0; }
/* Sections below the first screen skip layout until they come near it: the biggest saving on slower phones
   (Lighthouse, 27 Oct 2026). "auto" remembers each section's real height once it has been seen.
   The placeholder heights (--ch) were measured at each screen width. A smooth jump to a link would still aim at
   placeholder positions, so the script in the page head adds .cv-done (everything laid out) on the first in-page
   link or "Plan this date", or straight away when the address already has a #section in it.
   JavaScript only: without it there is nothing to add .cv-done, so the page keeps the normal behaviour. */
html:not(.no-js):not(.cv-done) :is(main > section, .site-footer) { content-visibility: auto; contain-intrinsic-size: auto var(--ch, 900px); }
#intro { --ch: 1150px; } #routes { --ch: 5900px; } #about { --ch: 1000px; } #conditions { --ch: 1900px; } #plan { --ch: 2400px; }
#reviews { --ch: 780px; } #faq { --ch: 770px; } #contact { --ch: 590px; } .site-footer { --ch: 210px; }
@media (min-width: 700px) { #intro { --ch: 1260px; } #routes { --ch: 3320px; } #about { --ch: 1130px; } #conditions { --ch: 1110px; } #plan { --ch: 1870px; } #reviews { --ch: 570px; } #contact { --ch: 420px; } }
@media (min-width: 900px) { #intro { --ch: 770px; } #routes { --ch: 3180px; } #about { --ch: 680px; } #plan { --ch: 1456px; } #reviews { --ch: 600px; } #faq { --ch: 846px; } #contact { --ch: 400px; } .site-footer { --ch: 117px; } }
@media (min-width: 1100px) { #routes { --ch: 2480px; } }
.section-head { display: grid; gap: 12px; margin-bottom: 32px; max-width: 46rem; }
.section-head p:not(.eyebrow) { color: var(--ink-dim); font-size: 1.1rem; }
.section-head .eyebrow { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); }
.btn-on-photo { border-color: rgba(255, 255, 255, 0.85); color: #fff; background: rgba(0, 0, 0, 0.25); }
.btn-on-photo:hover { background: rgba(0, 0, 0, 0.45); }
.btn-light { background: #FFFFFF; color: #1D2022; }
.btn-light:hover { background: #fff; }
.btn-light:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; color: var(--ink); }
.logo-light { display: var(--logo-light); }
.logo-dark { display: var(--logo-dark); }
.brand .logo img { height: 48px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer;
  font: 600 0.95rem var(--font);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--accent); }
.theme-input:focus-visible + script + .theme-btn, .theme-input:focus-visible ~ .theme-btn { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-btn .sun { display: var(--sun-icon); }
.theme-btn .moon { display: var(--moon-icon); }
nav.main { display: none; }
.header-cta { display: none; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .when-open, .menu[open] .when-closed { display: none; }
.menu[open] .when-open { display: inline; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 8px 0 20px;
}
.menu-panel a:not(.btn) {
  display: flex; align-items: center; min-height: 56px;
  font: 700 1.5rem var(--display); text-decoration: none; border-bottom: 1px solid var(--line);
}
.menu-panel .btn { width: 100%; margin-top: 18px; }

/* ---------- hero ---------- */
/* The hero fills the first screen (minus the header and the phone's bottom bar), so the headline and the
   Book button are always visible on arrival. The photo is a background layer and never sets the height. */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(calc(100svh - 64px - var(--bar-h)), 760px); color: #fff; background: #1D2022; isolation: isolate;
}
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,25,29,0) 25%, rgba(22,25,29,0.55) 52%, var(--photo-shade) 78%);
}
.hero-text { padding-top: 96px; padding-bottom: 28px; width: 100%; }
.hero .eyebrow { color: #FFD2BF; }
.hero h1 { font-size: clamp(2.3rem, 9.5vw, 4.6rem); max-width: 16ch; text-shadow: 0 2px 20px rgba(0,0,0,0.35); }
.lede { font-size: 1.15rem; max-width: 40rem; margin-top: 16px; color: #FBF1E8; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-ctas .btn { flex: 1 1 120px; padding: 12px 14px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; padding: 18px 0 0; margin: 24px 0 0; border-top: 1px solid rgba(255,255,255,0.3); font-size: 0.98rem; color: #FBF1E8; }
.hero-facts b { color: #fff; }
@media (max-height: 700px) {
  .hero-text { padding-top: 72px; padding-bottom: 20px; }
  .lede { font-size: 1.02rem; margin-top: 10px; }
  .hero-ctas { margin-top: 16px; }
  .hero-facts { margin-top: 16px; padding-top: 12px; }
}

/* ---------- credentials strip (under the hero) ---------- */
.creds-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
/* Centred on every screen size (Daniel's request, 26 Oct 2026). */
.creds-strip ul { list-style: none; margin: 0; padding-top: 16px; padding-bottom: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; text-align: center; }
.creds-strip li { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-weight: 600; font-size: 0.98rem; }
.creds-strip li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }

/* ---------- intro ---------- */
.intro-grid { display: grid; gap: 28px; align-items: center; }
.intro-copy { display: grid; gap: 16px; justify-items: start; }
.intro-copy p:not(.eyebrow) { font-size: 1.15rem; color: var(--ink-dim); max-width: 36rem; }
.intro-copy .eyebrow { margin-bottom: -4px; }
.intro-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.why { margin-top: 56px; }
.why-h { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: 20px; }
.why-grid { display: grid; gap: 16px; }
.why-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; }
.why-card p { color: var(--ink-dim); }

/* ---------- routes ---------- */
#routes { background: var(--surface-2); }
select, input[type="date"], input[type="text"], textarea {
  font: 400 1.0625rem var(--font); color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 8px; min-height: 48px; padding: 10px 12px; width: 100%; max-width: 100%;
}
textarea { resize: vertical; min-height: 96px; }

.routes-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.route-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 80px; }
.route-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.route-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.route-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 600; font-size: 0.98rem; }
.route-facts .price { margin-left: auto; font-size: 1.15rem; white-space: nowrap; }
.route-facts .price span { font-size: 0.85rem; font-weight: 400; color: var(--ink-dim); }
.grade-tag { padding: 3px 12px; border-radius: 999px; font-size: 0.85rem; border: 1px solid currentColor; }
.grade-tag.g1 { color: var(--ink); }
.grade-tag.g2, .grade-tag.g3, .grade-tag.g4 { color: var(--accent-text); }
.desc { color: var(--ink-dim); }
.good-for b { font-weight: 600; }
.route-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 4px; }

.compare { margin-top: 40px; }
.compare h3 { margin-bottom: 14px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.compare table { width: 100%; border-collapse: collapse; min-width: 480px; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare td:last-child { white-space: nowrap; font-weight: 600; }
.compare th a { text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ---------- about ---------- */
.about { display: grid; gap: 28px; align-items: center; }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.about-copy { display: grid; gap: 16px; }
.about-copy .eyebrow { margin-bottom: -4px; }
.about-copy > p:not(.eyebrow) { color: var(--ink-dim); font-size: 1.1rem; }
.creds { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.creds li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
.creds li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }

/* ---------- conditions ---------- */
#conditions { background: var(--surface-2); }
.cond-grid { display: grid; gap: 16px; }
.cond-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; align-content: start; }
.cond-card > p:not(.small) { color: var(--ink-dim); }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-weight: 600; }
.link-row small { display: block; font-weight: 400; color: var(--ink-dim); font-size: 0.88rem; }
.link-row:hover { border-color: var(--accent); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
/* The tick sits in the left padding, so a line with a number from config.js in it (the water line) flows as one sentence. */
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 8px; height: 14px; border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tel-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-weight: 600; }
.tel-list .num { font-variant-numeric: tabular-nums; color: var(--accent-text); white-space: nowrap; }

/* Sunrise and sunset planner: the sunset gradient */
.sun-card { background: var(--dusk); color: var(--on-dusk); border: 0; }
.sun-card .small { color: #FBEDE4; }
.sun-card label { font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sun-card select { background: #FFFFFF; color: #1D2022; border-color: transparent; }
.sun-pick { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 10px; }
.field { display: grid; gap: 6px; min-width: 0; }
.sun-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sun-out > div { background: rgba(20, 10, 22, 0.35); border-radius: 8px; padding: 12px 14px; }
.sun-out .lbl { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #FBEDE4; }
.sun-out .t { display: block; font: 700 2.2rem/1.1 var(--display); font-variant-numeric: tabular-nums; min-height: 1.1em; }
.sun-out .t b { display: none; font-weight: 700; }
.sun-out .t b.sun-bad { font: 600 1.05rem var(--font); }
.sun-card .btn { justify-self: start; }

/* ---------- how to book and the message builder ---------- */
#plan { background: var(--dusk); color: var(--on-dusk); }
#plan .section-head .eyebrow { color: #FFE1D3; }
.plan-layout { display: grid; gap: 28px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li:not(.steps-chat) { counter-increment: step; position: relative; padding: 16px 16px 16px 64px; background: rgba(20, 10, 22, 0.28); border-radius: var(--radius); display: grid; gap: 4px; }
.steps li:not(.steps-chat)::before { content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 14px; font: 700 1.6rem var(--display); color: #FFD2BF; }
.steps h3 { font-size: 1.3rem; }
.steps p { color: #FBEDE4; }
.steps-chat { padding: 8px 4px; color: #FBEDE4; }
.steps-chat a { color: #fff; font-weight: 600; text-underline-offset: 3px; }

.planner { background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 22px; display: grid; gap: 16px; box-shadow: var(--shadow); }
.planner h3 { font-size: 1.6rem; }
.planner .intro-text { color: var(--ink-dim); }
.planner label, .planner .label { font-weight: 600; }
.row-2 { display: grid; gap: 16px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400 !important; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.opt { font-weight: 400; color: var(--ink-dim); }
.hint { font-size: 0.92rem; color: var(--ink-dim); }
.hint.warn { color: var(--accent-text); font-weight: 600; }
.preview { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; font-size: 1rem; line-height: 1.5; user-select: all; }
.preview .pv { display: none; }
.send-row { display: grid; gap: 10px; }
.wa-combos { position: relative; }
.wa-combos .c { display: none; }
.wa-combos a.c { position: absolute; inset: 0; border-radius: 999px; }
.wa-combos:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.copy-status:empty { display: none; }
.copy-status a { color: var(--accent-text); font-weight: 600; }

/* ---------- reviews ---------- */
.review-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 16px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; }
.review blockquote { margin: 0; }
.review-by { color: var(--ink-dim); font-size: 0.95rem; }
.stars { color: var(--accent-text); letter-spacing: 2px; }
.rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 1.2rem; margin-bottom: 20px; }
.rating-summary .stars { font-size: 1.5rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-facts .rating-fact a { color: #fff; text-decoration-color: rgba(255,255,255,0.6); text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.hero-facts .rating-fact span { color: #FFB59A; }
/* On phones the floating WhatsApp button sits bottom right: keep the facts clear of it. */
@media (max-width: 899px) { .hero-facts { padding-right: 68px; } }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 52rem; }
.faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 18px; font-weight: 600; font-size: 1.1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font: 700 1.6rem/1 var(--display); color: var(--accent-text); flex: none; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { padding: 0 18px 18px; color: var(--ink-dim); }

/* ---------- contact ---------- */
.contact { background: var(--dusk); color: var(--on-dusk); }
.contact .eyebrow { color: #FFE1D3; }
.contact-inner { display: grid; gap: 28px; }
.contact-inner > div { display: grid; gap: 12px; }
.contact-inner p:not(.eyebrow) { color: #FBEDE4; font-size: 1.1rem; max-width: 34rem; }
.contact-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-links a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; min-height: 60px; padding: 12px 18px; background: rgba(20, 10, 22, 0.3); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 1.1rem; overflow-wrap: anywhere; }
.contact-links a:hover { border-color: #fff; }
.contact-links .label { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #FFE1D3; }

/* ---------- footer, bars ---------- */
.site-footer { padding: 28px 0 32px; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-dim); }
.footer-row { display: grid; gap: 12px; }
.footer-brand .logo img { height: 56px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink); text-underline-offset: 3px; }

.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
body { --bar-h: calc(68px + env(safe-area-inset-bottom)); }
.fab-wa {
  position: fixed; right: var(--gutter); bottom: calc(var(--bar-h) + 14px); z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #1F7A4D; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
.fab-wa svg { width: 28px; height: 28px; }
.fab-wa:hover { background: #17633E; }

/* ---------- larger screens ---------- */
@media (min-width: 700px) {
  :root { --gutter: 24px; }
  .routes-grid { grid-template-columns: 1fr 1fr; }
  .why-grid, .row-2 { grid-template-columns: 1fr 1fr; }
  /* Tablets: side by side, centred, wrapping only as much as needed (owner, 26 Oct 2026). */
  .creds-strip ul { gap: 8px 32px; }
  .cond-grid { grid-template-columns: 1fr 1fr; }
  .route-actions { grid-template-columns: 1fr 1fr; }
  .send-row { grid-template-columns: 1fr 1fr; }
  .contact-links { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  section { padding: 96px 0; }
  nav.main { display: flex; gap: 22px; }
  nav.main a { text-decoration: none; font-weight: 600; color: var(--ink-dim); padding: 10px 0; border-bottom: 2px solid transparent; }
  nav.main a:hover { color: var(--ink); border-color: var(--accent); }
  .header-cta { display: inline-flex; }
  .menu { display: none; }
  .book-bar { display: none; }
  body { --bar-h: 0px; }
  .fab-wa { bottom: 24px; right: 24px; }
  .intro-grid { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
  .about { grid-template-columns: 0.95fr 1.05fr; gap: 56px; }
  .plan-layout { grid-template-columns: 0.85fr 1.15fr; gap: 40px; }
  .contact-inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .footer-row { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
  .hero-ctas .btn { flex: 0 0 auto; }
}
@media (min-width: 1100px) {
  /* All four on one centred line: this strip may use the full screen width, and the text scales a touch with it. */
  .creds-strip ul { max-width: none; flex-wrap: nowrap; gap: 16px; padding-left: 24px; padding-right: 24px; }
  .creds-strip li { white-space: nowrap; font-size: clamp(12.5px, calc(1.2vw - 1px), 15.6px); }
  .routes-grid { grid-template-columns: repeat(3, 1fr); }
  .route-actions { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
  .brand .logo img { height: 40px; }
  .icon-btn { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  header.site, .book-bar, .fab-wa, .send-row { display: none !important; }
}

/* ---------- privacy, terms, 404 ---------- */
.legal { padding-top: 48px; padding-bottom: 64px; max-width: calc(46rem + 2 * var(--gutter)); }
.legal h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); }
.legal h2 { font-size: 1.6rem; margin-top: 32px; margin-bottom: 8px; }
.legal p, .legal ul { margin: 0 0 12px; color: var(--ink-dim); }
.legal a:not(.btn) { color: var(--accent-text); text-underline-offset: 3px; }
.legal .updated { font-size: 0.95rem; margin-top: 10px; }
.legal .btn { margin-top: 12px; }
.notfound { min-height: 70vh; display: grid; align-content: center; gap: 4px; }