:root {
  /* ── Brand ─────────────────────────────────────────────────────────────
     Phase A0: every colour on the site is reachable through one of these.
     `-alt` tokens are accretion twins preserved deliberately — the palette
     had two spellings of the gold and two of the muted grey, and collapsing
     them would have changed tenant #1's rendered output. A preset sets a
     twin pair to the same value; the defaults keep them apart. */
  --primary: #153a5b;
  --primary-rgb: 21, 58, 91;
  --primary-alt: #1a365d;
  --accent: #c99a3b;
  --accent-rgb: 201, 154, 59;
  --accent-alt: #c9983a;
  --accent-alt2: #f5b400;

  /* ── Surfaces ── */
  --bg: #f7f4ef;
  --bg-alt2: #fff8e6;
  --bg-alt3: #fffbeb;
  --bg-alt4: #fffdf5;
  --bg-alt5: #fdf8ee;
  --bg-alt6: #fdf9f3;
  --bg-alt7: #ffedd5;
  --bg-alt8: #fffbf0;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-alt: #f8fafc;
  --surface-tint: #e8eef5;
  --surface-tint-rgb: 232, 238, 245;
  --surface-tint-alt2: #fafbfd;
  --surface-tint-alt3: #e2e8f0;
  --surface-tint-alt4: #f0f5fa;
  --surface-tint-alt5: #dde5f0;
  --surface-tint-alt6: #eef3fa;
  --surface-tint-alt7: #dce8f3;
  --surface-tint-alt8: #d0e2f7;
  --surface-tint-alt9: #d4deea;
  --surface-tint-alt10: #dbe7f2;
  --surface-tint-alt11: #e5eaf2;
  --surface-tint-alt12: #e7f2ff;
  --surface-tint-alt13: #eff6ff;
  --surface-tint-alt14: #f7f9fc;
  --surface-tint-alt15: #b6d8ff;
  --surface-tint-alt16: #b8c8db;
  --surface-tint-alt17: #bfd5ea;
  --surface-tint-alt18: #c5d9eb;
  --surface-tint-alt19: #cbd5e1;
  --surface-tint-alt20: #d9e3ef;
  --surface-tint-alt21: #d9e4f0;
  --surface-tint-alt22: #d9e6f2;
  --surface-tint-alt23: #dbe9f5;
  --surface-tint-alt24: #dde3ec;
  --surface-tint-alt25: #deebf7;
  --surface-tint-alt26: #e0e7f0;
  --surface-tint-alt27: #e3eaf2;
  --surface-tint-alt28: #e8edf4;
  --surface-tint-alt29: #e8f0fb;
  --surface-tint-alt30: #e9edf2;
  --surface-tint-alt31: #eef4fb;
  --surface-tint-alt32: #eef4ff;
  --surface-tint-alt33: #eff6fb;
  --surface-tint-alt34: #f0f2f5;
  --surface-tint-alt35: #f0f4f8;
  --surface-tint-alt36: #f0f6ff;
  --surface-tint-alt37: #f0f7ff;
  --surface-tint-alt38: #f1f5f9;
  --surface-tint-alt39: #f2f7fb;
  --surface-tint-alt40: #f3f8ff;
  --surface-tint-alt41: #f4f8fd;

  /* --border-plain: deliberately NOT named --border. --border is a
     fictional token — two pre-existing call sites reference it with two
     DIFFERENT fallbacks, so declaring a token under that exact name would
     be consumed immediately by both, repainting whichever one disagrees.
     --border-plain is #cccccc, for booking.html line 660 only (Task 11
     rewrites that one call site to reference this token). article.html
     line 47 keeps its own #dde3ec fallback untouched until Task 13
     rewrites it directly to the surface-tint-alt24 token instead — never
     to this one, in any form. See docs/superpowers/palette-role-map.md
     "Discoveries carried forward" #2. */
  --border-plain: #cccccc;

  /* ── Text ── */
  --text: #1d2430;
  --muted: #5a6475;
  --muted-alt2: #6b7a8d;
  --muted-alt3: #8a96a8;
  --muted-alt4: #6b7280;
  --muted-alt5: #9fb4cb;
  --muted-alt6: #374151;
  --muted-alt7: #4a5568;
  --muted-alt8: #9ba3af;
  --muted-alt9: #5a6478;
  --muted-alt10: #6b7787;
  --muted-alt11: #4b5563;
  --muted-alt12: #555555;
  --muted-alt13: #64748b;
  --muted-alt14: #888888;
  --muted-alt15: #8aabc8;
  --muted-alt16: #999999;
  --muted-alt17: #9ca3af;

  /* ── Deep / soft navy accents ── */
  --primary-deep: #0a192f;
  --primary-deep-alt2: #2a3a50;
  --primary-deep-alt3: #0b182b;
  --primary-deep-alt3-rgb: 11, 24, 43;
  --primary-deep-alt4: #1e293b;
  --primary-deep-alt5: #0d2137;
  --primary-deep-alt6: #0f2d4a;
  --primary-deep-alt7: #0e1c2a;
  --primary-deep-alt8: #0e2236;
  --primary-deep-alt9: #0e2a45;
  --primary-deep-alt10: #0f172a;
  --primary-deep-alt11: #123556;
  --primary-deep-alt12: #123658;
  --primary-deep-alt13: #142942;
  --primary-deep-alt14: #1a2433;
  --primary-deep-alt15: #243042;
  /* alt16/alt17 exist for the homepage hero gradient, which declared its four
     stops as literals inside premium-home.css's own :root -- a block
     build_palette() never sees, so no tenant palette could reach the largest
     block of colour on the page. */
  --primary-deep-alt16: #091828;
  --primary-deep-alt17: #162035;
  --primary-soft: #1e4a6e;
  --primary-soft-alt2: #2d5a84;
  --primary-soft-alt3: #3b7dbd;
  --primary-soft-alt4: #1d4d77;
  --primary-soft-alt5: #1f4f79;
  --primary-soft-alt6: #274f73;
  --primary-soft-alt7: #304358;

  /* ── Warm gold accents ── */
  --accent-warm: #d4a845;
  --accent-warm-alt2: #e8b84b;
  --accent-warm-alt3: #e6b84a;
  --accent-warm-alt4: #efc366;
  --accent-warm-alt5: #f0c050;
  --accent-pale: #f5d79e;
  --accent-pale-alt2: #fff0c8;
  --accent-pale-alt3: #e8e0d0;
  --accent-pale-alt4: #fde68a;
  --accent-pale-alt5: #ffe3a6;
  --text-on-accent: #1a1000;
  --text-on-accent-alt2: #5a3e00;
  --text-on-accent-alt3: #271a02;
  --text-on-accent-alt4: #1a1200;

  /* ── Status (fixed across every tenant preset — never remapped) ── */
  --success: #15803d;
  --success-alt: #065f46;
  --success-alt2: #16a34a;
  --success-alt3: #1a6638;
  --success-alt4: #059669;
  --success-alt5: #14532d;
  --success-alt6: #1f6a38;
  --success-bg: #dcfce7;
  --success-bg-alt: #d1fae5;
  --success-bg-alt2: #e6f7ee;
  --success-bg-alt3: #e3f7ea;
  --success-tint: #86efac;
  --success-tint-alt2: #a3d9b8;
  --danger: #991b1b;
  --danger-alt2: #8f2e29;
  --danger-alt3: #b91c1c;
  --danger-alt4: #e53e3e;
  --danger-bg: #fee2e2;
  --danger-bg-alt2: #fde8e7;
  --danger-bg-alt3: #fecdd3;
  --danger-bg-alt4: #fef2f2;
  --danger-tint: #fca5a5;
  --danger-tint-alt2: #f5a9a5;
  --warning: #92400e;
  --warning-alt2: #78350f;
  --warning-alt3: #9a3412;
  --warning-alt4: #e67e22;
  --warning-bg: #fef3c7;
  --info: #1e40af;
  --info-alt: #1d4ed8;
  --info-bg: #dbeafe;

  /* ── Shadow-only / decorative-only channel triplets ──
     No solid-colour counterpart anywhere in scope; used exclusively inside
     rgba() for box-shadow / background-wash darkening or decorative glows. */
  --ink-rgb: 0, 0, 0;
  --ink-alt2-rgb: 15, 25, 40;
  --ink-alt3-rgb: 15, 36, 58;
  --ink-alt4-rgb: 15, 30, 52;
  --ink-alt5-rgb: 15, 30, 50;
  --ink-alt6-rgb: 30, 50, 75;
  --sky-tint-rgb: 100, 160, 220;
  --sky-tint-alt-rgb: 30, 90, 160;
  --sky-tint-alt2-rgb: 64, 120, 168;

  /* ── Existing non-colour tokens, unchanged ── */
  --radius-lg: 22px;
  --radius-md: 14px;
  --space-xs: 0.5rem;
  --space-sm: 0.85rem;
  --space-md: 1.2rem;
  --space-lg: 2rem;
  --space-xl: 3.2rem;
  --shadow-soft: 0 20px 40px rgba(15, 25, 40, 0.08);
}

* { box-sizing: border-box; }
/* A <button>, <input>, <select> or <textarea> does not inherit the page's
   face, so the time-sheet opener and the wizard's check boxes fell back to
   Arial and the remarks box to the system mono (owner 2026-10-06 10:34).
   The family only: `font: inherit` would also carry the body's size and
   line-height into every control and change its height. */
button, input, select, textarea { font-family: inherit; }
html { font-size: 106.25%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 14% -8%, var(--surface-tint-alt12) 0%, transparent 48%),
    radial-gradient(circle at 88% 10%, var(--accent-pale-alt2) 0%, transparent 35%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-top: 70px;
}

a { color: inherit; text-decoration: none; }

.shell {
  width: min(1180px, calc(100% - 2.4rem));
  margin-inline: auto;
}

/* ─── Fixed Navigation Bar ─────────────────────────────────── */

/* The header below is `position: fixed` and opaque, so it is not part of the
   page: an in-page anchor scrolls its target's top edge to y=0 and the header
   then covers it. The Kos page's "See cars and prices" landed exactly there —
   the booking bar was on screen with its top 83px hidden, which reads as a
   button that did not scroll far enough. `scroll-padding-top` on the scroll
   container fixes every anchor on every site page at once, this one and any
   added later, and it is what the browser also uses when it scrolls a field
   into view to report a validation error. 6rem clears the header at both its
   heights (83px desktop, 80px phone) and leaves a little air above the target. */
html { scroll-padding-top: 6rem; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(var(--primary-deep-alt3-rgb), 0.82);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(var(--surface-rgb), 0.07);
  transition: background 320ms ease, box-shadow 320ms ease;
}

.site-header.scrolled {
  background: rgba(var(--primary-deep-alt3-rgb), 0.97);
  box-shadow: 0 2px 28px rgba(var(--ink-rgb), 0.22);
}

.nav-shell {
  width: min(1180px, calc(100% - 2.4rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent), var(--accent-warm-alt2));
  color: var(--text-on-accent);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.brand-mark.has-logo {
  background: rgba(var(--surface-rgb), 0.12);
  border: 1px solid rgba(var(--surface-rgb), 0.18);
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.12rem;
}

.brand-text { line-height: 1.2; }
.brand-name { font-weight: 700; font-size: 1rem; color: var(--surface); }
.brand-tag { color: rgba(var(--surface-rgb), 0.5); font-size: 0.74rem; }

h1,
h2,
h3 {
  font-family: "Fraunces", "Literata", Georgia, serif;
  letter-spacing: -0.01em;
}

/* ─── Nav Links ─────────────────────────────────────────────── */
.top-nav {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

.top-nav a {
  color: rgba(var(--surface-rgb), 0.68);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  transition: color 200ms ease, background 200ms ease;
  white-space: nowrap;
}

.top-nav a:hover {
  color: var(--surface);
  background: rgba(var(--surface-rgb), 0.08);
}

.top-nav a[aria-current="page"] {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  font-weight: 600;
}

/* ─── Nav Actions (Book Now + Burger) ─────────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.nav-book-btn {
  font-size: 0.875rem;
  padding: 0.5rem 1.1rem;
  white-space: nowrap;
}

/* "Book now" as the first row of the phone menu — shown only when the pill
   has had to yield (see the phone block below). */
.nav-book-row { display: none; }

/* ─── Mobile Hamburger ─────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: rgba(var(--surface-rgb), 0.07);
  border: 1px solid rgba(var(--surface-rgb), 0.12);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  transition: background 200ms ease;
}

.nav-burger:hover { background: rgba(var(--surface-rgb), 0.12); }

.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--surface);
  border-radius: 2px;
  transition: transform 280ms ease, opacity 200ms ease;
  transform-origin: center;
}

.site-header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

main { padding-bottom: 3rem; }

.section-head { margin: var(--space-xl) 0 var(--space-lg); }
/* Eyebrow: Inter 600 caps at .08em (owner 2026-10-06 10:34). */
.eyebrow { color: var(--primary); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 600; }

.bg-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.3;
  pointer-events: none;
}
.bg-orb-a {
  width: 340px;
  height: 340px;
  background: var(--surface-tint-alt15);
  left: -120px;
  top: -80px;
}
.bg-orb-b {
  width: 280px;
  height: 280px;
  background: var(--accent-pale-alt5);
  right: -80px;
  top: 120px;
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgba(var(--ink-alt6-rgb), 0.12);
  padding: 2.5rem 0;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--ink-alt4-rgb), 0.03) 100%);
  color: var(--muted);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--primary), var(--primary-soft-alt6));
  color: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.75rem;
  overflow: hidden;
}

.footer-brand-mark.has-logo {
  background: rgba(var(--surface-rgb), 0.08);
  border: 1px solid rgba(var(--surface-rgb), 0.15);
}

.footer-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.1rem;
}

.footer-links {
  display: flex;
  gap: 1.2rem 2.6rem;
  flex-wrap: wrap;
}

/* One column per group (owner 2026-09-18). */
.footer-col { display: flex; flex-direction: column; gap: 0.45rem; min-width: 8rem; }
/* Eyebrow: Inter 600 caps at .08em (owner 2026-10-06 10:34). */
.footer-col-title {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.55; margin-bottom: 0.15rem;
}
.footer-links a[aria-current="page"] { opacity: 0.6; }

.footer-links a {
  color: var(--muted);
  font-size: 0.82rem;
  transition: color 200ms ease;
}

.footer-links a:hover { color: var(--text); }

.footer-copy {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--muted-alt3);
  border-top: 1px solid var(--surface-tint-alt28);
  padding-top: 1.2rem;
  margin-top: 0.5rem;
}

/* ─── Mobile Responsive ─────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-burger { display: flex; }

  .top-nav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(var(--primary-deep-alt3-rgb), 0.98);
    border-bottom: 1px solid rgba(var(--surface-rgb), 0.1);
    padding: 0.75rem 1.2rem 1.5rem;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  }

  .site-header.nav-open .top-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .top-nav a {
    font-size: 1rem;
    padding: 0.85rem 0.6rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(var(--surface-rgb), 0.06);
  }

  .top-nav a:last-child { border-bottom: none; }

  /* The pill stays on the phone, beside the burger. It was hidden here since
     the classic layout, which left the one page the site exists for reachable
     only through the menu. Shorter padding so brand, pill and burger share
     375px; the label is two short words in every language (2026-09-10). */
  .nav-book-btn { font-size: 0.8rem; padding: 0.42rem 0.8rem; }

  /* Measured at 375px, 2026-09-10: brand 131 + pill up to 127 (Greek) +
     burger 38 fit with room; add the language switcher (108 + its label)
     and the burger leaves the screen. So while a switcher shares the header
     -- a second language published -- the pill yields and "Book now" is the
     first row of the menu instead. `:has()` is the whole mechanism: a
     browser without it shows the pill, as every browser did before. */
  .nav-shell:has(.nav-actions .lang-switcher) .nav-book-btn { display: none; }
  .nav-shell:has(.nav-actions .lang-switcher) .top-nav .nav-book-row { display: block; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}


/* ─── The titled group: "Locations" over its places (owner 2026-09-18) ───
   A menu row with children is drawn in the centre of the bar, its label a
   small title over the links. Centred on the whole header, not on the space
   between the logo and the buttons, so it sits under the middle of the page.
   ponytail: absolute centring; with many places on a narrow desktop it could
   meet Home or Find my booking, then move the burger breakpoint up. */
.nav-shell { position: relative; }
.top-nav { flex: 1; }
.nav-group {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
/* Eyebrow, as above (owner 2026-10-06 10:34). */
.nav-group-title {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.5; margin-bottom: 0.15rem;
}
.nav-group-links { display: flex; align-items: center; }
.nav-group-links a + a::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.35; vertical-align: middle;
  margin: 0 0.7rem 0 -0.35rem; position: relative; left: -0.35rem;
}
.nav-find { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-find-icon {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 860px) {
  .nav-group { position: static; transform: none; align-items: stretch; }
  .nav-group-title { padding: 0.9rem 0.6rem 0.2rem; margin: 0; }
  .nav-group-links { flex-direction: column; align-items: stretch; }
  .nav-group-links a { padding-left: 1.4rem; border-bottom: 1px solid rgba(var(--surface-rgb), 0.06); }
  .nav-group-links a + a::before { display: none; }
  .nav-find { margin-left: 0; margin-top: 0.5rem; border-top: 1px solid rgba(var(--surface-rgb), 0.14); }
}

/* ─── Nav: tighter sizing for longer-label languages (el/de) ──── */
/* On wide desktop: smaller font + tighter padding so nav fits */
@media (min-width: 1081px) {
  html[lang="el"] .top-nav a,
  html[lang="de"] .top-nav a { font-size: 0.8rem; padding: 0.4rem 0.55rem; }
}

/* Between 861px–1080px el/de overflow: collapse to hamburger early */
@media (max-width: 1080px) {
  html[lang="el"] .nav-burger,
  html[lang="de"] .nav-burger { display: flex; }

  html[lang="el"] .top-nav,
  html[lang="de"] .top-nav {
    position: fixed; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(var(--primary-deep-alt3-rgb), 0.98);
    border-bottom: 1px solid rgba(var(--surface-rgb), 0.1);
    padding: 0.75rem 1.2rem 1.5rem;
    transform: translateY(-110%); opacity: 0; pointer-events: none;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  }
  html[lang="el"] .site-header.nav-open .top-nav,
  html[lang="de"] .site-header.nav-open .top-nav {
    transform: translateY(0); opacity: 1; pointer-events: auto;
  }
  html[lang="el"] .top-nav a,
  html[lang="de"] .top-nav a {
    font-size: 1rem; padding: 0.85rem 0.6rem;
    border-radius: 0; border-bottom: 1px solid rgba(var(--surface-rgb), 0.06);
  }
  html[lang="el"] .top-nav a:last-child,
  html[lang="de"] .top-nav a:last-child { border-bottom: none; }
  html[lang="el"] .nav-group,
  html[lang="de"] .nav-group { position: static; transform: none; align-items: stretch; }
  html[lang="el"] .nav-group-title,
  html[lang="de"] .nav-group-title { padding: 0.9rem 0.6rem 0.2rem; margin: 0; }
  html[lang="el"] .nav-group-links,
  html[lang="de"] .nav-group-links { flex-direction: column; align-items: stretch; }
  html[lang="el"] .nav-group-links a,
  html[lang="de"] .nav-group-links a { padding-left: 1.4rem; border-bottom: 1px solid rgba(var(--surface-rgb), 0.06); }
  html[lang="el"] .nav-group-links a + a::before,
  html[lang="de"] .nav-group-links a + a::before { display: none; }
  html[lang="el"] .nav-find,
  html[lang="de"] .nav-find { margin-left: 0; margin-top: 0.5rem; border-top: 1px solid rgba(var(--surface-rgb), 0.14); }
}