/* ═══════════════════════════════════════════════════════════
   GP DRIVE
   Palette drawn from the Illawarra escarpment and the coast road.
   Light-dominant by intent: sea haze is the page, bitumen is the
   punctuation. Brass appears only on actions and the route line.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* colour */
  --bitumen:#0F1519;
  --slate:#1E272B;
  --haze:#E3E8E6;
  --haze-lift:#EFF2F1;
  --sandstone:#C0B9A6;   /* greyed off the warm axis — mineral, not kraft */
  --eucalypt:#55655A;
  --brass:#C4873C;

  /* derived, contrast-checked */
  --ink:#0F1519;
  --ink-2:#4A5850;          /* 6.5:1 on haze-lift */
  --ink-dark:#E3E8E6;       /* 15:1 on bitumen   */
  --ink-dark-2:#9AAAA4;     /* 7.6:1 on bitumen  */
  --brass-ink:#8F5D1E;      /* 4.9:1 on haze-lift — brass as readable text */
  --rule:rgba(15,21,25,.14);
  --rule-dark:rgba(227,232,230,.16);

  /* type */
  --f-display:'Newsreader',Georgia,'Times New Roman',serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --t-hero:clamp(2.9rem,8.2vw,7.4rem);
  --t-h2:clamp(1.85rem,3.7vw,3.15rem);
  --t-h3:clamp(1.12rem,1.6vw,1.4rem);
  --t-lede:clamp(1.02rem,1.35vw,1.2rem);
  --t-body:clamp(1rem,1.06vw,1.075rem);
  --t-mono:.7rem;

  /* space */
  --pad:clamp(1.25rem,4.5vw,3.5rem);
  --sec-y:clamp(5rem,11vw,9.5rem);
  --measure:38rem;

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

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}

html{scroll-behavior:smooth}
/* keep anchored section tops clear of the fixed nav bar */
section[id],footer[id]{scroll-margin-top:4.75rem}

body{
  background:var(--haze-lift);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* ── focus + skip ──────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}
.skip{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  transform:translateY(-160%);
  background:var(--bitumen);color:var(--ink-dark);
  padding:.7rem 1.1rem;text-decoration:none;
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;
  transition:transform .2s var(--ease);
}
.skip:focus{transform:translateY(0)}

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

/* ── shared type ───────────────────────────────────────── */
.eyebrow{
  font-family:var(--f-mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-ink);
  margin-bottom:1.4rem;
}
.eyebrow--light{color:var(--brass)}

.mono-label{
  font-family:var(--f-mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
}

.num,.ta-r .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:400}

.sec-h{
  font-family:var(--f-display);
  font-size:var(--t-h2);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.028em;
  max-width:20ch;
  text-wrap:balance;
}
.sec-lede{
  margin-top:1.6rem;
  max-width:var(--measure);
  font-size:var(--t-lede);
  color:var(--ink-2);
}
.sec-head{margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.sec-head--light .sec-h{color:var(--ink-dark)}
.sec-head--light .sec-lede{color:var(--ink-dark-2)}

a{color:inherit}
.sec-lede a,.fares__note a,.confirm__note a,.form .sec-lede a{
  color:var(--brass-ink);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
.sec-head--light .sec-lede a,.fares__note a{color:var(--brass)}

/* ── layout ────────────────────────────────────────────── */
/* 68rem keeps a real gutter for the route line at every width it appears */
.wrap{width:min(68rem,100% - var(--pad)*2);margin-inline:auto}
.wrap--narrow{width:min(52rem,100% - var(--pad)*2)}
.section{padding-block:var(--sec-y)}
.section--dark{background:var(--bitumen);color:var(--ink-dark)}
.section--sandstone{background:var(--sandstone)}
.section--haze{background:var(--haze)}

.section--sandstone .eyebrow{color:#5E3A0A}
.section--sandstone .sec-lede,
.section--sandstone .mono-label{color:#3A4740}   /* 5.2:1 on sandstone */

.ta-r{text-align:right}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 1.75rem;
  font-family:var(--f-mono);font-size:.76rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;
  cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease),transform .45s var(--ease);
}
.btn--brass{background:var(--brass);color:var(--bitumen);border-color:var(--brass)}
.btn--brass:hover{background:#D2953F;border-color:#D2953F;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink-dark);border-color:rgba(227,232,230,.34)}
.btn--ghost:hover{border-color:var(--ink-dark);transform:translateY(-1px)}
/* --ghost is for dark sections; this is its counterpart on the light ones.
   --brass-ink rather than --brass, which fails AA on haze. */
.btn--line{background:transparent;color:var(--brass-ink);border-color:rgba(15,21,25,.22)}
.btn--line:hover{border-color:var(--brass-ink);transform:translateY(-1px)}
.btn--sm{padding:.7rem 1.15rem;font-size:.68rem}
.btn--wide{width:100%;justify-content:center;padding-block:1.25rem}
.btn__dot{width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ═══ NAV ══════════════════════════════════════════════ */
.nav{
  position:fixed;inset:0 0 auto;z-index:90;
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  width:min(76rem,100% - var(--pad)*2);margin-inline:auto;
  display:flex;align-items:center;gap:2rem;
  padding-block:clamp(1.1rem,2.4vw,1.9rem);
  transition:padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(239,242,241,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--rule);
}
.nav.is-stuck .nav__inner{padding-block:.75rem}

.wordmark{
  font-family:var(--f-display);font-size:1.32rem;font-weight:400;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink-dark);
  display:inline-flex;align-items:baseline;gap:.36em;flex:none;
  transition:color .5s var(--ease);
}
.wordmark__gp{
  font-family:var(--f-mono);font-size:.82em;font-weight:400;
  letter-spacing:.14em;color:var(--brass);
}
.nav.is-stuck .wordmark{color:var(--ink)}
.nav.is-stuck .wordmark__gp{color:var(--brass-ink)}  /* brass fails AA on the light bar */

.nav__links{display:flex;gap:2rem;margin-left:auto}
.nav__links a{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-dark-2);
  padding-block:.35rem;position:relative;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current{color:var(--ink-dark)}
.nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1)}
.nav.is-stuck .nav__links a{color:var(--ink-2)}
.nav.is-stuck .nav__links a:hover,.nav.is-stuck .nav__links a.is-current{color:var(--ink)}

.nav__actions{display:flex;align-items:center;gap:1.35rem;flex:none}
.nav__tel{
  text-decoration:none;display:flex;flex-direction:column;line-height:1.25;
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.1em;
}
.nav__tel-label{
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--brass);font-size:.6rem;
}
.nav__tel-num{color:var(--ink-dark);font-variant-numeric:tabular-nums}
.nav.is-stuck .nav__tel-num{color:var(--ink)}
.nav.is-stuck .nav__tel-label{color:var(--brass-ink)}

/* ═══ SIGNATURE — the Grand Pacific Drive as scroll progress ═══ */
.routerail{
  position:fixed;left:clamp(1rem,2vw,1.75rem);top:50%;
  transform:translateY(-50%);
  width:44px;height:min(62vh,560px);
  z-index:80;pointer-events:none;
}
.routerail svg{width:100%;height:100%;overflow:visible}
.routerail__ghost{stroke:rgba(15,21,25,.14);stroke-width:1;fill:none}
.routerail__draw{
  stroke:var(--brass);stroke-width:1.5;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len,2000);
  stroke-dashoffset:var(--len,2000);
}
.routerail__marks{position:absolute;inset:0}
.routerail__marks li{
  position:absolute;left:50%;top:var(--at);
  transform:translate(-50%,-50%);
  width:100%;
}
/* Set vertically so the whole signature lives inside its own 44px gutter
   and never crosses into the text column. Only the waypoint you have
   actually reached is named — the rail reads as a position, not a legend. */
.routerail__marks span{
  position:absolute;left:calc(100% + .3rem);top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--f-mono);font-size:.54rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
  opacity:0;transition:opacity .55s var(--ease);
}
.routerail__marks li::before{
  content:"";position:absolute;left:50%;top:50%;
  width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:var(--ink-2);opacity:.3;
  transition:background .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease);
}
.routerail__marks li.is-passed::before{background:var(--brass);opacity:1;transform:scale(1.5)}
/* Colour comes from what is behind the label, not from the rail as a whole.
   Prefixed with .routerail so these outrank `.routerail.on-dark ... span`. */
.routerail .routerail__marks li.is-current span{opacity:1;color:var(--brass-ink)}
.routerail .routerail__marks li.is-current.is-on-dark span{color:var(--brass)}

/* rail inverts over dark sections */
.routerail.on-dark .routerail__ghost{stroke:rgba(227,232,230,.16)}
.routerail.on-dark .routerail__marks li::before{background:var(--ink-dark-2)}
.routerail.on-dark .routerail__marks li.is-passed::before{background:var(--brass)}
.routerail.on-dark .routerail__marks span{color:var(--ink-dark-2)}

/* ═══ HERO ═════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(7rem,14vh,10rem) 0 clamp(2rem,5vh,3.5rem);
  background:var(--bitumen);
  color:var(--ink-dark);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:-8% 0 0;z-index:-1}
.hero__scene{width:100%;height:112%;object-fit:cover}
.hero__ridge--far{fill:#1B262B}
.hero__ridge--mid{fill:#141D22}
.hero__contours{fill:none;stroke:#DDE6E3;stroke-width:.75;opacity:.09}
.hero__road{
  fill:none;stroke:var(--brass);stroke-width:2;opacity:.5;
  stroke-linecap:round;
}
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.62;
  filter:grayscale(.35) contrast(1.06) brightness(.68);
  mix-blend-mode:luminosity;
}
.hero__grain{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(15,21,25,.94) 0%,rgba(15,21,25,.62) 34%,rgba(15,21,25,.12) 68%,rgba(15,21,25,.42) 100%),
    radial-gradient(120% 70% at 18% 92%,rgba(15,21,25,.6),transparent 62%);
}

.hero__content{
  width:min(68rem,100% - var(--pad)*2);margin-inline:auto;
  position:relative;
}
/* No box of its own — the h1 and the subhead keep the spacing they had. */
.hero__group{margin:0}
.hero__h{
  font-family:var(--f-display);
  font-size:var(--t-hero);
  font-weight:200;
  line-height:.95;
  letter-spacing:-.042em;
  margin-block:.15em .35em;
  max-width:14ch;
}
.hero__h .line{display:block;overflow:hidden}
.hero__sub{
  max-width:40rem;
  font-size:var(--t-lede);
  color:var(--ink-dark-2);
  /* Vertical rhythm is height-aware from here down: on an 800px screen every
     one of these gaps is competing with the trust line for the fold. */
  margin-bottom:clamp(1.5rem,3.2vh,2.6rem);
  text-wrap:pretty;
}
.hero__actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:.85rem}
/* The number is an action, not a caption. Set at reading size with the label
   demoted, so the digits are the largest thing in the button. */
.hero__tel{gap:.5rem}
.hero__tel-label{font-size:.72rem;color:var(--ink-dark-2)}
.hero__tel-num{
  font-size:.98rem;letter-spacing:.05em;text-transform:none;
  font-variant-numeric:tabular-nums;color:var(--ink-dark);
}
/* One line, small, factual. Everything in it is verified — the authorisation
   number, the licensing statement and the fixed-fare promise all appear in
   full further down the page. */
.hero__trust{
  margin-top:clamp(1.1rem,2.6vh,1.75rem);
  max-width:46rem;
  font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.9;
  color:var(--ink-dark-2);
}
.hero__trust .num{font-size:inherit;letter-spacing:inherit}
.hero__foot{
  width:min(68rem,100% - var(--pad)*2);margin:clamp(3rem,7vh,5rem) auto 0;
}
.hero__foot .mono-label{color:var(--ink-dark-2);font-size:.6rem}

/* ═══ SERVICES ═════════════════════════════════════════ */
.services__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr));
  gap:clamp(2.5rem,4.5vw,4.25rem) clamp(2.5rem,5vw,5rem);
}
.svc{border-top:1px solid var(--rule);padding-top:1.6rem}
.svc__h{
  font-family:var(--f-display);font-size:var(--t-h3);font-weight:400;
  letter-spacing:-.018em;line-height:1.25;margin-bottom:.85rem;
}
.svc p{color:var(--ink-2);max-width:34rem}
/* The one fact in a service block worth reading before the paragraph. Set in
   ink rather than the muted body colour so it reads as a statement, not a
   caption — most operators won't take a 3am pickup. */
.svc .svc__lead{          /* outranks `.svc p` without reaching for !important */
  color:var(--ink);
  font-size:var(--t-lede);
  margin-bottom:.7rem;
}

/* ═══ FLEET ════════════════════════════════════════════ */
.fleet .sec-lede{color:#3A4740}
.fleet__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr));
  gap:clamp(2.5rem,4vw,3.5rem);
}
/* One establishing shot for the pair: they sit too close together in frame to
   crop into two card images without clipping a car or catching its neighbour. */
.fleet__shot{margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.fleet__shot img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--slate);
}
.fleet__shot figcaption{margin-top:.9rem;color:#3A4740}

.car{background:var(--haze-lift);display:flex;flex-direction:column}
/* two classes deep so it outranks `.section--sandstone .mono-label` */
.car__body .car__badge{
  color:var(--brass-ink);font-size:.58rem;margin-bottom:.15rem;
}
.car__body{padding:clamp(1.5rem,2.6vw,2.25rem);display:flex;flex-direction:column;gap:1.1rem}
.car__h{
  font-family:var(--f-display);font-size:clamp(1.35rem,2.1vw,1.75rem);
  font-weight:300;letter-spacing:-.026em;line-height:1.15;
}
.car__note{color:var(--ink-2)}

.spec{border-top:1px solid var(--rule);margin-top:.35rem}
.spec__row{
  display:grid;grid-template-columns:minmax(6.5rem,.62fr) 1fr;
  gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.spec dt{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);
}
.spec dd{font-size:.94rem;line-height:1.5}

/* ═══ FARES — the risk: numerals as the loudest voice ═══ */
.fare__price{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,4.4vw,3.1rem);
  font-weight:300;letter-spacing:-.045em;
  color:var(--brass);white-space:nowrap;
}
.fares__note{
  margin-top:2.75rem;max-width:var(--measure);
  font-size:.94rem;color:var(--ink-dark-2);
}

/* The one fact worth stating before the prices: most operators won't take it. */
.fares__hours{
  margin-top:1.1rem;
  font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);
}

/* ── the published fare table ─────────────────────────────
   Above the calculator, because people want a rough number before they will
   type an address in, and a page that makes you work for the price reads as
   one that is hiding it. */
.faretable{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.faretable table{border-top:1px solid var(--rule-dark)}
.faretable th,.faretable td{
  padding:.95rem 0;
  border-bottom:1px solid var(--rule-dark);
  vertical-align:baseline;
}
.faretable thead th{
  font-family:var(--f-mono);font-size:.62rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dark-2);
  padding-bottom:.7rem;
}
.faretable tbody th{
  font-weight:400;font-size:1rem;color:var(--ink-dark);text-align:left;
  padding-right:1rem;
}
.faretable td{color:var(--ink-dark-2);white-space:nowrap}
/* The destination is the long cell; let it wrap rather than force a scrollbar. */
.faretable__to{white-space:normal;padding-right:1rem;min-width:9rem}
.faretable__fare{color:var(--ink-dark);font-size:1.1rem}
/* Says the minimum did the work, rather than leaving a number the distance
   column above it doesn't account for. */
.faretable__min{
  display:block;
  font-family:var(--f-mono);font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);
}
.faretable__note{
  margin-top:1.5rem;max-width:var(--measure);
  font-size:.9rem;line-height:1.7;color:var(--ink-dark-2);
}
.faretable__note strong{color:var(--ink-dark);font-weight:400}

/* Below 640px the table restructures into stacked records rather than
   scrolling sideways — most bookings come from a phone, and the price is the
   reason people are on the page. */
@media (max-width:640px){
  .faretable thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .faretable table,.faretable tbody,.faretable tr,.faretable th,.faretable td{
    display:block;width:auto;
  }
  .faretable table{border-top:0}
  .faretable tr{
    border-bottom:1px solid var(--rule-dark);
    padding-block:1rem;
    display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;
  }
  .faretable th,.faretable td{border-bottom:0;padding:0;text-align:left}
  /* Pickup reads as "Wollongong → Sydney Airport" stacked, with the fare beside
     it — the origin has to stay attached to the price it produces. */
  .faretable tbody th{grid-column:1;grid-row:1;font-size:.82rem;color:var(--ink-dark-2)}
  .faretable tbody th::after{content:" →";color:var(--brass)}
  .faretable__to{grid-column:1;grid-row:2;font-size:1rem;color:var(--ink-dark);min-width:0}
  /* :not() matters — the fare cell also carries .num, and without excluding it
     both land in the same grid cell and print on top of each other. */
  .faretable td.num:not(.faretable__fare){grid-column:1;grid-row:3;font-size:.8rem}
  .faretable td.faretable__fare{
    grid-column:2;grid-row:1 / span 3;align-self:center;text-align:right;
  }
}

/* ── why the price is the price ───────────────────────────
   Next to the number rather than three paragraphs above it. */
.whyprice{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:1.75rem 2.5rem;
  max-width:56rem;
  margin-bottom:clamp(2.5rem,5vw,3.75rem);
}
.whyprice h3{
  font-family:var(--f-mono);font-size:.66rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.6rem;
}
.whyprice p{font-size:.92rem;line-height:1.7;color:var(--ink-dark-2)}

/* A standing notice, not an alert — needs to be read, not shouted. */
.notice{
  margin-top:2.5rem;padding:1.5rem 1.75rem;max-width:46rem;
  border:1px solid var(--rule-dark);border-left:2px solid var(--brass);
  background:rgba(196,135,60,.06);
}
.notice__h{
  font-family:var(--f-mono);font-size:.68rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.75rem;
}
.notice p{font-size:.94rem;line-height:1.7;color:var(--ink-dark-2);max-width:none}
.section--dark .notice p{color:var(--ink-dark-2)}

/* ── the calculator, on dark ─────────────────────────── */
.quote{display:flex;flex-direction:column;gap:2rem;max-width:46rem}
.quote__fields{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.quote .field label{color:var(--ink-dark-2)}
.quote .req{color:var(--brass)}
.quote .field input{
  background:var(--slate);
  border-color:rgba(227,232,230,.2);
  color:var(--ink-dark);
}
.quote .field input::placeholder{color:#8A9A94}
.quote .field input:hover{border-color:rgba(227,232,230,.42)}
.quote .field input:focus{border-color:var(--brass);background:#232E33}
.quote .field.is-bad input{border-color:#E8907C;background:#2A2422}
.quote .err{color:#E8907C}
.quote > .btn{align-self:flex-start}

/* ── address combobox ───────────────────────────────── */
.combo__wrap{position:relative;display:block}
.quote .hint{color:var(--ink-dark-2)}
.combo__list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;
  max-height:17rem;overflow-y:auto;
  background:#161E23;border:1px solid rgba(227,232,230,.22);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.combo__list li{
  padding:.7rem 1rem;cursor:pointer;
  font-size:.88rem;line-height:1.45;color:var(--ink-dark);
  border-bottom:1px solid rgba(227,232,230,.09);
}
.combo__list li:last-child{border-bottom:0}
.combo__list li[aria-selected="true"],
.combo__list li:hover{background:rgba(196,135,60,.16);color:#fff}
.combo__list li .combo__where{
  display:block;margin-top:.15rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dark-2);
}
.combo__list li[aria-disabled="true"]{
  cursor:default;color:var(--ink-dark-2);
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
}
.combo__list li[aria-disabled="true"]:hover{background:transparent;color:var(--ink-dark-2)}

.quote__common{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem 1.1rem}
.quote__common .mono-label{color:var(--ink-dark-2);flex:none}
.quote__common ul{display:flex;flex-wrap:wrap;gap:.5rem}
.quote__common button{
  background:transparent;border:1px solid rgba(227,232,230,.2);
  color:var(--ink-dark-2);padding:.45rem .8rem;cursor:pointer;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.quote__common button:hover{border-color:var(--brass);color:var(--brass)}

.quote__out{display:block;max-width:46rem;margin-top:clamp(2.5rem,5vw,3.75rem)}
.quote__out[hidden]{display:none}   /* the class would otherwise beat [hidden] */
.legs{border-top:1px solid var(--rule-dark)}
.legs__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:.9rem 0;border-bottom:1px solid var(--rule-dark);
}
.legs__row dt{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-dark-2);
}
.legs__row dd{font-size:.95rem;color:var(--ink-dark);white-space:nowrap}
.legs__row--total{border-bottom:0}
.legs__row--total dt{color:var(--ink-dark)}
.legs__row--total dd{font-size:1.15rem}

.quote__price{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem 2rem;padding:1.4rem 0 1.6rem;border-top:2px solid var(--brass);
}
.quote__price .mono-label{color:var(--ink-dark-2)}

.quote__floor{
  margin:-.5rem 0 1.4rem;padding-left:.9rem;
  border-left:2px solid var(--brass);
  font-size:.88rem;line-height:1.6;color:var(--ink-dark-2);
  max-width:var(--measure);
}
.quote__resolved{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;line-height:2.1;
  color:var(--ink-dark-2);
}
.quote__act{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;margin-top:2rem}
.quote__caveat{font-size:.88rem;color:var(--ink-dark-2);max-width:var(--measure)}

.quote__status{
  margin-top:1.75rem;padding:1rem 1.25rem;max-width:46rem;
  border-left:2px solid var(--brass);background:rgba(196,135,60,.09);
  font-size:.92rem;color:var(--ink-dark);
}
.quote__status a{color:var(--brass)}

/* ═══ BOOKING ══════════════════════════════════════════ */
.booking{background:var(--haze)}
.form__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.5rem clamp(1.25rem,2.6vw,2rem);
}

/* ── two steps ─────────────────────────────────────────
   A fieldset with the browser's default border and padding removed. It stays a
   fieldset because the legend gives each step a programmatic name, which a
   div and a heading would not. */
.form__step{border:0;padding:0;margin:0;min-width:0}
.form__step[hidden]{display:none}
.form__step-h{
  padding:0;margin-bottom:1.5rem;
  font-family:var(--f-display);font-size:1.45rem;font-weight:300;
  letter-spacing:-.02em;color:var(--ink);
}
.form__step-h:focus-visible{outline-offset:6px}
.form__steps{
  display:flex;align-items:baseline;gap:.9rem;
  margin-bottom:1.5rem;
}
.form__step-count{
  font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-ink);
}
.form__step-name{
  font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
}
.form__step-name::before{content:"· "}
.form__nav{margin-top:2rem}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field--full{grid-column:1/-1}
.field__inner{display:flex;flex-direction:column;gap:.5rem;margin:0}

.field label{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-2);
}
.req{color:var(--brass-ink);font-size:1.05em}
/* not aria-hidden: `required` conveys this to a screen reader, `(optional)`
   has no programmatic equivalent, so it has to be readable text */
.opt{
  text-transform:none;letter-spacing:.02em;
  font-size:.94em;font-style:italic;
}
.form__legend{
  margin-bottom:2rem;padding-bottom:1.25rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.09em;line-height:1.8;
  color:var(--ink-2);
}

.field input,.field select,.field textarea{
  width:100%;
  background:var(--haze-lift);
  border:1px solid var(--rule);
  border-radius:0;
  padding:.9rem 1rem;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.field input[type=date],.field input[type=time],.field input[type=number]{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.95rem;
}
.field textarea{resize:vertical;line-height:1.65;font-family:var(--f-body)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .85rem) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.5rem;cursor:pointer;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(15,21,25,.3)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brass);background:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(74,88,80,.62)}

.hint{font-size:.8rem;line-height:1.5;color:var(--ink-2)}
/* The date, spelled out. Set in ink and mono so it reads as a confirmation of
   what was entered rather than as advice about what to enter. */
.hint--echo{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ink);
}
.hint--echo:empty{display:none}
.err{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  color:#8C2F1E;min-height:0;
}
.err:empty{display:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:#8C2F1E;background:#FBF0EE;
}

.check{flex-direction:row;align-items:center;gap:.75rem}
.check input{width:1.1rem;height:1.1rem;flex:none;accent-color:var(--brass-ink);padding:0}
.check label{text-transform:none;letter-spacing:0;font-family:var(--f-body);
  font-size:.95rem;color:var(--ink);cursor:pointer}

#flightWrap{overflow:hidden}

.form__foot{
  margin-top:2.25rem;display:flex;flex-direction:column;gap:1rem;
  align-items:flex-start;
}
/* On step one the submit button is put away — asking someone to submit a form
   whose end they cannot see is a way of collecting half-finished bookings. The
   call-instead link stays, because that offer is good at any point. */
.form__foot--hold #submitBtn{display:none}
.form__foot--hold{margin-top:1rem}
.form__promise{font-size:.86rem;color:var(--ink-2);max-width:30rem}
.form__summary{
  margin-top:1.25rem;padding:.9rem 1.1rem;
  border-left:2px solid #8C2F1E;background:#FBF0EE;
  font-size:.9rem;color:#6E2517;
}

.confirm{
  border-top:2px solid var(--brass);
  background:var(--haze-lift);
  padding:clamp(2rem,4vw,3rem);
}
.confirm__h{
  font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:300;letter-spacing:-.028em;line-height:1.15;
  margin:1rem 0 1.75rem;
}
.confirm__steps{display:flex;flex-direction:column;gap:1rem;max-width:var(--measure)}
.confirm__steps li{
  display:flex;gap:1rem;align-items:baseline;
  padding-bottom:1rem;border-bottom:1px solid var(--rule);
  color:var(--ink-2);
}
.confirm__steps li:last-child{border-bottom:0;padding-bottom:0}
.confirm__steps .num{color:var(--brass-ink);font-size:.8rem;flex:none}
.confirm__note{margin-top:1.75rem;font-size:.9rem;color:var(--ink-2)}

/* ═══ WHY ══════════════════════════════════════════════ */
.why__list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  gap:0 clamp(2rem,4vw,3.5rem);
}
.why__list li{border-top:1px solid var(--rule);padding:1.5rem 0}
.why__list h3{
  font-family:var(--f-body);font-size:.95rem;font-weight:600;
  letter-spacing:-.005em;margin-bottom:.45rem;
}
.why__list p{font-size:.92rem;color:var(--ink-2);line-height:1.65}

/* ═══ DRIVER ═══════════════════════════════════════════ */
/* No portrait by choice, so the statement carries the section: the headline
   holds the left column on its own and the body sits opposite it. */
.driver__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.driver__statement{position:sticky;top:7rem}
.driver__statement .sec-h{max-width:13ch}
.driver__body p{color:var(--ink-2);margin-bottom:1.25rem;max-width:var(--measure)}
.driver__cred{
  margin-top:1rem;padding-top:1.1rem;
  border-top:1px solid var(--rule);
  line-height:1.9;font-size:.6rem;
}
.driver__lead{
  font-size:var(--t-lede);
  color:var(--ink)!important;
}
.driver__sign{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-ink)!important;margin-top:1.75rem;
}
.driver .sec-h{margin-bottom:1.75rem}

/* ═══ TESTIMONIALS ═════════════════════════════════════ */
.quotes__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));
  gap:clamp(2rem,4vw,3.25rem);
}
.quote{border-top:1px solid rgba(15,21,25,.2);padding-top:1.75rem}
.quote blockquote p{
  font-family:var(--f-display);
  font-size:clamp(1.1rem,1.7vw,1.35rem);
  font-weight:300;font-style:italic;
  line-height:1.4;letter-spacing:-.018em;
  color:var(--ink);
}
.quote figcaption{
  margin-top:1.5rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#3A4740;
}
.quote figcaption span{display:block;margin-top:.3rem;color:#5E3A0A}

/* ═══ FOOTER ═══════════════════════════════════════════ */
.footer{background:var(--bitumen);color:var(--ink-dark);padding-top:var(--sec-y)}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
.footer__h{
  font-family:var(--f-display);font-size:var(--t-h2);font-weight:300;
  line-height:1.08;letter-spacing:-.028em;max-width:16ch;
  margin-bottom:2.75rem;text-wrap:balance;
}
.footer__contact{display:flex;flex-direction:column}
.footer__contact li{
  display:grid;grid-template-columns:5.5rem 1fr;gap:1.25rem;
  align-items:baseline;padding:.85rem 0;border-top:1px solid var(--rule-dark);
}
.footer__contact .mono-label{color:var(--ink-dark-2);font-size:.6rem}
.footer__contact a{
  color:var(--ink-dark);text-decoration:none;
  border-bottom:1px solid rgba(227,232,230,.28);
  padding-bottom:2px;width:fit-content;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.footer__contact a:hover{color:var(--brass);border-bottom-color:var(--brass)}
.footer__contact span:not(.mono-label){color:var(--ink-dark-2)}
.footer__big{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:300;letter-spacing:-.03em;
}

.footer__map svg{width:100%;height:auto;border:1px solid var(--rule-dark)}
.map__pins text{
  font-family:var(--f-mono);font-size:8px;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--ink-dark-2);
}
.map__beyond path{
  fill:none;stroke:var(--brass);stroke-opacity:.4;
  stroke-width:1;stroke-dasharray:3 5;stroke-linecap:round;
}
.map__beyond text{
  font-family:var(--f-mono);font-size:7px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--ink-dark-2);opacity:.8;
}
.footer__map figcaption{margin-top:.9rem;color:var(--ink-dark-2)}

.footer__bottom{
  margin-top:clamp(3.5rem,7vw,5.5rem);
  padding-block:2rem;border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;
}
.footer__legal{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.09em;
  line-height:1.9;color:var(--ink-dark-2);
}

/* ═══ MOBILE CALL BAR ══════════════════════════════════ */
.callbar{
  position:fixed;inset:auto 0 0;z-index:95;display:none;
  border-top:1px solid var(--rule-dark);
  background:rgba(15,21,25,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  flex:1;display:grid;place-items:center;padding:1.05rem .5rem;
  text-decoration:none;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;
}
.callbar__call{color:var(--ink-dark)}
.callbar__book{background:var(--brass);color:var(--bitumen);flex:0 0 34%}

/* ═══ RESPONSIVE ═══════════════════════════════════════ */
/* below this the gutter can't clear the text column, so the rail steps aside */
@media (max-width:1339px){
  .routerail{display:none}
}
@media (max-width:920px){
  .nav__links{display:none}
  .nav__actions{margin-left:auto}
  .driver__grid,.footer__top{grid-template-columns:1fr}
  .driver__statement{position:static}
}
@media (max-width:700px){
  .quote__fields{grid-template-columns:1fr}
  .legs__row{gap:1rem}
  .legs__row dt{max-width:11rem}
}

@media (max-width:640px){
  .nav__tel{display:none}
  .nav__actions .btn{display:none}   /* the call bar already carries this */
  .callbar{display:flex}
  body{padding-bottom:4rem}
  .form__grid{grid-template-columns:1fr}
  .hero{
    min-height:100svh;
    padding-top:clamp(5rem,11vh,7rem);
    /* The call bar is fixed over the bottom 4rem of the viewport. The hero is
       bottom-aligned, so without this the trust line sits underneath it. */
    padding-bottom:calc(5.25rem + env(safe-area-inset-bottom));
  }
  .hero__h{max-width:none}
  /* The scroll cue costs about 75px of a 667px screen and says what the call
     bar already occupies the bottom of the screen saying. Desktop keeps it. */
  .hero__foot{display:none}
  /* Both actions full width. The phone link matches the booking button for
     footprint and beats it for type size — at a kerb, calling wins. */
  .hero__actions{display:grid;grid-template-columns:1fr;gap:.7rem}
  .hero__actions .btn{width:100%;justify-content:center}
  .hero__tel{border-color:rgba(196,135,60,.55)}
  .hero__tel-num{font-size:1.05rem}
}

/* Short screens — a four-inch phone, or a modern one with the browser's own
   chrome eating the viewport. Every gap in the hero gives way before the type
   does: the display line is the brand and the trust line is the reason to
   believe, so neither is what gets sacrificed for the fold. */
@media (max-width:640px) and (max-height:640px){
  .hero{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}
  .hero .eyebrow{margin-bottom:.7rem}
  .hero__h{margin-block:.1em .25em}
  .hero__sub{margin-bottom:.95rem}
  .hero__actions{gap:.45rem}
  .hero__actions .btn{padding-block:.8rem}
  .hero__trust{margin-top:.6rem;line-height:1.7}
  .footer__contact li{grid-template-columns:1fr;gap:.25rem}
  .footer__bottom{flex-direction:column}
  .btn{padding:.95rem 1.4rem}
}

/* ═══ REDUCED MOTION — full off switch ═════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .hero__grain{display:none}
  .routerail__draw{stroke-dashoffset:0!important}
}