/* ============================================================================
   Royal Singh Limo — RoyalSinghBCN.com
   Hand-written CSS. No framework, no build step.

   TOKENS
   Six named values. Three layered warm near-blacks give the page depth; one
   accent; two text tones. The accent (--brass) is sampled from the client's
   existing wordmark, so the site and the share card are one system.

   ACCENT DISCIPLINE — --brass appears ONLY on: hairlines and rules, small-caps
   eyebrows, the docket rail and its ticks, focus rings, the reference number
   and mono capacity figures. It is never a button fill. The primary CTA is
   solid --ivory on black, which reads more expensive than gold.
   ========================================================================= */

/* ---------- 1. Fonts ----------------------------------------------------- */

/* Bodoni Moda ships two optical cuts: a display cut with fine hairlines for
   the 152px hero, and a sturdier text cut so headings don't disintegrate. */
@font-face {
  font-family: "Bodoni Display";
  src: url("../fonts/bodonimoda-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Text";
  src: url("../fonts/bodonimoda-text-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibmplexmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* the six */
  --ink-900: #0C0A07;   /* page base — warm near-black, never pure #000     */
  --ink-800: #141109;   /* raised surface — the form panel only             */
  --ink-700: #1E1A12;   /* ruled rows, inset wells                          */
  --brass:   #CAA76D;   /* the single accent — 8.6:1 on base                */
  --ivory:   #F2ECE1;   /* display text, primary CTA fill — 17.1:1          */
  --bone:    #B9B1A4;   /* body text — 9.3:1                               */

  /* derived alphas of the accent — not additional colours */
  --rule:        rgba(202, 167, 109, .26);
  --rule-soft:   rgba(202, 167, 109, .14);
  --rule-strong: rgba(202, 167, 109, .55);
  /* The rail carries the signature element, so it sits a step above the
     ordinary hairlines — present at a glance, still quiet. */
  --rail-line:   rgba(202, 167, 109, .42);

  --font-display: "Bodoni Display", "Bodoni Text", Georgia, "Times New Roman", serif;
  --font-head:    "Bodoni Text", Georgia, "Times New Roman", serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* layout */
  --shell: 1180px;
  --gutter: 18px;
  --rail-pad: 22px;            /* content indent from the docket rail */
  --section-y: 72px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --rail-pad: 52px; --section-y: 112px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 56px; --rail-pad: 104px; --section-y: 148px; }
}

/* ---------- 3. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (min-width: 768px) { body { font-size: 1.125rem; } }

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* Visible keyboard focus everywhere, in the accent. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brass); color: var(--ink-900); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--ivory); color: var(--ink-900);
  padding: 14px 18px; font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 4. Type primitives ------------------------------------------- */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

/* small-caps eyebrow — real tracking, set in the accent */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

.h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ivory);
}

.h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  color: var(--ivory);
}

.lede {
  max-width: 58ch;
  margin-top: 22px;
  color: var(--bone);
}

.mono {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
}

/* ---------- 5. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 30px;
  font-family: var(--font-mono);
  font-size: .78125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}

/* Primary: solid ivory on black. Never gold. */
.btn--primary {
  background: var(--ivory);
  color: var(--ink-900);
  border: 1px solid var(--ivory);
}
.btn--primary:hover { background: #fff; border-color: #fff; transform: translateY(-2px); }

/* Secondary: quiet ghost. */
.btn--ghost {
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(242, 236, 225, .28);
}
.btn--ghost:hover { border-color: var(--ivory); transform: translateY(-2px); }

/* The one accent-outlined action, in the header. */
.btn--accent {
  background: transparent;
  color: var(--brass);
  border: 1px solid var(--rule-strong);
  min-height: 44px;
  padding: 11px 20px;
}
.btn--accent:hover { border-color: var(--brass); background: rgba(202, 167, 109, .08); }

.btn--block { width: 100%; }

/* ---------- 6. Header ---------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px 0;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              padding .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(12, 10, 7, .92);
  border-bottom-color: var(--rule-soft);
  padding: 10px 0;
  backdrop-filter: saturate(140%) blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}

.logo { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.logo picture { display: block; flex: none; }
/* The crest carries fine filigree and small lettering, so it is set larger
   than a simple monogram would need to be in order to stay readable. */
.logo__mark { width: auto; height: 36px; flex: none; }
@media (min-width: 620px) { .logo__mark { height: 44px; } }
@media (min-width: 768px) { .logo__mark { height: 52px; } }
.site-header.is-stuck .logo__mark { height: 36px; }
@media (min-width: 768px) { .site-header.is-stuck .logo__mark { height: 44px; } }
.logo__text {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
}
.logo__text small {
  display: block;
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .3em;
  color: var(--brass);
  margin-top: 3px;
}

/* Minimal anchor nav. Hidden on mobile — the booking action always stays
   visible, so there is no hamburger burying the conversion path. */
.site-nav { display: none; }
@media (min-width: 900px) {
  .site-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 8px; }
  .site-nav a {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bone);
    padding: 14px 3px;
    position: relative;
    transition: color .25s var(--ease);
  }
  .site-nav a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--brass);
    transition: right .3s var(--ease);
  }
  .site-nav a:hover { color: var(--ivory); }
  .site-nav a:hover::after { right: 0; }
}

.header-cta { flex: none; }
.header-cta .btn { white-space: nowrap; }

/* The crest is wide, so below 620px the action shortens to "WhatsApp" rather
   than letting the lockup and the button collide. The booking action is never
   hidden — only its label gets shorter. */
.cta-short { display: inline; }
.cta-long  { display: none; }
@media (min-width: 620px) {
  .cta-short { display: none; }
  .cta-long  { display: inline; }
}
@media (max-width: 419px) {
  .header-cta .btn { padding: 11px 14px; font-size: .6875rem; letter-spacing: .1em; }
}

/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 96px;
  padding-bottom: 34px;
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-top: 130px; padding-bottom: 56px; } }

.hero__media { position: absolute; inset: 0; z-index: 0; }
/* <picture> must be told to fill too, otherwise the img's height:100% resolves
   against an auto-height box and the photo collapses to its intrinsic size. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* Scrim weighted LEFT, because the photograph's car sits centre-right and its
   upper-left quadrant is an out-of-focus façade — real empty space for type. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(12,10,7,.94) 0%, rgba(12,10,7,.82) 34%,
                    rgba(12,10,7,.42) 62%, rgba(12,10,7,.30) 100%),
    linear-gradient(to top, rgba(12,10,7,.96) 0%, rgba(12,10,7,.10) 46%);
}

/* No width here — .shell already sets it. Declaring width:100% would override
   .shell (same specificity, later in the file) and push content to the edge. */
.hero__body { position: relative; z-index: 2; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 11vw, 9.5rem);
  line-height: .92;                /* tight display leading */
  letter-spacing: -.02em;
  color: var(--ivory);
  margin: 0;
}
.hero__title span { display: block; }
.hero__title .is-rest {
  font-size: .34em;
  line-height: 1.06;
  letter-spacing: -.005em;
  color: rgba(242, 236, 225, .82);
  margin-top: .18em;
}

.hero__lede {
  max-width: 46ch;
  margin-top: 18px;
  font-size: 1rem;
  color: var(--bone);
}
@media (min-width: 768px) { .hero__lede { margin-top: 26px; font-size: 1.125rem; } }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
@media (min-width: 768px) { .hero__actions { gap: 14px; margin-top: 34px; } }
/* Full-width stacked buttons on the narrowest phones: two 44px+ targets that
   never wrap mid-label, and the primary CTA stays above the fold. */
@media (max-width: 479px) { .hero__actions .btn { flex: 1 1 100%; } }

/* trust strip */
.trust {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
}
@media (min-width: 768px) {
  .trust {
    margin-top: 46px; padding-top: 22px;
    gap: 10px 26px; font-size: .6875rem; letter-spacing: .14em;
  }
}
.trust li { display: flex; align-items: center; gap: 12px; }
.trust li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--brass); transform: rotate(45deg);
}

/* ---------- 8. THE DOCKET RAIL — signature element ----------------------
   A hairline rule in the left gutter carrying square ledger ticks, so the page
   reads as a chauffeur's job sheet.

   Two rules keep it structural rather than decorative:
   1. It encodes the funnel, not a section count — digits appear exactly ONCE,
      in "How it works", where a genuine sequence earns them.
   2. It thickens to a double rule at the booking form, the conversion point.
   ------------------------------------------------------------------------ */

.docket { position: relative; }

.docket::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--rail-line) 40px,
    var(--rail-line) calc(100% - 120px),
    transparent 100%
  );
}

.docket-section {
  position: relative;
  padding-left: var(--rail-pad);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* A ruled ledger mark, not a timeline dot: a horizontal rule crossing the
   spine with a small square set on it. */
.docket-section > .tick {
  position: absolute;
  left: 0;
  top: calc(var(--section-y) + 6px);
  width: 10px; height: 10px;
  margin-left: -4.5px;
  background: var(--ink-900);
  border: 1px solid var(--brass);
  transform: rotate(45deg);
}
/* the cross-rule — rotated back so it stays horizontal */
.docket-section > .tick::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 1px;
  margin: -0.5px 0 0 -15px;
  background: var(--rail-line);
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}
.docket-section > .tick::after {
  content: "";
  position: absolute; inset: 2px;
  background: var(--brass);
  opacity: .28;
  transition: opacity .5s var(--ease);
}
.docket-section.is-visible > .tick::after { opacity: 1; }

/* rotated rail label — desktop only, duplicates the visible eyebrow so it is
   hidden from assistive tech */
.docket-section > .rail-label {
  display: none;
  position: absolute;
  left: 0; top: calc(var(--section-y) + 34px);
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-50%);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(202, 167, 109, .8);
  white-space: nowrap;
  pointer-events: none;
}
@media (min-width: 1100px) { .docket-section > .rail-label { display: block; } }

/* the form's stretch of rail doubles */
.docket-section--anchor::before {
  content: "";
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--rail-line) 60px,
              var(--rail-line) calc(100% - 60px), transparent);
}
.docket-section--anchor > .tick {
  background: var(--brass);
  border-color: var(--brass);
}

/* ---------- 9. Services -------------------------------------------------- */

.services {
  display: grid;
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--rule-soft);
}
@media (min-width: 700px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  padding: 30px 0;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 700px) {
  .service { padding: 34px 32px 34px 0; }
  .service:nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--rule-soft); }
}
@media (min-width: 1100px) {
  .service { padding: 38px 34px 38px 0; }
  .service:nth-child(2n) { padding-left: 0; border-left: 0; }
  .service:not(:nth-child(3n + 1)) {
    padding-left: 34px;
    border-left: 1px solid var(--rule-soft);
  }
}

.service__name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--ivory);
  margin-bottom: 10px;
}
.service__copy { font-size: .9375rem; line-height: 1.6; margin: 0; }

/* ---------- 10. Fleet ---------------------------------------------------- */

.fleet {
  display: grid;
  gap: 28px;
  margin-top: 52px;
}
@media (min-width: 760px) { .fleet { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.vehicle {
  border: 1px solid var(--rule-soft);
  background: linear-gradient(to bottom, rgba(30, 26, 18, .5), rgba(20, 17, 9, .2));
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.vehicle:hover { border-color: var(--rule); transform: translateY(-4px); }

.vehicle__media { overflow: hidden; border-bottom: 1px solid var(--rule-soft); }
.vehicle__media img {
  width: 100%; height: auto;
  transition: transform .7s var(--ease);
}
.vehicle:hover .vehicle__media img { transform: scale(1.035); }

.vehicle__body { padding: 24px 22px 26px; }

.vehicle__tier {
  font-family: var(--font-head);
  font-size: 1.375rem;
  color: var(--ivory);
  line-height: 1.1;
}
.vehicle__model {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 8px;
}

/* capacity figures set in the mono face, ruled like a spec sheet */
.spec {
  display: flex;
  margin-top: 20px;
  border-top: 1px solid var(--rule-soft);
}
.spec div {
  flex: 1;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
}
.spec div + div { border-left: 1px solid var(--rule-soft); padding-left: 16px; }
.spec b {
  display: block;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--ivory);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

/* Supporting photography. Each band earns its place by evidencing a claim
   made in the copy beside it, rather than decorating the gap. */
.band { margin: 46px 0 0; }
.band picture { display: block; border: 1px solid var(--rule-soft); }
.band img { width: 100%; height: auto; }
.band figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.5;
  color: rgba(185, 177, 164, .75);
}
@media (min-width: 768px) { .band { margin-top: 60px; } }

/* ---------- 11. How it works — the one place digits are earned ----------- */

.steps { margin-top: 52px; border-top: 1px solid var(--rule-soft); }

.step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0 20px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 768px) {
  .step { grid-template-columns: 110px 1fr; gap: 0 40px; padding: 34px 0; }
}

.step__no {
  font-family: var(--font-mono);
  font-size: .9375rem;
  letter-spacing: .1em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
@media (min-width: 768px) { .step__no { font-size: 1.125rem; } }

.step__name {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  color: var(--ivory);
  margin-bottom: 8px;
}
.step__copy { font-size: .9375rem; margin: 0; max-width: 54ch; }

/* ---------- 12. Booking form — the centre of gravity --------------------
   The only raised panel on the page. Everything else is ruled and open, so
   this reads as the most designed object without needing to shout.
   ------------------------------------------------------------------------ */

.panel {
  margin-top: 46px;
  background: var(--ink-800);
  border: 1px solid var(--rule);
  padding: 26px 20px 30px;
}
@media (min-width: 768px) { .panel { padding: 40px 40px 44px; } }

.panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
.panel__head span:last-child { color: rgba(185, 177, 164, .7); letter-spacing: .14em; }

.form-grid { display: grid; gap: 0; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; column-gap: 34px; } }

/* ruled rows, docket language */
.field { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 9px;
}
.field label .opt {
  color: rgba(185, 177, 164, .72);
  letter-spacing: .12em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  /* A persistent rule, so a field with no placeholder still reads as an input
     rather than as empty space. */
  border-bottom: 1px solid rgba(185, 177, 164, .22);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 1rem;             /* >=16px so iOS does not zoom on focus */
  line-height: 1.4;
  border-radius: 0;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; padding-top: 6px; }

.field input::placeholder, .field textarea::placeholder {
  color: rgba(185, 177, 164, .38);
}

.field input:hover, .field select:hover, .field textarea:hover {
  border-bottom-color: rgba(185, 177, 164, .45);
}
/* Focus keeps the brass underline AND a brass ring. Suppressing the outline
   here would hand the inputs back to the browser's default ivory ring, which
   is the one focus style on the page that would not be ours. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-bottom-color: var(--brass);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.field:focus-within label { color: var(--ivory); }

/* native select needs its own arrow once appearance is stripped */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23CAA76D' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.field select option { background: var(--ink-800); color: var(--ivory); }

/* date/time pickers */
.field input[type="date"],
.field input[type="time"] { position: relative; }
.field input::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(24%) saturate(700%) hue-rotate(1deg) brightness(92%);
  cursor: pointer;
  opacity: .85;
}

/* inline validation — says what is wrong and how to fix it */
.field__error {
  display: none;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  line-height: 1.45;
  color: #E8B4A0;                /* desaturated warm — no red flash */
}
.field.has-error .field__error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: #E8B4A0; }
.field.has-error label { color: #E8B4A0; }

.form-foot {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.form-foot .btn { flex: 1 1 260px; }
.form-note {
  flex: 1 1 240px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  line-height: 1.55;
  color: rgba(185, 177, 164, .75);
  margin: 0;
}

/* confirmation state */
.confirm { display: none; }
.confirm.is-active { display: block; }
.form-wrap.is-hidden { display: none; }

.svg-sprite { position: absolute; }

.confirm__label {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}

.confirm__copy--tight { margin-top: 12px; }

.confirm__ref {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  letter-spacing: .12em;
  color: var(--brass);
  margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}
.confirm__copy { max-width: 46ch; margin-top: 18px; }
.confirm__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.confirm__actions .btn { flex: 1 1 220px; }

.link-quiet {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-quiet:hover { color: var(--ivory); border-color: var(--brass); }

/* ---------- 13. About ---------------------------------------------------- */

.about { display: grid; gap: 34px; margin-top: 52px; }
@media (min-width: 860px) {
  .about { grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
}
.about__portrait { border: 1px solid var(--rule-soft); }
.about__portrait img { width: 100%; height: auto; }

.about__copy p { margin-bottom: 20px; max-width: 60ch; }
.about__copy p:last-child { margin-bottom: 0; }

.credentials {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  gap: 16px 28px;
}
@media (min-width: 560px) { .credentials { grid-template-columns: 1fr 1fr; } }
.credentials dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 5px;
}
.credentials dd { margin: 0; font-size: .9375rem; color: var(--ivory); }

/* ---------- 14. Testimonials --------------------------------------------- */

.reviews { display: grid; gap: 22px; margin-top: 52px; }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  border: 1px solid var(--rule-soft);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: .6;
  color: var(--rule-strong);
  height: 24px;
}
.review blockquote { font-size: .9375rem; line-height: 1.65; flex: 1; }
.review figcaption {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(185, 177, 164, .72);
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  /* Two lines' worth, so the divider rules stay level across the row no matter
     how long the real names and journeys turn out to be. */
  min-height: calc(3em + 16px);
}

.review--placeholder blockquote { color: rgba(185, 177, 164, .72); font-style: italic; }

/* ---------- 15. Contact + coverage map ----------------------------------- */

.contact { display: grid; gap: 40px; margin-top: 52px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.15fr; gap: 56px; } }

.contact-list { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.contact-list > div { padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.contact-list dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 7px;
}
.contact-list dd { margin: 0; color: var(--ivory); font-size: 1rem; }
.contact-list a {
  position: relative;
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s;
}
/* Phone, WhatsApp and email are primary actions on a phone, so the touch
   target is padded out to 44px without detaching the underline. */
.contact-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.contact-list a:hover { border-color: var(--brass); }

/* click-to-load map: nothing from Google is requested until activated */
.map {
  position: relative;
  border: 1px solid var(--rule-soft);
  background: var(--ink-800);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.map svg, .map iframe { width: 100%; height: 100%; display: block; border: 0; }

/* The whole surface is the click target, but the button and label sit in the
   open sea at lower right so the coastline, Barcelona and BCN–El Prat stay
   readable. A coverage map that hides its own coverage is no use. */
.map__activate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 22px 20px;
  cursor: pointer;
  background: rgba(12, 10, 7, .18);
  transition: background-color .3s var(--ease);
  width: 100%;
}
.map__activate:hover { background: rgba(12, 10, 7, .06); }
.map__activate:focus-visible { outline-offset: -4px; }

.map__play {
  width: 54px; height: 54px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(12, 10, 7, .72);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.map__activate:hover .map__play { background: rgba(12, 10, 7, .9); transform: scale(1.06); }
.map__play svg { width: 15px; height: 17px; margin-left: 3px; }

.map__label {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ivory);
  text-align: right;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

/* ---------- 16. Footer --------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule-soft);
  padding: 52px 0 40px;
  margin-top: 40px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.footer-nav a {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 14px 5px;
  transition: color .25s var(--ease);
}
.footer-nav a:hover { color: var(--brass); }

.copyright {
  width: 100%;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  color: rgba(185, 177, 164, .72);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* ---------- 17. Sticky mobile action bar --------------------------------- */

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: var(--rule-soft);
  border-top: 1px solid var(--rule);
  transform: translateY(101%);
  transition: transform .4s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar.is-shown { transform: translateY(0); }
.action-bar a {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--ink-800);
  color: var(--ivory);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.action-bar a svg { width: 16px; height: 16px; }
.action-bar a.is-primary { background: var(--ivory); color: var(--ink-900); }

@media (max-width: 767px) {
  .action-bar { display: flex; }
  /* keep the bar clear of the form's submit button */
  body { padding-bottom: 58px; }
}

/* ---------- 18. Motion ---------------------------------------------------
   One orchestrated hero reveal, then restrained scroll reveals. No parallax,
   no scroll-jacking, no counters. All of it disabled under reduced-motion.
   ------------------------------------------------------------------------ */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.js .hero-anim > * { opacity: 0; transform: translateY(22px); }
.js .hero-anim.is-ready > * {
  animation: rise .95s var(--ease) forwards;
}
.js .hero-anim.is-ready > *:nth-child(1) { animation-delay: .05s; }
.js .hero-anim.is-ready > *:nth-child(2) { animation-delay: .17s; }
.js .hero-anim.is-ready > *:nth-child(3) { animation-delay: .29s; }
.js .hero-anim.is-ready > *:nth-child(4) { animation-delay: .41s; }
.js .hero-anim.is-ready > *:nth-child(5) { animation-delay: .53s; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .hero-anim > * { opacity: 1 !important; transform: none !important; }
  .vehicle:hover { transform: none; }
  .vehicle:hover .vehicle__media img { transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- 19. Legal pages ---------------------------------------------- */

.legal { padding-top: 140px; padding-bottom: 90px; }
.legal h1 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.06;
  color: var(--ivory);
  margin-bottom: 12px;
}
.legal h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ivory);
  margin: 44px 0 14px;
}
.legal p, .legal li { max-width: 68ch; margin-bottom: 14px; font-size: 1rem; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 18px; }
.legal a { color: var(--brass); border-bottom: 1px solid var(--rule); }
.legal a:hover { border-color: var(--brass); }
.legal .updated {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(185, 177, 164, .72);
  margin-bottom: 40px;
}