*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Zino Aviation Brand Guidelines v1.0 */
  --navy: #222222;
  --navy-2: #141414;
  --gold: #B59B48;
  --gold-light: #D9C48A;
  --gold-dark: #8A7434;
  --ink: #222222;
  --ink-soft: #7A7A7A;
  --paper: #FFFFFF;
  --cream: #F6F4EF;
  --line: #E7E2D6;
  --sans: 'Poppins', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  font-weight: 300;
  line-height: 1.7;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* wider content area: narrower side gutters so the page uses more of the
   screen. Applies to every page, home included. */
.container { max-width: 1360px; margin: 0 auto; padding: 0 34px; }
@media (max-width: 720px){ .container { padding: 0 22px; } }
.container.narrow { max-width: 800px; }
.center { text-align: center; }

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.01em; color: var(--navy); }

/* ─── LOGO (real PNG artwork, crossfades white/grey with nav state) ─── */
.nav-logo { position: relative; display: inline-block; width: 208px; height: 40px; flex-shrink: 0; }
.logo-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: left center;
  transition: opacity 0.4s ease;
}
/* the bar is dark at every scroll position now, so the white mark stays */
.logo-img--white { opacity: 1; }
.logo-img--grey { opacity: 0; }

/* ─── PRELOADER ─── */
#preloader {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--navy);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  animation: preHide 0.6s ease 3.6s forwards;
}
.pre-logo-img {
  width: min(300px, 68vw); height: auto;
  opacity: 0;
  animation: preFadeIn 0.7s ease 0.3s forwards, preFadeOut 0.5s ease 2.8s forwards;
}
.pre-sub {
  font-size: 10px; letter-spacing: 0.6em; text-transform: uppercase;
  color: var(--gold); font-weight: 400; opacity: 0;
  animation: preFadeIn 0.5s ease 0.6s forwards, preFadeOut 0.4s ease 2.9s forwards;
}
.pre-bar {
  width: 200px; height: 2px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden; margin-top: 1rem;
}
.pre-bar-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  animation: preBarGrow 2s ease-out 0.5s forwards;
}
@keyframes preBarGrow { to { width: 100%; } }
@keyframes preFadeIn { to { opacity: 1; } }
@keyframes preFadeOut { to { opacity: 0; } }
@keyframes preHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 26px 0;
  background: transparent;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
/* Dara: no white bar — on scroll it becomes dark glass, the same
   treatment as the charter booking form. */
.nav.scrolled {
  /* dense enough that white labels stay legible over LIGHT sections too —
     at 0.55 the bar just read as a grey wash on the cream panels */
  background: rgba(8,8,10,0.78);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 34px rgba(0,0,0,0.34);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; gap: 24px;
}

.nav-links { display: flex; align-items: center; margin-left: 8px; flex: 1; }

/* ─── NAV PILL (sliding hover cursor, mix-blend-difference text) ─── */
/* Dara: the menu carries no background of its own — plain white labels,
   the live one in gold. The bar behind it does the glass on scroll. */
.nav-pill {
  position: relative; display: flex; align-items: center;
  background: none; border: none; border-radius: 0;
  padding: 0; box-shadow: none;
}
/* the sliding dark cursor belonged to the old white pill */
.nav-pill-cursor { display: none; }
.nav-pill-item {
  position: relative; z-index: 1;
  letter-spacing: 0.02em; font-weight: 500;
  color: #fff; mix-blend-mode: normal;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--sans); white-space: nowrap;
  padding: 7px 11px; font-size: 12px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
  transition: color .3s ease, opacity .3s ease;
}
.nav-pill-item:hover { color: #fff; }
.nav-pill .nav-pill-item.active { color: var(--gold-light); mix-blend-mode: normal; font-weight: 600; }

/* Vertical letter roll on hover. Each glyph is a clipped window holding
   two stacked copies of itself; on hover the pair slides DOWN by one line
   so the lower copy takes the upper's place, staggered left to right. */
.nav-swap { display: inline-flex; }
.nav-swap-ch {
  position: relative; display: inline-block;
  overflow: hidden; vertical-align: bottom;
  /* the window is exactly one line tall, so only one copy is ever seen */
  height: 1.15em; line-height: 1.15em;
}
.nav-swap-ch[data-space] { width: 0.34em; }
.nav-swap-roll {
  display: block;
  /* starts lifted by one line: the visible copy is the SECOND one, so the
     roll travels downward into the first */
  transform: translateY(-1.15em);
  transition: transform .42s cubic-bezier(.22,.9,.28,1);
  transition-delay: var(--d, 0ms);
}
.nav-swap-roll > span { display: block; height: 1.15em; }
.nav-pill-item:hover .nav-swap-roll,
.nav-pill-item:focus-visible .nav-swap-roll { transform: translateY(0); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle svg { transition: transform 0.3s ease; }
.nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: 320px; background: #fff; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(20,20,20,0.16);
  padding: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-dropdown.open .nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 9px;
  transition: background 0.2s ease;
}
.nav-dropdown-panel a:hover { background: var(--cream); }
.nav-dropdown-panel a strong { font-size: 13.5px; font-weight: 500; color: var(--navy); }
.nav-dropdown-panel a span { font-size: 11.5px; color: var(--ink-soft); }

.nav-cta {
  background: var(--gold); color: var(--navy);
  padding: 11px 22px; border-radius: 30px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap; flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(181,155,72,0.35); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 1.6px; background: #fff; transition: all 0.3s ease; }
.nav.scrolled .nav-toggle span { background: var(--navy); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 490;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.45s cubic-bezier(.4,0,.2,1), opacity 0.4s ease;
  pointer-events: none;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a { color: rgba(255,255,255,0.85); font-size: 16px; letter-spacing: 0.02em; }
.mobile-menu a.mobile-cta { color: var(--gold); margin-top: 12px; border: 1px solid var(--gold); padding: 10px 26px; border-radius: 30px; }

/* ─── HERO (video background) ─── */
.hero {
  position: relative; min-height: 100vh; overflow: hidden;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: brightness(0.86) saturate(1.1);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 42%, transparent 0%, rgba(20,20,20,0.16) 70%),
    linear-gradient(180deg, rgba(20,20,20,0.34) 0%, rgba(20,20,20,0.12) 40%, rgba(28,28,28,0.52) 82%, var(--navy) 100%);
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--navy));
  z-index: 2; pointer-events: none;
}
.hero-content {
  position: relative; z-index: 3; max-width: 900px;
  margin: 0 auto; padding: 140px 40px 80px; text-align: center;
}

.hero-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem; opacity: 0; transform: translateY(30px);
  animation: heroReveal 0.7s cubic-bezier(.4,0,.2,1) 3.8s forwards;
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}
.hero-headline {
  font-size: clamp(2.2rem, 7.5vw, 6.8rem);
  font-weight: 600; line-height: 0.95;
  letter-spacing: -0.03em;
  display: flex; flex-direction: column; align-items: center;
  text-shadow: 0 3px 34px rgba(0,0,0,0.45);
}
.hero-line1, .hero-line2 {
  display: block; opacity: 0; transform: translateY(50px);
  white-space: nowrap;
}
.hero-line1 {
  color: #fff;
  animation: heroReveal 0.8s cubic-bezier(.4,0,.2,1) 4.0s forwards;
}
.hero-line2 {
  color: #fff; font-weight: 700; margin-top: 0.18em;
  text-shadow: 0 3px 34px rgba(0,0,0,0.5);
  animation: heroReveal 0.8s cubic-bezier(.4,0,.2,1) 4.2s forwards;
}
/* Dara: pure white, and given more room across so it reads as a band
   rather than a narrow stack */
.hero-body {
  color: #ffffff; font-size: 16.5px; font-weight: 300;
  line-height: 1.75; letter-spacing: 0.012em; max-width: 860px;
  text-shadow: 0 1px 20px rgba(0,0,0,0.65);
  margin: 2.3rem auto 40px; opacity: 0; transform: translateY(20px);
  animation: heroReveal 0.7s cubic-bezier(.4,0,.2,1) 4.45s forwards;
}
@media (max-width: 900px){ .hero-body { max-width: 560px; } }
.hero-ctas {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 40px;
  opacity: 0; transform: translateY(20px);
  animation: heroReveal 0.7s cubic-bezier(.4,0,.2,1) 4.6s forwards;
}
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.03em;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-tags {
  color: rgba(255,255,255,0.45); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; max-width: 700px; margin: 0 auto;
  opacity: 0; transform: translateY(20px);
  animation: heroReveal 0.7s cubic-bezier(.4,0,.2,1) 4.75s forwards;
}
.hero-tags span { color: var(--gold); margin: 0 6px; }
@keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }

/* ─── HERO SERVICES MARQUEE (strip below the video) ─── */
.hero-marquee {
  position: relative; z-index: 4;
  overflow: hidden; padding: 20px 0;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-marquee-track {
  display: inline-flex; width: max-content;
  animation: marqueeScroll 26s linear infinite;
}
.hero-marquee:hover .hero-marquee-track { animation-play-state: paused; }
.hero-marquee-track span {
  display: inline-block; white-space: nowrap;
  font-size: clamp(0.82rem, 1.5vw, 1.05rem);
  font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--gold);
  transition: color 0.3s ease;
}
.hero-marquee-track:hover span { color: var(--gold-light); }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
.hero-marquee--end { border-top: 1px solid rgba(255,255,255,0.08); }

/* CTA ROWS — Dara: all three CTAs sit on one straight line, with the gold
   one in the middle and the two outline ones either side of it.
   NB: written as .cta-row.journey-cta-row so it outranks the plain
   .cta-row { flex-wrap: wrap } further down this file. */
.hero-ctas, .cta-row.journey-cta-row {
  flex-wrap: nowrap;
  justify-content: center; align-items: center;
}
/* markup order is gold, Charter, Explore — reordered to Charter | gold | Explore */
.hero-ctas > a:nth-child(1),
.cta-row.journey-cta-row > a:nth-child(1) { order: 2; }
.hero-ctas > a:nth-child(2),
.cta-row.journey-cta-row > a:nth-child(2) { order: 1; }
.hero-ctas > a:nth-child(3),
.cta-row.journey-cta-row > a:nth-child(3) { order: 3; }
.hero-ctas .hero-btn, .cta-row.journey-cta-row .journey-pill {
  white-space: nowrap; flex: 0 1 auto;
}
@media (max-width: 900px){
  /* below this the three cannot stay legible side by side */
  .hero-ctas, .cta-row.journey-cta-row { flex-wrap: wrap; }
}

/* straight dark services band pulled up flush with the hero's straight bottom edge */
.hero-marquee--transition {
  z-index: 6;
  margin-top: -59px;
  background: #131313;
  border-top: 1px solid rgba(217,196,138,0.22);
  border-bottom: 1px solid rgba(0,0,0,0.5);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  padding: 15px 0;
}
.hero-marquee--transition .hero-marquee-track span { color: var(--gold); }
.hero-marquee--transition .hero-marquee-track:hover span { color: var(--gold-light); }

.marquee-tooltip {
  position: fixed; top: 0; left: 0; z-index: 9999;
  background: var(--gold); color: var(--navy);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  padding: 12px 22px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  transform: translate(-50%, -140%);
}
.marquee-tooltip.is-visible { opacity: 1; }

.scroll-indicator {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem; opacity: 0;
  animation: heroReveal 0.5s cubic-bezier(.4,0,.2,1) 5.0s forwards;
}
.scroll-indicator span {
  font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); font-weight: 500;
}
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2.5s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; transform: scaleY(0.3); }
  60% { opacity: 1; transform: scaleY(1); }
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 30px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  border: 1px solid transparent; cursor: pointer;
}
.btn-ghost-light { color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 4px; padding: 15px 10px; }
.btn-ghost-light:hover { color: #fff; }

/* ─── BUTTONS — solid & premium (no glass) ─── */
/* PRIMARY — solid brand gold */
.btn-primary, .hero-btn-primary, .nav-cta, .mobile-menu a.mobile-cta {
  background: var(--gold); color: #1b190f;
  border: 1px solid var(--gold);
  font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(181,155,72,0.26);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.btn-primary:hover, .hero-btn-primary:hover, .nav-cta:hover, .mobile-menu a.mobile-cta:hover {
  background: var(--gold-light); border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(181,155,72,0.4);
}
.btn-primary:active, .hero-btn-primary:active, .nav-cta:active, .mobile-menu a.mobile-cta:active { transform: translateY(0) scale(0.98); }

/* SECONDARY on dark / video — clean outline */
.btn-outline-light, .hero-btn-secondary {
  background: rgba(255,255,255,0.04); color: #fff;
  border: 1px solid rgba(255,255,255,0.42);
  font-weight: 500;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.btn-outline-light:hover, .hero-btn-secondary:hover {
  background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-2px);
}
.btn-outline-light:active, .hero-btn-secondary:active { transform: translateY(0) scale(0.98); }

/* SECONDARY on light sections — outline */
.btn-outline {
  background: transparent; color: var(--navy);
  border: 1px solid rgba(34,34,34,0.24);
  font-weight: 500;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.btn-outline:hover {
  background: rgba(34,34,34,0.04); border-color: var(--navy); transform: translateY(-2px);
}
.btn-outline:active { transform: translateY(0) scale(0.98); }

/* ─── SECTIONS ─── */
.section { padding: 130px 0; position: relative; }
.section--cream { background: var(--cream); }
.section--navy { background: linear-gradient(160deg, #141414 0%, #222222 100%); color: #fff; overflow: hidden; }

.eyebrow { color: var(--gold); letter-spacing: 0.22em; font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.eyebrow--light { color: var(--gold-light); }
.section h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.2; margin-bottom: 20px; }
.section h2.light { color: #fff; }
.section-sub { font-size: 18px; color: var(--ink-soft); margin-bottom: 8px; max-width: 640px; }
.section-sub.light { color: rgba(255,255,255,0.72); }
.intro-line { color: var(--ink-soft); font-size: 16px; max-width: 760px; margin-top: 12px; }
.confidence-col span.conf-emphasis { font-weight: 700; color: var(--navy); }
.jv-emph { font-weight: 600; color: var(--navy); }

/* dark section (Everything Private Aviation) */
.section--dark { background: #000; color: #fff; }
.section--dark h2 { color: #fff; }
.section--dark .section-sub { color: rgba(255,255,255,0.68); }
#services .container { text-align: center; }
#services .container .eyebrow { display: block; }
#services .container .section-sub { margin-left: auto; margin-right: auto; }

.prose { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; }
.prose p { color: var(--ink-soft); font-size: 16px; }
.prose.light p { color: rgba(255,255,255,0.72); }
.tagline-gold { color: var(--gold); font-size: 20px; font-weight: 500; margin-top: 34px; font-style: italic; }
/* "Each decision matters." must not break across two lines */
.confidence-col span.conf-emphasis { white-space: nowrap; }
/* the trust line drops to its own line, in gold */
.sp-trust { color: var(--gold-dark); font-weight: 600; }

/* ─── Section subheads ───────────────────────────────────────────
   These live in pages.css for the inner pages, but index.html does not
   load that file — so its subheads were rendering as plain 16px body
   text. Mirrored here; pages.css still wins on the pages that load it. */
.sp-subhead {
  margin: 14px 0 26px;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height: 1.42; font-weight: 400; letter-spacing: -0.004em;
  color: var(--ink-soft, #5a5a5a);
  max-width: 62ch;
}
.sp-subhead .sp-gold { color: inherit; }
.section--dark .sp-subhead { color: rgba(255,255,255,0.66); }
/* Dara: the two-line statements now read as one line, and bigger */
.sp-subhead--xl {
  font-size: clamp(1.5rem, 2.75vw, 2.45rem);
  line-height: 1.16; font-weight: 600;
  letter-spacing: -0.018em;
  max-width: none;
}
.sp-subhead--one { max-width: none; }
@media (min-width: 901px){ .sp-subhead--one { white-space: nowrap; } }

/* ─── MORE CONFIDENCE (two columns over white/gold aurora) ─── */
.section--aurora { position: relative; overflow: hidden; background: #fffdf8; isolation: isolate; }
#confidence { padding: 90px 0; }
/* the aurora bleeds 30% past every edge, so its section has to crop it or
   it drags a horizontal scrollbar onto narrow screens. `clip` rather than
   `hidden` so nothing inside becomes a scroll container. */
.section--aurora { overflow-x: clip; }
.aurora-bg {
  position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  opacity: 0.85;
  background:
    repeating-linear-gradient(100deg, #ffffff 0%, #ffffff 4%, transparent 8%, transparent 11%, #ffffff 15%),
    repeating-linear-gradient(100deg, #c9ad5f 4%, #efe1b8 12%, #d8bf78 19%, #f5edd8 26%, #c9ad5f 33%);
  background-size: 260% 200%, 190% 130%;
  background-position: 0% 50%, 0% 50%;
  filter: blur(30px);
  -webkit-mask-image: radial-gradient(130% 100% at 80% 0%, #000 30%, transparent 82%);
  mask-image: radial-gradient(130% 100% at 80% 0%, #000 30%, transparent 82%);
  animation: aurora 34s linear infinite;
}
@keyframes aurora { to { background-position: 300% 50%, 300% 50%; } }

.confidence-title { font-size: clamp(2.5rem, 4.8vw, 3.8rem); margin-bottom: 6px; }

/* text block + a portrait image running alongside it */
.confidence-layout { margin-top: 38px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: stretch; }
.confidence-media {
  position: relative; border-radius: 18px; overflow: hidden; min-height: 100%;
  box-shadow: 0 24px 54px rgba(20,20,20,0.16);
}
.confidence-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.confidence-media:hover img { transform: scale(1.05); }
/* gold cursor-follow edge glow — identical treatment used across the site */
.confidence-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: radial-gradient(240px 240px at calc(var(--lx, -999) * 1px) calc(var(--ly, -999) * 1px),
    rgba(233,212,146,1), rgba(181,155,72,0.6) 45%, transparent 74%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 4;
}
.confidence-media:hover::after { opacity: 1; }
@media (max-width: 1080px) {
  .confidence-layout { grid-template-columns: 1fr; }
  .confidence-media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
}

.confidence-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  position: relative; align-items: start;
}
.confidence-columns::before {
  content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%;
  width: 1px; background: linear-gradient(to bottom, transparent, rgba(181,155,72,0.4), transparent);
}
.confidence-col { display: flex; flex-direction: column; gap: 16px; }
.confidence-col p { color: #2a2a2a; font-size: 16px; font-weight: 400; line-height: 1.72; }
.confidence-col p.lead { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.6; }
/* Dara: the signature line should land hard — bigger, heavier, upright.
   NB this block sits later than the .tagline-gold defaults, so the size
   has to be set HERE or the earlier rule keeps winning. */
.confidence-tagline {
  text-align: center; margin-top: 46px;
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
  font-weight: 700; font-style: normal;
  letter-spacing: -0.015em;
  color: var(--gold-dark);
}

/* ---- The tagline, sliding ---------------------------------------
   Dara: "that text should be repeated and sliding right to left, with a
   big full stop after each one. There should not be any background —
   just the gold text sliding." So it keeps exactly the type it had and
   loses the single centred line. Two identical sets ride in one track
   and the track travels its own half-width, which is why the loop has
   no seam; the sets must stay the same length. */
.tagline-marquee {
  margin-top: 46px;
  overflow: hidden;
  /* the ends feather out rather than being cut off square */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tagline-track {
  display: flex; width: max-content;
  animation: tagline-slide 34s linear infinite;
}
.tagline-set { display: flex; flex: 0 0 auto; }
.tagline-item {
  display: inline-flex; align-items: baseline;
  white-space: nowrap;
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
  font-weight: 700; font-style: normal;
  letter-spacing: -0.015em;
  color: var(--gold-dark);
}
/* the full stop between one and the next, set large as Dara asked */
.tagline-dot {
  font-style: normal; font-weight: 700;
  font-size: 1.6em; line-height: 0;
  margin: 0 0.42em 0 0.02em;
  color: var(--gold);
}
@keyframes tagline-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tagline-marquee:hover .tagline-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .tagline-track { animation: none; }
}

/* screen-reader-only text (index.html does not load pages.css, so the
   utility has to exist here too) */
.za-vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* hover-preview links + floating image card */
.hover-preview {
  color: var(--gold-dark); font-weight: 500; cursor: pointer;
  border-bottom: 1px solid rgba(181,155,72,0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hover-preview:hover { color: var(--gold); border-color: var(--gold); }
.preview-card {
  position: fixed; top: 0; left: 0; z-index: 9990;
  width: 232px; border-radius: 14px; overflow: hidden;
  background: #fff; padding: 6px;
  box-shadow: 0 24px 60px rgba(20,20,20,0.28);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -118%) scale(0.82);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.34,1.56,.64,1);
}
.preview-card.is-visible { opacity: 1; transform: translate(-50%, -118%) scale(1); }
.preview-card img { width: 100%; height: 148px; object-fit: cover; border-radius: 9px; display: block; }

@media (max-width: 820px) {
  .confidence-columns { grid-template-columns: 1fr; gap: 26px; }
  .confidence-columns::before { display: none; }
}

/* reveal-on-scroll (fade + rise) */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.85s cubic-bezier(.4,0,.2,1), transform 0.85s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* staggered card reveal */
.reveal-card { opacity: 0; transform: translateY(44px); transition: opacity 0.8s cubic-bezier(.4,0,.2,1) var(--d, 0s), transform 0.8s cubic-bezier(.4,0,.2,1) var(--d, 0s); }
.reveal-card.is-visible { opacity: 1; transform: translateY(0); }

/* "story" entrance — on .story sections the content stands up into place (3D tilt + rise); replays on re-entry via the reveal observer */
.story .reveal,
.story .reveal-card {
  transform: perspective(1300px) rotateX(22deg) translateY(64px) scale(0.985);
  transform-origin: 50% 100%;
  transition: opacity 0.9s cubic-bezier(.22,.65,.25,1) var(--d, 0s), transform 0.9s cubic-bezier(.22,.65,.25,1) var(--d, 0s);
}
.story .reveal.is-visible,
.story .reveal-card.is-visible {
  transform: perspective(1300px) rotateX(0deg) translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .story .reveal, .story .reveal-card { transform: translateY(20px); }
  .story .reveal.is-visible, .story .reveal-card.is-visible { transform: none; }
}

/* checklist reveal */
.reveal-list li { opacity: 0; transform: translateX(-16px); transition: opacity 0.6s ease var(--d, 0s), transform 0.6s ease var(--d, 0s); }
.reveal-list.is-visible li { opacity: 1; transform: translateX(0); }

/* ─── SERVICES — horizontal scroll-velocity marquee ─── */
.service-marquee {
  margin-top: 56px; overflow: hidden; padding: 30px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.service-track {
  display: flex; align-items: stretch;
  width: max-content; will-change: transform;
}
.service-card {
  position: relative; flex: 0 0 372px; width: 372px; margin-right: 26px;
  height: 460px; border-radius: 16px;
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}
.service-card:hover { transform: translateY(-6px); }
.service-card-inner {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 20px 48px rgba(0,0,0,0.45);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.service-card:hover .service-card-inner {
  border-color: rgba(181,155,72,0.35);
  box-shadow: 0 26px 56px rgba(0,0,0,0.55), 0 0 40px rgba(181,155,72,0.22);
}
.service-card-media {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover;
  filter: grayscale(1) brightness(0.46) contrast(1.06);
  transition: filter 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.service-card:hover .service-card-media { filter: grayscale(0.1) brightness(0.66) contrast(1.02); transform: scale(1.07); }
.service-card-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,8,7,0.94) 0%, rgba(8,8,7,0.82) 26%, rgba(8,8,7,0.42) 58%, rgba(8,8,7,0.12) 100%);
}
.service-card-content { position: relative; z-index: 2; padding: 30px 28px; }
.service-card-content h3 { color: var(--gold); font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; letter-spacing: -0.01em; }
.service-card-tag { color: #fff; font-size: 13.5px; font-weight: 500; margin-bottom: 12px; letter-spacing: 0.01em; }
.service-card-desc { color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.62; margin-bottom: 18px; }
.service-card .card-link { color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 7px; }
.service-card .card-link span { transition: transform 0.3s ease; }
.service-card:hover .card-link span { transform: translateX(5px); }

/* gold cursor-follow edge glow */
.service-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.6px;
  background: radial-gradient(230px 230px at calc(var(--lx, -999) * 1px) calc(var(--ly, -999) * 1px),
    rgba(233,212,146,1), rgba(181,155,72,0.6) 45%, transparent 74%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none; z-index: 4;
}
.service-card:hover::after { opacity: 1; }
@media (max-width: 620px) {
  .service-card { flex-basis: 300px; width: 300px; margin-right: 18px; height: 448px; }
}

/* ─── PARALLAX / REVENUE ─── */
.section--parallax {
  background-size: cover; background-position: center; background-attachment: fixed;
  color: #fff;
}
/* dedicated image layer we can desaturate + darken (background-image can't be filtered inline) */
.revenue-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-attachment: fixed;
  filter: grayscale(1) brightness(0.4) contrast(1.06);
}
.section-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, rgba(12,12,12,0.9) 20%, rgba(12,12,12,0.62) 100%); }
.section--parallax .container { position: relative; z-index: 1; }
.section--parallax h4 { color: #fff; font-size: 15px; letter-spacing: 0.03em; font-weight: 500; margin-top: 40px; margin-bottom: 20px; }

/* pinned scroll section — holds while the left text reveals */
.revenue-pin { position: relative; height: 160vh; }
.revenue-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.revenue-sticky .container { width: 100%; }
/* below 1280px (matches the nav's tablet breakpoint): drop the pin so nothing can be clipped by the centered/overflow:hidden desktop layout */
@media (max-width: 1280px) {
  .revenue-pin { height: auto; padding: 90px 0; }
  .revenue-sticky { position: static; height: auto; display: block; overflow: visible; }
}

/* revenue layout: centered headline, two equal-height columns below */
.revenue-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold-light); background: rgba(181,155,72,0.10); box-shadow: 0 0 26px rgba(181,155,72,0.28); }
.revenue-icon svg { width: 26px; height: 26px; }
.revenue-head { text-align: center; max-width: 940px; margin: 0 auto 40px; }
.revenue-head .section-sub { margin-left: auto; margin-right: auto; }
/* #revenue lacks the .section class, so force the uniform headline size + white colour here */
.revenue-head h2 {
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.2; margin-bottom: 20px;
  text-shadow: 0 2px 26px rgba(0,0,0,0.55);
}
.revenue-columns { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: stretch; }
.revenue-col-left .prose { margin-top: 0; }
/* right column: centered panel — kicker, deck and CTAs all centred */
.revenue-col-right { display: flex; flex-direction: column; align-items: center; text-align: center; }
.revenue-col-right .cta-row { margin-top: 46px; margin-bottom: auto; justify-content: center; }
@media (max-width: 900px) {
  .revenue-columns { grid-template-columns: 1fr; gap: 40px; }
  .revenue-col-right .cta-row { margin-top: 24px; }
}

/* scroll word-reveal (gradient scroll text) */
.gs-word { position: relative; display: inline-block; margin-right: 0.3em; }
.gs-ghost { opacity: 0.18; }
.gs-fg { position: absolute; inset: 0; opacity: 0; white-space: pre; color: #fff; }

/* right column: small one-line label (lower in the hierarchy than the headline) */
.section--parallax h4.revenue-kicker {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.9); margin: 0 0 24px; white-space: nowrap;
}
.revenue-kicker::before { content: ''; width: 24px; height: 2px; background: var(--gold); flex: 0 0 auto; }

/* overlapping stacked deck (checklist cards close behind each other, neatly aligned) */
/* deck floats in the vertical centre of the right column; kicker stays at top */
.stack-cards { position: relative; height: 176px; width: 382px; max-width: 100%; margin: auto auto 0; }
.stack-card {
  position: absolute; top: calc(var(--i) * 19px); left: calc(var(--i) * 7px);
  width: 340px; max-width: 100%; z-index: calc(var(--i) + 1);
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-radius: 13px;
  background: rgba(24,22,16,0.82);
  border: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.5);
  transform: skewY(-3.5deg);
  transition: transform 0.5s cubic-bezier(.34,1.35,.5,1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.stack-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: #050505; opacity: calc(0.36 - var(--i) * 0.055);
  pointer-events: none; transition: opacity 0.35s ease;
}
.stack-card:hover {
  transform: skewY(0deg) translate(-6px, -8px) scale(1.03);
  z-index: 20;
  background: rgba(181,155,72,0.16); border-color: rgba(181,155,72,0.6);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.stack-card:hover::before { opacity: 0; }
.stack-card-icon {
  position: relative; z-index: 1; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(181,155,72,0.22); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.stack-card p { position: relative; z-index: 1; color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.35; margin: 0; }
@media (max-width: 900px) {
  /* the 382px desktop width still pushed the page wider than a phone */
  .stack-cards { height: auto; width: 100%; display: flex; flex-direction: column; gap: 12px; }
  .stack-card { position: relative; top: auto; left: auto; width: 100%; transform: none; }
  .stack-card::before { display: none; }
  .stack-card:hover { transform: translateX(5px); }
}

.checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; margin-bottom: 40px; }
.checklist li { font-size: 14.5px; color: var(--ink-soft); padding-left: 26px; position: relative; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(181,155,72,0.15);
}
.checklist li::after {
  content: ''; position: absolute; left: 5px; top: 8px; width: 6px; height: 3px;
  border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(-45deg);
}
.checklist--light li { color: rgba(255,255,255,0.82); }

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cta-row.center { justify-content: center; }
/* revenue CTAs sit side by side on one line (compact buttons so both fit the column) */
.revenue-col-right .cta-row { flex-wrap: nowrap; gap: 10px; }
.revenue-col-right .cta-row .btn { padding: 13px 15px; font-size: 11px; letter-spacing: 0.01em; white-space: nowrap; flex: 0 1 auto; }
@media (max-width: 900px) {
  .revenue-col-right .cta-row { flex-wrap: wrap; }
  /* these are nowrap for the desktop layout; on a phone they force the
     page wider than the screen, so they are allowed to break */
  .section--parallax h4.revenue-kicker { white-space: normal; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .revenue-col-right .cta-row .btn { white-space: normal; }
}

/* ─── PRINCIPLES ─── */
/* no overflow:hidden here — it silently breaks the sticky zoom pin below */
.section.principles { padding: 0 0 130px; background: #0e0e0e; }

/* scroll-to-expand headline + media (vanilla port of ScrollExpandMedia) */
.pexpand { position: relative; height: 240vh; }
.pexpand-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #202024 0%, #141414 55%, #0d0d0d 100%);
}
/* fading backdrop (airport) behind the zooming picture */
.pexpand-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: sepia(0.32) saturate(1.25) contrast(1.02) brightness(0.72);   /* warm it toward gold */
}
.pexpand-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 50% 28%, rgba(217,196,138,0.28), transparent 58%),
    linear-gradient(165deg, rgba(181,155,72,0.42) 0%, rgba(138,116,52,0.22) 44%, rgba(10,9,7,0.66) 100%);
}
.pexpand-media {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 360px; height: 460px; max-width: 98vw; max-height: 92vh;
  border-radius: 22px; overflow: hidden;
  background-size: cover; background-position: center;
  filter: contrast(1.06) brightness(0.46) saturate(0.9);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  will-change: width, height, border-radius;
}
.pexpand-scrim { position: absolute; inset: 0; background: rgba(8,8,10,0.52); transition: opacity 0.2s ease; }
.pexpand-head {
  position: relative; z-index: 2; text-align: center; padding: 0 24px;
  pointer-events: none; will-change: opacity;
}
.pexpand-eyebrow { margin-bottom: 20px; will-change: transform, opacity; }
.pexpand-title {
  display: flex; flex-direction: column; align-items: center; gap: 0.12em;
  color: #fff; font-size: clamp(2rem, 5.4vw, 4.1rem); line-height: 1.06;
  text-shadow: 0 8px 46px rgba(0,0,0,0.75);
}
.pexpand-line { display: block; white-space: nowrap; will-change: transform; }
.pexpand-hint {
  display: inline-block; margin-top: 26px;
  color: rgba(255,255,255,0.9); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  will-change: opacity;
}
.pexpand-hint::after { content: ''; display: block; width: 1px; height: 26px; margin: 12px auto 0; background: linear-gradient(rgba(217,196,138,0.9), transparent); }
/* below 1280px: same reasoning as Revenue — drop the sticky/overflow:hidden pin so the eyebrow/title/hint can never be clipped */
@media (max-width: 1280px) {
  .pexpand { height: auto; }
  .pexpand-sticky { position: static; height: auto; min-height: 78vh; padding: 100px 0; }
  .pexpand-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; transform: none; top: 0; left: 0; }
}

/* revealed detail — dark panel that scrolls up over the finished zoom */
.principles-body { position: relative; z-index: 2; color: #fff; padding-top: 92px; padding-bottom: 8px; margin-top: -1px; }
.principles-body::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; background: #0e0e0e; z-index: -1;
}
/* indented intro copy with a gold marker */
.principles-intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 52px; align-items: center; }
.principles-intro-text { max-width: 560px; padding-left: 26px; border-left: 2px solid var(--gold); }
.principles-intro .section-sub { font-size: 20px; color: #fff; }
.principles-intro .intro-line { color: rgba(255,255,255,0.66); }
/* placeholder until the client's trust photo is added */
.principles-intro-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 48px rgba(0,0,0,0.45);
}
.principles-intro-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(0.5) contrast(1.05);
  transition: filter 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.principles-intro-media:hover img { filter: grayscale(0.12) brightness(0.66) contrast(1.02); transform: scale(1.05); }
/* gold cursor-follow edge glow — identical treatment to the principle cards */
.principles-intro-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: radial-gradient(230px 230px at calc(var(--lx, -999) * 1px) calc(var(--ly, -999) * 1px),
    rgba(233,212,146,1), rgba(181,155,72,0.6) 45%, transparent 74%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 4;
}
.principles-intro-media:hover::after { opacity: 1; }
@media (max-width: 900px) {
  .principles-intro { grid-template-columns: 1fr; gap: 28px; }
  .principles-intro-media { order: -1; aspect-ratio: 16 / 10; }
}

/* 3 across → six cards form a 3 × 2 grid */
.principle-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* image-as-background cards, styled to match the Services ("Everything Private Aviation") section */
.principle-card {
  position: relative; overflow: hidden; border-radius: 16px; min-height: 440px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 20px 48px rgba(0,0,0,0.45);
  transition: transform 0.45s cubic-bezier(.4,0,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.principle-card:hover {
  transform: translateY(-6px);
  border-color: rgba(181,155,72,0.35);
  box-shadow: 0 26px 56px rgba(0,0,0,0.55), 0 0 40px rgba(181,155,72,0.22);
}
/* the image is the full card background — grayscale + dimmed */
.principle-card-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) brightness(0.28) contrast(1.08);
  transition: filter 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.principle-card:hover .principle-card-media { filter: grayscale(0.12) brightness(0.5) contrast(1.02); transform: scale(1.06); }
.principle-card-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,8,7,0.95) 0%, rgba(8,8,7,0.82) 30%, rgba(8,8,7,0.4) 62%, rgba(8,8,7,0.08) 100%);
}
.principle-card-content { position: relative; z-index: 2; padding: 30px 28px; }
.principle-num { display: block; color: var(--gold); font-size: 12px; letter-spacing: 0.14em; font-weight: 600; margin-bottom: 10px; }
.principle-card h3 { font-size: 22px; font-weight: 600; color: var(--gold); margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.01em; }
.principle-tag { color: #fff; font-size: 13px; font-style: italic; margin-bottom: 12px; }
.principle-body { color: rgba(255,255,255,0.76); font-size: 13px; line-height: 1.62; }
/* gold cursor-follow edge glow — identical treatment to the Services cards */
.principle-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: radial-gradient(230px 230px at calc(var(--lx, -999) * 1px) calc(var(--ly, -999) * 1px),
    rgba(233,212,146,1), rgba(181,155,72,0.6) 45%, transparent 74%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 4;
}
.principle-card:hover::after { opacity: 1; }
@media (max-width: 980px) { .principle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .principle-grid { grid-template-columns: 1fr; } }

/* ─── KNOWLEDGE ─── */
/* ─── KNOWLEDGE CENTRE — radial orbital + detail card ─── */
#knowledge.knowledge {
  background: radial-gradient(72% 92% at 27% 44%, #1a1a1a 0%, #0e0e0e 55%, #080808 100%);
  color: #fff; overflow: hidden;
}
#knowledge .container { position: relative; z-index: 1; }

/* floating elegant shapes drifting behind the orbit */
.knowledge-shapes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.eshape { position: absolute; opacity: 0; transform: translateY(-140px) rotate(var(--r0)); animation: eshapeIn 2.4s cubic-bezier(0.23,0.86,0.39,0.96) var(--d,0s) forwards; }
.eshape-inner {
  width: 100%; height: 100%; border-radius: 999px; position: relative;
  background: linear-gradient(90deg, var(--tint), transparent 78%);
  border: 2px solid rgba(217,196,138,0.22);
  box-shadow: 0 8px 32px rgba(181,155,72,0.12);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: eshapeFloat 12s ease-in-out infinite;
}
.eshape-inner::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(233,212,146,0.16), transparent 70%);
}
@keyframes eshapeIn { to { opacity: 1; transform: translateY(0) rotate(var(--r)); } }
@keyframes eshapeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(15px); } }

.eshape-1 { width: 600px; height: 140px; left: -6%; top: 16%; --r: 12deg; --r0: -3deg; --d: 0.3s; --tint: rgba(181,155,72,0.16); }
.eshape-2 { width: 500px; height: 120px; right: -4%; top: 70%; --r: -15deg; --r0: -30deg; --d: 0.5s; --tint: rgba(181,155,72,0.13); }
.eshape-3 { width: 300px; height: 80px; left: 6%; bottom: 8%; --r: -8deg; --r0: -23deg; --d: 0.4s; --tint: rgba(217,196,138,0.15); }
.eshape-4 { width: 200px; height: 60px; right: 16%; top: 12%; --r: 20deg; --r0: 5deg; --d: 0.6s; --tint: rgba(233,212,146,0.11); }
.eshape-5 { width: 150px; height: 40px; left: 22%; top: 7%; --r: -25deg; --r0: -40deg; --d: 0.7s; --tint: rgba(138,116,52,0.18); }
@media (prefers-reduced-motion: reduce) { .eshape-inner { animation: none; } }
@media (max-width: 640px) { .eshape-1, .eshape-2 { display: none; } }

.knowledge-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* RIGHT copy */
.knowledge-copy .section-sub.light { color: rgba(255,255,255,0.74); }
.knowledge-body { color: rgba(255,255,255,0.68); font-size: 16px; line-height: 1.75; max-width: 560px; margin-top: 14px; }
.knowledge-copy .cta-row { margin-top: 32px; }

/* LEFT orbital */
.knowledge-orbital-col { display: flex; flex-direction: column; align-items: center; }
.orbital { position: relative; width: 440px; height: 440px; max-width: 100%; }
.orbital-ring {
  position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;   /* decorative — must never intercept a node's hover */
}
.orbital-ring::after {
  content: ''; position: absolute; inset: 40px; border-radius: 50%; border: 1px dashed rgba(181,155,72,0.14);
}
.orbital-core {
  position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--gold-light), var(--gold) 46%, var(--gold-dark) 100%);
  box-shadow: 0 0 42px rgba(181,155,72,0.5); animation: kcorePulse 3.2s ease-in-out infinite; z-index: 2; pointer-events: none;
}
.orbital-core::before, .orbital-core::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(181,155,72,0.45);
  animation: kcoreRing 3.2s ease-out infinite;
}
.orbital-core::after { animation-delay: 1.6s; }
@keyframes kcorePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes kcoreRing { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }

.orbital-node {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  background: rgba(18,18,22,0.92); color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.28);
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.orbital-node:hover, .orbital-node.is-active {
  background: var(--gold); color: #1b190f; border-color: var(--gold-light);
  box-shadow: 0 0 26px rgba(181,155,72,0.6); transform: translate(var(--tx,0), var(--ty,0)) scale(1.14);
}
.orbital-node-label {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #fff;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.orbital-node:hover .orbital-node-label, .orbital-node.is-active .orbital-node-label { opacity: 1; }

/* detail card — floating popover that appears right at the hovered icon */
.knowledge-detail {
  position: fixed; z-index: 60; width: 300px; height: 300px;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.knowledge-detail.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.28s ease; }
.kdetail-card {
  position: absolute; inset: 0; overflow: hidden; border-radius: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 48px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}
.kdetail-card.is-active { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s; }
.kdetail-media {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  filter: grayscale(1) brightness(0.42) contrast(1.05);
  transition: filter 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.kdetail-card:hover .kdetail-media { filter: grayscale(0.12) brightness(0.62) contrast(1.02); transform: scale(1.05); }
.kdetail-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,8,7,0.95) 0%, rgba(8,8,7,0.72) 42%, rgba(8,8,7,0.2) 100%); }
.kdetail-content { position: relative; z-index: 2; padding: 26px 26px 28px; }
.kdetail-content h3 { color: var(--gold); font-size: 20px; font-weight: 600; margin-bottom: 8px; line-height: 1.2; }
.kdetail-body { color: rgba(255,255,255,0.78); font-size: 13px; line-height: 1.62; margin-bottom: 16px; }
.kdetail-card .card-link { color: var(--gold); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.kdetail-card .card-link span { transition: transform 0.3s ease; }
.kdetail-card:hover .card-link span { transform: translateX(5px); }
.kdetail-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: radial-gradient(230px 230px at calc(var(--lx, -999) * 1px) calc(var(--ly, -999) * 1px),
    rgba(233,212,146,1), rgba(181,155,72,0.6) 45%, transparent 74%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 4;
}
.kdetail-card.is-active:hover::after { opacity: 1; }

@media (max-width: 940px) {
  .knowledge-layout { grid-template-columns: 1fr; gap: 44px; }
  .knowledge-copy { order: -1; }
  .knowledge-body { max-width: none; }
  .orbital { width: 360px; height: 360px; }
  .orbital-ring { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
}

/* ─── JETVAULT — centered copy + 3D fleet showcase ─── */
.jetvault { position: relative; overflow: hidden; }
.jv-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* faint gold grid, fading out toward the edges */
.jv-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(181,155,72,0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(181,155,72,0.13) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0,0,0,0.5) 55%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0,0,0,0.5) 55%, transparent 82%);
}

/* breathing gold glow */
.jv-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(181,155,72,0.20), transparent 38%),
    radial-gradient(circle at 74% 72%, rgba(217,196,138,0.16), transparent 32%);
  animation: jvGlowPulse 12s ease-in-out infinite;
}
@keyframes jvGlowPulse { 0%,100% { opacity: 0.82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }

/* twinkling gold stars */
.jv-star {
  position: absolute; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px rgba(181,155,72,0.6);
  animation-name: jvTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes jvTwinkle { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Client: the streaks crossing the copy made it hard to read. They now
   fade out as they reach the text and only run in the clear bands above
   and below it. The quiet zone is measured from the live layout in
   main.js (initJetVaultQuietZone), so it tracks the copy at any width. */
.jv-shooters {
  position: absolute; inset: 0;
  --jv-t: 12%; --jv-b: 56%; --jv-l: 4%; --jv-r: 96%;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0, #000 calc(var(--jv-t) - 4%), transparent var(--jv-t), transparent var(--jv-b), #000 calc(var(--jv-b) + 4%), #000 100%),
    linear-gradient(to right, #000 0, #000 calc(var(--jv-l) - 2%), transparent var(--jv-l), transparent var(--jv-r), #000 calc(var(--jv-r) + 2%), #000 100%);
  mask-image:
    linear-gradient(to bottom, #000 0, #000 calc(var(--jv-t) - 4%), transparent var(--jv-t), transparent var(--jv-b), #000 calc(var(--jv-b) + 4%), #000 100%),
    linear-gradient(to right, #000 0, #000 calc(var(--jv-l) - 2%), transparent var(--jv-l), transparent var(--jv-r), #000 calc(var(--jv-r) + 2%), #000 100%);
  /* union of the two, so a streak survives outside EITHER band */
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* shooting stars racing along the grid */
.jv-shooter { position: absolute; border-radius: 2px; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; }
.jv-shoot-h {
  animation-name: jvShootH;
  background: linear-gradient(90deg, transparent, rgba(181,155,72,0.15) 18%, rgba(181,155,72,0.9) 52%, rgba(233,212,146,1) 60%, transparent);
  box-shadow: 0 0 12px rgba(181,155,72,0.55);
}
.jv-shoot-h.jv-rev { animation-name: jvShootHRev; }
.jv-shoot-v {
  animation-name: jvShootV;
  background: linear-gradient(180deg, transparent, rgba(181,155,72,0.15) 18%, rgba(181,155,72,0.9) 52%, rgba(233,212,146,1) 60%, transparent);
  box-shadow: 0 0 12px rgba(181,155,72,0.55);
}
.jv-shoot-v.jv-rev { animation-name: jvShootVRev; }
@keyframes jvShootH { 0%{ left:-16%; opacity:0 } 4%{opacity:1} 30%{opacity:1} 34%{ left:116%; opacity:0 } 100%{ left:116%; opacity:0 } }
@keyframes jvShootHRev { 0%{ left:116%; opacity:0 } 4%{opacity:1} 30%{opacity:1} 34%{ left:-16%; opacity:0 } 100%{ left:-16%; opacity:0 } }
@keyframes jvShootV { 0%{ top:-16%; opacity:0 } 4%{opacity:1} 30%{opacity:1} 34%{ top:116%; opacity:0 } 100%{ top:116%; opacity:0 } }
@keyframes jvShootVRev { 0%{ top:116%; opacity:0 } 4%{opacity:1} 30%{opacity:1} 34%{ top:-16%; opacity:0 } 100%{ top:-16%; opacity:0 } }

/* melt the field into the white section at the edges */
.jv-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, transparent 0%, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0.9) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .jv-glow, .jv-star, .jv-shooter { animation: none !important; }
  .jv-shooter { opacity: 0; }
}
.jetvault .container { position: relative; z-index: 1; }

.jv-head { max-width: 920px; text-align: center; }
.jv-head h2 { margin-bottom: 10px; }

/* two columns: copy left, experience right */
.jv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 34px; text-align: left; }
.jv-lead { color: var(--navy); font-size: 17px; font-weight: 500; margin-bottom: 14px; }
.jv-body { color: var(--ink-soft); font-size: 15.5px; line-height: 1.78; margin: 0 0 14px; }
.jv-col-side { display: flex; flex-direction: column; align-items: flex-start; }
.jv-col-side .cta-row { margin-top: 26px; }

/* single feature portrait — Steve Varsano, private jet broker */
.jv-feature {
  position: relative; z-index: 1; margin: 44px auto 0; max-width: 920px;
  border-radius: 22px; overflow: hidden; background: #101114;
  border: 1px solid rgba(34,34,34,0.10); box-shadow: 0 30px 70px rgba(20,20,20,0.28);
}
.jv-feature img { display: block; width: 100%; height: auto; }
.jv-feature::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.8px;
  background: radial-gradient(360px 360px at calc(var(--lx, -999) * 1px) calc(var(--ly, -999) * 1px),
    rgba(233,212,146,1), rgba(181,155,72,0.6) 45%, transparent 74%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 4;
}
.jv-feature:hover::after { opacity: 1; }

/* "Includes" — one quiet line with the cycling word */
.jv-includes-title {
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  line-height: 1.5; margin-bottom: 16px; white-space: nowrap;
}
.jv-cycle { display: inline-block; vertical-align: bottom; text-align: left; white-space: nowrap; transition: width 0.3s cubic-bezier(0.22, 1.2, 0.36, 1); }
.jv-cycle-word { display: inline-block; font-weight: 700; color: var(--gold-dark); }
.jv-cycle-word.is-exiting { animation: jvWordOut 0.2s ease-in forwards; }
.jv-cycle-word.is-entering { animation: jvWordIn 0.28s ease-out; }
@keyframes jvWordOut { to { opacity: 0; transform: translateY(20px); filter: blur(8px); } }
@keyframes jvWordIn { from { opacity: 0; transform: translateY(-20px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

.jetvault-lines { color: var(--navy) !important; font-size: 17px !important; font-weight: 500; line-height: 1.6; margin: 18px 0 0 !important; }

@media (max-width: 900px) {
  .jv-cols { grid-template-columns: 1fr; gap: 36px; }
  .jv-includes-title { white-space: normal; }
}
@media (max-width: 700px) {
  .jv-feature { border-radius: 14px; margin-top: 32px; }
}

/* ─── FINAL CTA / JOURNEY — cinematic ─── */
#journey { text-align: center; }
.journey-cinematic { position: relative; overflow: hidden; }

/* breathing gold aurora */
.journey-aurora {
  position: absolute; left: 50%; top: 50%; width: 82vw; height: 62vh;
  transform: translate(-50%, -50%); border-radius: 50%; filter: blur(80px);
  background: radial-gradient(circle at 50% 50%,
    rgba(181,155,72,0.24) 0%, rgba(122,110,80,0.10) 42%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: journeyBreathe 8s ease-in-out infinite alternate;
}
@keyframes journeyBreathe {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* faint grid, faded top & bottom */
.journey-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}

/* giant metallic background word */
.journey-giant {
  position: absolute; top: 50%; left: 50%; z-index: 0; pointer-events: none; user-select: none;
  font-size: 30vw; line-height: 0.8; font-weight: 800; letter-spacing: -0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(181,155,72,0.18) 0%, rgba(255,255,255,0.02) 55%, transparent 78%);
  -webkit-background-clip: text; background-clip: text;
  transform: translate(-50%, -50%); will-change: transform, opacity;
}

/* metallic-glow heading */
.journey-title {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(181,155,72,0.22));
}
#journey .container { position: relative; z-index: 1; }

/* magnetic glass-pill CTAs */
.journey-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.journey-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: #fff; cursor: pointer; white-space: nowrap; will-change: transform;
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.10);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.journey-pill:hover {
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 20px 44px -12px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.20);
}
.journey-pill--gold {
  color: #1b190f; font-weight: 700;
  background: linear-gradient(145deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  border: 1px solid var(--gold-light);
  box-shadow: 0 12px 34px -8px rgba(181,155,72,0.55), inset 0 1px 1px rgba(255,255,255,0.40);
}
.journey-pill--gold:hover {
  box-shadow: 0 18px 46px -8px rgba(181,155,72,0.78), inset 0 1px 1px rgba(255,255,255,0.50);
}
.journey-pill--ghost { background: transparent; border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.82); }
.journey-pill--ghost:hover { color: #fff; }

/* ─── SHARED CARD HOVER: gold glow across the whole site ───
   The image cards already lift and pick up a gold edge; this raises the
   halo so every card on every page glows the same way on hover. */
.service-card:hover .service-card-inner,
.principle-card:hover,
.kdetail-card:hover,
.confidence-media:hover {
  border-color: rgba(181,155,72,0.6);
  box-shadow:
    0 26px 56px rgba(0,0,0,0.55),
    0 0 0 1px rgba(217,196,138,0.5),
    0 18px 62px -6px rgba(181,155,72,0.6);
}
.kdetail-card, .confidence-media { transition: box-shadow .5s, border-color .5s, transform .5s cubic-bezier(.2,.7,.2,1); }

/* ─── FOOTER ─── */
#site-footer { background: var(--navy); color: rgba(255,255,255,0.6); padding: 90px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logo-img { width: 200px; height: auto; margin-bottom: 16px; }
.footer-tagline { font-size: 13.5px; color: rgba(255,255,255,0.5); margin-bottom: 22px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: background 0.3s ease, color 0.3s ease; }
.footer-social a:hover { background: var(--gold); color: var(--navy); }
.footer-col h4 { color: #fff; font-size: 13px; letter-spacing: 0.05em; margin-bottom: 18px; font-weight: 500; }
.footer-col a, .footer-contact { display: block; font-size: 13.5px; color: rgba(255,255,255,0.55); margin-bottom: 12px; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 40px; font-size: 12.5px; color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 12px; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a:hover { color: var(--gold); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1280px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .section { padding: 90px 0; }
  .container { padding: 0 24px; }
  .hero-content { padding: 120px 24px 70px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .section--parallax { background-attachment: scroll; }
}