/* PlymConnect — site styles. Plain CSS, mobile-first. Tokens first. */
:root {
  --navy-950: #061730;
  --navy-900: #0a2348;   /* logo navy */
  --navy-800: #12305e;
  --blue-600: #2556d6;   /* "Connect" blue in the logo */
  --blue-700: #1c45b3;
  --blue-100: #e7eefc;
  --teal-600: #2e8577;   /* logo teal (decorative) */
  --teal-300: #8fd3c4;
  --wa-600: #16873f;     /* WhatsApp green (≈5% lighter than v1 #15803d), still AA 4.6:1 with white text */
  --wa-700: #127035;
  --ink: #0f1f38;
  --muted: #475670;
  --line: #dfe5ee;
  --mist: #f3f6fa;
  --white: #fff;
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 68px;
  --font-sans: "Public Sans", "Public Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --shadow-soft: 0 1px 2px rgba(10, 35, 72, .06), 0 8px 24px -12px rgba(10, 35, 72, .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 104%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-600); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-700); }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.02em; color: var(--navy-900); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .hero :focus-visible, .footer :focus-visible, .why :focus-visible { outline-color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--navy-900); color: #fff; padding: .75rem 1rem; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 1rem; color: #fff; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Section scaffolding ---------- */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--mist { background: var(--mist); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: .9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.kicker::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.section__head--center .kicker::after { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.h2 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; }
.lede { margin-top: .9rem; font-size: clamp(1.0625rem, 1.6vw, 1.2rem); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .8rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 650; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-1px); }
.btn--call { background: var(--blue-600); color: #fff; box-shadow: 0 10px 24px -12px rgba(37, 86, 214, .8); }
.btn--call:hover { background: var(--blue-700); color: #fff; }
.btn--wa { background: var(--wa-600); color: #fff; box-shadow: 0 10px 24px -12px rgba(22, 135, 63, .8); }
.btn--wa:hover { background: var(--wa-700); color: #fff; }
.btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.btn--navy { background: var(--navy-900); color: #fff; }
.btn--navy:hover { background: var(--navy-800); color: #fff; }
.btn--outline { background: transparent; border-color: var(--navy-900); color: var(--navy-900); }
.btn--outline:hover { background: var(--navy-900); color: #fff; }
.btn--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .975rem; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgba(10, 35, 72, .45); }
.header__inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; margin-right: auto; padding: 4px 0; border-radius: 8px; }
.brand img { width: auto; height: 41px; max-width: 100%; object-fit: contain; object-position: left center; }
.nav { display: none; }
.nav__list { display: flex; gap: .25rem; }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: 999px; color: var(--navy-900); font-weight: 600; font-size: .975rem; text-decoration: none; transition: background-color .2s; }
.nav__list a:hover { background: var(--mist); color: var(--navy-900); }
.header__cta { display: none; }
.header__icon { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 999px; color: var(--navy-900); background: var(--mist); border: 0; cursor: pointer; text-decoration: none; }
.header__icon:hover { background: var(--blue-100); color: var(--navy-900); }
.header__icon .icon { width: 24px; height: 24px; }
@media (max-width: 959px) { .header__inner { gap: .75rem; } }
@media (max-width: 374px) { .header__inner { gap: .5rem; } .brand img { height: auto; max-height: 41px; } }
@media (max-width: 759px) {
  /* v1.3: mobile header ~10% larger (bar 69 -> 76px, logo 41 -> 45px, call/menu buttons 46 -> 50px, icons 24 -> 26px).
     The gaps tighten so the bigger logo still fits beside both buttons. */
  :root { --header-h: 75px; }
  .header__inner { gap: .5rem; }
  .brand img { height: 45px; }
  .header__icon { width: 50px; height: 50px; }
  .header__icon .icon { width: 26px; height: 26px; }
}
@media (max-width: 389px) {
  /* Below 390px there isn't room for a 45px logo plus two 50px buttons, so the header alone uses a slightly
     narrower side margin and the logo scales to the space left (never smaller than v1.2). */
  .header__inner { padding-inline: 1rem; }
  .brand img { height: auto; max-height: 45px; }
}
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.no-js .menu-btn { display: none; }

.drawer { position: absolute; inset: var(--header-h) 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(10, 35, 72, .35); padding: .5rem var(--gutter) 1.5rem; }
.drawer[hidden] { display: none; }
.drawer__list a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); color: var(--navy-900); font-weight: 650; font-size: 1.125rem; text-decoration: none; }
.drawer__list .icon { color: var(--blue-600); }
.drawer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; }
.drawer__actions .btn { padding-inline: 1rem; }
.drawer__actions .btn--outline { grid-column: 1 / -1; }

@media (min-width: 960px) {
  :root { --header-h: 76px; }
  .brand img { height: 46px; }
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .header__icon, .menu-btn { display: none; }
  .drawer { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; background: var(--navy-900); overflow: hidden; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { z-index: -2; }
.hero__media img { object-fit: cover; object-position: 68% 55%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(6, 23, 48, .55) 0%, rgba(6, 23, 48, .78) 55%, rgba(6, 23, 48, .94) 100%); }
.hero__inner { display: flex; flex-direction: column; justify-content: center; min-height: min(86svh, 780px); padding-block: clamp(4.5rem, 12vw, 7rem) clamp(5.5rem, 12vw, 8.5rem); }
.hero__kicker { color: var(--teal-300); }
.hero h1 { max-width: 15ch; font-size: clamp(2.35rem, 6.4vw, 4.6rem); font-weight: 800; line-height: 1.03; letter-spacing: -.028em; color: #fff; }
.hero__sub { margin-top: 1.1rem; font-size: clamp(1.125rem, 2vw, 1.375rem); color: rgba(255, 255, 255, .9); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1.75rem; font-size: .975rem; }
.hero__meta a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: rgba(255, 255, 255, .92); text-decoration: none; }
.hero__meta a:hover { color: #fff; text-decoration: underline; }
.hero__meta .stars { color: #ffc843; }
.hero__curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(28px, 5vw, 64px); color: #fff; }
@media (max-width: 759px) {
  /* v1.2: image-led mobile hero. The photo now runs behind the text (no separate photo band), so the
     content starts closer to the header and sits more centrally. --hero-band is the space above the
     kicker; the photo is sized from it so the van's front lands beside the headline at every width.
     A dark overlay (strongest at the top and on the left, behind the text) keeps WCAG AA contrast at
     the brightest pixel (headlights, sky), and only fades to solid navy behind the rating row. */
  .hero { --hero-band: clamp(4.5rem, 22vw, 6rem); }
  .hero__media { bottom: auto; height: calc(var(--hero-band) + 23rem); }
  .hero__media img { object-position: 64% 60%; }
  .hero::before { background:
    linear-gradient(90deg, rgba(5, 14, 28, .35) 0%, rgba(5, 14, 28, 0) 85%),
    linear-gradient(180deg, rgba(5, 14, 28, .61) 0%, rgba(5, 14, 28, .61) calc(var(--hero-band) + 1.5rem), rgba(5, 14, 28, .51) calc(var(--hero-band) + 7rem), rgba(5, 14, 28, .51) calc(var(--hero-band) + 13rem), rgba(5, 14, 28, .34) calc(var(--hero-band) + 17rem), rgba(8, 26, 54, .47) calc(var(--hero-band) + 20rem), rgba(8, 26, 54, .9) calc(var(--hero-band) + 23rem), var(--navy-900) 100%); }
  /* v1.3: overlay ~10% lighter (mean photo brightness L* 17.8 -> ~19.6). It stays darkest behind the text lines and
     opens up most behind the buttons (solid fills), where the van and sunset are, then still fades to navy at the
     photo's bottom edge. */
  /* v1.3: centre the content between the header and the wave. v1.2 used --hero-band (72-96px) as the top padding
     but only 64px at the bottom, ~24px of which the wave covers, so the text sat low (top gap 74-97px vs 52px).
     The content now has its own equal gap above and below; --hero-band still sizes the photo and overlay, so the
     background is unchanged. Bottom padding = gap + the wave's height at its crest (~88% of the curve) minus the
     ~12px of empty space inside the 44px rating/Facebook tap targets. */
  .hero { --hero-gap: clamp(3.25rem, 14vw, 4rem); }
  .hero__inner { justify-content: flex-start; min-height: 0; padding-top: var(--hero-gap); padding-bottom: calc(var(--hero-gap) + clamp(28px, 5vw, 64px) * .88 - 12px); }
  .hero__sub { color: #fff; }
  .hero__meta { gap: 0 1.25rem; margin-top: 1.25rem; }
}
@media (min-width: 400px) and (max-width: 759px) {
  /* The subheadline fits on one line here, so move the bright headlights clear of it. */
  .hero__media img { object-position: 50% 60%; }
}
@media (max-width: 559px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__actions .btn--wa, .hero__actions .btn--ghost { flex: 1 1 calc(50% - .375rem); }
}
@media (min-width: 760px) {
  .hero::before { background: linear-gradient(90deg, rgba(6, 23, 48, .94) 0%, rgba(6, 23, 48, .78) 42%, rgba(6, 23, 48, .25) 78%, rgba(6, 23, 48, .1) 100%), linear-gradient(0deg, rgba(6, 23, 48, .45) 0%, rgba(6, 23, 48, 0) 35%); }
  .hero__media img { object-position: 60% 55%; }
}

.stars { display: inline-flex; gap: 2px; color: var(--blue-600); }
.stars .icon { width: 1.05em; height: 1.05em; }

/* ---------- Routes ---------- */
.routes__grid { display: grid; gap: 1rem; }
.route { display: grid; grid-template-columns: 112px 1fr; gap: 0 1.1rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.route:last-child { border-bottom: 0; }
.route__media { grid-row: span 3; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--mist); }
.route__media img { width: 100%; height: 100%; object-fit: cover; }
.route h3 { font-size: 1.25rem; font-weight: 750; line-height: 1.2; }
.route__prices { display: grid; gap: .1rem; margin-top: .45rem; }
.route__prices div { display: flex; align-items: baseline; gap: .4rem; }
.route__prices dt { min-width: 3.6rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.route__prices dd { color: var(--muted); font-size: .975rem; }
.route__prices strong { font-size: 1.25rem; font-weight: 750; color: var(--navy-900); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.route__cta { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: .3rem; font-weight: 700; color: var(--blue-600); text-decoration: none; }
.route__cta .icon { transition: transform .2s var(--ease); }
.route__cta:hover { color: var(--blue-700); }
.route__cta:hover .icon { transform: translateX(3px); }
.routes__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
.routes__foot p { display: flex; align-items: center; gap: .6rem; }
.routes__foot .icon { color: var(--teal-600); }

@media (min-width: 640px) {
  .routes__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.75rem; }
  .route { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding-bottom: 0; border-bottom: 0; }
  .route__media { grid-row: auto; aspect-ratio: 4 / 3; border-radius: var(--radius); margin-bottom: 1.15rem; }
  .route h3 { font-size: 1.375rem; }
  .route__prices { margin-top: .6rem; padding-top: .75rem; border-top: 1px solid var(--line); align-self: start; }
  .route__cta { margin-top: .75rem; }
}
@media (min-width: 1100px) {
  .routes__grid { grid-template-columns: repeat(4, 1fr); }
  @supports (grid-template-rows: subgrid) {
    .routes__grid { grid-template-rows: auto auto auto auto; row-gap: 0; }
    .route { grid-row: span 4; grid-template-rows: subgrid; }
    .route__prices { align-self: stretch; }
  }
}

/* ---------- Why choose us ---------- */
.why { background: #0b254b; color: #fff; padding-block: clamp(3.5rem, 7vw, 5.5rem); position: relative; }
.why .h2 { color: #fff; font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.why .kicker { color: var(--teal-300); }
.why__grid { display: grid; gap: 1.75rem; margin-top: 2.25rem; }
.why__item { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: start; align-content: start; }
/* v1.3: section ~5% brighter (same navy hue, #0a2348 -> #0b254b, L* +6.7%); icons 24 -> 28px on a larger, stronger teal disc. */
.why__icon { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: rgba(143, 211, 196, .18); box-shadow: inset 0 0 0 1px rgba(143, 211, 196, .32); color: var(--teal-300); }
.why__icon .icon { width: 28px; height: 28px; stroke-width: 1.9; }
.why h3 { color: #fff; font-size: 1.125rem; font-weight: 700; padding-top: .2rem; }
.why p { color: rgba(255, 255, 255, .78); font-size: 1rem; }
@media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
@media (min-width: 1100px) {
  .why__grid { grid-template-columns: repeat(4, 1fr); }
  .why__item { grid-template-columns: 1fr; }
  .why__icon { grid-row: auto; margin-bottom: .9rem; }
  .why__item + .why__item { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 2.5rem; }
}

/* ---------- Travel notes ---------- */
.notes__grid { display: grid; gap: 2.5rem; }
.notes__group h3 { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-900); padding-bottom: .9rem; border-bottom: 2px solid var(--navy-900); }
.note { position: relative; padding: .75rem 0 .75rem calc(22px + .85rem); border-bottom: 1px solid var(--line); }
.note .icon { position: absolute; left: 0; top: calc(.75rem + .15rem); width: 22px; height: 22px; color: var(--blue-600); }
.note dt { font-weight: 700; color: var(--navy-900); line-height: 1.35; }
.note dd { margin-top: .1rem; color: var(--muted); font-size: .9688rem; line-height: 1.5; }
@media (min-width: 900px) { .note { padding-block: .95rem; } .note .icon { top: calc(.95rem + .15rem); } .note dd { font-size: 1rem; } }
.notes__group--pay { background: #fff; border-radius: var(--radius); padding: 1.5rem 1.35rem .5rem; box-shadow: var(--shadow-soft); }
.notes__group--pay .note:last-child { border-bottom: 0; }
.deposit { display: flex; align-items: baseline; gap: .6rem; margin: 1.1rem 0 .25rem; }
.deposit strong { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--blue-600); }
.deposit span { font-weight: 650; color: var(--navy-900); }
@media (min-width: 900px) {
  .notes__grid { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; align-items: start; }
  .notes__journey { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .notes__group--pay { padding: 2rem 2rem .75rem; }
}

/* ---------- Reviews ---------- */
.reviews__grid { display: grid; gap: 2.5rem; }
.review { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.reviews__hint { display: none; }
@media (max-width: 899px) {
  /* Mobile/tablet: a swipeable row instead of a long stack of quotes */
  .reviews__grid { grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); gap: 1.75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 1.25rem); margin-inline: calc(-1 * var(--gutter, 1.25rem)); padding: .25rem var(--gutter, 1.25rem) 1.25rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .review { scroll-snap-align: start; }
  .review blockquote p { font-size: 1.075rem; }
  .reviews__hint { display: block; margin: -.25rem 0 0; text-align: center; font-size: .875rem; color: var(--muted); }
}
.review blockquote { margin: 0; position: relative; }
.review blockquote::before { content: "\201C"; display: block; height: .5em; margin-bottom: .25rem; font-family: var(--font-serif); font-style: italic; font-size: 4.5rem; line-height: 1; color: var(--blue-600); opacity: .35; }
.review blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 1.175rem; line-height: 1.6; color: var(--ink); }
.review figcaption { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .975rem; color: var(--muted); }
.review figcaption strong { color: var(--navy-900); font-weight: 700; }
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); text-align: center; }
.reviews__score { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .65rem; color: var(--navy-900); font-weight: 650; }
.reviews__score b { font-size: 1.5rem; font-weight: 800; }
.leave { max-width: 40rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }
.leave h3 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 800; }
.leave p { margin-top: .75rem; color: var(--muted); }
.leave .btn { margin-top: 1.5rem; }
@media (min-width: 900px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* ---------- Contact ---------- */
.contact__grid { display: grid; gap: 2.75rem; }
.actions { display: grid; gap: .75rem; margin-top: 1.75rem; }
.action { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 1rem; min-height: 72px; padding: .75rem 1rem .75rem .75rem; border-radius: var(--radius); background: #fff; color: var(--navy-900); text-decoration: none; box-shadow: var(--shadow-soft); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.action:hover { color: var(--navy-900); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(10, 35, 72, .06), 0 14px 30px -14px rgba(10, 35, 72, .3); }
.action__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: #fff; background: var(--blue-600); }
.action--wa .action__icon { background: var(--wa-600); }
.action--mail .action__icon { background: var(--navy-900); }
.action__icon .icon { width: 22px; height: 22px; }
.action__label { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.action__value { display: block; font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
.action > .icon { color: var(--blue-600); }
.contact__note { display: flex; gap: .6rem; margin-top: 1.5rem; color: var(--muted); font-size: .975rem; }
.contact__note .icon { margin-top: .2rem; color: var(--teal-600); }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 5fr 7fr; gap: 4.5rem; align-items: start; } .contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* ---------- Form ---------- */
.form { background: #fff; border-radius: calc(var(--radius) + 4px); padding: clamp(1.35rem, 4vw, 2.5rem); box-shadow: var(--shadow-soft); }
.form h3 { font-size: 1.5rem; font-weight: 800; }
.form__intro { margin-top: .4rem; color: var(--muted); font-size: 1rem; }
.form__route { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--blue-100); color: var(--navy-900); font-weight: 600; font-size: .975rem; }
.form__route[hidden] { display: none; }
.form__route .icon { color: var(--blue-600); }
.form__summary { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: #fdecec; color: #8a1c1c; font-weight: 600; font-size: .975rem; }
.form__summary[hidden] { display: none; }
.fieldset { border: 0; margin: 1.5rem 0 0; padding: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: .9rem; font-size: .8125rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .75rem; }
.field { grid-column: 1 / -1; min-width: 0; }
.field--pair { grid-column: auto; }
@media (min-width: 640px) { .fields { gap: 1.1rem 1rem; } .field { grid-column: auto; } .field--full { grid-column: 1 / -1; } }
.field label { display: block; margin-bottom: .35rem; font-weight: 650; font-size: .95rem; color: var(--navy-900); }
.field .req { color: #b42318; margin-left: .15rem; }
.field .opt { color: var(--muted); font-weight: 500; font-size: .875rem; }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1.5px solid #c9d2df; border-radius: var(--radius-sm); background: #fff; font-size: 1rem; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2348' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9fb0c8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(37, 86, 214, .18); }
.field [aria-invalid="true"] { border-color: #b42318; }
.field__error { display: block; margin-top: .35rem; color: #b42318; font-size: .875rem; font-weight: 600; }
.field__error:empty { display: none; }
.field__hint { display: block; margin-top: .3rem; color: var(--muted); font-size: .875rem; }
.form__send { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.form__send-label { font-weight: 700; color: var(--navy-900); }
.form__buttons { display: grid; gap: .75rem; margin-top: .8rem; }
@media (min-width: 520px) { .form__buttons { grid-template-columns: 1fr 1fr; } }
.form__privacy { display: flex; gap: .55rem; margin-top: 1rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.form__privacy .icon { margin-top: .15rem; color: var(--teal-600); }
.form__status { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: #e8f5ee; color: #0f5130; font-weight: 600; font-size: .975rem; }
.form__status:empty { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: rgba(255, 255, 255, .8); padding-top: clamp(3.5rem, 7vw, 5rem); font-size: 1rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #fff; }
.footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.footer__brand img { width: 240px; height: auto; }
.footer__brand p { margin-top: 1.1rem; max-width: 22rem; }
.footer h2 { margin-bottom: 1rem; font-size: .8125rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-300); }
.footer__list li + li { margin-top: .35rem; }
.footer__list a { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; }
.footer__list .icon { color: var(--teal-300); }
.footer__review p { max-width: 24rem; }
.footer__review .btn { margin-top: 1.1rem; }
.footer .btn--ghost:hover { text-decoration: none; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; color: rgba(255, 255, 255, .72); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .88); }
.credit { font-size: .8125rem; color: rgba(255, 255, 255, .6); }
.credit a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .78); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } .footer__review { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.4fr 1fr .9fr 1.3fr; } .footer__review { grid-column: auto; } }

/* ---------- Sticky mobile action bar ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(10, 35, 72, .45); transform: translateY(110%); transition: transform .28s var(--ease); }
.mbar.is-visible { transform: none; }
.mbar a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; border-radius: 999px; font-weight: 700; font-size: .975rem; text-decoration: none; }
.mbar__call { background: var(--blue-600); color: #fff; }
.mbar__wa { background: var(--wa-600); color: #fff; }
.mbar__enq { background: #fff; color: var(--navy-900); box-shadow: inset 0 0 0 1.5px var(--navy-900); }
.mbar a:hover { color: inherit; filter: brightness(.95); }
.mbar__call:hover, .mbar__wa:hover { color: #fff; }
.no-js .mbar { display: none; }
@media (max-width: 959px) { body.has-mbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }
@media (min-width: 960px) { .mbar { display: none; } }

/* ---------- Legal / simple pages ---------- */
.page-hero { background: var(--navy-900); color: #fff; padding-block: clamp(3rem, 7vw, 4.5rem); }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }
.page-hero p { margin-top: .75rem; color: rgba(255, 255, 255, .82); }
.prose { max-width: 46rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
.prose h2 { margin-top: 2.25rem; font-size: 1.375rem; font-weight: 750; }
.prose p, .prose ul { margin-top: .85rem; color: var(--ink); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 5rem; }
.notfound h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }
.notfound p { margin-top: .75rem; color: var(--muted); }
.notfound .btn { margin-top: 1.75rem; }

/* ---------- Reveal (subtle, JS-only, motion-safe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .action:hover { transform: none; }
}

/* Small pill buttons never push the page wider than the screen */
.btn--sm { max-width: 100%; }
@media (max-width: 379px) { .btn--sm { white-space: normal; text-align: center; padding-inline: 1rem; gap: .4rem; font-size: .9375rem; } }
@media (max-width: 359px) { .hero__kicker { letter-spacing: .08em; } .hero__kicker::before { display: none; } }
.note__extra { display: block; margin-top: .4rem; }
.routes__foot p { align-items: flex-start; max-width: 46rem; }
.routes__foot p .icon { flex: none; margin-top: .15rem; }