/* =====================================================================
   Meridian Air (Light) - "Cirrus" design system
   Bright, airy, minimal. Generous whitespace. Inter throughout.
   ===================================================================== */

:root {
  /* Palette */
  --bg:      #EDEFF2;   /* pale cool off-white */
  --bg-2:    #DEE2E7;   /* soft panels */
  --ink:     #1B2430;   /* dark slate, text + primary buttons */
  --muted:   #6B7480;
  --accent:  #B89042;   /* warm gold, restrained micro-accent only */

  --line:    rgba(27, 36, 48, 0.10);
  --line-2:  rgba(27, 36, 48, 0.06);
  --ink-soft: rgba(27, 36, 48, 0.72);
  --on-dark: rgba(255, 255, 255, 0.92);

  /* Dark band theme (cinematic accent sections) */
  --bg-dark:     #0F151D;
  --bg-dark-2:   #161E28;
  --panel-dark:  #1A232E;
  --ink-on-dark: rgba(255, 255, 255, 0.94);
  --muted-on-dark: rgba(255, 255, 255, 0.60);
  --line-on-dark: rgba(255, 255, 255, 0.14);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;

  /* Whitespace scale (generous) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;
  --space-8: 12rem;

  --maxw: 1200px;
  --maxw-narrow: 820px;
  --radius: 14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------- Reset ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Note: no CSS scroll-behavior:smooth. Lenis owns smooth scrolling; a native
   smooth-behavior here would fight Lenis and cause slow-then-jump scrolling. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, never hidden: hidden breaks position: sticky (services preview). */
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }

/* Serif display for headlines (Inter stays for UI, body, eyebrows, buttons) */
.hero__headline,
.section-title,
.statement__title,
.contact__title,
.fleet-panel__name,
.band__line {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-optical-sizing: auto;
}
.hero__headline { font-weight: 400; letter-spacing: -0.01em; }

::selection { background: rgba(184, 144, 66, 0.22); }

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

/* --------------------------- Primitives ---------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section {
  padding-block: var(--space-7);
}
@media (max-width: 768px) {
  .section { padding-block: var(--space-6); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.section-title {
  font-size: clamp(1.9rem, 5vw, 4.1rem);
  text-wrap: balance;
}
.section-intro {
  margin-top: var(--space-3);
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 400;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease),
              color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.4s var(--ease);
  will-change: transform;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #11181f; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }

/* Label slide-up swap on hover (text is wrapped by setupBtnLabels in JS) */
.btn__label { position: relative; display: block; overflow: hidden; }
.btn__text { display: block; transition: transform 0.5s var(--ease); }
.btn__text--dup { position: absolute; left: 0; top: 100%; width: 100%; }
.btn:hover .btn__text { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .btn__text { transition: none; }
  .btn:hover .btn__text { transform: none; }
}

/* On-dark button variants (used over the hero) */
.btn-on-dark.btn-primary { background: #fff; color: var(--ink); }
.btn-on-dark.btn-primary:hover { background: #f3f4f6; }
.btn-on-dark.btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-on-dark.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Reveal animation base (JS adds .is-in) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------- Header ------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: 0;
  transition: width 0.55s var(--ease), top 0.55s var(--ease), padding 0.55s var(--ease),
              border-radius 0.55s var(--ease), background 0.55s var(--ease),
              backdrop-filter 0.55s var(--ease), box-shadow 0.55s var(--ease),
              border-color 0.55s var(--ease);
}
.site-header.is-scrolled {
  /* detached liquid-glass pill: inset from the sides, gapped from the top */
  top: 14px;
  width: min(1080px, calc(100% - 2 * var(--space-3)));
  padding: 0.65rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(240, 242, 245, 0.42), rgba(237, 239, 242, 0.26));
  backdrop-filter: saturate(190%) blur(26px);
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              0 18px 44px -24px rgba(27, 36, 48, 0.45);
}

.wordmark {
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.95rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.wordmark__text { display: inline-flex; gap: 0.4em; }
.wordmark .accent { color: var(--accent); }
.wordmark__mark { width: 23px; height: 23px; flex: none; }
.wordmark__mark .ring { stroke: currentColor; }      /* adapts: white over hero, slate when scrolled */
.wordmark__mark .equator { stroke: var(--accent); }  /* gold meridian line */

/* Header over the dark hero: light text until scrolled */
.site-header:not(.is-scrolled) .wordmark { color: #fff; }
.site-header:not(.is-scrolled) .main-nav a { color: rgba(255,255,255,0.86); }
.site-header:not(.is-scrolled) .header-cta.btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }

.main-nav { display: flex; gap: var(--space-4); align-items: center; }
.main-nav a {
  font-size: 0.92rem;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.3s var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(1); }
.site-header:not(.is-scrolled) .main-nav a:hover { color: #fff; }

.header-right { display: flex; align-items: center; gap: var(--space-3); }
.header-cta { padding: 0.6rem 1.1rem; font-size: 0.88rem; }

/* Nav toggle (mobile) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0.5rem 0.2rem;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
}
.nav-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.nav-toggle__icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.site-header:not(.is-scrolled) .nav-toggle { color: #fff; }
html.menu-open .site-header:not(.is-scrolled) .nav-toggle { color: var(--ink); }
html.menu-open .site-header:not(.is-scrolled) .wordmark { color: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 860px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header { padding-inline: var(--space-3); }
}

/* ------------------------------ Hero ------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #0e1620;
}
.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__poster {
  z-index: 0;
  transition: opacity 0.8s var(--ease);
}
.hero__video { z-index: 1; }
.hero.video-ready .hero__poster { opacity: 0; }

/* Scrim for legibility across the pull-back */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(8,14,20,0.42) 0%, rgba(8,14,20,0.05) 30%, rgba(8,14,20,0.12) 62%, rgba(8,14,20,0.58) 100%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* top padding reserves clearance below the fixed header so the headline
     can never sit under the glass bar; bottom padding lifts it off the edge */
  padding-top: clamp(6.5rem, 13vh, 8.5rem);
  padding-bottom: clamp(3.5rem, 10vh, 7rem);
  color: #fff;
}
.hero__content { max-width: 56rem; }
.hero__headline {
  font-size: clamp(2.9rem, 7.4vw, 6.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 13ch;
  text-wrap: balance;
}
.hero__subtitle {
  margin-top: var(--space-3);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--on-dark);
  max-width: 34ch;
  text-wrap: balance;
}
.hero__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.hero__hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.hero__hint .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  animation: hintPulse 2.4s var(--ease) infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__hint .line { animation: none; }
}

/* =========================== Sections ============================== */

.section-head { max-width: var(--maxw-narrow); }
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
/* Centered heads: the whole head, title included, sits on the page's center line. */
.section-head.center { max-width: none; display: flex; flex-direction: column; align-items: center; }
.section-head.center .section-title { margin-inline: auto; }
.section-head.center .section-intro { margin-inline: auto; }
.section-head.center .eyebrow { letter-spacing: 0.2em; }

/* 2. Statement */
.statement { text-align: center; }
.statement .container { max-width: var(--maxw-narrow); }
.statement__title {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  margin-inline: auto;
  max-width: 20ch;
}
.statement__body {
  margin: var(--space-3) auto 0;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.6vw, 1.34rem);
  line-height: 1.65;
}

/* 3. Services: numbered editorial index with floating hover preview */
.services__index {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease);
}
.service-row.is-active { padding-left: clamp(0.6rem, 1.4vw, 1.2rem); }
.service-row__num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.service-row.is-active .service-row__num { color: var(--accent); }
.service-row__thumb { display: none; }
.service-row__main { display: grid; gap: 0.4rem; }
.service-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  line-height: 1.12;
}
.service-row__text {
  color: var(--ink-soft);
  font-size: 0.97rem;
  max-width: 62ch;
}
.service-row__arrow {
  width: 22px;
  height: 22px;
  color: var(--muted);
  flex: none;
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
.service-row.is-active .service-row__arrow { transform: translate(4px, -4px); color: var(--ink); }
/* Rows are still links: keep a light hover affordance without fighting
   the scroll-selected row */
.service-row:hover .service-row__arrow { color: var(--ink); }
@media (max-width: 860px) {
  /* Big banner image per service instead of a tiny square: image spans the row on top,
     number + title + text sit below it. */
  .service-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "thumb thumb" "num main";
    row-gap: 1rem;
    column-gap: 1rem;
    align-items: start;
  }
  .service-row__thumb {
    display: block;
    grid-area: thumb;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px;
  }
  .service-row__num { grid-area: num; }
  .service-row__main { grid-area: main; }
  .service-row__arrow { display: none; }
}

/* Sticky side preview panel: crossfades as rows are hovered or focused */
.services__layout {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
.services__layout .services__index { margin-top: 0; }
.services__preview {
  position: sticky;
  top: clamp(90px, 12vh, 130px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: none;
  background: var(--bg-2);
}
.services__preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.services__preview-img.is-active { opacity: 1; transform: scale(1); }
@media (min-width: 861px) {
  .services__preview { display: block; }
}
@media (max-width: 860px) {
  .services__layout { grid-template-columns: 1fr; }
}

/* 4. Experience */
.experience__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.experience__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.experience__points {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.exp-point {
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
  position: relative;
}
.exp-point::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 1.4rem;
  background: var(--accent);
}
.exp-point__title { font-size: 1.08rem; font-weight: 600; }
.exp-point__text { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.98rem; }

/* 5. Why Meridian */
.why__grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) clamp(2.5rem, 6vw, 5rem);
}
.why-item { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.why-item__num {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.why-item__title { font-size: 1.3rem; margin-top: 0.5rem; }
.why-item__text { margin-top: 0.6rem; color: var(--ink-soft); }

/* 6. Fleet */
.fleet__media {
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fleet__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.fleet__cats {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.fleet-cat {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.fleet-cat__name { font-weight: 600; font-size: 1.02rem; }
.fleet-cat__note { margin-top: 0.35rem; color: var(--muted); font-size: 0.92rem; }

/* 7. Gallery */
.gallery__grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 210px);
  grid-auto-flow: dense;
  gap: var(--space-2);
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0;
}
/* editorial mosaic: a few feature tiles among smaller ones */
.gallery-item--big  { grid-column: span 2; grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 14, 20, 0.5), rgba(8, 14, 20, 0) 45%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item figcaption {
  position: absolute;
  left: var(--space-2); bottom: var(--space-2);
  z-index: 2;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.gallery-item:hover figcaption { opacity: 1; transform: none; }

/* 8. Testimonials: one large editorial quote, rotating */
.testi-stage {
  position: relative;
  margin: var(--space-5) auto 0;
  max-width: 920px;
  display: grid;
  text-align: center;
}
.testi-stage__mark {
  grid-row: 1;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 0.4;
  display: block;
  margin-bottom: var(--space-3);
}
.testi-slide {
  grid-row: 2;
  grid-column: 1;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  pointer-events: none;
}
.testi-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.testi-slide__quote {
  margin: 0 auto;
  max-width: 36ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  line-height: 1.45;
  color: var(--ink-on-dark);
}
.testi-slide figcaption {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.testi-slide__name { font-weight: 600; color: #fff; font-size: 0.95rem; letter-spacing: 0.02em; }
.testi-slide__role {
  color: var(--muted-on-dark);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.testi-dashes {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}
.testi-dash { background: none; border: none; padding: 0.6rem 0.2rem; cursor: pointer; }
.testi-dash span {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--line-on-dark);
  transition: background 0.4s var(--ease);
}
.testi-dash.is-active span, .testi-dash:hover span { background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .testi-slide { transition: none; }
}

/* 9. Contact */
.contact__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.contact__media {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  color: #fff;
}
.contact__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 14, 20, 0.78), rgba(8, 14, 20, 0.18));
  z-index: 1;
}
.contact__media-inner { position: relative; z-index: 2; }
.contact__media .eyebrow { color: rgba(255, 255, 255, 0.78); }
.contact__title { font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 16ch; }
.contact__body { margin-top: var(--space-2); color: rgba(255, 255, 255, 0.86); max-width: 38ch; }
.contact__contacts { margin-top: var(--space-3); display: grid; gap: 0.35rem; }
.contact__contacts a { color: #fff; font-size: 1.05rem; }
.contact__contacts a:hover { color: var(--accent); }

.contact__panel { background: #fff; padding: clamp(2rem, 4vw, var(--space-5)); }
.contact__form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.field__control { position: relative; }
.field input, .field textarea {
  width: 100%;
  padding: 0.65rem 0 0.7rem;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(107, 116, 128, 0.55); }
.field__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.field__control:focus-within .field__bar { transform: scaleX(1); }
.field textarea { resize: vertical; min-height: 96px; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.contact__form .btn { justify-self: start; margin-top: 0.4rem; }
.form-note {
  font-size: 0.92rem;
  color: var(--accent);
  margin: 0;
  min-height: 1.2em;
}

/* 10. Footer: full-height end card */
.site-footer {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--space-6) var(--space-4);
  min-height: 88svh;
  display: flex;
  overflow: hidden;
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.footer__giant {
  margin-block: auto;
  padding-block: var(--space-5);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 11vw, 10rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
  justify-content: center;
  text-align: center;
}
.footer__giant-word { display: inline-flex; }
.footer__giant-word--accent .footer__ch { color: var(--accent); }
.footer__ch {
  display: inline-block;
  transition: transform 0.45s var(--ease);
}
.footer__ch:hover { transform: translateY(-0.08em); }
@media (prefers-reduced-motion: reduce) {
  .footer__ch { transition: none; }
  .footer__ch:hover { transform: none; }
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__brand .wordmark { color: #fff; font-size: 1.05rem; }
.footer__tagline { margin-top: var(--space-2); max-width: 32ch; color: rgba(255, 255, 255, 0.6); }
.footer__col h4 {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.footer__col a, .footer__col p { display: block; color: rgba(255, 255, 255, 0.78); margin: 0 0 0.5rem; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.footer__disclaimer { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); max-width: 70ch; line-height: 1.6; }
.footer__meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.footer__meta .footer-credit-mark { height: 20px; width: auto; vertical-align: middle; margin-right: 8px; opacity: 0.9; display: inline-block; }
.footer__meta .soak-mark { display: inline-block; width: 20px; height: 20px; flex: none;
  background-color: var(--accent);
  -webkit-mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
          mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
  opacity: .9; transition: opacity .2s ease; }
.footer__meta:hover .soak-mark { opacity: 1; }
.footer__meta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------- Responsive ---------------------------- */
@media (max-width: 980px) {
  .experience__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .experience__media { position: static; }
  .experience__media { order: -1; }
  .why__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__media { min-height: 320px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .why__grid { grid-template-columns: 1fr; }
  .contact__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-3); }
  .gallery__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Premium v2: dark accent bands, serif moments, stats, parallax band,
   horizontal Fleet, refined motion.
   ===================================================================== */

/* Dark band theme */
.section--dark { background: var(--bg-dark); color: var(--ink-on-dark); }
.section--dark .section-intro,
.section--dark .exp-point__text,
.section--dark .fleet-cat__note { color: var(--muted-on-dark); }
.section--dark .eyebrow { color: var(--muted-on-dark); }
.section--dark .why-item,
.section--dark .exp-point,
.section--dark .fleet-cat { border-color: var(--line-on-dark); }

/* Statement: large airy serif moment */
.statement { padding-block: var(--space-8); }
.statement__title { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.08; }
.statement__body { font-style: normal; }
.statement__rule {
  width: 38px; height: 1px;
  background: var(--accent);
  margin: var(--space-3) auto var(--space-4);
}

/* Stats: fold into the statement as bare editorial numerals */
.statement__stats {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  letter-spacing: -0.01em;
  line-height: 1;
}
.stat__label {
  margin: 0.8rem auto 0;
  max-width: 22ch;
  color: var(--muted);
  font-size: 0.94rem;
}

/* Experience: sticky cinematic media beside scrolling points */
.experience__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  position: sticky;
  top: clamp(90px, 12vh, 130px);
}
.experience__media img { border-radius: 0; }

/* Full-bleed parallax band */
.band {
  position: relative;
  min-height: clamp(360px, 62vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.band__media {
  position: absolute;
  inset: -14% 0;
  z-index: 0;
  will-change: transform;
}
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8,14,20,0.5), rgba(8,14,20,0.55));
}
.band__inner { position: relative; z-index: 2; padding: var(--space-4); }
.band__line {
  font-size: clamp(2rem, 5vw, 3.9rem);
  line-height: 1.12;
  max-width: 20ch;
  margin-inline: auto;
  color: #fff;
}
.band__cta { margin-top: var(--space-3); }

/* Fleet: pinned horizontal scroll */
.fleet__head { max-width: var(--maxw-narrow); }
/* full-viewport pinned stage: title, track, and captions all fit on screen */
#fleet.section { padding-block: 0; }
.fleet-stage {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: clamp(72px, 10vh, 104px) 0 var(--space-3);
}
.fleet-stage .fleet__head { flex: 0 0 auto; margin: 0; }
/* Cap the fleet title so the enlarged panels still fit the pinned stage */
.fleet-stage .section-title { font-size: clamp(2rem, 4vw, 3.2rem); }
.fleet-stage .fleet__head .section-intro { margin-top: var(--space-2); }
.fleet-hscroll {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.fleet-hscroll.is-static { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fleet-track {
  display: flex;
  gap: var(--space-3);
  will-change: transform;
}
.fleet-panel {
  position: relative;
  --panelH: min(52vh, 560px);
  flex: 0 0 auto;
  height: var(--panelH);
  width: calc(var(--panelH) * 1.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-dark-2);
}
.fleet-panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.fleet-panel:hover img { transform: scale(1.05); }
.fleet-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,20,0.82) 6%, rgba(8,14,20,0) 52%);
}
.fleet-panel__index {
  position: absolute; top: var(--space-3); left: var(--space-3);
  z-index: 2;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.fleet-panel__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-3);
  color: #fff;
}
.fleet-panel__name { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.fleet-panel__note { margin-top: 0.4rem; color: rgba(255,255,255,0.74); font-size: 0.96rem; }
.fleet-progress {
  position: relative;
  height: 2px;
  width: min(420px, 70%);
  margin: var(--space-4) auto 0;
  background: var(--line-on-dark);
}
.fleet-progress__bar {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 0;
  background: var(--accent);
}
.fleet-hint {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--muted-on-dark);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Testimonials rotator lives with the base styles above */

/* Wider breakout for the contact card and the gallery */
#contact .container { max-width: 1480px; }
#gallery .container { max-width: 1320px; }

/* Responsive additions */
@media (max-width: 760px) {
  .statement__stats { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* Gallery mosaic responsive: 4 cols default, 3 then 2 as it narrows */
@media (max-width: 979px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 34vw, 200px); }
}

/* =====================================================================
   Flagship v3: preloader, custom cursor, split reveals, mask reveals,
   destination marquee, grain, section indices, mobile menu.
   ===================================================================== */

/* Preloader curtain */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.preloader.is-done { display: none; }
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.preloader__wordmark {
  font-weight: 600;
  letter-spacing: 0.24em;
  font-size: 1.02rem;
  color: var(--ink);
}
.preloader__wordmark .accent { color: var(--accent); }
.preloader__line {
  display: block;
  width: 180px;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
}
.preloader__tag {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}

/* Split-line reveals (SplitText masks own the clipping) */
.split-line { will-change: transform; }

/* Image curtain reveals: initial clip is applied by JS so non-JS and
   reduced-motion paths never hide media. */
.mask-reveal { will-change: clip-path; }

/* Section index numeral inside the eyebrow */
.eyebrow__index {
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  position: relative;
  padding-right: 0.9rem;
  margin-right: 0.1rem;
}
.eyebrow__index::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 0.9em;
  transform: translateY(-50%);
  background: var(--line);
}
.section--dark .eyebrow__index::after { background: var(--line-on-dark); }

/* Destination marquee */
.marquee {
  overflow: hidden;
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 46s linear infinite;
}
/* Never pauses on hover: the cities keep moving. */
.marquee__seq { display: flex; align-items: center; flex: none; }
.marquee__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.15;
  white-space: nowrap;
  padding-inline: clamp(1.4rem, 3vw, 2.6rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(27, 36, 48, 0.5);
}
.marquee__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Film grain on the dark cinematic moments only */
.section--grain, .band--grain { position: relative; }
.section--grain::before, .band--grain::before, .site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.section--grain > .container { position: relative; z-index: 2; }
.band--grain .band__inner { z-index: 2; }

/* Fleet spec chips */
.fleet-panel__specs {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fleet-panel__chip {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Custom cursor (fine pointers only; JS gates creation) */
.cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cursor.is-visible { opacity: 1; }
.cursor.is-muted { opacity: 0; }
.cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  transition: opacity 0.25s var(--ease);
}
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
              background 0.35s var(--ease), border-color 0.35s var(--ease),
              mix-blend-mode 0s;
}
.cursor__label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.cursor.is-hover .cursor__ring {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.12);
}
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-label .cursor__ring {
  width: 66px;
  height: 66px;
  background: var(--accent);
  border-color: transparent;
  mix-blend-mode: normal;
}
.cursor.is-label .cursor__label { opacity: 1; }
html.has-cursor body, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select,
html.has-cursor label { cursor: text; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-4) var(--space-5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}
.mobile-menu__nav { display: grid; gap: 0.3rem; }
.mobile-menu__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  line-height: 1.15;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.3rem;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.mobile-menu.is-open .mobile-menu__link { transform: none; opacity: 1; }
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu__num {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.mobile-menu__meta { display: grid; gap: 0.4rem; }
.mobile-menu__meta a { color: var(--ink-soft); font-size: 1.05rem; }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu__link { transition: none; }
  .mobile-menu__link { transform: none; opacity: 1; }
}

/* Gallery lightbox */
.gallery-item { cursor: pointer; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s var(--ease);
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 21, 0.93);
}
.lightbox__stage {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(1200px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transform: scale(0.97);
  transition: transform 0.45s var(--ease);
}
.lightbox.is-open .lightbox__stage { transform: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lightbox__count { color: var(--accent); }
.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
}
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn--prev {
  left: clamp(0.8rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
.lightbox__btn--next {
  right: clamp(0.8rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__btn--close {
  top: clamp(0.8rem, 3vw, 2rem);
  right: clamp(0.8rem, 3vw, 2.5rem);
}
html.lightbox-open { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__stage { max-width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__stage { transition: none; }
}

/* Mobile: compact footer. Brand + tagline with Contact stacked right under it (no big gap),
   Explore nav on the right. Cuts overall height. */
@media (max-width: 619px) {
  .footer__top {
    grid-template-columns: 1.3fr 1fr;
    grid-template-areas: "brand explore" "contact explore";
    gap: 1rem 1.5rem;
    align-items: start;
    align-content: start;
  }
  .footer__brand { grid-area: brand; }
  .footer__top .footer__col:nth-of-type(2) { grid-area: explore; }
  .footer__top .footer__col:nth-of-type(3) { grid-area: contact; }
}

/* The Experience: unpin the media on mobile so text does not scroll behind it.
   (The sticky rule above sits after the earlier mobile static rule, so re-assert it here.) */
@media (max-width: 980px) {
  .experience__media { position: static; top: auto; }
}

/* Mobile: pull the footer contact block up closer to the giant tagline (less empty gap). */
@media (max-width: 768px) {
  .footer__giant { margin-block: 0.5rem; padding-block: var(--space-3); }
  .footer__top { padding-bottom: var(--space-3); }
}


/* =====================================================================
   Design audit pass (2026-09-30): Premise, services preview, experience,
   The Standard, testimonials, glass CTA, footer. Dashes removed, line
   rules enforced. No em or en dashes in this file.
   ===================================================================== */

p, blockquote { text-wrap: pretty; }
.service-row__text, .exp-point__text, .why-item__text, .testi-slide__quote,
.band__line, .contact__title, .contact__body, .statement__body, .stat__label,
.section-intro, .footer__tagline { text-wrap: balance; }

/* Gold label, matching "Air" in the nav wordmark. */
.eyebrow--gold { color: var(--accent); }

/* Depth primitives */
.dots { position: absolute; pointer-events: none; color: var(--ink); }
.globe-mark { position: absolute; pointer-events: none; color: var(--ink); }

/* Glass panel, the same material as the scrolled nav bar. */
.glass-panel {
  background: linear-gradient(to bottom, rgba(248, 249, 251, 0.62), rgba(237, 239, 242, 0.38));
  backdrop-filter: saturate(190%) blur(26px);
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 30px 60px -34px rgba(27, 36, 48, 0.4);
  border-radius: var(--radius-lg);
}

/* ---------- 1. The Premise ---------- */
.statement { position: relative; overflow: clip; text-align: left; padding-block: var(--space-7); }
.statement .container { max-width: var(--maxw); position: relative; z-index: 1; }
.premise__depth { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.premise__depth .dots--tl { top: 0; left: 0; width: min(38vw, 520px); height: auto; opacity: 0.16; }
.premise__depth .dots--br { bottom: 0; right: 0; width: min(38vw, 520px); height: auto; opacity: 0.16; }
.premise__depth .globe-mark { width: min(44vw, 560px); right: -8vw; top: 50%; transform: translateY(-38%); opacity: 0.07; }
.premise__head { text-align: center; }
.premise__head .eyebrow { justify-content: center; }
.statement__title { font-size: clamp(2.1rem, 5.2vw, 4.4rem); max-width: none; margin-inline: auto; text-wrap: balance; }
.premise__grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.statement__body { margin: 0; max-width: 46ch; font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: var(--ink-soft); text-align: left; }
.statement__stats {
  margin: 0; padding: 0.4rem clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.statement__stats .stat {
  display: grid; grid-template-columns: 10.5rem 1fr; align-items: center; gap: 1.2rem;
  text-align: left; padding: 1.25rem 0; border-top: 1px solid var(--line);
}
.statement__stats .stat:first-child { border-top: 0; }
.statement__stats .stat__value { font-size: clamp(2.2rem, 3.6vw, 3rem); }
.statement__stats .stat__label { margin: 0; max-width: 24ch; font-size: 0.95rem; }
@media (max-width: 900px) {
  .premise__grid { grid-template-columns: 1fr; }
  .statement__body { margin-inline: auto; text-align: center; }
}
@media (max-width: 520px) {
  .statement__stats .stat { grid-template-columns: 1fr; gap: 0.4rem; text-align: center; }
  .statement__stats .stat__label { margin-inline: auto; }
}

/* Premise to services boundary: a meridian hairline with the globe node. */
#services { position: relative; }
.meridian-rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.meridian-rule__node {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
}
.meridian-rule__node svg { width: 24px; height: 24px; }

/* ---------- 2. Six ways: equal columns, a tall sticky preview ---------- */
@media (min-width: 861px) { .services__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); } }
.service-row { transition: padding-left 0.7s var(--ease), background 0.7s var(--ease); }
.service-row__title { transition: color 0.6s var(--ease); }
.service-row:not(.is-active) .service-row__title { color: rgba(27, 36, 48, 0.62); }
.services__preview {
  aspect-ratio: auto;
  height: min(calc(100vh - 2 * clamp(90px, 12vh, 130px) + 60px), 760px);
  min-height: 520px;
  box-shadow: 0 40px 80px -40px rgba(27, 36, 48, 0.45);
}
.services__preview-img { transform: scale(1.06); transition: opacity 0.9s var(--ease), transform 1.6s var(--ease); }
.services__preview-img.is-active { transform: scale(1); }
.services__preview::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 14, 20, 0.62), rgba(8, 14, 20, 0) 38%);
}
.services__preview-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  color: #fff;
}
.services__preview-cap.is-swap { animation: capIn 0.7s var(--ease); }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.services__preview-idx { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; color: var(--accent); }
.services__preview-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .services__preview-cap.is-swap { animation: none; }
  .services__preview-img { transition: opacity 0.2s linear; transform: none; }
}

/* ---------- 3. Experience: steady frame, photo drifts inside ---------- */
@media (min-width: 981px) { .experience__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: stretch; } }
.experience__media { position: relative; top: auto; min-height: 520px; }
.experience__media .experience__img {
  position: absolute; left: 0; right: 0; top: -7%;
  width: 100%; height: 114%; aspect-ratio: auto; object-fit: cover; border-radius: 0;
}
#experience .section-title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
@media (min-width: 981px) { #experience .section-title { white-space: nowrap; } }
.exp-point {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.1rem; align-items: start;
  padding: 1.2rem 0 0; border-left: 0; border-top: 1px solid var(--line-on-dark);
}
.exp-point::before { display: none; }
.exp-point__icon {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(184, 144, 66, 0.5); color: var(--accent);
}
.exp-point__icon .line-icon { width: 20px; height: 20px; }
.exp-point__title { font-size: 1.05rem; letter-spacing: 0.01em; }
@media (max-width: 980px) {
  .experience__media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- 4. The Standard: one instrument panel, four centered columns ---------- */
.why__panel {
  position: relative; margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, 0 40px 80px -48px rgba(27, 36, 48, 0.45);
  overflow: hidden;
}
.why__panel .dots--why { top: 0; right: 0; width: min(34vw, 420px); height: auto; opacity: 0.12; }
.why__panel::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.55;
}
.why__panel .why__grid { margin-top: 0; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.why-item {
  border-top: 0; padding: clamp(2rem, 3.4vw, 3rem) clamp(1.2rem, 2vw, 1.8rem);
  text-align: center; display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.why-item + .why-item::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line);
}
.why-item__icon {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); border: 1px solid rgba(184, 144, 66, 0.45);
  box-shadow: 0 0 0 6px rgba(184, 144, 66, 0.06);
  margin-bottom: 1.2rem;
}
.why-item__icon .line-icon { width: 24px; height: 24px; }
.why-item__title { font-size: 1.14rem; margin-top: 0.45rem; }
.why-item__text { font-size: 0.95rem; max-width: 26ch; }
@media (max-width: 980px) {
  .why__panel .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why-item:nth-child(3)::before { display: none; }
  .why-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .why__panel .why__grid { grid-template-columns: 1fr; }
  .why-item + .why-item::before { display: none; }
  .why-item + .why-item { border-top: 1px solid var(--line); }
}

/* ---------- 6. Testimonials: auto-advance with a filling progress dash ---------- */
.testi-dash span { position: relative; overflow: hidden; }
.testi-dash.is-active span { background: var(--line-on-dark); }
.testi-dash.is-active span::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform-origin: left; animation: dashFill var(--testi-delay, 6500ms) linear forwards;
}
@keyframes dashFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .testi-dash.is-active span::after { animation: none; }
}

/* ---------- 7. CTA: glass card over a field of micro-graphics ---------- */
.contact-section { position: relative; overflow: clip; }
.contact__sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: var(--ink); }
/* Soft gold and sky glows sit behind the form so the frosted glass has
   something to diffuse, the way the nav bar frosts the page under it. */
.contact__sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(28% 40% at 72% 42%, rgba(184, 144, 66, 0.22), transparent 70%),
    radial-gradient(30% 45% at 90% 72%, rgba(120, 160, 205, 0.22), transparent 70%);
}
.contact__sky .flight-arcs { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.contact__sky .dots--ct { position: absolute; top: 0; right: 0; width: min(46vw, 640px); height: auto; opacity: 0.2; }
.contact__sky .dots--cb { position: absolute; bottom: 0; left: 0; width: min(46vw, 640px); height: auto; opacity: 0.16; }
.contact-section .container { position: relative; z-index: 1; }
/* The grid must not be a backdrop root (will-change / transform / opacity),
   or the glass panel cannot see and blur the graphics behind the card. */
#contact .contact__grid.reveal { will-change: auto; }
.contact__grid {
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 50px 100px -50px rgba(27, 36, 48, 0.5);
}
.contact__panel {
  background: linear-gradient(to bottom, rgba(248, 249, 251, 0.55), rgba(237, 239, 242, 0.3));
  backdrop-filter: saturate(190%) blur(26px);
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 1px 0 0 rgba(255, 255, 255, 0.5);
}
.contact__panel .field input, .contact__panel .field textarea { border-bottom-color: rgba(27, 36, 48, 0.16); }

/* ---------- Footer: less air above the wordmark, one concept line ---------- */
.site-footer { min-height: 0; padding-block: var(--space-4); }
.footer__giant { margin-block: 0; padding-block: var(--space-3) var(--space-5); }
.footer__bottom { justify-content: center; align-items: center; }
.footer__meta { font-size: clamp(0.7rem, 0.62rem + 0.3vw, 0.82rem); }
@media (max-width: 640px) {
  .footer__bottom { align-items: center; }
  .footer__meta { gap: 6px; }
}

/* Mobile line rules: keep short headings whole and avoid lone words. */
.gallery-item figcaption { white-space: nowrap; }
@media (max-width: 980px) {
  #experience .section-title { font-size: min(6.3vw, 2.6rem); white-space: nowrap; }
}
@media (max-width: 600px) {
  .band__inner { padding-inline: var(--space-3); }
  .band__line { font-size: 1.75rem; }
  .fleet-stage .section-title { font-size: 1.85rem; }
  .statement__body { font-size: 1.04rem; }
}

/* =====================================================================
   Round 2 (Micah's review): services scroll, Experience depth, cursor on
   light sections, centered fleet head, footer bottom row.
   ===================================================================== */

/* ---------- Six Ways: each image pinned and fully in view while its row passes ---------- */
.services__col > .section-head { margin-bottom: var(--space-5); }
.services__col .services__index { margin-top: 0; }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  /* Tall rows give every service its own stretch of scroll. Rows switch at the
     viewport's center line; the head above row 1 is the lead-in during which
     the pinned image is already fully visible, and the padding under row 6
     keeps the last image pinned for a comparable stretch. */
  .services__index { padding-bottom: clamp(200px, 40vh, 440px); }
  .service-row { min-height: clamp(320px, 46vh, 460px); align-content: center; }
  .services__preview {
    top: clamp(96px, 12vh, 124px);
    height: min(calc(100vh - clamp(96px, 12vh, 124px) - 40px), 760px);
  }
}

/* ---------- Experience: graticule and flight-path depth on the navy ---------- */
#experience { position: relative; overflow: clip; }
#experience > .container { position: relative; z-index: 1; }
.experience__depth { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: rgba(255, 255, 255, 0.16); }
.experience__depth .route-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.experience__depth .dots--exp { position: absolute; top: 0; right: 0; width: min(40vw, 560px); height: auto; color: #fff; opacity: 0.09; }

/* ---------- Cursor: blend the whole cursor so it inverts on light sections ---------- */
/* The fixed .cursor is its own stacking context, so blending the children only
   blended them against a transparent layer (white on the pale page = invisible).
   Blending the root inverts against the page: dark on light, light on dark. */
.cursor { mix-blend-mode: difference; }
.cursor__dot, .cursor__ring { mix-blend-mode: normal; }
.cursor.is-label { mix-blend-mode: normal; }

/* ---------- 04 The Fleet: head centered on the page ---------- */
.fleet-stage .fleet__head {
  max-width: none; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.fleet-stage .fleet__head .eyebrow { justify-content: center; }
.fleet-stage .fleet__head .section-title { margin-inline: auto; }
.fleet-stage .fleet__head .section-intro { margin-inline: auto; max-width: 62ch; }

/* ---------- Footer bottom row: fiction line left, credit + mark right ---------- */
.footer__bottom { justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 1rem 2rem; }
.footer__fiction { margin: 0; white-space: nowrap; color: rgba(255, 255, 255, 0.5); font-size: clamp(0.72rem, 0.64rem + 0.3vw, 0.82rem); }
.footer__meta { gap: 8px; }
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.7rem; }
  .footer__fiction, .footer__meta { font-size: 0.76rem; }
  .footer__fiction { white-space: normal; }
}

/* ---------- Cities band: dot-matrix fields fading in from both edges ---------- */
.marquee { position: relative; }
.marquee::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(27, 36, 48, 0.2) 1px, transparent 1.4px);
  background-size: 18px 18px; background-position: 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
}
.marquee__track { position: relative; z-index: 1; }
/* The services title now shares the left column: keep it whole on one line. */
@media (min-width: 861px) {
  #services .section-title { font-size: clamp(2rem, 3.3vw, 3.3rem); white-space: nowrap; }
}
/* The centered fleet head must clear the floating nav at every viewport height:
   the stage starts below the nav and the panels give up height on short screens. */
.fleet-stage { justify-content: safe center; padding-top: clamp(100px, 12vh, 112px); }
.fleet-panel { --panelH: clamp(240px, min(52vh, calc(100svh - 440px)), 560px); }
@media (max-width: 600px) {
  .fleet-stage { padding-top: 88px; }
  .fleet-panel { --panelH: clamp(220px, calc(100svh - 500px), 420px); }
}