/* ==========================================================================
   Jet Air Travel Inc — Design System
   Brand palette: #016fd0 (blue) / #00175a (navy) / #e6f0fa (section tint)
                  + gold accent, retained for highlights and CTAs.
   Type: Plus Jakarta Sans (display) / Inter (body)
   ========================================================================== */

:root {
  /* ---- Client brand colours (single source of truth) ---- */
  --brand-blue: #016fd0;   /* primary — buttons, links, icons, eyebrows   */
  --brand-navy: #00175a;   /* deep — footer, dark bands, headings on tint */
  --brand-tint: #e6f0fa;   /* section background                          */

  /* Supporting steps on the same hue, used for gradients and hovers */
  --brand-blue-600: #015aab;
  --brand-blue-700: #01417d;
  --brand-navy-800: #012a67;

  /* ---- Semantic tokens ---- */
  --background: oklch(99% .005 240);
  --foreground: oklch(21% .085 260);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(21% .085 260);
  --primary: var(--brand-blue);
  --primary-foreground: oklch(99% .005 240);
  --primary-deep: var(--brand-navy);
  --secondary: var(--brand-tint);
  --secondary-foreground: var(--brand-navy);
  --muted: var(--brand-tint);          /* every tinted section uses this */
  --muted-foreground: oklch(46% .055 256);
  --accent: oklch(87% .175 98);
  --accent-foreground: var(--brand-navy);
  --destructive: oklch(57.7% .245 27.325);
  --border: oklch(89% .028 249);
  --input: oklch(89% .028 249);
  --ring: oklch(62% .12 253);

  /* Deep brand blue behind the footer and the header utility bar.
     White on #00175a reads 15.9:1; body copy at 88% still clears AAA. */
  --brand-deep: var(--brand-navy);

  --radius: .75rem;
  --gradient-hero: linear-gradient(135deg, var(--brand-navy), var(--brand-blue) 58%, var(--brand-blue-700));
  --shadow-card: 0 12px 30px -18px oklch(25% .123 263 / .55);
  --shadow-lift: 0 22px 48px -24px oklch(25% .123 263 / .65);
  --shadow-glow: 0 0 0 1px oklch(87% .175 98 / .35), 0 18px 44px -20px oklch(87% .175 98 / .45);

  --header-h: 76px;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

/* Tailwind preflight is disabled in tailwind.config.js so this file always wins.
   These rules replace the parts of preflight the utilities depend on. */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border);
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, [role="button"] { cursor: pointer; background: none; }
button, select { text-transform: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
svg { display: block; vertical-align: middle; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip (not hidden) so off-canvas panels and pending reveal offsets never
     widen the mobile layout viewport, without creating a scroll container */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Body copy sits at 500, not 400 — the whole page reads heavier and
     holds up better against the tinted section backgrounds. */
  font-weight: 500;
  font-feature-settings: "cv11", "ss01";
  font-variation-settings: "opsz" 32;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* No faux-bolding: only the self-hosted weights (Inter 400-700,
     Plus Jakarta 500-800) are ever used, so glyphs stay sharp. */
  font-synthesis-weight: none;
  line-height: 1.62;
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.034em;
  line-height: 1.08;
  color: var(--foreground);
}

strong, b { font-weight: 700; }
small { font-weight: 600; }

/* Typeface only — must NOT set a colour, or it would override Tailwind's
   text-* utilities on light-on-dark elements such as the bento tiles. */
.font-display {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.034em;
  line-height: 1.1;
}

/* Tailwind's weight utilities, nudged up one step. Inter tops out at 700 and
   Plus Jakarta at 800, so each element is pushed to the heaviest real file
   its typeface has — never past it, which is what would look mushy. */
.font-semibold { font-weight: 700; }
.font-bold { font-weight: 700; }
.font-display.font-bold,
.font-display.font-semibold,
h1.font-bold, h2.font-bold, h3.font-bold, h4.font-bold { font-weight: 800; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--accent-foreground); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--muted); }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--primary) 55%, var(--muted));
  border-radius: 99px;
  border: 3px solid var(--muted);
}
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: .75rem 1.25rem;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Preloader — plane flying a dotted route arc
   ========================================================================== */

#jt-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--gradient-hero);
  overflow: hidden;
}

#jt-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, oklch(87% .175 98 / .16), transparent 42%),
    radial-gradient(circle at 82% 78%, oklch(99% .005 240 / .12), transparent 46%);
  pointer-events: none;
}

.jt-loader__inner {
  position: relative;
  z-index: 2;
  width: min(440px, 86vw);
  text-align: center;
  color: var(--primary-foreground);
}

.jt-loader__logo {
  height: 58px;
  width: auto;
  margin: 0 auto 6px;
  filter: drop-shadow(0 8px 24px oklch(0% 0 0 / .35));
  animation: jtLogoIn .9s var(--ease-out-expo) both;
}

@keyframes jtLogoIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.jt-loader__svg { width: 100%; height: auto; display: block; overflow: visible; }

.jt-route {
  fill: none;
  stroke: oklch(99% .005 240 / .38);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
}

.jt-route--lit {
  stroke: var(--accent);
  stroke-dasharray: 1 9;
  filter: drop-shadow(0 0 6px oklch(87% .175 98 / .8));
  /* drawn by GSAP; CSS fallback below */
  animation: jtDraw 2.2s linear infinite;
}

@keyframes jtDraw {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}

.jt-node { fill: var(--accent); }
.jt-node--pulse { animation: jtPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes jtPulse {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

.jt-plane {
  fill: var(--primary-foreground);
  filter: drop-shadow(0 4px 10px oklch(0% 0 0 / .45));
}

/* CSS fallback flight path if GSAP/MotionPath is unavailable */
.jt-plane-wrap { offset-rotate: auto; }
.no-gsap .jt-plane-wrap {
  offset-path: path("M 30 132 Q 200 24 370 96");
  animation: jtFly 2.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes jtFly {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

.jt-loader__label {
  margin: 14px 0 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: oklch(99% .005 240 / .8);
}

.jt-loader__track {
  margin: 16px auto 0;
  width: min(260px, 70%);
  height: 3px;
  border-radius: 99px;
  background: oklch(99% .005 240 / .18);
  overflow: hidden;
}

.jt-loader__bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), oklch(95% .12 98));
  box-shadow: 0 0 12px oklch(87% .175 98 / .7);
  transition: width .3s linear;
  animation: jtBar 2.4s ease-in-out infinite;
}
@keyframes jtBar { 0% { width: 4%; } 70% { width: 92%; } 100% { width: 100%; } }

#jt-loader.is-done { pointer-events: none; }

/* ==========================================================================
   Reveal animations (GSAP drives these; CSS is the no-JS fallback)
   ========================================================================== */

[data-reveal] { will-change: transform, opacity; }

html.no-gsap [data-reveal],
html.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Header — two tier: utility topbar + main nav
   Condenses on scroll: the topbar collapses and the main bar tightens.
   ========================================================================== */

:root {
  /* Bar heights grew with the logo. The hero top-padding utilities are
     re-pointed at these variables below, so the two can never drift apart. */
  --nav-bar-h: 148px;
  --nav-bar-h-sm: 124px;
  --nav-bar-h-cond: 82px;   /* scrolled/condensed — deliberately compact */
  --nav-top-h: 46px;
}

/* Tailwind emits .pt-[68px] / .lg:pt-[118px] on every hero. theme.css loads
   after tailwind.css at equal specificity, so redefining them here keeps every
   page's hero clear of the header no matter what the bar height is set to. */
.pt-\[68px\] { padding-top: var(--nav-bar-h-sm); }
@media (min-width: 1024px) {
  .lg\:pt-\[118px\] { padding-top: calc(var(--nav-top-h) + var(--nav-bar-h)); }
}

.jt-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  transition: transform .45s var(--ease-out-expo);
}

/* ---------- utility topbar ---------- */

.jt-topbar {
  height: var(--nav-top-h);
  overflow: hidden;
  background: var(--brand-deep);
  color: oklch(99% .005 240 / .78);
  font-size: .8125rem;
  transition: height .4s var(--ease-out-expo), opacity .3s ease;
}

.jt-header.is-condensed .jt-topbar { height: 0; opacity: 0; }

.jt-topbar__inner {
  display: flex;
  height: var(--nav-top-h);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  white-space: nowrap;
}

.jt-topbar__meta { display: flex; align-items: center; gap: 1rem; flex: none; }

.jt-topbar a { transition: color .25s; }
.jt-topbar a:hover { color: var(--accent); }
.jt-topbar i { color: var(--accent); }

.jt-topbar__sep {
  width: 1px;
  height: 16px;
  background: oklch(99% .005 240 / .22);
}

.jt-topbar__social {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: oklch(99% .005 240 / .08);
  border: 1px solid oklch(99% .005 240 / .14);
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-out-expo);
}
.jt-topbar__social:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  transform: translateY(-2px);
}
.jt-topbar__social:hover i { color: inherit; }


/* ---------- departure board ----------
   The utility strip is an airport FIDS: a fixed-width board whose single visible
   row flicks over to the next category on a timer. The whole board is one link
   to the services index, and the rolling rows are aria-hidden, so nothing
   invisible ever takes keyboard focus.
   ---------------------------------------------------------------------------- */

.fids {
  display: flex;
  align-items: stretch;
  min-width: 0;
  flex: 1;
  height: var(--nav-top-h);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}
.fids:hover { color: inherit; }

.fids__label {
  display: none;
  align-items: center;
  gap: .5rem;
  padding-right: 1.1rem;
  margin-right: 1.1rem;
  border-right: 1px solid oklch(99% .005 240 / .2);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (min-width: 1180px) { .fids__label { display: flex; } }

/* the pulsing "live" dot */
.fids__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
  animation: fidsPulse 2.4s ease-out infinite;
}
@keyframes fidsPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* the board itself — one row tall, the rest clipped */
.fids__screen {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--nav-top-h);
  overflow: hidden;
  /* scanline texture, like a lit board */
  background-image: repeating-linear-gradient(
    to bottom, oklch(0% 0 0 / .1) 0 1px, transparent 1px 3px);
}
/* fade the row in and out at the top and bottom edges as it flips */
.fids__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--brand-navy) 0%, transparent 26%, transparent 74%, var(--brand-navy) 100%);
}

.fids__track {
  display: block;
  animation: fidsRoll 46s cubic-bezier(.7, 0, .2, 1) infinite;
}

/* Trailing 1fr soaks up the slack so the data columns stay grouped on the left
   instead of drifting apart on wide screens. */
.fids__row {
  display: grid;
  grid-template-columns: 2.4ch minmax(0, 25ch) 11ch 10ch minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  height: var(--nav-top-h);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 1439px) {
  .fids__row { grid-template-columns: 2.4ch minmax(0, 25ch) 11ch minmax(0, 1fr); }
  .fids__status { display: none; }
}

.fids__no    { color: oklch(99% .005 240 / .66); font-weight: 700; }
.fids__dest  { color: var(--accent); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.fids__count { color: oklch(99% .005 240 / .78); }
.fids__status {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #fff;
  font-weight: 700;
}
.fids__status::after {
  content: "\203a";
  font-size: 1.1em;
  line-height: 1;
  color: var(--accent);
  transition: transform .3s var(--ease-out-expo);
}
.fids:hover .fids__status::after { transform: translateX(4px); }
.fids:hover .fids__dest { color: #fff; }

/* Motion is decorative — hold on the first row when it is not wanted, and drop
   the board entirely on small screens where the strip is hidden anyway. */
@media (prefers-reduced-motion: reduce) {
  .fids__track { animation: none; }
  .fids__label::before { animation: none; }
  .fids__screen::after { background: none; }
}

/* Row-height steps, not percentages: a percentage translateY would resolve
   against the track's full height (14 rows), not one row. */
@keyframes fidsRoll {
  0.0000%, 6.6154% { transform: translateY(0); }
  7.6923%, 14.3077% { transform: translateY(calc(var(--nav-top-h) * -1)); }
  15.3846%, 22.0000% { transform: translateY(calc(var(--nav-top-h) * -2)); }
  23.0769%, 29.6923% { transform: translateY(calc(var(--nav-top-h) * -3)); }
  30.7692%, 37.3846% { transform: translateY(calc(var(--nav-top-h) * -4)); }
  38.4615%, 45.0769% { transform: translateY(calc(var(--nav-top-h) * -5)); }
  46.1538%, 52.7692% { transform: translateY(calc(var(--nav-top-h) * -6)); }
  53.8462%, 60.4615% { transform: translateY(calc(var(--nav-top-h) * -7)); }
  61.5385%, 68.1538% { transform: translateY(calc(var(--nav-top-h) * -8)); }
  69.2308%, 75.8462% { transform: translateY(calc(var(--nav-top-h) * -9)); }
  76.9231%, 83.5385% { transform: translateY(calc(var(--nav-top-h) * -10)); }
  84.6154%, 91.2308% { transform: translateY(calc(var(--nav-top-h) * -11)); }
  92.3077%, 98.9231% { transform: translateY(calc(var(--nav-top-h) * -12)); }
  100% { transform: translateY(calc(var(--nav-top-h) * -13)); }
}

@media (max-width: 1023px) { .jt-topbar { display: none; } }


/* ==========================================================================
   Motion controls — WCAG 2.2.2
   The departures board and the hero slider both start automatically and run
   for more than five seconds, so each needs a visible mechanism to pause it.
   prefers-reduced-motion alone does not satisfy the criterion.
   ========================================================================== */

.motion-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid oklch(99% .005 240 / .34);
  background: oklch(99% .005 240 / .1);
  color: #fff;
  font-size: .6rem;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.motion-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); }
.motion-btn .fa-play { display: none; }
.motion-btn[aria-pressed="true"] .fa-pause { display: none; }
.motion-btn[aria-pressed="true"] .fa-play  { display: block; }

/* board */
.fids__track.is-paused { animation-play-state: paused; }
.fids-ctl { display: none; flex: none; margin-left: .7rem; }
@media (min-width: 1180px) { .fids-ctl { display: inline-grid; } }

/* Hero slider control. Top-right, just under the header: bottom-right put it
   below the fold on a 900px viewport, and a pause control nobody can find is
   not a mechanism. */
.hero-ctl {
  position: absolute;
  right: 1.75rem;
  top: calc(var(--nav-top-h) + var(--nav-bar-h) + 1rem);
  z-index: 12;
  width: 40px;
  height: 40px;
  font-size: .78rem;
  border-color: oklch(99% .005 240 / .45);
  background: oklch(0% 0 0 / .4);
  backdrop-filter: blur(6px);
}
@media (max-width: 1023px) {
  .hero-ctl { right: 1rem; top: calc(var(--nav-bar-h-sm) + .75rem); }
}

/* ==========================================================================
   Main bar
   Transparent while it sits over a hero, frosted white once you scroll.
   ========================================================================== */

.jt-bar {
  position: relative;
  height: var(--nav-bar-h-sm);
  border-bottom: 1px solid transparent;
  transition: height .35s var(--ease-out-expo), background .35s var(--ease-out-expo),
              box-shadow .35s, backdrop-filter .35s, border-color .35s;
}
@media (min-width: 1024px) { .jt-bar { height: var(--nav-bar-h); } }

.jt-bar__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.jt-header.is-condensed .jt-bar { height: var(--nav-bar-h-cond); }

/* The transparent header sits over hero photography whose brightness changes
   with every slide. Measured white-on-sunset at 4.07:1 for the phone block —
   under AA. A scrim guarantees the topbar, nav and callout clear contrast on
   every image instead of only the darker ones. */
.jt-header--transparent .jt-bar { background: transparent; }
.jt-header--transparent .jt-bar::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--nav-top-h)) 0 -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    oklch(18% .075 260 / .66) 0%,
    oklch(18% .075 260 / .42) 58%,
    transparent 100%);
}

.jt-header--solid .jt-bar {
  background: oklch(99% .005 240 / .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: color-mix(in oklab, var(--brand-navy) 10%, transparent);
  box-shadow: 0 18px 44px -30px oklch(25% .123 263 / .9);
}

.jt-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: none;
}
/* Sized by WIDTH — the mark is 339x211, so 200px wide is 124px tall and the
   bar (--nav-bar-h) has to clear that. Change the width and the bar height
   together, or the logo will crowd the edges. */
.jt-logo img {
  width: 200px;
  height: auto;
  border-radius: 10px;
  transition: width .35s var(--ease-out-expo);
}
/* still steps down on scroll, just from a much larger resting size */
.jt-header.is-condensed .jt-logo img { width: 126px; }   /* ~78px tall */
@media (max-width: 1023px) { .jt-logo img { width: 156px; } }  /* 97px  */
@media (max-width: 480px)  { .jt-logo img { width: 132px; } }  /* 82px  */
@media (max-width: 380px)  { .jt-logo img { width: 116px; } }  /* 72px  */

/* ---------- nav links ---------- */

.jt-nav { display: none; align-items: center; gap: .15rem; }
@media (min-width: 1024px) { .jt-nav { display: flex; } }

.jt-header--transparent .jt-nav { color: var(--primary-foreground); }
.jt-header--solid .jt-nav { color: var(--brand-navy); }

.jt-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .62rem 1rem;
  border-radius: 11px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .925rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: inherit;
  background: none;
  transition: color .25s, background .25s;
}

.jt-navlink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .3rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width .38s var(--ease-out-expo);
}

.jt-navlink:hover::after,
.jt-navlink.is-active::after,
.jt-navlink[aria-expanded="true"]::after { width: calc(100% - 2rem); }

.jt-header--solid .jt-navlink:hover { background: var(--brand-tint); }
.jt-header--transparent .jt-navlink:hover { background: oklch(99% .005 240 / .12); }

.jt-navlink__chev { font-size: .6rem; opacity: .7; transition: transform .3s var(--ease-out-expo); }
.jt-navlink[aria-expanded="true"] .jt-navlink__chev { transform: rotate(180deg); }

/* Phone block in the main bar */
.jt-callout {
  display: none;
  align-items: center;
  gap: .65rem;
  padding: .4rem .85rem .4rem .5rem;
  border-radius: 999px;
  transition: background .3s;
}
@media (min-width: 1280px) { .jt-callout { display: inline-flex; } }

.jt-callout__ic {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  font-size: 1rem;
  background: color-mix(in oklab, #25D366 22%, transparent);
  color: #25D366;
  transition: transform .35s var(--ease-out-expo);
}
.jt-callout:hover .jt-callout__ic { transform: scale(1.08) rotate(-8deg); }
.jt-callout__label { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.jt-callout__num { font-family: "Plus Jakarta Sans", sans-serif; font-size: .875rem; font-weight: 700; }

.jt-header--transparent .jt-callout { color: var(--primary-foreground); }
.jt-header--transparent .jt-callout:hover { background: oklch(99% .005 240 / .12); }
.jt-header--solid .jt-callout { color: var(--brand-navy); }
.jt-header--solid .jt-callout:hover { background: var(--brand-tint); }

/* Burger */
.jt-burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid;
  transition: background .25s, border-color .25s, color .25s;
}
@media (min-width: 1024px) { .jt-burger { display: none; } }
.jt-header--transparent .jt-burger { color: var(--primary-foreground); border-color: oklch(99% .005 240 / .35); }
.jt-header--transparent .jt-burger:hover { background: oklch(99% .005 240 / .14); }
.jt-header--solid .jt-burger { color: var(--brand-navy); border-color: color-mix(in oklab, var(--brand-navy) 18%, transparent); }
.jt-header--solid .jt-burger:hover { background: var(--brand-tint); }

/* ==========================================================================
   Takeover menu
   Services opens a full-screen navy panel instead of a dropdown: an oversized
   numbered category list on the left, a live image preview on the right.
   ========================================================================== */

.jt-mega {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(155deg, var(--brand-navy-800), var(--brand-navy) 52%, #000d33);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s var(--ease-out-expo), visibility .45s;
}
.jt-mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.jt-mega::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 55% 60% at 82% 8%, color-mix(in oklab, var(--brand-blue) 55%, transparent), transparent 62%),
    radial-gradient(ellipse 45% 55% at 2% 96%, color-mix(in oklab, var(--brand-blue) 32%, transparent), transparent 60%);
}
.jt-mega > * { position: relative; z-index: 2; }

/* ---------- top row ---------- */

.jt-mega__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid oklch(99% .005 240 / .14);
}
.jt-mega__top img { width: 156px; height: auto; border-radius: 10px; }

.jt-mega__close {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid oklch(99% .005 240 / .28);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  transition: background .28s, border-color .28s, color .28s, transform .3s var(--ease-out-expo);
}
.jt-mega__close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  transform: translateY(-2px);
}

/* ---------- body ---------- */

.jt-mega__body {
  display: grid;
  align-content: start;
  gap: 2.5rem;
  padding-block: 2rem 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 1024px) {
  .jt-mega__body { grid-template-columns: minmax(0, 1fr) 26rem; gap: 4rem; align-content: center; }
}

.jt-mega__eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}
.jt-mega__eyebrow::after { content: ""; flex: 1; height: 1px; background: oklch(99% .005 240 / .18); }

.jt-mega__list { display: grid; gap: 0; }
@media (min-width: 640px) { .jt-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }

.jt-mega__item {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .62rem 0;
  border-bottom: 1px solid oklch(99% .005 240 / .1);
  color: oklch(99% .005 240 / .78);
  transition: color .25s var(--ease-out-expo), padding-left .35s var(--ease-out-expo);
}
.jt-mega__no {
  flex: none;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .7rem;
  font-weight: 700;
  color: oklch(99% .005 240 / .4);
  transition: color .25s;
}
.jt-mega__name {
  flex: 1;
  min-width: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.05rem, .82rem + .7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.2;
}
.jt-mega__count {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: oklch(99% .005 240 / .45);
  transition: color .25s;
}

.jt-mega__item:hover,
.jt-mega__item:focus-visible,
.jt-mega__item.is-active { color: #fff; padding-left: .7rem; }
.jt-mega__item:hover .jt-mega__no,
.jt-mega__item.is-active .jt-mega__no { color: var(--accent); }
.jt-mega__item:hover .jt-mega__count,
.jt-mega__item.is-active .jt-mega__count { color: var(--accent); }

/* ---------- preview ---------- */

.jt-mega__preview { position: relative; display: none; }
@media (min-width: 1024px) { .jt-mega__preview { display: block; } }

.jt-mega__card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .5s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
.jt-mega__card.is-active { opacity: 1; transform: none; }
.jt-mega__card img { width: 100%; height: 100%; object-fit: cover; }

.jt-mega__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(12% .06 262 / .94) 6%, oklch(18% .07 262 / .42) 52%, transparent 82%);
}
.jt-mega__body-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.75rem;
}

/* the preview column needs a height to absolutely position into */
.jt-mega__preview { min-height: 24rem; }
@media (min-width: 1280px) { .jt-mega__preview { min-height: 30rem; } }

/* ---------- bottom row ---------- */

.jt-mega__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.25rem;
  border-top: 1px solid oklch(99% .005 240 / .14);
  font-size: .85rem;
  color: oklch(99% .005 240 / .78);
}
.jt-mega__links { gap: .5rem 1.5rem; }
.jt-mega__foot a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: #fff; }
.jt-mega__foot a:hover { color: var(--accent); }

/* Body is locked while the takeover is open */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .jt-mega, .jt-mega__card, .jt-mega__item { transition: none; }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.jt-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(430px, 92vw);
  z-index: 300;
  background: var(--card);
  transform: translateX(102%);
  transition: transform .45s var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px -30px oklch(25% .123 263 / .8);
}
.jt-drawer.is-open { transform: none; }

.jt-drawer__head {
  display: flex;
  height: 68px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.jt-drawer__contact {
  display: grid;
  gap: .5rem;
  padding: 1rem 1.25rem;
  background: var(--brand-deep);
  color: oklch(99% .005 240 / .82);
  font-size: .8125rem;
}
.jt-drawer__contact a { display: flex; align-items: center; gap: .6rem; }
.jt-drawer__contact i { color: var(--accent); width: 16px; }

.jt-scrim {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: oklch(21% .085 260 / .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.jt-scrim.is-open { opacity: 1; visibility: visible; }

.jt-acc__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s var(--ease-out-expo);
}
.jt-acc.is-open .jt-acc__panel { max-height: 760px; }
.jt-acc.is-open .jt-acc__chev { transform: rotate(180deg); }
.jt-acc__chev { transition: transform .3s; }
/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .85rem 1.6rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.012em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s, background .3s, color .3s, border-color .3s;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, oklch(100% 0 0 / .3), transparent 80%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease-out-expo);
}
.btn:hover::before { transform: translateX(110%); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--accent {
  background: var(--accent);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-card);
}
.btn--accent:hover { box-shadow: var(--shadow-glow); }

.btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: var(--primary-deep); box-shadow: var(--shadow-lift); }

.btn--ghost-light {
  border-color: oklch(99% .005 240 / .45);
  color: var(--primary-foreground);
  background: oklch(99% .005 240 / .06);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: oklch(99% .005 240 / .16); border-color: oklch(99% .005 240 / .8); }

.btn--outline {
  border-color: var(--border);
  color: var(--primary);
  background: var(--card);
}
.btn--outline:hover { border-color: var(--primary); background: var(--muted); }

.btn--sm { padding: .6rem 1.15rem; font-size: .8rem; }
.btn--lg { padding: 1rem 2rem; font-size: .95rem; }

/* ==========================================================================
   Section chrome
   ========================================================================== */

/* One container for the whole site — header, every section and the footer all
   use .shell, so they share the same max-width and the same side gutters and
   stay aligned edge to edge. Change it here and everything moves together. */
.shell { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px)  { .shell { padding-inline: 2rem; } }
@media (min-width: 1280px) { .shell { padding-inline: 3rem; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.eyebrow--light { color: var(--accent); }

.section-title {
  font-size: clamp(1.95rem, 1.15rem + 2.3vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -.036em;
}
.lede {
  color: var(--muted-foreground);
  font-size: 1.0625rem;
  font-weight: 500;
}

.rule-gold {
  width: 62px; height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 35%, transparent));
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease-out-expo), box-shadow .45s, border-color .35s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in oklab, var(--primary) 28%, var(--border));
}

/* ==========================================================================
   Bento grid — services overview
   ========================================================================== */

.bento {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  grid-auto-rows: 260px;
}

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .bento > .b-2x2 { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 224px;
    grid-auto-flow: row dense;
  }
  .bento > .b-2x2 { grid-column: span 2; grid-row: span 2; }
  .bento > .b-2x1 { grid-column: span 2; grid-row: span 1; }
  .bento > .b-1x2 { grid-column: span 1; grid-row: span 2; }
}

/* Larger tiles get proportionally larger titles */
@media (min-width: 1024px) {
  .bento > .b-2x2 .tile__title { font-size: 1.75rem; }
  .bento > .b-2x2 .tile__more,
  .bento > .b-1x2 .tile__more { max-height: 100px; opacity: 1; }
  .bento > .b-2x1 .tile__title,
  .bento > .b-1x2 .tile__title { font-size: 1.35rem; }
}

.tile__title { font-size: 1.22rem; font-weight: 800; letter-spacing: -.03em; }

/* Category tile with image */
.tile {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--primary-deep);
  box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease-out-expo), box-shadow .5s;
}
.tile:hover { transform: translateY(-7px); box-shadow: var(--shadow-lift); }

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1s var(--ease-out-expo), filter .5s;
}
.tile:hover .tile__img { transform: scale(1.12); }

.tile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(22% .1 262 / .93) 0%,
    oklch(26% .115 262 / .68) 38%,
    oklch(25% .123 263 / .18) 72%,
    transparent 100%);
  transition: opacity .5s;
}
.tile:hover .tile__veil { opacity: .96; }

.tile__body { position: relative; z-index: 2; }

.tile__more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-out-expo), opacity .4s, margin .5s;
}
.tile:hover .tile__more,
.tile:focus-within .tile__more { max-height: 90px; opacity: 1; }

.chip-count {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: oklch(99% .005 240 / .16);
  border: 1px solid oklch(99% .005 240 / .28);
  color: var(--primary-foreground);
  backdrop-filter: blur(6px);
}

/* Service chip link */
.chip-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  font-size: .875rem;
  font-weight: 700;
  color: var(--foreground);
  box-shadow: 0 6px 18px -14px oklch(25% .123 263 / .6);
  transition: transform .3s var(--ease-out-expo), border-color .3s, color .3s, box-shadow .3s, background .3s;
}
.chip-link i { color: color-mix(in oklab, var(--primary) 45%, transparent); transition: transform .3s, color .3s; }
.chip-link:hover {
  transform: translateY(-3px);
  color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 42%, var(--border));
  box-shadow: var(--shadow-card);
}
.chip-link:hover i { transform: translateX(3px); color: var(--accent); }

/* Icon medallion */
.medallion {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  font-size: 1.15rem;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 16%, transparent);
  transition: background .35s, color .35s, transform .35s var(--ease-out-expo), border-color .35s;
}
.card:hover .medallion,
.step:hover .medallion {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
  transform: rotate(-6deg) scale(1.05);
}



/* ==========================================================================
   Inquiry desk — one segmented bar over the hero
   A request form, not a booking engine: it collects the outline of a trip and
   hands it to inquiry.html with the fields pre-filled. No prices, no
   availability, nothing reserved.

   Structure is three parts, not five stacked bands:
     tabs   — translucent pills sitting on the hero, above the card
     card   — control chips (flights only) + the segmented bar
     note   — one muted line below the card, outside it
   ========================================================================== */

/* Stacking order on this page:
   loader 9999 > takeover 400 > drawer 300 > scrim 290 > header 200 >
   passenger popover 190 > floating buttons 180 > desk 6.
   The popover only reaches 190 because app.js re-parents it to <body> while
   open — inside the hero it would be trapped by .shell's z-10 context. */
.deskwrap { position: relative; z-index: 6; }

/* ---- tabs: on the hero, not inside the card ---- */

.desk__tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: .85rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.desk__tabs::-webkit-scrollbar { display: none; }

.desk__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid oklch(99% .005 240 / .28);
  background: oklch(99% .005 240 / .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: -.012em;
  color: oklch(99% .005 240 / .88);
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.desk__tab i { font-size: .85rem; color: var(--accent); transition: color .25s; }
.desk__tab:hover { background: oklch(99% .005 240 / .24); color: #fff; }
.desk__tab.is-active {
  background: #fff;
  border-color: #fff;
  color: var(--brand-navy);
}
.desk__tab.is-active i { color: var(--brand-blue); }

/* ---- the card ---- */

.desk {
  position: relative;
  padding: .85rem;
  border-radius: 22px;
  background: oklch(99% .005 240 / .97);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 30px 70px -34px oklch(0% 0 0 / .68);
  /* NOT overflow:hidden — the passenger popover has to escape the card */
}

/* ==========================================================================
   The segmented bar
   One background with 1px gaps: the gaps are the dividers, so a bar that
   wraps to a second row gets its horizontal rules for free.
   ========================================================================== */

/* The fields live in their own nested grid. Placing the button as just another
   cell of one flat grid let auto-placed segments spill into its column, which
   left it one row tall on the two-row car bar. */
.dbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in oklab, var(--brand-navy) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-navy) 15%, transparent);
}
@media (min-width: 1024px) { .dbar { grid-template-columns: minmax(0, 1fr) auto; } }

.dbar__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}
@media (min-width: 640px)  { .dbar__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  /* --dc per panel: 4 flights, 5 hotels and packages, 3 cars (six fields over
     two rows, one column per idea — location, date+time, people). */
  .dbar__fields { grid-template-columns: repeat(var(--dc, 4), minmax(0, 1fr)); }
}

.dseg {
  display: block;
  min-width: 0;
  padding: .55rem .9rem .6rem;
  background: #fff;
  cursor: text;
  transition: background .2s;
}
.dseg:hover { background: color-mix(in oklab, var(--brand-tint) 45%, #fff); }
.dseg:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--brand-blue); }
.dseg--invalid { background: color-mix(in oklab, var(--destructive) 8%, #fff); box-shadow: inset 0 0 0 2px var(--destructive); }
.dseg--invalid .dseg__l { color: var(--destructive); }
.dseg--invalid .dseg__v > i { color: var(--destructive); }
.dseg--invalid.dseg:focus-within { box-shadow: inset 0 0 0 2px var(--destructive); }

.dseg__l {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-navy) 72%, #fff);
}
.dseg__v {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .1rem;
}
.dseg__v > i { flex: none; font-size: .8rem; color: var(--brand-blue); }
.dseg__v input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: .925rem;
  font-weight: 600;
  color: var(--brand-navy);
}
.dseg__v input::placeholder { color: color-mix(in oklab, var(--brand-navy) 40%, #fff); font-weight: 500; }
.dseg__v input[type="date"]::-webkit-calendar-picker-indicator,
.dseg__v input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .45; }
.dseg__v input[type="number"] { -moz-appearance: textfield; }
.dseg__v input[type="number"]::-webkit-outer-spin-button,
.dseg__v input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Selects and the passenger button are segments too, so every control in the
   bar has the same label-over-value shape rather than a separate chip style. */
.dseg__v--sel select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  outline: none;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: .925rem;
  font-weight: 600;
  color: var(--brand-navy);
  cursor: pointer;
}
.dseg__v--sel select::-ms-expand { display: none; }

.dseg__v--btn {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: .925rem;
  font-weight: 600;
  color: var(--brand-navy);
}
.dseg__v--btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dseg__caret { flex: none; font-size: .58rem !important; opacity: .5; color: var(--brand-navy) !important; }

/* the cabin segment fills the tail of the second row so no cell is left empty */
@media (min-width: 1024px) { .dseg--wide { grid-column: span 2; } }

/* date + time inside one segment */
.dseg__v--split { gap: .4rem; }
.dseg__v--split input[type="date"] { flex: 1 1 auto; min-width: 0; }
.dseg__v--split .dseg__time { flex: 0 0 auto; width: 5.6rem; }
.dseg__div {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: color-mix(in oklab, var(--brand-navy) 18%, transparent);
}

/* a one-way trip has no return date */
[data-return-field].is-off { opacity: .4; pointer-events: none; }

/* ---- submit, inside the bar ---- */

/* The action cell is a normal white segment; the pill is inset inside it with
   breathing room, rather than a flat block bleeding to the bar's edge. */
.dbar__act {
  display: grid;
  align-items: center;
  padding: .5rem;
  background: #fff;
}

.dbar__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  /* gold, matching Send Inquiry in the header and Request a Quote in the CTA
     band — one call-to-action colour across the whole site */
  background: var(--accent);
  color: var(--accent-foreground);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.012em;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 85%, transparent);
  transition: background .28s, box-shadow .3s, transform .3s var(--ease-out-expo);
}
.dbar__go:hover {
  background: color-mix(in oklab, var(--accent) 88%, #fff);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}
.dbar__go:active { transform: translateY(0); }
.dbar__go i { font-size: .9rem; }

.dbar__go-arrow {
  font-size: .8rem !important;
  transition: transform .32s var(--ease-out-expo);
}
.dbar__go:hover .dbar__go-arrow { transform: translateX(4px); }

@media (min-width: 1024px) {
  /* the cell spans every row of the bar; the pill stays its natural height and
     centres, so a two-row bar does not stretch it into a lozenge */
  .dbar__act { padding: .55rem .6rem; }
  .dbar__go { width: auto; padding-inline: 1.75rem; }
}

/* ---- note, outside the card ---- */

.desk__note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .8rem;
  padding-inline: .2rem;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.5;
  color: oklch(99% .005 240 / .72);
}
.desk__note i { flex: none; margin-top: .2rem; color: var(--accent); }

/* ==========================================================================
   Passenger popover
   ========================================================================== */

/* .pax wraps the whole bar. The popover has to be a sibling of .dbar, not a
   child: .dbar sets overflow:hidden to clip its rounded corners and would cut
   the popover off. JS sets left/top so it lands under the Passengers segment
   at any width. */
.pax { position: relative; }
.pax__pop {
  position: fixed;          /* set from JS once re-parented to <body> */
  z-index: 190;
  width: min(21rem, calc(100vw - 1.5rem));
  padding: 1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 28px 60px -26px oklch(25% .123 263 / .55);
}
.pax__pop[hidden] { display: none; }

.pax__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
}
.pax__row + .pax__row { border-top: 1px solid var(--border); }

.pax__label { min-width: 0; }
.pax__t {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--brand-navy);
}
.pax__s { display: block; font-size: .74rem; font-weight: 500; color: var(--muted-foreground); }

.pax__step { display: inline-flex; align-items: center; gap: .3rem; }
.pax__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--brand-navy) 16%, transparent);
  font-size: .7rem;
  color: var(--brand-blue);
  background: #fff;
  transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.pax__btn:hover:not(:disabled) { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.pax__btn:disabled { opacity: .35; cursor: not-allowed; }

.pax__n {
  width: 2.4rem;
  border: 0;
  background: none;
  outline: none;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  color: var(--brand-navy);
  -moz-appearance: textfield;
}
.pax__n::-webkit-outer-spin-button,
.pax__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pax__done {
  width: 100%;
  margin-top: .85rem;
  padding: .6rem 1rem;
  border-radius: 12px;
  background: var(--brand-navy);
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .82rem;
  font-weight: 800;
  transition: background .25s;
}
.pax__done:hover { background: var(--brand-blue); }

@media (prefers-reduced-motion: reduce) {
  .desk__tab, .dseg, .dbar__go, .dbar__go-arrow, .pax__btn { transition: none; }
  .dbar__go:hover { transform: none; }
}

/* ==========================================================================
   Category showcase — six featured image cards + the rest as a list
   ========================================================================== */

.show {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .show { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .show { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.show__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 40px -26px oklch(25% .123 263 / .7);
  transition: transform .5s var(--ease-out-expo), box-shadow .5s;
}
.show__card:hover { transform: translateY(-8px); box-shadow: 0 34px 62px -30px oklch(25% .123 263 / .78); }

.show__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out-expo);
}
.show__card:hover img { transform: scale(1.08); }

.show__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(12% .06 262 / .95) 4%, oklch(15% .07 262 / .55) 42%, oklch(20% .08 262 / .1) 74%);
  transition: opacity .45s;
}

.show__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.5rem;
  color: #fff;
}
.show__count {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: oklch(99% .005 240 / .16);
  border: 1px solid oklch(99% .005 240 / .26);
  backdrop-filter: blur(6px);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.show__name {
  margin-top: .8rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.034em;
  line-height: 1.12;
}
.show__blurb {
  margin-top: .5rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.55;
  color: oklch(99% .005 240 / .82);
  /* revealed on hover so the resting card stays clean */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-out-expo), opacity .4s, margin-top .4s;
}
.show__card:hover .show__blurb,
.show__card:focus-visible .show__blurb { max-height: 6rem; opacity: 1; }

.show__go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}
.show__go i { transition: transform .35s var(--ease-out-expo); }
.show__card:hover .show__go i { transform: translateX(5px); }

/* ---- the remaining categories, as a compact two-column list ---- */

.morecat {
  display: grid;
  gap: 0;
  margin-top: 1.35rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px)  { .morecat { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
@media (min-width: 1024px) { .morecat { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; } }

.morecat__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--border);
  color: var(--brand-navy);
  transition: color .25s, padding-left .35s var(--ease-out-expo);
}
.morecat__item > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: .85rem;
  color: var(--brand-blue);
  background: var(--brand-tint);
  transition: background .28s, color .28s;
}
.morecat__name { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; }
.morecat__n {
  flex: none;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted-foreground);
  transition: color .25s;
}
.morecat__item:hover { color: var(--brand-blue); padding-left: .55rem; }
.morecat__item:hover > i { background: var(--brand-blue); color: #fff; }
.morecat__item:hover .morecat__n { color: var(--brand-blue); }

/* ==========================================================================
   Assurance row under the hero
   ========================================================================== */

.assure {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) { .assure { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }

.assure__item { display: flex; align-items: flex-start; gap: .9rem; }
.assure__item > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1rem;
  color: var(--brand-blue);
  background: var(--brand-tint);
}
.assure__t {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand-navy);
}
.assure__d { margin-top: .2rem; font-size: .82rem; font-weight: 500; line-height: 1.5; color: var(--muted-foreground); }

@media (prefers-reduced-motion: reduce) {
  .show__card, .show__card img, .show__blurb, .morecat__item, .desk__tab { transition: none; }
  .show__card:hover { transform: none; }
  .show__card:hover img { transform: none; }
  .show__blurb { max-height: 6rem; opacity: 1; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--primary-deep); }

.hero__slide { position: absolute; inset: 0; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero .swiper-slide-active .hero__slide img { animation: kenburns 8s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.16); }
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, oklch(27% .125 262 / .95) 6%, oklch(25% .123 263 / .72) 42%, oklch(40% .16 255 / .28) 78%, transparent 100%),
    linear-gradient(to top, oklch(24% .115 262 / .7), transparent 55%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .18;
  background-image:
    linear-gradient(oklch(99% .005 240 / .35) 1px, transparent 1px),
    linear-gradient(90deg, oklch(99% .005 240 / .35) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 22% 40%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 22% 40%, #000 8%, transparent 72%);
}

/* ==========================================================================
   Decorative flight arcs — dotted route with a plane flying it on a loop
   ========================================================================== */

.jt-arc {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.jt-arc__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 3 10;
  stroke-linecap: round;
  opacity: .55;
}

.jt-arc__plane { fill: var(--accent); }
.jt-arc__plane path { filter: drop-shadow(0 3px 8px oklch(0% 0 0 / .45)); }

/* Without JS the plane would sit at 0,0 — keep it out of sight instead */
html.no-gsap .jt-arc__plane { display: none; }

/* Dark-on-light variant used on the process band */
.jt-arc--ink .jt-arc__path { stroke: var(--primary); opacity: .3; }
.jt-arc--ink .jt-arc__plane { fill: var(--primary); }

/* Legacy alias */
.hero__arc { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .55; }

.hero__tab {
  border-radius: 999px;
  padding: .55rem 1.05rem;
  font-size: .78rem;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", sans-serif;
  border: 1px solid oklch(99% .005 240 / .32);
  color: oklch(99% .005 240 / .9);
  background: oklch(99% .005 240 / .06);
  backdrop-filter: blur(6px);
  cursor: pointer;
  white-space: nowrap;
  transition: all .3s var(--ease-out-expo);
}
.hero__tab:hover { background: oklch(99% .005 240 / .18); color: var(--primary-foreground); }
.hero__tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-glow);
}

/* Word-by-word headline reveal */
.reveal-line { display: block; overflow: hidden; }
.reveal-word { display: inline-block; will-change: transform; }

/* Page hero (inner pages) */
.phero { position: relative; isolation: isolate; overflow: hidden; background: var(--primary-deep); }
.phero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.phero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, oklch(27% .125 262 / .95) 4%, oklch(25% .123 263 / .78) 45%, oklch(40% .16 255 / .34) 82%, transparent 100%),
    linear-gradient(to top, oklch(24% .115 262 / .78), transparent 60%);
}

.crumb a { color: oklch(99% .005 240 / .72); transition: color .25s; }
.crumb a:hover { color: var(--accent); }

/* ==========================================================================
   Stats / counters
   ========================================================================== */

.stat__num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--primary), oklch(60% .175 253));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__num--light {
  background: linear-gradient(135deg, oklch(99% .005 240), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Process timeline
   ========================================================================== */

/* The route weaves BEHIND the step cards: the plane dips out of sight behind
   each card and reappears in the gaps. Path is built from the real card
   positions in app.js, so it re-flows at every breakpoint. */
/* Vertical breathing room so the route can swing clear of the cards and be
   seen arcing above and below them, not just in the column gaps. */
.steps {
  position: relative;
  isolation: isolate;
  padding-block: 3rem;
}
@media (min-width: 1024px) { .steps { padding-block: 4.5rem; } }

.steps__weave {
  position: absolute;
  inset: 0;
  z-index: 0;            /* behind the cards */
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.steps__weave-path {
  fill: none;
  stroke: color-mix(in oklab, var(--primary) 38%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 11;
}

.steps--light .steps__weave-path { stroke: oklch(99% .005 240 / .55); }

.steps__weave-plane { fill: var(--accent); }
.steps__weave-plane path { filter: drop-shadow(0 4px 12px oklch(87% .175 98 / .65)); }

html.no-gsap .steps__weave-plane { display: none; }

/* Cards ride above the route */
.steps .step { position: relative; z-index: 1; }

.step { position: relative; }
.step__no {
  position: absolute;
  top: -10px; right: 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in oklab, var(--primary) 8%, transparent);
  pointer-events: none;
  transition: color .4s;
}
.step:hover .step__no { color: color-mix(in oklab, var(--accent) 42%, transparent); }

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 0 1.9rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: color-mix(in oklab, var(--foreground) 74%, transparent);
  white-space: nowrap;
}
.marquee__item i { color: var(--accent); font-size: .7rem; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: .45rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.field__label .req { color: var(--destructive); margin-left: .12rem; }

.control {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: 12px;
  background: var(--card);
  padding: .78rem .95rem;
  font-family: inherit;
  font-size: .9rem;
  color: var(--foreground);
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  appearance: none;
}
.control::placeholder { color: color-mix(in oklab, var(--muted-foreground) 78%, transparent); }
.control:hover { border-color: color-mix(in oklab, var(--primary) 34%, var(--input)); }
.control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent);
  background: var(--card);
}
.control:user-invalid {
  border-color: var(--destructive);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--destructive) 12%, transparent);
}
textarea.control { min-height: 118px; resize: vertical; line-height: 1.6; }

select.control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23667'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%235b6b8c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-right: 2.4rem;
  cursor: pointer;
}
select.control optgroup { font-weight: 700; color: var(--primary); font-style: normal; }
select.control option { color: var(--foreground); font-weight: 400; padding: 4px; }

.field-icon { position: relative; }
.field-icon .control { padding-left: 2.6rem; }
.field-icon > i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .82rem;
  color: color-mix(in oklab, var(--muted-foreground) 90%, transparent);
  pointer-events: none;
  transition: color .25s;
}
.field-icon:focus-within > i { color: var(--primary); }

.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.form-card__head {
  background: var(--gradient-hero);
  color: var(--primary-foreground);
  padding: 1.6rem 1.8rem;
  position: relative;
  overflow: hidden;
}
.form-card__head::after {
  content: "\f072";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -6px; bottom: -22px;
  font-size: 6rem;
  opacity: .1;
  transform: rotate(-18deg);
}

.fieldset-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
}
.fieldset-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* Success panel */
.success-pop { animation: successIn .6s var(--ease-out-expo) both; }
@keyframes successIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.success-tick {
  width: 68px; height: 68px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 1.7rem;
  color: var(--accent-foreground);
  background: var(--accent);
  box-shadow: var(--shadow-glow);
  animation: tickPop .7s var(--ease-out-expo) .1s both;
}
@keyframes tickPop {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.14) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ==========================================================================
   Service card (.scard) — navy header panel over a white body with a pill CTA
   Used for the ~160 service cards across the 13 category pages.
   ========================================================================== */

.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px -22px oklch(25% .123 263 / .5);
  transition: transform .45s var(--ease-out-expo), box-shadow .45s, border-color .35s;
}
.scard:hover,
.scard:focus-within {
  transform: translateY(-7px);
  box-shadow: 0 30px 56px -26px oklch(25% .123 263 / .62);
  border-color: color-mix(in oklab, var(--brand-blue) 34%, var(--border));
}

/* ---- navy header ---- */

.scard__head {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 172px;
  padding: 1.9rem 1.5rem 1.7rem;
  text-align: center;
  background: linear-gradient(155deg, var(--brand-navy-800), var(--brand-navy) 58%, #000f3d);
  color: #fff;
  transition: background .45s var(--ease-out-expo);
}

/* Flight-path motif — echoes the dotted route arc used in the heroes, and
   keeps the navy panel from reading as a flat rectangle. */
.scard__head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 70% 90% at 108% -20%, color-mix(in oklab, var(--brand-blue) 62%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 80% at -12% 118%, color-mix(in oklab, var(--brand-blue) 34%, transparent), transparent 60%);
  transition: opacity .45s;
}
.scard__head::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -22%;
  right: -22%;
  bottom: -46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed oklch(99% .005 240 / .16);
  transition: transform .7s var(--ease-out-expo);
}
.scard:hover .scard__head::after { transform: translateY(-8px) rotate(4deg); }
.scard:hover .scard__head {
  background: linear-gradient(155deg, var(--brand-blue-700), var(--brand-navy-800) 58%, var(--brand-navy));
}

/* Faint index watermark, top-right */
.scard__idx {
  position: absolute;
  top: .85rem;
  right: 1.15rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: oklch(99% .005 240 / .17);
  letter-spacing: -.04em;
}

.scard__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.02rem;
  color: var(--accent);
  background: oklch(99% .005 240 / .1);
  border: 1px solid oklch(99% .005 240 / .18);
  box-shadow: inset 0 1px 0 oklch(99% .005 240 / .2);
  transition: background .35s, color .35s, border-color .35s, transform .45s var(--ease-out-expo);
}
.scard:hover .scard__ico {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  transform: translateY(-3px) scale(1.06);
}

.scard__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}

.scard__kicker {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  color: oklch(99% .005 240 / .74);
}

/* ---- white body ---- */

.scard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.75rem 1.6rem 1.9rem;
}

.scard__text {
  margin: 0;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.62;
  color: color-mix(in oklab, var(--foreground) 88%, transparent);
  text-wrap: pretty;
}

.scard__cta {
  align-self: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .78rem 2.1rem;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.012em;
  box-shadow: 0 12px 24px -14px color-mix(in oklab, var(--brand-blue) 85%, transparent);
  transition: background .3s, box-shadow .3s, transform .35s var(--ease-out-expo), gap .3s;
}
.scard__cta i { font-size: .82rem; transition: transform .35s var(--ease-out-expo); }
.scard__cta:hover,
.scard:hover .scard__cta {
  background: var(--brand-navy);
  color: #fff;
  box-shadow: 0 16px 30px -14px oklch(25% .123 263 / .8);
}
.scard:hover .scard__cta i { transform: translateX(4px); }

/* The CTA's hit area is stretched over the whole card (.scard is the nearest
   positioned ancestor), so anywhere on the card is clickable and only one link
   per card lands in the accessibility tree. */
.scard__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
}

/* Visually hidden, still announced by screen readers — the pills all read
   "Explore", so each one carries its service name for context. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (max-width: 480px) {
  .scard__head { min-height: 150px; padding: 1.6rem 1.25rem 1.45rem; }
  .scard__title { font-size: 1.18rem; }
  .scard__body { padding: 1.5rem 1.35rem 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scard, .scard__head, .scard__ico, .scard__cta, .scard__head::after { transition: none; }
  .scard:hover { transform: none; }
}

/* ==========================================================================
   Payment method cards — pointer tilt, spotlight, sheen sweep
   ========================================================================== */

.pay-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.9rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .45s var(--ease-out-expo), border-color .35s, background .35s;
}

/* Spotlight that tracks the pointer */
.pay-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my),
              color-mix(in oklab, var(--accent) 26%, transparent), transparent 62%);
  transition: opacity .45s var(--ease-out-expo);
}

/* Diagonal sheen that sweeps across on hover */
.pay-card__sheen {
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background: linear-gradient(115deg, transparent 42%,
              oklch(100% 0 0 / .55) 50%, transparent 58%);
  transform: translateX(-120%) rotate(4deg);
  transition: transform 1.1s var(--ease-out-expo);
  pointer-events: none;
}

/* Gradient rule that draws in along the top edge */
.pay-card__rule {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out-expo);
}

.pay-card:hover,
.pay-card:focus-within {
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
}
.pay-card:hover::before,
.pay-card:focus-within::before { opacity: 1; }
.pay-card:hover .pay-card__sheen { transform: translateX(120%) rotate(4deg); }
.pay-card:hover .pay-card__rule,
.pay-card:focus-within .pay-card__rule { transform: scaleX(1); }

/* Everything inside lifts slightly off the card face while tilting */
.pay-card__body { transform: translateZ(28px); transform-style: preserve-3d; }

.pay-mark {
  height: 58px;
  min-width: 92px;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--muted), color-mix(in oklab, var(--muted) 60%, var(--card)));
  border: 1px solid var(--border);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--primary-deep);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .8);
  transition: transform .5s var(--ease-out-expo), background .4s, border-color .4s, color .4s;
}
.pay-mark i { font-size: 2rem; line-height: 1; }

.pay-card:hover .pay-mark {
  transform: translateZ(38px) scale(1.06) rotate(-3deg);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 20%, var(--card)), var(--card));
}

.pay-card__check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary);
  transition: color .35s, transform .45s var(--ease-out-expo);
}
.pay-card:hover .pay-card__check { transform: translateX(3px); }
.pay-card:hover .pay-card__check i { color: var(--accent); }

/* Visa spans two columns so the five cards fill two rows of three exactly */
@media (min-width: 1024px) {
  .pay-grid > .b-wide { grid-column: span 2; }
}

/* Small marks strip (hero + summary row) */
.pay-strip-mark {
  display: grid;
  place-items: center;
  height: 54px;
  min-width: 80px;
  padding: 0 1.1rem;
  border-radius: 14px;
  font-size: 2rem;
  color: var(--primary-deep);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease-out-expo), color .3s, box-shadow .4s;
}
.pay-strip-mark:hover {
  transform: translateY(-5px) scale(1.04);
  color: var(--primary);
  box-shadow: var(--shadow-lift);
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .72rem;
  font-weight: 700;
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 16%, transparent);
}
.badge-soft--gold {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent-foreground);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
}

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */

.faq__panel { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease-out-expo); }
.faq.is-open .faq__panel { max-height: 420px; }
.faq.is-open .faq__icon { transform: rotate(45deg); background: var(--accent); color: var(--accent-foreground); }
.faq__icon { transition: transform .35s var(--ease-out-expo), background .3s, color .3s; }

/* ==========================================================================
   Footer
   ========================================================================== */

/* ==========================================================================
   Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Consultant card (contact page)
   The portrait already carries the name in the artwork, so the markup adds a
   role rather than repeating it; the name lives in the image's alt text.
   -------------------------------------------------------------------------- */

.consultant__head {
  position: relative;
  display: grid;
  place-items: end center;
  padding: 1.75rem 1.5rem .6rem;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in oklab, var(--primary) 13%, var(--card)), var(--muted));
  overflow: hidden;
}

/* dotted route arcing behind the portrait */
.consultant__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}
.consultant__arc path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  opacity: .45;
}

.consultant__photo {
  position: relative;
  z-index: 2;
  width: min(200px, 62%);
}
.consultant__photo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px oklch(25% .123 263 / .28));
  transition: transform .6s var(--ease-out-expo);
}
.card:hover .consultant__photo img { transform: translateY(-5px) scale(1.02); }

.consultant__badge {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--card);
  color: var(--primary);
  box-shadow: var(--shadow-card);
}
.consultant__badge i { color: #25D366; }

/* ==========================================================================
   Long-form pages — legal, About, 404
   One template serves Privacy, Terms, Accessibility, Refund and Disclosures.
   Measure is capped at ~68ch: legal text is read, not skimmed, and a full
   1600px line is unreadable.
   ========================================================================== */

/* ---- page hero ---- */

.phead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, var(--brand-navy-800), var(--brand-navy) 55%, #000f3d);
  color: #fff;
}
.phead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 60% 70% at 88% 0%, color-mix(in oklab, var(--brand-blue) 55%, transparent), transparent 62%),
    radial-gradient(ellipse 50% 60% at 2% 100%, color-mix(in oklab, var(--brand-blue) 30%, transparent), transparent 60%);
}
/* The header is fixed, so the hero has to clear it — same variable-driven
   calculation the other page heroes use. */
.phead__inner {
  padding-top: calc(var(--nav-bar-h-sm) + 2.5rem);
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  .phead__inner {
    padding-top: calc(var(--nav-top-h) + var(--nav-bar-h) + 3rem);
    padding-bottom: 4rem;
  }
}

.phead h1 {
  margin-top: 1.15rem;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  color: #fff;
  text-wrap: balance;
}
.phead__lede {
  margin-top: 1.15rem;
  max-width: 60ch;
  font-size: 1.0625rem;
  font-weight: 500;
  color: oklch(99% .005 240 / .84);
}
.phead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid oklch(99% .005 240 / .18);
  font-size: .8rem;
  font-weight: 600;
  color: oklch(99% .005 240 / .78);
}
.phead__meta i { color: var(--accent); margin-right: .4rem; }

/* ---- breadcrumb ---- */

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: oklch(99% .005 240 / .68);
}
.crumb a:hover { color: var(--accent); }
.crumb i { font-size: .55rem; opacity: .6; }

/* ---- the document body ---- */

.legal {
  display: grid;
  gap: 3rem;
  padding-block: 3.5rem 4.5rem;
}
@media (min-width: 1024px) {
  .legal { grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; padding-block: 4.5rem 6rem; }
}

/* sticky contents rail */
.legal__toc { align-self: start; }
@media (min-width: 1024px) {
  .legal__toc { position: sticky; top: calc(var(--nav-bar-h-sm) + 1.5rem); }
}
.legal__toc h2 {
  margin-bottom: 1rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.legal__toc ol { display: grid; gap: .1rem; counter-reset: toc; }
.legal__toc a {
  display: flex;
  gap: .7rem;
  padding: .45rem .6rem;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-navy);
  transition: background .2s, color .2s;
}
.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: .72rem;
  color: var(--brand-blue);
}
.legal__toc a:hover { background: var(--brand-tint); color: var(--brand-blue); }

/* the prose column */
.legal__body { max-width: 68ch; }

.legal__body > * + * { margin-top: 1.15rem; }

.legal__body h2 {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
  font-size: 1.4rem;
  letter-spacing: -.03em;
  scroll-margin-top: calc(var(--nav-bar-h-sm) + 2rem);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 { margin-top: 2rem; font-size: 1.06rem; letter-spacing: -.02em; }

.legal__body p,
.legal__body li { font-size: .975rem; line-height: 1.72; color: color-mix(in oklab, var(--foreground) 92%, #fff); }

.legal__body ul, .legal__body ol { display: grid; gap: .55rem; padding-left: 1.35rem; }
.legal__body ul { list-style: disc; }
.legal__body ol { list-style: decimal; }
.legal__body li::marker { color: var(--brand-blue); }

.legal__body a { color: var(--brand-blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--brand-navy); }

.legal__body strong { color: var(--brand-navy); }

.legal__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.legal__body th, .legal__body td {
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.legal__body th { background: var(--brand-tint); font-weight: 800; color: var(--brand-navy); }

/* callout — used for the attorney-review banner and key notices */
.callout {
  display: flex;
  gap: .9rem;
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  background: var(--brand-tint);
  border-left: 4px solid var(--brand-blue);
}
.callout--warn { background: color-mix(in oklab, var(--accent) 22%, #fff); border-left-color: var(--accent); }
.callout > i { flex: none; margin-top: .15rem; color: var(--brand-blue); }
.callout--warn > i { color: color-mix(in oklab, var(--accent) 70%, #000); }
.callout p { margin: 0; font-size: .9rem !important; line-height: 1.6 !important; }
.callout p + p { margin-top: .5rem; }

/* ---- About ---- */

.about-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .about-split { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }
/* The source portrait is square and tightly framed; letting it fill the column
   turns it into a giant close-up. Cap it and crop to a portrait ratio. */
.about-split img {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
}

.vals { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vals { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }

/* ---- 404 ---- */

.err {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-top: calc(var(--nav-bar-h-sm) + 3rem);
  padding-bottom: 5rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .err { padding-top: calc(var(--nav-top-h) + var(--nav-bar-h) + 3rem); }
}
.err__code {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklab, var(--brand-navy) 22%, transparent);
}
.err__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 2rem;
}

/* ==========================================================================
   Footer — boarding pass
   A navy field holding one card built like an airline boarding pass: navy
   header strip, a route line, three field columns, a perforated tear-off stub
   carrying the contact details, and a barcode strip along the bottom.
   Structure mirrors .scard (navy head over white body) so the footer and the
   service cards read as the same system.
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--brand-navy-800) 0%, var(--brand-navy) 46%, #000f3d 100%);
  border-top: 3px solid var(--accent);
  color: #fff;
}

/* Glow + route grid behind the pass, so the navy field has depth */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 62% 58% at 88% 108%, color-mix(in oklab, var(--brand-blue) 55%, transparent), transparent 64%),
    radial-gradient(ellipse 50% 60% at 4% -12%, color-mix(in oklab, var(--brand-blue) 30%, transparent), transparent 60%);
  pointer-events: none;
}
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image:
    linear-gradient(oklch(99% .005 240) 1px, transparent 1px),
    linear-gradient(90deg, oklch(99% .005 240) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, #000, transparent 46%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 46%);
  pointer-events: none;
}
.footer > * { position: relative; z-index: 2; }

.footer .shell { padding-block: 4.5rem 3rem; }
@media (min-width: 1024px) { .footer .shell { padding-block: 6rem 3.5rem; } }

/* ==========================================================================
   The pass
   ========================================================================== */

.bp {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 40px 90px -40px oklch(0% 0 0 / .75);
}

/* ---- header strip ---- */

.bp__top {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(155deg, var(--brand-navy-800), var(--brand-navy) 58%, #000f3d);
  border-bottom: 2px solid var(--accent);
}
.bp__top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 60% 130% at 92% 0%, color-mix(in oklab, var(--brand-blue) 62%, transparent), transparent 62%);
}
@media (min-width: 640px) { .bp__top { padding: 1.6rem 2.25rem; } }

.bp__brand { display: flex; align-items: center; gap: 1rem; flex: none; }
.bp__brand img { width: 150px; height: auto; border-radius: 10px; }
@media (min-width: 640px) { .bp__brand img { width: 200px; } }

.bp__tagline {
  flex: 1 1 22ch;
  max-width: 46ch;
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.55;
  color: oklch(99% .005 240 / .82);
}
@media (max-width: 1023px) { .bp__tagline { order: 3; flex-basis: 100%; } }

.bp__doc {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.bp__doc i { font-size: .9rem; }

/* ---- body: main + tear-off stub ---- */

.bp__body { display: grid; }
@media (min-width: 1024px) {
  .bp__body { grid-template-columns: minmax(0, 1fr) 21rem; }
}

.bp__main { padding: 2rem 1.75rem; }
@media (min-width: 640px)  { .bp__main { padding: 2.5rem 2.25rem; } }
@media (min-width: 1024px) { .bp__main { padding: 2.75rem 3rem; } }

/* ---- route line ---- */

.bp__route {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.9rem;
  border-bottom: 2px dashed color-mix(in oklab, var(--brand-navy) 22%, transparent);
}

.bp__label {
  display: block;
  margin-bottom: .3rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-navy) 72%, #fff);
}
.bp__value {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.1;
  color: var(--brand-navy);
}
@media (min-width: 640px) { .bp__value { font-size: 1.7rem; } }
.bp__route > :last-child { text-align: right; }

/* dotted leg with a plane sitting on it */
.bp__leg {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, color-mix(in oklab, var(--brand-navy) 32%, transparent) 45%, transparent 0);
  background-size: 9px 2px;
  background-repeat: repeat-x;
}
.bp__leg i {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 0 .5rem;
  background: var(--card);
  color: var(--accent);
  font-size: 1rem;
}

/* ---- meta strip (desk hours / counts) ---- */

.bp__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.75rem;
  padding: 1.6rem 0;
  border-bottom: 2px dashed color-mix(in oklab, var(--brand-navy) 22%, transparent);
}
@media (min-width: 720px) { .bp__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bp__meta .bp__value { font-size: 1rem; letter-spacing: -.02em; }

/* ---- link columns ---- */

.bp__cols {
  display: grid;
  gap: 2.25rem;
  padding-top: 2rem;
}
@media (min-width: 640px) { .bp__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bp__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; } }
/* three link columns once Legal is added */
@media (min-width: 900px)  { .bp__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bp__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.25rem; } }

.bp__colhead {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-navy) 72%, #fff);
}
.bp__colhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in oklab, var(--brand-navy) 16%, transparent);
}

.bp__list { display: grid; gap: .1rem; }

.bp__link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem 0;
  font-size: .925rem;
  font-weight: 700;
  color: var(--brand-navy);
  transition: color .25s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
.bp__link i {
  flex: none;
  width: 11px;
  font-size: .68rem;
  color: var(--brand-blue);
  transition: transform .3s var(--ease-out-expo);
}
.bp__link:hover { color: var(--brand-blue); transform: translateX(5px); }
.bp__link:hover i { transform: translateX(2px); }

/* ==========================================================================
   Tear-off stub
   ========================================================================== */

.bp__stub {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--brand-tint);
}
@media (min-width: 640px)  { .bp__stub { padding: 2.5rem 2.25rem; } }
@media (min-width: 1024px) { .bp__stub { padding: 2.75rem 2.5rem; } }

/* Perforation. Horizontal above 1024px is a vertical dashed rule with a notch
   punched out top and bottom; below that it flips to a horizontal rule with
   notches left and right. The notch fill is the navy field behind the pass. */
.bp__stub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 2px dashed color-mix(in oklab, var(--brand-navy) 26%, transparent);
}
/* Both notches come from one element carrying two positioned circles. .bp has
   overflow:hidden, so the half hanging past the card edge is clipped and what
   is left reads as a punched hole. (box-shadow offsets cannot take a
   percentage, which is why this is not two shadows.) */
.bp__stub::after {
  content: "";
  position: absolute;
  top: -11px;
  left: -11px;
  right: -11px;
  height: 22px;
  background:
    radial-gradient(circle 11px at 11px 11px, var(--brand-navy) 98%, transparent 100%) left center / 22px 22px no-repeat,
    radial-gradient(circle 11px at 11px 11px, var(--brand-navy) 98%, transparent 100%) right center / 22px 22px no-repeat;
}
@media (min-width: 1024px) {
  .bp__stub::before {
    left: 0; right: auto; top: 0; bottom: 0;
    border-top: 0;
    border-left: 2px dashed color-mix(in oklab, var(--brand-navy) 26%, transparent);
  }
  .bp__stub::after {
    top: -11px;
    bottom: -11px;
    left: -11px;
    right: auto;
    width: 22px;
    height: auto;
    background:
      radial-gradient(circle 11px at 11px 11px, var(--brand-navy) 98%, transparent 100%) center top / 22px 22px no-repeat,
      radial-gradient(circle 11px at 11px 11px, var(--brand-navy) 98%, transparent 100%) center bottom / 22px 22px no-repeat;
  }
}

.bp__stubhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid color-mix(in oklab, var(--brand-navy) 16%, transparent);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-navy);
}
/* "Passenger copy" is the stub's own caption, so it sits above the title */
.bp__stubhead span:last-child {
  order: -1;
  font-size: .6rem;
  letter-spacing: .22em;
  /* --brand-blue is 4.35:1 on --brand-tint, just under AA. The 600 step clears it. */
  color: var(--brand-blue-600);
}

.bp__fields { display: grid; gap: 1.15rem; }

.bp__field {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  transition: transform .3s var(--ease-out-expo);
}
a.bp__field:hover { transform: translateX(4px); }
.bp__field > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: .85rem;
  color: #fff;
  background: var(--brand-blue);
  box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--brand-blue) 85%, transparent);
  transition: background .28s, transform .3s var(--ease-out-expo);
}
a.bp__field:hover > i { background: var(--brand-navy); transform: translateY(-2px); }
.bp__field .bp__value {
  font-family: "Inter", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  word-break: break-word;
}

.bp__social {
  display: flex;
  gap: .6rem;
  margin-top: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--brand-navy) 16%, transparent);
}
.bp__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 1rem;
  color: var(--brand-navy);
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--brand-navy) 14%, transparent);
  transition: background .28s, color .28s, border-color .28s, transform .35s var(--ease-out-expo);
}
.bp__social a:hover {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--accent);
  transform: translateY(-4px);
}

/* ==========================================================================
   Barcode strip
   ========================================================================== */

.bp__strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 1.75rem;
  background: var(--brand-navy);
  color: oklch(99% .005 240 / .82);
  font-size: .78rem;
  text-align: center;
}
@media (min-width: 900px) {
  .bp__strip {
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.35rem 2.25rem;
    text-align: left;
  }
}

/* Three overlaid gradients at co-prime periods read as a random bar pattern */
.bp__barcode {
  flex: none;
  width: 190px;
  height: 34px;
  border-radius: 3px;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(90deg, var(--brand-navy) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, var(--brand-navy) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, var(--brand-navy) 0 3px, transparent 3px 13px);
  background-clip: content-box;
  padding: 3px 5px;
}

.bp__strip p { margin: 0; }

.bp__credit { font-weight: 500; white-space: nowrap; }
.bp__credit a {
  position: relative;
  font-weight: 800;
  color: #fff;
  transition: color .25s var(--ease-out-expo);
}
.bp__credit a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out-expo);
}
.bp__credit a:hover { color: var(--accent); }
.bp__credit a:hover::after { transform: scaleX(1); }

/* The floating action buttons sit bottom-right; keep the strip clear of them */
@media (min-width: 900px) { .bp__strip { padding-inline-end: 5.5rem; } }
@media (max-width: 899px) { .footer .shell { padding-bottom: 6.5rem; } }

@media (prefers-reduced-motion: reduce) {
  .bp__link, .bp__field, .bp__field > i, .bp__social a { transition: none; }
  .bp__link:hover, a.bp__field:hover, .bp__social a:hover { transform: none; }
}

/* Floating actions */
.fab {
  position: fixed;
  right: 18px;
  z-index: 180;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  transition: transform .35s var(--ease-out-expo), opacity .35s, visibility .35s, background .3s;
}
.fab:hover { transform: translateY(-4px) scale(1.06); }

.fab--wa { bottom: 18px; background: #25D366; color: #fff; font-size: 1.5rem; }
.fab--top {
  bottom: 82px;
  background: var(--primary);
  color: var(--primary-foreground);
  opacity: 0;
  visibility: hidden;
}
.fab--top.is-visible { opacity: 1; visibility: visible; }

.fab--wa::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid #25D366;
  animation: ripple 2.4s ease-out infinite;
}
@keyframes ripple {
  0%   { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Utility */
.glass {
  background: oklch(99% .005 240 / .1);
  border: 1px solid oklch(99% .005 240 / .2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   WordPress additions
   ========================================================================== */

/* Honeypot. Off-screen rather than display:none — a bot that respects
   display:none will skip the field and sail through the check. aria-hidden
   and tabindex=-1 on the markup keep it away from assistive technology. */
.jt-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Editor-authored rich text outside the legal template — the About intro,
   the inquiry sidebar, the service-page body. Same typographic rules as
   .legal__body, without the h2 rules that draw a divider across a card. */
.prose-jt { max-width: 68ch; }
.prose-jt > * + * { margin-top: 1.1rem; }
.prose-jt h2 { margin-top: 2.25rem; font-size: 1.3rem; letter-spacing: -.03em; }
.prose-jt h3 { margin-top: 1.75rem; font-size: 1.05rem; letter-spacing: -.02em; }
.prose-jt p,
.prose-jt li { font-size: .975rem; line-height: 1.72; color: color-mix(in oklab, var(--foreground) 92%, #fff); }
.prose-jt ul, .prose-jt ol { display: grid; gap: .5rem; padding-left: 1.35rem; }
.prose-jt ul { list-style: disc; }
.prose-jt ol { list-style: decimal; }
.prose-jt li::marker { color: var(--brand-blue); }
.prose-jt a { color: var(--brand-blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose-jt a:hover { color: var(--brand-navy); }
.prose-jt strong { color: var(--brand-navy); }
.prose-jt img { border-radius: 16px; }

/* The TCPA consent row. A component rather than utilities, because the four
   utilities this needed (cursor-pointer, h-4, w-4, accent-*) are not in the
   precompiled Tailwind build — writing them in the markup would have looked
   right and done nothing. */
.jt-consent {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-top: 1.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--brand-tint);
  cursor: pointer;
}
.jt-consent input[type="checkbox"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .15rem;
  accent-color: var(--brand-blue);
  cursor: pointer;
}
.jt-consent span {
  font-size: .78rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.jt-consent:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-blue) 18%, transparent);
}

/* ==========================================================================
   Leadership — About (cards) and Contact (compact list)
   ========================================================================== */

.team {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.team__card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: box-shadow .28s ease, transform .28s ease;
}
.team__card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.team__photo {
  flex: none;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-tint);
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Initials, not a stock silhouette — a monogram reads as deliberate where a
   grey avatar reads as a missing image. */
.team__initials {
  flex: none;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-blue), var(--brand-navy));
  color: #fff;
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: .03em;
}

.team__body { min-width: 0; }

.team__name {
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--brand-navy);
}

.team__role {
  margin: .28rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.team__mail {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  font-size: .84rem;
  color: var(--muted-foreground);
  word-break: break-all;
}
.team__mail:hover { color: var(--brand-blue); }
.team__mail i { color: var(--brand-blue); }

/* ---- compact list, for the contact sidebar ---- */
.team-compact { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }

.team-compact li {
  display: grid;
  gap: .12rem;
  padding-left: .85rem;
  border-left: 2px solid var(--brand-tint);
}
.team-compact li:hover { border-left-color: var(--brand-blue); }

.team-compact__name {
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: .95rem;
  color: var(--brand-navy);
  letter-spacing: -.01em;
}
.team-compact__role {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.team-compact__mail {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--muted-foreground);
  word-break: break-all;
}
.team-compact__mail:hover { color: var(--brand-blue); }