/* ============================================================
   SkyBuzzz — Design System
   Trust-first authority. Mobile-first. Palette derived from the logo.
   ============================================================ */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  /* Brand — sampled from the logo artwork */
  --navy-900: #0a1730;
  --navy-800: #102050;
  --navy-700: #16306b;
  --blue-600: #004090;
  --blue-500: #1a5bb8;
  --sky-400:  #40b0e0;
  --sky-300:  #7fd0f0;
  --sky-100:  #e3f2fb;

  /* Coral is the plane in the logo. Reserved exclusively for CTAs so
     the eye always knows where the call action is. */
  --coral-500: #f05040;   /* brand coral, straight from the logo's plane */
  --coral-600: #d93b2b;
  --coral-100: #ffece9;

  /* Button surface is darker than the brand coral on purpose: white label
     text on #f05040 is only 3.54:1, below AA for 16px bold. #cc3722 gives
     5.08:1 with real headroom (--coral-600 passes at just 4.55:1, too thin
     a margin to survive a future tweak). The glow below stays the bright
     brand coral, so the button keeps its vibrancy — a shadow carries no
     text contrast. */
  --coral-btn:       #cc3722;
  --coral-btn-hover: #bb2f1b;

  /* Neutrals */
  --ink:      #0f172a;
  --ink-mid:  #46566f;
  --ink-soft: #5d6b83;   /* 5.10:1 on --surface-2; #6b7c96 was 4.02 */
  --line:     #e2e8f2;
  --surface:  #ffffff;
  --surface-2:#f6f9fd;
  --surface-3:#eef4fb;

  --ok-500:   #129d6b;
  --ok-100:   #e3f7ef;
  /* Text-on-tint shades: --coral-600 and --ok-500 are fine for icons but
     only reach 4.00 and 3.10 for small bold labels on their own tints. */
  --coral-ink: #b92e1b;   /* 5.31:1 on --coral-100 */
  --ok-ink:    #0d7350;   /* 5.25:1 on --ok-100  */

  /* Type — one family keeps the render fast for Ads Quality Score */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* 4/8pt spacing rhythm. The upper steps are deliberately restrained —
     oversized section padding is what makes a site read as "zoomed". */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 36px; --s9: 44px; --s10: 56px; --s11: 68px;

  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16,32,80,.06), 0 1px 3px rgba(16,32,80,.08);
  --shadow-md: 0 4px 12px rgba(16,32,80,.08), 0 2px 4px rgba(16,32,80,.05);
  --shadow-lg: 0 18px 40px rgba(16,32,80,.12), 0 4px 10px rgba(16,32,80,.06);
  --shadow-cta:0 6px 18px rgba(240,80,64,.34);

  /* Wider measure with smaller type — the pairing that stops text from
     looking blown up on large screens. */
  --wrap: 1200px;
  --ease: cubic-bezier(.22,.68,.34,1);

  /* Fallback reserve for the fixed mobile call bar. JS overrides this with
     the measured height; keep it generous so no-JS never clips the footer. */
  --callbar-h: 104px;

  /* z-index scale */
  --z-nav: 100; --z-drawer: 200; --z-callbar: 300; --z-modal: 400;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;            /* never below 16 — iOS zooms on focus otherwise */
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Sticky footer: on a short page (legal pages, big monitors) the footer
     would otherwise stop mid-screen and leave a white band beneath it. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.ftr { flex-shrink: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }
/* Two-tone so the ring survives both the white sections and the navy
   ones: a dark core outline plus a light halo. A single sky-400 ring
   fell under 3:1 against white. */
:focus-visible {
  outline: 3px solid var(--navy-800);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(120, 200, 245, .55);
  border-radius: 4px;
}
.section--deep :focus-visible, .hero :focus-visible, .cta :focus-visible, .ftr :focus-visible {
  outline-color: #fff;
}

/* Skip link. Off-screen until focused, then pinned top-left. Lived as an
   inline <style> in header.php until it was moved here. */
/* Visually hidden but exposed to assistive tech. Used for headings that
   are needed for a correct document outline but would be redundant on
   screen (e.g. a section whose meaning is already obvious visually). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html { scroll-padding-top: 96px; }   /* skip-link + in-page anchors clear the sticky header */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: #fff; color: var(--navy-800);
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip:focus { left: 0; }

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

/* ── Layout ────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
.wrap--narrow { max-width: 820px; }

/* Spacing utilities. These replace the margin-top inline styles that were
   repeated on almost every section block; the values map onto the same
   spacing scale the rest of the stylesheet uses. */
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mt-8 { margin-top: var(--s8); }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }
.mb-5 { margin-bottom: var(--s5); }
.fs-115 { font-size: 1.15rem; }

/* Small explanatory line inside a sidebar card. */
.card-note { color: var(--ink-mid); font-size: .94rem; margin-top: var(--s2); }
/* Same note on the dark call card. */
.card-note-dark { color: #b9c9e4; font-size: .98rem; margin-top: var(--s3); }
.mi-auto { margin-inline: auto; }
.live--mid-left { justify-content: flex-start; }

/* Full fee + independence disclosure on the services hub. Same visual
   weight as the near-CTA disclosure used on the landing pages, but with
   room for the consultation and direct-alternative detail. */
.disclose {
  max-width: 62ch; margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--surface-3);
  border-left: 3px solid var(--blue-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.disclose p { font-size: .875rem; line-height: 1.55; color: var(--ink); }
.disclose p + p { margin-top: var(--s3); }

.mt-3 { margin-top: var(--s3); }
.mb-6 { margin-bottom: var(--s6); }
.fs-112 { font-size: 1.12rem; }

/* Leading callout on a legal page: flush to the top of the prose column. */
.callout--flush { margin-top: 0; margin-bottom: var(--s7); }

/* "Last reviewed" line under a legal page heading. Rendered only when
   LEGAL_LAST_REVIEWED is actually set in config.php. */
.legal-date { margin-top: var(--s3); font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.fs-13 { font-size: 1.3rem; }
.fs-16 { font-size: 1.6rem; }

/* Visually removed but still reachable by the bot traps that need a real
   input in the DOM (honeypot). Not the same as .sr-only, which stays in the
   accessibility tree — this block is aria-hidden as well. */
.offscreen { position: absolute; left: -9999px; }
/* Toggled to display:block by app.js on a successful submit. */
.is-hidden { display: none; }

/* Contact email link — 44px tall so it is a real tap target on a phone. */
.contact-link {
  color: var(--blue-600); font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
}
/* Centred live-status line on a light card. */
.live--center { justify-content: center; }

/* Caption stating the cabin diagram is not live inventory. Small, but kept
   at a readable size and full contrast — it is a material disclosure, not
   decorative fine print. */
.map-note {
  font-size: .8rem; line-height: 1.5; font-weight: 600;
  color: var(--ink-mid); margin-top: var(--s2);
}
.center .map-note { margin-inline: auto; }
.hero-card .map-note { color: #cfe0f6; }

/* The base background for .section--deep was missing entirely. Untinted
   pages therefore rendered its light body text (#b9c9e4) on the white page
   at 1.67:1, and themed pages -- which DO set a dark background via
   --accent-deep -- rendered the heading dark-on-dark at 1.35-1.64:1.
   index.php calls these "the two dark bands", so a dark slab is the intent.
   Themed pages still override the background further down the file. */
.section--deep { background: var(--navy-800); color: #fff; }
.section--deep h2, .section--deep h3 { color: #fff; }

/* Base eyebrow. Restored after an earlier block-removal in this file took
   it out: metrics recovered from a rendered measurement (11.52px / 1.6) and
   from the note further down describing "~11.5px bold" labels. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-600);
}

.section--deep .eyebrow { color: var(--sky-300); }
/* Heroes are always dark, so the default blue eyebrow (1.72:1 on the navy
   scrim) is unreadable there. Contrast audits miss this because the hero
   background is an image plus gradient and cannot be sampled from CSS. */
.hero .eyebrow { color: var(--sky-300); }

.h-sec { font-size: clamp(1.35rem, 3.2vw, 1.85rem); margin-top: var(--s2); }
.sub   { color: var(--ink-mid); font-size: .97rem; margin-top: var(--s3); max-width: 62ch; }
.section--deep .sub { color: #b9c9e4; }
.center .sub { margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 46px;                  /* still clears the 44px touch minimum */
  padding: var(--s2) var(--s5);
  border-radius: var(--r-full);
  font-weight: 700; font-size: .94rem; letter-spacing: -.01em;
  cursor: pointer; text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  touch-action: manipulation;
}
.btn__icon { flex: none; }
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--coral-btn); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--coral-btn-hover); }

.btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.34); }
.btn--ghost:hover { background: rgba(255,255,255,.2); }

.btn--outline { background: #fff; color: var(--navy-800); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
.btn--outline:hover { border-color: var(--sky-400); color: var(--blue-600); }

.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: 1rem; padding-inline: var(--s6); }

/* ── Disruption notice ─────────────────────────────────────── */
/* Amber deliberately: distinct from the navy chrome and from the coral
   CTA, so it reads as a live alert without stealing the call button's
   position as the loudest thing on the page. */
.disrupt {
  background: linear-gradient(180deg, #fef6d9, #fdefc4);
  border-bottom: 1px solid #f3ce7a;
  color: #6b3f05;
}
.disrupt__in {
  display: flex; align-items: center; gap: var(--s3);
  padding-block: 9px; flex-wrap: wrap;
}
.disrupt__ico { flex: none; color: #b45309; display: grid; place-items: center; }
.disrupt__txt { font-size: .84rem; line-height: 1.4; flex: 1 1 auto; min-width: 0; }
.disrupt__txt strong { font-weight: 800; }
.disrupt__txt span { opacity: .82; }
.disrupt__cta {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 var(--s4);
  border-radius: var(--r-full);
  background: #b45309; color: #fff;
  font-size: .81rem; font-weight: 800; white-space: nowrap;
  transition: background-color .18s var(--ease);
}
.disrupt__cta:hover { background: #92400e; }

@media (max-width: 699px) {
  .disrupt__in { gap: var(--s2); }
  .disrupt__txt { flex: 1 1 100%; order: 2; }
  .disrupt__ico { order: 1; }
  .disrupt__cta { order: 1; margin-left: auto; }
}

/* ── Compliance bar ────────────────────────────────────────── */
.compliance {
  background: var(--navy-900); color: #c4d3ec;
  font-size: .78rem; line-height: 1.4; text-align: center;
  padding: var(--s2) var(--s5);
}
.compliance strong { color: #fff; font-weight: 700; }

/* ── Header ────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: var(--s4); min-height: 58px; }
/* The mark is 27px, but the link keeps a full 44px hit area — a smaller
   logo must not shrink the tap target with it. */
.hdr__logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.hdr__logo img { height: 27px; width: auto; }
.hdr__nav { display: none; margin-left: auto; }
.hdr__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.hdr__phone { display: none; }

.navlink {
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 600; color: var(--ink-mid);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.navlink:hover { color: var(--blue-600); background: var(--surface-3); }
.navlink[aria-current="page"] { color: var(--blue-600); background: var(--sky-100); }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); color: var(--navy-800); background: #fff;
}

/* ── Mobile drawer ─────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(10,23,48,.5);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.drawer[hidden] { display: none; }      /* same reasoning as .pop above */
.drawer[data-open="true"] { opacity: 1; }
.drawer__panel {
  position: absolute; inset-block: 0; right: 0; width: min(84vw, 340px);
  background: #fff; padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
  transform: translateX(100%); transition: transform .3s var(--ease);
  overflow-y: auto;
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.drawer__top img { height: 30px; width: auto; }
.drawer__link {
  padding: var(--s4) var(--s3); border-radius: var(--r-md);
  font-weight: 700; font-size: 1.05rem; color: var(--navy-800);
  border-bottom: 1px solid var(--line);
}
.drawer__link[aria-current="page"] { color: var(--blue-600); }
.drawer__cta { margin-top: var(--s5); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 58%, #071227 100%);
  color: #fff;
  padding-block: var(--s9) var(--s10);
}

/* Photographic backdrop. The image sits behind a heavy navy scrim so the
   headline keeps its contrast — a photo alone would drop the text well
   below 4.5:1 and the hero is where the call CTA lives. */
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Mobile: text spans the full width, so the scrim has to be even. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,23,48,.88) 0%, rgba(10,23,48,.80) 42%, rgba(7,18,39,.93) 100%);
}
.hero::after {                    /* soft brand glow, purely decorative */
  content: ''; position: absolute; inset-block-start: -30%; inset-inline-end: -18%;
  width: 60vw; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(64,176,224,.22), transparent 66%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(1.75rem, 5.4vw, 2.6rem); font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--sky-300); }
.hero__sub { color: #c2d4ee; font-size: 1rem; margin-top: var(--s4); max-width: 52ch; }
.hero__cta { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }

/* The number is repeated as text under the button: some users prefer to
   dial manually, and it reassures that the button is a real phone call. */
.hero__num {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.hero__num span { font-size: .74rem; font-weight: 600; color: #9fb6d8; letter-spacing: .04em; text-transform: uppercase; }

.live {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .9rem; font-weight: 600; color: #cfe0f6;
  margin-top: var(--s4);
}
.live__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #2fd48a;
  box-shadow: 0 0 0 0 rgba(47,212,138,.65); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(47,212,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,212,138,0); }
}

/* Desktop-only reassurance card. On mobile the hero is already a full
   screen of CTA, so this would only push the call button down. */
.hero__aside { display: none; }
.hero-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-xl);
  padding: var(--s6);
  backdrop-filter: blur(8px);
}
/* h2 in the hero card, h3 elsewhere: the card sits directly under the
   page h1, so h3 there would skip a heading level. */
.hero-card h2, .hero-card h3 { font-size: 1rem; color: #fff; }
.hero-card ol { list-style: none; padding: 0; margin-top: var(--s5); counter-reset: hc; display: grid; gap: var(--s5); }
.hero-card li { counter-increment: hc; position: relative; padding-left: 38px; color: #cfe0f6; font-size: .88rem; }
.hero-card li::before {
  content: counter(hc); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sky-400); color: var(--navy-900); font-weight: 800; font-size: .8rem;
}
.hero-card li b { color: #fff; display: block; }
.hero-card__foot { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid rgba(255,255,255,.15); }

/* Required advertising disclosure. Sits in the hero directly under the call
   button and must remain visible on every breakpoint — never collapsed into
   a popup, tooltip or the footer. Given a panel of its own so it stays
   legible against the photographic hero rather than fading into it. */
.hero__disclosure {
  max-width: 52ch;
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--sky-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(4, 14, 34, .42);
  /* Material disclosure: kept at body-text size, not fine print. */
  font-size: .875rem;
  line-height: 1.55;
  color: #e4edf9;
}
.hero--center .hero__disclosure { margin-inline: auto; }

/* Same disclosure text on a light card (About sidebar). Keeps the size and
   the left rule; only the palette flips. */
.hero__disclosure--light {
  background: var(--surface-3);
  color: var(--ink);
  border-left-color: var(--blue-600);
  max-width: none;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px var(--s3); border-radius: var(--r-full);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  font-size: .79rem; font-weight: 600; color: #dce8f8;
}
.chip svg { color: var(--sky-300); }

/* ── Trust strip ───────────────────────────────────────────── */
.trust { background: var(--surface-2); border-block: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); padding-block: var(--s7); }
.stat { text-align: center; }
.stat__n { font-size: clamp(1.25rem, 3.4vw, 1.55rem); font-weight: 800; color: var(--blue-600); letter-spacing: -.03em; }
.stat__l { font-size: .78rem; color: var(--ink-soft); font-weight: 600; margin-top: var(--s1); }

/* ── Cards ─────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky-300); }
.card__ico {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--sky-100); color: var(--blue-600); margin-bottom: var(--s4);
}

/* Photo cards: image strip on top, icon badge straddling the seam. */
/* Flex column so "Learn more" bottom-aligns across cards whose blurbs
   wrap to different line counts. */
.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--photo .card__body { display: flex; flex-direction: column; flex: 1; }
.card--photo .card__more { margin-top: auto; padding-top: var(--s3); }
.card__media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s var(--ease);
}
.card--photo:hover .card__media img { transform: scale(1.05); }
.card__media::after {          /* keeps the badge legible over bright photos */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,23,48,.35) 100%);
}
.card__body { padding: var(--s5); position: relative; }
.card--photo .card__ico {
  position: absolute; top: -26px; left: var(--s5); z-index: 2;
  width: 46px; height: 46px; margin: 0;
  background: #fff; color: var(--blue-600);
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
.card--photo h3 { margin-top: var(--s4); }
.card h3 { font-size: 1rem; }
.card p { color: var(--ink-mid); font-size: .89rem; margin-top: var(--s2); }
.card__more {
  display: inline-flex; align-items: center; gap: var(--s2);
  /* coral-600, not coral-500: at ~13.8px bold this is normal-size text and
     the brighter coral only reaches 3.5:1 on white. Buttons keep coral-500
     because their contrast is white-on-coral, which is unaffected. */
  margin-top: var(--s3); font-weight: 700; font-size: .86rem; color: var(--coral-600);
}
.card__more svg { transition: transform .18s var(--ease); }
.card:hover .card__more svg { transform: translateX(3px); }

/* ── Scenario cards ────────────────────────────────────────── */
.scen { display: grid; gap: var(--s4); }
.scen__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
}
.scen__item h3 { font-size: .99rem; display: flex; align-items: center; gap: var(--s3); }
.scen__ico {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--coral-100); color: var(--coral-600);
}
.scen__item p { color: var(--ink-mid); font-size: .89rem; margin-top: var(--s3); }

/* ── Numbered checklist panel ──────────────────────────────── */
.checklist {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s6);
}
.checklist ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); counter-reset: ck; }
.checklist li { counter-increment: ck; position: relative; padding-left: 42px; font-size: .91rem; color: var(--ink-mid); }
.checklist li::before {
  content: counter(ck); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-600); color: #fff; font-weight: 800; font-size: .78rem;
}
.checklist li b { display: block; color: var(--ink); font-size: .96rem; margin-bottom: 2px; }

/* ── Two-column comparison ─────────────────────────────────── */
.compare { display: grid; gap: var(--s4); }
.compare__col { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.compare__col--us { border-color: var(--sky-300); box-shadow: var(--shadow-md); }
.compare__head { padding: var(--s4) var(--s5); font-weight: 800; font-size: .95rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.compare__col--us .compare__head { background: var(--navy-800); color: #fff; border-bottom-color: var(--navy-700); }
.compare__col ul { list-style: none; padding: var(--s5); margin: 0; display: grid; gap: var(--s4); }
.compare__col li { display: flex; gap: var(--s3); font-size: .89rem; color: var(--ink-mid); align-items: flex-start; }
.compare__col li svg { flex: none; margin-top: 2px; }
.compare__col--us li svg { color: var(--ok-500); }
.compare__col--diy li svg { color: var(--ink-soft); }

/* ── Reference / rights list ───────────────────────────────── */
.rights { display: grid; gap: var(--s5); }
.rights__item { padding-left: var(--s5); border-left: 3px solid var(--sky-300); }
.section--deep .rights__item { border-left-color: var(--sky-400); }
.rights__item h3 { font-size: .99rem; color: var(--navy-800); }
.section--deep .rights__item h3 { color: #fff; }
.rights__item p { color: var(--ink-mid); font-size: .9rem; margin-top: var(--s2); }
.section--deep .rights__item p { color: #b9c9e4; }
.rights__note { font-size: .82rem; color: var(--ink-soft); margin-top: var(--s6); }
/* Light-alpha rather than a fixed blue-grey: this sits on four different
   accent-deep backgrounds, and #8ea3c4 fell to 4.36:1 on the amber one. */
.section--deep .rights__note { color: rgba(255,255,255,.8); }
.rights__note a { color: var(--blue-600); font-weight: 600; text-decoration: underline; }
.section--deep .rights__note a { color: var(--sky-300); }

@media (min-width: 700px) {
  .scen   { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .rights { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s7); }
}
@media (min-width: 1000px) {
  .scen--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   PER-PAGE ACCENT
   Navy chrome and the coral CTA stay constant so the brand holds;
   the accent shifts per service so the four pages read as different
   places. Set with a body class, e.g. <body class="t-cancel">.
   ══════════════════════════════════════════════════════════════ */
:root {
  --accent:      var(--blue-600);
  --accent-soft: var(--sky-100);
  --accent-line: #cfe6f6;
  --accent-deep: var(--navy-800);
}
/* Accents are darkened to clear 4.5:1 against their own tinted background —
   the eyebrow labels are ~11.5px bold, which counts as normal text, so the
   lighter shades that looked fine on white failed on .section--alt. */
.t-change  { --accent: #0c69b4; --accent-soft: #e2f2fd; --accent-line: #bfe0f7; --accent-deep: #0b3f70; }
.t-cancel  { --accent: #a44e15; --accent-soft: #fdf0e3; --accent-line: #f6d6b4; --accent-deep: #5d2f10; }
.t-seat    { --accent: #0b7168; --accent-soft: #e0f5f2; --accent-line: #b3e3dc; --accent-deep: #08453f; }
.t-booking { --accent: #5a49c4; --accent-soft: #eeebfb; --accent-line: #d3ccf3; --accent-deep: #2e2569; }

/* Elements that follow the accent rather than the fixed brand blue. */
.t-change .eyebrow, .t-cancel .eyebrow, .t-seat .eyebrow, .t-booking .eyebrow { color: var(--accent); }
.t-change .section--deep .eyebrow, .t-cancel .section--deep .eyebrow,
.t-seat .section--deep .eyebrow,   .t-booking .section--deep .eyebrow { color: #fff; opacity: .85; }
.t-change .card__ico, .t-cancel .card__ico, .t-seat .card__ico, .t-booking .card__ico { background: var(--accent-soft); color: var(--accent); }
.t-change .scen__ico, .t-cancel .scen__ico, .t-seat .scen__ico, .t-booking .scen__ico { background: var(--accent-soft); color: var(--accent); }
.t-change .stat__n, .t-cancel .stat__n, .t-seat .stat__n, .t-booking .stat__n { color: var(--accent); }
.t-change .step::before, .t-cancel .step::before, .t-seat .step::before, .t-booking .step::before { background: var(--accent); }
.t-change .rights__item, .t-cancel .rights__item, .t-seat .rights__item, .t-booking .rights__item { border-left-color: var(--accent); }
.t-change .section--deep, .t-cancel .section--deep, .t-seat .section--deep, .t-booking .section--deep { background: var(--accent-deep); }
.t-change .checklist li::before, .t-cancel .checklist li::before,
.t-seat .checklist li::before,   .t-booking .checklist li::before { background: var(--accent); }
.t-change .section--alt, .t-cancel .section--alt, .t-seat .section--alt, .t-booking .section--alt { background: var(--accent-soft); }
.t-change .softcall, .t-cancel .softcall, .t-seat .softcall, .t-booking .softcall {
  background: linear-gradient(135deg, var(--accent-soft), #fff);
  border-color: var(--accent-line);
}
.t-change .softcall__num, .t-cancel .softcall__num, .t-seat .softcall__num, .t-booking .softcall__num { color: var(--accent); }
.t-change .softcall__go, .t-cancel .softcall__go, .t-seat .softcall__go, .t-booking .softcall__go { background: var(--accent); }
.t-change .softcall__ico, .t-cancel .softcall__ico, .t-seat .softcall__ico, .t-booking .softcall__ico { color: var(--accent); }

/* Hero scrim tinted by the accent so even the first screen differs. */
.t-change .hero::before, .t-cancel .hero::before, .t-seat .hero::before, .t-booking .hero::before {
  /* Mixed with `transparent`, not #000: color-mix against black produces an
     OPAQUE colour, which hid the hero photograph completely on the themed
     pages. These alphas mirror the untinted .hero::before above. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 88%, transparent) 0%,
                                      color-mix(in srgb, var(--accent-deep) 80%, transparent) 45%,
                                      color-mix(in srgb, var(--accent-deep) 93%, transparent) 100%);
}
@media (min-width: 900px) {
  .t-change .hero::before, .t-cancel .hero::before, .t-seat .hero::before, .t-booking .hero::before {
    /* Desktop: scrim falls away to the right so the photograph reads, exactly
       as the untinted hero does. Alpha via `transparent`, never #000. */
    background:
      linear-gradient(100deg, color-mix(in srgb, var(--accent-deep) 95%, transparent) 0%,
                              color-mix(in srgb, var(--accent-deep) 88%, transparent) 32%,
                              color-mix(in srgb, var(--accent-deep) 56%, transparent) 62%,
                              color-mix(in srgb, var(--accent-deep) 30%, transparent) 100%),
      linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.48) 100%);
  }
}
/* The popup adopts the page's accent too, so it reads as part of the page
   it opened on rather than a generic overlay dropped on top. */
.t-change .pop__top, .t-cancel .pop__top, .t-seat .pop__top, .t-booking .pop__top {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent-deep) 84%, #fff 4%) 0%,
    var(--accent-deep) 55%,
    color-mix(in srgb, var(--accent-deep) 88%, #000) 100%);
}
.t-change .pop__top::after, .t-cancel .pop__top::after,
.t-seat .pop__top::after,   .t-booking .pop__top::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 46%, transparent), transparent 68%);
}
.t-change .pop__avatar-in, .t-cancel .pop__avatar-in,
.t-seat .pop__avatar-in,   .t-booking .pop__avatar-in {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}
.t-change .pop__ripple, .t-cancel .pop__ripple, .t-seat .pop__ripple, .t-booking .pop__ripple {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.t-change .pop__numcard, .t-cancel .pop__numcard, .t-seat .pop__numcard, .t-booking .pop__numcard {
  background: linear-gradient(135deg, var(--accent-soft), #fff);
  border-color: var(--accent-line);
}
.t-change .pop__num,     .t-cancel .pop__num,     .t-seat .pop__num,     .t-booking .pop__num,
.t-change .pop__numicon, .t-cancel .pop__numicon, .t-seat .pop__numicon, .t-booking .pop__numicon { color: var(--accent); }
.t-change .pop__scroll h2, .t-cancel .pop__scroll h2,
.t-seat .pop__scroll h2,   .t-booking .pop__scroll h2 { color: var(--accent-deep); }
.t-change .pop__assure i, .t-cancel .pop__assure i,
.t-seat .pop__assure i,   .t-booking .pop__assure i {
  background: var(--accent-soft); color: var(--accent);
}
.t-change .pop__assure span, .t-cancel .pop__assure span,
.t-seat .pop__assure span,   .t-booking .pop__assure span {
  border-color: var(--accent-line); color: var(--accent-deep);
}
.t-change .pop__lead b, .t-cancel .pop__lead b, .t-seat .pop__lead b, .t-booking .pop__lead b { color: var(--accent-deep); }
.t-change .pop__lead li::before, .t-cancel .pop__lead li::before,
.t-seat .pop__lead li::before,   .t-booking .pop__lead li::before { color: var(--accent); }

/* Hero layout variants — the first screen is what makes pages feel the
   same, so each service gets a different one. */
.hero--center .hero__in { text-align: center; max-width: 760px; margin-inline: auto; }
.hero--center .hero__sub { margin-inline: auto; }
.hero--center .hero__cta,
.hero--center .chips,
.hero--center .live { justify-content: center; }
.hero--center .hero__cta { flex-direction: column; align-items: center; }
@media (min-width: 600px) { .hero--center .hero__cta { flex-direction: row; } }

/* Compact aside variants used in place of the generic "what happens" card. */
.hero-mini { display: grid; gap: var(--s4); }
.hero-mini__row { display: grid; grid-template-columns: auto 1fr; gap: var(--s3) var(--s4); align-items: center; }
.hero-mini__k {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; font-weight: 800; font-size: .85rem;
}
.hero-mini__row b { color: #fff; font-size: .93rem; }
/* :not() is load-bearing — .hero-mini__k is a <span> too, and this rule
   outranks it on specificity, which pushed the number badge into column 2
   and bumped the label onto its own row. */
.hero-mini__row > span:not(.hero-mini__k) { grid-column: 2; font-size: .8rem; color: #b9c9e4; }

/* Miniature cabin used inside the seat-selection hero. */
.hero-cabin { width: 100%; max-width: 210px; margin-inline: auto; }
.hero-cabin .cabin__row { grid-template-columns: repeat(3,1fr) 12px repeat(3,1fr); gap: 4px; }
.hero-cabin .cabin__rows { gap: 4px; }
.hero-cabin .seat { border-radius: 4px 4px 2px 2px; }
.hero-cabin .seat--std  { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.28); }
.hero-cabin .seat--legs { background: var(--sky-400); border-color: var(--sky-400); }
.hero-cabin .seat--exit { background: transparent; border: 1.5px dashed var(--coral-500); }
.hero-cabin .seat--held { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.hero-cabin__key { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: center; margin-top: var(--s5); }
.hero-cabin__key span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: #cfe0f6; }
.hero-cabin__key .seat { width: 12px; aspect-ratio: 1; flex: none; }

/* Miniature booking record used inside the manage-booking hero. */
.hero-rec { display: grid; gap: 0; }
.hero-rec__r { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center;
               padding: var(--s3) 0; border-bottom: 1px dashed rgba(255,255,255,.16); }
.hero-rec__r:last-child { border-bottom: 0; }
.hero-rec__r small { display: block; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: #9fb6d8; }
.hero-rec__r b { color: #fff; font-size: .9rem; }
.hero-rec__f { font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
               padding: 3px 8px; border-radius: var(--r-full); background: rgba(255,255,255,.14); color: #cfe0f6; white-space: nowrap; }
.hero-rec__f--ok { background: rgba(47,212,138,.18); color: #9ff0c9; }

/* ══════════════════════════════════════════════════════════════
   SERVICE-PAGE SIGNATURES
   One distinctive component per service so the four pages read as
   different places rather than the same template with new words.
   ══════════════════════════════════════════════════════════════ */

/* ── Flight change: cost anatomy ───────────────────────────── */
.costbars { display: grid; gap: var(--s4); }
.costbar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3) var(--s4); align-items: start;
}
.costbar__tag {
  grid-row: span 2; width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.costbar--a .costbar__tag { background: var(--sky-100); color: var(--blue-600); }
.costbar--b .costbar__tag { background: var(--coral-100); color: var(--coral-ink); }
.costbar--c .costbar__tag { background: var(--ok-100);   color: var(--ok-ink); }
.costbar h3 { font-size: 1rem; align-self: center; }
.costbar p { grid-column: 2; color: var(--ink-mid); font-size: .89rem; }
.costbar__note { grid-column: 2; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }

/* ── Flight change: timing pressure ────────────────────────── */
.timeline { position: relative; display: grid; gap: var(--s5); margin-top: var(--s7); }
.timeline::before {
  content: ''; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--ok-500), #eab308 45%, var(--coral-500));
}
.tl { position: relative; padding-left: 44px; }
.tl__dot {
  position: absolute; left: 6px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 2px currentColor;
}
.tl--ok   .tl__dot { background: var(--ok-500);    color: var(--ok-500); }
.tl--warn .tl__dot { background: #eab308;          color: #eab308; }
.tl--bad  .tl__dot { background: var(--coral-500); color: var(--coral-500); }

/* Neutral timeline: same structure, no red/amber escalation. Used where the
   sequence is informational rather than a warning. */
.timeline--neutral::before { background: var(--sky-400); opacity: .55; }
.timeline--neutral .tl__dot { background: var(--sky-400); color: var(--sky-400); }
.tl b { display: block; font-size: .98rem; color: var(--navy-800); }
.tl p { color: var(--ink-mid); font-size: .89rem; margin-top: 2px; }
/* The timeline is used on light sections AND inside dark bands. Its default
   navy/grey text drops to 1.18:1 on a dark background — effectively
   invisible — so it needs light colours when nested in .section--deep. */
.section--deep .tl b { color: #fff; }
.section--deep .tl p { color: rgba(255,255,255,.78); }

/* ── Cancellation: decision branch ─────────────────────────── */
.branch { display: grid; gap: var(--s5); }
.branch__card {
  border-radius: var(--r-xl); padding: var(--s6);
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm);
}
.branch__card--strong { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); border-color: var(--navy-700); color: #fff; }
.branch__q { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.branch__card--strong .branch__q { color: var(--sky-300); }
.branch__card h3 { font-size: 1.18rem; margin-top: var(--s2); }
.branch__arrow { display: block; margin: var(--s4) 0 var(--s3); color: var(--sky-400); }
.branch__out {
  border-radius: var(--r-md); padding: var(--s4);
  background: var(--ok-100); color: #0f5c42; font-size: .9rem; font-weight: 600;
}
.branch__card--strong .branch__out { background: rgba(47,212,138,.14); color: #9ff0c9; }
.branch__out--soft { background: var(--surface-3); color: var(--ink-mid); }
.branch__note { font-size: .85rem; color: var(--ink-mid); margin-top: var(--s4); }
.branch__card--strong .branch__note { color: #b9c9e4; }

/* ── Seat selection: cabin diagram ─────────────────────────── */
.cabin {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s6);
}
.cabin__plane {
  /* width:100% is load-bearing. Without a definite width here the seat
     columns (1fr, no intrinsic size) collapse to a couple of pixels and
     the fuselage then shrink-wraps that — the whole diagram vanishes. */
  width: 100%; max-width: 320px; margin-inline: auto;
  border: 2px solid var(--line); border-radius: 90px 90px 18px 18px;
  padding: var(--s7) var(--s4) var(--s5);
  background: #fff;
}
.cabin__rows { display: grid; gap: 6px; }
.cabin__row { display: grid; grid-template-columns: repeat(3, 1fr) 16px repeat(3, 1fr); gap: 5px; align-items: center; }
.seat { aspect-ratio: 1; border-radius: 5px 5px 3px 3px; background: var(--surface-3); border: 1px solid #dce6f2; }
.seat--std  { background: var(--sky-100);  border-color: #bfe0f5; }
.seat--legs { background: var(--sky-400);  border-color: #2f9dcd; }
.seat--exit { background: #fff; border: 1.5px dashed var(--coral-500); }
.seat--held { background: #e6ebf3; border-color: #d3dcea; }
.cabin__aisle { font-size: .6rem; color: var(--ink-soft); text-align: center; }
.cabin__legend { display: grid; gap: var(--s3); margin-top: var(--s6); }
.cabin__legend div { display: flex; align-items: flex-start; gap: var(--s3); font-size: .87rem; color: var(--ink-mid); }
.cabin__legend .seat { width: 18px; flex: none; aspect-ratio: 1; margin-top: 2px; }
.cabin__legend b { color: var(--ink); }

/* ── Manage booking: annotated record ──────────────────────── */
.record {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.record__top {
  background: linear-gradient(120deg, var(--navy-800), var(--blue-600));
  color: #fff; padding: var(--s5) var(--s6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.record__top small { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #a8c8e8; display: block; }
.record__top b { font-size: 1.05rem; }
.record__rows { padding: var(--s3) var(--s6) var(--s6); }
.record__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px dashed var(--line); }
.record__row:last-child { border-bottom: 0; }
.record__row small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); display: block; }
.record__row b { font-size: .98rem; color: var(--navy-800); }
.record__row p { grid-column: 1 / -1; font-size: .85rem; color: var(--ink-mid); margin-top: var(--s2); }
.record__flag {
  align-self: start; flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  /* Neutral, not alarm-coloured: these are "check this" labels, not warnings. */
  background: var(--surface-3); color: var(--ink-mid); white-space: nowrap;
}
.record__flag--ok { background: var(--ok-100); color: var(--ok-ink); }

/* Caption marking the record card as a diagram rather than a live booking. */
.record__note { padding: var(--s3) var(--s6) 0; margin-top: 0; }

@media (min-width: 700px) {
  .costbars { grid-template-columns: repeat(3, 1fr); }
  .branch   { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .cabin__legend { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
}
@media (min-width: 900px) {
  .cabin { display: grid; grid-template-columns: 340px 1fr; gap: var(--s8); align-items: center; padding: var(--s7); }
  .cabin__legend { grid-template-columns: 1fr; margin-top: 0; }
}

/* ── Why band with photo ───────────────────────────────────── */
.why__media {
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 20px 46px rgba(4,12,30,.42);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: var(--s7);
}
.why__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .why__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: var(--s10); align-items: center; }
  .why__media { margin-bottom: 0; }
}

/* ── Soft call CTA ─────────────────────────────────────────── */
/* A quieter counterpart to the coral button. Coral stays the single
   loud CTA per screen; this one invites rather than pushes, and leads
   with the number itself for people who would rather dial than tap. */
.softcall {
  display: flex; flex-direction: column; gap: var(--s5);
  background: linear-gradient(135deg, var(--sky-100) 0%, #f5fbff 100%);
  border: 1px solid #cfe6f6;
  border-radius: var(--r-xl);
  padding: var(--s6);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.softcall:hover { border-color: var(--sky-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.softcall:active { transform: translateY(0); }

.softcall__lead { display: flex; align-items: flex-start; gap: var(--s4); }
.softcall__ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--blue-600); box-shadow: var(--shadow-sm);
}
.softcall__lead b { display: block; font-size: 1rem; color: var(--navy-800); font-weight: 800; }
.softcall__lead p { font-size: .88rem; color: var(--ink-mid); margin-top: 2px; }

.softcall__act { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.softcall__num {
  font-size: clamp(1.35rem, 4.2vw, 1.7rem); font-weight: 800;
  color: var(--blue-600); letter-spacing: -.025em; line-height: 1.1;
  display: block;
}
.softcall__cue { display: block; font-size: .76rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.softcall__go {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-600); color: #fff;
  transition: transform .2s var(--ease);
}
.softcall:hover .softcall__go { transform: translateX(3px); }

@media (min-width: 700px) {
  .softcall { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s7); padding: var(--s6) var(--s7); }
  .softcall__act { flex: none; }
  .softcall__num { text-align: right; }
  .softcall__cue { text-align: right; }
}

/* ── Steps ─────────────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: var(--s6); }
.step { position: relative; padding-left: 48px; counter-increment: step; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-800); color: #fff; font-weight: 800; font-size: .92rem;
}
.step h3 { font-size: .99rem; }
.step p { color: var(--ink-mid); font-size: .89rem; margin-top: var(--s1); }

/* ── Feature list ──────────────────────────────────────────── */
.ticks { display: grid; gap: var(--s4); }
.tick { display: flex; gap: var(--s3); align-items: flex-start; }
.tick__ico {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ok-100); color: var(--ok-500);
}
.section--deep .tick__ico { background: rgba(64,176,224,.18); color: var(--sky-300); }
.tick b { display: block; font-size: .94rem; }
.tick p { color: var(--ink-mid); font-size: .87rem; margin-top: 2px; }
.section--deep .tick p { color: #b9c9e4; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; text-align: left;
  font-weight: 700; font-size: .95rem; color: var(--navy-800);
  min-height: 48px;
}
.faq__q svg { flex: none; color: var(--ink-soft); transition: transform .22s var(--ease); }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
/* visibility (not just height) is what actually removes a collapsed answer
   from the accessibility tree and the tab order. Without it aria-expanded
   says "collapsed" while screen readers still read every answer.
   Transitioning it holds the text visible through the closing animation,
   then flips at the end. */
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility .26s var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a > div { visibility: visible; }
.faq__a p { color: var(--ink-mid); font-size: .9rem; padding-bottom: var(--s5); }

/* ── CTA band ──────────────────────────────────────────────── */
.cta {
  background: linear-gradient(140deg, var(--blue-600), var(--navy-800));
  color: #fff; text-align: center;
  padding-block: var(--s9);
}
.cta h2 { font-size: clamp(1.3rem, 3.4vw, 1.75rem); }
.cta p { color: #c2d4ee; margin-top: var(--s3); max-width: 52ch; margin-inline: auto; }
.cta__btns { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); align-items: center; }
.cta__btns .btn { width: 100%; max-width: 340px; }

/* ── Prose (legal pages) ───────────────────────────────────── */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.12rem; margin-top: var(--s8); color: var(--navy-800); }
.prose h3 { font-size: .99rem; margin-top: var(--s6); color: var(--navy-700); }
/* Measure limit. NOTE: `ch` is the width of the "0" glyph, which in Plus
   Jakarta Sans is far wider than the average lowercase character — the
   pre-existing `max-width: 72ch` actually rendered ~94 characters per line.
   `em` calibrated against measured average character width gets ~68. */
.prose p, .prose li { color: var(--ink-mid); margin-top: var(--s3); font-size: .93rem; max-width: 37em; }
.prose ul, .prose ol { margin-top: var(--s3); padding-left: var(--s6); max-width: 37em; }
.prose li { margin-top: var(--s2); }
/* Data tables on the privacy page. The wrapper is a focusable scroll region
   so a keyboard user can reach and pan a table that is wider than a phone
   screen; the table itself keeps real table semantics. */
.dtable-wrap { overflow-x: auto; margin-top: var(--s4); max-width: 37em; }
.dtable-wrap:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 2px; }
.dtable { border-collapse: collapse; width: 100%; min-width: 30em; font-size: .89rem; }
.dtable th, .dtable td { text-align: left; vertical-align: top; padding: var(--s3); border-bottom: 1px solid var(--line); }
.dtable thead th { background: var(--surface-3); color: var(--navy-800); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.dtable tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.dtable td { color: var(--ink-mid); }

.prose strong { color: var(--ink); }
.prose a { color: var(--blue-600); font-weight: 600; text-decoration: underline; }

.pagehead { background: var(--surface-2); border-bottom: 1px solid var(--line); padding-block: var(--s8); }
.pagehead h1 { font-size: clamp(1.5rem, 4vw, 2.05rem); }
.pagehead p { color: var(--ink-mid); margin-top: var(--s3); max-width: 62ch; font-size: .97rem; }
.crumb { font-size: .85rem; color: var(--ink-soft); margin-bottom: var(--s3); }
.crumb a { color: var(--blue-600); font-weight: 600; }

/* ── Callout ───────────────────────────────────────────────── */
.callout {
  background: var(--coral-100); border: 1px solid #ffd4cd; border-left: 4px solid var(--coral-500);
  border-radius: var(--r-md); padding: var(--s5); margin-top: var(--s6);
}
.callout b { color: var(--navy-800); }
.callout p { color: var(--ink-mid); font-size: .94rem; margin-top: var(--s2); }

/* ── Form ──────────────────────────────────────────────────── */
.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s5); box-shadow: var(--shadow-lg); }
/* Dark variant used for the primary call card on the contact page. */
.formcard--dark { background: var(--navy-800); border-color: var(--navy-700); color: #fff; }
.formcard--dark .live { justify-content: center; }
/* The base .live colour is tuned for dark heroes and drops to 1.34:1 on a
   white card. Any .live inside a light .formcard gets the ink colour.
   Specificity (3 classes) beats both .live and .hero .live. */
/* .live is coloured for dark heroes; on any light surface it drops to
   ~1.3:1. Every light context that hosts one needs the ink colour. This has
   now bitten four times — worth inverting the default in a future pass so
   .live is dark by default and light only inside .hero/.cta/.formcard--dark. */
.formcard:not(.formcard--dark) .live,
.pagehead .live { color: var(--ink-mid); }
.field { margin-bottom: var(--s4); }
.field label { display: block; font-size: .83rem; font-weight: 700; color: var(--navy-800); margin-bottom: var(--s2); }
.field .req { color: var(--coral-btn); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: var(--s2) var(--s4);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: #fff; font-size: 16px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 104px; padding-top: var(--s3); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sky-400); box-shadow: 0 0 0 4px rgba(64,176,224,.16);
}
/* Keyboard focus needs a ring that meets 3:1 on the white form card; the
   soft glow above is 16% alpha and does not. Mouse focus keeps the glow. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--navy-800); outline-offset: 2px;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--coral-500); }
.field__err { display: none; color: var(--coral-600); font-size: .84rem; font-weight: 600; margin-top: var(--s2); }
.field__err[data-show="true"] { display: block; }
.field__hint { color: var(--ink-soft); font-size: .82rem; margin-top: var(--s2); }
.row2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--s4); }

.formnote { font-size: .8rem; color: var(--ink-soft); text-align: center; margin-top: var(--s4); }
.formmsg { border-radius: var(--r-md); padding: var(--s4); font-size: .92rem; font-weight: 600; margin-bottom: var(--s4); display: none; }
.formmsg[data-show="true"] { display: block; }
.formmsg--err { background: var(--coral-100); color: var(--coral-600); }
.formok { text-align: center; padding: var(--s7) var(--s4); }
.formok__ico { width: 62px; height: 62px; border-radius: 50%; background: var(--ok-100); color: var(--ok-500); display: grid; place-items: center; margin: 0 auto var(--s4); }
.formok h3 { font-size: 1.25rem; color: var(--navy-800); }
.formok p { color: var(--ink-mid); margin-top: var(--s2); font-size: .95rem; }

/* ── Footer ────────────────────────────────────────────────── */
.ftr { background: var(--navy-900); color: #9fb2ce; padding-block: var(--s9) 0; font-size: .88rem; }
.ftr__grid { display: grid; gap: var(--s7); }
.ftr__logo { height: 34px; width: auto; margin-bottom: var(--s4); }
.ftr h3, .ftr h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s4); font-weight: 700; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.ftr a:hover { color: var(--sky-300); }
.ftr__ci { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.ftr__ci svg { flex: none; color: var(--sky-400); margin-top: 2px; }
.ftr__phone { color: #fff; font-weight: 800; font-size: 1.05rem; }
.ftr__disc { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md); padding: var(--s4); font-size: .82rem; line-height: 1.6; margin-top: var(--s5); }
.ftr__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--s8); padding-block: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; font-size: .82rem; }
.ftr__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* Touch targets. On a phone the footer contact and legal links rendered
   21-27px tall, well under the 44px minimum, and sat close enough together
   to mis-tap. Growing the hit area with min-height + inline-flex leaves the
   text size and the visual rhythm alone. */
@media (max-width: 700px) {
  .ftr__ci a,
  .ftr__bottom nav a {
    min-height: 44px;
    min-width: 44px;          /* "Terms" is only 37px of text on its own */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ftr__bottom nav { gap: var(--s2) var(--s5); }
}

/* ── Call popup ────────────────────────────────────────────── */
.pop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s4);
  background: rgba(10,23,48,.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
/* Setting `display` above beats the UA stylesheet's [hidden]{display:none},
   so the attribute has to be honoured explicitly — otherwise the overlay
   stays in the layout and only looks hidden. Presence is driven by [hidden]
   (toggled in JS) and the fade by opacity alone; transitioning `visibility`
   flips discretely at the end of the duration and is easy to get wrong. */
.pop[hidden] { display: none; }
.pop[data-open="true"] { opacity: 1; }

/* The dialog is focused programmatically for screen readers; the title
   carries the context, so the ring on the container is just noise. */
.pop__panel:focus { outline: none; }

/* Column layout: the middle scrolls, the CTA is pinned. Without this the
   call button falls below the fold on short phones exactly when there is
   more content — which is the whole point of the popup. */
.pop__panel {
  width: 100%; max-width: 440px;
  background: #fff; border-radius: var(--r-xl);
  box-shadow: 0 28px 70px rgba(6,16,38,.42);
  overflow: hidden; position: relative;
  max-height: calc(100dvh - 2 * var(--s4));
  display: flex; flex-direction: column;
}
/* Overshoot-and-settle entrance (the fa-bounce feel). */
@keyframes popBounceIn {
  0%   { opacity: 0; transform: translateY(28px) scale(.90); }
  55%  { opacity: 1; transform: translateY(-8px) scale(1.025); }
  75%  { transform: translateY(3px) scale(.995); }
  100% { opacity: 1; transform: none; }
}
.pop[data-open="true"] .pop__panel {
  animation: popBounceIn .55s cubic-bezier(.22,.9,.28,1.2) both;
}

.pop__close {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: #cfe0f6; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.pop__close:hover { background: rgba(255,255,255,.22); color: #fff; transform: rotate(90deg); }

/* Slim navy cap. The avatar straddles the seam below it, which reads as one
   object instead of the two stacked blocks a full-height header produced. */
.pop__top {
  position: relative;
  background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  /* 56px inline padding keeps the centred pill clear of the close button,
     which occupies the rightmost ~50px. */
  padding: var(--s5) 56px 44px;
  text-align: center;
}
.pop__top::after {          /* soft brand glow behind the avatar */
  content: ''; position: absolute; left: 50%; bottom: -30px; translate: -50% 0;
  width: 210px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(64,176,224,.30), transparent 68%);
  pointer-events: none;
}
.pop__status {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 14px; border-radius: var(--r-full);
  background: rgba(47,212,138,.14); border: 1px solid rgba(47,212,138,.32);
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #7ce8b6;
}
.pop__status i {
  width: 7px; height: 7px; border-radius: 50%; background: #2fd48a;
  animation: popBeat 2.4s ease-in-out infinite;
}
.pop__status-short { display: none; }
/* Small phones: the full label cannot fit between the close button and the
   panel edge, so swap in a shorter one rather than let the pill wrap. */
@media (max-width: 380px) {
  .pop__top { padding-inline: 50px; }
  .pop__status { font-size: .64rem; padding: 4px 10px; letter-spacing: .03em; }
  .pop__status-full { display: none; }
  .pop__status-short { display: inline; }
  .pop__scroll h2 { font-size: 1.14rem; }
  .pop__num { font-size: 1.5rem; }
}

/* Agent avatar, lifted onto the seam. */
.pop__avatar {
  position: relative; z-index: 3;
  width: 84px; height: 84px; margin: -42px auto 0;
  display: grid; place-items: center;
}
.pop__avatar-in {
  position: relative; z-index: 2;
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--sky-400), var(--blue-600));
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 10px 26px rgba(0,64,144,.34);
  animation: popBeat 2.4s ease-in-out infinite;
}
@keyframes popBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.pop__ripple {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 2px solid rgba(64,176,224,.45);
  animation: popRipple 2.6s ease-out infinite;
}
.pop__ripple--b { animation-delay: 1.3s; }
@keyframes popRipple {
  /* Starts just clear of the avatar rather than behind it, so the ring is
     visible the instant it begins rather than emerging a beat later. */
  0%   { transform: scale(1.02); opacity: .6; }
  100% { transform: scale(1.9);  opacity: 0; }
}

.pop__online {
  position: absolute; z-index: 3; right: 3px; bottom: 7px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #2fd48a; border: 3px solid #fff;
  animation: popBeat 2.4s ease-in-out infinite;
}

/* Scrollable middle. min-height:0 is required or a flex child refuses to
   shrink below its content and the panel overflows instead of scrolling. */
.pop__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Extra bottom padding now that there is no pinned footer below it. */
  padding: var(--s5) var(--s6) var(--s6); text-align: center;
}
.pop__scroll h2 { font-size: 1.24rem; color: var(--navy-800); margin-top: var(--s4); }
.pop__scroll > p { color: var(--ink-mid); font-size: .92rem; margin-top: var(--s2); }

/* Number and CTA side by side. Sitting high in the panel means the call
   action stays visible even when the content below it scrolls — which is
   what the old pinned footer was there to guarantee. */
.pop__callrow { display: grid; gap: var(--s3); margin-top: var(--s5); }
.pop__callrow .pop__numcard { margin-top: 0; padding: var(--s4); }
.pop__cta { white-space: nowrap; }
/* The number must never wrap — "(833) 363-" over "1557" reads as broken. */
.pop__callrow .pop__num { white-space: nowrap; font-size: 1.4rem; }
.pop__callrow .pop__numicon { width: 20px; height: 20px; }
@media (min-width: 430px) {
  .pop__callrow { grid-template-columns: 1fr auto; align-items: center; }
  /* Deliberately not stretched to the card's height: a full-height pill
     with a 999px radius turns into a blob. */
  .pop__cta { align-self: center; }
}

/* Bold reassurances directly under the call action — bordered pills, each
   with its own icon rather than three identical ticks. */
.pop__assure {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2); margin-top: var(--s5);
}
.pop__assure span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 8px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,32,80,.05);
  font-size: .78rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--navy-800); white-space: nowrap;
}
/* Icon sits in its own tinted disc so the pill reads as a badge. */
.pop__assure i {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sky-100); color: var(--blue-600);
}
.pop__assure svg { flex: none; }
.pop__lead {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px dashed var(--line);
  font-size: .84rem; color: var(--ink-mid); text-align: left;
}
.pop__lead b { display: block; color: var(--navy-800); font-size: .88rem; margin-bottom: var(--s2); }
.pop__lead ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.pop__lead li { display: flex; gap: var(--s2); align-items: flex-start; }
.pop__lead li::before { content: '·'; color: var(--sky-400); font-weight: 800; }

/* Short viewports (landscape phones, small handsets): compress the
   decorative parts so the content keeps as much room as possible. */
@media (max-height: 720px) {
  .pop__top { padding-block: var(--s3) 34px; }
  .pop__avatar { width: 64px; height: 64px; margin-top: -32px; }
  .pop__avatar-in { width: 58px; height: 58px; border-width: 3px; }
  .pop__scroll { padding-top: var(--s3); }
  .pop__scroll h2 { font-size: 1.08rem; margin-top: var(--s3); }
  .pop__numcard { margin-top: var(--s4); padding: var(--s3) var(--s4); }
  .pop__num { font-size: 1.45rem; }
  .pop__numicon { width: 20px; height: 20px; }
  .pop__lead { display: none; }        /* least critical — call still works */
}

/* Number panel — same tinted language as the soft CTA elsewhere on the site,
   so the popup reads as part of the design rather than a bolt-on. */
.pop__numcard {
  display: block; position: relative; overflow: hidden;
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--sky-100), #f5fbff);
  border: 1px solid #cfe6f6;
  transition: border-color .2s var(--ease);
  /* Negative delay offsets this against the CTA's 2.8s shake so the two
     take turns instead of twitching together. */
  animation: numPulse 2.8s ease-in-out infinite;
  animation-delay: -1.5s;
}
.pop__numcard:hover { border-color: var(--sky-400); }

/* Ring pulses outward — echoes the avatar's call-ripple. */
@keyframes numPulse {
  0%, 58%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(64,176,224,0); }
  70%           { transform: scale(1.02); box-shadow: 0 0 0 7px rgba(64,176,224,.18); }
  84%           { transform: scale(1);    box-shadow: 0 0 0 13px rgba(64,176,224,0); }
}

/* Gloss sweep (the fa-flash feel), on a longer cycle so it stays a glint
   rather than a strobe. */
.pop__numcard::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.72) 48%, transparent 64%);
  transform: translateX(-125%);
  animation: numShine 4.6s ease-in-out infinite;
}
@keyframes numShine {
  0%, 64%   { transform: translateX(-125%); }
  82%, 100% { transform: translateX(125%); }
}
.pop__cue {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px;
}
.pop__numrow { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.pop__num {
  font-size: 1.72rem; font-weight: 800; color: var(--blue-600);
  letter-spacing: -.025em; line-height: 1.12;
}
/* Ringing-handset wobble, reusing the CTA's keyframes. Shares the card's
   -1.5s phase so the icon shakes as the card pulses, then the coral button
   takes its turn half a cycle later — one thing moving at a time. */
.pop__numicon {
  flex: none; color: var(--blue-600); transform-origin: center;
  animation: btnShake 2.8s ease-in-out infinite;
  animation-delay: -1.5s;
}


/* Ringing-handset wobble on the CTA icon (the fa-shake feel). Scoped to
   .btn--ring so it stays in the popup and never fires site-wide. */
.btn--ring .btn__icon {
  transform-origin: center;
  animation: btnShake 2.8s ease-in-out infinite;
}
@keyframes btnShake {
  0%, 62%, 100%          { transform: rotate(0deg); }
  66%                    { transform: rotate(-15deg); }
  70%                    { transform: rotate(13deg); }
  74%                    { transform: rotate(-10deg); }
  78%                    { transform: rotate(7deg); }
  82%                    { transform: rotate(-4deg); }
  86%                    { transform: rotate(0deg); }
}
/* Gentle attention pulse on the button's glow, offset from the shake. */
.btn--ring { animation: btnGlow 2.8s ease-in-out infinite; }
@keyframes btnGlow {
  0%, 60%, 100% { box-shadow: var(--shadow-cta); }
  72%           { box-shadow: 0 8px 26px rgba(240,80,64,.55); }
}

@media (prefers-reduced-motion: reduce) {
  .pop, .pop__panel, .drawer, .drawer__panel { transition: none; }
  /* Kill the looping decoration outright. The global reduced-motion rule
     only shortens animations, which would leave the ripple frozen mid-flight
     as a stray visible ring. */
  .pop[data-open="true"] .pop__panel,
  .pop__avatar-in, .pop__online,
  .pop__numcard, .pop__numicon,
  .btn--ring, .btn--ring .btn__icon { animation: none; }
  /* Both are pure decoration and would otherwise freeze mid-sweep as a
     stray white band / stuck ring. */
  .pop__ripple, .pop__numcard::after { display: none; }
}

/* ── Sticky mobile call bar ────────────────────────────────── */
/* Sits in the thumb zone. This is the single most important element on
   mobile: it keeps the primary CTA reachable at every scroll position. */
.callbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-callbar);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(16,32,80,.09);
}
/* Held back until the hero CTA scrolls away (see app.js) so it cannot sit
   on top of the required near-CTA disclosure. <noscript> below restores it
   unconditionally when JS never runs. */
.callbar { transform: translateY(0); transition: transform .28s var(--ease); }
.callbar[data-show="false"] { transform: translateY(110%); }

.callbar .btn { width: 100%; }
.callbar__note { text-align: center; font-size: .74rem; color: var(--ink-soft); margin-top: 5px; font-weight: 600; }

/* The bar is ~101px tall, not the 60px this once reserved — the shortfall
   left the footer's bottom row sitting underneath it. The space is added to
   the footer rather than the body so the navy runs behind the bar instead of
   leaving a white strip. --callbar-space is measured by JS (the label wraps
   on narrow phones, changing the height); the calc() is the no-JS fallback. */
.ftr { padding-bottom: var(--callbar-space, calc(var(--callbar-h) + env(safe-area-inset-bottom))); }

/* ── Persistent desktop call bar ───────────────────────────── */
/* A tel: link does almost nothing on a desktop, so this leads with the
   number itself — set to select in one click — and keeps the tel: link
   only for people who actually have a softphone. */
.deskbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-callbar);
  display: none;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(16,32,80,.10);
  transform: translateY(105%);
  transition: transform .32s var(--ease);
}
.deskbar[data-show="true"] { transform: none; }
/* Declared here, not in the reduced-motion block further up: that block
   precedes .deskbar in the file, so at equal specificity this rule would
   win and the bar would animate anyway. */
@media (prefers-reduced-motion: reduce) { .deskbar { transition: none; } }

.deskbar__in { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.deskbar__msg { display: flex; align-items: center; gap: var(--s3); font-size: .9rem; color: var(--ink-mid); }
.deskbar__msg b { color: var(--navy-800); }
.deskbar__act { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.deskbar__num { display: flex; flex-direction: column; line-height: 1.1; }
.deskbar__num small {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.deskbar__num span {
  font-size: 1.3rem; font-weight: 800; color: var(--blue-600); letter-spacing: -.02em;
  user-select: all;                 /* one click selects the whole number */
}
/* ── Breakpoints ───────────────────────────────────────────── */
@media (min-width: 600px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .hero__cta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .cta__btns { flex-direction: row; justify-content: center; }
  .cta__btns .btn { width: auto; }
}

@media (min-width: 900px) {
  .wrap { padding-inline: var(--s6); }
  .section { padding-block: var(--s11); }
/* Slim band for the soft-call CTA sitting between two full sections. */
.section--tight { padding-block: var(--s6); }

/* Centred section header block (eyebrow + heading + subhead).
   Restored: lost along with .eyebrow when an earlier block-removal in this
   file cut a wider span than intended, which left every section header on
   the site left-aligned. */
.center { text-align: center; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .ftr__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .hero { padding-block: var(--s11); }
  .hero__sub { font-size: 1.04rem; }

  /* Desktop shows full nav; the sticky call bar is mobile-only. */
  .hdr__nav { display: flex; align-items: center; gap: var(--s1); }
  .hdr__phone { display: inline-flex; }
  .burger { display: none; }
  .callbar { display: none; }
  .deskbar { display: block; }
  /* --callbar-space is measured from whichever bar is visible, so the
     footer clears the desktop bar the same way it clears the mobile one. */

  .hero__aside { display: block; }
  .hero__grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: var(--s10); align-items: center; }

  /* Desktop: the copy occupies the left half, so the scrim can fall away
     to the right and let the photograph actually read. */
  .hero::before {
    background:
      linear-gradient(100deg, rgba(10,23,48,.95) 0%, rgba(10,23,48,.88) 32%, rgba(10,23,48,.56) 62%, rgba(10,23,48,.30) 100%),
      linear-gradient(180deg, rgba(7,18,39,.18) 0%, rgba(7,18,39,.48) 100%);
  }

  .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s10); align-items: center; }
  /* Top-align where the right column is much taller than the left, so the
     text does not float in the middle of a tall card. */
  .split--top { align-items: start; }
  .prose-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s9); align-items: start; }
  .aside-sticky { position: sticky; top: 96px; }
}

@media (min-width: 1100px) {
  .hero h1 { font-size: 2.6rem; }
}


/* ── Short-viewport hero ───────────────────────────────────────
   Measured at 320x568: the compliance bar wrapped to 68px, the h1 ran to
   161px and the subhead to 154px, pushing the required near-CTA disclosure
   to y=675 in a 568px viewport — completely below the fold.

   This block MUST stay at the end of the file: media queries add no
   specificity, so an earlier copy of it was silently overridden by the
   later .hero rules. */
@media (max-width: 900px) and (max-height: 760px) {
  .compliance { padding-block: 5px; font-size: .68rem; line-height: 1.35; }
  .hero { padding-block: var(--s5); }
  .hero__in { padding-block: var(--s3); }
  .hero .eyebrow { font-size: .66rem; margin-bottom: 0; }
  .hero h1 { font-size: clamp(1.25rem, 6vw, 1.5rem); line-height: 1.14; margin-top: var(--s2) !important; }
  .hero__sub { font-size: .84rem; line-height: 1.38; margin-top: var(--s2); }
  .hero__cta { margin-top: var(--s3); }
  .hero__cta .btn--lg { padding-block: 13px; font-size: .95rem; }
  /* The disclosure is material information, so it is NOT shrunk with the
     rest of the hero -- it stays at readable body size. The headline and
     subhead absorb the space instead. */
  .hero__disclosure { margin-top: var(--s2); padding: 8px 10px; font-size: .85rem; line-height: 1.45; }
  .hero .live { margin-top: var(--s2); font-size: .82rem; }
  .hero .chips { margin-top: var(--s2); }
  .hero .chip { font-size: .72rem; padding: 5px 9px; }
}

/* Per-page hero eyebrow tint, previously an inline style.
   Scoped to .hero and placed after the theme block on purpose:
   `.t-cancel .eyebrow` (accent #a44e15) has the same specificity and would
   otherwise win on source order, leaving dark orange on a dark hero. */
.hero .eyebrow--warm { color: #f2c08a; }
.hero .eyebrow--teal { color: #7fd8cd; }
.hero .eyebrow--violet { color: #b9aef0; }
.eyebrow--sky { color: var(--sky-300); }
.live--mid { justify-content: center; }

/* ── Centred heroes: even scrim ────────────────────────────────
   A centred hero puts its text across the full width, so the desktop scrim
   must NOT fall away to the right the way the split heroes' does. Measured
   on flight-cancellation: with the falling-away scrim the headline sat at
   2.58:1 over the bright part of the sunset photo. These rules keep the
   scrim even at every width. Placed last so they win on source order over
   the media-query overrides above. */
.hero--center::before {
  background: linear-gradient(180deg, rgba(10,23,48,.90) 0%,
                                      rgba(10,23,48,.86) 45%,
                                      rgba(7,18,39,.94) 100%);
}
.t-change .hero--center::before, .t-cancel .hero--center::before,
.t-seat .hero--center::before,   .t-booking .hero--center::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 91%, transparent) 0%,
                                      color-mix(in srgb, var(--accent-deep) 87%, transparent) 45%,
                                      color-mix(in srgb, var(--accent-deep) 95%, transparent) 100%);
}