/* ============================================================
   ZINO AVIATION — Sub-page component library
   Used by: charter.html, aircraft-acquisition.html,
            journey-concierge.html
   Inherits all brand tokens + core classes from style.css.
   Type-led, restrained luxury language (Sparfell / Global Jet).
   ============================================================ */

/* ---- Sub-page hero ----------------------------------------- */
.sp-hero {
  position: relative;
  min-height: 84vh;
  display: flex;
  align-items: center;
  padding: 190px 0 100px;
  background: radial-gradient(130% 120% at 50% -10%, #2c2c2c 0%, var(--navy-2) 55%, #0c0c0c 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.sp-hero::after { /* faint gold horizon glow */
  content: "";
  position: absolute; left: 50%; bottom: -40%;
  width: 120%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(181,155,72,0.16), transparent 70%);
  pointer-events: none;
}
.sp-hero-bg { /* optional background image (client supplies later) */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.30;
  filter: grayscale(0.2) contrast(1.02);
  z-index: 0;
}
.sp-hero .container { position: relative; z-index: 2; max-width: 980px; }
.sp-hero-eyebrow {
  color: var(--gold-light);
  letter-spacing: 0.28em; text-transform: uppercase;
  font-size: 12.5px; font-weight: 600; margin-bottom: 22px;
}
.sp-hero h1 {
  color: #fff; font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1.03; letter-spacing: -0.025em;
}
.sp-hero h1 .sp-gold { color: var(--gold-light); }
.sp-hero-sub {
  max-width: 720px; margin: 28px auto 0;
  color: rgba(255,255,255,0.72);
  font-size: 18px; line-height: 1.75; font-weight: 300;
}
.sp-hero-ctas {
  margin-top: 42px; display: flex; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}
.sp-scroll-cue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,0.5);
  font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sp-scroll-cue::after {
  content: ""; width: 1px; height: 46px;
  background: linear-gradient(rgba(217,196,138,0.7), transparent);
}

/* ---- Section rhythm helpers -------------------------------- */
.sp-cream { background: var(--cream); }
.sp-section { padding: 130px 0; position: relative; }
@media (max-width: 900px){ .sp-section { padding: 90px 0; } }

.sp-head { max-width: 820px; margin-bottom: 60px; }
.sp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
/* .sp-head is normally the wrapper around a heading, but a few sections put
   it straight on the h2. Without this those headings drop to the base h2
   size and read a rank too small. */
h2.sp-head, h2.sp-head--center {
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.08; font-weight: 600; letter-spacing: -0.022em;
}
h2.sp-head .sp-gold { color: var(--gold-dark); }
.section--dark h2.sp-head .sp-gold { color: var(--gold-light); }
.sp-head h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.08; font-weight: 600; letter-spacing: -0.022em;
}
.sp-head h2 .sp-gold { color: var(--gold-dark); }
.section--dark .sp-head h2 .sp-gold { color: var(--gold-light); }

/* ---- One heading scale for the whole acquisition page ------
   Every section title uses the same size, weight and tracking so
   nothing reads as a different rank. Sub-labels above card groups
   use .acq-sublabel, which is deliberately a different species. */
body.acq-page main h2,
body.acq-page .sp-head h2,
body.acq-page .sp-cta h2,
body.acq-page .acq-showcase-title,
body.acq-page .acq-ed-title,
body.acq-page .acq-inc-head h2 {
  font-size: clamp(2.15rem, 4.1vw, 3.5rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* gold accent inside any dark-section heading, not just .sp-head ones */
.section--dark h2 .sp-gold,
.acq-diff-head h2 .sp-gold { color: var(--gold-light); }
/* card copy uses the same gold emphasis as the body copy around it */
.acq-bento-card p strong,
.acq-point-card p strong { color: var(--gold-light); font-weight: 700; }
.acq-sublabel {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-dark); text-align: center; margin-bottom: 36px;
}
.section--dark .acq-sublabel { color: var(--gold-light); }

/* Big editorial lead paragraph (short, stacked lines allowed) */
.sp-lead {
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.5; font-weight: 400;
  color: var(--navy); letter-spacing: -0.01em;
}
.section--dark .sp-lead { color: #fff; }
.sp-lead .sp-accent { color: var(--gold-dark); }
.section--dark .sp-lead .sp-accent { color: var(--gold-light); }

/* body copy: fuller weight and darker ink so it reads as vibrant, not faint */
.sp-body { font-size: 17px; line-height: 1.78; color: #2b2b2b; font-weight: 400; }
.section--dark .sp-body { color: rgba(255,255,255,0.80); }
.sp-body + .sp-body { margin-top: 20px; }
.sp-body strong { font-weight: 700; color: var(--gold-dark); }
/* on dark sections the emphasised line is gold, everything around it stays white */
.section--dark .sp-body strong { color: var(--gold-light); font-weight: 700; }

.sp-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
.sp-actions--center { justify-content: center; }

/* ---- Feature split (text + media) -------------------------- */
.sp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center; }
.sp-split--reverse .sp-split-text { order: 2; }
.sp-split-media {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #ece8df 0%, #d7d1c3 100%);
  box-shadow: 0 30px 70px rgba(20,20,20,0.16);
}
.section--dark .sp-split-media {
  background: linear-gradient(135deg, #1a1a1a, #0c0c0c);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.sp-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-split-media[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(120,110,80,0.6); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.section--dark .sp-split-media[data-placeholder]::after { color: rgba(217,196,138,0.4); }

/* ---- Card grid (solutions / reasons / types) --------------- */
.sp-grid { display: grid; gap: 22px; }
.sp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sp-card {
  position: relative; padding: 34px 30px 32px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s;
}
/* Dara: the gold rule that swept left-to-right across a card on hover is
   gone site-wide. The card keeps its lift and its gold glow. */
.sp-card:hover { transform: translateY(-6px); border-color: rgba(181,155,72,0.7); }
.sp-card-index { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); display: block; margin-bottom: 16px; }
.sp-card h3 { font-size: 18.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--navy); }
.sp-card p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); font-weight: 300; }
.section--dark .sp-card { background: #0f0f0f; border-color: rgba(255,255,255,0.09); }
.section--dark .sp-card h3 { color: #fff; }
.section--dark .sp-card p { color: rgba(255,255,255,0.58); }

/* ---- Gold hover glow, shared by every card on the site ------
   One rule so acquisition, charter, concierge and the homepage
   all light up the same way. Keep any card's own transform in its
   own :hover rule; this only owns the glow. */
.sp-card,
.sp-diff-item,
.acq-bento-card,
.acq-point-card {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s, filter .5s;
}
.sp-card:hover {
  box-shadow:
    0 26px 54px rgba(20,20,20,0.12),
    0 0 0 1px rgba(181,155,72,0.55),
    0 14px 52px -6px rgba(181,155,72,0.45);
}
.section--dark .sp-card:hover,
.section--dark .acq-bento-card:hover,
.ch-why-card:hover,
.ch-svc-card:hover {
  box-shadow:
    0 0 0 1px rgba(217,196,138,0.6),
    0 20px 62px -8px rgba(181,155,72,0.55);
}
/* ---- Gold cursor-follow edge glow -------------------------
   The homepage treatment, lifted verbatim: a radial gold gradient
   masked down to a hairline ring that tracks the pointer. Any
   picture panel that carries .zg-glow gets it. */
.zg-glow { position: relative; }
.zg-glow::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 .3s ease; pointer-events: none; z-index: 6;
}
.zg-glow:hover::after { opacity: 1; }

/* photo panels also lift a gold halo behind them */
.acq-point-card:hover,
.acq-adv-shot:hover,
.sp-split-media:hover,
.acq-diff-card:hover,
/* the 3A figure is clipped to a custom shape, so a ring would be cut off;
   a drop-shadow follows the silhouette instead */
.acq-ed-hero { transition: box-shadow .55s ease; }
.acq-ed-hero:hover { box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 34px rgba(217,196,138,0.42); }
/* the rotating stack in section 2 */
.acq-stack-img { transition: transform 1.6s cubic-bezier(.16,.8,.28,1), opacity 1.6s ease, box-shadow .5s ease; }
.acq-stack:hover .acq-stack-img {
  box-shadow: 0 34px 70px rgba(20,20,20,0.3), 0 0 0 1.5px rgba(217,196,138,0.7), 0 0 44px rgba(181,155,72,0.5);
}
/* the difference blocks have no border, so the glow reads as a lit rule */
.sp-diff-item:hover h3 {
  border-top-color: var(--gold-light);
  box-shadow: 0 -3px 26px -2px rgba(181,155,72,0.85);
}

/* ---- Page CTAs: the homepage closing-section pills -----------
   Same magnetic glass pill used in #journey on the homepage, applied
   to every CTA inside <main>. The header CTA lives outside <main>,
   so it keeps its own gold look untouched. */
body.acq-page main .btn {
  position: relative;
  padding: 15px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap; will-change: transform;
  transition: transform .4s cubic-bezier(0.16,1,0.3,1), background .4s, border-color .4s, box-shadow .4s;
}
/* primary reads as the gold pill */
body.acq-page main .btn-primary {
  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);
}
body.acq-page main .btn-primary:hover {
  background: linear-gradient(145deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  border-color: var(--gold-light);
  box-shadow: 0 18px 46px -8px rgba(181,155,72,0.78), inset 0 1px 1px rgba(255,255,255,0.50);
}
/* secondaries read as the glass pill */
body.acq-page main .btn-outline-light,
body.acq-page main .btn-outline {
  color: #fff;
  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);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
body.acq-page main .btn-outline-light:hover,
body.acq-page main .btn-outline:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  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);
}
/* on cream sections the glass pill needs dark ink to stay legible */
body.acq-page .sp-cream .btn-outline,
body.acq-page .sp-cream .btn-outline-light {
  color: var(--navy);
  background: linear-gradient(145deg, rgba(20,20,20,0.05), rgba(20,20,20,0.02));
  border-color: rgba(34,34,34,0.18);
  box-shadow: 0 10px 26px -12px rgba(20,20,20,0.4), inset 0 1px 1px rgba(255,255,255,0.6);
}
body.acq-page main .btn:active { transform: translateY(0) scale(0.98); }

/* ---- Checklist (gold ticks) -------------------------------- */
.sp-checklist { display: grid; gap: 15px; }
.sp-checklist li { position: relative; padding-left: 40px; font-size: 16px; line-height: 1.6; color: #2f2f2f; font-weight: 400; }
.section--dark .sp-checklist li { color: rgba(255,255,255,0.82); }
.sp-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(181,155,72,0.12); border: 1px solid var(--gold);
}
.sp-checklist li::after {
  content: "✓"; position: absolute; left: 7px; top: 1px;
  color: var(--gold-dark); font-size: 12px; font-weight: 700;
}
.section--dark .sp-checklist li::after { color: var(--gold-light); }

/* ---- Numbered promise / pledge rows ------------------------ */
.sp-rows { display: grid; }
.sp-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 34px;
  padding: 40px 0; border-top: 1px solid var(--line);
}
.section--dark .sp-row { border-color: rgba(255,255,255,0.1); }
.sp-row:last-child { border-bottom: 1px solid var(--line); }
.section--dark .sp-row:last-child { border-bottom-color: rgba(255,255,255,0.1); }
.sp-row-n {
  font-size: 46px; font-weight: 600; color: var(--gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.sp-row h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--navy); }
.section--dark .sp-row h3 { color: #fff; }
.sp-row p { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft); font-weight: 300; }
.section--dark .sp-row p { color: rgba(255,255,255,0.6); }
.sp-row p + p { margin-top: 12px; }

/* ---- "The Difference" grid --------------------------------- */
.sp-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 52px; }
.sp-diff-item h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  padding-top: 20px; border-top: 2px solid var(--gold);
  margin-bottom: 12px; color: var(--navy);
}
.section--dark .sp-diff-item h3 { color: #fff; }
.sp-diff-item p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); font-weight: 300; }
.section--dark .sp-diff-item p { color: rgba(255,255,255,0.6); }
.sp-diff-item p + p { margin-top: 10px; }

/* ---- CTA band ---------------------------------------------- */
.sp-cta {
  position: relative; text-align: center; color: #fff;
  padding: 120px 0;
  background: radial-gradient(120% 130% at 50% 0%, #2a2a2a 0%, var(--navy-2) 60%, #0b0b0b 100%);
  overflow: hidden;
}
.sp-cta::after {
  content: ""; position: absolute; left: 50%; top: -30%; width: 90%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(181,155,72,0.14), transparent 70%);
  pointer-events: none;
}
.sp-cta .container { position: relative; z-index: 2; }
.sp-cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.sp-cta p { color: rgba(255,255,255,0.72); max-width: 640px; margin: 22px auto 0; font-size: 17px; line-height: 1.7; font-weight: 300; }
.sp-cta .sp-actions { margin-top: 40px; justify-content: center; }

/* ---- Charter booking form ---------------------------------- */
.sp-form {
  max-width: 1000px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 44px; box-shadow: 0 34px 80px rgba(20,20,20,0.10);
}
.sp-form-head { margin-bottom: 30px; }
.sp-form-head h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.sp-form-head p { color: var(--ink-soft); font-size: 14.5px; margin-top: 6px; }
.sp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.sp-field { display: flex; flex-direction: column; }
.sp-field--full { grid-column: 1 / -1; }
.sp-field label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-weight: 600; margin-bottom: 9px; }
.sp-field input, .sp-field select, .sp-field textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--cream); color: var(--ink);
  font-family: inherit; font-size: 15px; transition: border-color .3s, box-shadow .3s;
}
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(181,155,72,0.14); background: #fff;
}
.sp-field textarea { resize: vertical; min-height: 96px; }
.sp-form-actions { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.sp-form-note { font-size: 12.5px; color: var(--ink-soft); }

/* ---- Small utilities --------------------------------------- */
.sp-rule { width: 60px; height: 2px; background: var(--gold); margin: 26px auto 0; }
.sp-center { text-align: center; }
.sp-maxw { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 1024px){
  .sp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .sp-split { grid-template-columns: 1fr; gap: 40px; }
  .sp-split--reverse .sp-split-text { order: 0; }
  .sp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sp-diff { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; }
}
@media (max-width: 640px){
  .sp-grid--2, .sp-grid--3, .sp-grid--4 { grid-template-columns: 1fr; }
  .sp-diff { grid-template-columns: 1fr; }
  .sp-form { padding: 28px; }
  .sp-form-grid { grid-template-columns: 1fr; }
  .sp-row { grid-template-columns: 1fr; gap: 12px; }
  .sp-row-n { font-size: 38px; }
  .sp-hero { min-height: 74vh; padding: 150px 0 80px; }
}

/* ============================================================
   AIRCRAFT ACQUISITION — image-led parallax hero, auto-rotating
   showcase, editorial dark section, CTA imagery.
   (client photography, no text-only placeholders)
   ============================================================ */

/* ---- Hero: full scene + aligned front plane -----------------
   The section is sized to the SCENE's own aspect ratio, so the plane
   cut-out (positioned in % below) lands exactly on the background plane.
   Nudge --plane-* if it ever drifts. */
.sp-hero--parallax {
  position: relative; width: 100%;
  overflow: hidden; padding: 0; display: block;
  background: #0c0c0c;
  /* The backdrop is the full scene, which already contains the aircraft, so
     the PNG must land exactly on top of it. These three values were derived
     by image-matching the cut-out against the photo — do not eyeball them.
     The section's aspect-ratio equals the photo's, so % map 1:1 to the image. */
  --plane-left: 13.08%;
  --plane-top: 24.03%;
  --plane-width: 82.75%;
  /* how far the whole scene rides up, freeing clear space under the
     aircraft for the intro copy. Applied to the wrapper, so the backdrop
     and the cut-out move as one and stay welded together. */
  --scene-lift: 10%;
  /* pushes the whole scene down so the headline sits in clear sky.
     Both layers scale about the SAME page point (the hero's top-centre),
     which is why the plane carries a matching negative-Y origin below. */
  /* the scene is oversized instead of zoomed: same fill, but both layers
     live in one box so the cut-out can never drift off the backdrop */
  --scene-zoom: 1;
}
/* the scene keeps the photo's own aspect ratio, so the % coordinates below
   still land the cut-out exactly on the aircraft in the backdrop */
.acq-hero-stage {
  position: relative; width: 100%;
  height: 100vh; min-height: 620px;
  overflow: hidden;
}
/* wider than the stage so the photograph runs taller than the frame; the
   sides crop, and the aircraft rides up to leave clear space beneath it */
.acq-hero-scene {
  position: absolute; top: 0; left: 50%; z-index: 0;
  /* wide enough to cover the screen at any shape, and always the photo's
     own ratio so the cut-out keeps landing on the aircraft beneath it */
  width: max(128%, 180vh); aspect-ratio: 2752 / 1536;
  transform: translateX(-50%) translateY(calc(var(--scene-lift) * -1));
}
/* keeps the copy legible over the lower half of the photograph */
.acq-hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,8,0.34) 0%, rgba(8,8,8,0.05) 26%, rgba(8,8,8,0.30) 58%, rgba(8,8,8,0.80) 86%, rgba(8,8,8,0.94) 100%);
}
.acq-hero-bg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform-origin: 50% 0%;
  transform: scale(var(--scene-zoom));
  will-change: transform;
  filter: brightness(0.78) contrast(1.03);
}
/* heading — behind the plane, sitting lower in Dara's marked band */
.acq-hero-head {
  position: absolute; z-index: 2;
  left: 0; right: 0; top: 21%;
  padding: 0 34px;
  text-align: center; will-change: transform, opacity;
}
/* Dara: "Aircraft Acquisition should be on one line, in the centre of the
   hero image." The three spans read as one line and the type is sized to
   fit the measure rather than wrap. */
/* line one is the name, line two is the promise */
.acq-hero-head h1 > span { display: inline; }
.acq-hero-head h1 .sp-gold { display: block; }
.acq-hero-head h1 { white-space: nowrap; }
.acq-hero-head .sp-hero-eyebrow {
  color: var(--gold-light); margin-bottom: 12px;
  text-shadow: 0 2px 22px rgba(0,0,0,0.65);
}
.acq-hero-head h1 {
  color: #fff; font-weight: 400;
  font-size: clamp(1.5rem, 5.1vw, 4.6rem); line-height: 1.05; letter-spacing: -0.02em;
  text-shadow: 0 4px 48px rgba(0,0,0,0.52);
}
/* Dara: the hero copy line is all white — no gold on this one */
.sp-hero--parallax h1 .sp-gold { color: #fff; }
/* aircraft cut-out — in FRONT of the heading, casting a shadow onto it */
.acq-hero-plane {
  position: absolute; z-index: 3;
  left: var(--plane-left); top: var(--plane-top); width: var(--plane-width); height: auto;
  filter: brightness(0.78) contrast(1.03) drop-shadow(-16px 20px 30px rgba(0,0,0,0.55));
  pointer-events: none; will-change: transform;
  /* the hero's top-centre expressed inside this box, so the cut-out scales
     about the same point as the backdrop: x = (50-13.08)/82.75,
     y = (0-24.03)/54.488  (54.488% = the plane's rendered height) */
  transform-origin: 44.62% -44.10%;
  transform: scale(var(--scene-zoom));
}
/* intro block — anchored to Dara's marked band: body ~70-83%, CTA below */
.acq-hero-intro {
  position: absolute; z-index: 4;
  left: 0; right: 0; top: 69.5%; bottom: auto;
  text-align: center;
}
.sp-hero .acq-hero-intro > .container { max-width: 1360px; text-align: center; }
/* Dara's frame: the body copy must not spill wider than the marked box */
.acq-hero-body {
  max-width: 640px; margin-left: auto; margin-right: auto;
  color: rgba(255,255,255,0.92); font-weight: 400;
  font-size: clamp(12.5px, 1.05vw, 15.5px); line-height: 1.6;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7);
  letter-spacing: -0.003em;
}
.acq-hero-body strong { color: #fff; font-weight: 500; }
.acq-hero-ctas {
  margin-top: clamp(18px, 3vh, 30px);
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
/* "the CTAs don't have to be that long or that wide" — tighter hero
   buttons only; written against body/main to outrank the site button pass */
body.acq-page main .acq-hero-ctas .btn {
  padding: 12px 20px; font-size: 11px; letter-spacing: 0.09em;
}
@media (max-width: 1100px){
  .acq-hero-head { top: 16%; }
}
/* TABLET — Dara: the copy and CTA sit too low here; they belong up
   under the aircraft, still on the photograph. */
@media (min-width: 768px) and (max-width: 1100px){
  .sp-hero--parallax { --scene-lift: 4%; }
  .acq-hero-head { top: 14%; }
  /* just clear of the aircraft's wheels, mirroring the desktop band */
  .acq-hero-intro { position: absolute; top: 73%; bottom: auto; margin-top: 0; }
  .acq-hero-body { font-size: clamp(12px, 1.5vw, 14px); max-width: 78%; }
  body.acq-page main .acq-hero-ctas .btn { padding: 11px 16px; font-size: 10.5px; letter-spacing: 0.07em; }
  .acq-hero-shade {
    background: linear-gradient(180deg, rgba(8,8,8,0.34) 0%, rgba(8,8,8,0.05) 24%, rgba(8,8,8,0.44) 52%, rgba(8,8,8,0.88) 86%, rgba(8,8,8,0.96) 100%);
  }
}
/* PHONE — the photo cannot hold three stacked blocks, so the intro drops
   below the picture and the scene sits back at its natural height */
@media (max-width: 767px){
  .sp-hero--parallax { --scene-lift: 0%; padding-bottom: clamp(40px, 6vh, 72px); }
  .acq-hero-intro { position: relative; top: auto; bottom: auto; margin-top: clamp(26px, 4vh, 40px); }
  .acq-hero-body { font-size: 15px; max-width: 62ch; }
  .acq-hero-shade { background: linear-gradient(180deg, rgba(8,8,8,0.34) 0%, rgba(8,8,8,0.06) 40%, rgba(8,8,8,0.55) 100%); }
}
@media (max-width: 767px){
  .acq-hero-stage { aspect-ratio: auto; min-height: 62vh; }
  .acq-hero-bg { object-position: 60% center; filter: brightness(0.74) contrast(1.03); }
  .acq-hero-plane { display: none; }
  .acq-hero-head { top: 30%; }
  .acq-hero-head h1 { white-space: normal; }
  .acq-hero-head h1 > span { display: block; }
  .acq-hero-body { font-size: 16px; }
}

/* ---- Section 2: auto-rotating image showcase -------------- */
.acq-showcase-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 84px; align-items: start;
}
.acq-showcase-media { position: relative; }
/* offset by the eyebrow's height so the right column's first line starts
   level with "One of the Biggest Purchases" on the left */
.acq-showcase-text { padding-top: 37px; }
.acq-stack {
  position: relative;
  width: 100%; aspect-ratio: 5 / 4;
  perspective: 1400px;
}
.acq-stack-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 18px;
  box-shadow: 0 34px 70px rgba(20,20,20,0.30);
  transform-origin: center center;
  /* slowed right down, per the client */
  transition: transform 1.6s cubic-bezier(.16,.8,.28,1), opacity 1.6s ease;
  backface-visibility: hidden; user-select: none;
}
/* closing statement, closes the right-hand column */
.acq-showcase-aside {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.35vw, 1.32rem);
  line-height: 1.5; font-weight: 400; color: var(--navy);
  letter-spacing: -0.01em;
}
.acq-showcase-aside .sp-accent { color: var(--gold-dark); font-weight: 500; }

/* bigger, bolder main copyline — sits above the image, left column.
   Dara: "The Decision" is gold, the line under it is black, a bit
   smaller but still big and bold, breaking onto two lines. */
.acq-showcase-title {
  font-size: clamp(2.3rem, 3.9vw, 3.5rem);
  line-height: 1.02; font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: var(--gold-dark);
}
.acq-showcase-title .sp-gold { color: var(--gold-dark); }
/* written against the section so it outranks the later .sp-subhead block */
.acq-showcase .acq-showcase-sub,
p.sp-subhead.acq-showcase-sub {
  color: var(--navy); font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.08; letter-spacing: -0.022em;
  max-width: none;
  margin: 0 0 30px;
}
.acq-showcase-text .sp-lead {
  font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.42;
}
.acq-showcase-text .sp-body {
  font-size: 14.5px; line-height: 1.66; margin-top: 15px; color: #444;
}
@media (max-width: 900px){
  .acq-showcase-grid { grid-template-columns: 1fr; gap: 34px; }
  .acq-showcase-media { max-width: 560px; margin: 0 auto; width: 100%; }
  .acq-showcase-text { padding-top: 0; }
}

/* ---- Section 3A: editorial dark (JetVault) ----------------
   Client: "the JetVault Experience is literally the whole concept, this is
   the big thing" and "this is where that picture should be, this whole
   thing should be a massive section". So the opening screen is the copy
   line over one large photograph, and the paragraph wall that followed is
   now four numbered stages you scroll through. */
.acq-editorial {
  /* floor is set by the fixed header (92px): the section pins at top 0, so
     anything less would slide the eyebrow underneath the nav */
  padding-top: clamp(96px, 11.6vh, 104px);
  padding-bottom: clamp(64px, 8vh, 104px);
}
.acq-editorial .acq-ed-eyebrow { margin-bottom: 10px; }
.acq-ed-title {
  font-size: clamp(2.6rem, 6vw, 5.1rem);
  line-height: 1.02; font-weight: 400; letter-spacing: -0.02em;
  color: #fff;
  max-width: 22ch;
}
/* forced break: line one is the statement, line two is the payoff */
.acq-ed-title .sp-gold { color: var(--gold-light); display: block; }

/* the big picture: the Experience Centre scene, full width of the column */
.acq-ed-hero {
  position: relative; width: 100%;
  margin: clamp(30px, 4.2vh, 52px) 0 0;
  aspect-ratio: 12 / 5;
  max-height: 50vh;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55);
}
.acq-ed-hero img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 42%;
  transform: scale(1.02); transform-origin: 50% 50%;
  filter: brightness(0.94) contrast(1.03);
  transition: transform 2s cubic-bezier(.2,.7,.2,1);
}
.acq-ed-hero:hover img { transform: scale(1.06); }
.acq-ed-hero-lead {
  margin: clamp(20px, 2.8vh, 32px) 0 0;
  max-width: 58ch;
  color: #fff; font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5;
  letter-spacing: -0.006em;
}

/* the four stages: one at a time, down the page */
.acq-steps {
  list-style: none; margin: clamp(56px, 8vh, 96px) 0 0; padding: 0;
  max-width: 92rem;
}
.acq-step {
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(30px, 4vh, 46px) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.acq-step:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.acq-step-n {
  font-family: var(--sans, inherit);
  font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 0.85;
  font-weight: 300; letter-spacing: -0.02em;
  color: var(--gold-light); opacity: 0.9;
}
.acq-step .sp-body {
  margin: 0; color: rgba(255,255,255,0.80);
  font-size: clamp(15.5px, 1.22vw, 18.5px); line-height: 1.66;
  max-width: 68ch;
}
.acq-step .sp-body strong { color: #fff; font-weight: 500; }

/* JetVault closing statement, now the tail of 3A */
.acq-ed-close {
  margin-top: clamp(46px, 6vh, 80px);
  text-align: center;
}
.acq-ed-close-lead {
  color: #fff; font-weight: 400; letter-spacing: -0.012em;
  font-size: clamp(1.35rem, 2.5vw, 2.3rem); line-height: 1.32;
  max-width: 30ch; margin: 0 auto;
}
.acq-ed-close-sub {
  color: var(--gold-light); font-weight: 500;
  font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.5;
  margin: clamp(14px, 2vh, 22px) auto 0; max-width: 62ch;
}

@media (max-width: 700px){
  .acq-ed-hero { aspect-ratio: 4 / 3; max-height: none; }
  .acq-step { grid-template-columns: 1fr; gap: 12px; }
  .acq-step-n { font-size: 2.2rem; }
}


/* ---- Section backdrops: real sky ---------------------------
   Client: "these are aviation stuff... this should be clouds or something
   in the background. A wave doesn't really help anybody." The abstract
   WebGL fields are gone; these are photographs, dimmed right back and
   drifting slowly so they read as atmosphere, never as decoration. */
.acq-sky {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.acq-sky img {
  position: absolute; top: 50%; left: 50%;
  width: 116%; height: 116%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 0.20;
  filter: grayscale(0.55) brightness(0.72) contrast(1.06);
  animation: acqSkyDrift 68s ease-in-out infinite alternate;
}
.acq-sky--moody img { opacity: 0.24; filter: grayscale(0.35) brightness(0.55) contrast(1.1); }
/* "Inside The Experience": Dara wants the CLOUD BACKDROP itself black
   and white, under a black overlay (the cards are separately B&W). */
.acq-sky--clouds img { opacity: 1; filter: grayscale(1) contrast(1.1) brightness(0.9); }
.acq-sky--clouds::after {
  background:
    radial-gradient(90% 76% at 50% 44%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.66) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.30) 44%, rgba(0,0,0,0.68) 100%);
}
/* the sections stay legible: a dark wash over the photograph */
.acq-sky::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(76% 62% at 50% 44%, rgba(12,12,12,0.30) 0%, rgba(12,12,12,0.80) 100%),
    linear-gradient(180deg, rgba(12,12,12,0.72) 0%, rgba(12,12,12,0.38) 42%, rgba(12,12,12,0.82) 100%);
}
@keyframes acqSkyDrift {
  from { transform: translate(-50%, -50%) scale(1) translateX(-1.4%); }
  to   { transform: translate(-50%, -50%) scale(1.07) translateX(1.4%); }
}
@media (prefers-reduced-motion: reduce){ .acq-sky img { animation: none; } }
/* everything in these sections sits above the sky */
.acq-finding > .container, .acq-diff .acq-flow-inner > .container,
.acq-includes > .container { position: relative; z-index: 1; }
.acq-includes { position: relative; }

/* ---- Sub-headline under a section heading -------------------
   Client: "'Design your aircraft your way' should be the big thing;
   'why settle for an aircraft designed for someone else' smaller." */
/* The sub-line under a section's display heading.
   Client: the small label above each heading is the real copy line; what
   used to be the big heading now reads underneath it, smaller. */
.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; }
.sp-subhead--light,
.section--dark .sp-subhead,
.sp-cta .sp-subhead { color: rgba(255,255,255,0.66); }
.sp-center .sp-subhead, .sp-head--center + .sp-subhead,
.acq-inc-head .sp-subhead, .acq-diff-head .sp-subhead { margin-left: auto; margin-right: auto; }
/* .sp-subhead carries a max-width, so inside a centred head it needs auto
   margins or it hangs off to the left under its heading */
.sp-head--center .sp-subhead,
.sp-head--center .sp-body,
.sp-center .sp-subhead { margin-left: auto; margin-right: auto; }

/* ---- Section 3B: the JetVault inclusions ------------------- */
.acq-includes { padding: 0; overflow-x: clip; }
.acq-inc-head { text-align: center; max-width: 860px; margin: 0 auto; }
.acq-inc-head h2 { line-height: 1.1; color: #fff; }
.acq-inc-head h2 .sp-gold { color: var(--gold-light); }
.acq-inc-head p:not(.eyebrow) { color: rgba(255,255,255,0.6); font-size: 16px; margin-top: 14px; font-weight: 300; }

/* ---- CTA band with imagery --------------------------------
   Fully monochrome and lifted in contrast so it reads as a
   cinematic still rather than a tinted photo. */
.acq-cta { position: relative; }
.acq-cta-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.46;
  filter: grayscale(1) contrast(1.32) brightness(0.62);
  transform: scale(1.04);
}
/* letterbox vignette that pulls the eye into the centre of the frame */
.acq-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(78% 66% at 50% 46%, transparent 0%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.86) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.72) 0%, transparent 28%, transparent 70%, rgba(0,0,0,0.8) 100%);
}
.acq-cta .container { position: relative; z-index: 2; }

/* ============================================================
   ADVISORY — image collage left, copy right
   ============================================================ */
.acq-adv-collage { position: relative; height: 100%; min-height: 34rem; width: 100%; }
.acq-adv-shot {
  position: absolute; border-radius: 20px; overflow: hidden;
  background: #ded8ca; padding: 8px;
  box-shadow: 0 24px 54px rgba(20,20,20,0.22);
  opacity: 0; transform: scale(0.84);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1), box-shadow .5s;
}
.acq-adv-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.acq-adv-shot:hover { box-shadow: 0 0 0 1.5px rgba(217,196,138,0.8), 0 22px 60px -6px rgba(181,155,72,0.55); }
.acq-adv-collage.is-in .acq-adv-shot { opacity: 1; transform: scale(1); }
/* larger plates: the artwork should hold its own against the copy */
.acq-adv-shot--a { left: 50%; top: 0; width: 21rem; height: 21rem; margin-left: -10.5rem; transform-origin: bottom center; transition-delay: .05s; }
.acq-adv-shot--b { right: 0; top: 34%; width: 17rem; height: 17rem; transform-origin: left center; transition-delay: .18s; }
.acq-adv-shot--c { left: 0; bottom: 0; width: 15rem; height: 15rem; transform-origin: top right; transition-delay: .31s; }
.acq-adv-orb { position: absolute; border-radius: 50%; animation: advFloat 3.4s ease-in-out infinite; }
.acq-adv-orb--1 { top: -1rem; left: 25%; width: 4rem; height: 4rem; background: rgba(181,155,72,0.22); }
.acq-adv-orb--2 { bottom: 1rem; right: 24%; width: 3rem; height: 3rem; border-radius: 12px; background: rgba(181,155,72,0.16); animation-delay: .5s; }
.acq-adv-orb--3 { bottom: 28%; left: 1rem; width: 1.5rem; height: 1.5rem; background: rgba(138,116,52,0.28); animation-delay: 1s; }
@keyframes advFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.acq-adv-pillars { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 30px; }
.acq-adv-pillar { display: flex; align-items: center; gap: 13px; }
.acq-adv-pillar-icon {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gold); color: var(--gold-dark);
  background: rgba(181,155,72,0.10);
}
.acq-adv-pillar-icon svg { width: 19px; height: 19px; display: block; }
.acq-adv-pillar strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.2; }
/* scoped to the copy wrapper only: a bare ".acq-adv-pillar span" also matched
   the icon span and forced it to display:block, which broke the circles */
.acq-adv-pillar-copy { display: block; }
.acq-adv-pillar-copy span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 900px){
  .acq-adv-grid { grid-template-columns: 1fr; gap: 44px; }
  .acq-adv-collage { height: 26rem; min-height: 0; max-width: 30rem; margin: 0 auto; }
  .acq-adv-shot--a { width: 13rem; height: 13rem; margin-left: -6.5rem; }
  .acq-adv-shot--b { width: 11rem; height: 11rem; }
  .acq-adv-shot--c { width: 10rem; height: 10rem; }
}

/* ============================================================
   SOURCING — dark, split copy, bento card grid
   ============================================================ */
/* layered gradient ground: corner-lit radial, skewed light streaks,
   film noise, dot matrix. Streaks are brand gold rather than the
   reference's cyan; change --streak to go back to rgb(0,207,255). */
.acq-sourcing { overflow: hidden; background: #000; --streak: 217,196,138; }
/* dialled back so the streaks and dot matrix never fight the copy */
.acq-grad-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; }
.acq-grad-core {
  position: absolute; inset: 0;
  background: radial-gradient(100% 100% at 0% 0%, rgb(46,46,46) 0%, rgb(0,0,0) 100%);
  -webkit-mask-image: radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0,0,0,0.224) 88.2883%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0,0,0,0.224) 88.2883%, rgba(0,0,0,0) 100%);
}
.acq-grad-streak {
  position: absolute; inset: 0; display: block; opacity: 0.20;
  background: linear-gradient(rgba(var(--streak),1) 0%, rgba(var(--streak),0) 100%);
  transform: skewX(45deg);
}
.acq-grad-streak--1 {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%, rgba(0,0,0,0) 36%, #000 55%, rgba(0,0,0,0.13) 67%, #000 78%, rgba(0,0,0,0) 97%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%, rgba(0,0,0,0) 36%, #000 55%, rgba(0,0,0,0.13) 67%, #000 78%, rgba(0,0,0,0) 97%);
}
.acq-grad-streak--2 {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 11%, #000 25%, rgba(0,0,0,0.55) 41%, rgba(0,0,0,0.13) 67%, #000 78%, rgba(0,0,0,0) 97%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 11%, #000 25%, rgba(0,0,0,0.55) 41%, rgba(0,0,0,0.13) 67%, #000 78%, rgba(0,0,0,0) 97%);
}
.acq-grad-streak--3 {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 9%, #000 20%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.424) 40%, #000 48%, rgba(0,0,0,0.267) 54%, rgba(0,0,0,0.13) 78%, #000 88%, rgba(0,0,0,0) 97%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 9%, #000 20%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.424) 40%, #000 48%, rgba(0,0,0,0.267) 54%, rgba(0,0,0,0.13) 78%, #000 88%, rgba(0,0,0,0) 97%);
}
.acq-grad-streak--4 {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 17%, rgba(0,0,0,0.55) 26%, #000 35%, rgba(0,0,0,0) 47%, rgba(0,0,0,0.13) 69%, #000 79%, rgba(0,0,0,0) 97%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 17%, rgba(0,0,0,0.55) 26%, #000 35%, rgba(0,0,0,0) 47%, rgba(0,0,0,0.13) 69%, #000 79%, rgba(0,0,0,0) 97%);
}
.acq-grad-streak--5 {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%, rgba(0,0,0,0.55) 27%, #000 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.13) 67%, #000 74%, #000 82%, rgba(0,0,0,0.47) 88%, rgba(0,0,0,0) 97%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%, rgba(0,0,0,0.55) 27%, #000 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.13) 67%, #000 74%, #000 82%, rgba(0,0,0,0.47) 88%, rgba(0,0,0,0) 97%);
}
/* locally generated tile rather than a hotlinked CDN asset */
.acq-grad-noise {
  position: absolute; inset: 0; opacity: 0.05;
  background-image: url("../assets/img/noise-tile.png");
  background-size: 149.76px;
}
.acq-grad-dots {
  position: absolute; inset: 0; opacity: 0.12;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.5) 1px, transparent 0);
  background-size: 20px 20px;
}
.acq-grad-halo {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 40%, rgba(120,120,130,0.20), transparent 70%);
}
.acq-src-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px 64px; align-items: stretch; margin-bottom: 54px;
}
/* the right column is shorter than the heading column, so it centres in the
   shared row height: equal breathing room above and below instead of a
   ragged bottom edge */
.acq-src-head, .acq-src-rest { display: flex; flex-direction: column; justify-content: center; }
.acq-src-head { justify-content: flex-start; }
/* one column, not two: the pair reads as an even left/right split */
.acq-src-rest { column-count: 1; }
.acq-src-rest .sp-body { margin-top: 0; margin-bottom: 18px; break-inside: avoid; }
.acq-src-head .eyebrow { margin-bottom: 14px; }
.acq-src-head .sp-body { margin-top: 22px; }
.acq-src-line {
  text-align: center; max-width: 900px; margin: 0 auto 58px;
  padding-top: 34px; border-top: 1px solid rgba(255,255,255,0.12);
}
/* ---- Section 7 split: picture height tracks the copy beside it -- */
body.acq-page .sp-split { align-items: stretch; }
body.acq-page .sp-split-media { aspect-ratio: auto; min-height: 26rem; align-self: stretch; }
body.acq-page .sp-split-text { display: flex; flex-direction: column; justify-content: center; }

.acq-src-close { margin-top: 62px; }
.acq-src-close h3 { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 14px; }

/* ============================================================
   THE DIFFERENCE — pill, staggered title, image marquee
   ============================================================ */
/* NB: `overflow: hidden` here would make this a scroll container and
   silently kill the sticky deck inside. `clip` crops without that. */
.acq-diff { overflow: clip; padding-bottom: 0; background: #000; }
.acq-diff .acq-flow-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0.62) 100%);
}
/* the copy sits ABOVE that wash — at equal z-index the ::after painted
   over the heading and read as reduced opacity */
.acq-diff .acq-flow-inner > .jvdeck { position: relative; z-index: 2; }
.acq-diff-head { text-align: center; max-width: 860px; margin: 0 auto 62px; }
.acq-pill {
  display: inline-block; margin-bottom: 22px;
  padding: 7px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.acq-stagger-word { display: inline-block; opacity: 0; transform: translateY(14px); }
.acq-stagger.is-in .acq-stagger-word {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.3,1);
}
.acq-diff-head .sp-body { margin-top: 20px; }
.acq-diff-head .sp-actions { justify-content: center; }
/* The five points, simply laid out and numbered. No sliding: the client
   was explicit that waiting for a carousel to come round is the opposite
   of luxury, and that people read these one to five in order. */
.acq-point-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin-top: 64px;
}
.acq-point-card {
  position: relative; overflow: hidden;
  min-height: 26rem; border-radius: 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 1s cubic-bezier(.16,.8,.28,1), box-shadow 1s ease;
}
.acq-point-card:hover { transform: translateY(-6px); }
.acq-point-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* full colour, per the client: the black-and-white treatment read cold */
  filter: brightness(0.62) contrast(1.02);
  transition: filter 1.1s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.acq-point-card:hover .acq-point-media { filter: brightness(0.78); transform: scale(1.04); }
.acq-point-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6,6,6,0.94) 0%, rgba(6,6,6,0.78) 34%, rgba(6,6,6,0.34) 70%, rgba(6,6,6,0.06) 100%);
}
.acq-point-body { position: relative; z-index: 2; padding: 30px 28px 32px; }
.acq-point-index {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.28em;
  color: var(--gold-light); margin-bottom: 14px;
}
.acq-point-card h3 { color: #fff; font-size: 22px; line-height: 1.18; margin-bottom: 10px; }
.acq-point-card p { color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 1000px){ .acq-point-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .acq-point-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GET IT RIGHT ONCE — dark, right-aligned cut-reveal + figure
   ============================================================ */
.acq-cut-word {
  display: inline-flex; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.acq-cut-word > span {
  display: inline-block; transform: translateY(105%);
  transition: transform .9s cubic-bezier(.19,1.32,.36,1);
}
.acq-cut.is-in .acq-cut-word > span { transform: translateY(0); }
/* clean framed portrait: monochrome at rest, zooming into full colour
   with a gold wash on hover */
/* ============================================================
   ZPANELS — full-screen panels you scroll through, each with its
   own photograph, the next one wiping up over the last.
   (The NetJets homepage treatment Dara pointed at.)
   Progress is driven from JS via --zp on each panel: 0 = fully
   hidden below, 1 = fully covering the one before it.
   ============================================================ */
.zpanels { position: relative; }
.zpanels-stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: #0b0b0b;
}
.zpanel {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  overflow: hidden;
  will-change: clip-path;
}
/* every panel after the first is clipped from the bottom up */
.zpanel + .zpanel { clip-path: inset(calc((1 - var(--zp, 0)) * 100%) 0 0 0); }
.zpanel-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(1.08) translateY(calc((1 - var(--zp, 1)) * 7%));
  will-change: transform;
}
.zpanel-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.20) 34%, rgba(8,8,8,0.62) 72%, rgba(8,8,8,0.90) 100%),
    linear-gradient(90deg, rgba(8,8,8,0.68) 0%, rgba(8,8,8,0.18) 58%, rgba(8,8,8,0.05) 100%);
}
.zpanel-inner {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(56px, 9vh, 116px);
  transform: translateY(calc((1 - var(--zp, 1)) * 28px));
  opacity: calc(0.25 + var(--zp, 1) * 0.75);
}
.zpanel-index {
  font-family: var(--sans, inherit);
  font-size: 12px; font-weight: 600; letter-spacing: 0.28em;
  color: var(--gold-light); margin-bottom: 18px;
}
.zpanel-title {
  color: #fff; font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  line-height: 1.02; letter-spacing: -0.022em;
  max-width: 20ch;
}
.zpanel-title .sp-gold { color: var(--gold-light); }
.zpanel-sub {
  margin-top: 14px; max-width: 40ch;
  color: rgba(255,255,255,0.72);
  font-size: clamp(1.02rem, 1.5vw, 1.35rem); line-height: 1.35; font-weight: 400;
}
.zpanel-copy {
  margin-top: 20px; max-width: 62ch;
  color: rgba(255,255,255,0.82); font-weight: 400;
  font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.62;
}
.zpanel-copy strong { color: #fff; font-weight: 500; }
.zpanel-copy + .zpanel-copy { margin-top: 14px; }

/* short screens: the type steps down so three paragraphs still land */
@media (max-height: 800px){
  .zpanel-inner { padding-bottom: clamp(40px, 6vh, 72px); }
  .zpanel-title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
  .zpanel-copy { font-size: clamp(13.4px, 1.5vh, 15.5px); line-height: 1.55; margin-top: 14px; }
}
/* no pinning under reduced motion: the panels simply stack and read */
@media (prefers-reduced-motion: reduce){
  .zpanels { height: auto !important; }
  .zpanels-stage { position: static; height: auto; }
  .zpanel { position: relative; inset: auto; min-height: 78vh; clip-path: none !important; }
  .zpanel-bg { transform: none; }
  .zpanel-inner { transform: none; opacity: 1; padding-top: 90px; }
}
@media (max-width: 700px){
  .zpanel-inner { padding-bottom: 54px; }
  .zpanel-title { max-width: none; }
}


/* ============================================================
   ZCAROUSEL — portrait cards paged with arrows and a bar
   indicator. Dara: "portrait format, curved edges, and when you
   hover the card floats up and keeps floating."
   ============================================================ */
.zcarousel { position: relative; margin-top: clamp(22px, 3.4vh, 44px); }
/* Dara: the cards at the edges should dissolve away, not look cut off.
   The viewport bleeds past the container and fades on both sides, so a
   card leaving or entering melts out instead of hitting a hard edge.
   (Both host sections carry overflow-x: clip, so the bleed is safe.) */
.zcarousel-viewport {
  overflow: hidden;
  margin: 0 -60px; padding: 14px 60px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 62px, #000 calc(100% - 165px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 62px, #000 calc(100% - 165px), transparent 100%);
}
.zcarousel-track {
  display: flex; gap: clamp(14px, 1.5vw, 24px);
  transition: transform .85s cubic-bezier(.16,.8,.28,1);
  will-change: transform;
}
.zcard {
  position: relative; flex: 0 0 auto;
  width: clamp(12rem, 19vw, 17rem);
  height: clamp(15rem, 38vh, 22rem);
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #101010;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .7s cubic-bezier(.16,.8,.28,1), box-shadow .7s ease, border-color .7s ease;
}
/* Dara: full cinematic black and white on these — they never go to
   colour, and they carry a black wash so the copy always reads. */
.zcard-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.18) brightness(0.6);
  transform: scale(1.02);
  transition: filter .8s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.zcard-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.46) 44%, rgba(0,0,0,0.92) 100%);
}
.zcard-body { position: relative; z-index: 2; padding: 22px 20px 24px; }
.zcard-index {
  display: block; font-family: var(--sans, inherit);
  font-size: 22px; font-weight: 300; line-height: 1;
  color: var(--gold-light); margin-bottom: 12px;
}
.zcard h3 {
  color: #fff; font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.12rem); line-height: 1.3;
  letter-spacing: -0.004em;
}
/* the float: lifts on hover, then keeps drifting */
.zcard:hover {
  border-color: rgba(217,196,138,0.55);
  box-shadow: 0 34px 70px -18px rgba(0,0,0,0.75), 0 0 34px -4px rgba(181,155,72,0.55);
  animation: zcardFloat 3.2s ease-in-out infinite;
}
/* stays black and white on hover — it just lifts out of the dark */
.zcard:hover .zcard-media { filter: grayscale(1) contrast(1.14) brightness(0.82); transform: scale(1.07); }
@keyframes zcardFloat {
  0%   { transform: translateY(-14px); }
  50%  { transform: translateY(-24px); }
  100% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce){
  .zcard:hover { animation: none; transform: translateY(-8px); }
  .zcarousel-track { transition: none; }
}

/* controls */
.zcarousel-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: clamp(8px, 1.4vh, 18px);
}
.zcarousel-btn {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.34);
  transition: background .35s ease, border-color .35s ease, color .35s ease, opacity .35s ease;
}
.zcarousel-btn svg { width: 17px; height: 17px; }
.zcarousel-btn:hover { background: var(--gold); border-color: var(--gold); color: #1b190f; }
.zcarousel-btn[disabled] { opacity: 0.3; pointer-events: none; }
.zcarousel-bars { display: flex; gap: 7px; align-items: center; }
.zcarousel-bar {
  width: 30px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.22);
  transition: background .45s ease, width .45s ease;
}
.zcarousel-bar.is-on { background: var(--gold-light); width: 46px; }

@media (max-width: 700px){
  .zcard { width: 74vw; height: 60vh; }
}


/* The Difference: the five points on one horizontal row, portrait format
   so every card's copy fits without the row growing taller than a screen. */
.acq-point-grid--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
}
.acq-point-grid--5 > .acq-point-card {
  min-height: 0; aspect-ratio: 4 / 7;
  border-radius: 16px;
}
.acq-point-grid--5 .acq-point-body { padding: 22px 20px 24px; }
.acq-point-grid--5 .acq-point-index { font-size: 22px; margin-bottom: 10px; }
.acq-point-grid--5 h3 { font-size: clamp(0.95rem, 1.08vw, 1.1rem); line-height: 1.28; }
.acq-point-grid--5 p {
  margin-top: 10px; font-size: clamp(12.4px, 0.92vw, 13.6px); line-height: 1.5;
  color: rgba(255,255,255,0.76);
}
@media (max-width: 1100px){
  .acq-point-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .acq-point-grid--5 > .acq-point-card { aspect-ratio: auto; min-height: 24rem; }
}
@media (max-width: 700px){
  .acq-point-grid--5 { grid-template-columns: 1fr; }
}

/* ============================================================
   RESTORED LAYOUT BLOCK
   These rules were lost in an over-broad cleanup of the section-9
   styles; rewritten here against the JS contracts they serve
   (--a-stick / --wipe / --adv-stick / --flow-stick) and re-verified
   in the browser at 1440x900, 1366x700 and 390x844.
   ============================================================ */

/* ---- Section 2: the showcase closes tighter into the JetVault run,
   per the client's note about the block of white space. ---------- */
.acq-showcase { padding-bottom: clamp(56px, 7vh, 84px); }
.acq-showcase-grid { align-items: stretch; }
.acq-showcase-media { display: flex; flex-direction: column; }
.acq-showcase-media .acq-stack { flex: 1 1 auto; min-height: 0; }

/* ---- Section 4: copy left, the four criteria right ------------- */
.acq-finding { overflow: hidden; }
.acq-finding-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.acq-finding-text .sp-lead { color: #fff; }
.acq-finding-text .sp-body { color: rgba(255,255,255,0.76); margin-top: 16px; }
.acq-finding-text .sp-body strong { color: var(--gold-light); }
.acq-point-grid--4 {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 24px); margin-top: 0;
}
.acq-point-grid--4 > .acq-point-card { min-height: clamp(15rem, 30vh, 21rem); border-radius: 18px; }
.acq-point-grid--4 h3 { font-size: clamp(1.02rem, 1.25vw, 1.22rem); }
.acq-point-grid--4 p { font-size: clamp(12.6px, 0.95vw, 13.8px); line-height: 1.55; }
@media (max-width: 900px){
  .acq-finding-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px){
  .acq-point-grid--4 { grid-template-columns: 1fr; }
}

/* ---- Section 5: collage left, copy right ----------------------- */
.acq-adv { overflow: hidden; }
/* Dara: the collage tops and tails with the copy beside it — so the two
   columns stretch to a shared height and the shots are placed as
   percentages of it, overlapping where they meet. */
/* NB: the two-column definition lives in the min-width block below. Left
   unguarded here it overrode the max-width:900 single-column rule further
   up the file, so tablets were still getting the desktop split. */
.acq-adv-grid {
  display: grid;
  gap: clamp(40px, 5vw, 78px); align-items: stretch;
}
.acq-adv-text .sp-lead { color: var(--navy); }
.acq-adv-text .sp-accent { color: var(--gold-dark); font-weight: 500; }
/* "bring the other copies closer to the main copy line" */
.acq-adv-text h2.sp-head { margin-bottom: 14px; }
.acq-adv-text .sp-lead { margin: 0 0 14px; }
.acq-adv-text .sp-body { margin: 0 0 16px; }
.acq-adv-text .sp-actions { margin-top: 20px; }
.acq-adv-text .acq-adv-pillars { margin-top: 30px; }

@media (min-width: 901px){
  .acq-adv-grid { grid-template-columns: 1fr 1fr; }
  .acq-adv-collage { height: 100%; min-height: 0; }
  /* sized in % of the shared height so the stack always spans it exactly */
  .acq-adv-shot--a { top: 0;    height: 58%; width: 20rem; margin-left: -10rem; }
  .acq-adv-shot--b { top: 30%;  height: 46%; width: 16rem; }
  .acq-adv-shot--c { bottom: 0; height: 44%; width: 14rem; }
}

/* ---- Sourcing: two lines Dara asked to hold together ---------- */
@media (min-width: 901px){
  /* "Finding the right aircraft takes experience." keeps 'experience' up
     on the same line rather than dropping it on its own */
  .acq-src-line .sp-accent { white-space: nowrap; }
  /* the closing bold line starts fresh and reads as a single line */
  .acq-src-close .sp-body strong { display: block; margin-top: 12px; white-space: nowrap; }
}

/* ---- Section 6: the bento, reading strictly 01 to 05 ----------- */
.acq-bento { display: grid; gap: 22px; }
.acq-bento-card {
  position: relative; overflow: hidden;
  padding: 30px 28px; border-radius: 2px;
  background: #0f0f0f; border: 1px solid rgba(255,255,255,0.09);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s;
}
.acq-bento-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(0.5) contrast(1.05);
  transition: filter 1.1s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.acq-bento-card:hover .acq-bento-photo { filter: grayscale(0) brightness(0.72); transform: scale(1.05); }
.acq-bento-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6,6,6,0.94) 0%, rgba(6,6,6,0.76) 36%, rgba(6,6,6,0.30) 72%, rgba(6,6,6,0.05) 100%);
}
.acq-bento-card h3 { position: relative; z-index: 2; color: #fff; font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.acq-bento-card p  { position: relative; z-index: 2; color: rgba(255,255,255,0.78); font-size: 14.2px; line-height: 1.6; }
@media (min-width: 901px){
  .acq-bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(20rem, auto); }
  .acq-bento-card--a    { grid-column: span 4; }
  .acq-bento-card--tall { grid-column: span 4; padding: 34px 30px 32px; }
  .acq-bento-card--b    { grid-column: span 4; }
  .acq-bento-card--c    { grid-column: span 7; }
  .acq-bento-card--d    { grid-column: span 5; }
}
@media (max-width: 900px){
  .acq-bento { grid-template-columns: 1fr; }
  .acq-bento-card { min-height: 20rem; }
}

/* ---- Section 6: the plate that breaks the copy ----------------- */
.acq-src-figure {
  margin: clamp(44px, 5.5vh, 72px) 0 0;
  width: 100%; aspect-ratio: 16 / 9; max-height: 52vh;
  overflow: hidden; box-shadow: 0 34px 78px rgba(0,0,0,0.5);
}
.acq-src-figure img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 42%;
  filter: brightness(0.9) contrast(1.04);
  transform: scale(1.02);
  transition: transform 2s cubic-bezier(.2,.7,.2,1);
}
.acq-src-figure:hover img { transform: scale(1.06); }
@media (max-width: 700px){ .acq-src-figure { aspect-ratio: 4 / 3; max-height: none; } }

/* ============================================================
   3A -> 3B LINEAR WIPE
   The JetVault closing screen pins for the whole seam; 3B rides
   back over it, masked to exactly the band the aircraft has swept.
   --a-stick and --wipe are both written by initAcqSeam.
   ============================================================ */
.acq-seam { position: relative; background: #0b0b0b; --wipe: 0%; --a-stick: 0px; }
.acq-seam-a {
  position: sticky; top: var(--a-stick); z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: clamp(96px, 11.6vh, 108px); padding-bottom: clamp(48px, 7vh, 96px);
}
.acq-seam-a > .container { width: 100%; }
/* the runway: tall enough that the wipe always finishes before it ends */
.acq-wipe { position: relative; z-index: 2; height: 220vh; }
.acq-wipe-stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
}
/* 3B, masked to the swept band. The soft edges either side of --wipe are
   what makes the aircraft read as the wipe rather than a hard cut. */
.acq-wipe-b {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center;
  background: #0b0b0b;
  padding: clamp(52px, 9vh, 88px) 0 clamp(14px, 2.5vh, 24px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(var(--wipe) - 11%), rgba(0,0,0,0) calc(var(--wipe) + 11%));
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(var(--wipe) - 11%), rgba(0,0,0,0) calc(var(--wipe) + 11%));
}
/* stretches so its cloud backdrop covers the whole pinned screen */
.acq-wipe-b > .acq-includes {
  width: 100%; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
/* Dara: the aircraft "is meant to cover the whole section" and was reading
   cropped at the top. It now fills the pinned screen top to bottom and its
   width follows from the image's own ratio, so nothing is cut off. */
.acq-wipe-plane {
  position: absolute; top: 0; left: 0; z-index: 3;
  height: 100%;
  transform: translate3d(-200%, 0, 0);
  pointer-events: none;
  will-change: transform;
}
.acq-wipe-plane img {
  display: block; height: 100%; width: auto; max-width: none;
  flex: 0 0 auto;                      /* flex parents must not shrink it */
  filter: drop-shadow(0 26px 46px rgba(0,0,0,0.6));
}
/* reduced motion: no pinning, no mask, the two sections simply follow on */
@media (prefers-reduced-motion: reduce){
  .acq-seam-a { position: static; min-height: 0; }
  .acq-wipe { height: auto; }
  .acq-wipe-stage { position: static; height: auto; overflow: visible; }
  .acq-wipe-b { position: static; -webkit-mask-image: none; mask-image: none; padding: 96px 0; }
  .acq-wipe-plane { display: none; }
}

/* ---- Section 3B inside the pinned stage ------------------------ */
.acq-inc-cta { margin-top: clamp(10px, 1.8vh, 18px); margin-bottom: 0; }

/* ============================================================
   5 -> 6: the advisory section holds while sourcing rides over it
   (--adv-stick is written by initAcqPair)
   ============================================================ */
.acq-pair { position: relative; --adv-stick: 0px; }
.acq-pair > .acq-adv {
  position: sticky; top: var(--adv-stick); z-index: 1;
  min-height: 100vh; display: flex; align-items: center;
}
.acq-pair > .acq-adv > .container { width: 100%; }
.acq-pair > .acq-sourcing { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){
  .acq-pair > .acq-adv { position: static; min-height: 0; display: block; }
}

/* ============================================================
   7 -> 8: section 7 holds while The Difference rides up over it
   (--flow-stick is written by initAcqFlow). The diagonal swing the
   client called "haphazard" is gone: this is a straight vertical pin.
   ============================================================ */
.acq-flow { position: relative; --flow-stick: 0px; }
.acq-flow-hold {
  position: sticky; top: var(--flow-stick); z-index: 1;
  min-height: 100vh; display: flex; align-items: center;
}
.acq-flow-hold > .container { width: 100%; }
.acq-flow-in { position: relative; z-index: 2; }
.acq-flow-inner { position: relative; }
@media (prefers-reduced-motion: reduce){
  .acq-flow-hold { position: static; min-height: 0; display: block; }
}

/* ============================================================
   CHARTER HERO - scroll-scrubbed frame sequence on a canvas
   ============================================================ */
/* three pinned screens over the one scrubbed shot. Dara asked for the run
   to be shorter even with the extra screen, so each holds ~127vh rather
   than the 210vh two screens used before. */
.ch-hero { position: relative; height: 380vh; background: #0a0a0a; }
.ch-hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ch-hero-canvas,
.ch-hero-poster {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ch-hero-canvas { opacity: 0; transition: opacity .8s ease; }
.ch-hero-poster { z-index: 1; opacity: 1; transition: opacity .8s ease; }
.ch-hero.is-ready .ch-hero-canvas { opacity: 1; }
.ch-hero.is-ready .ch-hero-poster { opacity: 0; }
/* Dara: lighter than before, with a golden grade running through it so the
   footage reads warm rather than just dark. */
.ch-hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    /* the last stop runs to near-black so the deck exits into the night
       section's black top edge with no visible seam between them */
    /* Dara, 2026-08-13: carried further up so the hero copy reads clearly
       over the footage. The stops are the same shape, just heavier. */
    linear-gradient(180deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.48) 32%, rgba(0,0,0,0.56) 62%, rgba(0,0,0,0.84) 88%, rgba(0,0,0,0.96) 100%),
    radial-gradient(80% 64% at 50% 46%, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.60) 100%);
}
/* the gold wash sits over the wash, under the copy */
.ch-hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(155deg, rgba(226,196,120,0.30) 0%, rgba(181,155,72,0.16) 44%, rgba(70,52,16,0.30) 100%);
  mix-blend-mode: soft-light;
}
/* The copy layer is a .sp-hero, which carries its own opaque dark gradient.
   Inside the scrubbed hero that gradient would paint straight over the
   canvas and the whole thing reads as a black box, so it is cleared here. */
.ch-hero-copy {
  min-height: 0; padding: 92px 0 0; text-align: center;
  background: none;
}
.ch-hero-copy::after { display: none; }
/* Dara: the copy line and the body copy are pure white here, no gold */
.ch-hero-copy h1, .ch-hero-copy h1 .sp-gold { color: #fff; }
.ch-hero-copy .sp-hero-sub { color: #fff; }

/* ---- the two pinned screens ---------------------------------- */
.ch-deck { position: absolute; inset: 0; z-index: 3; }
.chpage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .55s ease, transform .85s cubic-bezier(.16,.8,.28,1);
  will-change: transform, opacity;
}
.chpage--copy { transform: translateY(-8vh); }
.chpage--form { transform: translateY(10vh); padding-top: 84px; }
.chpage--stmt { transform: translateY(10vh); padding-top: 84px; }
.chpage.is-on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.chpage > .container { width: 100%; }

/* which of the two you are on */
.chdeck-bars {
  position: absolute; z-index: 5;
  right: clamp(16px, 2.2vw, 40px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
}
.chdeck-bar {
  width: 2px; height: 40px; border-radius: 2px;
  background: rgba(255,255,255,0.24);
  transition: background .5s ease, height .5s ease;
}
.chdeck-bar.is-on { background: var(--gold-light); height: 64px; }

/* ---- the booking portal, dark over the footage ---------------- */
.ch-form-head { text-align: center; margin-bottom: clamp(10px, 1.8vh, 20px); }
.ch-form-head h2 {
  color: #fff; line-height: 1.08;
  font-size: clamp(1.35rem, 3.2vh, 2.3rem); margin: 0;
}
.ch-form-sub {
  color: var(--gold-light); margin: 8px 0 0;
  font-size: clamp(12px, 1.5vh, 14.5px);
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
}
/* Dara: glass — you can see the aircraft through it, softly blurred and
   glossy, but dark enough that the copy still pops. */
.ch-form {
  position: relative; max-width: 1080px; margin: 0 auto;
  background: linear-gradient(150deg, rgba(18,18,18,0.42) 0%, rgba(6,6,6,0.54) 55%, rgba(12,10,4,0.50) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 22px;
  padding: clamp(18px, 2.6vh, 30px) clamp(20px, 2.4vw, 34px);
  /* properly frosted: you can make out the cabin through it, softened */
  -webkit-backdrop-filter: blur(46px) saturate(1.35) brightness(0.86);
  backdrop-filter: blur(46px) saturate(1.35) brightness(0.86);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.16);
}
/* the gloss: a soft highlight raking across the top of the pane */
.ch-form::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 32%, transparent 62%);
}
.ch-form > * { position: relative; z-index: 1; }
/* the field grid must sit above the actions row, or the buttons paint over
   an open airport dropdown (they are later siblings at the same level) */
.ch-form .sp-form-grid { position: relative; z-index: 6; }
.ch-form .sp-form-actions { position: relative; z-index: 1; }
.ch-form .sp-form-head { margin-bottom: clamp(10px, 1.6vh, 18px); }
.ch-form .sp-form-head h3 { color: #fff; font-size: clamp(15px, 2vh, 19px); }
.ch-form .sp-form-head p { color: rgba(255,255,255,0.66); font-size: clamp(12px, 1.5vh, 14px); margin-top: 4px; }
/* three across so the whole portal holds one screen */
.ch-form .sp-form-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.5vh, 18px) 18px; }
.ch-form .sp-field label {
  color: var(--gold-light); font-size: 10.5px; letter-spacing: 0.16em; margin-bottom: 6px;
}
.ch-form .ch-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(255,255,255,0.5); }
.ch-form .sp-field input,
.ch-form .sp-field textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: 10px;
  padding: 11px 13px; font-size: 14px;
}
.ch-form .sp-field input::placeholder,
.ch-form .sp-field textarea::placeholder { color: rgba(255,255,255,0.40); }
.ch-form .sp-field input:focus,
.ch-form .sp-field textarea:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(181,155,72,0.20);
  outline: none;
}
/* ============================================================
   JOURNEY CONCIERGE HERO
   Dara: full screen like the other pages, his boarding photograph
   zoomed and pushed gold, and the copy stacked on the right. The
   scene and the copy drift against the cursor (initJcHero in main.js).
   ============================================================ */
.jc-hero {
  min-height: 100vh; min-height: 100svh;
  padding: 150px 0 110px;
  text-align: left;
  background: #0b0b0b;
  perspective: 2300px;
}
/* ---- The gate: the hero photograph split into two doors -------------
   Dara: scrolling parts them down the middle and the section behind is
   revealed standing still. The stage is pinned for the whole run. */
.jc-gate { position: relative; z-index: 2; }
.jc-gate-stage { position: relative; }
.jc-gate-door {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  /* a hair over half each, so no seam shows down the middle */
  width: 50.4%; overflow: hidden;
  will-change: transform;
}
.jc-gate-door--l { left: 0; }
.jc-gate-door--r { right: 0; }
/* each door carries a FULL-width copy of the scene, offset so the two
   halves reassemble into one photograph */
.jc-gate-plate { position: absolute; top: 0; bottom: 0; width: 100vw; }
.jc-gate-door--l .jc-gate-plate { left: 0; }
.jc-gate-door--r .jc-gate-plate { right: 0; }
/* a gold edge catches the light as the doors part */
.jc-gate-door::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(217,196,138,0.85) 22%, rgba(217,196,138,0.85) 78%, transparent);
  opacity: 0; transition: opacity .35s ease;
}
.jc-gate-door--l::after { right: 0; }
.jc-gate-door--r::after { left: 0; }
.jc-gate.is-parting .jc-gate-door::after { opacity: 1; }

.jc-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Dara: zoomed in with the group centred in the frame */
  object-position: 62% 52%;
  transform: scale(1.62);
  transform-origin: 62% 54%;
  /* the golden look — eased back from the earlier sepia, which was pushing
     the heading's gold toward red against it */
  filter: sepia(0.16) saturate(1.22) contrast(1.03) brightness(0.80);
}
/* the gold itself, laid over the photograph rather than baked into it */
.jc-hero-gold {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(88% 74% at 68% 34%, rgba(217,196,138,0.28) 0%, rgba(181,155,72,0.14) 42%, transparent 76%),
    linear-gradient(118deg, rgba(120,94,32,0.22) 0%, rgba(181,155,72,0.10) 46%, rgba(20,17,8,0.30) 100%);
  mix-blend-mode: soft-light;
}
/* the reading ground: a soft pool under the centred copy, and the frame
   darkened top and bottom so the type sits clear of the aircraft */
.jc-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(78% 58% at 50% 44%, rgba(6,6,6,0.72) 0%, rgba(7,7,7,0.44) 52%, transparent 82%),
    linear-gradient(180deg, rgba(6,6,6,0.66) 0%, rgba(8,8,8,0.22) 26%, rgba(8,8,8,0.24) 62%, rgba(5,5,5,0.80) 100%);
}
/* .sp-hero is a flex row, so its container shrinks to fit its content and
   the copy stops well short of the right edge — it needs an explicit
   width AND a max-width that outranks the base 980px cap */
.sp-hero.jc-hero > .container {
  position: relative; z-index: 2;
  width: 100%; max-width: 1320px;
}
/* Dara: everything centred, copy and buttons alike */
.jc-hero-copy {
  margin-left: auto; margin-right: auto;
  max-width: 960px; text-align: center;
}
.jc-hero .sp-hero-eyebrow { margin-bottom: 16px; }
/* Dara: the same size as the charter and acquisition heroes — the base
   .sp-hero h1 clamp. No override here, only the shadow it needs over a
   photograph. */
.jc-hero h1 {
  line-height: 1.04; margin-bottom: 4px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.62);
}
/* Dara: the gold was reading red against the warm plate. A brighter, less
   saturated gold holds its colour over the photograph. */
.jc-hero h1 .sp-gold { color: #EFDDA6; }
.jc-hero .sp-hero-sub {
  margin: 24px auto 0; max-width: 560px;
  font-size: 16.5px;
  color: rgba(255,255,255,0.84);
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
/* both CTAs read on one line beneath the copy */
.jc-hero .sp-hero-ctas { margin-top: 34px; justify-content: center; flex-wrap: nowrap; }
.jc-hero .sp-hero-ctas .btn { white-space: nowrap; }
.jc-hero .sp-scroll-cue { left: 46px; right: auto; transform: none; }
@media (max-width: 1180px){
  /* the nowrap heading would run off a narrow desktop window */
  .jc-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
}
@media (max-width: 900px){
  .jc-hero { padding: 128px 0 96px; }
  .jc-hero-copy { max-width: 560px; }
  .jc-hero h1 { white-space: normal; font-size: clamp(2rem, 7.4vw, 2.8rem); }
  .jc-hero .sp-hero-ctas { flex-wrap: wrap; }
  /* on a phone the plate has to hold the people, not the empty apron */
  .jc-hero-img { object-position: 62% 40%; transform: scale(1.24); transform-origin: 62% 40%; }
  .jc-hero-scrim {
    background: linear-gradient(180deg, rgba(6,6,6,0.74) 0%, rgba(8,8,8,0.46) 38%, rgba(5,5,5,0.88) 100%);
  }
}

/* the pinned run: the doors part across it and the intro holds still */
@media (min-width: 901px){
  .jc-gate { height: 230vh; }
  .jc-gate-stage {
    position: sticky; top: 0;
    height: 100vh; overflow: hidden;
  }
  /* the hero is now only the copy — the doors carry the picture */
  .jc-gate .jc-hero {
    position: absolute; inset: 0; z-index: 2;
    min-height: 0; height: 100%; padding: 0;
    background: transparent; display: flex; align-items: center;
  }
  .jc-gate .jc-hero-copy { transition: opacity .35s ease, transform .5s ease; }
  /* The section behind is held still while the gate opens, and Dara wants
     it to arrive zoomed out and settle to full size as the doors part —
     both moves running together. initJcGate sets the scale. */
  .jc-gate .jc-intro {
    position: absolute; inset: 0; z-index: 0;
    display: flex; align-items: center;
    padding: 92px 0 40px;
    transform: scale(0.88);
    transform-origin: 50% 50%;
    will-change: transform;
  }
}
@media (max-width: 900px){
  /* No gate on a phone. The doors are dropped and the hero gets its
     picture back as an ordinary background — but the reveal markup puts
     the intro FIRST in the DOM, so the order has to be restored here or
     the hero copy ends up below the fold. */
  .jc-gate-stage { display: flex; flex-direction: column; }
  .jc-gate .jc-hero { order: 1; position: relative; z-index: 2; background: transparent; }
  .jc-gate .jc-intro { order: 2; }
  .jc-gate-door--r { display: none; }
  .jc-gate-door--l {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; height: 100vh; z-index: 1;
  }
  .jc-gate-door--l .jc-gate-plate { position: absolute; inset: 0; width: 100%; }
}

/* ---- Intro: the rotating occasion, over a washed-out plate ---------
   Dara: black and white, and mostly white — the picture is a whisper
   behind the copy, not a backdrop competing with it. */
.jc-intro { position: relative; overflow: hidden; }
.jc-intro-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jc-intro-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  filter: grayscale(1) brightness(1.16) contrast(0.86);
}
.jc-intro-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,253,248,0.97) 0%, rgba(255,253,248,0.88) 46%, rgba(255,253,248,0.97) 100%);
}
.jc-intro > .container { position: relative; z-index: 1; }

/* Dara: this is the section's main headline — the same weight and size as
   every other section heading — with the changing clause beside the lead
   on one line, on a gold plate with black type. */
.jc-rotate-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 0.26em;
  margin: 0 0 30px;
  /* a section headline, sized so even the longest phrase holds one line
     beside the lead rather than dropping under it */
  font-size: clamp(1.55rem, 3.05vw, 2.72rem);
  font-weight: 600; line-height: 1.14; letter-spacing: -0.02em;
  color: var(--navy);
}
.jc-rotate-lead { white-space: nowrap; }
/* Dara: SQUARE edges, and the gold plate travels with the words rather
   than sitting still while the letters move through it — the whole thing
   slides up as one piece. */
.jc-rotate {
  display: inline-flex; justify-content: flex-start;
  padding: 0.06em 0.32em 0.12em;
  border-radius: 0;
  background: linear-gradient(150deg, var(--gold-light) 0%, var(--gold) 62%, var(--gold-dark) 100%);
  color: #17150c;
  box-shadow: 0 16px 34px -18px rgba(120,94,32,0.75);
  transform: translateY(0.5em); opacity: 0;
  /* Dara: a longer phrase must not snap the plate to its new width — the
     width eases across while the words arrive. initTextRotate measures the
     next phrase and sets the width explicitly. */
  overflow: hidden; white-space: nowrap;
  transition:
    transform .95s cubic-bezier(.16,.74,.2,1),
    opacity .68s ease,
    width .82s cubic-bezier(.22,.72,.24,1);
  will-change: transform, opacity, width;
}
.jc-rotate.is-in { transform: none; opacity: 1; }
.jc-rotate.is-out { transform: translateY(-0.5em); opacity: 0; }
/* words stay whole — no per-letter travel */
.jc-rotate .jc-rot-word { display: inline-flex; }
.jc-rotate .jc-rot-char { display: inline-block; }
.jc-intro-lead { color: var(--navy); }
.jc-intro-lead strong { color: var(--navy); font-weight: 600; }
.jc-intro-body { color: var(--navy); }
@media (max-width: 720px){
  .jc-rotate-head { gap: 0.2em; }
  .jc-rotate { border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce){
  .jc-rotate .jc-rot-char { transition: none; transform: none; opacity: 1; }
}

/* ---- "Experience The Journey Concierge" — words drop in on one line -- */
.jc-slide {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  line-height: 1.02;
}
/* Dara: all on a straight line, not a stacked column */
.jc-slide--row {
  flex-direction: row; flex-wrap: nowrap; justify-content: center;
  gap: 0 0.28em; white-space: nowrap;
}
/* .sp-head caps at 820px, which forced the line to break in two */
.jc-detail .sp-head { max-width: none; }
@media (max-width: 900px){
  .jc-slide--row { flex-wrap: wrap; white-space: normal; }
}
/* the section's cloud backdrop, black and white under the dark wash */
.jc-detail { position: relative; overflow: hidden; }
.jc-detail-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jc-detail-sky img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.16) brightness(0.62);
  /* pulled back from 0.5 so the globe on the right reads clearly against
     it rather than fighting the cloud */
  opacity: 0.32;
}
.jc-detail-sky::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(96% 70% at 50% 34%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.66) 58%, rgba(0,0,0,0.90) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.72) 0%, transparent 22%, transparent 74%, rgba(0,0,0,0.86) 100%);
}
.jc-detail > .container { position: relative; z-index: 1; }
/* Dara: the two-line subheads now read as one statement, and larger —
   `--xl` for the section statements, `--one` where it must not wrap */
.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; } }

/* a phrase that must never break across lines, and a second sentence that
   sits back from the first — both reusable anywhere the pattern repeats */
.sp-keep { white-space: nowrap; }
.sp-quiet { color: rgba(255,255,255,0.62); }
.sp-cream .sp-quiet, .jc-intro .sp-quiet { color: var(--ink-soft); }
/* `.section--dark .sp-subhead` is declared LATER in this file, so an
   equal-weight selector loses on source order — three classes to beat it */
/* Dara asked for the gold in this section to be settled. It now takes the
   page's own gold, #EFDDA6 — the one the hero heading already uses, chosen
   there because the standard --gold-light pulled toward red over the sepia
   plate. Brighter than --gold-light (#D9C48A), so it reads cleanly at body
   size on the black. */
.jc-detail { --jc-gold: #EFDDA6; }
.jc-detail .sp-subhead.jc-detail-sub { color: var(--jc-gold); }
.jc-slide .jc-slide-word {
  display: block;
  opacity: 0; transform: translateY(-28px) scale(0.992); filter: blur(2.4px);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1),
              transform .5s cubic-bezier(.2,.8,.2,1),
              filter .5s cubic-bezier(.2,.8,.2,1);
}
.jc-slide .jc-slide-word.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce){
  .jc-slide .jc-slide-word { opacity: 1; transform: none; filter: none; transition: none; }
}
.jc-detail .sp-head { margin-bottom: 46px; }

/* ---- The Journey Concierge: copy left, a turning world right ---------
   Dara: "all the text is meant to be by the left-hand side, while the
   world sphere spinning around is meant to be on the right-hand side,
   and it should still maintain the dark theme." */
.jc-detail-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(30px, 4.2vw, 74px); align-items: center;
}
.jc-detail-copy { max-width: 660px; }
/* the headline was centred on one line; in a half-width column it reads
   left and wraps, with the same word-by-word drop as before */
.jc-detail-copy .jc-slide--row {
  justify-content: flex-start; align-items: baseline;
  flex-wrap: wrap; white-space: normal;
  margin: 0 0 4px; text-align: left;
}
.jc-detail-copy .sp-body { max-width: 40em; }
.jc-detail-copy .sp-body + .sp-body { margin-top: 22px; }
/* Dara: below the heading and its line, everything is body copy — the two
   lines worth holding onto are lifted by weight and by colour instead of
   by size. `.sp-accent` is only dressed under `.sp-lead` further up, so it
   is spelled out again here, and `.section--dark .sp-body strong` sits far
   later in this file at the same weight, so both carry one class more. */
.jc-detail .jc-detail-copy .sp-body strong { color: #fff; font-weight: 600; }
.jc-detail .jc-detail-copy .sp-body .sp-accent { color: var(--jc-gold); font-weight: 500; }

.jc-globe {
  position: relative; width: 100%;
  max-width: clamp(20rem, 34vw, 34rem);
  margin-left: auto; margin-right: auto;
  aspect-ratio: 1 / 1;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.jc-globe-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.jc-globe-pins { position: absolute; inset: 0; pointer-events: none; }
/* A photograph pinned above its marker, turning away with the sphere.
   Dara: "it's having a border — make it dissolve more." So there is no
   frame and no ring: the picture's own edges are feathered away with a
   mask and it sits in a soft gold haze instead of on a white card. */
.jc-globe-card {
  position: absolute; top: 0; left: 0;
  transform-origin: 50% 100%;
  padding: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55));
  opacity: 0; will-change: transform, opacity, filter;
  transition: opacity .28s ease, filter .28s ease;
}
/* the haze the picture emerges from */
.jc-globe-card::before {
  content: ""; position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(217,196,138,0.30) 0%, rgba(217,196,138,0.10) 46%, rgba(217,196,138,0) 72%);
  pointer-events: none;
}
.jc-globe-card img {
  display: block; position: relative;
  width: clamp(52px, 4.6vw, 70px); height: clamp(52px, 4.6vw, 70px);
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 46%, rgba(0,0,0,0.72) 72%, rgba(0,0,0,0.22) 90%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 46%, rgba(0,0,0,0.72) 72%, rgba(0,0,0,0.22) 90%, transparent 100%);
}
@media (max-width: 900px){
  .jc-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .jc-detail-copy { max-width: none; }
  .jc-globe { max-width: min(23rem, 76vw); }
}
@media (prefers-reduced-motion: reduce){
  .jc-globe-card { transition: none; }
}

/* ---- A Global Network: the gradient Dara supplied, in black and gold ---
   The builder's exported geometry is kept exactly — the same four radial
   centres, the same reach on each, the same soften-blur and the same
   bleed past the edges. Only the colours changed: Dara asked for the
   jade-and-white mix to be re-made "black and gold". The section carries
   `section--dark` now, so the type inherits the site's dark treatment.
   `.jc-network` isolates, so this negative-z layer still paints over the
   black the dark section lays down. */
.jc-network { position: relative; overflow: hidden; isolation: isolate; }
.jc-net-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; container-type: size;
}
.jc-net-bg span {
  position: absolute;
  inset: -0.8cqmin;
  filter: blur(0.4cqmin);
  background-color: #050506;
  background-image:
    radial-gradient(circle at 65.34% 44.62%, rgba(236, 213, 152, 0.88) 0%, rgba(236, 213, 152, 0) 34.1%),
    radial-gradient(circle at 28.07% 74.48%, rgba(176, 148, 63, 0.92) 0%, rgba(176, 148, 63, 0) 45.65%),
    radial-gradient(circle at 52.42% 19.94%, rgba(64, 50, 20, 0.95) 0%, rgba(64, 50, 20, 0) 57.55%),
    radial-gradient(circle at 80.31% 84.47%, rgba(10, 9, 6, 1) 0%, rgba(10, 9, 6, 0) 69.1%);
}
/* The copy sits on the right of this band (`.sp-split--reverse` sends the
   text to order 2), so the gold is left to bloom on the picture side and
   settled back under the type. Without this the pale stop at 65% sits
   straight behind the paragraphs. */
.jc-network::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,6,7,0) 0%, rgba(6,6,7,0.20) 34%, rgba(6,6,7,0.64) 62%, rgba(6,6,7,0.84) 100%);
}
.jc-network > .container { position: relative; z-index: 1; }
@media (max-width: 900px){
  /* stacked, the copy runs the full width, so the settling has to as well */
  .jc-network::after { background: rgba(6,6,7,0.66); }
}

/* ---- Concierge Solutions: ten picture cards, five to a row --------- */
.jc-sol-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
}
.jc-sol-card {
  position: relative; overflow: hidden; border-radius: 18px;
  min-height: clamp(15rem, 22vw, 19rem);
  display: flex; align-items: flex-end;
  border: 1px solid rgba(34,34,34,0.10);
  box-shadow: 0 22px 48px -22px rgba(20,20,20,0.34);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
/* Dara: they lift quietly on hover, with the gold ring the other cards use */
.jc-sol-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 0 0 1px rgba(217,196,138,0.55),
    0 26px 60px -14px rgba(181,155,72,0.50);
}
.jc-sol-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.10) brightness(0.60);
  transform: scale(1.03);
  transition: filter .9s ease, transform 1.5s cubic-bezier(.2,.7,.2,1);
}
/* Dara: every card framed on its own subject rather than the middle of a
   wide plate — these are landscape stills cropped to a tall card. */
.jc-sol-card:nth-child(1) .jc-sol-media { object-position: 56% 40%; }  /* planner at the desk   */
.jc-sol-card:nth-child(2) .jc-sol-media { object-position: 47% 52%; }  /* hotel arrival         */
.jc-sol-card:nth-child(3) .jc-sol-media { object-position: 52% 56%; }  /* chauffeur at the door */
.jc-sol-card:nth-child(4) .jc-sol-media { object-position: 44% 50%; }  /* escort in terminal    */
.jc-sol-card:nth-child(5) .jc-sol-media { object-position: 40% 52%; }  /* the detail at the car */
.jc-sol-card:nth-child(6) .jc-sol-media { object-position: 50% 42%; }  /* helicopter in flight  */
.jc-sol-card:nth-child(7) .jc-sol-media { object-position: 50% 56%; }  /* yacht on the water    */
.jc-sol-card:nth-child(8) .jc-sol-media { object-position: 42% 54%; }  /* the laid table        */
.jc-sol-card:nth-child(9) .jc-sol-media { object-position: 46% 50%; }  /* evening arrival       */
.jc-sol-card:nth-child(10) .jc-sol-media { object-position: 44% 52%; } /* met at the aircraft   */
.jc-sol-card:hover .jc-sol-media {
  filter: grayscale(0) contrast(1.02) brightness(0.74);
  transform: scale(1.09);
}
.jc-sol-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8,8,8,0.10) 0%, rgba(8,8,8,0.42) 46%, rgba(5,5,5,0.88) 100%);
}
.jc-sol-body { position: relative; z-index: 2; padding: clamp(16px, 1.5vw, 22px); }
.jc-sol-index {
  display: block; margin-bottom: 8px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
  color: var(--gold-light);
}
.jc-sol-card h3 {
  color: #fff; font-size: clamp(0.92rem, 1.02vw, 1.06rem);
  line-height: 1.24; font-weight: 600; margin: 0 0 8px;
}
.jc-sol-card p {
  color: rgba(255,255,255,0.70); font-size: 12.5px; line-height: 1.55;
  font-weight: 300; margin: 0;
}
@media (max-width: 1250px){ .jc-sol-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px){ .jc-sol-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .jc-sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .jc-sol-grid { grid-template-columns: 1fr; } }

/* the single plates — Dara: black and white, warming into colour with the
   gold ring on hover, same as the other cards */
.jc-plate { position: relative; overflow: hidden; }
.jc-plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 54%;
  filter: grayscale(1) contrast(1.10) brightness(0.86);
  transform: scale(1.02);
  transition: filter .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.jc-plate:hover img {
  filter: grayscale(0) contrast(1.02) brightness(1);
  transform: scale(1.07);
}

/* ---- The Concierge Promise -----------------------------------------
   Dara: the copy on the left stays put while all three steps arrive, and
   only once step three has landed does the whole thing scroll away. The
   steps occupy the SAME place and dissolve in one over another, so you
   never see the next one waiting underneath. initJcPromise drives it. */
.jc-promise { padding: 0; }
.jc-promise-pin {
  position: sticky; top: 0;
  min-height: 100vh; display: flex; align-items: center;
  padding: 118px 0 70px;
}
.jc-promise-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(30px, 4.6vw, 78px); align-items: center;
  width: 100%;
}
.jc-promise-sticky .sp-head { max-width: none; }
/* the three steps share one box; only their opacity separates them */
.jc-promise-stack { position: relative; min-height: clamp(21rem, 52vh, 30rem); }
/* Dara: each step floats up from below the frame and settles, rather than
   sliding in flush with the edges of the one before it. Longer travel, a
   slight lift in scale, and a blur that clears as it arrives. */
.jc-promise-card {
  position: absolute; inset: 0; margin: 0;
  overflow: hidden; border-radius: 20px;
  display: flex; align-items: flex-end;
  border: 1px solid rgba(34,34,34,0.12);
  box-shadow: 0 30px 70px -24px rgba(20,20,20,0.45);
  opacity: 0;
  transform: translateY(16%) scale(0.965);
  filter: blur(9px);
  transition:
    opacity 1.05s cubic-bezier(.2,.7,.2,1),
    transform 1.2s cubic-bezier(.16,.74,.2,1),
    filter 1s cubic-bezier(.2,.7,.2,1),
    box-shadow .5s ease;
  will-change: opacity, transform, filter;
}
.jc-promise-card.is-on { opacity: 1; transform: none; filter: blur(0); }
/* the card underneath eases back rather than sitting flat behind */
.jc-promise-card.is-under { transform: scale(0.985); }
/* A step that has not arrived is still stacked on top at full size, and
   it was swallowing the pointer so the live card never lit its glow. */
.jc-promise-card:not(.is-on) { pointer-events: none; }
.jc-promise-card img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.10) brightness(0.58);
  transform: scale(1.03);
  transition: filter 1s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.jc-promise-card:hover img { filter: grayscale(0) contrast(1.02) brightness(0.72); transform: scale(1.07); }
/* the same gold halo the rest of the site's cards carry */
.jc-promise-card.is-on:hover {
  box-shadow:
    0 0 0 1px rgba(217,196,138,0.55),
    0 34px 76px -18px rgba(181,155,72,0.52);
}
.jc-plate:hover {
  box-shadow:
    0 0 0 1px rgba(217,196,138,0.55),
    0 30px 70px -18px rgba(181,155,72,0.48);
}
.jc-promise-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8,8,8,0.16) 0%, rgba(8,8,8,0.50) 44%, rgba(4,4,4,0.90) 100%);
}
.jc-promise-card figcaption { position: relative; z-index: 2; padding: clamp(22px, 2.4vw, 34px); }
.jc-promise-n {
  display: block; margin-bottom: 10px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.20em;
  color: var(--gold-light);
}
.jc-promise-card h3 {
  color: #fff; font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 600; margin: 0 0 10px; line-height: 1.2;
}
.jc-promise-card p {
  color: rgba(255,255,255,0.76); font-size: 14px; line-height: 1.68;
  font-weight: 300; margin: 0;
}
/* ---- the three marks and the arrows under the deck ------------------
   Dara: "an icon that shows there are three sections", and a button each
   side to step through. The scroll still drives the deck; pressing these
   moves the page to where that step becomes live, so the two never
   disagree about which promise is showing. */
.jc-promise-col { display: flex; flex-direction: column; gap: 22px; }
.jc-promise-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.jc-promise-btn {
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--navy);
  border: 1px solid rgba(34,34,34,0.22);
  transition: color .3s ease, border-color .3s ease, background .3s ease, opacity .3s ease;
}
.jc-promise-btn svg { width: 18px; height: 18px; }
.jc-promise-btn:hover:not(:disabled) {
  color: #1b190f; background: var(--gold); border-color: var(--gold);
}
.jc-promise-btn:disabled { opacity: 0.3; cursor: default; }
.jc-promise-dots { display: flex; align-items: center; gap: 10px; }
.jc-promise-dot {
  width: 34px; height: 3px; padding: 0; border: none; cursor: pointer;
  background: rgba(34,34,34,0.20); border-radius: 2px;
  transition: background .4s ease, width .4s cubic-bezier(.22,.72,.24,1);
}
.jc-promise-dot.is-on { background: var(--gold-dark); width: 52px; }

@media (max-width: 900px){
  /* no pinning on a phone — the section returns to ordinary flow and the
     three steps simply follow one another */
  .jc-promise { padding: 90px 0; }
  .jc-promise-pin { position: static; min-height: 0; padding: 0; display: block; }
  .jc-promise-grid { grid-template-columns: 1fr; gap: 34px; }
  .jc-promise-stack { min-height: 0; display: grid; gap: 22px; }
  /* stacked, not stepped — the controls have nothing to step through */
  .jc-promise-nav { display: none; }
  /* RELATIVE, not static — the card is the containing block for its own
     absolutely-positioned photograph, and dropping that lets the picture
     size against the page and overflow it. */
  .jc-promise-card {
    position: relative; inset: auto;
    min-height: clamp(19rem, 62vw, 26rem);
    opacity: 1; transform: none;
  }
}

/* ---- Dark glass date picker ----------------------------------------
   Dara: the browser's own calendar panel is white and unstyleable, so the
   date fields are plain inputs driving the panel below. */
.ch-dp { position: relative; }
.ch-form .ch-dp input[readonly] { cursor: pointer; padding-right: 38px; }
.ch-dp-icon {
  position: absolute; right: 12px; bottom: 11px;
  width: 17px; height: 17px; color: rgba(255,255,255,0.55);
  pointer-events: auto; cursor: pointer; transition: color .3s ease;
}
.ch-dp-icon svg { width: 100%; height: 100%; display: block; }
.ch-dp:hover .ch-dp-icon, .ch-dp.is-open .ch-dp-icon { color: var(--gold-light); }

.ch-dp-panel {
  position: absolute; z-index: 45; top: calc(100% + 8px); left: 0;
  width: max(268px, 100%); padding: 13px;
  background: linear-gradient(180deg, rgba(18,18,18,0.98) 0%, rgba(9,9,9,0.98) 100%);
  border: 1px solid rgba(217,196,138,0.30); border-radius: 16px;
  box-shadow:
    0 30px 70px -14px rgba(0,0,0,0.86),
    0 0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: chAcOpen .2s cubic-bezier(.2,.9,.3,1) both;
}
.ch-dp-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce){ .ch-dp-panel { animation: none; } }

.ch-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ch-dp-title {
  color: #fff; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ch-dp-nav {
  width: 27px; height: 27px; border-radius: 8px; cursor: pointer;
  display: grid; place-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ch-dp-nav svg { width: 13px; height: 13px; }
.ch-dp-nav:hover { background: var(--gold); border-color: var(--gold); color: #17150c; }

.ch-dp-week, .ch-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ch-dp-week { margin-bottom: 4px; }
.ch-dp-week span {
  text-align: center; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(217,196,138,0.62); padding-bottom: 4px;
}
.ch-dp-day {
  aspect-ratio: 1 / 1; min-height: 30px; border: 0; border-radius: 9px;
  background: transparent; color: rgba(255,255,255,0.82);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  display: grid; place-content: center;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ch-dp-day.is-blank { pointer-events: none; }
.ch-dp-day:hover:not(:disabled) {
  background: rgba(181,155,72,0.24);
  box-shadow: inset 0 0 0 1px rgba(217,196,138,0.34);
}
.ch-dp-day:disabled { color: rgba(255,255,255,0.16); cursor: default; }
/* today is ringed; the chosen day is filled */
.ch-dp-day.is-today { box-shadow: inset 0 0 0 1px rgba(217,196,138,0.45); }
.ch-dp-day.is-on {
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #17150c; font-weight: 700;
}

.ch-dp-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.ch-dp-foot button {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 3px 2px;
  transition: color .25s ease;
}
.ch-dp-clear { color: rgba(255,255,255,0.45); }
.ch-dp-clear:hover { color: #fff; }
.ch-dp-today { color: var(--gold-light); }
.ch-dp-today:hover { color: #fff; }
.ch-form .sp-field textarea { min-height: clamp(52px, 7vh, 78px); }
.ch-form .sp-form-actions { margin-top: clamp(12px, 1.8vh, 20px); gap: 12px; }
.ch-form .sp-form-note { color: rgba(255,255,255,0.55); }
body.ch-page .ch-form .sp-form-actions .btn { padding: 12px 22px; font-size: 11px; }

/* ---- special requirements as checkboxes ----------------------- */
.ch-legend {
  display: block; color: var(--gold-light);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 8px;
}
.ch-checks { display: flex; flex-wrap: wrap; gap: 8px 10px; }
/* Dara: square edges — on the chip and on the box itself */
.ch-check {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 12px; border-radius: 0;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.86); font-size: 13.5px;
  cursor: pointer; user-select: none;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.ch-check:hover { border-color: rgba(217,196,138,0.6); color: #fff; }
/* scoped to .ch-form so it outranks the rounded rule for text inputs */
.ch-form .ch-check input, .ch-check input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: 0 0 auto; margin: 0; padding: 0;
  border: 1px solid rgba(255,255,255,0.42); border-radius: 0;
  background: transparent; cursor: pointer;
  display: grid; place-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.ch-check input::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid #1b190f; border-bottom: 2px solid #1b190f;
  transform: rotate(-45deg) scale(0); transform-origin: center;
  transition: transform .2s cubic-bezier(.2,.9,.3,1);
}
.ch-check input:checked { background: var(--gold-light); border-color: var(--gold-light); }
.ch-check input:checked::after { transform: rotate(-45deg) scale(1); }
.ch-check input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.ch-check:has(input:checked) {
  border-color: var(--gold-light); background: rgba(181,155,72,0.16); color: #fff;
}
.ch-req-other { margin-top: 10px; }
.ch-req-other[hidden] { display: none; }

/* ---- third screen: the opening statement ---------------------- */
.ch-stmt { max-width: 940px; margin: 0 auto; text-align: center; }
.ch-stmt-title {
  color: var(--gold-light); margin: 0 0 clamp(14px, 2.4vh, 26px);
  font-size: clamp(1.7rem, 5vh, 3.4rem); line-height: 1.06; letter-spacing: -0.02em;
}
.ch-stmt .sp-lead {
  color: #fff; margin: 0 0 clamp(12px, 2vh, 20px);
  font-size: clamp(15px, 2.3vh, 21px); line-height: 1.5;
}
.ch-stmt .sp-lead .sp-accent { color: var(--gold-light); font-weight: 500; }
.ch-stmt .sp-body {
  color: rgba(255,255,255,0.80); margin: 0;
  font-size: clamp(13px, 1.7vh, 16px); line-height: 1.6;
}

/* ---- the cloud dissolve into a night sky ----------------------
   The pinned deck ends dark; this section opens with cloud drifting
   across that darkness and clearing into a starlit night sky, so the
   two run together instead of butting up against each other. */
.ch-night { position: relative; background: #050505; overflow: hidden; }
.ch-night > .container { position: relative; z-index: 2; }
.ch-night-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* the stars: three tiled dot fields at different scales, drifting slowly */
.ch-night-stars {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,0.95) 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 62% 12%, rgba(255,255,255,0.75) 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 82% 44%, rgba(255,255,255,0.90) 50%, transparent 100%),
    radial-gradient(1px 1px   at 34% 68%, rgba(255,255,255,0.65) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 8%  82%, rgba(255,255,255,0.80) 50%, transparent 100%),
    radial-gradient(1px 1px   at 72% 88%, rgba(255,255,255,0.60) 50%, transparent 100%);
  background-size: 340px 300px, 260px 240px, 420px 380px, 300px 280px, 380px 340px, 240px 220px;
  opacity: 0.75;
  animation: chStarDrift 140s linear infinite;
}
@keyframes chStarDrift { to { transform: translate3d(-340px, -300px, 0); } }
.ch-night-cloud {
  position: absolute; left: 50%; width: 130%; height: auto;
  transform: translateX(-50%);
  object-fit: cover; pointer-events: none;
}
/* the near band straddles the seam: it starts hard against the deck's dark
   exit and thins out downward, so the two sections dissolve into each other
   through cloud rather than meeting on a visible line */
.ch-night-cloud--near {
  top: 0; height: 66%; object-fit: cover;
  /* fully desaturated: the cloud reads black and white, not blue */
  opacity: 0.95; filter: grayscale(1) brightness(0.74) contrast(1.28);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, #000 12%, #000 40%, rgba(0,0,0,0.35) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, #000 12%, #000 40%, rgba(0,0,0,0.35) 72%, transparent 100%);
}
/* a second, deeper bank low in the frame for depth */
.ch-night-cloud--far {
  bottom: -8%; height: 54%; object-fit: cover;
  opacity: 0.32; filter: grayscale(1) brightness(0.34) contrast(1.24);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 100%);
}
/* keeps the copy readable and grades the sky toward brand navy-black */
/* the very top is solid black so it meets the deck's dark exit with no
   colour step, then eases open into the night sky */
.ch-night-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0.92) 5%, rgba(6,6,6,0.44) 26%, rgba(6,6,6,0.34) 62%, rgba(3,3,3,0.90) 100%),
    radial-gradient(72% 56% at 50% 42%, rgba(46,46,46,0.26) 0%, rgba(4,4,4,0.74) 100%);
}
.ch-night h2 { color: #fff; }
/* the services ticker, riding the black band above the sky */
.ch-night-marquee {
  position: relative; z-index: 2;
  /* pulled up into the dark half of the transition, per Dara */
  margin: 0 0 clamp(90px, 15vh, 190px);
  transform: translateY(clamp(-70px, -7vh, -30px));
}
.hero-marquee--ghost {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 16px 0;
  /* fades into the black rather than ending on a hard edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
@media (prefers-reduced-motion: reduce){ .ch-night-stars { animation: none; } }

/* ---- Why Fly Private: four picture cards ---------------------- */
.ch-why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 24px); margin-top: 54px;
}
.ch-why-card {
  position: relative; overflow: hidden;
  min-height: 27rem; border-radius: 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .7s cubic-bezier(.16,.8,.28,1), box-shadow .6s ease, border-color .6s ease;
}
.ch-why-card:hover { transform: translateY(-8px); border-color: rgba(217,196,138,0.5); }
/* NB: the shared gold glow list lives further up; .ch-why-card is added
   there so it lights the same way as the acquisition and home cards. */
.ch-why-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.62);
  transform: scale(1.02);
  transition: filter 1s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.ch-why-card:hover .ch-why-media { filter: grayscale(0) contrast(1.02) brightness(0.78); transform: scale(1.07); }
/* the gold wash over the monochrome frame */
.ch-why-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.42) 46%, rgba(0,0,0,0.92) 100%),
    linear-gradient(160deg, rgba(226,196,120,0.34) 0%, rgba(181,155,72,0.18) 50%, rgba(60,46,16,0.30) 100%);
  transition: opacity .8s ease;
}
.ch-why-card:hover .ch-why-scrim { opacity: 0.8; }
.ch-why-body { position: relative; z-index: 2; padding: 26px 24px 28px; }
.ch-why-index {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.26em;
  color: var(--gold-light); margin-bottom: 12px;
}
.ch-why-card h3 { color: #fff; font-size: 20px; line-height: 1.2; margin-bottom: 9px; }
.ch-why-card p { color: rgba(255,255,255,0.80); font-size: 14px; line-height: 1.6; }
@media (max-width: 1100px){ .ch-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .ch-why-grid { grid-template-columns: 1fr; } .ch-why-card { min-height: 20rem; } }

/* ---- Wherever You're Going: solid alternating cards ------------
   Ported from the service-carousel reference. Its pastel gradients
   become our two brand grounds, black and gold, alternating down the
   run; each card is numbered and carries its own icon. */
/* The carousel viewport bleeds 60px past the container so cards can
   dissolve at the edges. On the acquisition page its host sections already
   clip; here the page itself must, or that bleed drags a horizontal
   scrollbar onto every screen. `clip` (not `hidden`) so the pinned hero
   deck keeps working. */
body.ch-page main { overflow-x: clip; }
.ch-svc { margin-top: 52px; }
.ch-svc-track { align-items: stretch; }
.ch-svc-card {
  position: relative; flex: 0 0 auto;
  width: clamp(17rem, 25vw, 22rem);
  min-height: clamp(20rem, 46vh, 28rem);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 24px; overflow: hidden;
  transition: transform .6s cubic-bezier(.16,.8,.28,1), box-shadow .5s ease;
}
.ch-svc-card:hover { transform: translateY(-8px); }
/* solid grounds, no imagery — the two brand colours alternating */
/* Glass rather than flat colour: each pane is a tinted, blurred sheet with
   a raking gloss, so the ground behind it shows through softly. */
.ch-svc-card--dark {
  background: linear-gradient(150deg, rgba(20,20,20,0.90) 0%, rgba(4,4,4,0.94) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 26px 60px -22px rgba(0,0,0,0.6);
}
.ch-svc-card--gold {
  background: linear-gradient(150deg, rgba(203,177,96,0.94) 0%, rgba(176,150,68,0.96) 100%);
  border: 1px solid rgba(255,244,214,0.62);
  color: #1b190f;
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 26px 60px -22px rgba(90,72,24,0.45);
}
/* the gloss highlight that sells it as glass */
.ch-svc-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 26%, transparent 52%);
}
.ch-svc-top, .ch-svc-body { position: relative; z-index: 1; }
/* Dara: this section now carries the homepage JetVault Experience field
   (gold grid, breathing glow, twinkling + shooting stars) rather than a
   ground of its own — style.css owns the .jv-* layers. */
.ch-svc-ground { position: relative; overflow: hidden; background: #fffdf8; }
.ch-svc-ground > .container { position: relative; z-index: 1; }
/* the drag affordance */
/* the viewport used to clip each card's shadow dead, leaving a visible
   line under the row. Extra room below plus a soft bottom fade lets the
   shadows dissolve instead. */
.ch-svc .zcarousel-viewport {
  cursor: grab;
  padding-bottom: 72px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 62px, #000 calc(100% - 165px), transparent 100%),
    linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 62px, #000 calc(100% - 165px), transparent 100%),
    linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ch-svc .zcarousel-viewport.is-dragging { cursor: grabbing; }
.ch-svc .zcarousel-viewport.is-dragging .zcarousel-track { transition: none; }
.ch-svc-top { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(26px, 5vh, 54px); }
.ch-svc-num {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  opacity: 0.55;
}
.ch-svc-icon svg { width: 42px; height: 42px; display: block; }
.ch-svc-card--dark .ch-svc-icon { color: var(--gold-light); }
.ch-svc-card--gold .ch-svc-icon { color: #1b190f; }
.ch-svc-body h3 {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem); line-height: 1.24;
  text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700;
  margin: 0 0 10px;
}
.ch-svc-card--dark .ch-svc-body h3 { color: #fff; }
.ch-svc-card--gold .ch-svc-body h3 { color: #17150c; }
.ch-svc-body p { font-size: 13.5px; line-height: 1.6; margin: 0; }
.ch-svc-card--dark .ch-svc-body p { color: rgba(255,255,255,0.72); }
.ch-svc-card--gold .ch-svc-body p { color: rgba(27,25,15,0.78); }
/* the gold card needs a darker ring or the glow vanishes into it */
/* The nav is lifted back over the viewport's shadow room and given its own
   layer, so hovering an arrow no longer picks up the viewport's grab
   cursor (the drag hand was appearing on the arrows). */
.ch-svc .zcarousel-nav {
  position: relative; z-index: 3;
  margin-top: -46px;
}
/* the nav sits on a light ground here, so it reads dark rather than white */
.ch-svc .zcarousel-btn {
  border-color: rgba(34,34,34,0.28); color: var(--navy);
  background: rgba(255,255,255,0.6);
}
.ch-svc .zcarousel-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.ch-svc .zcarousel-bar { background: rgba(34,34,34,0.22); }
.ch-svc .zcarousel-bar.is-on { background: var(--gold-dark); }

.ch-svc-card--gold:hover {
  box-shadow: 0 0 0 1px rgba(60,48,16,0.55), 0 22px 62px -8px rgba(120,96,32,0.55);
}

/* copy left, picture right */
.ch-conc-intro {
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(30px, 4.4vw, 68px); align-items: center;
  margin-top: clamp(18px, 3vh, 34px);
}
.ch-conc-copy .sp-body { margin: 0; }
/* the concierge picture: monochrome, warming into colour on hover */
.ch-conc-figure {
  position: relative; overflow: hidden; margin: 0;
  border-radius: 20px;
  height: clamp(230px, 38vh, 400px);
  box-shadow: 0 30px 70px -22px rgba(20,20,20,0.32);
}
@media (max-width: 900px){
  .ch-conc-intro { grid-template-columns: 1fr; gap: 26px; }
  .ch-conc-figure { height: 56vw; }
}
.ch-conc-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 42%;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  transition: filter .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
  transform: scale(1.02);
}
.ch-conc-figure:hover img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1.06); }

/* ---- Beyond Private Aviation: coverflow showcase ----------------
   Ported from the feature-carousel reference: the centre plate sits
   sharp and forward, its neighbours fall back scaled, rotated, blurred
   and dimmed. Positions are written by initChFlow. */
.ch-flow { position: relative; width: 100%; }
/* Dara: the plate should top and tail with the copy beside it, so the
   stage stretches to the row height and the centre plate fills it. */
.ch-flow { display: flex; align-items: stretch; }
.ch-flow-stage {
  position: relative; perspective: 1000px;
  width: 100%; min-height: clamp(24rem, 46vw, 34rem);
  display: flex; align-items: center; justify-content: center;
  /* the wider plates would otherwise spill over the copy beside them */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.ch-flow-item {
  position: absolute; margin: 0;
  /* Dara: wider as well as taller, but still reading portrait */
  width: clamp(16rem, 30vw, 25rem);
  height: 100%;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(34,34,34,0.12);
  box-shadow: 0 30px 70px -18px rgba(20,20,20,0.42);
  transition: transform .55s ease, opacity .55s ease, filter .55s ease;
  will-change: transform, opacity, filter;
}
/* lifted a touch brighter, and each plate is framed on its subject:
   these are wide stills cropped to portrait, so a centre crop loses the
   people. Percentages put the subject mid-frame. */
.ch-flow-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(1.12) contrast(0.98);
}
.ch-flow-item:nth-child(1) img { object-position: 33% 50%; }  /* attendant       */
.ch-flow-item:nth-child(2) img { object-position: 48% 42%; }  /* arriving couple */
/* Dara: the pair at the table read badly split down the middle, so the
   crop sits on HER alone rather than half of each of them */
.ch-flow-item:nth-child(3) img { object-position: 72% 44%; }
.ch-flow-item:nth-child(4) img { object-position: 27% 50%; }  /* guest walking   */
/* Dara: show the NOSE before the tail — it runs low and left in the plate */
.ch-flow-item:nth-child(5) img { object-position: 12% 84%; }
.ch-flow-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-content: center; cursor: pointer;
  border: 1px solid rgba(34,34,34,0.18);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--navy);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.ch-flow-btn svg { width: 17px; height: 17px; }
.ch-flow-btn:hover { background: var(--gold); border-color: var(--gold); color: #1b190f; }
.ch-flow-btn--prev { left: 0; }
.ch-flow-btn--next { right: 0; }
.section--dark .ch-flow-btn, .ch-fleet .ch-flow-btn {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: #fff;
}


/* the coverflow column stretches to the copy's height */
.sp-split:has(.ch-flow) { align-items: stretch; }
.sp-split:has(.ch-flow) .sp-split-text { display: flex; flex-direction: column; justify-content: center; }

/* ---- Journey Concierge: the eleven points as drifting rows ------
   Ported from the Marquee reference. Row one runs the list in order,
   row two runs it reversed the other way, row three starts from the
   middle. Each row holds two copies of the set so the loop is seamless,
   and hovering a row pauses it. The real list is still in the DOM for
   assistive tech, just visually hidden. */
.sp-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ch-mq {
  display: flex; flex-direction: column; gap: 14px;
  /* breaks out of the narrow copy measure: a drifting band wants the
     full width of the section, not the reading column */
  width: 100vw; max-width: 100vw;
  margin: 8px 0 6px; margin-left: 50%; transform: translateX(-50%);
  /* the rows fade out at both edges rather than being cut */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.ch-mq-row { display: flex; gap: 14px; overflow: hidden; }
.ch-mq-track {
  display: flex; gap: 14px; flex: 0 0 auto;
  padding-right: 14px;
  animation: chMarquee 54s linear infinite;
  will-change: transform;
}
.ch-mq-row--reverse .ch-mq-track { animation-direction: reverse; animation-duration: 62s; }
.ch-mq-row--slow .ch-mq-track { animation-duration: 78s; }
.ch-mq-row:hover .ch-mq-track { animation-play-state: paused; }
@keyframes chMarquee { to { transform: translateX(-100%); } }
.ch-chip {
  flex: 0 0 auto; white-space: nowrap;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(34,34,34,0.14);
  font-size: 14px; line-height: 1;
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
/* Dara: the chips cycle black, gold, white so the rows are not flat.
   Same subtle two-stop gradients as the service cards. */
.ch-chip:nth-child(3n+1) {
  background: linear-gradient(140deg, #141414 0%, #050505 100%);
  border-color: rgba(255,255,255,0.14); color: #fff;
}
.ch-chip:nth-child(3n+2) {
  background: linear-gradient(140deg, #cbb160 0%, #b09644 100%);
  border-color: rgba(255,244,214,0.6); color: #1b190f; font-weight: 500;
}
.ch-chip:nth-child(3n+3) {
  background: #fff;
  border-color: rgba(34,34,34,0.16); color: var(--navy);
}
.ch-chip:hover { box-shadow: 0 0 0 1px rgba(181,155,72,0.7), 0 10px 26px -8px rgba(181,155,72,0.5); }
@media (prefers-reduced-motion: reduce){
  .ch-mq-track { animation: none; }
  .ch-mq-row { overflow-x: auto; }
}

/* ---- The Right Aircraft: picture cluster left, copy right -------
   The reference groups its images into one composed cluster rather than
   a single flat plate. Ours is monochrome and lifts into colour with a
   gold wash as each plate is hovered. */
.ch-fleet { background: #060606; }
.ch-fleet-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(36px, 5vw, 78px); align-items: center;
}
.ch-fleet-text h2, .ch-fleet-text .sp-subhead { color: #fff; }
.ch-fleet-text .sp-head { margin-bottom: 18px; }
.ch-fleet-text .sp-body { color: rgba(255,255,255,0.76); }

.ch-fleet-stack {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%; max-width: 34rem; margin: 0 auto;
}
.ch-fleet-shot {
  position: absolute; margin: 0; overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 70px -18px rgba(0,0,0,0.72);
  transition: transform .6s cubic-bezier(.16,.8,.28,1), box-shadow .5s ease, z-index 0s;
}
.ch-fleet-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.12) brightness(0.72);
  transition: filter .8s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
/* the gold wash that appears with the colour */
.ch-fleet-shot::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, rgba(226,196,120,0.34) 0%, rgba(181,155,72,0.16) 52%, rgba(50,38,12,0.30) 100%);
  opacity: 0; transition: opacity .6s ease;
}
/* float up on hover, and come to the front of the cluster */
.ch-fleet-shot:hover {
  transform: translateY(-14px) scale(1.03);
  z-index: 9;
  box-shadow: 0 44px 90px -20px rgba(0,0,0,0.8);
}
.ch-fleet-shot:hover img { filter: grayscale(0) contrast(1.02) brightness(0.94); transform: scale(1.05); }
.ch-fleet-shot:hover::before { opacity: 1; }
/* the composed arrangement */
.ch-fleet-shot--a { left: 0;    top: 0;    width: 58%; height: 52%; z-index: 3; }
.ch-fleet-shot--b { right: 0;   top: 16%;  width: 46%; height: 46%; z-index: 2; }
.ch-fleet-shot--c { left: 12%;  bottom: 0; width: 62%; height: 42%; z-index: 4; }
@media (max-width: 900px){
  .ch-fleet-grid { grid-template-columns: 1fr; gap: 34px; }
  .ch-fleet-stack { max-width: 26rem; }
}

/* ---- airport typeahead ---------------------------------------- */
.ch-ac { position: relative; }
/* Dara: an arrow so it reads as a dropdown, not just a text box */
.ch-ac::after {
  content: ""; position: absolute; right: 14px; bottom: 19px;
  width: 9px; height: 9px; pointer-events: none;
  border-right: 1.6px solid var(--gold-light);
  border-bottom: 1.6px solid var(--gold-light);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .3s ease;
}
.ch-ac:has(input[aria-expanded="true"])::after {
  transform: rotate(-135deg);
}
.ch-ac input { padding-right: 34px !important; }
.ch-ac-list {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
  margin: 0; padding: 7px; list-style: none;
  max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(18,18,18,0.98) 0%, rgba(9,9,9,0.98) 100%);
  border: 1px solid rgba(217,196,138,0.30);
  border-radius: 16px;
  box-shadow:
    0 30px 70px -14px rgba(0,0,0,0.86),
    0 0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  /* opens with a small settle rather than snapping in */
  animation: chAcOpen .22s cubic-bezier(.2,.9,.3,1) both;
  scrollbar-width: thin; scrollbar-color: rgba(217,196,138,0.45) transparent;
}
@keyframes chAcOpen {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){ .ch-ac-list { animation: none; } }
.ch-ac-list::-webkit-scrollbar { width: 9px; }
.ch-ac-list::-webkit-scrollbar-track { background: transparent; }
.ch-ac-list::-webkit-scrollbar-thumb {
  background: rgba(217,196,138,0.34); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
.ch-ac-list::-webkit-scrollbar-thumb:hover { background: rgba(217,196,138,0.6); background-clip: content-box; }
.ch-ac-list[hidden] { display: none; }

/* one result: code + name on the first line, city and country beneath */
.ch-ac-opt {
  display: block; padding: 10px 12px; border-radius: 11px; cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.ch-ac-opt:hover, .ch-ac-opt.is-active {
  background: linear-gradient(120deg, rgba(181,155,72,0.26) 0%, rgba(181,155,72,0.14) 100%);
  box-shadow: inset 0 0 0 1px rgba(217,196,138,0.34);
}
.ch-ac-top {
  display: flex; align-items: baseline; gap: 8px;
  color: #fff; font-size: 13.5px; line-height: 1.3;
}
.ch-ac-code {
  flex: 0 0 auto; color: var(--gold-light);
  font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em;
}
.ch-ac-dash { flex: 0 0 auto; color: rgba(255,255,255,0.34); }
.ch-ac-title { min-width: 0; }
.ch-ac-place {
  display: block; margin-top: 3px;
  color: rgba(255,255,255,0.52); font-size: 11.5px; line-height: 1.35;
}
/* the matched characters inside a result */
.ch-ac-hit {
  background: transparent; color: var(--gold-light);
  font-weight: 700; border-radius: 2px;
}
.ch-ac-place .ch-ac-hit { color: rgba(226,196,120,0.95); }
.ch-ac-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 99px; border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.ch-ac-empty { padding: 14px 12px; color: rgba(255,255,255,0.5); font-size: 13px; }
/* the running tally, pinned to the top of the list while it scrolls */
.ch-ac-count {
  position: sticky; top: -7px; z-index: 2;
  margin: -7px -7px 4px; padding: 10px 13px 9px;
  background: linear-gradient(180deg, rgba(16,16,16,0.99) 0%, rgba(13,13,13,0.97) 100%);
  border-bottom: 1px solid rgba(217,196,138,0.20);
  border-radius: 15px 15px 0 0;
  color: var(--gold-light); font-size: 11px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
}

@media (max-width: 1000px){
  .ch-form .sp-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  /* The pin is dropped on small screens and the two screens simply stack.
     The stage must give up its 100vh + overflow:hidden as well, or it
     crops whatever the panels add below the first screen. */
  .ch-hero { height: auto; }
  .ch-hero-stage { position: static; height: auto; overflow: visible; }
  /* the 143-frame scrub is desktop-only, so the still carries the panel */
  .ch-hero-canvas, .ch-hero-poster, .ch-hero-scrim { display: none; }
  .ch-deck { position: static; }
  .chpage {
    position: relative; inset: auto; opacity: 1; pointer-events: auto;
    transform: none !important; padding: 84px 0 40px;
  }
  .chpage--copy {
    min-height: 100vh; justify-content: center;
    background: url("../assets/img/charter-hero-poster.jpg") center / cover no-repeat;
  }
  .chpage--copy::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.74) 40%, rgba(0,0,0,0.92) 100%);
  }
  .chpage--copy > .container { position: relative; z-index: 1; }
  .chpage--form { background: #0a0a0a; }
  .chdeck-bars { display: none; }
  .ch-form .sp-form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .ch-hero { height: auto; }
  .ch-hero-stage { position: static; height: auto; }
  .ch-deck { position: static; }
  .chpage { position: relative; inset: auto; opacity: 1; pointer-events: auto; transform: none !important; padding: 84px 0 40px; }
  .chpage--form { background: #0a0a0a; }
  .chdeck-bars { display: none; }
}

/* ============================================================
   Small type the client called out: "even this thing is too
   small, it should be bolder."
   ============================================================ */
.acq-page .eyebrow, .acq-page .sp-hero-eyebrow {
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.2em;
}
.acq-sublabel {
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  font-weight: 400; letter-spacing: -0.01em; text-transform: none;
  color: #fff; text-align: center; margin-bottom: 44px;
}
.section--dark .acq-sublabel { color: #fff; }
.acq-bento-index, .acq-point-index {
  font-size: 26px; font-weight: 300; letter-spacing: 0.02em;
  color: var(--gold-light); line-height: 1;
}
.acq-bento-index { position: relative; z-index: 2; margin-bottom: 12px; display: block; }

/* ============================================================
   Fit passes checked on a real 1366x768 laptop
   ============================================================ */
@media (max-height: 800px){
  .acq-editorial { padding-top: 92px; }
  .acq-ed-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
  .acq-ed-hero { margin-top: clamp(22px, 3vh, 34px); max-height: 42vh; }
  .acq-ed-hero-lead { margin-top: clamp(16px, 2.2vh, 24px); font-size: clamp(15.5px, 1.3vw, 18px); }
}
.acq-includes .acq-inc-head h2 { font-size: clamp(1.75rem, 3.6vh, 3.1rem); }
.acq-includes .acq-inc-head .sp-subhead { margin-bottom: 0; font-size: clamp(13.5px, 1.7vh, 16px); }


/* ---- Section 4: the four criteria move left, the copy right -----
   Dara: "you can have the images by the left-hand side and the text by the
   right-hand side for that section." Done with grid order so the heading
   still comes first in the document. */
@media (min-width: 901px){
  .acq-finding-grid { grid-template-columns: 1.08fr 0.92fr; }
  .acq-finding-text { order: 2; }
  .acq-finding-grid > .acq-point-grid--4 { order: 1; }
}
@media (max-width: 900px){
  .acq-finding-grid { grid-template-columns: 1fr; }
  .acq-finding-text { order: 1; }
  .acq-finding-grid > .acq-point-grid--4 { order: 2; }
}

/* ============================================================
   GET IT RIGHT ONCE - copy left, portrait right (restored)
   ============================================================ */
.acq-once { overflow: hidden; }
.acq-once-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
.acq-once-text { text-align: left; }
.acq-once-text h2 { color: #fff; margin-bottom: 24px; }
.acq-once-text h2 .sp-gold { color: var(--gold-light); }
.acq-once-text .sp-lead { color: #fff; }
.acq-once-text .sp-body { margin-top: 26px; max-width: 52ch; color: rgba(255,255,255,0.78); }
.acq-once-text .sp-body strong { color: #fff; font-weight: 500; }
.acq-once-figure {
  position: relative; height: 30rem; border-radius: 2px; overflow: hidden;
  box-shadow: 0 34px 76px rgba(0,0,0,0.55);
}
.acq-once-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  filter: grayscale(1) contrast(1.06) brightness(0.88);
  transform: scale(1.02);
  transition: filter .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.acq-once-figure:hover img { filter: grayscale(0) contrast(1.04) brightness(1); transform: scale(1.09); }
.acq-once-figure::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, rgba(181,155,72,0.30), transparent 72%);
  opacity: 0; transition: opacity .7s ease;
}
.acq-once-figure:hover::before { opacity: 1; }
@media (max-width: 900px){
  .acq-once-grid { grid-template-columns: 1fr; gap: 34px; }
  .acq-once-figure { height: 24rem; }
}

/* ============================================================
   Dark grounds: the leading copy is WHITE, not grey.
   Client: "for the black backgrounds it's like a grey texture. Let the
   main text be white; the body can stay grey."
   ============================================================ */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.sp-cta h1, .sp-cta h2, .sp-cta h3,
.acq-jv h2 { color: #fff; }
.section--dark .sp-lead, .sp-cta .sp-lead,
.acq-jv .sp-lead { color: #fff; }
.section--dark .sp-subhead, .sp-cta .sp-subhead { color: rgba(255,255,255,0.74); }
.section--dark .sp-body, .acq-jv .sp-body { color: rgba(255,255,255,0.78); }
.section--dark .sp-body strong, .acq-jv .sp-body strong,
.sp-cta p strong { color: #fff; font-weight: 500; }


/* Hero CTAs. Dara: "the one on the right should go white on hover, not
   gold; the one on the left can go black with gold text."
   Written against body.acq-page main so they outrank the site-wide
   button hover pass in type-luxury.css. */
body.acq-page main .acq-hero-ctas .btn-primary:hover,
body.acq-page main .sp-hero-ctas .btn-primary:hover,
.acq-hero-ctas .btn-primary:hover,
.sp-hero-ctas .btn-primary:hover {
  background: #0c0c0c; border-color: #0c0c0c; color: var(--gold-light);
  background-image: none;
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
body.acq-page main .acq-hero-ctas .btn-outline-light:hover,
body.acq-page main .sp-hero-ctas .btn-outline-light:hover,
.acq-hero-ctas .btn-outline-light:hover,
.sp-hero-ctas .btn-outline-light:hover {
  background: #ffffff; border-color: #ffffff; color: #141414;
  background-image: none;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}


/* ============================================================
   THE JETVAULT DECK — two screens in one pinned place
   Ported from the ScrollAdventure reference: part one rises in as a
   single piece, part two's text drops from above while its plate
   rises from below. Scroll position drives it rather than a hijacked
   wheel, so the scrollbar, touch and the keyboard all still work and
   the page never traps you.
   ============================================================ */
.jvdeck { background: #0b0b0b; }
/* The deck itself is the seam's pinned A-layer, so the aircraft wipe
   starts the moment part two finishes. NB: sticky must win here — a
   plain `position` on .jvdeck is the trap that silently unpinned
   .acq-jv3 and .acq-bridge before. The base .acq-seam-a flex/padding
   are for full sections, not the deck, so they are reset. */
.jvdeck.acq-seam-a {
  position: sticky; top: var(--a-stick);
  display: block; min-height: 0;
  padding-top: 0; padding-bottom: 0;
}
.jvdeck-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.jvpage { position: absolute; inset: 0; pointer-events: none; }
.jvpage.is-on { pointer-events: auto; }
.jvpage-frame {
  width: min(1360px, calc(100% - 68px)); margin: 0 auto;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(86px, 10vh, 112px) 0 clamp(24px, 3.5vh, 44px);
}

/* part one rises in from below as one piece */
.jvpage--stack .jvpage-frame {
  transform: translateY(120vh);
  transition: transform 1s cubic-bezier(.16,.8,.28,1);
  will-change: transform;
}
.jvpage--stack.is-on .jvpage-frame { transform: translateY(0); }

/* part two: the text drops in from above, the plate rises from below */
.jv2-text, .jv2-media {
  transition: transform 1s cubic-bezier(.16,.8,.28,1);
  will-change: transform;
}
.jvpage--split2 .jv2-text  { transform: translateY(-160vh); }
.jvpage--split2 .jv2-media { transform: translateY(160vh); }
.jvpage--split2.is-on .jv2-text,
.jvpage--split2.is-on .jv2-media { transform: translateY(0); }

/* ---- part one: heading, picture, copy — all read left, per Dara ---- */
.jvpage--stack .jvpage-frame { text-align: left; }
.acq-ed-title--stack {
  max-width: none;
  /* "bring the placeholder and the main copy closer to each other" */
  margin: 0 0 clamp(8px, 1.2vh, 14px);
  font-size: clamp(1.3rem, 3.4vh, 2.5rem); line-height: 1.18;
}
.acq-ed-title--stack .jv-line { display: block; }
/* the gold word stays inside its line — the base title style would
   otherwise break it out onto a line of its own */
.acq-ed-title--stack .sp-gold { display: inline; }
/* the copy runs to the same right borderline as everything else */
.jvpage--stack .jv1-copy { max-width: none; margin: 0; }
.jvpage--stack .jv1-copy .sp-body { text-align: left; margin: 0 0 10px; max-width: none; }
.jvpage--stack .jv1-copy .sp-body:last-child { margin-bottom: 0; }

/* the numbered kicker: gold number, breath, quiet uppercase label */
.acq-jv-label {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 20px;
  font-family: var(--sans); text-transform: uppercase;
  font-size: 11.5px; letter-spacing: 0.22em;
  /* "the details of the experience should be gold, like the number" */
  color: var(--gold-light);
}
.acq-jv-label span { color: var(--gold-light); font-size: 13px; letter-spacing: 0.1em; }
.acq-jv-label--center { margin-bottom: clamp(12px, 1.8vh, 20px); }

/* body copy, one size across both parts — Dara: it was reading too small */
.jv1-copy .sp-body, .jv-copy .sp-body {
  color: rgba(255,255,255,0.82);
  font-size: clamp(14.5px, 1.85vh, 18px); line-height: 1.6; margin: 0 0 14px;
  max-width: 78ch;
}
.jv1-copy .sp-body:last-child, .jv-copy .sp-body:last-child { margin-bottom: 0; }
/* "we can just make that 'walk into your private jetvault' bold" */
.jv1-copy .sp-body:first-child { color: #fff; font-weight: 600; }
.jv-copy .sp-body strong { color: #fff; font-weight: 500; }
/* "by the end of" gets its own size above the punchline */
.jv-copy .jv3-lead {
  color: rgba(255,255,255,0.94);
  font-size: clamp(15.5px, 2vh, 19.5px); line-height: 1.55;
}

/* the punchline, no rules, its own size. Dara: both of these run to the
   right borderline rather than wrapping early. */
.jv-punch {
  margin: clamp(14px, 2.2vh, 26px) 0 0; max-width: none;
  color: #fff; font-weight: 400; letter-spacing: -0.012em;
  font-size: clamp(1.1rem, 2.1vh, 1.6rem); line-height: 1.3;
}
.jv-punch-sub {
  margin: clamp(10px, 1.6vh, 18px) 0 0; max-width: none;
  color: var(--gold-light); font-weight: 500;
  font-size: clamp(12.5px, 1.5vh, 14.5px); line-height: 1.5;
}

/* part one's picture: the original wide shaped placeholder (#acqEdClip),
   cover-fit and zoomed about the couple so their faces sit mid-frame */
/* Dara: "increase the height of the image placeholder without shifting
   the text above up or the text below down." It flex-grows instead, so
   it swallows whatever slack the panel has and closes the gap on both
   sides while the copy keeps its own place. */
.jvpage--stack .jvpage-frame > *:not(.acq-ed-figure--wide) { flex: 0 0 auto; }
.acq-ed-figure--wide {
  position: relative;
  width: 100%;
  flex: 1 1 auto; min-height: 190px;
  /* pulled up so the raised block reaches higher than the rest of the
     silhouette, without the main body dropping away from the heading */
  margin: max(-64px, -6vh) 0 clamp(12px, 1.8vh, 20px);
  overflow: hidden;
  clip-path: url(#acqEdClip);
  -webkit-clip-path: url(#acqEdClip);
}
/* black and white, full colour on hover */
.acq-ed-figure--wide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 27%;
  transform: scale(1.45); transform-origin: 51% 26%;
  filter: grayscale(1) contrast(1.06);
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter 1s ease;
}
.acq-ed-figure--wide:hover img { transform: scale(1.52); filter: grayscale(0) contrast(1.02); }

/* part two: one full body column, the long plate under it */
.jv2-cols { text-align: left; }
.jv2-cols .jv-copy .sp-body { max-width: none; }
.jv2-media { margin-top: clamp(18px, 3vh, 32px); }
.jv-figure {
  position: relative; overflow: hidden; border-radius: 2px;
  width: 100%;
  box-shadow: 0 40px 88px rgba(0,0,0,0.6);
}
/* Dara: curved edges on this placeholder */
.jv-figure--wide { height: clamp(170px, 27vh, 300px); border-radius: 22px; }
/* black and white, full colour on hover */
.jv-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(0.9) contrast(1.06);
  transform: scale(1.02);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1), filter .9s ease;
}
.jv-figure:hover img { transform: scale(1.07); filter: grayscale(0) brightness(1) contrast(1.03); }

/* which of the two you are on */
.jvdeck-bars {
  position: absolute; z-index: 5;
  right: clamp(16px, 2.2vw, 40px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
}
.jvdeck-bar {
  width: 2px; height: 40px; border-radius: 2px;
  background: rgba(255,255,255,0.24);
  transition: background .5s ease, height .5s ease;
}
.jvdeck-bar.is-on { background: var(--gold-light); height: 64px; }

/* ---- the second deck: The Difference / Get It Right Once ---- */
.jvdeck--bare { background: transparent; }
.jvpage--center .jvpage-frame { text-align: center; }
.jvpage--center .jvpage-frame > .container { width: 100%; }
.jvpage--center .acq-diff-head { margin-bottom: clamp(14px, 2.2vh, 28px); }
.jvpage--center .acq-diff-head h2 { font-size: clamp(1.9rem, 4vh, 3rem); line-height: 1.06; }
.jvpage--center .acq-diff-head .sp-subhead { margin: 10px auto 0; font-size: clamp(13.5px, 1.7vh, 16px); }
.jvpage--center .acq-diff-head .sp-body { margin-top: 10px; font-size: clamp(13px, 1.6vh, 15.5px); }
.jvpage--center .acq-diff-head .sp-actions { margin-top: clamp(12px, 2vh, 22px); }
.jvpage--center .zcarousel { margin-top: 0; }
.jvpage--center .zcarousel-viewport { padding: 10px 0 16px; }
/* the five slide one at a time inside the pinned panel */
.acq-point-track { align-items: stretch; }
.acq-point-card--slide {
  flex: 0 0 auto;
  width: clamp(16rem, 23vw, 21rem);
  min-height: 0; height: clamp(16rem, 36vh, 23rem);
  text-align: left;
}
.acq-point-card--slide .acq-point-body { padding: 20px 20px 22px; }
.acq-point-card--slide .acq-point-index { margin-bottom: 8px; }
.acq-point-card--slide h3 { font-size: clamp(0.98rem, 1.15vw, 1.14rem); margin-bottom: 8px; }
/* no clamping: every word of the client's copy stays on the card */
.acq-point-card--slide p { font-size: 13px; line-height: 1.5; }
/* panel two: copy left, photograph right. The plate stretches to the
   copy's exact height top and bottom, and keeps the photograph's own
   portrait ratio so it is never upscaled (the source is 1100x1473). */
.diff2-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 64px); align-items: stretch; text-align: left;
}
.diff2-grid .jv2-text { display: flex; flex-direction: column; justify-content: center; }
/* The plate is taken out of flow so the COPY sets the row height; the
   plate then spans exactly that top-to-bottom and derives its width from
   the photograph's own ratio. (Left in flow, aspect-ratio resolved the
   other way round and the panel grew past the screen.) */
.diff2-grid .jv2-media { margin-top: 0; position: relative; min-height: 260px; }
.diff2-grid .acq-once-figure {
  position: absolute; top: 0; right: 0; height: 100%;
  width: auto; max-width: 100%; aspect-ratio: 1100 / 1473;
  overflow: hidden;
}
.diff2-grid .acq-once-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.06);
  transition: filter 1s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.diff2-grid .acq-once-figure:hover img { filter: grayscale(0) contrast(1.02); }
.diff2-grid .acq-once-text h2 { margin-bottom: clamp(12px, 2vh, 20px); }
.diff2-grid .acq-once-text .sp-lead { margin-bottom: clamp(10px, 1.8vh, 18px); }
/* short laptop screens: the panel has to hold its own screen, so the
   type steps down rather than spilling past the top and bottom */
@media (min-width: 901px) and (max-height: 800px){
  .diff2-grid .acq-once-text h2 { font-size: clamp(1.35rem, 3.5vh, 2.1rem); line-height: 1.08; }
  .diff2-grid .acq-once-text .sp-lead { font-size: clamp(13px, 2vh, 17px); line-height: 1.42; }
  .diff2-grid .acq-once-text .sp-body { font-size: clamp(12px, 1.55vh, 14px); line-height: 1.5; }
}

@media (max-width: 900px){
  .jvdeck { height: auto !important; }
  .jvdeck-stage { position: static; height: auto; }
  .diff2-grid { grid-template-columns: 1fr; gap: 24px; }
  .diff2-grid .acq-once-figure { height: 60vw; }
  .jvpage { position: relative; inset: auto; pointer-events: auto; }
  .jvpage-frame { height: auto; padding: 64px 0; transform: none !important; }
  .jv2-text, .jv2-media { transform: none !important; }
  .acq-ed-figure--wide { height: 46vw; }
  .jv-figure--wide { height: 52vw; }
  .jvdeck-bars { display: none; }
}
@media (prefers-reduced-motion: reduce){
  .jvdeck.acq-seam-a { position: static; }
  .jvpage--stack .jvpage-frame, .jv2-text, .jv2-media { transition: none; }
}

/* (the old .acq-bridge held beat is gone — the seam's A-layer is now the
   JetVault story section and the wipe follows it directly) */

/* ---- The JetVault Experience, split in two ----------------------------
   Dara: "divide that section into two. One will be designed like a hero
   image, the other just plain. The first is titled The JetVault
   Experience, just that, with the two CTAs. The next one is Bring Your
   Future Aircraft to Life Before Your Eyes, with the body copy and an
   image below." The hero half is dark and the story half is light.
   The photograph he supplied carries both: black and white with a gold
   veil behind the title, in colour on the plate. */
.acq-jv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(86vh, 760px);
  display: flex; align-items: center;
  padding: clamp(104px, 13vh, 150px) 0 clamp(72px, 10vh, 120px);
  background: #07070a;
  text-align: center;
}
.acq-jv-hero-bg { position: absolute; inset: 0; z-index: -2; }
.acq-jv-hero-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* "the one that will be background has to be black and white as well" */
  filter: grayscale(1) contrast(1.1) brightness(0.66);
}
/* "you also add a little veil on it" — the page's own gold wash, then a
   dark grade so the title and the buttons hold against the photograph */
.acq-jv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(155deg, rgba(226,196,120,0.34) 0%, rgba(181,155,72,0.20) 46%, rgba(70,52,16,0.34) 100%);
  mix-blend-mode: soft-light;
}
.acq-jv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(74% 60% at 50% 50%, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.30) 32%, rgba(0,0,0,0.40) 64%, rgba(0,0,0,0.88) 100%);
}
.acq-jv-hero > .container { position: relative; z-index: 1; width: 100%; }
.acq-jv-hero-title { color: #fff; margin: 0; }
.acq-jv-hero-title .sp-gold { color: var(--gold-light); }
.acq-jv-hero .sp-actions { margin-top: clamp(26px, 4vh, 46px); }

/* the story half, on the light ground */
.acq-jv-story.acq-seam-a {
  background: var(--paper);
  display: block; min-height: 0;
  padding: clamp(78px, 11vh, 130px) 0 clamp(78px, 11vh, 130px);
}
.acq-jv-story .acq-jv-label,
.acq-jv-story .acq-jv-label span { color: var(--gold-dark); }
.acq-jv-story-title { margin: 0 0 clamp(26px, 3.4vh, 44px); }
.acq-jv-story-title .jv-line { display: block; }
.acq-jv-story-title .sp-gold { color: var(--gold-dark); }
.acq-jv-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 60px);
}
.acq-jv-cols .sp-body + .sp-body { margin-top: 18px; }
/* the two punch lines were written for the dark deck */
.acq-jv-story .jv-punch {
  color: var(--navy); font-weight: 500;
  margin-top: clamp(28px, 3.6vh, 44px);
}
.acq-jv-story .jv-punch-sub { color: var(--gold-dark); }
.acq-jv-plate {
  position: relative; margin: clamp(30px, 4vh, 54px) 0 0;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(20,20,20,0.18);
}
.acq-jv-plate img {
  width: 100%; display: block;
  aspect-ratio: 16 / 7; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1);
}
.acq-jv-plate:hover img { transform: scale(1.06); }
@media (max-width: 900px){
  .acq-jv-cols { grid-template-columns: 1fr; }
  .acq-jv-hero { min-height: 0; padding: 120px 0 72px; }
  .acq-jv-plate img { aspect-ratio: 4 / 3; }
}

/* Dara: "a golden overlay on all the images, to make it look serious."
   One warm veil over every content-image surface on this page. The
   :where() keeps zero specificity so it never fights an element that is
   already positioned some other way. */
:where(.acq-ed-figure--wide, .jv-figure, .zcard-media, .acq-point-media,
       .acq-bento-photo, .acq-adv-shot, .sp-split-media, .acq-src-figure,
       .acq-once-figure, .acq-stack) { position: relative; }
/* Dara: "all the image plates and title cards should be curved, not
   square edges" — every card and figure on this page gets the same
   radius as the Inside The Experience cards. */
.acq-bento-card, .acq-src-figure, .acq-once-figure, .sp-split-media,
.acq-stack-img, .acq-showcase-media .acq-stack-img, .acq-cta-bg,
.jv-figure, .acq-diff-panel-figure {
  border-radius: 18px;
}
.acq-bento-photo, .acq-point-media { border-radius: inherit; }

/* (Dara: the JetVault part-one placeholder keeps its natural colour —
   no gold veil on .acq-ed-figure--wide) */
/* NB: the black-and-white plates are deliberately NOT in these lists —
   a gold veil over a grayscale photo just reads as a sepia tint. */
.acq-point-media::after, .acq-bento-photo::after, .acq-adv-shot::after,
.sp-split-media::after, .acq-src-figure::after,
.acq-jv-plate::after,
.acq-stack::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(165deg, rgba(226,196,120,0.60) 0%, rgba(181,155,72,0.38) 45%, rgba(84,64,24,0.55) 100%);
  mix-blend-mode: soft-light;
}
/* a faint straight veil under the blend, so the grade reads even where
   soft-light has little to bite on */
.acq-point-media::before, .acq-bento-photo::before, .acq-adv-shot::before,
.sp-split-media::before, .acq-src-figure::before,
.acq-jv-plate::before,
.acq-stack::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(181, 155, 72, 0.14);
}

/* ---- Ready When You Are: light band over a washed photograph -------
   The photo is real, black and white, then buried under a near-white
   wash so the band reads white first and picture second (Dara: keep
   more of the white than the black). */
.ch-ready { position: relative; overflow: hidden; }
.ch-ready-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ch-ready-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) brightness(1.08) contrast(0.92);
}
.ch-ready-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,253,248,0.95) 0%,
    rgba(255,253,248,0.80) 50%,
    rgba(255,253,248,0.95) 100%);
}
.ch-ready .container { position: relative; z-index: 1; }
/* Dara: the main copy line reads gold here */
.ch-ready .ch-ready-head { color: var(--gold); margin-bottom: 18px; }

/* ---- The Difference: auto-advancing feature showcase ---------------
   Port of the progress-line features reference: the six points on the
   left, the live one on a white card with a gold line filling under it,
   its photograph holding the right. initChDx drives it. */
.ch-dx-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  margin-top: clamp(26px, 4vh, 44px);
}
.ch-dx-list { display: flex; flex-direction: column; gap: 6px; }
.ch-dx-item {
  text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: 16px;
  padding: 16px 20px 14px; cursor: pointer;
  font: inherit; color: inherit;
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
/* Dara: this section is back on black, so the panel is dark glass and the
   type is light — the live card lifts out of the black rather than onto white */
.ch-dx-item h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.82); margin: 0 0 6px;
  transition: color .45s ease;
}
.ch-dx-item p {
  font-size: 14.5px; line-height: 1.65; font-weight: 300; margin: 0;
  color: rgba(255,255,255,0.46);
  transition: color .45s ease;
}
.ch-dx-bar {
  display: block; height: 2px; margin-top: 12px; border-radius: 2px;
  background: rgba(255,255,255,0.14); overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
}
.ch-dx-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
}
.ch-dx-item.is-on {
  background: linear-gradient(150deg, rgba(24,24,24,0.94) 0%, rgba(8,8,8,0.96) 100%);
  border-color: rgba(217,196,138,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 26px 60px -20px rgba(0,0,0,0.72);
}
.ch-dx-item.is-on h3 { color: #fff; }
.ch-dx-item.is-on p { color: rgba(255,255,255,0.72); }
.ch-dx-item.is-on .ch-dx-bar { opacity: 1; }
.ch-dx-stage {
  position: relative; margin: 0; overflow: hidden; border-radius: 20px;
  height: clamp(320px, 52vh, 500px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 40px 90px -26px rgba(0,0,0,0.78);
}
.ch-dx-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: translateY(26px) scale(1.03);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.ch-dx-stage img.is-on { opacity: 1; transform: none; }
/* keep each photograph's subject in frame inside the portrait-ish panel */
.ch-dx-stage img:nth-child(5) { object-position: 50% 62%; }  /* the car body   */
.ch-dx-stage img:nth-child(6) { object-position: 62% 38%; }  /* crew + guests  */
@media (max-width: 900px){
  .ch-dx-grid { grid-template-columns: 1fr; }
  .ch-dx-stage { order: -1; height: 58vw; min-height: 240px; }
}

/* ---- Closing band: photograph under the dark wash, gold untouched -- */
.ch-cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Dara wants the gold to carry this band, but `.sp-subhead .sp-gold`
   forces subhead golds to inherit page-wide — scoped back on here only. */
.ch-cta .sp-subhead .sp-gold { color: var(--gold-light); }

/* Dara: much darker, so the gold carries the band */
.ch-cta-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  filter: grayscale(1) brightness(0.30) contrast(1.24);
}
.ch-cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 130% at 50% 0%,
    rgba(16,16,16,0.72) 0%, rgba(9,9,10,0.86) 58%, rgba(4,4,4,0.94) 100%);
}
/* the concierge page's closing band wants more of the photograph showing
   through than the charter one does */
.jc-page-cta .ch-cta-bg img { filter: grayscale(1) brightness(0.46) contrast(1.16); }
.jc-page-cta .ch-cta-bg::after {
  background: radial-gradient(120% 130% at 50% 0%,
    rgba(18,18,18,0.50) 0%, rgba(11,11,12,0.66) 58%, rgba(6,6,6,0.80) 100%);
}

/* ============================================================
   COMING SOON — the holding screen every not-yet-built page
   points at. One full viewport, real photograph in black and
   white under the dark grade, type centred.
   ============================================================ */
.cs-hold {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(120px, 16vh, 190px) 0 clamp(80px, 12vh, 150px);
  background: #07070a;
  text-align: center;
}
.cs-hold-bg { position: absolute; inset: 0; z-index: -2; }
.cs-hold-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.6);
}
.cs-hold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(155deg, rgba(226,196,120,0.28) 0%, rgba(181,155,72,0.16) 46%, rgba(70,52,16,0.30) 100%);
  mix-blend-mode: soft-light;
}
.cs-hold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(72% 58% at 50% 46%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.74) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.32) 34%, rgba(0,0,0,0.44) 66%, rgba(0,0,0,0.88) 100%);
}
.cs-hold > .container { position: relative; z-index: 1; width: 100%; }
.cs-kicker {
  font-family: var(--sans); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.3em; font-weight: 500;
  color: var(--gold-light); margin: 0 0 18px;
}
.cs-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 7rem); line-height: 1.04;
  letter-spacing: -0.015em; color: #fff; margin: 0 0 22px;
}
.cs-line {
  font-size: 17px; line-height: 1.78; color: #fff;
  max-width: 660px; margin: 0 auto;
}
.cs-hold .sp-actions { margin-top: clamp(28px, 4.4vh, 48px); }