/* The Porter Tours: shared styles.
   Direction: a classic hotel lobby. Deep Atlantic navy, discreet brass, warm off-white.
   All colours, type sizes and spacing come from the tokens below; change them here, not inline. */

/* Self-hosted web fonts (SIL Open Font License 1.1, licence texts in assets/fonts/).
   Latin subset covers Portuguese (ã õ ç é). Source Sans 3 is a variable font: one file serves 400 and 600.
   Its latin-ext file only downloads on pages that use those characters (e.g. a name in credits.html). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colour */
  --navy: #12283a;
  --navy-raised: #1b3850;
  --brass: #c6a46a;         /* on navy only (6.4:1) */
  --brass-ink: #7a5c2c;     /* 5.5:1 on paper, 4.9:1 on stone */
  --paper: #f6f2ea;
  --stone: #eae3d6;
  --ink: #1c2630;
  --ink-muted: #55606b;     /* 5.7:1 on paper, 5.0:1 on stone */
  --on-navy: #f6f2ea;
  --on-navy-muted: #d9dee3; /* 11:1 on navy */
  --line: rgba(28, 38, 48, 0.16);
  --line-on-navy: rgba(198, 164, 106, 0.4);
  --error: #a3261b;         /* 6.3:1 on paper */
  --focus: #c6a46a;
  --placeholder-bg: #f5e3a3; /* legal placeholders, ink text 12:1 */

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size-sm: 0.9375rem;
  --size-base: 1.0625rem;
  --size-lg: 1.25rem;
  --size-h3: 1.625rem;
  --size-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --size-h1: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
  --tracking-caps: 0.14em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --radius: 2px;
  --arch: 999px 999px 0 0;
  --container: 72rem;
  --measure: 38rem;
  --header-h: 4.5rem;
  --shadow-float: 0 4px 14px rgba(18, 40, 58, 0.35); /* navy at 35%, floating WhatsApp button */
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-6); }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--size-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
p { margin: 0 0 var(--space-4); }
ul { margin: 0; }

a { color: var(--brass-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
/* On paper, brass alone is too light for a focus ring (WCAG 2.4.7 and 1.4.11): pair it with navy. */
.surface-paper :focus-visible,
main :focus-visible { outline-color: var(--navy); box-shadow: 0 0 0 6px var(--brass); }
.band-navy :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--brass); box-shadow: none; }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -10rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--brass);
  color: var(--navy);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: var(--space-3);
}
.band-navy .eyebrow { color: var(--brass); }

.lede { font-size: var(--size-lg); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.muted { color: var(--ink-muted); }

/* ---------- Header and navigation ---------- */

.site-header {
  background: var(--navy);
  color: var(--on-navy);
  border-bottom: 1px solid var(--line-on-navy);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--on-navy);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.brand svg { width: 2.25rem; height: 2.25rem; flex: none; }

.nav-toggle { display: none; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  list-style: none;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--on-navy);
  text-decoration: none;
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--brass); }
.site-nav a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); }

@media (max-width: 56rem) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--on-navy);
    border: 1px solid var(--line-on-navy);
    border-radius: var(--radius);
    font: 600 var(--size-sm) / 1 var(--font-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: transform 0.2s ease;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  .header-inner { flex-wrap: wrap; }
  .site-nav { width: 100%; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-bottom: var(--space-4); }
  .site-nav li + li { border-top: 1px solid var(--line-on-navy); }
  .site-nav a { display: block; padding: var(--space-3) 0; border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom: 0; }
}

/* ---------- Bands and sections ---------- */

.band-navy { background: var(--navy); color: var(--on-navy); }
.band-navy a:not(.button) { color: var(--brass); }
.band-navy .lede, .band-navy .muted { color: var(--on-navy-muted); }
.band-stone { background: var(--stone); }
.section { padding-block: var(--space-8); }
.section-head { max-width: var(--measure); margin-bottom: var(--space-7); }

.page-header { padding-block: var(--space-7) var(--space-8); }
.page-header h1 { max-width: 20ch; }

.rule {
  width: 4rem;
  height: 1px;
  border: 0;
  background: var(--brass);
  margin: var(--space-5) 0;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--on-navy);
  font: 600 var(--size-sm) / 1.2 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--navy-raised); }
.button--ghost { background: transparent; color: var(--navy); }
.button--ghost:hover { background: var(--navy); color: var(--on-navy); }
.band-navy .button { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.band-navy .button:hover { background: var(--paper); border-color: var(--paper); }
.band-navy .button--ghost { background: transparent; color: var(--on-navy); border-color: var(--line-on-navy); }
.band-navy .button--ghost:hover { background: var(--navy-raised); color: var(--on-navy); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Grids and cards ---------- */

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) and (max-width: 55.99rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  padding: var(--space-6) var(--space-5);
}
.band-stone .card { background: var(--paper); }
.card h3 { margin-bottom: var(--space-3); }
.card p:last-child { margin-bottom: 0; }
.card .card-link { margin-top: auto; padding-top: var(--space-4); font-weight: 600; }

.pillar-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--brass-ink);
  margin-bottom: var(--space-3);
}

.check-list, .plain-list { list-style: none; padding: 0; }
.check-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1rem;
  height: 1px;
  background: var(--brass-ink);
}
.band-navy .check-list li::before { background: var(--brass); }
.plain-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.plain-list li:first-child { border-top: 1px solid var(--line); }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; border-top: 1px solid var(--line-on-navy); padding-top: var(--space-5); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--brass);
  margin-bottom: var(--space-3);
}
.steps h3 { font-size: 1.5rem; }

/* Vehicle option */
.vehicle { border-top-width: 2px; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.spec dt { font-size: var(--size-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.spec dd { margin: 0; }

/* ---------- Tours ---------- */

.note {
  border-left: 2px solid var(--brass-ink);
  padding: var(--space-4) var(--space-5);
  background: var(--stone);
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Quote block (About) ---------- */

.feature-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.35;
  margin: 0;
}

.split { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }

/* ---------- Booking form ---------- */

.form { max-width: 46rem; }
.form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-7); }
.form legend {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-5);
}
.field { margin-bottom: var(--space-5); }
.field-row { display: grid; gap: 0 var(--space-5); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }

label, .label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.optional { font-weight: 400; color: var(--ink-muted); }
.hint { display: block; font-size: var(--size-sm); color: var(--ink-muted); margin: calc(-1 * var(--space-1)) 0 var(--space-2); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius);
}
textarea { min-height: 8rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--navy); }
.choice:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.choice-group.has-error .choice { border-color: var(--error); border-width: 2px; }

.field-error {
  display: block;
  color: var(--error);
  font-weight: 600;
  font-size: var(--size-sm);
  margin-top: var(--space-2);
}
.field-error:empty { display: none; }

.error-summary {
  border: 2px solid var(--error);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  background: #fff;
}
.error-summary h2,
.error-summary h3 { font-size: var(--size-h3); color: var(--error); }
.error-summary ul { padding-left: var(--space-5); }
.error-summary a { color: var(--error); font-weight: 600; }

.form-status {
  border-left: 2px solid var(--navy);
  padding: var(--space-4) var(--space-5);
  background: var(--stone);
  margin-top: var(--space-5);
}
.form-status:empty { display: none; }

/* ---------- Contact ---------- */

.contact-list { display: grid; gap: var(--space-5); margin: 0; }
.contact-list dt { font-size: var(--size-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); }
.contact-list dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; overflow-wrap: anywhere; }
.contact-list dd.contact-text { font-family: var(--font-text); }

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

.site-footer {
  background: var(--navy);
  color: var(--on-navy-muted);
  padding-block: var(--space-7) var(--space-6);
  font-size: var(--size-sm);
  border-top: 1px solid var(--line-on-navy);
}
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr; } }
.site-footer .brand { margin-bottom: var(--space-4); }
.site-footer h2 {
  font-family: var(--font-text);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--on-navy); display: inline-block; padding-block: 0.125rem; }
.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-navy);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}
.footer-legal p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .actions { display: none; }
  body { background: #fff; }
}
.site-footer a.brand { display: inline-flex; color: var(--on-navy); }
@media (max-width: 24rem) {
  .site-header .brand { font-size: 1.25rem; gap: var(--space-2); }
  .site-header .brand svg { width: 2rem; height: 2rem; }
  .js .nav-toggle { padding-inline: var(--space-3); }
}

/* ================================================================
   Phase 2: photography, cards, legal pages
   ================================================================ */

[hidden] { display: none !important; }

/* Photos are shown exactly as published (CC BY-SA): no filters, only cropping by object-fit. */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Vehicle photo */
.vehicle-photo { margin: 0 0 var(--space-5); }
.vehicle-photo .photo-frame { aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone); }
.vehicle-photo figcaption { font-size: var(--size-sm); color: var(--ink-muted); margin-top: var(--space-2); }

.tour-card { padding: 0; overflow: hidden; }
.tour-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.tour-body h3 { margin-bottom: var(--space-4); }
.tour-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy); position: relative; }
.tour-media--fallback::before {
  content: "";
  position: absolute;
  inset: 16% 30% 0;
  border: 1px solid var(--brass);
  border-bottom: 0;
  border-radius: var(--arch);
}
.tour-media--fallback::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 16%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--brass);
}
.card-region {
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: var(--space-2);
}
.tour-card .tour-body p { margin-bottom: var(--space-4); }
.tour-card .card-button { margin-top: auto; align-self: flex-start; }

/* Booking consent */
.check-field { display: flex; align-items: flex-start; gap: var(--space-3); }
.check-field input { width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0; flex: none; accent-color: var(--navy); }
.check-field label { margin: 0; }
.check-field + .hint { margin-top: var(--space-2); }

/* Legal and credits pages */
.legal { max-width: 46rem; }
.legal h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); margin-top: var(--space-7); }
.legal ul, .legal ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--size-sm); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--line); }
.legal th { font-weight: 600; background: var(--stone); }
mark.placeholder {
  background: var(--placeholder-bg);
  color: var(--ink);
  font-weight: 600;
  padding: 0 0.2em;
  outline: 1px dashed var(--brass-ink);
}
.credits-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.credits-list li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* Footer legal links */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: 0; }
.footer-legal-links li { margin: 0; }

/* Utility modifiers replacing former inline styles */
.note--spaced { margin-bottom: var(--space-7); }
.note--spaced-sm { margin-bottom: var(--space-6); }
.fieldset-plain { margin: 0; }
.legend-label { font-family: var(--font-text); font-size: var(--size-base); margin-bottom: var(--space-2); }
.actions--flush { margin-top: 0; }
.hint--after { margin-top: var(--space-3); }

/* Visible photo credit under a card image */
.photo-credit {
  margin: 0;
  padding: var(--space-2) var(--space-5) 0;
  font-size: var(--size-sm);
  color: var(--ink-muted);
}


/* ---------- FAQ ---------- */

.faq { max-width: var(--measure); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--brass-ink); flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding-bottom: var(--space-4); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Logo ---------- */

/* Header carries the wordmark only: one line, uppercase, Avenir Roman as in the logo sheet.
   Avenir ships with Apple systems only; other devices fall back to a neutral sans. */
.site-header .brand span {
  font-family: "Avenir", "Avenir Roman", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 30rem) { .site-header .brand span { font-size: 1rem; letter-spacing: 0.1em; } }
@media (max-width: 22.5rem) { .site-header .brand span { font-size: 0.875rem; letter-spacing: 0.08em; } }

.about-logo-frame { display: flex; justify-content: center; }
.about-logo { width: min(24rem, 100%); height: auto; }
.site-footer a.brand { display: inline-block; }
.footer-logo { width: 12rem; height: auto; }

/* ================================================================
   Single page (4 Oct 2026): top bar, hero with quick request form,
   advantages, routes, fleet, featured tours, floating WhatsApp
   ================================================================ */

/* Announcement strip above the contact bar: paper on navy-raised (about 11:1). No close button by decision. */
.announcement {
  margin: 0;
  background: var(--navy-raised);
  color: var(--on-navy);
  font-size: var(--size-sm);
  line-height: 1.4;
  text-align: center;
  padding-block: var(--space-2);
}
.announcement .container { display: block; }

/* Top bar */
.topbar {
  background: var(--navy);
  border-bottom: 1px solid var(--line-on-navy);
  font-size: var(--size-sm);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-2);
}
.topbar a { color: var(--on-navy-muted); text-decoration: none; padding-block: var(--space-1); }
.topbar a:hover { color: var(--on-navy); text-decoration: underline; }
.topbar :focus-visible { outline-color: var(--brass); }
@media (max-width: 40rem) {
  .topbar-inner { justify-content: space-between; }
  .topbar-label { display: none; }
}

/* Icons: line drawings that take the colour of the text */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 2.25rem; height: 2.25rem; color: var(--brass-ink); margin-bottom: var(--space-3); }

/* Hero: photograph with the quick request form over it.
   The photo itself is untouched (CC BY-SA): text sits on solid panels, never on the image. */
.hero-booking { position: relative; background: var(--navy); }
.hero-booking .hero-booking-photo { height: auto; aspect-ratio: 16 / 9; }
.hero-booking-inner { display: grid; gap: var(--space-5); padding-block: var(--space-6) var(--space-7); }
.hero-booking-intro h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); max-width: 14ch; }
/* The porter figure from the logo, white, as the first thing the eye meets. Decorative (alt=""). */
.hero-figure { width: 9.5rem; height: auto; margin-bottom: var(--space-5); }
@media (min-width: 56rem) { .hero-figure { width: 14rem; margin-bottom: var(--space-6); } }
.hero-sub { font-size: var(--size-lg); color: var(--on-navy-muted); max-width: var(--measure); margin: 0; }
.quick-form-card {
  background: var(--paper);
  color: var(--ink);
  border-top: 2px solid var(--brass);
  padding: var(--space-5);
}
.quick-form-title { font-size: var(--size-h3); margin-bottom: var(--space-4); }
.quick-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); max-width: none; }
.quick-form .field { margin-bottom: var(--space-4); }
.quick-form .error-summary { margin-bottom: var(--space-4); }
.hint--below { margin: var(--space-1) 0 0; }
.quick-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.quick-form-actions .button { flex: 1 1 10rem; }
.quick-form .hint--after { margin-bottom: 0; }
@media (min-width: 30rem) {
  .quick-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  .hero-booking { min-height: 44rem; display: flex; align-items: center; }
  .hero-booking .hero-booking-photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hero-booking-inner {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: end;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
  /* Top-aligned with the form so the whole title and subtitle sit above the fold at 1280x800. */
  .hero-booking-intro { padding: var(--space-6); align-self: start; }
}

/* Advantages */
.advantages-band { background: var(--stone); padding-block: var(--space-7); }
.advantages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-5); }
@media (min-width: 40rem) { .advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .advantages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.advantage h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.advantage p { margin: 0; color: var(--ink-muted); }

/* Transfers */
.routes-title { margin-bottom: var(--space-2); }
.routes-intro { max-width: var(--measure); }

/* Transfer price table. Each price is a <span class="price">; header navy, rows paper and stone. */
.price-table-wrap { margin-top: var(--space-5); }
.price-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.price-table thead th {
  background: var(--navy);
  color: var(--on-navy);
  text-align: left;
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
}
.price-table tbody tr:nth-child(odd) { background: var(--paper); }
.price-table tbody tr:nth-child(even) { background: var(--stone); }
.price-table tbody th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: var(--space-3) var(--space-4);
}
.price-table td { padding: var(--space-2) var(--space-4); vertical-align: middle; border-left: 1px solid var(--line); }
.price-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.price { font-weight: 600; }
.price-na { color: var(--ink-muted); }
.cell-label { display: none; }
.button--sm { min-height: 2.75rem; padding: var(--space-2) var(--space-4); }
.price-table-note { font-size: var(--size-sm); color: var(--ink-muted); margin-top: var(--space-3); max-width: 48rem; }
.transfers-extra { margin-top: var(--space-6); align-items: start; }
.route-card--tours { background: var(--stone); }
.route-card--tours h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.route-card--tours .card-button { align-self: flex-start; margin-top: auto; }
.route-price-note { max-width: none; }

/* Below 48rem the table becomes one card per destination. Explicit ARIA roles in the HTML keep
   the table semantics in Safari, which drops them when table elements are displayed as blocks. */
@media (max-width: 47.99rem) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table { border: 0; }
  .price-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .price-table tbody tr,
  .price-table tbody tr:nth-child(even) {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--brass);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .price-table tbody th { padding: 0 0 var(--space-2); }
  .price-table td { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-3) 0 var(--space-2); }
  .price-table td:last-child { padding-bottom: 0; }
  .price-table .price-na { display: none; }
  .cell-label { display: block; flex-basis: 100%; font-size: var(--size-sm); font-weight: 600; color: var(--ink-muted); }
}
.included { margin-top: var(--space-7); }
.included h3 { margin-bottom: var(--space-4); }

/* Four-up grid for the featured tours */
@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tour-card h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.tour-card .tour-body .tour-duration { font-size: var(--size-sm); font-weight: 600; color: var(--ink-muted); margin-bottom: var(--space-3); }
.tours-more { margin: var(--space-6) 0 0; }

/* Fleet */
.fleet-card { padding: var(--space-5); }
.fleet-card .vehicle-photo { margin-bottom: var(--space-4); }
.fleet-card h3 { margin-bottom: var(--space-1); }
.tag {
  margin: 0 0 0 auto;
  padding: 0.125rem var(--space-2);
  border: 1px solid var(--brass-ink);
  border-radius: var(--radius);
  color: var(--brass-ink);
  font-size: var(--size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fleet-model { color: var(--ink-muted); margin-bottom: var(--space-4); }
.fleet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; }
.fleet-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.fleet-specs li { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.fleet-specs .icon { color: var(--brass-ink); }

/* About */
.about-text { margin-top: var(--space-5); }

/* Floating WhatsApp button, on every page */
.whatsapp-float {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  border: 1px solid var(--brass);
  box-shadow: var(--shadow-float);
}
.whatsapp-float:hover { background: var(--navy-raised); }
.whatsapp-float:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 6px var(--brass); }
/* Room at the end of the page so the button never covers the legal links. */
.site-footer { padding-bottom: calc(var(--space-6) + 4.5rem); }

@media print {
  .topbar, .whatsapp-float, .quick-form-card { display: none; }
}

/* ---------- QA fixes (4 Oct 2026) ---------- */

/* Select drawn the same in every browser (Safari kept its native 28 px control): chevron from two gradients, tokens only. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

/* WebKit focuses the inner segments of date and time, so the field never gets :focus-visible. Same ring as the other fields. */
main input[type="date"]:focus-within,
main input[type="time"]:focus-within {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--brass);
  border-radius: var(--radius);
}


/* Bigger target for the name in the header on narrow screens. */
.site-header .brand { padding-block: var(--space-1); }

/* Floating WhatsApp on small screens: smaller, closer to the corner, and hidden while the hero form
   (which has its own WhatsApp button) is on screen, so it never sits on the hero text. */
@media (max-width: 40rem) {
  .whatsapp-float { width: 3rem; height: 3rem; right: var(--space-3); bottom: var(--space-3); }
  .whatsapp-float svg { width: 24px; height: 24px; }
  .whatsapp-float.is-hidden { visibility: hidden; opacity: 0; }
}
@media (max-width: 40rem) and (prefers-reduced-motion: no-preference) {
  .whatsapp-float { transition: opacity 0.2s ease, visibility 0.2s; }
}

/* Instagram link: icon and handle, same colour as the surrounding links. */
.ig-link,
.site-footer a.ig-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.ig-link .icon { width: 1.125em; height: 1.125em; }