/* ==========================================================================
   Elite Travels — homepage stylesheet

   Rebuilt against the client's second design (Oct 2026): navy and gold on
   cream, a full-bleed hero with a curved base, seven horizontal service rows
   and a dark contact band. The previous black/gold card layout is gone.

   One deliberate deviation, same as the first build: the golds in the design
   do not carry white text at WCAG AA (the mockup's button gold measures about
   2.6:1). Decorative gold — rules, bullets, borders — is kept exactly as
   drawn; gold that sits *behind white text* or *is* text is darkened just far
   enough to pass. Every such value is noted below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --navy: #16286b;              /* headings. 12.9:1 on cream */
  --navy-deep: #0f1c4d;
  --ink: #0a0a0a;
  --cream: #fdfaf5;             /* page background */
  --paper: #ffffff;             /* form fields */

  --gold: #c9a14a;              /* decorative only — rules, bullets, borders */
  --gold-soft: #e7d4a8;
  --gold-ink: #8d6820;          /* gold *as text* on cream — 4.87:1 */
  --gold-btn-a: #a06e26;        /* white on this — 4.59:1 */
  --gold-btn-b: #8a5c1d;        /* white on this — 6.06:1 */

  --wa: #15803d;                /* white on this — 5.01:1 */
  --wa-dark: #11672f;

  --text: #39352f;
  --text-soft: #5d574e;
  --line: #e3d9c7;
  --required: #c62828;

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --shell-max: 1340px;
  --gutter: 28px;
  --header-h: 96px;
  --radius: 10px;
  --radius-sm: 6px;

  /* Hero curve. Flush with the bottom of the hero, so the photograph runs all
     the way down to the line. The comp's swing is 2.40% of the page width,
     which over the 38 used units of a 60-unit viewBox works out at 3.8vw of
     element height. The comp's nominal hero bottom falls at y=24 of that
     viewBox, i.e. 0.6 of the height above the element's own bottom, and the
     hero is grown by that much so the line lands where the comp puts it. */
  --curve-h: clamp(26px, 3.8vw, 72px);
  --curve-rest: calc(var(--curve-h) * 0.6);

  /* The comp's hero is 32.4% of the page width. That is fine on its fixed
     1085px canvas, but on a wide monitor it leaves the photograph short and a
     lot of empty cream above the services heading, so the height also tracks
     the viewport and takes whichever is larger. */
  --hero-base: clamp(420px, max(32.4vw, 76svh), 900px);
  --hero-pad-b: clamp(44px, 5.6vw, 110px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   3. Buttons and pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: linear-gradient(100deg, var(--gold-btn-a), var(--gold-btn-b));
  color: #fff;
  box-shadow: 0 2px 10px rgba(80, 55, 10, 0.22);
}
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); filter: none; }

.btn__chev { width: 16px; height: 16px; flex: none; }
.btn__wa { width: 22px; height: 22px; flex: none; }

.btn--hero { font-size: 15px; padding: 17px 30px; }
.btn--learn { font-size: 11.5px; padding: 10px 20px; }
.btn--submit { font-size: 15px; padding: 19px 24px; flex: 1 1 0; min-width: 0; }

/* Header pills — same shape, three liveries */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: filter 0.18s var(--ease);
}
.pill:hover { filter: brightness(1.1); }
.pill svg { width: 17px; height: 17px; flex: none; }

.pill--wa { background: var(--wa); color: #fff; }
.pill--dark { background: var(--navy-deep); color: #fff; border: 1px solid rgba(201, 161, 74, 0.5); }
.pill--gold { background: linear-gradient(100deg, var(--gold-btn-a), var(--gold-btn-b)); color: #fff; }

/* --------------------------------------------------------------------------
   4. Masthead

   Transparent over the hero photograph, opaque once the hero is behind you.
   The solid state is applied by JS; without JS the header simply stays
   transparent, which is readable because it only ever overlaps the hero.
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.masthead--solid {
  background: rgba(10, 12, 26, 0.94);
  box-shadow: 0 1px 0 rgba(201, 161, 74, 0.35);
}

.masthead__inner {
  height: 100%;
  /* Measured off the client's comp: the logo sits 3.5% of the page width from
     one edge and the Contact pill 3.2% from the other, so the header is not
     inside the 1340px column the rest of the page uses. */
  padding-inline: clamp(16px, 3.5vw, 60px);
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand { flex: none; min-width: 0; }
/* The reference sets the mark at ~28% of the page width. Driving it from the
   width rather than a fixed height is what holds that ratio as the viewport
   changes. */
.brand img {
  width: clamp(250px, 27vw, 430px);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-width: 0;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.nav__link {
  position: relative;
  display: block;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.2s var(--ease);
}
.nav__link:hover { color: var(--gold-soft); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold-soft); }

.nav__actions { display: flex; align-items: center; gap: 10px; }

/* Language switcher. Two plain links, because each language is a real page
   (see tools/build-i18n.py) rather than a client-side swap. */
.lang {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
}
.lang__opt {
  padding: 4px 2px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  transition: color 0.18s var(--ease);
}
.lang__opt:hover { color: #fff; }
.lang__opt.is-active { color: var(--gold-soft); }
.lang__opt + .lang__opt {
  position: relative;
  padding-left: 10px;
}
.lang__opt + .lang__opt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(201, 161, 74, 0.55);
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  flex: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 26, 0.72);
  border: 1px solid rgba(201, 161, 74, 0.6);
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
}
.burger svg { width: 24px; height: 24px; }
.burger__close { display: none; }
.nav-open .burger__open { display: none; }
.nav-open .burger__close { display: block; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  /* Tall enough that the photograph still reaches the wave's rest line after
     the wave is laid over its bottom edge. */
  min-height: calc(var(--hero-base) + var(--curve-rest));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Keeps the headline legible over whatever photograph is dropped in. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 32%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0) 75%);
}

/* The headline is inset further than the content column — 8.6% of the page
   width in the reference, against the services column's ~6%. */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Measured up from the wave's rest line, not the hero's box, so the
     headline keeps its distance from the visible edge. */
  padding: 0 clamp(20px, 8.6vw, 180px) calc(var(--curve-rest) + var(--hero-pad-b));
}

.hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(27px, 3.15vw, 58px);
  line-height: 1.14;
  color: #fff;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.55);
  margin-bottom: 20px;
}
.hero__title span { display: block; }

/* The wave's rest line sits at y=44 of the 120-unit viewBox, so 63.3% of the
   artwork hangs below it. Pulling the element down by that fraction lands the
   rest line on the hero's bottom edge: the crests rise a little into the
   photograph and the trough drops into the services section, which is the
   same cream, so the fill is invisible there and only the gold edge reads.

   Anchoring it at bottom:0 instead put the whole wave inside the hero and cost
   the photograph its bottom ~100px. */
.hero__curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  width: 100%;
  height: var(--curve-h);
  overflow: visible;
  pointer-events: none;
}

.hero__curve-fill { fill: var(--cream); }

/* The gold from the comp. Sampled across the full width it is a warm band of
   about (195,165,118) sitting 2-3px above the cream edge, at every point —
   so it is a uniform hairline, not one that fades out at the ends. */
.hero__curve-edge {
  fill: none;
  stroke: #c9a878;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   6. Section heading
   -------------------------------------------------------------------------- */

/* Tightened from the comp's 6.82% of page width down to roughly 4%: at the
   comp's own canvas width the two are close, but on a wide monitor the literal
   ratio left an obvious band of empty cream between the curve and the heading. */
.services { padding: clamp(26px, 3.2vw, 64px) 0 0; }

.sechead { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }

.sechead__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
/* The gold rules either side of the title. Flex basis caps their length so
   they do not run to the page edge on wide screens. */
.sechead__title::before,
.sechead__title::after {
  content: "";
  height: 2px;
  flex: 0 1 clamp(40px, 12vw, 170px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.sechead__title::after { background: linear-gradient(90deg, var(--gold), transparent); }

.sechead__sub {
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--gold-ink);
}

/* --------------------------------------------------------------------------
   7. Service rows
   -------------------------------------------------------------------------- */

.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 36%, 500px);
  gap: clamp(22px, 2.6vw, 40px);
  align-items: stretch;
  padding: clamp(16px, 1.9vw, 24px) 0;
  border-top: 1px solid rgba(201, 161, 74, 0.45);
}
.srow:last-child { border-bottom: 1px solid rgba(201, 161, 74, 0.45); }

.srow__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.85vw, 25px);
  line-height: 1.18;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--navy);
}

.srow__tag {
  margin-top: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 16.5px);
  color: var(--gold-ink);
}

.srow__text {
  margin-top: 7px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Two columns, filled down then across, so the reading order in the markup
   matches the order on screen. */
.srow__list {
  margin-top: 11px;
  columns: 2;
  column-gap: clamp(20px, 3vw, 48px);
}
.srow__list li {
  break-inside: avoid;
  position: relative;
  padding-left: 21px;
  margin-bottom: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.srow__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Emphasised bullet. A class rather than a <strong>, because the i18n pass
   sets textContent on the li and would strip any inline markup. */
.srow__list .is-feature { font-weight: 700; color: var(--navy); }

.srow .btn--learn { margin-top: 14px; align-self: flex-start; }

/* The number plate sits at 86-93% across this particular photograph, and the
   stacked mobile card shows 78% of the width against desktop's 64%, so it
   creeps into frame there. Scaling the image inside a clipped wrapper crops it
   out without panning the composition off-centre. The radius and shadow move
   to the wrapper, or the wrapper's clip would cut the shadow off. */
#svc-chauffeur .srow__media {
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 22px rgba(60, 45, 20, 0.16);
}
#svc-chauffeur .srow__media img {
  transform: scale(1.16);
  border-radius: 0;
  box-shadow: none;
}


/* The photograph fills the row rather than floating in the middle of it,
   so the rows read as bands. Cover-cropping means the supplied file only has
   to be roughly 3:2 and large enough, not an exact size. */
.srow__media { display: flex; min-height: 190px; }
.srow__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 22px rgba(60, 45, 20, 0.16);
}

/* --------------------------------------------------------------------------
   8. Contact band
   -------------------------------------------------------------------------- */

.contact {
  position: relative;
  isolation: isolate;
  margin-top: clamp(36px, 5vw, 64px);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}

.contact__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* White headings and gold links sit straight over this. At 0.55 the sunset
     put white at 3.5:1 against the brightest a percent of the image; 0.36
     brings it to 4.95:1. */
  opacity: 0.36;
}

.contact__inner { padding-block: clamp(26px, 3.4vw, 44px); text-align: center; }

.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 28px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--gold-soft);
}

.contact__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(18px, 2.4vw, 30px);
}

.contact__item {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  position: relative;
}
/* Gold dividers between items, drawn on the item rather than as separate
   elements so they disappear automatically when the row wraps. */
.contact__item + .contact__item::before {
  content: "";
  position: absolute;
  left: calc(clamp(18px, 3vw, 44px) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: rgba(201, 161, 74, 0.55);
}

.contact__icon {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(201, 161, 74, 0.7);
  border-radius: 50%;
  color: var(--gold);
}
.contact__icon--wa { color: #36d16f; border-color: rgba(54, 209, 111, 0.6); padding: 6px; }

.contact__label {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.contact__label--social { grid-column: 1 / 3; }

.contact__value {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--gold-soft);
}
.contact__value:hover { color: #fff; text-decoration: underline; }

.contact__social { display: flex; gap: 10px; grid-column: 1 / 3; margin-top: 4px; }
.contact__social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(201, 161, 74, 0.5);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.18s var(--ease);
}
.contact__social a:hover { background: rgba(201, 161, 74, 0.3); }
.contact__social svg { width: 16px; height: 16px; }

.legal {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px var(--gutter);
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  /* The skyline strip runs behind this line and has a bright sunset in it,
     so the text needs its own ground rather than relying on the artwork. */
  background: rgba(4, 4, 6, 0.82);
  color: rgba(255, 255, 255, 0.78);
}
.legal span + span { margin-left: 6px; }

/* --------------------------------------------------------------------------
   9. Quote dialog
   -------------------------------------------------------------------------- */

.quote {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: clamp(28px, 4vw, 52px);
  border: 2px solid var(--gold);
  border-radius: 16px;
  background: var(--cream);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.quote::backdrop { background: rgba(6, 8, 18, 0.72); }
.quote:not([open]) { display: none; }

.quote__close-form { position: sticky; top: 0; height: 0; text-align: right; z-index: 2; }
.quote__close {
  position: relative;
  top: -4px;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
}
.quote__close:hover { background: var(--navy); color: #fff; }
.quote__close svg { width: 20px; height: 20px; }

.quote__head { text-align: center; margin-bottom: clamp(20px, 3vw, 34px); }
.quote__rule {
  display: block;
  width: 72px;
  height: 3px;
  margin: 0 auto 14px;
  background: var(--gold);
  border-radius: 2px;
}
.quote__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--navy);
}

.quote__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px) clamp(16px, 2.4vw, 32px);
}
.field--wide,
.quote__error,
.quote__actions { grid-column: 1 / -1; }

.field { min-width: 0; }

.field > label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--navy);
}
.field > label b { color: var(--required); font-weight: 700; }

.control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.control:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.22);
}

.control__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-inline: 16px 0;
  color: var(--navy);
}

.control__chev {
  position: absolute;
  inset-inline-end: 14px;
  width: 20px;
  height: 20px;
  color: var(--navy);
  pointer-events: none;
}

.control input,
.control select,
.control textarea {
  flex: 1;
  min-width: 0;
  padding: 15px 16px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  appearance: none;
}
.control select { padding-inline-end: 40px; cursor: pointer; }
.control input:focus,
.control select:focus,
.control textarea:focus { outline: none; }
.control ::placeholder { color: #9b958c; opacity: 1; }

.control--area { padding: 4px 0; }
.control--area textarea { padding-inline: 18px; resize: vertical; min-height: 110px; line-height: 1.5; }

/* Date and time keep the native picker; this just colours its button. */
.control input[type="date"]::-webkit-calendar-picker-indicator,
.control input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.control:has([aria-invalid="true"]) { border-color: var(--required); }

/* Honeypot. Off-screen rather than display:none — some bots skip fields that
   are explicitly hidden, which defeats the point. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.quote__sent {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(24px, 4vw, 48px) 8px;
}
.quote__tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  color: var(--wa);
}
.quote__sent h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--navy);
}
.quote__sent p { margin-top: 8px; color: var(--text-soft); }
.quote__sent-call a { color: var(--gold-ink); font-weight: 700; }

.quote__error {
  margin: 0;
  padding: 12px 16px;
  background: #fdeceb;
  border: 1px solid #f1b9b5;
  border-radius: var(--radius-sm);
  color: #8c1f1a;
  font-size: 14.5px;
}
.quote__error[hidden] { display: none; }

.quote__actions { display: flex; gap: clamp(14px, 2vw, 26px); }

/* --------------------------------------------------------------------------
   10. Floating WhatsApp button
   -------------------------------------------------------------------------- */

.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.wa-fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa-fab:hover { background: var(--wa-dark); }
.wa-fab svg { width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   11. Tablet
   -------------------------------------------------------------------------- */

/* Header budget at 1440: 100 padding + 389 logo + 452 nav + 425 pills + 40
   gaps = 1306 of 1339 available. Below ~1400 that stops working, so the
   WhatsApp and Callback pills drop their labels. */
@media (max-width: 1400px) {
  .brand img { width: clamp(220px, 25vw, 360px); }
  .nav__list { gap: 14px; }
  .pill { padding: 9px 12px; }
  .pill--wa span, .pill--dark span { display: none; }
}

@media (max-width: 1180px) {
  :root { --header-h: 84px; }
  .nav__list { gap: 13px; }
  .nav__link { font-size: 10.5px; letter-spacing: 0.04em; }
  .pill { padding: 9px 11px; font-size: 11.5px; }
  .pill--dark span, .pill--wa span { display: none; }
  .brand img { width: clamp(190px, 24vw, 300px); }
  .masthead__inner { gap: 16px; }
}

/* Stack at the same width the nav collapses at. Between 961 and 1024 the
   media column was squeezed to roughly square, which suited none of the
   photographs. */
@media (max-width: 1024px) {
  .srow { grid-template-columns: 1fr; gap: 18px; }
  .srow__media { order: -1; min-height: 0; }
  .srow__media img { aspect-ratio: 16 / 7; height: auto; }
  .srow__text { max-width: none; }
}

/* --------------------------------------------------------------------------
   12. Mobile

   The nav collapses into a full-screen overlay. Everything else is a single
   column; the form in particular must not stay two-up, because the fields
   would fall below a comfortable tap target.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --header-h: 76px; --gutter: 18px; }

  .burger { display: inline-flex; }
  .brand img { width: min(54vw, 300px); }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 55;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 90px 24px 40px;
    background: rgba(8, 10, 22, 0.97);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), visibility 0.22s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; }

  .nav__list { flex-direction: column; gap: 4px; width: 100%; }
  .nav__list li { width: 100%; }
  .nav__link {
    padding: 15px 4px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid rgba(201, 161, 74, 0.22);
  }
  .nav__link::after { display: none; }

  .nav__actions { flex-direction: column; width: 100%; max-width: 320px; gap: 12px; }
  .nav__actions .pill { width: 100%; justify-content: center; padding: 15px 16px; font-size: 13px; }
  .nav__actions .pill span { display: inline; }

  /* Sits to the right of the burger. Flex order does the swap, so the DOM
     keeps the desktop sequence. */
  .lang {
    order: 1;
    gap: 5px;
    z-index: 58;
  }
  .burger { margin-inline-start: auto; }
  .lang__opt { font-size: 10px; padding: 14px 2px; letter-spacing: 0.03em; }
  .lang__opt + .lang__opt { padding-left: 8px; }
  .lang__opt + .lang__opt::before { height: 11px; }

  /* The logo has to give up a little width to make room for the pair. */
  .brand img { width: min(46vw, 250px); }

  .burger { position: relative; z-index: 58; margin-inline-start: auto; }

  :root {
    --hero-base: clamp(380px, 62svh, 560px);
    --hero-pad-b: clamp(50px, 8svh, 90px);
  }
  /* A phone sees only ~25% of this photograph's width, so the headline and
     the van are competing for the same 375px. Three things buy separation:
     a slightly smaller headline, a crop nudged left so the van sits further
     right, and a bottom scrim so what does still overlap reads as deliberate
     layering rather than a collision. The real fix is a portrait-cropped hero
     for phones — see docs/image-spec.md. */
  .hero__title {
    font-size: clamp(22px, 6.3vw, 34px);
    max-width: 15ch;
  }

  .hero__media img { object-position: 46% center; }

  /* Smaller on a phone, which also keeps it clear of the van at 320px.
     Padding is trimmed so the label fills the button rather than floating in
     it, and held at the point where the tap target is still ~44px tall, which
     is the floor for a comfortable hit on a phone. */
  .btn--hero { font-size: 14px; padding: 13px 14px; gap: 6px; }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 28%),
      linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.38) 32%, rgba(0, 0, 0, 0) 58%);
  }

  .sechead__title::before, .sechead__title::after { flex-basis: 24px; }

  .srow__list { columns: 1; }
  .srow .btn--learn { width: 100%; }

  .contact__row { flex-direction: column; align-items: stretch; gap: 14px; }
  .contact__item { justify-content: start; padding: 10px 0; }
  .contact__item + .contact__item::before {
    left: 0;
    right: 0;
    top: -7px;
    transform: none;
    width: auto;
    height: 1px;
  }

  .quote { padding: 22px 18px 26px; border-radius: 12px; }
  /* The close button is pinned top-right; drop the heading clear of it
     rather than letting the title run underneath. */
  .quote__close { width: 36px; height: 36px; }
  .quote__close svg { width: 17px; height: 17px; }
  .quote__head { margin-top: 30px; }
  .quote__title { font-size: 23px; }
  .quote__form { grid-template-columns: minmax(0, 1fr); }
  .quote__actions { flex-direction: column; }
  .btn--submit { width: 100%; }

  /* At its own proportions the skyline strip is only ~27px tall on a phone,
     which reads as a stray line. Crop it instead so it stays a skyline. */
  .contact__bg { top: auto; height: 150px; object-position: center bottom; }

  .wa-fab {
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
  }
  .wa-fab svg { width: 29px; height: 29px; }
}

/* Stop the page behind the overlay from scrolling. */
body.nav-open { overflow: hidden; }