:root {
  --ink: #0a1728;
  --ink-soft: #304056;
  --navy: #071827;
  --navy-2: #0b2538;
  --cyan: #13bde5;
  --teal: #06d5b2;
  --green: #09d77a;
  --white: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f3f7fa;
  --line: #dfe8ef;
  --shadow: 0 18px 60px rgba(7, 24, 39, 0.12);
  --radius: 22px;
  --shell: 1180px;
}

html { scroll-behavior: smooth; }

/* Predictable sizing across browsers and devices. Prevents 100% width elements
   with padding/borders from overflowing the mobile viewport. */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  color: var(--ink);
  background: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.site-header {
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.brand {
  font-size: 1.45rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.brand span { color: var(--cyan); }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-left: auto;
}
.primary-nav a,
.footer-nav a {
  text-decoration: none;
  font-weight: 650;
  font-size: .95rem;
}
.primary-nav a { color: rgba(255,255,255,.86); }
.primary-nav a:hover { color: var(--white); }

.header-call {
  text-decoration: none;
  background: var(--green);
  color: #03170e;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 999px;
}

.hero {
  color: var(--white);
  background:
    radial-gradient(circle at 76% 32%, rgba(19,189,229,.17), transparent 34%),
    linear-gradient(135deg, #071827 0%, #0b2538 60%, #06121e 100%);
  overflow: hidden;
}

.hero-container {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  align-items: center;
  gap: 46px;
  padding-block: 72px;
}

.hero-copy { max-width: 650px; }
.hero-kicker,
.eyebrow {
  margin: 0 0 16px;
  color: var(--teal);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-kicker::before { content: "— "; }

.hero-title {
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.06em;
  max-width: 760px;
}
.hero-title span { color: var(--cyan); font-style: italic; }

.hero-subtitle {
  max-width: 680px;
  margin: 28px 0 30px;
  color: rgba(255,255,255,.84);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}

.call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-height: 58px;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--green);
  color: #042013;
  text-decoration: none;
  font-size: clamp(1rem, 1.6vw, 1.24rem);
  font-weight: 760;
  box-shadow: 0 12px 35px rgba(9,215,122,.24);
}
.call-button:hover { transform: translateY(-1px); }
.call-button-label { opacity: .78; }

.trust-row {
  display: flex;
  gap: 0;
  margin-top: 30px;
}
.trust-item {
  min-width: 142px;
  display: grid;
  gap: 1px;
  padding: 0 24px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.trust-item:first-child { padding-left: 0; border-left: 0; }
.trust-item strong { font-size: .98rem; }
.trust-item span { color: rgba(255,255,255,.68); font-size: .88rem; }

.visual-placeholder {
  min-height: 480px;
  border: 1px dashed rgba(255,255,255,.30);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(19,189,229,.10), rgba(9,215,122,.04)),
    rgba(255,255,255,.035);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px;
  color: rgba(255,255,255,.86);
}
.visual-placeholder span { font-weight: 850; font-size: 1.2rem; }
.visual-placeholder small { max-width: 360px; margin-top: 8px; color: rgba(255,255,255,.58); }

.section-space { padding-block: 84px; }
.section-soft { background: var(--surface-soft); }
.section-heading { margin-bottom: 32px; }
.section-heading h2,
.cta-card h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.section-heading-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.section-intro { margin: 0; color: var(--ink-soft); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.service-card,
.reason-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.service-card {
  min-height: 280px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 35px rgba(7,24,39,.055);
}
.card-index {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--cyan);
  font-weight: 850;
  margin-bottom: auto;
}
.service-card h3 { margin: 34px 0 8px; font-size: 1.35rem; }
.service-card p { margin: 0 0 22px; color: var(--ink-soft); }
.service-card a { margin-top: auto; font-weight: 800; text-decoration: none; color: #087da0; }

.airline-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.airline-list .airline-card {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-weight: 750;
}

.split-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items: stretch;
}
.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.reason-card { padding: 24px; }
.reason-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.reason-card p { margin: 0; color: var(--ink-soft); }
.story-visual {
  min-height: 420px;
  color: var(--ink-soft);
  border-color: #b9c7d2;
  background: linear-gradient(145deg, #e9f3f8, #f7fbfd);
}
.story-visual small { color: #66788a; }

.story-strip {
  color: var(--white);
  background: var(--navy);
}
.story-strip-inner {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 44px;
}
.story-strip p { margin: 0; font-size: clamp(1.3rem, 3vw, 2.1rem); color: rgba(255,255,255,.72); }
.story-strip strong { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.05em; color: var(--cyan); }

.cta-card {
  padding: 48px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #edf8fc, #f4fffb);
  border: 1px solid #d7edf5;
}
.cta-card p:not(.eyebrow) { color: var(--ink-soft); margin-bottom: 0; }
.cta-actions { text-align: center; }
.mini-trust { margin-top: 12px; color: var(--ink-soft); font-size: .82rem; }

.faq-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 60px;
  align-items: start;
}
.faq-list { display: grid; gap: 12px; }
.faq-list details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
}
.faq-list summary { cursor: pointer; font-weight: 800; }
.faq-list p { margin-bottom: 0; color: var(--ink-soft); }

.site-footer {
  padding: 48px 0 34px;
  color: rgba(255,255,255,.76);
  background: #06131f;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.brand-footer { color: var(--white); }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom { padding-top: 24px; font-size: .82rem; }
.footer-bottom p { margin: 0 0 10px; max-width: 920px; }

.mobile-call-bar { display: none; }

@media (max-width: 980px) {
  .primary-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .hero-container,
  .split-layout,
  .faq-layout,
  .section-heading-inline {
    grid-template-columns: 1fr;
  }
  .hero-container { min-height: auto; padding-block: 58px; }
  .hero-visual { min-height: 360px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .service-card:last-child { grid-column: 1 / -1; }
  .airline-list { grid-template-columns: repeat(2, 1fr); }
  .cta-card { grid-template-columns: 1fr; }
  .cta-actions { text-align: left; }
}

@media (max-width: 640px) {
  .site-shell { width: min(calc(100% - 28px), var(--shell)); }
  .site-header { position: relative; }
  .header-inner { min-height: 66px; }
  .header-call { display: none; }
  .brand { font-size: 1.25rem; }
  .hero-container { padding-block: 44px; gap: 30px; }
  .hero-title { font-size: clamp(3.1rem, 16vw, 4.4rem); }
  .hero-subtitle { margin-top: 22px; }
  .hero-call-button { width: 100%; }
  .trust-row { display: grid; grid-template-columns: repeat(3, 1fr); }
  .trust-item { min-width: 0; padding: 0 10px; text-align: center; }
  .trust-item:first-child { padding-left: 0; }
  .visual-placeholder { min-height: 300px; padding: 24px; }
  .section-space { padding-block: 60px; }
  .service-grid,
  .reason-grid { grid-template-columns: 1fr; }
  .service-card:last-child { grid-column: auto; }
  .airline-list { grid-template-columns: 1fr 1fr; }
  .cta-card { padding: 30px 22px; }
  .call-button { width: 100%; }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-nav { flex-direction: column; gap: 10px; }
  body { padding-bottom: 62px; }
  .mobile-call-bar {
    display: flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 50;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--green);
    color: #042013;
    text-decoration: none;
    font-weight: 850;
    box-shadow: var(--shadow);
  }
}

.legal-page { padding-block: 70px; }
.legal-content { max-width: 820px; }
.legal-content h1 { margin: 0 0 10px; font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -.05em; }
.legal-content h2 { margin: 34px 0 10px; font-size: 1.35rem; }
.legal-content p { color: var(--ink-soft); }
.legal-content a { color: #087da0; }


.independent-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255,255,255,.72);
}

/* V5 content refinements — do not alter the tested responsive grids. */
.airline-disclaimer {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.5;
}
.cta-disclaimer {
  max-width: 360px;
  margin: 13px auto 0;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.5;
}
.story-strip strong { max-width: 990px; line-height: 1.12; }
@media (max-width: 980px) {
  .cta-disclaimer { margin-inline: 0; }
}
@media (max-width: 640px) {
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .mobile-call-bar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .trust-item strong { overflow-wrap: anywhere; }
}

/* AirTripAssist v10 — show the ENTIRE original hero photograph, every pixel.
   The image keeps its natural 1672:941 aspect ratio and sets the background height.
   Content is an editable overlay, not text painted into the photograph.
   On medium screens, any extra height becomes dark letterboxing (NEVER crop).
   Below 701px, the full photo flows below the text. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: #071827;
}
.hero-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto);
  align-items: center;
  gap: 0;
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.hero-visual {
  grid-column: 1;
  grid-row: 1;
  display: block;
  position: relative;
  inset: auto;
  z-index: 0;
  align-self: end;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  pointer-events: none;
}
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5, 20, 33, .84) 0%,
    rgba(5, 20, 33, .62) 30%,
    rgba(5, 20, 33, .22) 53%,
    rgba(5, 20, 33, 0) 78%);
}
.hero-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: min(calc(100% - 40px), var(--shell));
  max-width: none;
  min-width: 0;
  margin-inline: auto;
  padding-block: 42px;
}
.hero-copy > .hero-kicker,
.hero-copy > .hero-title,
.hero-copy > .hero-subtitle,
.hero-copy > .independent-note {
  max-width: min(575px, 50%);
}
.hero-copy > .trust-row { max-width: 575px; }
.hero-title { font-size: clamp(3rem, 5.3vw, 5.2rem); }
.hero-subtitle { max-width: 535px; }

/* A narrow laptop / tablet doesn't have enough natural photo height for all text.
   The full photo stays bottom-aligned; remaining area is solid navy, not cropped. */
@media (min-width: 701px) and (max-width: 980px) {
  .hero-copy { padding-block: 32px; }
  .hero-copy > .hero-kicker,
  .hero-copy > .hero-title,
  .hero-copy > .hero-subtitle,
  .hero-copy > .independent-note { max-width: 53%; }
  .hero-copy > .trust-row { max-width: 55%; }
  .hero-title { font-size: clamp(2.5rem, 5.6vw, 3.5rem); letter-spacing: -.065em; }
  .hero-kicker { font-size: .7rem; letter-spacing: .08em; margin-bottom: 12px; }
  .hero-subtitle { font-size: .96rem; line-height: 1.4; margin: 17px 0 18px; }
  .independent-note { font-size: .71rem; line-height: 1.35; }
  .hero-call-button { font-size: .98rem; min-height: 52px; padding: 12px 17px; }
  .trust-row { margin-top: 21px; }
  .trust-item { min-width: 0; padding: 0 10px; }
  .trust-item:first-child { padding-left: 0; }
  .trust-item strong { font-size: .77rem; }
  .trust-item span { font-size: .7rem; line-height: 1.3; }
  .hero-visual::after { background: linear-gradient(90deg,
      rgba(5,20,33,.93) 0%,rgba(5,20,33,.78) 28%,rgba(5,20,33,.31) 56%,transparent 85%); }
}
/* Phones: title, content and the WHOLE original photograph are stacked.
   The image itself determines its height, so no face or phone can be cut off. */
@media (max-width: 700px) {
  .hero-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    width: 100%;
    padding: 40px 0 0;
    gap: 0;
  }
  .hero-copy {
    order: 0;
    width: min(calc(100% - 28px), var(--shell));
    max-width: none;
    margin-inline: auto;
    padding: 0 0 34px;
  }
  .hero-copy > .hero-kicker,
  .hero-copy > .hero-title,
  .hero-copy > .hero-subtitle,
  .hero-copy > .independent-note,
  .hero-copy > .trust-row { max-width: none; }
  .hero-title { font-size: clamp(3.05rem, 12.6vw, 4.6rem); }
  .hero-subtitle { margin-top: 22px; }
  .hero-visual {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: none;
  }
  .hero-photo { display: block; width: 100%; height: auto; object-fit: contain; }
  .hero-visual::after { background: linear-gradient(180deg, #071827 0%, rgba(7,24,39,0) 20%); }
  .hero-call-button { width: 100%; }
  .trust-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .trust-item { min-width: 0; padding: 0 7px; text-align: center; }
  .trust-item:first-child { padding-left: 0; }
  .trust-item strong { font-size: .8rem; overflow-wrap: normal; word-break: normal; }
  .trust-item span { font-size: .75rem; }
}

/* ===== AirTripAssist v9: menu and service cards (hero photo remains unchanged) ===== */

/* The independent-service disclosure must not visually merge with the call CTA. */
.hero-copy .independent-note {
  margin: 15px 0 17px;
}

/* Native, keyboard-accessible compact menu for tablet / mobile navigation. */
.mobile-menu { display: none; }
.mobile-menu summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  min-height: 43px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 750;
  color: var(--white);
  background: rgba(255,255,255,.035);
  user-select: none;
  list-style: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::marker { content: ""; }
.mobile-menu summary:hover, .mobile-menu[open] summary {
  background: rgba(255,255,255,.12);
}
.menu-bars { display: grid; width: 17px; gap: 4px; }
.menu-bars span {
  display: block;
  height: 2px;
  width: 17px;
  border-radius: 999px;
  background: var(--white);
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-menu[open] .menu-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] .menu-bars span:nth-child(2) { opacity: 0; }
.mobile-menu[open] .menu-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  width: min(306px, calc(100vw - 28px));
  padding: 9px;
  display: grid;
  gap: 4px;
  background: #0a2536;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
}
.mobile-menu-panel a {
  display: block;
  color: var(--white);
  text-decoration: none;
  font-weight: 650;
  padding: 13px 14px;
  border-radius: 10px;
}
.mobile-menu-panel a:hover, .mobile-menu-panel a:focus-visible {
  background: rgba(19,189,229,.16);
}

/* Clean iconography with SVG paths. Still normal HTML content in Pinegrow. */
.service-card { min-height: 265px; padding: 25px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.service-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.service-card .card-index { margin: 0; height: 39px; width: 39px; font-size: .82rem; }
.service-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #087da0;
  background: #ecf8ff;
  border: 1px solid #d7eef8;
  border-radius: 17px;
}
.service-icon svg { display: block; width: 27px; height: 27px; }
.service-card h3 { margin: 24px 0 8px; font-size: 1.32rem; line-height: 1.18; }
.service-card p { margin: 0 0 22px; line-height: 1.55; }
.service-card a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 6px 0;
  color: #087da0;
}
.service-card a::after { content: "→"; font-size: 1.22em; transition: transform .18s ease; }
.service-card a:hover::after { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { transform: translateY(-3px); border-color: #b5ddec; box-shadow: 0 16px 36px rgba(7,24,39,.10); }
}
:focus-visible { outline: 3px solid #13bde5; outline-offset: 3px; }
html { scroll-padding-top: 90px; }

@media (max-width: 980px) {
  .header-inner { position: relative; gap: 14px; }
  .mobile-menu { display: block; position: relative; margin-left: auto; }
  .header-call { margin-left: 0; }
  .service-card { min-height: 252px; }
}
@media (max-width: 640px) {
  .header-inner { gap: 10px; }
  .mobile-menu summary { padding: 9px 11px; }
  .hero-copy .independent-note { margin-bottom: 18px; }
  .service-card { min-height: 252px; }
  body { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .mobile-call-bar { max-width: 470px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card a::after, .menu-bars span { transition: none; }
  html { scroll-behavior: auto; }
}


/* ===== v11: automatic desktop-only TOP crop =====
   The original image file is not modified. At >=1200px, cap the visual
   height and anchor the image to the BOTTOM so the crop removes sky / the
   upper window first. Head, hands and phone stay in the visible area.
   At 701..1199px v10 displays the entire photo. At <=700px the entire
   photo stays beneath the copy. */
@media (min-width: 1200px) and (max-width: 2099px) {
  .hero-visual {
    height: clamp(600px, 48vw, 940px);
    overflow: hidden;
  }
  .hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
}
/* Ultra-wide displays: preserve all key human details by reducing the
   PHOTO'S scale, keeping it right-aligned against the same navy background.
   This avoids severing the subject on very wide monitors. */
@media (min-width: 2100px) {
  .hero-visual {
    height: 940px;
    overflow: hidden;
    background: #071827;
  }
  .hero-photo {
    width: auto;
    height: 100%;
    max-width: none;
    margin-left: auto;
    object-fit: contain;
    object-position: right center;
  }
}


/* ===== AirTripAssist v12: Why Travelers Call only =====
   Original Hero photography, cropping, navigation and service card rules are unchanged.
   Right panel has editable HTML copy and can be photo-backed later. */
.why .split-layout { align-items: stretch; gap: clamp(24px, 3vw, 42px); }
.why-copy h2 { max-width: 620px; margin: 0 0 26px; font-size: clamp(1.75rem, 2.55vw, 2.7rem); line-height: 1.13; letter-spacing: -.035em; }
.why .reason-grid { gap: 15px; }
.why .reason-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 212px;
  padding: 24px;
  background: #fff;
  border: 1px solid #dce8f0;
  border-radius: 19px;
  box-shadow: 0 8px 24px rgba(7,24,39,.035);
}
.why .reason-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  color: #0782a5;
  border: 1px solid #d5eaf4;
  border-radius: 14px;
  background: #ebf8fd;
}
.why .reason-icon svg { display: block; width: 25px; height: 25px; }
.why .reason-card h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.25; }
.why .reason-card p { margin: 0; font-size: .93rem; line-height: 1.55; }
.why .story-visual {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  min-height: 470px;
  padding: clamp(28px, 4vw, 50px);
  overflow: hidden;
  text-align: left;
  color: #fff;
  background: radial-gradient(circle at 100% 0%, rgba(19,189,229,.27), transparent 48%),
              linear-gradient(150deg, #0d3850, #061c2e 78%);
  border: 1px solid rgba(6,38,57,.06);
  border-radius: 24px;
}
.why .story-visual::before {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  right: -175px;
  bottom: -210px;
  border: 1px solid rgba(130,231,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(19,189,229,.055), 0 0 0 84px rgba(19,189,229,.03);
  pointer-events: none;
  z-index: -1;
}
.why .story-visual-content { position: relative; z-index: 1; }
.why .story-eyebrow { color: #2de2c2; font-size: .78rem; text-transform: uppercase; font-weight: 850; letter-spacing: .13em; margin: 0 0 20px; }
.why .story-visual h3 { font-size: clamp(1.8rem, 2.4vw, 2.6rem); line-height: 1.13; letter-spacing: -.04em; margin: 0 0 18px; max-width: 460px; }
.why .story-description { color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.58; max-width: 420px; margin: 0 0 27px; }
.why .prep-items { display: flex; flex-wrap: wrap; gap: 8px; }
.why .prep-items span { display: inline-block; background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.19); border-radius: 999px; padding: 9px 13px; font-size: .83rem; font-weight: 700; }
.why .story-disclaimer { margin: 27px 0 0; font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.67); max-width: 440px; }
@media (max-width: 980px) {
  .why .story-visual { min-height: 345px; }
  .why .reason-card { min-height: 188px; }
}
@media (max-width: 640px) {
  .why-copy h2 { margin-bottom: 23px; }
  .why .reason-grid { gap: 12px; }
  .why .reason-card { min-height: 0; padding: 22px; }
  .why .reason-icon { margin-bottom: 16px; }
  .why .story-visual { padding: 28px 24px; min-height: 360px; border-radius: 20px; }
  .why .story-visual h3 { font-size: 1.9rem; }
  .why .story-description { font-size: .95rem; }
}


/* v13: Ultra-wide photo continuation. The sharp photo retains its original
   aspect ratio, size and bottom-right placement; the left blank band gets a
   softly extended version of the SAME scene. A mask on the sharp photo means
   no straight vertical join. No source image pixels are modified. */
@media (min-width: 2100px) {
  .hero-visual { isolation: isolate; }
  .hero-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -32px;
    background: url("../images/hero-airport.webp") center bottom / 100% 100% no-repeat;
    filter: blur(22px) brightness(.68) saturate(.86);
    pointer-events: none;
  }
  .hero-visual .hero-photo {
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 7%, #000 22%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 7%, #000 22%);
  }
  .hero-visual::after {
    z-index: 2;
    background: linear-gradient(90deg, rgba(5,20,33,.82) 0%, rgba(5,20,33,.65) 19%, rgba(5,20,33,.25) 47%, rgba(5,20,33,0) 70%);
  }
}


/* ===== v14: Final section refinements; Hero, menu and service blocks unchanged ===== */
.cta-section { position: relative; }
.cta-card {
  position: relative;
  overflow: hidden;
  gap: clamp(22px, 3.4vw, 48px);
  padding: clamp(30px, 4vw, 54px);
  background: linear-gradient(125deg, #e9f8fe 0%, #f2fcfa 66%, #f8fffb 100%);
  box-shadow: 0 18px 50px rgba(7, 24, 39, .045);
}
.cta-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -200px;
  right: -95px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(12,166,188,.13);
  box-shadow: 0 0 0 48px rgba(12,166,188,.03), 0 0 0 95px rgba(12,166,188,.025);
}
.cta-card > * { position: relative; z-index: 1; min-width: 0; }
.cta-copy h2 { max-width: 570px; }
.cta-copy > p:not(.eyebrow) { max-width: 540px; line-height: 1.62; }
.cta-copy .cta-prep-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  font-size: .9rem;
  font-weight: 700;
  color: #184a55;
}
.cta-hours-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #008477;
}
.cta-hours-separator { margin-inline: .3em; color: #008477; }
.cta-actions { width: min(100%, 365px); justify-self: end; }
.cta-actions .cta-call-button {
  width: 100%;
  min-height: 62px;
  gap: 9px;
  padding-inline: 18px;
  white-space: normal;
}
.cta-call-button svg { flex: 0 0 auto; }
.cta-disclaimer { max-width: 350px; margin: 14px auto 0; font-size: .8rem; line-height: 1.55; }

.faq-layout { gap: clamp(30px, 5vw, 70px); }
.faq-intro { position: sticky; top: 112px; }
.faq-intro p:not(.eyebrow) { max-width: 280px; margin: 18px 0 0; color: var(--ink-soft); line-height: 1.65; }
.faq-list { gap: 10px; }
.faq-list details { padding: 0; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-list details[open] { border-color: #bcdbe8; box-shadow: 0 10px 28px rgba(7, 24, 39, .065); }
.faq-list summary {
  position: relative;
  display: block;
  padding: 19px 64px 19px 23px;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  line-height: 1.4;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  display: grid;
  place-items: center;
  top: 50%;
  right: 18px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #eef8fd;
  color: #087da0;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1;
}
.faq-list details[open] summary::after { content: "−"; background: #e1f6f4; }
.faq-list details[open] summary { color: #063c53; }
.faq-list details p {
  margin: 0;
  padding: 0 23px 23px;
  line-height: 1.7;
  max-width: 680px;
}

.site-footer { padding-top: 50px; }
.footer-identity { display: flex; flex-direction: column; gap: 5px; }
.footer-identity p { margin: 0; color: rgba(255,255,255,.57); font-size: .84rem; }
.footer-nav a { color: rgba(255,255,255,.78); }
.footer-nav a:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom p:first-child { line-height: 1.7; color: rgba(255,255,255,.68); }
.footer-bottom p:last-child { color: rgba(255,255,255,.53); }

@media (max-width: 980px) {
  .cta-actions { justify-self: start; }
  .faq-intro { position: static; }
  .faq-intro p:not(.eyebrow) { max-width: 580px; }
}
@media (max-width: 640px) {
  .cta-card { padding: 30px 22px; }
  .cta-actions { width: 100%; }
  .cta-actions .cta-call-button { min-height: 58px; white-space: nowrap; font-size: .98rem; gap: 7px; padding-inline: 12px; }
  .cta-actions .cta-call-button .call-button-label { display: none; }
  .cta-call-button svg { width: 19px; height: 19px; }
  .cta-copy h2 { font-size: clamp(1.95rem, 9vw, 2.5rem); }
  .faq-list summary { padding: 17px 58px 17px 18px; font-size: .96rem; }
  .faq-list summary::after { right: 14px; }
  .faq-list details p { padding: 0 18px 21px; font-size: .94rem; }
  .footer-top { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list details { transition: none; }
}

/* v15 — keyboard focus and section anchors beneath the sticky navigation. */
@media (min-width: 641px) {
  html { scroll-padding-top: 96px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 16px; }
}
a:focus-visible, summary:focus-visible {
  outline: 3px solid #13bde5;
  outline-offset: 4px;
}

/* v16 — calm cyan arrival highlight for a service card.
   Triggered every time a corresponding navigation link is clicked. */
@keyframes service-card-arrival {
  0% {
    background-color: #ffffff;
    border-color: var(--line);
    box-shadow: 0 10px 35px rgba(7,24,39,.055), 0 0 0 0 rgba(19,189,229,0);
  }
  34% {
    background-color: #effbff;
    border-color: #19bddd;
    box-shadow: 0 15px 38px rgba(7,24,39,.10), 0 0 0 8px rgba(19,189,229,.16);
  }
  65% {
    background-color: #f5fdff;
    border-color: #68d7ec;
    box-shadow: 0 14px 35px rgba(7,24,39,.085), 0 0 0 4px rgba(19,189,229,.08);
  }
  100% {
    background-color: #ffffff;
    border-color: var(--line);
    box-shadow: 0 10px 35px rgba(7,24,39,.055), 0 0 0 0 rgba(19,189,229,0);
  }
}
.service-card.service-card-flash {
  animation: service-card-arrival 1.35s ease-in-out 1;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .service-card.service-card-flash {
    animation: none;
    background: #effbff;
    border-color: #19bddd;
    box-shadow: 0 0 0 3px rgba(19,189,229,.18);
  }
}

/* v17 — Airline identification marks. SVGs are stored locally and do not
   link to airline websites or imply airline affiliation. */
.airline-list .airline-card {
  min-height: 124px;
  gap: 10px;
  align-content: center;
  justify-items: center;
  padding: 17px 14px 15px;
}
.airline-logo {
  width: 54px;
  height: 54px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
.airline-name {
  display: block;
  font-size: .93rem;
  line-height: 1.3;
  font-weight: 750;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .airline-list { gap: 10px; }
  .airline-list .airline-card { min-height: 116px; gap: 9px; padding: 13px 8px; }
  .airline-logo { width: 45px; height: 45px; }
  .airline-name { font-size: .85rem; }
}


/* ===== v18 • travel photo editorial panels =====
   Only the Why Travelers Call visual and the journey strip are restyled.
   Headlines are HTML text, not embedded into the photographs. */
.why .story-photo-panel {
  display: block;
  min-height: 505px;
  padding: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #092334;
  border: 0;
  border-radius: 23px;
  box-shadow: 0 20px 48px rgba(7, 24, 39, .17);
}
.why .story-photo-panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  right: 0;
  bottom: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(90deg, rgba(3, 15, 26, .02) 0%, rgba(3, 15, 26, .1) 32%, rgba(3, 15, 26, .52) 100%),
              linear-gradient(0deg, rgba(3, 15, 26, .90) 0%, rgba(3, 15, 26, 0) 65%);
  pointer-events: none;
}
.why .story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 42% center;
}
.why .story-photo-overlay {
  position: absolute;
  z-index: 2;
  inset: auto 26px 34px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  pointer-events: none;
}
.why .story-photo-label {
  align-self: flex-end;
  margin: 0 0 9px;
  color: #3ce8ce;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .17em;
  font-weight: 800;
}
.why .story-photo-quote {
  margin: 0;
  color: white;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.19;
  letter-spacing: -.035em;
  transform: rotate(-2deg);
  text-shadow: 0 3px 21px rgba(0,0,0,.55);
}
.why .story-photo-quote span { color: white; }
.why .story-swish {
  width: 116px;
  height: 10px;
  margin-top: 14px;
  margin-right: 7px;
  border-top: 3px solid #13bde5;
  border-radius: 100%;
  transform: rotate(-6deg);
  box-shadow: 0 -1px 13px rgba(19,189,229,.24);
}

.story-flight-strip {
  min-height: 306px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background: #071827;
}
.story-flight-strip::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,18,32,.97) 0%, rgba(3,18,32,.91) 26%, rgba(3,18,32,.55) 54%, rgba(3,18,32,.04) 100%),
              linear-gradient(0deg, rgba(3,18,32,.3), transparent 60%);
  pointer-events: none;
}
.story-flight-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 67% 48%;
}
.story-flight-strip .story-strip-inner {
  position: relative;
  z-index: 2;
  min-height: 306px;
  align-items: flex-start;
  text-align: left;
  padding-block: 49px 48px;
}
.story-flight-strip .story-flight-eyebrow {
  color: #43e8d1;
  font-size: .76rem;
  line-height: 1.4;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 19px;
}
.story-flight-strip .story-strip-inner strong {
  font-size: clamp(2.65rem, 4.5vw, 4.8rem);
  letter-spacing: -.055em;
  line-height: 1.06;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 4px 24px rgba(3,18,32,.4);
}
.story-flight-strip .story-strip-inner em {
  font-style: italic;
  color: #27c7e9;
  white-space: nowrap;
}
.story-flight-rule {
  margin-top: 21px;
  width: 84px;
  height: 3px;
  border-radius: 100px;
  background: linear-gradient(90deg, #18cce5, #2fe5bd);
}
.story-flight-strip .story-flight-sub {
  max-width: 510px;
  margin: 16px 0 0;
  font-size: clamp(.95rem, 1.3vw, 1.08rem);
  line-height: 1.6;
  color: rgba(255,255,255,.87);
}
@media (max-width: 980px) {
  .why .story-photo-panel { min-height: 430px; }
  .why .story-photo-quote { font-size: clamp(1.9rem, 4.6vw, 2.65rem); }
}
@media (max-width: 640px) {
  .why .story-photo-panel { min-height: 365px; padding: 0; border-radius: 20px; }
  .why .story-photo { object-position: 42% center; }
  .why .story-photo-overlay { right: 20px; left: 20px; bottom: 28px; }
  .why .story-photo-label { font-size: .64rem; }
  .why .story-photo-quote { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .story-flight-strip,
  .story-flight-strip .story-strip-inner { min-height: 350px; }
  .story-flight-strip::before { background: linear-gradient(90deg, rgba(3,18,32,.94), rgba(3,18,32,.68) 68%, rgba(3,18,32,.34)); }
  .story-flight-photo { object-position: 63% center; }
  .story-flight-strip .story-strip-inner { padding-block: 51px 50px; }
  .story-flight-strip .story-strip-inner strong { font-size: clamp(2.65rem, 10vw, 3.6rem); }
  .story-flight-strip .story-flight-sub { max-width: 325px; }
}


/* ===== AirTripAssist v20: balanced narrow / medium layout =====
   Up to 1100px, the airport photo is replaced by a compact editorial quote.
   Above 1100px, the original v18 photo sits beside the benefit cards.
   The following sunset-wing strip always stays photographic.
   Both photographs are unchanged. Text remains editable HTML. */
.why .story-mobile-quote { display: none; }

@media (max-width: 1100px) {
  .why .story-photo-panel {
    min-height: 0;
    height: auto;
    padding: 28px 20px 30px;
    border-radius: 22px;
    border: 1px solid #dcecf4;
    background:
      radial-gradient(ellipse at 5% 105%, rgba(255,255,255,.95) 0 18%, transparent 54%),
      radial-gradient(ellipse at 98% 5%, rgba(255,255,255,.85) 0 16%, transparent 54%),
      linear-gradient(137deg, #eaf7fd 0%, #f7fcff 54%, #e4f3fb 100%);
    box-shadow: 0 11px 30px rgba(7,24,39,.065);
    color: #0a1728;
  }
  .why .story-photo-panel::before {
    display: none;
  }
  .why .story-photo {
    display: none;
  }
  .why .story-photo-overlay {
    position: relative;
    z-index: 1;
    inset: auto;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
  }
  .why .story-photo-label {
    align-self: center;
    color: #008e90;
    margin: 0 0 10px;
    font-size: .70rem;
    letter-spacing: .14em;
  }
  .why .story-photo-quote { display: none; }
  .why .story-mobile-quote {
    display: block;
    margin: 0;
    color: #0a1728;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-weight: 700;
    font-size: clamp(1.42rem, 6.2vw, 2rem);
    line-height: 1.23;
    letter-spacing: -.025em;
    text-wrap: balance;
    transform: rotate(-1.2deg);
  }
  .why .story-mobile-quote span { color: #0a1728; }
  .why .story-swish {
    margin: 15px 0 0;
    width: 98px;
    height: 9px;
    border-color: #13bde5;
    box-shadow: none;
  }
  /* A slim white interval separates the quotation and the main photo banner. */
  .why.section-space { padding-bottom: 24px; }
  .story-flight-strip { margin-top: 0; }
}


/* v20: at 981–1100px, stack the Why-benefits and the quote; otherwise
   the desktop two-column grid would squeeze the now text-only quote. */
@media (min-width: 981px) and (max-width: 1100px) {
  .why .split-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Tablet quote stays compact instead of using the 430px photo height. */
@media (min-width: 641px) and (max-width: 1100px) {
  .why .story-photo-panel { padding: 31px 28px 35px; }
  .why .story-photo-overlay { max-width: 730px; margin-inline: auto; }
  .why .story-mobile-quote { font-size: clamp(1.7rem, 3.7vw, 2.05rem); }
}

/* ===== AirTripAssist v22: balanced desktop Hero service highlights =====
   Only affects the three benefit labels below the Hero phone button.
   At >=981px they have more horizontal space and aligned headings.
   Tablet/mobile remain as approved in v21. */
@media (min-width: 981px) {
  .hero-copy > .trust-row {
    width: min(100%, 730px);
    max-width: 730px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .hero .trust-item {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 5px;
    padding-inline: 20px;
  }
  .hero .trust-item:first-child { padding-left: 0; }
  .hero .trust-item strong {
    display: block;
    line-height: 1.25;
    white-space: nowrap;
  }
  .hero .trust-item span {
    display: block;
    line-height: 1.42;
  }
}
@media (min-width: 981px) and (max-width: 1199px) {
  .hero-copy > .trust-row { width: min(100%, 705px); max-width: 705px; }
  .hero .trust-item { padding-inline: 17px; }
  .hero .trust-item strong { font-size: .91rem; }
  .hero .trust-item span { font-size: .82rem; }
}


/* ===== v23: clarity, availability and accessibility polish =====
   AirTripAssist v22 remains the visual baseline. External service rules are
   not changed. Offer 5464 lists call hours as 24/7 (verification pending). */

/* Accessible contrast on the white and pale panels; bright teal in the dark
   Hero and photo banners is intentionally unchanged. */
.eyebrow { color: #008477; }

/* A calm, explicit clock marker. Do not state guaranteed live-agent staffing. */
.hero-call-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: min(575px, 100%);
  margin-top: 16px;
  color: rgba(255,255,255,.92);
  line-height: 1.3;
}
.hero-hours-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  color: #3bdded;
}
.hero-call-hours > span { display: flex; gap: 3px 9px; flex-wrap: wrap; align-items: baseline; }
.hero-call-hours strong { font-size: .90rem; font-weight: 800; white-space: nowrap; }
.hero-hours-detail { color: rgba(255,255,255,.74); font-size: .80rem; }
.hero-copy > .trust-row { margin-top: 20px; }

/* The persistent mobile call button waits until the main Hero call button
   has moved out of view above the screen. Suppress it again while the
   lower-page CTA is visible; avoid simultaneous duplicate green buttons. */
@media (max-width: 640px) {
  body.smart-sticky-active .mobile-call-bar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  body.smart-sticky-active .mobile-call-bar.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .hero-call-hours { margin-top: 15px; max-width: 100%; }
  .hero-call-hours > span { gap: 1px 7px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .hero-call-hours { max-width: 53%; }
  .hero-call-hours > span { flex-direction: column; align-items: flex-start; gap: 0; }
  .hero-call-hours strong { font-size: .78rem; }
  .hero-hours-detail { font-size: .70rem; }
  .hero-hours-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .hero-copy > .trust-row { margin-top: 14px; }
}
@media (max-width: 359px) {
  /* Clear, readable highlights on extra-narrow screens. */
  .hero-copy > .trust-row { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 15px; }
  .hero-copy .trust-item:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  body.smart-sticky-active .mobile-call-bar { transition: none; }
}

/* ===== v25: a single centered CTA + availability cluster =====
   The 24/7 message sits immediately beside its own phone button on all
   breakpoints; no changes to the service highlights, image or navigation. */
.hero-call-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  vertical-align: top;
}
.hero-call-group .hero-call-button { max-width: 100%; }
.hero-call-group .hero-call-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin-top: 9px;
  text-align: center;
  line-height: 1.3;
}
.hero-call-group .hero-call-hours > span {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 8px;
}
.hero-call-group .hero-hours-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}
.hero-call-group .hero-call-hours strong { font-size: .87rem; }
.hero-call-group .hero-hours-detail { font-size: .76rem; }

/* Keep the two rows visually attached; the lower CTA's note follows
   the layout position of the phone button, not the text column. */
.cta-actions .cta-call-hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 9px;
  width: 100%;
  margin: 0 0 12px;
  color: #174452;
  text-align: center;
  font-size: .88rem;
  line-height: 1.4;
}
.cta-actions .cta-call-hours strong { white-space: nowrap; font-weight: 800; }
.cta-actions .cta-call-hours-detail { color: #37576a; font-size: .79rem; }
.cta-actions .cta-hours-icon { width: 21px; height: 21px; flex: 0 0 21px; }

@media (max-width: 700px) {
  .hero-call-group { display: flex; width: 100%; }
  .hero-call-group .hero-call-button { width: 100%; }
  .hero-call-group .hero-call-hours { margin-top: 10px; }
}
@media (min-width: 701px) and (max-width: 980px) {
  .hero-call-group .hero-call-hours { max-width: 100%; margin-top: 8px; }
  .hero-call-group .hero-call-hours > span {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .hero-call-group .hero-call-hours strong { font-size: .8rem; }
  .hero-call-group .hero-hours-detail { font-size: .71rem; }
}
@media (max-width: 359px) {
  .hero-call-group .hero-call-hours { gap: 5px; }
  .hero-call-group .hero-hours-detail { font-size: .72rem; }
  .cta-actions .cta-call-hours-detail { font-size: .75rem; }
}


/* ===== v26: keep the clock icon attached to the 24/7 text =====
   In v25 the flex-grow text wrapper expanded to fill the entire CTA width,
   separating the left icon from the centered label on phones. The clock and
   text now occupy one intrinsic-size centered row like the lower CTA. */
.hero-call-group .hero-call-hours {
  justify-content: center;
  align-content: center;
  gap: 7px;
}
.hero-call-group .hero-call-hours > span {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  justify-content: flex-start;
  align-items: baseline;
  column-gap: 7px;
}
/* Keep both label and explanatory text together whenever they fit. */
@media (min-width: 701px) and (max-width: 980px) {
  .hero-call-group .hero-call-hours > span {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
  }
}

/* ===== SEO Step 4: practical last-minute flight change guide =====
   A single information block below the three existing service cards.
   Does not change the approved hero, navigation, CTAs, or other sections. */
.flight-change-guide {
  margin-top: 38px;
  padding: clamp(24px, 3.2vw, 38px);
  border: 1px solid #d8e8ef;
  border-radius: var(--radius);
  background: #f4f9fb;
}
.flight-change-guide .eyebrow { margin-bottom: 11px; }
.flight-change-guide h2 {
  margin: 0 0 11px;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.flight-change-lead { margin: 0; color: var(--ink-soft); }
.flight-change-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 26px 0;
  padding-left: 21px;
  list-style: decimal;
}
.flight-change-steps li { padding-left: 3px; color: var(--ink-soft); }
.flight-change-steps li::marker { color: #087da0; font-weight: 850; }
.flight-change-steps strong { display: block; margin-bottom: 5px; color: var(--ink); }
.flight-change-note {
  margin: 0;
  border-top: 1px solid #d8e8ef;
  padding-top: 18px;
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.6;
}
.flight-change-note strong { color: var(--ink); }
.flight-change-note a { color: #087192; font-weight: 700; text-underline-offset: 3px; }
.flight-change-note a:hover { color: #064c65; }
@media (max-width: 800px) {
  .flight-change-steps { grid-template-columns: 1fr; gap: 17px; }
}
@media (max-width: 640px) {
  .flight-change-guide { margin-top: 28px; }
}


/* ===== Draft Flight Change Help page: scoped styles =====
   Keeps the approved homepage styling untouched. */
.flight-guide-link-row { margin: -2px 0 22px; }
.flight-guide-link-row a { color: #087192; font-weight: 800; text-underline-offset: 4px; }
.flight-guide-link-row a:hover { color: #064c65; }

/* Inner-page hero: same full-width image / overlay geometry as the homepage.
   The 1672:941 image determines desktop height, never an arbitrary min-height.
   Copy is a separate overlay; the photo spans the entire viewport. */
.flight-help-page .fh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: #071827;
}
.flight-help-page .fh-hero-art {
  grid-column: 1;
  grid-row: 1;
  display: block;
  position: relative;
  z-index: 0;
  align-self: end;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}
.flight-help-page .fh-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
}
.flight-help-page .fh-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5,20,33,.84) 0%,
    rgba(5,20,33,.62) 30%,
    rgba(5,20,33,.22) 53%,
    rgba(5,20,33,0) 78%);
}
.flight-help-page .fh-hero-grid {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: min(calc(100% - 40px), var(--shell));
  min-height: 0;
  margin-inline: auto;
  padding-block: 42px;
}
.flight-help-page .fh-hero-grid > div:first-child {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(575px, 50%);
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.flight-help-page .fh-hero h1 {
  margin: 0 0 20px;
  color: var(--white);
  font-size: clamp(2.85rem, 4.1vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.flight-help-page .fh-hero h1 span { color: #15bce6; }
.flight-help-page .fh-kicker {
  margin: 0 0 15px;
  color: #19d7da;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .11em;
  font-weight: 900;
}
.flight-help-page .fh-kicker::before { content: "— "; }
.flight-help-page .fh-hero-lead {
  max-width: 610px;
  margin: 0 0 20px;
  color: rgba(255,255,255,.87);
  font-size: clamp(.99rem,1.24vw,1.12rem);
  line-height: 1.55;
}
.flight-help-page .fh-disclosure {
  max-width: 620px;
  color: rgba(255,255,255,.78);
  font-size: .80rem;
  line-height: 1.48;
  margin: 15px 0 18px;
}
.flight-help-page .fh-quick-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0; }
.flight-help-page .fh-quick-nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: .80rem;
  font-weight: 700;
  background: rgba(7,24,39,.20);
}
.flight-help-page .fh-quick-nav a:hover { background: rgba(21,188,230,.12); border-color: rgba(21,188,230,.5); }
@media (min-width:701px) and (max-width:980px) {
  .flight-help-page .fh-hero-grid { padding-block: 26px; }
  .flight-help-page .fh-hero-grid > div:first-child { width: 53%; }
  .flight-help-page .fh-hero h1 { font-size: clamp(2.1rem,4.4vw,3.2rem); }
  .flight-help-page .fh-kicker { font-size: .7rem; margin-bottom: 10px; }
  .flight-help-page .fh-hero-lead { font-size: .92rem; line-height: 1.4; margin: 12px 0 15px; }
  .flight-help-page .fh-disclosure { font-size: .7rem; line-height: 1.35; margin: 10px 0 12px; }
  .flight-help-page .fh-hero .call-button { font-size: .9rem; min-height: 49px; padding: 10px 14px; }
  .flight-help-page .fh-quick-nav a { font-size: .7rem; padding: 7px 10px; }
  .flight-help-page .fh-hero-art::after {
    background: linear-gradient(90deg,
      rgba(5,20,33,.93) 0%,rgba(5,20,33,.78) 28%,rgba(5,20,33,.31) 56%,transparent 85%);
  }
}
@media (max-width:980px) {
  .fh-three-grid { grid-template-columns: 1fr; }
}
@media (max-width:700px) {
  .flight-help-page .fh-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .flight-help-page .fh-hero-grid {
    order: 0;
    display: block;
    width: min(calc(100% - 28px), var(--shell));
    min-height: 0;
    margin-inline: auto;
    padding: 40px 0 34px;
  }
  .flight-help-page .fh-hero-grid > div:first-child { width: 100%; max-width: none; }
  .flight-help-page .fh-hero-art {
    order: 1;
    position: relative;
    width: 100%;
    height: auto;
  }
  .flight-help-page .fh-hero-art img { display: block; width: 100%; height: auto; object-fit: contain; }
  .flight-help-page .fh-hero-art::after {
    background: linear-gradient(180deg,#071827 0%,rgba(7,24,39,0) 20%);
  }
  .flight-help-page .fh-hero h1 { font-size: clamp(2.45rem,10vw,3.1rem); }
  .flight-help-page .fh-hero .call-button { width: 100%; font-size: clamp(.83rem,3.4vw,1rem); text-align: center; }
  .fh-rows, .fh-faq { grid-template-columns: 1fr; }
  .fh-card, .fh-panel { padding: 22px; }
  .fh-section-header { margin-bottom: 22px; }
}
.fh-section { padding-block: clamp(52px, 6vw, 84px); }
.flight-help-page .fh-section-soft { background:#f3f7fa; }
.fh-section-header { max-width:780px; margin-bottom:29px; }
.fh-section-header h2 { margin:0 0 11px; font-size:clamp(1.9rem,3.4vw,2.9rem); letter-spacing:-.045em; line-height:1.15; }
.fh-section-header p:last-child { margin:0; color:#435468; line-height:1.7; }
.fh-three-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.fh-card { border:1px solid #dfe8ef; border-radius:20px; padding:26px; background:#fff; box-shadow:0 7px 26px rgba(7,24,39,.035); }
.fh-card-index { display:inline-flex; padding:6px 10px; background:#e5f8fc; border-radius:8px; color:#086d8c; font-size:.82rem; font-weight:850; margin-bottom:15px; }
.fh-card h3 { margin:0 0 10px; font-size:1.2rem; letter-spacing:-.025em; }
.fh-card p { margin:0; color:#435468; line-height:1.65; }
.fh-card a, .fh-text a, .fh-faq a { color:#087192; font-weight:700; text-underline-offset:3px; }
.fh-rows { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.fh-panel { border:1px solid #dfe8ef; border-radius:20px; background:white; padding:28px; }
.fh-panel h3 { font-size:1.3rem; margin:0 0 12px; }
.fh-panel p { margin:0 0 13px; color:#435468; line-height:1.7; }
.fh-panel p:last-child { margin-bottom:0; }
.fh-checklist { margin:0; padding-left:23px; color:#304056; line-height:1.8; }
.fh-checklist li { padding:5px 0; }
.fh-important { background:#eef8fb; border:1px solid #ccebf0; padding:22px 24px; border-radius:16px; line-height:1.65; color:#263d4c; margin-top:26px; }
.fh-important strong { color:#09283b; }
.fh-faq { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px; }
.fh-faq details { background:white;border:1px solid #dbe6ed;padding:20px 22px;border-radius:16px;align-self:start; }
.fh-faq summary {font-weight:750;cursor:pointer;line-height:1.45;}
.fh-faq details p { margin:12px 0 0; color:#435468;line-height:1.7; }
.fh-call-wrap { background:linear-gradient(135deg,#eaf8fb,#f2faf7);border:1px solid #d5edf0;border-radius:24px;padding:clamp(25px,4.5vw,48px); }
.fh-call-wrap h2 { margin:0 0 12px;font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:-.04em; }
.fh-call-wrap p { max-width:780px;line-height:1.65;color:#304056;margin:0 0 20px; }
.fh-call-wrap .call-button {display:inline-flex;align-items:center;justify-content:center;}
.fh-call-wrap .fh-call-caption {font-size:.85rem;color:#496273;margin:13px 0 0;}
.fh-footer-top {border-top:1px solid rgba(255,255,255,.08);}
/* New booking guide link inside the existing New Bookings card. */
.service-card .service-guide-link { margin: 7px 0 0; line-height: 1.4; font-size: .85rem; }
.service-card .service-guide-link a { margin-top: 0; padding: 0; font-weight: 650; }
.service-card .service-guide-link a::after { font-size: 1em; }


/* Guide navigation: the card opens its guide, while Call for help remains a phone link.
   A stretched heading link avoids JS navigation and invalid nested anchors. */
.service-card { position: relative; cursor: pointer; }
.service-card h3 > .service-page-link {
  display: inline;
  padding: 0;
  margin: 0;
  gap: 0;
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.service-card h3 > .service-page-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.service-card h3 > .service-page-link::after { content: none; }
.service-card > .service-call-link,
.service-card .service-guide-link,
.service-card .service-guide-link a {
  position: relative;
  z-index: 2;
}
.service-card:focus-within { border-color: #94cee2; box-shadow: 0 0 0 2px rgba(19,189,229,.12), 0 10px 35px rgba(7,24,39,.055); }

/* Cancellations card: both distinct scenarios are visible, clickable and accessible.
   The Call for help link remains independent of the stretched heading link. */
.service-card#cancellations .service-guide-link { margin: 4px 0 0; }
.service-card#cancellations .service-guide-link a { padding: 3px 0; line-height: 1.5; }
.service-card#cancellations .service-call-link { margin-top: auto; }


/* v27 — smaller page-specific hero images reduce empty space in the informational guides while keeping a distinct image for each page. */

/* v32 | Match the HOMEPAGE v11 desktop HERO height exactly.
   Home limits photo to clamp(600px,48vw,940px) above 1200px;
   the guides must use the same cap, not the original 16:9 intrinsic height. */
@media (min-width:1200px) and (max-width:2099px) {
  .flight-help-page .fh-hero-art {
    height: clamp(600px,48vw,940px);
    overflow: hidden;
  }
  .flight-help-page .fh-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
}
/* Ultra-wide: follow homepage's capped image height and right alignment. */
@media (min-width:2100px) {
  .flight-help-page .fh-hero-art {
    height: 940px;
    overflow: hidden;
    background: #071827;
  }
  .flight-help-page .fh-hero-art img {
    width: auto;
    height: 100%;
    max-width: none;
    margin-left: auto;
    object-fit: contain;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 7%,#000 22%);
    mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 7%,#000 22%);
  }
}

/* Prevent long guide text/link labels from forcing a wide column on 320px phones. */
@media (max-width:700px) {
  .flight-help-page .fh-rows,
  .flight-help-page .fh-faq { grid-template-columns: minmax(0,1fr); }
  .flight-help-page .fh-panel,
  .flight-help-page .fh-card { min-width: 0; overflow-wrap: anywhere; }
}