/* ==========================================================================
   Corbett Adventures Flying Club — core stylesheet
   Bright editorial theme. Custom design, Bootstrap 5 used for grid + modal only.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* light ground */
  --ink:        #FFFFFF;
  --ink-1:      #FBF8F2;
  --ink-2:      #F4EEE4;
  --ink-3:      #EAE2D5;
  --line:       rgba(25, 40, 33, .11);
  --line-2:     rgba(25, 40, 33, .20);

  /* brand */
  --saffron:    #F58220;
  --saffron-lt: #FFA94D;
  --saffron-dk: #C7620F;
  --green:      #238C42;
  --green-lt:   #2AA04A;

  /* type */
  --paper:      #18251F;
  --muted:      rgba(24, 37, 31, .74);
  --faint:      rgba(24, 37, 31, .58);
  --hint:       rgba(24, 37, 31, .48);

  /* foreground on a filled brand surface */
  --on-saffron: #150A02;
  --on-green:   #04120A;

  /* fonts */
  --display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --body:    "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;

  /* rhythm */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* 148px of air between sections read as gaps rather than rhythm at 1440 */
  --pad-section: clamp(54px, 6.6vw, 108px);
  --gutter: clamp(18px, 4vw, 56px);
  --maxw: 1320px;

  /* line heights — display faces are set tight, so every tight box also
     carries bottom padding; without it descenders (y, g, p) are cut off */
  --lh-display: .92;
  --lh-tight:   1.02;
  --lh-snug:    1.14;
  --descender:  .16em;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --shadow-lift: 0 24px 60px -24px rgba(28, 48, 38, .24);
  --shadow-glow: 0 18px 44px -16px rgba(245, 130, 32, .34);
}

/* ------------------------------------------------------------ 2. Reset/base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep the page width unchanged when a modal locks background scrolling. */
  scrollbar-gutter: stable;
  /* a deep link must not land under the fixed header */
  scroll-padding-top: 96px;
}
:target { scroll-margin-top: 96px; }
/* Lenis drives scrolling when JS is on; native smooth is the no-JS fallback */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(15.5px, .42vw + 14.6px, 17.5px);
  line-height: 1.62;
  font-weight: 380;
  letter-spacing: -.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
/* a tinted placeholder so a not-yet-loaded lazy image is a considered block of
   colour rather than a hole in the page */
img[loading="lazy"] { background: var(--ink-2); }
/* sprite icons carry their own fill/stroke; give un-classed ones a sane size */
svg:where(:not([class])) { width: 1.2em; height: 1.2em; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--saffron); color: #120A02; }

:focus-visible {
  outline: 2px solid var(--saffron-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--saffron); color: #120A02;
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* film grain — sits above the page, never intercepts clicks */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- 3. Layout utils */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--pad-section); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 92px); }
.section--hairline { border-top: 1px solid var(--line); }

.stack-sm > * + * { margin-top: .6rem; }
.stack   > * + * { margin-top: 1.15rem; }
.stack-lg > * + * { margin-top: 2.2rem; }

.text-muted-2 { color: var(--muted); }
.text-faint { color: var(--faint); }
.center { text-align: center; }
.mx-auto-narrow { max-width: 62ch; margin-inline: auto; }


/* ----------------------------------------------- 3b. Grid + utilities
   Hand-rolled replacements for the only ~40 Bootstrap classes this site ever
   used. Dropping the framework removes 230 kB of CSS and 80 kB of JS from
   every page; the class names are kept identical so no markup had to change. */
.row {
  --gx: 1.5rem;
  --gy: 0;
  display: flex; flex-wrap: wrap;
  margin-top: calc(var(--gy) * -1);
  margin-right: calc(var(--gx) * -.5);
  margin-left: calc(var(--gx) * -.5);
}
.row > * {
  flex-shrink: 0;
  width: 100%; max-width: 100%;
  padding-right: calc(var(--gx) * .5);
  padding-left: calc(var(--gx) * .5);
  margin-top: var(--gy);
}

.col-6 { flex: 0 0 auto; width: 50.0%; }

/* gutters */
.g-3 { --gx: 1rem;   --gy: 1rem; }
.g-4 { --gx: 1.5rem; --gy: 1.5rem; }

/* flex + spacing utilities */
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.gap-2 { gap: .5rem !important; }

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

@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50.0%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .justify-content-md-end { justify-content: flex-end !important; }
}
@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25.0%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50.0%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75.0%; }
  .g-lg-4 { --gx: 1.5rem; --gy: 1.5rem; }
  .g-lg-5 { --gx: 3rem;   --gy: 3rem; }
}

/* ------------------------------------------- 3c. Modal shell (no framework)
   Keeps the Bootstrap class contract the markup already used, so the booking
   popup works unchanged against the small vanilla controller in main.js. */
.modal {
  position: fixed; inset: 0; z-index: 1055;
  display: none;
  overflow-x: hidden; overflow-y: auto;
  outline: 0;
}
.modal.is-showing { display: block; }
.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  transform: translateY(26px) scale(.975);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .32s ease;
}
.modal.is-open .modal-dialog { transform: none; opacity: 1; }
@media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
@media (min-width: 576px) { .modal-dialog-centered { min-height: calc(100% - 3.5rem); } }
.modal-dialog-scrollable { height: calc(100% - 1rem); }
@media (min-width: 576px) { .modal-dialog-scrollable { height: calc(100% - 3.5rem); } }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; outline: 0; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(4, 4, 6, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}
.modal-backdrop.is-open { opacity: 1; }
body.modal-open { overflow: hidden; }

/* Fallback for browsers without stable scrollbar gutters. main.js measures the
   disappearing scrollbar before the lock is applied and exposes its width. */
@supports not (scrollbar-gutter: stable) {
  body.modal-open { padding-right: var(--scrollbar-compensation, 0px); }
  body.modal-open .site-head,
  body.modal-open .m-bar { padding-right: var(--scrollbar-compensation, 0px); }
  body.modal-open .float-actions {
    right: calc(clamp(14px, 2vw, 26px) + var(--scrollbar-compensation, 0px));
  }
}

/* ------------------------------------------------------------- 4. Type kit */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--body);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--saffron);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7;
}
.eyebrow--center::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7;
}

.h-display {
  font-size: clamp(2.9rem, 8.4vw, 7.4rem);
  line-height: var(--lh-display);
  letter-spacing: -.042em;
}
.h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: var(--lh-display); }
.h2 { font-size: clamp(1.95rem, 4.1vw, 3.5rem); line-height: .98; }
.h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); letter-spacing: -.024em; line-height: var(--lh-snug); }
.h4 { font-size: clamp(1.05rem, 1.4vw, 1.22rem); letter-spacing: -.018em; line-height: 1.24; }

/* Tightly-led display type clips its own descenders. Every heading gets the
   room back as padding, cancelled by an equal negative margin so the visual
   rhythm above and below the heading is unchanged. */
.h-display, .h1, .h2 {
  padding-bottom: var(--descender);
  margin-bottom: calc(var(--descender) * -1);
}

.lede {
  font-size: clamp(1.04rem, 1.15vw, 1.24rem);
  line-height: 1.58;
  color: var(--muted);
  font-weight: 380;
  text-wrap: pretty;
}

.serif-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--saffron-lt);
}

.hl { color: var(--saffron); }
.hl-green { color: var(--green-lt); }

/* underline that draws in on scroll */
.underline-draw {
  background-image: linear-gradient(var(--saffron), var(--saffron));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: var(--uw, 0%) 6px;
  transition: background-size .9s var(--ease);
  /* clears the descenders of y/g/p so the rule never strikes through them */
  padding-bottom: .18em;
}

/* ------------------------------------------------------------- 5. Buttons */
.btn-x {
  --btn-bg: var(--saffron);
  --btn-fg: #140A02;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 15px 28px;
  border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--body); font-size: .93rem; font-weight: 650;
  letter-spacing: -.005em;
  cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), color .3s ease;
  text-align: center;
  white-space: nowrap;
}
.btn-x::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--saffron-lt);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn-x:hover, .btn-x:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.btn-x:hover::before, .btn-x:focus-visible::before { transform: translateY(0); }
.btn-x:active { transform: translateY(0); }

.btn-x--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border: 1px solid var(--line-2);
}
.btn-x--ghost::before { background: var(--paper); }
.btn-x--ghost:hover, .btn-x--ghost:focus-visible {
  color: var(--ink);
  box-shadow: none;
}
.btn-x--green { --btn-bg: var(--green); --btn-fg: #041006; }
.btn-x--green::before { background: var(--green-lt); }
.btn-x--green:hover { box-shadow: 0 18px 44px -16px rgba(43, 176, 74, .5); }

.btn-x--lg { padding: 18px 36px; font-size: 1rem; }
.btn-x--block { display: flex; width: 100%; }

.btn-x .ico { width: 1.05em; height: 1.05em; flex: none; transition: transform .45s var(--ease); }
.btn-x:hover .ico { transform: translateX(4px); }

/* text link with animated rule */
.link-x {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .93rem;
  color: var(--paper);
  position: relative; padding-bottom: 3px;
}
.link-x::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--saffron);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.link-x:hover::after, .link-x:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link-x .ico { width: .95em; height: .95em; transition: transform .45s var(--ease); }
.link-x:hover .ico { transform: translateX(3px); }

/* inline link inside prose — stays in the text flow, unlike .link-x */
.link-inline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--saffron);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
.link-inline:hover, .link-inline:focus-visible { color: var(--saffron); }

/* --------------------------------------------------------------- 6. Header */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease),
              border-color .5s var(--ease), transform .55s var(--ease);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-head.is-stuck {
  background: #fff;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
}
.site-head.is-hidden { transform: translateY(-102%); }

.head-inner {
  display: flex; align-items: center; gap: 20px;
  height: 78px;
}
.brand { display: flex; align-items: center; flex: none; color: var(--paper); }
.brand__logo {
  width: 142px;
  height: auto;
}

.nav-main {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.nav-main a {
  padding: 9px 15px;
  font-size: .9rem; font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-pill);
  position: relative;
  transition: color .3s ease, background .3s ease;
}
.nav-main a:hover { color: var(--paper); background: rgba(246, 244, 240, .06); }
.nav-main a[aria-current="page"] { color: var(--paper); }
.nav-main a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0; bottom: 1px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--saffron);
}
.head-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* burger */
.burger {
  display: none;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: transparent; cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 50%; translate: -50% 0;
  width: 17px; height: 1.6px; background: var(--paper); border-radius: 2px;
  transition: transform .45s var(--ease), opacity .3s ease;
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 23.5px; }
.burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -5.5px) rotate(-45deg); }

/* mobile drawer */
.nav-drawer {
  position: fixed; inset: 0; z-index: 1029;
  background: var(--ink-1);
  padding: 104px var(--gutter) 40px;
  display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  overflow-y: auto;
}
.nav-drawer.is-open { clip-path: inset(0 0 0 0); }
.nav-drawer a.drawer-link {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 9vw, 2.9rem); letter-spacing: -.035em;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(22px);
}
.nav-drawer.is-open a.drawer-link { animation: drawerIn .6s var(--ease) forwards; }
.nav-drawer a.drawer-link .num {
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  color: var(--saffron); letter-spacing: .1em;
}
@keyframes drawerIn { to { opacity: 1; transform: none; } }
.drawer-foot { margin-top: auto; padding-top: 34px; }

/* ---------------------------------------------------------------- 7. Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(40px, 6vw, 84px);
  padding-top: 120px;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.30) 34%, rgba(8,8,10,.55) 64%, var(--ink) 99%),
    radial-gradient(120% 78% at 22% 82%, rgba(8,8,10,.80) 0%, transparent 62%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title { max-width: 15ch; }
/* The mask that the headline rises out of. It has to clip vertically, so the
   descender room is added as padding *inside* the mask and taken back as a
   negative margin — otherwise the tail of "Fly" and "play" is sliced off. */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.hero__title .line > span { display: block; }
/* the serif italic hangs lower than the grotesque — give it more room again */
.hero__title .line:has(.serif-accent) { padding-bottom: .3em; margin-bottom: -.3em; }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  margin-top: 26px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(40px, 6vw, 84px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint);
  writing-mode: vertical-rl;
}
.hero__scroll .rail {
  width: 1px; height: 60px; background: var(--line-2); position: relative; overflow: hidden;
}
.hero__scroll .rail::after {
  content: ""; position: absolute; inset: 0; background: var(--saffron);
  animation: railRun 2.1s var(--ease-io) infinite;
}
@keyframes railRun { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* stat chips under the hero headline */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(8, 8, 10, .42);
  backdrop-filter: blur(8px);
  font-size: .8rem; font-weight: 500; color: var(--paper);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-lt); flex: none; }
.chip .dot--live { animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 208, 110, .55); }
  50% { box-shadow: 0 0 0 6px rgba(79, 208, 110, 0); }
}

/* page hero (interior pages) */
.page-hero {
  position: relative;
  padding-top: clamp(140px, 16vw, 200px);
  padding-bottom: clamp(48px, 6vw, 88px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img, .page-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,8,10,.82) 0%, rgba(8,8,10,.48) 46%, var(--ink) 100%),
    radial-gradient(100% 84% at 18% 70%, rgba(8,8,10,.62) 0%, transparent 66%);
}
.page-hero__inner { position: relative; z-index: 2; }

.crumb { font-size: .78rem; color: var(--faint); letter-spacing: .04em; margin-bottom: 18px; }
.crumb a:hover { color: var(--saffron); }

/* -------------------------------------------------------------- 8. Marquee */
.marquee {
  --mq-dur: 34s;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--ink-1);
  padding-block: 17px;
  display: flex;
  user-select: none;
  /* without this the strip looks like a sentence chopped mid-word at both ends */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex; flex: none; gap: 44px; padding-right: 44px;
  animation: mqScroll var(--mq-dur) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes mqScroll { to { transform: translateX(-100%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: 44px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  letter-spacing: -.02em;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__item .star { color: var(--saffron); font-size: .8em; }

/* --------------------------------------------------------------- 9. Cards */
.card-x {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .5s var(--ease), transform .55s var(--ease), background .5s var(--ease);
}
/* only fill the column when the card IS the column — otherwise it stretches
   to the height of its siblings and leaves a large empty box */
[class*="col-"] > .card-x:only-child { height: 100%; }
.card-x:hover { border-color: var(--line-2); transform: translateY(-4px); }
.card-x__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.card-x__media img, .card-x__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s ease;
}
.card-x:hover .card-x__media img, .card-x:hover .card-x__media video { transform: scale(1.06); }
.card-x__body { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-x__foot { margin-top: auto; padding-top: 16px; }

/* big pillar card (Fly / Ground / Shooting) */
.pillar {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(360px, 42vw, 520px);
  display: flex; align-items: flex-end;
  border: 1px solid var(--line);
  isolation: isolate;
}
.pillar__media { position: absolute; inset: 0; z-index: -2; background: var(--ink-2); }
.pillar__media img, .pillar__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease);
}
.pillar:hover .pillar__media img, .pillar:hover .pillar__media video { transform: scale(1.07); }
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,10,.14) 0%, rgba(8,8,10,.44) 48%, rgba(8,8,10,.80) 100%);
}
.pillar__body { padding: clamp(22px, 2.4vw, 32px); width: 100%; position: relative; }
/* a scrim tied to the text block itself — the card-wide gradient is still light
   where the copy actually starts, especially on a narrow screen */
.pillar__body::before {
  content: ""; position: absolute; inset: -52px 0 -2px; z-index: -1;
  background: linear-gradient(transparent, rgba(8, 8, 10, .80) 30%, rgba(8, 8, 10, .95) 64%);
}
.pillar__count {
  position: absolute; top: 20px; right: 22px; z-index: 1;
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(8, 8, 10, .5);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  padding: 7px 13px; border-radius: var(--r-pill);
}

/* ---------------------------------------------------- 10. Package (flying)
   The three flight cards. Every card is a six-row subgrid sharing the parent's
   row tracks, so name, price, spec strip, altitude bar, feature list and CTA
   all sit on the same baseline across the row however long the copy runs. */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(14px, 1.6vw, 22px);
  row-gap: 20px;
}
@media (min-width: 768px)  { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }

.pkg {
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 32px);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .55s var(--ease),
              background .5s var(--ease), box-shadow .55s var(--ease);
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .pkg-grid { grid-template-rows: auto auto auto auto 1fr auto; }
    .pkg { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: inherit; }
  }
}

.pkg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(95% 62% at 50% 0%, rgba(245, 130, 32, .16), transparent 72%);
  opacity: 0; transition: opacity .6s ease;
}
.pkg > * { position: relative; }
.pkg:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 130, 32, .38);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .9);
}
.pkg:hover::before { opacity: 1; }

.pkg--featured { border-color: rgba(245, 130, 32, .45); background: var(--ink-2); }
.pkg--featured::before { opacity: .8; }
/* a hairline of brand colour across the top edge marks the recommended tier */
.pkg--featured::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--saffron), transparent);
}

/* --- row 1: identity ------------------------------------------------- */
.pkg__head { display: flex; flex-direction: column; gap: 6px; }
.pkg__badges {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 24px;
}
.pkg__tier {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
/* in the flow, not absolutely placed — it can no longer collide with the tier
   label the way the old floating pill did on a narrow card */
.pkg__tag {
  font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-saffron); background: var(--saffron);
  padding: 5px 10px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.pkg__name {
  font-size: clamp(1.65rem, 2.5vw, 2.1rem);
  line-height: var(--lh-tight);
  letter-spacing: -.035em;
}
.pkg__tagline { font-size: .92rem; color: var(--muted); margin: 0; }

/* --- row 2: price ---------------------------------------------------- */
.pkg__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em .5em;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pkg__amount {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.3rem, 3.4vw, 2.9rem);
  letter-spacing: -.042em;
  line-height: 1.06;
  font-variant-numeric: tabular-nums;
}
.pkg__unit { font-size: .84rem; font-weight: 500; color: var(--faint); letter-spacing: -.005em; }

/* --- row 3: the two numbers that actually separate the tiers --------- */
.pkg__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 0;
}
.pkg__stats > div { min-width: 0; }
.pkg__stats dt {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hint); margin: 0 0 4px;
}
.pkg__stats dd {
  margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: 1.12rem; letter-spacing: -.028em; line-height: 1.2;
  color: var(--paper);
}

/* --- row 4: altitude bar --------------------------------------------- */
.alt-viz { margin: 0; }
.alt-viz__rail {
  height: 6px; border-radius: var(--r-pill);
  background: var(--ink-3);
  overflow: hidden; position: relative;
}
.alt-viz__fill {
  display: block;
  height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--saffron-dk), var(--saffron), var(--saffron-lt));
  transition: width 1.4s var(--ease);
}
.alt-viz__labels {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--hint); margin-top: 8px; letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- row 5: what you get --------------------------------------------- */
.pkg__specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; align-content: start; }
.pkg__specs li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: var(--muted); }
.pkg__specs .tick { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--green-lt); }

/* --- row 6: CTA ------------------------------------------------------- */
.pkg__foot { display: grid; align-content: end; }

/* ------------------------------------------------ 11. Activity price table */
.act-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.act-grid--single { grid-template-columns: 1fr; }

.act {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.act::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--saffron);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease);
}
.act:hover { border-color: var(--line-2); background: var(--ink-2); transform: translateX(3px); }
.act:hover::before { transform: scaleY(1); transform-origin: top; }

.act__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  background: var(--ink-3);
  display: grid; place-items: center;
  color: var(--saffron);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.act:hover .act__icon { background: rgba(245, 130, 32, .14); }
.act__icon svg { width: 24px; height: 24px; }

.act__text { flex: 1; min-width: 0; }
.act__name { display: block; font-weight: 600; font-size: .98rem; letter-spacing: -.012em; }
.act__note { display: block; font-size: .78rem; color: var(--faint); line-height: 1.35; }
.act__price {
  font-family: var(--display); font-weight: 800;
  font-size: 1.16rem; letter-spacing: -.03em; line-height: 1.2;
  flex: none; color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* a full-width band for the group-booking prompt — it used to sit at the foot
   of the shooting column and left a large hole under the ground column */
.board-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-1);
}
.board-note__text { flex: 1 1 340px; min-width: 0; }
.board-note__text p { margin: 6px 0 0; font-size: .94rem; color: var(--muted); max-width: 62ch; }
.board-note .btn-x { flex: 0 0 auto; }

/* --------------------------------------------------------- 12. Reels strip */
.reels {
  display: flex; gap: 16px;
  overflow-x: auto;
  padding-bottom: 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.reels::-webkit-scrollbar { height: 6px; }
.reels::-webkit-scrollbar-track { background: var(--ink-1); border-radius: 99px; }
.reels::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }

.reel {
  position: relative; flex: none;
  width: clamp(200px, 25vw, 262px);
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .55s var(--ease), border-color .45s var(--ease);
}
.reel:hover, .reel:focus-visible { transform: translateY(-5px) scale(1.012); border-color: rgba(245, 130, 32, .45); }
.reel:hover .reel__play { background: var(--saffron); border-color: var(--saffron); color: var(--on-saffron); }
.reel__play { transition: background .35s ease, border-color .35s ease, color .35s ease; }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel__label {
  position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2;
  font-size: .8rem; font-weight: 600; letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.reel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 46%, rgba(8, 8, 10, .82) 100%);
  pointer-events: none;
}
.reel__play {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(8, 8, 10, .55);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--paper);
}
.reel__play svg { width: 13px; height: 13px; }

/* reels laid out in a grid rather than the horizontal scroller.
   A 9:16 tile in a half-width column would render 1,100px tall, so the tile is
   capped and centred in its column instead of stretching to fill it. */
.reel--grid { width: 100%; max-width: 420px; margin-inline: auto; }

/* ------------------------------------------------------------ lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1080;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(4, 4, 6, .93);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__stage {
  position: relative;
  max-width: min(430px, 100%);
  width: 100%;
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line-2);
  background: #000;
  transform: scale(.94);
  transition: transform .5s var(--ease);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__stage video { width: 100%; height: auto; max-height: 84svh; display: block; }
.lightbox__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(8, 8, 10, .72); border: 1px solid var(--line-2);
  color: var(--paper); display: grid; place-items: center; cursor: pointer;
  transition: background .3s ease, transform .4s var(--ease);
}
.lightbox__close:hover { background: var(--saffron); color: #140A02; transform: rotate(90deg); }
.lightbox__close svg { width: 15px; height: 15px; }
/* sits at the top so it never fights the native video controls */
.lightbox__cap {
  position: absolute; left: 0; right: 62px; top: 0; z-index: 1;
  margin: 0; padding: 16px 18px 30px;
  background: linear-gradient(rgba(4, 4, 6, .82), transparent);
  font-size: .88rem; font-weight: 600;
}

/* ------------------------------------------------------------- 13. Numbers */
.stat-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat__num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  letter-spacing: -.045em;
  /* background-clip:text paints only the box — a line-height of 1 crops the
     gradient off the bottom of the glyphs */
  line-height: 1.08;
  padding-bottom: .04em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: .84rem; color: var(--muted); margin-top: 8px; letter-spacing: -.005em; text-wrap: balance; }

/* ------------------------------------------------------------ 14. Split/FAQ */
.split { display: grid; gap: clamp(30px, 5vw, 76px); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 992px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-l { grid-template-columns: 1.15fr 1fr; } }

.media-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 10; }
.media-frame--reel { aspect-ratio: 9 / 16; max-width: 340px; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 24px 0;
  text-align: left; color: var(--paper);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.32rem); letter-spacing: -.024em; line-height: 1.28;
  transition: color .3s ease;
}
.acc__btn:hover { color: var(--saffron); }
.acc__sign {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; position: relative;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .45s var(--ease), opacity .3s ease;
}
.acc__sign::before { width: 11px; height: 1.5px; }
.acc__sign::after  { width: 1.5px; height: 11px; }
.acc__btn[aria-expanded="true"] .acc__sign { background: var(--saffron); border-color: var(--saffron); color: #140A02; transform: rotate(180deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: scaleY(0); opacity: 0; }
.acc__panel { overflow: hidden; height: 0; }
.acc__panel > div { padding: 0 0 26px; color: var(--muted); max-width: 68ch; }

/* --------------------------------------------------------- 15. Testimonial */
.quote-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px);
  height: 100%;
  display: flex; flex-direction: column; gap: 18px;
}
.quote-card__stars { color: var(--saffron); display: flex; gap: 3px; }
.quote-card__stars svg { width: 15px; height: 15px; }
.quote-card blockquote {
  margin: 0; font-size: 1.04rem; line-height: 1.6; color: var(--paper);
  letter-spacing: -.012em;
}
.quote-card cite { font-style: normal; font-size: .84rem; color: var(--faint); margin-top: auto; }

/* --------------------------------------------------------------- 16. Forms */
.field { display: block; }
.field label, .lbl {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .055em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); }
.input, .textarea, .select {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--paper);
  padding: 14px 16px;
  font-family: var(--body); font-size: 1rem;
  transition: border-color .35s ease, background .35s ease;
}
.input::placeholder, .textarea::placeholder { color: rgba(246, 244, 240, .3); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--saffron); background: var(--ink-3);
}
.textarea { min-height: 128px; resize: vertical; }
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}
.input.is-invalid, .textarea.is-invalid, .select.is-invalid {
  border-color: #C7372F;
  box-shadow: 0 0 0 3px rgba(199, 55, 47, .10);
}
.field-err {
  color: #C7372F;
  font-size: .82rem;
  font-weight: 500;
  margin: 6px 0 0;
}
/* Contact form submit states: disabled idle -> blue submitting -> green submitted */
#cfSubmit:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
#cfSubmit.is-submitting {
  --btn-bg: #2563EB;
  --btn-fg: #FFFFFF;
  opacity: 1;
  cursor: wait;
  transform: none;
}
#cfSubmit.is-submitting::before { background: #1D4ED8; }
#cfSubmit.is-submitted {
  --btn-bg: var(--green);
  --btn-fg: #FFFFFF;
  opacity: 1;
  cursor: default;
  transform: none;
}
#cfSubmit.is-submitted::before { background: var(--green-lt); }
/* choice chips (radio pills) */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.choice span {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 20px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: .93rem; font-weight: 500;
  color: var(--muted);
  transition: all .35s var(--ease);
  pointer-events: none;
}
.choice input:hover + span { border-color: var(--paper); color: var(--paper); }
.choice input:checked + span {
  background: var(--saffron); border-color: var(--saffron);
  color: #140A02; font-weight: 650;
}
.choice input:focus-visible + span { outline: 2px solid var(--saffron-lt); outline-offset: 3px; }

/* stepper for people count */
.stepper {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: 6px;
}
.stepper button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--ink-3); color: var(--paper);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background .3s ease, transform .3s var(--ease);
}
.stepper button:hover { background: var(--saffron); color: #140A02; }
.stepper button:active { transform: scale(.92); }
.stepper output {
  min-width: 62px; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em;
}

/* --------------------------------------------------------- 17. Booking modal */
.bx-modal .modal-dialog { max-width: 560px; }
.bx-modal .modal-content {
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  color: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.bx-modal .modal-backdrop, .modal-backdrop.show { opacity: .82; }

.bx-head {
  position: relative;
  padding: 22px clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
.bx-head__mark { width: 44px; height: 44px; flex: none; object-fit: contain; }
.bx-head__t { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; }
.bx-head__s { font-size: .76rem; color: var(--faint); }
.bx-close {
  margin-left: auto; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink-3); border: 1px solid var(--line);
  color: var(--paper); display: grid; place-items: center; cursor: pointer;
  transition: background .3s ease, transform .4s var(--ease);
}
.bx-close:hover { background: var(--saffron); color: #140A02; transform: rotate(90deg); }
.bx-close svg { width: 14px; height: 14px; }

.bx-progress { height: 3px; background: var(--ink-3); position: relative; }
.bx-progress__bar {
  display: block;
  height: 100%; width: 20%;
  background: var(--saffron);
  transition: width .6s var(--ease);
}

.bx-body { padding: clamp(24px, 3vw, 34px); position: relative; min-height: 320px; }

.bx-step { display: none; }
.bx-step.is-active { display: block; }
.bx-step__q {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.03em; line-height: 1.12;
  margin-bottom: 6px;
}
.bx-step__hint { font-size: .88rem; color: var(--faint); margin-bottom: 22px; }

.bx-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
}
.bx-back {
  background: none; border: 0; color: var(--faint); cursor: pointer;
  font-family: var(--body); font-size: .88rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .45em;
  transition: color .3s ease;
}
.bx-back:hover { color: var(--paper); }
.bx-back svg { width: .9em; height: .9em; }
.bx-next { margin-left: auto; }
.bx-next:disabled { opacity: .34; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
/* the final step has its own actions — drop the wizard footer entirely */
.bx-body:has(.bx-step[data-step="done"].is-active) .bx-foot { display: none; }
.bx-count { font-size: .76rem; color: var(--faint); letter-spacing: .07em; }

/* review + done */
.bx-review { display: grid; gap: 9px; margin: 20px 0 4px; }
.bx-review__row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 15px; border-radius: var(--r-sm);
  background: var(--ink-2); border: 1px solid var(--line);
  font-size: .88rem;
}
.bx-review__row dt { color: var(--faint); margin: 0; }
.bx-review__row dd { margin: 0; font-weight: 600; text-align: right; }

.bx-done { text-align: center; padding: 12px 0; }
.bx-done__ring {
  width: 78px; height: 78px; margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(43, 176, 74, .12);
  border: 1px solid rgba(43, 176, 74, .4);
  display: grid; place-items: center; color: var(--green-lt);
}
.bx-done__ring svg { width: 32px; height: 32px; }

/* ------------------------------------------------------- 18. Location/map */
.map-frame {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-2);
  aspect-ratio: 16 / 11;
  filter: grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg);
  transition: filter .6s ease;
}
.map-frame:hover { filter: grayscale(.35) invert(.92) contrast(.9) hue-rotate(180deg); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Click-to-load map. The Google embed pulls ~700 kB and a pile of third-party
   requests, so it is only fetched once the visitor asks for it. */
.map-frame--lazy { cursor: pointer; position: relative; filter: none; }
.map-frame--lazy:hover { filter: none; }
.map-frame__stand {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px; text-align: center;
  background: var(--ink-2);
}
.map-frame__pin {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(245, 130, 32, .14);
  border: 1px solid rgba(245, 130, 32, .4);
  color: var(--saffron);
  transition: transform .5s var(--ease);
}
.map-frame__pin svg { width: 24px; height: 24px; }
.map-frame--lazy:hover .map-frame__pin { transform: translateY(-3px) scale(1.06); }
.map-frame__label { font-weight: 600; font-size: .96rem; letter-spacing: -.012em; }
.map-frame__hint { font-size: .8rem; color: var(--faint); }

.info-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.info-row:last-child { border-bottom: 0; }
.info-row__ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: var(--ink-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--saffron);
}
.info-row__ico svg { width: 19px; height: 19px; }
.info-row__k { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.info-row__v { font-weight: 500; letter-spacing: -.012em; margin-top: 3px; }
.info-row__v a:hover { color: var(--saffron); }

/* -------------------------------------------------------------- 19. Footer */
.site-foot {
  background: var(--ink-1);
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 6vw, 88px);
  position: relative;
}
.foot-cta {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(30px, 4.4vw, 62px);
  background: var(--ink-2);
  margin-bottom: clamp(46px, 5vw, 74px);
}
.foot-grid {
  display: grid; gap: 38px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  padding-bottom: 44px;
}
/* h3 not h4: these follow the <h2> in the footer CTA, and jumping a level
   breaks the document outline for anyone navigating by headings */
.foot-col h3 {
  font-family: var(--body); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 16px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--muted); font-size: .93rem; transition: color .3s ease, padding-left .35s var(--ease); }
.foot-col a:hover { color: var(--paper); padding-left: 5px; }

.foot-brand { max-width: 320px; }
.foot-brand p { text-wrap: pretty; }
.foot-brand__logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
}

.socials { display: flex; gap: 9px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--muted);
  transition: all .4s var(--ease);
}
.socials a:hover { background: var(--saffron); border-color: var(--saffron); color: #140A02; transform: translateY(-3px); }
.socials svg { width: 16px; height: 16px; }

.foot-bar {
  border-top: 1px solid var(--line);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  font-size: .82rem; color: var(--faint);
}
.foot-bar .sep { margin-left: auto; }
.foot-bar a:hover { color: var(--paper); }
.foot-externo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--faint);
  font-size: .82rem;
  opacity: .6;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.foot-externo:hover {
  opacity: 1;
  color: var(--paper);
}
.foot-externo__logo {
  height: 14px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-0.5px);
}


/* --------------------------------------------------- 20. Floating actions */
.float-actions {
  position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px);
  z-index: 1020;
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(24, 37, 31, .14);
  border-radius: 19px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 46px -20px rgba(12, 28, 20, .42);
  opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none;
  transition: all .55s var(--ease);
}
.float-actions.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab {
  width: 68px; height: 68px; border-radius: 0;
  display: grid; place-items: center;
  border: 0;
  background: #fff; color: #0B1510;
  box-shadow: none;
  transition: background .35s ease, color .35s ease;
}
.fab + .fab { border-top: 1px solid rgba(24, 37, 31, .12); }
.fab svg { width: 27px; height: 27px; transition: transform .35s var(--ease); }
.fab:hover svg, .fab:focus-visible svg { transform: scale(1.12); }
.fab--wa { background: #138A4B; color: #fff; }
.fab--wa:hover, .fab--wa:focus-visible { background: #0E793F; }
.fab--call { background: #fff; color: #07100C; }
.fab--call:hover, .fab--call:focus-visible { background: #F4EFE6; }

/* -------------------------------------------------------- 21. Reveal (GSAP) */
[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal-x] { opacity: 0; }
.no-js [data-reveal], .no-js [data-reveal-x] { opacity: 1; transform: none; }

/* ------------------------------------------ 22. Sticky mobile action bar */
/* Replaces the floating circles on phones: they covered content at random and
   the primary "Book" CTA was hidden below 1100px. */
.m-bar { display: none; }

@media (max-width: 1099px) {
  .float-actions { display: none !important; }

  .m-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 13, .88);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-top: 1px solid var(--line-2);
    transform: translateY(130%);
    transition: transform .55s var(--ease);
  }
  .m-bar.is-on { transform: none; }

  .m-bar__cta { flex: 1 1 auto; padding: 15px 18px; font-size: .95rem; }
  .m-bar__ico {
    width: 52px; height: 52px; flex: none;
    border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--line-2);
    transition: transform .35s var(--ease);
  }
  .m-bar__ico:active { transform: scale(.93); }
  .m-bar__ico svg { width: 22px; height: 22px; }
  .m-bar__ico--wa { background: #25D366; border-color: #25D366; color: #06240F; }
  .m-bar__ico--call { background: var(--ink-2); color: var(--paper); }

  /* keep the bar from covering the end of the page */
  .site-foot { padding-bottom: 88px; }
}

/* ------------------------------------------------------------ 23. Responsive */
@media (max-width: 1099px) {
  .nav-main { display: none; }
  .burger { display: block; margin-left: auto; }
  .head-cta .btn-x { display: none; }
  .head-cta { margin-left: 0; }
}

@media (max-width: 991px) {
  /* the decorative vertical clip does not deserve 600px of a phone screen */
  .media-frame--reel { max-width: 300px; }
}

@media (max-width: 767px) {
  .head-inner { height: 66px; }
  .brand__logo { width: 118px; }

  /* --- type: a touch tighter so headlines stop running to four lines --- */
  .h2 { font-size: clamp(1.85rem, 7.4vw, 2.4rem); letter-spacing: -.036em; }
  .h3 { font-size: 1.28rem; }
  .lede { font-size: 1rem; line-height: 1.55; }
  .eyebrow { font-size: .68rem; letter-spacing: .16em; }
  .eyebrow::before { width: 18px; }

  /* --- hero --- */
  .hero { min-height: 92svh; padding-top: 96px; }
  .hero__title .line:has(.serif-accent) { padding-bottom: .34em; margin-bottom: -.34em; }
  /* on a narrow screen the copy sits mid-frame over bright sky — deepen the
     lower half of the scrim so the headline and eyebrow stay legible */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(8,8,10,.74) 0%, rgba(8,8,10,.20) 24%,
                              rgba(8,8,10,.58) 52%, rgba(8,8,10,.90) 82%, var(--ink) 99%),
      radial-gradient(150% 64% at 32% 90%, rgba(8,8,10,.80) 0%, transparent 70%);
  }
  .hero__scroll { display: none; }
  .hero__meta { gap: 8px; margin-top: 20px; }
  .chip { padding: 6px 12px; font-size: .76rem; }
  .hero__cta { margin-top: 26px; }

  /* --- pillars: readable over photography, and not a full screen each --- */
  .pillar { min-height: 404px; }
  .pillar__body { padding: 20px 18px 22px; }
  .pillar__body .h3 { margin-top: 8px !important; }
  .pillar__body p { font-size: .9rem !important; }
  .pillar__body::before {
    inset: -58px 0 -2px;
    background: linear-gradient(transparent, rgba(8, 8, 10, .88) 28%, rgba(8, 8, 10, .97) 60%);
  }
  /* keep the top of the photograph clean — the text scrim does the work below */
  .pillar::after {
    background: linear-gradient(180deg, rgba(8,8,10,.08) 0%, rgba(8,8,10,.24) 42%, rgba(8,8,10,.52) 100%);
  }
  .pillar__count { top: 14px; right: 14px; padding: 6px 11px; font-size: .68rem; }

  /* --- packages --- */
  .pkg { padding: 22px 20px; gap: 16px; }
  .pkg__amount { font-size: 2.35rem; }
  .pkg__name { font-size: 1.6rem; }
  .pkg__specs { gap: 9px; }
  .pkg__specs li { font-size: .88rem; }
  .pkg__stats dd { font-size: 1.04rem; }
  .board-note { padding: 20px 18px; }

  /* --- price rows --- */
  .act { padding: 14px 15px; gap: 13px; }
  .act__icon { width: 40px; height: 40px; border-radius: 11px; }
  .act__icon svg { width: 21px; height: 21px; }
  .act__name { font-size: .93rem; }
  .act__price { font-size: 1.08rem; }

  /* --- reels run edge to edge, so a peeking card reads as swipeable --- */
  .reels {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-left: var(--gutter);
    gap: 12px;
  }
  .reel { width: min(62vw, 236px); border-radius: 16px; }

  /* --- misc --- */
  .media-frame--reel { max-width: 260px; }
  .stat-row { gap: 14px; grid-template-columns: repeat(2, 1fr); }
  .stat__num { font-size: 2.5rem; }
  .stat__label { font-size: .8rem; }
  .acc__btn { padding: 19px 0; font-size: 1.02rem; gap: 16px; }
  .foot-cta { padding: 26px 20px; }
  .board-note .btn-x { width: 100%; }
  .foot-bar .sep { margin-left: 0; width: 100%; }
  .bx-body { min-height: 300px; }
  .stepper button { width: 48px; height: 48px; }
  .info-row { padding: 16px 0; gap: 13px; }
  .info-row__ico { width: 38px; height: 38px; }
  .map-frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 575px) {
  /* paired CTAs stack to equal full width instead of two ragged pill widths */
  .d-flex.flex-wrap.gap-2 > .btn-x,
  .d-flex.flex-wrap.gap-2 > .link-x { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn-x { width: 100%; }
  .choice span { padding: 12px 16px; font-size: .88rem; }
  .h-display { font-size: clamp(2.6rem, 13.5vw, 3.6rem); }
  .stat-row { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------ 24. Motion / print */
@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], [data-reveal-x] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .hero__media video { display: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-head, .float-actions, .hero__media, .marquee { display: none !important; }
}

/* ------------------------------------------------ 25. Word-mask headings
   Built by initWordReveal(); the mask has to allow descenders through, hence
   the padding/negative-margin pair used everywhere else on this page. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.word > span { display: inline-block; will-change: transform; }
.no-js .word > span { transform: none !important; }

/* the booking form scrolls inside the dialog on a short screen */
.bx-modal .modal-content { max-height: 100%; }
.bx-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

/* ------------------------------------------------------ 26. Light theme */
/* Photography stays cinematic; every interface and content surface uses the
   bright brand palette. Keeping these decisions together makes it much harder
   for an interior page or a rarely opened modal to fall back to the old theme. */
html { color-scheme: light; }

body {
  background: var(--ink);
}
body::after { opacity: .016; mix-blend-mode: multiply; }
img[loading="lazy"] { background: var(--ink-2); }

/* Soft alternating bands make long pages easy to scan without dark blocks. */
main > .section:nth-of-type(even) { background: var(--ink-1); }

.site-head.is-stuck {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: 0 12px 38px -28px rgba(24, 37, 31, .45);
}
.site-head.is-stuck .brand { color: var(--paper); }
.site-head.is-stuck .nav-main a:hover { background: var(--ink-2); }

body.drawer-open .site-head .brand { color: var(--paper); }
body.drawer-open .site-head .burger { border-color: var(--line-2); }
body.drawer-open .site-head .burger span { background: var(--paper); }
.nav-drawer { background: #fff; }

/* Hero images remain vivid and carry white type, while the lighter localized
   scrims reveal substantially more of the sky and landscape. */
.hero,
.page-hero,
.pillar,
.reel,
.lightbox {
  --ink: #111A16;
  --ink-1: #17201C;
  --ink-2: #1D2923;
  --ink-3: #26342D;
  --paper: #FFFFFF;
  --muted: rgba(255, 255, 255, .82);
  --faint: rgba(255, 255, 255, .68);
  --hint: rgba(255, 255, 255, .54);
  --line: rgba(255, 255, 255, .15);
  --line-2: rgba(255, 255, 255, .28);
  color: var(--paper);
}
.hero__scrim {
  background:
    linear-gradient(180deg, rgba(7, 15, 11, .42) 0%, rgba(7, 15, 11, .06) 34%,
                            rgba(7, 15, 11, .20) 60%, rgba(7, 15, 11, .68) 100%),
    radial-gradient(96% 88% at 18% 78%, rgba(7, 15, 11, .58) 0%, transparent 68%);
}
.page-hero__scrim {
  background:
    linear-gradient(180deg, rgba(7, 15, 11, .55) 0%, rgba(7, 15, 11, .22) 46%,
                            rgba(7, 15, 11, .72) 100%),
    radial-gradient(96% 84% at 16% 72%, rgba(7, 15, 11, .46) 0%, transparent 68%);
}
.hero__inner { padding-bottom: clamp(4px, 1vw, 14px); }
.hero__title { text-shadow: 0 3px 34px rgba(0, 0, 0, .22); }
.chip { background: rgba(10, 18, 14, .32); border-color: rgba(255, 255, 255, .28); }

/* Orange remains the brand signal, with a deeper shade for small text on
   white so labels stay crisp and comfortably legible. */
.eyebrow { color: #C65300; }
.hero .eyebrow,
.page-hero .eyebrow,
.pillar .eyebrow { color: var(--saffron-lt); }

/* Airy surfaces and restrained shadows replace the former black panels. */
.card-x,
.pkg,
.act,
.board-note,
.quote-card,
.foot-cta,
.bx-modal .modal-content {
  box-shadow: 0 18px 48px -34px rgba(24, 37, 31, .42);
}
.card-x:hover,
.pkg:hover,
.quote-card:hover {
  box-shadow: 0 24px 58px -30px rgba(24, 37, 31, .30);
}
.pkg--featured {
  background:
    linear-gradient(180deg, rgba(245, 130, 32, .085), transparent 46%),
    #FFFDF9;
  border-color: rgba(245, 130, 32, .48);
  box-shadow: 0 24px 64px -34px rgba(245, 130, 32, .38);
}
.act:hover { background: #fff; }
.alt-viz__rail { background: #E8DFD2; }
.stat__num {
  background-image: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--paper);
}

.input, .textarea, .select { background: #fff; }
.input::placeholder, .textarea::placeholder { color: rgba(24, 37, 31, .38); }
.input:focus, .textarea:focus, .select:focus { background: #fff; }

.map-frame { filter: grayscale(.25) contrast(.96); }
.map-frame:hover { filter: none; }
.map-frame__stand {
  background: var(--ink-2);
}

.site-foot { background: var(--ink-1); }
.foot-cta {
  background: #fff;
}


.fab { box-shadow: none; }

@media (max-width: 1099px) {
  .m-bar {
    background: rgba(255, 255, 255, .92);
    border-top-color: var(--line);
    box-shadow: 0 -12px 36px -28px rgba(24, 37, 31, .50);
  }
}

@media (max-width: 767px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(7,15,11,.50) 0%, rgba(7,15,11,.08) 24%,
                              rgba(7,15,11,.32) 52%, rgba(7,15,11,.76) 100%),
      radial-gradient(145% 70% at 28% 88%, rgba(7,15,11,.62) 0%, transparent 72%);
  }
}

/* Interior heroes should present their whole message within one viewport. */
.page-hero {
  padding-top: clamp(118px, 11vw, 156px);
  padding-bottom: clamp(42px, 4.8vw, 66px);
}
.page-hero .h1 {
  max-width: 20ch !important;
  margin-top: 14px !important;
  font-size: clamp(2.35rem, 4.6vw, 4.15rem);
}
.page-hero .lede { margin-top: 16px !important; }

/* Contact has two equally important jobs: orient the visitor and make contact.
   On wide screens they sit side-by-side instead of forming one very tall stack. */
@media (min-width: 992px) {
  .page-hero--contact .page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(48px, 7vw, 108px);
    align-items: end;
  }
  .page-hero--contact .crumb { grid-column: 1 / -1; }
  .page-hero--contact .eyebrow { grid-column: 1; grid-row: 2; }
  .page-hero--contact .h1 {
    grid-column: 1;
    grid-row: 3 / 5;
    max-width: 13ch !important;
  }
  .page-hero--contact .lede {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    max-width: 44ch !important;
  }
  .page-hero--contact .page-hero__actions {
    grid-column: 2;
    grid-row: 4;
    margin-top: 22px !important;
    align-items: stretch;
  }
  .page-hero--contact .page-hero__actions .btn-x {
    flex: 0 1 auto;
    min-width: 238px;
    padding-inline: 26px;
  }
}

@media (max-height: 760px) and (min-width: 768px) {
  .page-hero {
    padding-top: 104px;
    padding-bottom: 38px;
  }
  .page-hero .crumb { margin-bottom: 12px; }
  .page-hero .h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
}

/* A structured footer gives the brand enough reading width while keeping the
   navigation and visit details compact and aligned. */
.foot-grid {
  grid-template-columns: minmax(290px, 1.45fr) minmax(130px, .62fr)
                         minmax(130px, .62fr) minmax(270px, 1.12fr);
  gap: clamp(34px, 4.5vw, 72px);
  align-items: start;
}
.foot-brand { max-width: 390px; }
.foot-brand p { max-width: 39ch; line-height: 1.65; }
.foot-brand .link-inline { white-space: nowrap; }
.foot-col h3 { color: rgba(24, 37, 31, .62); margin-bottom: 18px; }
.foot-col ul { gap: 12px; }
.foot-col a { line-height: 1.45; }
.socials { gap: 10px; margin-top: 22px; }
.socials a { width: 42px; height: 42px; background: #fff; }

@media (max-width: 991px) {
  .foot-grid { grid-template-columns: 1.35fr 1fr; }
}
@media (max-width: 575px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-brand { max-width: none; }
}