/* ==========================================================================
   Jettset × Bio Atelier — Aviation Wellness
   Page-specific styles. Every new selector here is prefixed `.ba-` so it
   cannot collide with sitewide rules in styles.css or with other page
   stylesheets (medical.css, house-section.css, etc). Shared chrome — the
   nav, side panel, contact mark and footer — is left untouched and keeps
   inheriting its look from styles.css. Section entrances reuse the
   sitewide [data-reveal] / [data-reveal-group] mechanism already defined
   in styles.css and wired up in script.js — no new JS for that.

   Typography: EB Garamond (display) / Inter (body), scoped to `.ba-page`
   only, per the locked brand type for this campaign — deliberate from the
   sitewide Canela Text / General Sans pairing. Shared nav/footer chrome is
   unaffected.

   Palette: mapped onto the site's existing tokens (near-black / warm ivory
   / gold / platinum / grey) so a future palette update in styles.css
   propagates here. Dark-dominant throughout — only Section 04 (the
   Journey Recovery Collection) uses a full ivory surface, per brief. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

.ba-page{
  --ba-ink: var(--black, #0A0908);           /* primary canvas — near-black */
  --ba-charcoal: var(--black-elevated, #16140F); /* secondary dark surface */
  --ba-ivory: var(--off-white, #F5F3EF);     /* typography + the one ivory section */
  --ba-stone: #C9BEB0;                        /* warm stone — secondary copy on dark */
  --ba-champagne: #C6A97C;                    /* muted champagne — sparing accent */
  --ba-gold: var(--gold, #C9A24B);            /* used very sparingly, per brief */
  --ba-titanium: var(--platinum, #D8DBDE);
  --ba-smoke: var(--grey, #8A8782);
  --ba-line: var(--grey-line, rgba(245,243,239,0.12));
  --ba-wood: linear-gradient(160deg, #1c1712, #0c0a08); /* dark-wood surface for placeholders */
  --ba-ivory-soft: #EEE8DC; /* warmer, softer than --ba-ivory — the one light section only */

  background: var(--ba-ink);
  color: var(--ba-ivory);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  /* No overflow-x:hidden here — it would force overflow-y:auto on this
     <main> (CSS Overflow spec: one non-visible axis forces the other to
     `auto`), turning it into its own scroll container and breaking the
     hero's position:sticky. Horizontal overflow is already guarded
     sitewide by body{overflow-x:hidden} in styles.css. */
}

/* 1100px matches the site's most common content max-width (see
   .editorial-preview-col, .founder-note and others in styles.css) rather
   than an invented figure. */
.ba-page .ba-container{ max-width:1100px; margin:0 auto; }

/* This is the only page on the site with a light section in the scroll
   path (the Journey Recovery Collection). The fixed nav logo already
   carries a drop-shadow sitewide for contrast over photography; that
   same technique is reinforced (not replaced) here, scoped to this page
   only via body.ba-page-body, so the mark stays legible crossing from
   dark into that one light section without touching the shared nav CSS
   or any other page. */
body.ba-page-body .nav-logo-center img{
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 16px rgba(0,0,0,0.35));
}

.ba-page .ba-serif{ font-family:'EB Garamond', serif; }

.ba-page .ba-eyebrow{
  font-family:'Inter', sans-serif; font-size:0.68rem; letter-spacing:0.16em;
  color:var(--ba-champagne); text-transform:uppercase; display:block; margin-bottom:16px;
}

/* Reuses the sitewide spacing-rhythm tokens (--space-standard-d/m,
   defined once in styles.css and already used across .segments,
   .editorial-preview-col, etc.) instead of an invented clamp() scale, and
   the same 64px/32px side-padding pairing those sections use — this is
   the site's actual "standard" section rhythm, not a parallel one. */
.ba-page .ba-section{
  padding:var(--space-standard-d, 96px) 64px;
  border-top:1px solid var(--ba-line);
}
.ba-page .ba-section:first-of-type{ border-top:none; }
@media (max-width:768px){
  .ba-page .ba-section{ padding:var(--space-standard-m, 48px) 24px; }
}

.ba-page h2.ba-h{
  font-family:'EB Garamond', serif; font-weight:500; color:var(--ba-ivory);
  font-size:clamp(1.7rem,3.1vw,2.55rem); line-height:1.16; letter-spacing:-0.005em;
  margin-bottom:26px;
}

.ba-page .ba-lede{
  color:var(--ba-stone); line-height:1.8; font-size:0.98rem; max-width:58ch;
}
.ba-page .ba-lede + .ba-lede{ margin-top:16px; }

/* Tracking (0.16em) matches the sitewide .btn-ghost button (0.18em) and
   this page's own eyebrow labels (0.16em) — one tracked-uppercase
   language across buttons and labels, not a separate value per element. */
.ba-page .ba-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px; padding:13px 26px;
  border:1px solid var(--ba-gold); color:var(--ba-gold); text-decoration:none;
  font-family:'Inter', sans-serif; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s;
}
.ba-page .ba-cta:hover{ background:var(--ba-gold); color:var(--ba-ink); }
.ba-page .ba-cta:visited{ color:var(--ba-gold); }
/* Secondary action: same geometry and height as the primary, but visibly
   quieter — dimmer border, dimmer text — so the primary CTA stays the
   one the eye lands on first. */
.ba-page .ba-cta-quiet{
  border-color:rgba(245,243,239,0.22); color:var(--ba-stone);
}
.ba-page .ba-cta-quiet:hover{ background:rgba(245,243,239,0.08); color:var(--ba-ivory); border-color:rgba(245,243,239,0.4); }
.ba-page .ba-cta-quiet:visited{ color:var(--ba-stone); }
.ba-page .ba-cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ================= HERO =================
   `#baHeroPlate` is a single, swappable, LOCKED <img src> with no
   width/height baked into the markup — sizing comes entirely from this
   CSS (object-fit: cover). Full viewport, minimal copy over the frame's
   calmer lower-left, no reveal sequence. The only motion is a
   barely-perceptible scale drift (1 -> 1.025) as the guest begins
   scrolling, applied directly to the image by aviation-wellness.js.
   The wrap is only slightly taller than one viewport (140vh) — just
   enough room for that drift — after which Chapter Two rises over the
   sticky image in ordinary page flow. */
.ba-page .ba-doorway-wrap{ position:relative; height:140vh; padding:0; border-top:none; }
.ba-page .ba-doorway-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--ba-ink); }

.ba-page .ba-hero-plate{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:32% 30%; /* keeps her in frame, negative space to the right, across aspect ratios */
  will-change:transform;
}
@media (max-width:640px){
  /* Portrait phones crop far more off the sides than desktop does, so the
     focal point is nudged to keep her fully in frame rather than clipped. */
  .ba-page .ba-hero-plate{ object-position:22% 26%; }
}

/* Scrim: a quiet gradient so the copy block reads cleanly regardless of
   what sits behind it — not a design effect, just legibility. Strengthened
   slightly (0.72->0.8, stop moved 38%->42%) now that the hero holds only
   the headline/tagline/CTA (the two body paragraphs moved to the intro
   strip below), so the shorter text block still reads with confidence. */
.ba-page .ba-hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(6,5,4,0.8) 0%, rgba(6,5,4,0.32) 42%, transparent 64%);
}

.ba-page .ba-hero-copy{
  /* Bottom padding matches the sitewide .chapter-hero-content convention
     (130px / 90px on mobile) so this never collides with the fixed
     .contact-mark call/WhatsApp icons at bottom-left. Now holding only
     headline/tagline/CTA (no body paragraphs), the block is short enough
     to sit fully clear of her face/shoulders at both desktop and mobile
     widths — verified against the hero's object-position on each. */
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 clamp(28px,6vw,64px) 130px;
  max-width:640px;
  animation: baHeroCopyIn 1.1s ease-out both;
}
@media (max-width:640px){
  .ba-page .ba-hero-copy{ padding:0 24px 110px; }
}
@keyframes baHeroCopyIn{ from{ opacity:0; } to{ opacity:1; } }
.ba-page .ba-hero-copy .ba-eyebrow{ color:var(--ba-champagne); margin-bottom:14px; }
.ba-page .ba-hero-copy h1{
  font-family:'EB Garamond', serif; font-weight:500; color:var(--ba-ivory);
  font-size:clamp(2.3rem,5.4vw,3.8rem); line-height:1.06; margin:0;
}
.ba-page .ba-hero-copy .ba-hero-sub{
  font-family:'EB Garamond', serif; font-style:italic; font-weight:400;
  color:var(--ba-stone); font-size:clamp(1.02rem,1.7vw,1.3rem); margin:10px 0 0;
}
.ba-page .ba-hero-copy .ba-cta{ margin-top:24px; }

/* Reduced motion: no drift at all — a calm static hero photo. */
@media (prefers-reduced-motion: reduce){
  .ba-page .ba-doorway-wrap{ height:auto; }
  .ba-page .ba-doorway-sticky{ position:relative; height:100vh; }
  .ba-page .ba-hero-plate{ transform:none !important; }
  .ba-page .ba-hero-copy{ animation:none; opacity:1; }
}

/* ================= SECTION 1B — INTRO STRIP =================
   Quiet band directly below the hero, holding the two paragraphs that
   used to live in the hero itself. Thin rule above and below (its own
   top border plus the .ba-idea section's top border immediately after
   it), two columns on desktop, stacked on mobile. */
.ba-page .ba-intro-strip{
  background:var(--ba-ink); border-top:1px solid var(--ba-line); border-bottom:1px solid var(--ba-line);
  padding:var(--space-compact-d, 64px) 64px;
}
@media (max-width:768px){
  .ba-page .ba-intro-strip{ padding:var(--space-compact-m, 32px) 24px; }
}
.ba-page .ba-intro-strip-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px);
}
@media (max-width:760px){ .ba-page .ba-intro-strip-grid{ grid-template-columns:1fr; gap:20px; } }
.ba-page .ba-intro-strip-grid p{ color:var(--ba-stone); line-height:1.8; font-size:0.95rem; margin:0; }

/* ================= SECTION 02 — THE BIG IDEA =================
   Typography-led, near-black. No image. */
.ba-page .ba-idea{ background:var(--ba-ink); }
.ba-page .ba-idea .ba-container{ max-width:820px; }
.ba-page .ba-idea-statement{
  margin-top:44px; padding-top:32px; border-top:1px solid var(--ba-line);
  font-family:'EB Garamond', serif; font-weight:500; letter-spacing:0.04em;
  text-transform:uppercase; font-size:clamp(1.1rem,2.6vw,1.6rem); color:var(--ba-champagne);
}

/* ================= SECTION 03 — BEFORE / DURING / AFTER TRIPTYCH =================
   Replaces the plain-text Prepare/Reset/Arrive list. Three photos, equal
   width, each with a bottom-anchored gradient caption — eyebrow,
   headline, one line. No page-level border-top (this section isn't a
   .ba-section — it's edge-to-edge photography with no side padding),
   so it sits flush against the Big Idea section above and below. */
.ba-page .ba-triptych{
  display:grid; grid-template-columns:repeat(3,1fr);
}
@media (max-width:768px){ .ba-page .ba-triptych{ grid-template-columns:1fr; } }
.ba-page .ba-triptych-panel{
  position:relative; aspect-ratio:4/5; overflow:hidden; margin:0;
}
.ba-page .ba-triptych-panel img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-page .ba-triptych-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.1) 48%, transparent 72%);
}
.ba-page .ba-triptych-eyebrow{
  font-family:'Inter', sans-serif; font-size:0.65rem; letter-spacing:0.16em;
  color:var(--ba-champagne); text-transform:uppercase; margin-bottom:6px;
}
.ba-page .ba-triptych-overlay h3{
  font-family:'EB Garamond', serif; font-weight:500; color:var(--ba-ivory); font-size:1.6rem; margin:0;
}
.ba-page .ba-triptych-overlay p{
  color:var(--ba-titanium); font-size:0.85rem; margin:8px 0 0; max-width:26ch;
}

/* ================= SECTION 3B — COMPLIMENTARY ONBOARD WELLNESS =================
   Jettset's own onboard recovery technology — a direct Jettset offering,
   not a Bio Atelier product. Ink tone: sits between the charcoal Prepare/
   Reset/Arrive section above and the ivory Collection section below, so
   neither boundary repeats an identical tone. */
.ba-page .ba-onboard{ background:var(--ba-ink); }
.ba-page .ba-onboard-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,5vw,56px); align-items:center; margin-top:8px; }
@media (max-width:860px){ .ba-page .ba-onboard-grid{ grid-template-columns:1fr; } }
.ba-page .ba-onboard-list{ list-style:none; margin:0; padding:0; }
.ba-page .ba-onboard-list li{ padding:18px 0; border-top:1px solid var(--ba-line); }
.ba-page .ba-onboard-list li:last-child{ border-bottom:1px solid var(--ba-line); }
.ba-page .ba-onboard-list h3{
  font-family:'EB Garamond', serif; font-weight:500; color:var(--ba-ivory);
  font-size:1.05rem; margin:0 0 6px; letter-spacing:0.01em;
}
.ba-page .ba-onboard-list p{ color:var(--ba-stone); font-size:0.88rem; margin:0; }
.ba-page .ba-onboard .ba-suitability-note{ margin-top:30px; }

/* Real photography, same dark-wood-bordered plate the placeholder used.
   Shared by the Onboard Wellness and Card Members figures — both are
   full lifestyle photos, not product labels that must stay fully
   visible, so object-fit:cover gives the same edge-to-edge, premium
   full-bleed treatment as the hero. */
.ba-page .ba-onboard-figure{
  border:1px solid var(--ba-line); background:var(--ba-wood);
  width:100%; min-width:0; margin:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ba-page .ba-onboard-figure img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* The Onboard Wellness photo (sleeping guest) is noticeably less wide
   relative to its height than the 8:5 box, so a centred crop would cut
   into his hair/forehead — biasing toward the top keeps his face fully
   in frame and crops from the lower/chest area instead, which can
   afford it. Scoped to this one section only; the Card Members photo
   below is close enough to 8:5 already that a plain center crop is fine. */
.ba-page #ba-onboard .ba-onboard-figure img{ object-position:50% 20%; }

/* ================= SECTION 04 — JOURNEY RECOVERY COLLECTION =================
   The one intentional warm/ivory editorial surface on the page. */
/* Warmer and softer than pure --ba-ivory, so this — the page's one light
   surface — reads as tactile stone/ivory rather than a clinical white
   panel dropped into the dark layout. */
.ba-page .ba-collection{ background:var(--ba-ivory-soft); color:var(--ba-ink); }
.ba-page .ba-collection .ba-eyebrow{ color:var(--ba-gold); }
.ba-page .ba-collection .ba-h{ color:var(--ba-ink); }
.ba-page .ba-collection .ba-hero-sub-line{
  font-family:'EB Garamond', serif; font-style:italic; color:#6B6355; font-size:1.1rem; margin:8px 0 22px;
}
.ba-page .ba-collection .ba-lede{ color:#4A453D; }
/* Partner logo mark, above the "In Partnership With Bio Atelier" tag.
   Natural aspect ratio (the source PNG is pre-cropped tight to the
   wordmark), fixed height only — no border, no background box, so it
   reads as a mark sitting on the page, not a framed asset. */
.ba-page .ba-partner-logo-mark{ height:28px; width:auto; margin-bottom:14px; opacity:0.95; }
.ba-page .ba-collection-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,5vw,56px); align-items:center; }
@media (max-width:860px){ .ba-page .ba-collection-grid{ grid-template-columns:1fr; } }
.ba-page .ba-label-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.ba-page .ba-label{
  border:1px solid rgba(10,9,8,0.18); color:#3A362F; font-family:'Inter', sans-serif;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; padding:8px 16px;
}

/* ================= PLACEHOLDER FIGURES (shared, several sections) =================
   Not real imagery — an intentional, clearly-labelled placeholder in the
   correct aspect ratio, styled as a dark-wood/charcoal surface so it
   never reads as a broken image. */
.ba-page .ba-placeholder{
  border:1px solid var(--ba-line); background:var(--ba-wood);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding:32px; width:100%; margin:0;
}
.ba-page .ba-placeholder-tag{
  font-family:'Inter', sans-serif; font-size:0.62rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ba-champagne);
}
.ba-page .ba-placeholder-title{
  font-family:'EB Garamond', serif; font-size:1.05rem; color:var(--ba-ivory); margin-top:4px;
}
.ba-page .ba-placeholder-desc{ font-size:0.8rem; color:var(--ba-smoke); max-width:36ch; line-height:1.6; }
.ba-page .ba-placeholder-dims{
  font-family:'Inter', sans-serif; font-size:0.68rem; letter-spacing:0.06em; color:var(--ba-smoke); margin-top:6px;
}
/* On the ivory collection surface, the placeholder stays a dark plate —
   the one deliberate contrast moment, not a light box on light ground. */
.ba-page .ba-collection .ba-placeholder{ border-color:rgba(10,9,8,0.16); }

/* Real product photography, in the same 4:3 plate the placeholder used.
   object-fit:contain (not cover) is deliberate: the photo's own aspect
   ratio (1:1) doesn't match the 4:3 box, and `contain` is what guarantees
   the full bottles, pen and labels stay visible with no cropping, letting
   the dark-wood plate show as a frame around it rather than cutting into
   the product shot itself. */
.ba-page .ba-collection-figure{
  border:1px solid rgba(10,9,8,0.16); background:var(--ba-wood);
  width:100%; margin:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ba-page .ba-collection-figure img{
  width:100%; height:100%; object-fit:contain; display:block;
}

/* ================= SECTION 05 — PERSONALISED WELLNESS ================= */
.ba-page .ba-personal{ background:var(--ba-ink); }
.ba-page .ba-personal-scenarios{ color:var(--ba-stone); line-height:1.9; font-size:0.96rem; margin:22px 0; }

/* Photo-led category menu (replaces the old plain bullet list). All
   four cards now carry real photography — Cellular & Energy and
   Hydration & Recovery started as icon placeholders pending final
   imagery, since replaced with approved photos to match Restore &
   Reset and Skin & Vitality. */
.ba-page .ba-menu-categories{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.5vw,28px); margin:26px 0 34px;
}
@media (max-width:860px){ .ba-page .ba-menu-categories{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ba-page .ba-menu-categories{ grid-template-columns:1fr; } }
.ba-page .ba-menu-cat{
  border:1px solid var(--ba-line); padding:28px 24px; min-width:0;
}
.ba-page .ba-menu-cat h3{
  font-family:'EB Garamond', serif; font-weight:500; color:var(--ba-ivory);
  font-size:1.15rem; margin:0 0 8px; letter-spacing:0.01em;
}
.ba-page .ba-menu-cat p{ color:var(--ba-stone); font-size:0.86rem; line-height:1.6; margin:0; }
/* Photo card: same border/padding rhythm as its siblings, with a compact
   image plate above the text instead of an icon. */
.ba-page .ba-menu-cat-photo{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.ba-page .ba-menu-cat-figure{ aspect-ratio:1/1; margin:0; overflow:hidden; }
.ba-page .ba-menu-cat-figure img{ width:100%; height:100%; object-fit:cover; display:block; object-position:center 45%; }
.ba-page .ba-menu-cat-body{ padding:18px 20px 22px; }
.ba-page .ba-menu-cat-body h3{ margin:0 0 8px; }
.ba-page .ba-menu-cat-body p{ margin:0; }

/* Ground vs air: a top rule and an eyebrow label each — no cards — so the
   two columns still read as one editorial spread, just clearly divided. */
.ba-page .ba-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); margin-top:40px; }
@media (max-width:760px){ .ba-page .ba-split{ grid-template-columns:1fr; gap:28px; } }
.ba-page .ba-split-panel{ border-top:1px solid var(--ba-line); padding-top:22px; }
.ba-page .ba-split-panel .ba-eyebrow{ color:var(--ba-titanium); margin-bottom:12px; }
.ba-page .ba-split-panel p{ color:var(--ba-stone); line-height:1.75; font-size:0.92rem; }

/* Quiet suitability note — support copy, not a legal warning box. */
.ba-page .ba-suitability-note{
  margin-top:32px; color:var(--ba-smoke); font-size:0.8rem; line-height:1.6; max-width:60ch;
}

/* ================= SECTION 7B — BUILT AROUND HOW YOU MOVE =================
   Audience segmentation, matching the pattern of the homepage's
   "Who We Fly" section — icon-led, no photography.
   Charcoal, not ink: "Wellness That Moves With You" (the section that
   used to sit between this one and the ink-toned Personalised Wellness
   section above) was removed entirely per the v2 mockup — without this
   tonal shift, Personalised Wellness and this section would now sit
   ink-on-ink back to back. This one small shift restores the page's
   no-identical-adjacent-tone rule; the warm-dark Partner section still
   follows immediately after, so no further adjustment needed there. */
.ba-page .ba-audience{ background:var(--ba-charcoal); }
.ba-page .ba-audience-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,32px); margin-top:8px;
}
@media (max-width:860px){ .ba-page .ba-audience-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ba-page .ba-audience-grid{ grid-template-columns:1fr; } }
.ba-page .ba-audience-item{ border-top:1px solid var(--ba-line); padding-top:20px; }
.ba-page .ba-audience-icon{
  display:inline-flex; width:26px; height:26px; color:var(--ba-champagne); margin-bottom:14px;
}
.ba-page .ba-audience-icon svg{ width:100%; height:100%; }
.ba-page .ba-audience-item h3{
  font-family:'EB Garamond', serif; font-weight:500; color:var(--ba-ivory);
  font-size:1.05rem; margin:0 0 8px; letter-spacing:0.01em;
}
.ba-page .ba-audience-item p{ color:var(--ba-stone); font-size:0.85rem; line-height:1.6; margin:0; }

/* ================= SECTION 08 — OFFICIAL WELLNESS PARTNER + LONDON LAUNCH =================
   Combined two-column block, full-bleed (not a .ba-section — no side
   padding on the outer element itself): the London panel goes edge to
   edge in the left column, with a bottom-anchored gradient caption
   carrying the launch line that used to be its own standalone Rollout
   section. Text column on the right keeps the page's standard side
   padding via its own rule below. A slightly warmer neutral tone, still
   Jettset's dark layout system. */
.ba-page .ba-partner{
  background:#150F0A; border-top:1px solid var(--ba-line);
  display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width:860px){ .ba-page .ba-partner{ grid-template-columns:1fr; } }
.ba-page .ba-partner-imgcol{ position:relative; min-height:420px; }
.ba-page .ba-partner-imgcol img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba-page .ba-partner-imgcol-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:32px;
  /* Never fully transparent, even at the top of the padded box: the
     eyebrow sits right at that edge, and against a bright sky (as in
     the London panel) a gradient that reaches 0 opacity there leaves it
     unreadable. A faint 0.08 floor at 100% keeps it backed regardless
     of what's behind it. */
  background:linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.08) 100%);
}
.ba-page .ba-partner-imgcol-caption .ba-eyebrow{ margin-bottom:6px; }
.ba-page .ba-partner-imgcol-caption p{ color:var(--ba-titanium); font-size:0.88rem; line-height:1.6; max-width:34ch; margin:0; }
.ba-page .ba-partner-textcol{
  padding:var(--space-standard-d, 96px) 64px;
}
@media (max-width:768px){ .ba-page .ba-partner-textcol{ padding:var(--space-standard-m, 48px) 24px; } }
.ba-page .ba-partner .ba-eyebrow{ color:var(--ba-champagne); }
/* The "Bio Atelier" heading is the partner's own wordmark logo rather
   than set text — the source asset's flat dark background was keyed
   out to real transparency so it sits on the section's own warm-dark
   background with no visible box. Sized to sit at roughly the same
   visual weight as the .ba-h headings elsewhere on the page, not to
   the source image's own pixel height. */
.ba-page .ba-partner-name{ margin-bottom:22px; }
.ba-page .ba-partner-name img{ height:clamp(30px,4.2vw,42px); width:auto; display:block; }
.ba-page .ba-partner-tagline{
  margin-top:20px; margin-bottom:4px; font-family:'EB Garamond', serif; font-style:italic;
  color:var(--ba-champagne); font-size:1.15rem;
}
.ba-page .ba-partner-founder-line{
  margin-top:16px; color:var(--ba-stone); font-size:0.92rem; line-height:1.7; max-width:54ch;
}
.ba-page .ba-proof-strip{
  display:flex; flex-wrap:wrap; gap:0; margin-top:24px;
}
.ba-page .ba-proof-item{
  font-family:'Inter', sans-serif; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ba-titanium); padding:0 16px 0 0; margin-right:16px; border-right:1px solid var(--ba-line);
}
.ba-page .ba-proof-item:last-child{ border-right:none; padding-right:0; margin-right:0; }
/* Below ~480px the three items no longer fit one line, and a wrapped
   right-border leaves an orphaned divider trailing the first line —
   switch to a stacked list with bottom rules instead. */
@media (max-width:480px){
  .ba-page .ba-proof-strip{ flex-direction:column; gap:10px; }
  .ba-page .ba-proof-item{
    border-right:none; padding-right:0; margin-right:0;
  }
}
/* ================= SECTION 8B — JETTSET CARD MEMBERS =================
   Charcoal, not ink: the standalone Rollout section (previously the
   buffer between this section and the Final CTA below, both ink) was
   removed and folded into a short line inside the Partner section above
   — without this tonal shift, Card Members and Final CTA would now sit
   ink-on-ink back to back. */
.ba-page .ba-card-members{ background:var(--ba-charcoal); }
.ba-page .ba-card-members-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:860px){ .ba-page .ba-card-members-grid{ grid-template-columns:1fr; } }
.ba-page .ba-card-members .ba-suitability-note{ margin-top:24px; }
/* Dark-surface variant of .ba-label-row/.ba-label (the base version is
   tuned for the one ivory section) — light border, light text. */
.ba-page .ba-label-row-dark{ margin-top:20px; }
.ba-page .ba-label-row-dark + .ba-label-row-dark{ margin-top:10px; }
.ba-page .ba-label-row-dark .ba-label{
  border-color:var(--ba-line); color:var(--ba-titanium);
}

/* ================= SECTION 10 — FINAL CTA =================
   Standard rhythm on top (matching the rest of the page), compact
   underneath — trimmed relative to the rollout section above it so the
   two don't compound into a very long dark run, and trimmed further
   still so the footer transition (below) reads as one considered close
   rather than two separate large gaps. */
.ba-page .ba-final{
  background:var(--ba-ink); text-align:center;
  padding-top:var(--space-standard-d, 96px); padding-bottom:var(--space-compact-d, 64px);
}
@media (max-width:768px){
  .ba-page .ba-final{ padding-top:var(--space-standard-m, 48px); padding-bottom:var(--space-compact-m, 32px); }
}
.ba-page .ba-final .ba-container{ max-width:640px; margin:0 auto; }
.ba-page .ba-final .ba-eyebrow{ text-align:center; }
.ba-page .ba-final .ba-h{ text-align:center; }
.ba-page .ba-final .ba-lede{ margin:18px auto 0; text-align:center; }
.ba-page .ba-final .ba-cta-row{ justify-content:center; margin-top:30px; }
.ba-page .ba-final-support{ margin-top:22px; color:var(--ba-smoke); font-size:0.82rem; }

/* Footer transition: a thin, low-contrast rule — reusing the sitewide
   divider colour, not a new one — so the move from this page's final
   dark section into the (also dark) sitewide footer reads as one
   intentional close rather than an abrupt, unresolved cut. Scoped to
   this page's own <footer> tag only via .ba-footer-adjoin. */
footer.ba-footer-adjoin{ border-top:1px solid var(--grey-line); }

/* Aspect-ratio placeholder sizing per instance, set inline via style attr
   in the markup (aspect-ratio varies per brief: 4:3, 8:5, 3:2, 8:9). */