/* ============================================================
   SHELLO DIVER CLUB — DESIGN SYSTEM
   Palette from brand logo: navy / sandy white / sunset orange
   ============================================================ */

:root {
  --navy: #2b3377;        /* logo navy */
  --ink: #141a3d;         /* darkest navy for text & deep sections */
  --deep: #0d1230;        /* near-black navy */
  --sand: #f6f3ea;        /* sandy white */
  --sand-2: #ece7d8;
  --orange: #f5821f;      /* logo sunset orange */
  --orange-deep: #e8491d;
  --blue: #3d5bd9;        /* royal blue accent */
  --aqua: #7fc4d4;
  --white: #ffffff;
  --text: #2a2f45;
  --muted: #6b7186;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Brand gradients as variables so photos can layer on top and the
     gradient still shows wherever a photo is missing (url, gradient). */
  --grad-free: linear-gradient(150deg, #16295f, #2b3377 45%, #1a6d86);
  --grad-mer: linear-gradient(150deg, #2b3377, #6a4d9e 55%, #c96a8d);
  --grad-scuba: linear-gradient(150deg, #0d1230, #16407a 55%, #1a86a8);
  --grad-trip: linear-gradient(150deg, #14536b, #1a86a8 50%, #f5821f 130%);

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(13, 18, 48, 0.1);
  --shadow-lg: 0 24px 70px rgba(13, 18, 48, 0.18);
  --maxw: 1200px;
  --header-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--sand);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* A tighter measure for text-led sections (FAQ, Running Club facts) so lines
   don't run to an unreadable width on a large screen. */
.container-narrow { max-width: 820px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: 1.35rem; }

.kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }

/* Chapter overline — the story spine (02 Choose → 06 Join the Crew). */
.kicker-num { display: inline-flex; align-items: center; gap: 10px; }
.section-head.center .kicker-num { justify-content: center; }
.ch-num {
  font-family: var(--font-display);
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0;
  color: var(--muted);
  padding-right: 12px;
  border-right: 1px solid var(--hair);
}
.band .ch-num { color: rgba(255, 255, 255, 0.55); border-right-color: rgba(255, 255, 255, 0.24); }

section { padding: 96px 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 8px 24px rgba(245, 130, 31, 0.35); }
.btn-primary:hover { background: var(--orange-deep); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--ink); }
.btn-line { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-line:hover { background: var(--navy); color: var(--white); }
.btn-on-dark { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.btn-on-dark:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
/* Frosted glass — for a CTA sitting on hero media. Reads as part of the
   photograph rather than stamped on top of it, and stays legible over both
   a bright frame and a dark one because it carries its own blur and border.
   The rgba background is the fallback: where backdrop-filter is unsupported
   the button is still a visible translucent pill, not an invisible outline. */
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.26); border-color: var(--white); color: var(--white); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-lg { padding: 17px 36px; font-size: 1.02rem; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 300;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
#trip-details, #trip-panel { scroll-margin-top: calc(var(--header-h) + 16px); }
#start { scroll-margin-top: var(--header-h); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled,
.site-header.solid {
  background: rgba(246, 243, 234, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(13, 18, 48, 0.07);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo img { height: 34px; width: auto; }
.logo .logo-sand { display: block; }
.logo .logo-navy { display: none; }
.site-header.scrolled .logo-sand, .site-header.solid .logo-sand { display: none; }
.site-header.scrolled .logo-navy, .site-header.solid .logo-navy { display: block; }

/* Ten items live here since the 2026-07-17 nav (Home … Contact + Login +
   CTA), so the gap is tighter than the old seven-item nav's 34px and the
   hamburger takes over earlier (1200px, below) — a cramped desktop nav
   reads worse than a menu button. */
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0.92;
  transition: opacity 0.2s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--orange); }
.site-header.scrolled .nav-links a, .site-header.solid .nav-links a { color: var(--ink); }
.site-header.scrolled .nav-links a:hover, .site-header.solid .nav-links a:hover,
.site-header.scrolled .nav-links a.active, .site-header.solid .nav-links a.active { color: var(--orange); }
/* "My Shello" account entry — outline pill that adapts to the header
   colour flip (white on hero, ink once scrolled) via currentColor. */
.nav-account {
  margin-left: 6px;
  padding: 8px 16px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  opacity: 1 !important;
}
.nav-account:hover { color: var(--orange) !important; border-color: var(--orange); }
.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 42px; height: 42px;
  position: relative;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  margin: 5px auto;
  transition: all 0.3s;
}
.site-header.scrolled .nav-toggle span, .site-header.solid .nav-toggle span, .nav-open .nav-toggle span { background: var(--ink); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero — editorial, photography-led (DISCOVER) ----------
   Height has been argued down three times: 100svh → 74svh → 62svh. Each cut
   came from removing a job rather than shrinking type. At 100svh it carried
   a four-door index, so "what is this?" and "where do I go?" competed and
   neither landed. At 74svh it still carried CTAs and a nav row. It now holds
   one idea and one instruction — the brand, and keep scrolling — so 62svh is
   generous rather than tight, and the top of the Choose Your Adventure cards
   clears the fold on a laptop, which is the actual goal: the hero should end
   before you decide to end it.

   min-height, not height: if someone's browser text is scaled way up the
   hero grows rather than clipping the last line. */
.hero {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
  /* Deep ocean held by light from the surface — no flat colour blocks. */
  background:
    radial-gradient(130% 90% at 50% -10%, #235b7e 0%, #14406b 26%, #16295f 52%, #0b1030 100%);
  /* Top padding clears the 76px fixed header and leaves ~28px of air under
     it. Measured, not guessed: at 1280x720 this lands the hero at ~496px
     (69% of a short laptop, ~55% of a 900px one) with the next section's top
     visible, which is what actually makes someone scroll. The 62svh floor
     above only takes over on very tall windows — content governs here. */
  padding: 104px 0 72px;
}
/* ---- MATTE HERO — homepage only (Sherene, 2026-07-17 r8) ----
   "Matte paper instead of digital gradient." The deep-ocean radial above
   stays for trip/inner heroes (photos need the dark base), but the HOMEPAGE
   hero becomes the brightest section on the page: a lifted, desaturated
   navy with a very small tonal span (low contrast = matte), the glossy
   light shaft flattened to a whisper, the vignette nearly gone, and the
   film grain doing the depth work instead of the colours.

   Scoped with :not(.hero-inner):not(.trip-hero) — the same guard the
   padding rules use — so the 11 trip heroes and every inner page keep
   their current material. If this ever looks flat-WRONG rather than
   flat-matte, raise the grain opacity before touching the colours. */
.hero:not(.hero-inner):not(.trip-hero) {
  background: linear-gradient(175deg, #43527f 0%, #3a4770 55%, #364268 100%);
}
.hero:not(.hero-inner):not(.trip-hero) .hero-light {
  /* One broad sheet of light, not a spotlight — paper, not lacquer. */
  background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 65%);
}
.hero:not(.hero-inner):not(.trip-hero)::after {
  /* Just enough bottom weight to seat the scroll cue. */
  background: linear-gradient(180deg, rgba(11, 16, 48, 0) 0%, rgba(11, 16, 48, 0.16) 100%);
}
.hero:not(.hero-inner):not(.trip-hero) .hero-light::after {
  /* The texture carries the depth here, so it runs a touch stronger than
     the shared 0.5 the dark bands use. */
  opacity: 0.65;
}

.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hero-media .hero-img { background-size: cover; background-position: center; }
/* Soft shaft of surface light — replaces the flat orange disc. */
.hero-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 62% -5%, rgba(255, 234, 200, 0.28), rgba(255, 234, 200, 0) 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(11, 16, 48, 0.55), rgba(11, 16, 48, 0) 55%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 48, 0.28) 0%, rgba(11, 16, 48, 0) 40%, rgba(11, 16, 48, 0.45) 100%);
  pointer-events: none;
}
/* Fine film grain so the gradient atmosphere reads as art direction,
   not a flat placeholder. Barely-there; disappears under real photos. */
.hero-light::after, .trips-feature::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .container { position: relative; z-index: 2; }
.hero-inner-wrap { width: 100%; }
/* Shared hero type — inner pages and the 11 trip heroes rely on these for
   white text on a dark hero. Do NOT fold them into the homepage lockup
   below: a trip hero is `class="hero trip-hero"` with no hero-inner, so
   anything scoped tighter than `.hero` silently drops navy h1s onto a navy
   photo. The homepage overrides these via `.hero .hero-*` (two classes, so
   it outranks `.hero h1`). */
.hero h1 { color: var(--white); max-width: 20ch; font-weight: 400; }
.hero p { margin: 26px 0 0; font-size: 1.16rem; max-width: 42ch; color: rgba(255, 255, 255, 0.82); font-weight: 300; }

/* ---- The brand lockup (homepage) — APPROVED r4, DO NOT REDESIGN ----
   Label → headline → copy. Three elements, and the size order is
   deliberately NOT the reading order: the smallest thing is read first.
   That inversion is the whole design. The label set at 0.9rem above a 6rem
   headline reads as composed and certain — the way a magazine puts its name
   in 12pt above a 60pt story and you still remember the magazine. The same
   name set at 6rem reads as a shopfront, and tells you who is talking before
   you know why you'd listen.

   Restraint is the luxury signal — one display face, one accent, and nothing
   in here that asks to be clicked. Orange appears exactly ONCE on this
   screen, on the label, which is the only reason it still means anything.

   ── The label carries brand AND geography in one line ──
   "SHELLO DIVER CLUB — KL · PENANG · BEYOND". This was two elements once (a
   name, then a separate places line under a hairline). A masthead and a
   dateline are the same kind of information, so one line says it in one beat
   instead of two stacked whispers — and it answers "who are you / where are
   you" before the headline has to carry either.

   Tracking is 0.32em on desktop and tightens on small screens (see the
   680px block): 40 characters at 0.32em need ~560px, which the 1152px
   container has and a 327px phone does not. Wide tracking is a wide-screen
   luxury.

   It still can't hold one line on a phone (40 tracked characters need ~390px
   against a 327px container), so the .nb span keeps "KL · Penang · Beyond"
   together and the label breaks after the em dash instead of amputating the
   geography mid-list. Two deliberate lines beat one accidental one; tracking
   it down far enough to fit would cost the look that makes it a label. */
.hero .hero-brand {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--orange);
  max-width: none;
}
/* Keeps a phrase on one line wherever it wraps. */
.nb { white-space: nowrap; }
/* The headline, and the only h1 here. r3 demoted this to an italic slogan
   under an "Ocean Adventure Club" h1 and Sherene chose this version instead:
   the label already says what we are, so the headline is free to say why
   you'd care, which is the more interesting half.

   ── The 15ch cap, and why it's back ──
   A ch cap was removed from the PREVIOUS headline ("Ocean Adventure Club")
   because it forced a second line nobody wanted and added ~110px of hero.
   That warning stands, and this is the re-measure it demanded: uncapped,
   THIS headline renders as one line 1152px wide at 1536px — exactly the
   container's inner width, touching both edges with nowhere to breathe. The
   cap breaks it to "Explore Beyond / Your Limits.", which is the approved
   reference and the better setting. Two lines here is a decision, not an
   accident.

   The cap alone broke it as "Explore Beyond Your / Limits." — a one-word
   widow. The   binding "Your Limits." in the markup is what puts the
   break after "Beyond"; the cap only forces there to BE a break. Both are
   needed, and neither works alone.

   line-height under 1 because at this size the natural leading opens a gap
   you read as a paragraph break rather than as one thought. */
.hero .hero-headline {
  margin: 16px 0 0;
  color: var(--white);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.2vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.028em;
  max-width: 15ch;
}
/* The copy. 46ch, not 44: at 44 the last sentence orphaned "go." onto a line
   of its own. It runs one sentence longer than it used to (it absorbed the
   old slogan's "Shello is where your ocean life starts." plus the new "Pick
   where you want to go."), so it needs the extra measure to stay four lines
   rather than five. */
.hero .hero-intro {
  margin: 26px 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
}

/* Scroll cue — a quiet invitation, bottom-left (clear of floating buttons). */
.hero-scroll {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%); bottom: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero-scroll:hover { color: var(--white); }
.hero-scroll-line { width: 1px; height: 40px; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); animation: scrollPulse 2.4s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.4; transform: scaleY(0.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* Inner-page hero (smaller — content above the fold sooner) */
.hero.hero-inner { min-height: 46svh; padding: 130px 0 80px; align-items: center; }
.hero.hero-inner .hero-scroll { display: none; }

/* Shared hero button row (inner pages, trip & training heroes). */
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }

/* Inner-page atmosphere — soft warm glow (replaces the old flat orange
   disc), plus a quiet fade into the content below. Consistent with the
   homepage light treatment; no hard shapes. */
.hero-sun {
  position: absolute;
  right: 6vw; top: 10vh;
  width: clamp(220px, 34vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 208, 150, 0.4), rgba(255, 175, 90, 0.14) 45%, rgba(255, 175, 90, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
}
.hero-waves {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 243, 234, 0) 0%, rgba(246, 243, 234, 0.55) 72%, var(--sand) 100%);
}
.hero-waves svg { display: none; }
.section-alt + * .hero-waves,
.store-section .hero-waves { background: linear-gradient(180deg, rgba(236, 231, 216, 0) 0%, var(--sand-2) 100%); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-media {
  height: 210px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.grad-free { background-image: var(--grad-free); }
.grad-mer { background-image: var(--grad-mer); }
.grad-scuba { background-image: var(--grad-scuba); }
.grad-trip { background-image: var(--grad-trip); }
/* Top-RIGHT since 2026-07-16: the activity badges now own the top-left, and
   at 16px/16px the two stacks sat on top of each other. Availability is the
   secondary fact — what the trip IS comes first. */
.card-media .badge {
  position: absolute; top: 16px; right: 16px;
  background: rgba(246, 243, 234, 0.92);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.card-media .badge.hot { background: var(--orange); color: var(--white); }
.card-media .card-title-overlay {
  position: absolute; left: 20px; bottom: 16px; right: 20px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-body h3 { font-size: 1.25rem; }
.card-body .tagline { color: var(--muted); font-size: 0.95rem; flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.83rem; color: var(--muted); }
.card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.price { font-family: var(--font-display); font-size: 1.35rem; color: var(--navy); }
.price small { font-family: var(--font-body); font-size: 0.75rem; color: var(--muted); display: block; }

/* ---------- Brand statement ----------
   The pivot between the brand and the catalogue. One idea, two sentences,
   nothing to click, and a lot of air around it — the air IS the design here,
   which is why this section is padded rather than decorated. No kicker, no
   lead, no CTA: the moment it grows any of those it stops being a pause and
   becomes another section, and the pause is the entire point.

   Set in the display face at roughly half the hero headline, so it reads as
   the same voice speaking more quietly rather than as a new section shouting
   for attention. Centred and narrow (24ch) so the line break lands where the
   copy wants it: "We don't just teach diving. / We build ocean lifestyles."
   is two beats, and the <br> in the markup guarantees the second one starts
   a line even if the copy changes length. */
.brand-statement { padding: 104px 0; text-align: center; }
.bs-line {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto;
}

/* ---------- Quick nav (homepage four doors) ----------
   Editorial cards, not buttons (Joe, 2026-07-16). What made them read as
   buttons was the shape: short, uniform, a hard CTA pill stamped in the
   corner. So the proportions changed first — portrait plates, the format of
   a magazine page rather than a control — and the CTA became a hairline rule
   with a word under it. The card is the photograph; the type is printed on
   it. On hover the image drifts closer and the veil lifts: entering a
   different world, not pressing a control.

   ── Height (Sherene, 2026-07-16 vNext r2) ──
   The plates were 4:5 with a 340px floor, which at four-up made the section
   1.3 screens tall — you could never see the four doors at once, which is
   the one thing this section exists to do. Now 5:6: still unmistakably a
   portrait plate, ~100px shorter per card, and the whole section clears a
   laptop fold under the shortened hero. The floor drops to 300px because
   below that the veil eats the sentence.

   The gap tightened 18px → 14px for the same reason. Four plates close
   together read as one considered spread; the same four spaced apart read as
   a grid of tiles. Compact IS the premium move here — space between things
   is only luxurious when there's room to spare. */
/* ---------- Start Here (homepage) ---------- */
/* The beginner's front door between the hero and the catalogue. Compact on
   purpose — one question, one button — so it reads as a helping hand, not
   another chapter. Sits on sand (.section-alt) so the dark hero still lands
   against light below it and the band rhythm further down is unchanged. */
.start-here { padding: 72px 0; }
.start-here-inner { text-align: center; }
.start-here-inner .lead { margin: 16px auto 0; }
.start-here .section-actions { margin-top: 32px; }
.start-here-note { margin-top: 20px; font-size: 0.9rem; color: var(--muted); }

.quick-nav-section { padding: 56px 0 0; }
.quick-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.qn-card {
  position: relative;
  aspect-ratio: 5 / 6;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  box-shadow: var(--shadow);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
/* The still, on its own layer so it can move while the type stays still. */
.qn-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The hover preview sits over the still and under the veil. It fades in only
   once it's actually playing (js adds .is-playing), so a slow connection
   shows the photo rather than a black rectangle. */
.qn-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.qn-video.is-playing { opacity: 1; }
.qn-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13, 18, 48, 0) 34%, rgba(13, 18, 48, 0.52) 66%, rgba(9, 12, 34, 0.88) 100%);
  transition: opacity 0.5s ease;
}
.qn-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.qn-card:hover .qn-media { transform: scale(1.09); }
.qn-card:hover::after { opacity: 0.86; }

.qn-body { position: relative; z-index: 2; padding: 22px 20px 20px; color: var(--white); width: 100%; }
.qn-body h3 {
  color: var(--white);
  font-size: 1.38rem;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin-bottom: 7px;
}
/* min-height reserves two lines whether the sentence needs them or not.
   The card bottom-aligns its type, so a one-line sentence pushes its title
   DOWN — "Scuba Diving" sat 21px below the other three titles (measured, at
   1280px). Four plates side by side with one title out of step reads as a
   mistake, and it moves as the copy changes, which is worse. Two lines is
   the honest reservation: every current essence fits in two, and a third
   would overflow the veil. Keep essences to ~2 lines at 24ch. */
.qn-body p {
  font-size: 0.88rem;
  line-height: 1.48;
  min-height: 2.96em;
  opacity: 0.78;
  max-width: 24ch;
  font-weight: 300;
}
.qn-arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.qn-card:hover .qn-arrow { transform: translateX(5px); }

/* ---- Choose-Your-Adventure card meta (r5) ----
   The card is now the learning section, so it carries a starting price and
   an entry-level tag. The tag sits top-left of the body as a small pill; the
   price sits on the footer row opposite the Explore CTA, so the eye gets
   "what / how much / go" in one column. Both read live from COURSES. */
.qn-tag {
  align-self: flex-start;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(246, 243, 234, 0.92);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 10px;
}
.qn-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.qn-price { font-family: var(--font-display); font-size: 1.02rem; color: var(--white); white-space: nowrap; }
/* On the merged card the CTA's own top border would double the .qn-foot one,
   so drop it here — the foot row owns the rule now. */
.qn-foot .qn-cta { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- Section actions row ---------- */
.section-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 48px; }

/* ---------- Pathfinder (courses page) ---------- */
.pathfinder-section { padding: 72px 0 0; }
.path-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 4px solid var(--orange);
}
.path-card h3 { font-size: 1.25rem; }
.path-card p { color: var(--muted); font-size: 0.93rem; flex: 1; }
.path-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--white); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 0.9rem; }
.compare-table th {
  text-align: left;
  background: var(--navy);
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.compare-table td { padding: 16px 18px; border-bottom: 1px solid rgba(43, 51, 119, 0.1); vertical-align: top; color: var(--muted); }
.compare-table td b { color: var(--ink); display: block; }
.compare-table tr:last-child td { border-bottom: none; }
.ct-level { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.ct-price { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); white-space: nowrap; }

/* ---------- Trip page (experience-first) ---------- */
/* Trip heroes keep the tall, bottom-anchored framing they were art-directed
   for — the homepage hero got shorter and centred, and these must not follow
   it just because they share the `.hero` class. */
.trip-hero { min-height: 88svh; align-items: flex-end; padding: 150px 0 76px; }
.trip-hero .hero-img { opacity: 0.55; }
.trip-hero h1 { max-width: 18ch; font-size: clamp(2.4rem, 5.4vw, 4rem); }
.trip-hero-sub { margin: 20px 0 36px !important; }
/* Deliberately SMALL cards: the dive-site photos exist only at 620–820px,
   so 240px CSS (480px at 2×) is the largest they can render pin-sharp on a
   retina screen. A smaller crisp image beats a large blurry one — do not
   widen these cards unless higher-resolution originals replace the files. */
.trip-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 240px));
  justify-content: center;
  gap: 14px;
}
.tg-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.tg-item:hover { transform: scale(1.02); }
.tg-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 16, 40, 0.55), transparent 45%);
}
.tg-label {
  position: relative;
  z-index: 1;
  padding: 12px 14px;
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Luxe editions (trips with a `hero` field): the destination name in big
   letterspaced serif over a fuller photo — brochure typography, same hero. */
.trip-hero-luxe .hero-img { opacity: 0.68; }
.trip-hero-luxe .hero-title-luxe {
  font-size: clamp(3rem, 10vw, 6.8rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  max-width: none;
  margin-right: -0.16em; /* the trailing letter-space would un-centre it */
}
.trip-hero-luxe .hero-sub-luxe {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-style: italic;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
}
.itinerary-note { font-size: 0.85rem; font-style: italic; color: var(--muted); margin-top: 14px; }
.trip-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px;
}
.th-item b { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy); display: block; }
.th-item span { font-size: 0.82rem; color: var(--muted); }
.trip-video { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Coming soon tag ---------- */
.soon-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: rgba(245, 130, 31, 0.14);
  border-radius: 999px;
  padding: 3px 10px;
  vertical-align: middle;
}

/* ---------- Instructor profile extras ---------- */
.ins-row b { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.ins-row p { font-size: 0.92rem; color: var(--muted); }
.ins-certs summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--navy); list-style: none; }
.ins-certs summary::-webkit-details-marker { display: none; }
.ins-certs summary::after { content: " +"; color: var(--orange); }
.ins-certs[open] summary::after { content: " –"; }
.ins-certs p { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }

/* ---------- Filter pills ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.pill {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(43, 51, 119, 0.25);
  background: transparent;
  color: var(--navy);
  font-size: 0.87rem;
  font-weight: 600;
  transition: all 0.2s;
}
.pill:hover { border-color: var(--navy); }
.pill.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- Split / feature sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-media {
  border-radius: var(--radius);
  min-height: 420px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
}

/* ---------- Dark band sections ---------- */
.band { background: var(--deep); color: rgba(255, 255, 255, 0.85); }
.band h2, .band h3 { color: var(--white); }
.band .lead { color: rgba(255, 255, 255, 0.65); }

/* Trips — the aspiration beat. A deeper ocean band with surface light,
   so the white trip cards feel like windows onto somewhere you'd rather be. */
.trips-feature {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% -10%, #1c5273 0%, #14406b 30%, #0d1230 70%);
}
.trips-feature::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(45% 40% at 78% 8%, rgba(255, 214, 160, 0.18), rgba(255, 214, 160, 0) 60%);
  pointer-events: none;
}
.trips-feature .container { position: relative; z-index: 1; }
.trips-feature .lead { color: rgba(255, 255, 255, 0.78); max-width: 60ch; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-family: var(--font-display); font-size: 2.6rem; color: var(--orange); }
.stat .lbl { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

/* ---------- Schedule table ---------- */
.schedule-list { display: flex; flex-direction: column; gap: 14px; }
.session {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 18px 24px;
  box-shadow: var(--shadow);
}
.session .s-date { text-align: center; }
.session .s-date .d { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); line-height: 1; }
.session .s-date .m { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
.session .s-info h4 { font-size: 1.05rem; color: var(--ink); }
.session .s-info p { font-size: 0.85rem; color: var(--muted); }
.session .s-seats { font-size: 0.85rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.session .s-seats.low { color: var(--orange-deep); }
.session .s-seats.full { color: var(--muted); }
.session .type-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 6px;
}
.type-course { background: rgba(43, 51, 119, 0.1); color: var(--navy); }
.type-pool { background: rgba(127, 196, 212, 0.25); color: #1a6d86; }
.type-openwater { background: rgba(26, 134, 168, 0.15); color: #16407a; }
.type-trip { background: rgba(245, 130, 31, 0.14); color: var(--orange-deep); }

/* ---------- Social proof — Instagram-style feed (V3) ---------- */
.story-row {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 48px;
}
.story { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.story-ring {
  width: 78px; height: 78px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, var(--orange-deep), var(--orange) 45%, #c96a8d 75%, #6a4d9e);
  display: block;
  transition: transform 0.25s;
}
.story:hover .story-ring { transform: scale(1.06); }
.story-disc {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid var(--deep);
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.story-label { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }

.ig-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ig-post {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ig-post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ig-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ig-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy), #14536b);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--orange);
  flex-shrink: 0;
}
.ig-id { flex: 1; min-width: 0; line-height: 1.3; }
.ig-id b { font-size: 0.88rem; color: var(--ink); display: block; }
.ig-id span { font-size: 0.75rem; color: var(--muted); }
.ig-reel-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--white);
  padding: 4px 10px; border-radius: 999px;
}
.ig-media {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  position: relative;
}
.ig-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.ig-tag {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(246, 243, 234, 0.92);
  color: var(--ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.ig-actions {
  display: flex; gap: 16px;
  padding: 12px 16px 0;
  font-size: 1.15rem;
  color: var(--ink);
}
.ig-actions span:first-child { color: var(--orange-deep); }
.ig-actions .ig-save { margin-left: auto; }
.ig-body { padding: 8px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.ig-likes { font-size: 0.85rem; color: var(--ink); }
.ig-body p { font-size: 0.92rem; color: var(--text); line-height: 1.5; }
.ig-body p b { color: var(--ink); }
.ig-meta { font-size: 0.78rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(43, 51, 119, 0.14); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 300;
  color: var(--orange);
  transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-a { padding: 0 0 24px; color: var(--muted); max-width: 62ch; }

/* ---------- Newsletter / CTA band ---------- */
.cta-band {
  background: linear-gradient(140deg, var(--navy), #16295f 60%, #14536b);
  border-radius: var(--radius);
  padding: 72px 64px;
  color: var(--white);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9d3f, var(--orange) 60%, var(--orange-deep));
  opacity: 0.85;
}
.cta-band h2 { color: var(--white); position: relative; z-index: 1; }
.newsletter-form { display: flex; gap: 12px; position: relative; z-index: 1; }
.newsletter-form input {
  flex: 1;
  padding: 15px 22px;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-family: inherit;
}
.newsletter-form input:focus { outline: 2px solid var(--orange); }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: rgba(255, 255, 255, 0.75); padding: 80px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.site-footer .logo img { height: 40px; margin-bottom: 18px; }
.site-footer h4 { color: var(--white); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 28px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem;
  opacity: 0.65;
}
.footer-bottom .preview-badge {
  opacity: 1;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(245, 130, 31, 0.5);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ---------- Detail pages (course / trip) ---------- */
.detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.detail-main > * + * { margin-top: 40px; }
.detail-main h2 { font-size: 1.7rem; margin-bottom: 16px; }
.check-list li, .cross-list li {
  padding: 9px 0 9px 34px;
  position: relative;
  border-bottom: 1px dashed rgba(43, 51, 119, 0.12);
}
.check-list li::before {
  content: "✓";
  position: absolute; left: 4px;
  color: var(--orange);
  font-weight: 700;
}
.cross-list li::before {
  content: "✕";
  position: absolute; left: 4px;
  color: var(--muted);
  font-weight: 700;
}
.book-panel {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.book-panel .price { font-size: 2.1rem; }
.book-panel .meta-row {
  display: flex; justify-content: space-between;
  font-size: 0.9rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(43, 51, 119, 0.1);
}
.book-panel .meta-row span:first-child { color: var(--muted); }
.book-panel .meta-row span:last-child { font-weight: 600; color: var(--ink); text-align: right; max-width: 60%; }
.trust-note { font-size: 0.8rem; color: var(--muted); text-align: center; }

/* Countdown */
.countdown { display: flex; gap: 12px; }
.countdown .cd {
  flex: 1;
  background: var(--sand);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 12px 6px;
}
.countdown .cd b { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); display: block; }
.countdown .cd span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Itinerary */
.itinerary { border-left: 2px solid rgba(43, 51, 119, 0.18); padding-left: 28px; }
.itinerary li { position: relative; padding-bottom: 26px; }
.itinerary li::before {
  content: "";
  position: absolute;
  left: -35px; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--sand);
}
.itinerary b { color: var(--ink); display: block; font-size: 1.02rem; }
.itinerary p { color: var(--muted); font-size: 0.95rem; }

/* Departure rows */
.departure {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--white);
  border: 1.5px solid rgba(43, 51, 119, 0.12);
  border-radius: var(--radius-sm);
  padding: 16px 22px;
  margin-bottom: 12px;
}
.departure b { color: var(--ink); }
.departure .slots { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.departure .slots.low { color: var(--orange-deep); }

/* ---------- Instructor cards ---------- */
.instructor-card { text-align: left; }
.instructor-card .avatar {
  height: 260px;
  background: linear-gradient(160deg, var(--navy), #14536b);
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
  overflow: hidden;
}
.instructor-card .avatar::after {
  content: "";
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  right: -30px; top: -30px;
  background: radial-gradient(circle at 35% 30%, #ff9d3f, var(--orange) 60%, var(--orange-deep));
  opacity: 0.8;
}
.instructor-card .avatar span {
  font-family: var(--font-display);
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 0.8;
  padding-bottom: 24px;
}
/* Portrait carries the personality — give it room. The initial behind it
   is the fallback for instructors whose photo isn't in yet. */
.instructor-card .avatar { height: 380px; }
.instructor-card .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2; /* over the initial and the orange sun */
}
.instructor-card .ins-role {
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
}
.instructor-card .ins-tagline {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy);
  line-height: 1.4;
  margin: 12px 0 4px;
}
.ins-bio p { font-size: 0.92rem; color: var(--muted); line-height: 1.65; }
.ins-bio p + p { margin-top: 10px; }
.tag.tag-style { background: rgba(255, 141, 43, 0.12); color: var(--orange-deep); }
.ins-fact { display: flex; gap: 10px; align-items: flex-start; }
.ins-fact-ico { font-size: 1rem; line-height: 1.5; }
.ins-fact b {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}
.ins-fact p { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.ins-certs ul { list-style: none; margin-top: 8px; }
.ins-certs li {
  font-size: 0.85rem;
  color: var(--muted);
  padding-left: 16px;
  position: relative;
  line-height: 1.7;
}
.ins-certs li::before { content: "·"; position: absolute; left: 4px; color: var(--orange); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 0.75rem; font-weight: 600;
  background: rgba(43, 51, 119, 0.08);
  color: var(--navy);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---------- Moments (curated Instagram wall) ----------
   Same editorial geometry the old gallery used (3-up, one taller tile per
   row of four), but every tile is a LINK out to the original Instagram
   post. Tag chip top-left, label + ↗ pinned to the bottom; the scrim keeps
   the white type readable once real photos replace the gradients. */
.moments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.moment {
  aspect-ratio: 4/5;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start;
  padding: 16px;
  color: var(--white);
  transition: transform 0.3s;
}
.moment::after {
  content: "";
  position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(13, 18, 48, 0.55));
  pointer-events: none;
}
.moment:hover { transform: translateY(-4px); }
.moment-tag {
  position: relative; z-index: 1;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(13, 18, 48, 0.38);
  backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 999px;
}
.moment-foot {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; width: 100%;
  font-weight: 600; font-size: 0.9rem;
}
.moment-open { opacity: 0.85; }
.moments-grid .moment:nth-child(4n+1) { aspect-ratio: 4/6; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.contact-card {
  display: flex; gap: 18px; align-items: center;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  transition: transform 0.25s;
}
.contact-card:hover { transform: translateX(6px); }
.contact-card .ico {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(245, 130, 31, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.contact-card b { color: var(--ink); display: block; }
.contact-card span { font-size: 0.85rem; color: var(--muted); }
.form-grid { display: grid; gap: 18px; }
.form-grid label { font-size: 0.85rem; font-weight: 600; color: var(--ink); display: block; margin-bottom: 8px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(43, 51, 119, 0.18);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- Booking modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 18, 48, 0.65);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 460px;
  width: 100%;
  padding: 36px;
  position: relative;
  max-height: 90svh;
  overflow-y: auto;
}
.modal h3 { margin-bottom: 6px; }
.modal .modal-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  background: var(--sand);
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--ink);
}

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: var(--white); }

/* ---------- Google reviews strip ---------- */
.g-reviews {
  margin-top: 48px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 16px 20px;
}
.g-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.g-badge b { font-family: var(--font-body); font-size: 1.3rem; background: linear-gradient(135deg, #4285f4 20%, #ea4335 45%, #fbbc05 65%, #34a853); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-stars { color: var(--orange); letter-spacing: 3px; font-size: 1.1rem; }
.g-label { font-weight: 600; color: rgba(255, 255, 255, 0.85); }

/* ---------- FAQ page ---------- */
.faq-topic { margin-bottom: 64px; scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-topic h2 { font-size: 1.7rem; margin-bottom: 8px; }
.faq-topic .faq { margin: 0; max-width: 820px; }

/* ---------- Concierge ---------- */
.cg-fab {
  position: fixed;
  right: 22px; bottom: 92px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--sand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(13, 18, 48, 0.35);
  transition: transform 0.25s, opacity 0.25s;
}
.cg-fab:hover { transform: scale(1.08); }
.cg-fab.hidden { opacity: 0; pointer-events: none; }
.cg-fab svg { width: 28px; height: 28px; }
.cg-panel {
  position: fixed;
  right: 22px; bottom: 92px;
  z-index: 210;
  width: min(380px, calc(100vw - 24px));
  max-height: min(600px, calc(100svh - 120px));
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.cg-panel.open { display: flex; }
.cg-head {
  background: linear-gradient(140deg, var(--navy), #16295f 70%, #14536b);
  color: var(--white);
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.cg-head b { font-family: var(--font-display); font-size: 1.15rem; display: block; }
.cg-head span { font-size: 0.78rem; opacity: 0.75; }
.cg-close { background: rgba(255, 255, 255, 0.14); border: none; color: var(--white); width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.cg-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--sand);
  min-height: 180px;
}
.cg-msg {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.cg-msg.bot { background: var(--white); color: var(--text); border-bottom-left-radius: 4px; box-shadow: var(--shadow); align-self: flex-start; }
.cg-msg.user { background: var(--navy); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }
.cg-msg small { color: var(--muted); }
.cg-item {
  display: block;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(43, 51, 119, 0.06);
  border: 1px solid rgba(43, 51, 119, 0.1);
}
a.cg-item:hover { border-color: var(--orange); }
.cg-item b { color: var(--ink); display: block; font-size: 0.88rem; }
.cg-item span { color: var(--muted); font-size: 0.8rem; }
.cg-link { display: inline-block; margin-top: 10px; color: var(--orange-deep); font-weight: 600; }
.cg-link.cg-wa { color: #128c4b; }
.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; background: var(--sand); }
.cg-chip {
  border: 1.5px solid rgba(43, 51, 119, 0.25);
  background: var(--white);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  transition: all 0.2s;
}
.cg-chip:hover { background: var(--navy); color: var(--white); }
.cg-input {
  display: flex; gap: 10px;
  padding: 14px 16px;
  background: var(--white);
  border-top: 1px solid rgba(43, 51, 119, 0.1);
}
.cg-input input {
  flex: 1;
  border: 1.5px solid rgba(43, 51, 119, 0.18);
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 0.9rem;
}
.cg-input input:focus { outline: none; border-color: var(--orange); }
.cg-input button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--orange);
  color: var(--white);
  font-size: 1rem;
  flex-shrink: 0;
}
.cg-input button:hover { background: var(--orange-deep); }

/* ============================================================
   HOMEPAGE JOURNEY (v4) — Choose Your Adventure → confidence
   guidance → Why → Trips → Store → Beyond Diving → Stories
   ============================================================ */

/* Adventure cards (Section 2) — three doors, 3-up grid */
#adventure-cards { grid-template-columns: repeat(3, 1fr); }

/* Why Shello — lifestyle list replacing the stats band (Section 4) */
.why-list { display: flex; flex-direction: column; gap: 22px; }
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-emoji {
  font-size: 1.5rem; line-height: 1; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}
.why-item b { color: var(--white); display: block; margin-bottom: 4px; font-size: 1.05rem; }
.why-item p { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; max-width: 42ch; }

/* Each Adventure — confidence guidance (Section 3) */
.adv-guide {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 32px;
  scroll-margin-top: 90px;
}
.adv-guide-head {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 30px; color: var(--white);
  background-size: cover; background-position: center;
}
.adv-guide-head h3 { color: var(--white); font-size: 1.5rem; }
.adv-guide-head p { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; margin-top: 2px; }
.adv-emoji {
  font-size: 1.7rem; width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 16px; background: rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
}
.adv-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.adv-option {
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--sand-2);
}
.adv-option:last-child { border-right: none; }
.adv-option-try { background: var(--sand); }
.adv-opt-tag {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; color: var(--orange);
}
.adv-option-try .adv-opt-tag { color: var(--navy); }
.adv-option h4 { font-size: 1.12rem; }
.adv-option > p { color: var(--muted); font-size: 0.9rem; flex: 1; }
.adv-opt-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.adv-price { font-weight: 700; color: var(--ink); display: flex; flex-direction: column; line-height: 1.15; }
.adv-price small { font-weight: 500; color: var(--muted); font-size: 0.72rem; }
.adv-price-soft { color: var(--navy); }

/* Shello Store — preview only (Section 6) */
.store-section { background: var(--sand-2); }
.store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
.store-card {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.store-media {
  position: relative; aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.store-emoji { font-size: 2.4rem; filter: drop-shadow(0 4px 10px rgba(13, 18, 48, 0.4)); }
.store-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(13, 18, 48, 0.72); color: var(--white);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.store-card-body { padding: 18px 20px; }
.store-card-body b { display: block; font-size: 1.02rem; }
.store-card-body p { color: var(--muted); font-size: 0.88rem; margin-top: 5px; }
.store-note { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 26px; }

/* Beyond Diving — future vision (Section 7) */
/* Two cards now (r5): the Running Club feature and "And More Adventures".
   Was a 3-col grid of seven; two side-by-side plates read as two real things
   rather than a wall of tiles. */
.beyond-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.beyond-card {
  border-radius: var(--radius); padding: 30px 26px; color: var(--white);
  background-size: cover; background-position: center;
  min-height: 220px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  text-decoration: none;
}
.beyond-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 18, 48, 0.15) 20%, rgba(13, 18, 48, 0.66) 100%);
}
.beyond-emoji { position: relative; z-index: 1; font-size: 1.9rem; }
.beyond-card b { position: relative; z-index: 1; color: var(--white); font-size: 1.35rem; font-family: var(--font-display); font-weight: 500; }
.beyond-card p { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; }
/* The feature card (Running Club) is a link, so it gets the hover lift and a
   CTA row like the adventure plates. */
.beyond-feature { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; }
.beyond-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.beyond-feature .qn-cta { position: relative; z-index: 1; margin-top: 8px; }
/* "And More Adventures" — the inspiration list. No links, no badges. */
.beyond-list {
  position: relative; z-index: 1; margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.beyond-list li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.86rem; font-weight: 500; color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 6px 12px; border-radius: 999px;
}

/* ---- Running Club page: the facts grid ---- */
/* The next run — one date, one place, one button. Big and calm on purpose:
   this block IS the page's call to action, so nothing competes with it. */
.rc-next { text-align: center; padding: 40px 0 8px; }
.rc-next-date { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3rem); color: var(--ink); margin: 4px 0 0; line-height: 1.1; }
.rc-next-venue { font-size: 1.12rem; color: var(--muted); margin: 10px 0 26px; }
.rc-next .btn { min-width: 220px; }
.rc-next-note { font-size: 0.9rem; color: var(--muted); margin-top: 16px; }
/* The homepage card's next-run line — quiet, factual, above the CTA. */
.beyond-next { font-size: 0.9rem; font-weight: 600; opacity: 0.92; margin-top: 10px; }

.rc-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 40px; margin-top: 44px; }
.rc-fact { display: flex; flex-direction: column; gap: 4px; padding: 22px 0; border-top: 1px solid var(--hair); }
.rc-fact-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.rc-fact-value { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }

/* Student Stories — transformations (Section 8) */
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story-card {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.story-card-media { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.story-card-body { padding: 22px 24px; }
.story-arc { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.story-from { color: var(--muted); font-size: 0.82rem; text-decoration: line-through; }
.story-to {
  color: var(--white); background: var(--orange);
  font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.story-to::before { content: "→ "; }
.story-card-body blockquote { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.story-card-body cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--navy); }
.stories-empty {
  grid-column: 1 / -1; text-align: center;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 56px 32px; max-width: 620px; margin: 0 auto;
}
.stories-empty-emoji { font-size: 2.4rem; }
.stories-empty-lead { font-family: var(--serif, "Fraunces", serif); font-size: 1.5rem; color: var(--ink); margin: 8px 0 14px; }
.stories-empty p:not(.stories-empty-lead):not(.stories-empty-emoji) { color: var(--muted); max-width: 44ch; margin: 0 auto 24px; }

/* ---------- Alternating light section (learning ↔ lifestyle) ---------- */
.section-alt { background: var(--sand-2); }

/* ---------- Explore cards CTA (Section 2 four doors) ----------
   A hairline and a word — the editorial alternative to a pill. The rule
   spans the card and the orange fills it left-to-right on hover, so the
   invitation is a gesture rather than a stamped control. */
.qn-cta {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.qn-cta::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.qn-card:hover .qn-cta::before, .qn-card:focus-visible .qn-cta::before { transform: scaleX(1); }

/* ---------- "Which adventure fits you?" comparison ---------- */
.cmp-adventures th { text-align: center; }
.cmp-adventures th:first-child { width: 120px; }
.cmp-adventures th a { color: var(--white); }
.cmp-adventures td { text-align: center; color: var(--text); }
.cmp-adventures td:first-child { text-align: left; }
.cmp-adventures td:first-child b { color: var(--navy); }

/* ============================================================
   PATHWAY — the visual journeys on freediving/mermaid/scuba pages
   ============================================================ */
.pathway { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.pw-start {
  display: inline-block; background: var(--navy); color: var(--white);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 9px 22px; border-radius: 999px;
}
.pw-arrow { color: var(--orange); font-size: 1.7rem; line-height: 1; margin: 12px 0; }
.pw-arrow.sm { font-size: 1.2rem; margin: 8px 0; color: var(--muted); }

/* Node — a single course step (reads name/level/price from COURSES) */
.pw-node {
  position: relative; width: 100%; max-width: 460px;
  background: var(--white); border: 1.5px solid rgba(43, 51, 119, 0.14);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pw-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--navy); }
.pw-node.is-rec { border-color: var(--orange); box-shadow: 0 12px 40px rgba(245, 130, 31, 0.22); }
.pw-badge {
  position: absolute; top: -12px; left: 22px;
  background: var(--orange); color: var(--white);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 5px 12px; border-radius: 999px;
}
.pw-node-level { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.pw-node-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); line-height: 1.15; }
.pw-node-meta { font-size: 0.86rem; color: var(--muted); }
.pw-node-note { font-size: 0.82rem; color: var(--navy); font-style: italic; }
.pw-node-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pw-node-price { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy); }
.pw-node-link { font-size: 0.82rem; font-weight: 600; color: var(--orange-deep); }

/* Linear path (mermaid / scuba) */
.pw-linear .pw-node { max-width: 520px; }

/* Branched path (freediving — two entry paths) */
.pw-branches { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 20px; width: 100%; margin-top: 4px; }
.pw-branch {
  background: var(--sand); border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%;
}
.pw-branch.is-rec { background: #fff6ee; outline: 2px solid rgba(245, 130, 31, 0.3); }
.pw-branch-head { text-align: center; }
.pw-branch-head b { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-top: 4px; }
.pw-branch-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pw-branch.is-rec .pw-branch-tag { color: var(--orange-deep); }
.pw-branch-caption { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 4px; }
.pw-or {
  align-self: center; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 700; font-size: 0.8rem;
}

/* "Includes" summary under the freediving branches */
.pw-includes {
  width: 100%; max-width: 620px; margin: 40px auto 0;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 30px;
}
.pw-includes b { display: block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.pw-includes .check-list { columns: 2; }
.pw-closing { max-width: 620px; margin: 24px auto 0; text-align: center; color: var(--muted); font-size: 0.95rem; }

/* Mermaid continuation block */
.pw-continuation { width: 100%; max-width: 620px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.pw-cont-head { text-align: center; margin-bottom: 18px; }
.pw-cont-head b { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.pw-cont-head p { font-size: 0.9rem; color: var(--muted); max-width: 46ch; margin: 6px auto 0; }
.pw-cont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pw-cont-grid .pw-node { max-width: none; }

/* Scuba "where next" (non-bookable roadmap) */
.pw-next {
  width: 100%; max-width: 620px; text-align: center;
  background: var(--white); border: 1.5px dashed rgba(43, 51, 119, 0.3);
  border-radius: var(--radius); padding: 28px 30px;
}
.pw-next b { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.pw-next > p { font-size: 0.92rem; color: var(--muted); max-width: 50ch; margin: 8px auto 16px; }
.pw-next-pro { display: inline-block; background: var(--navy); color: var(--white); font-weight: 600; font-size: 0.88rem; padding: 8px 18px; border-radius: 999px; }
.pw-next-sub { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 12px; }
.pw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.pw-chip { background: var(--sand-2); color: var(--navy); font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.pw-chip-link { background: var(--navy); color: var(--white); transition: background 0.2s; }
.pw-chip-link:hover { background: var(--orange); }

/* Divemaster-style goal node (no bookable course behind it) */
.pw-goal { border-style: dashed; border-color: rgba(43, 51, 119, 0.3); box-shadow: none; }
.pw-goal .pw-node-level { color: var(--navy); }
.pw-price-soft { color: var(--muted) !important; font-size: 0.95rem; }

/* Popular Specialties block (scuba) */
.pw-specialties { width: 100%; max-width: 620px; text-align: center; margin-top: 8px; }
.pw-specialties b { display: block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.pw-specialties .pw-chips { margin-bottom: 0; }

/* Linear "Continue Your Journey" divider (mermaid) */
.pw-divider {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--ink);
  background: var(--sand-2); padding: 8px 22px; border-radius: 999px; margin-top: 4px;
}

/* Continue Your Journey block (freediving page, Section 4) */
.cont-journey { max-width: 760px; margin: 0 auto; text-align: center; }
.cont-journey-prereqs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; }
.cont-check { background: rgba(46, 160, 90, 0.12); color: #1f7a45; font-weight: 600; font-size: 0.85rem; padding: 6px 14px; border-radius: 999px; }
.cont-journey-intro { color: var(--muted); max-width: 52ch; margin: 0 auto 28px; }
.cont-journey-grid { text-align: left; }
.cont-journey-note { color: var(--muted); font-size: 0.9rem; font-style: italic; margin-top: 22px; }

/* Beyond Diving status badges (Run Club active · others Coming Soon) */
.beyond-badge {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); color: var(--white); backdrop-filter: blur(4px);
}
.beyond-badge.is-active { background: var(--orange); color: var(--white); }

/* ============================================================
   v0.9 — Winnie's round 2
   Journey band · depth spec · trip guide · private experiences
   ============================================================ */

/* The journey band's styles (.journey-section, .journey, .jn-*) were removed
   with the band itself — see index.html. Not to be confused with
   .cont-journey* above, which is the "Continue Your Journey" block on the
   freediving/mermaid pathway pages and is very much still in use. */

/* ---- Celebrate strip on the homepage ---- */
.celebrate-feature { padding-top: 72px; padding-bottom: 72px; background: var(--sand-2); }
.celebrate-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px;
}
.cs-pill {
  background: var(--white); border: 1px solid rgba(43, 51, 119, 0.12);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 600; font-size: 0.92rem; color: var(--ink);
}

/* ---- Depth spec (course panel) ----
   Winnie: "Display these clearly on the course pages." Given its own block
   above the meta rows, because Pool Freediver and Freediver are otherwise
   near-identical on paper and depth is the difference. */
.depth-spec {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(150deg, rgba(43, 51, 119, 0.06), rgba(26, 109, 134, 0.1));
  border: 1px solid rgba(43, 51, 119, 0.14);
  border-radius: var(--radius-sm); padding: 16px 18px; margin: 4px 0 6px;
}
.depth-ico { font-size: 1.3rem; line-height: 1.2; }
.depth-spec b {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.depth-value {
  display: block; font-family: var(--font-display); font-size: 1.75rem;
  font-weight: 600; color: var(--ink); line-height: 1.2; margin-top: 2px;
}
.depth-spec p { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }

/* ---- Trip destination guide ---- */
.trip-guide {
  background: var(--white); border: 1px solid var(--sand-2);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
}
.tg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 34px; }
.tg-row { display: flex; gap: 14px; align-items: flex-start; }
.tg-ico {
  font-size: 1.15rem; line-height: 1;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sand);
}
.tg-body { min-width: 0; }
.tg-body b {
  display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.tg-body p { color: var(--ink); font-weight: 500; line-height: 1.5; }
.tg-body p a { color: var(--orange); font-weight: 600; }
.tg-body small { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 4px; line-height: 1.5; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.tg-chip {
  background: rgba(26, 109, 134, 0.1); color: #14536b;
  border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; font-weight: 600;
}
.tg-highlights { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--sand-2); }
.tg-highlights h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin-bottom: 12px; }

/* ---- Private Experiences ---- */
.pe-card .card-media { position: relative; min-height: 190px; }
.pe-emoji {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  font-size: 1.5rem; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9);
}
.pe-for { font-size: 0.86rem; color: var(--muted); margin-top: 10px; }
.pe-for b { color: var(--ink); }
.pe-based { font-size: 0.86rem; color: var(--muted); margin-top: 6px; }
.pe-based a { color: var(--orange); font-weight: 600; }
.pe-quote { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.pe-cta { text-align: left; }
.pe-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

@media (max-width: 980px) {
  .tg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .trip-guide { padding: 22px; }
  .celebrate-strip { gap: 8px; }
  .cs-pill { font-size: 0.84rem; padding: 8px 14px; }
}

@media (max-width: 980px) {
  #adventure-cards { grid-template-columns: 1fr; }
  .adv-options { grid-template-columns: 1fr; }
  .adv-option { border-right: none; border-bottom: 1px solid var(--sand-2); }
  .adv-option:last-child { border-bottom: none; }
  .store-grid { grid-template-columns: repeat(2, 1fr); }
  .beyond-grid, .stories-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .store-grid, .beyond-grid, .stories-grid { grid-template-columns: 1fr; }
  .adv-guide-head { padding: 22px; }
  .pw-branches { grid-template-columns: 1fr; }
  .pw-or { margin: 4px auto; }
  .pw-cont-grid { grid-template-columns: 1fr; }
  .pw-includes .check-list { columns: 1; }
}

@media (max-width: 680px) {
  .cg-panel { right: 12px; left: 12px; width: auto; bottom: 12px; max-height: calc(100svh - 90px); }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-sun { animation: none; }
}

/* ---------- Instagram strip ---------- */
.ig-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ig-strip a {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background-size: cover;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.4rem;
  transition: transform 0.25s;
}
.ig-strip a:hover { transform: scale(1.04); }
.ig-strip a:nth-child(1) { background-image: linear-gradient(140deg, #16295f, #1a6d86); }
.ig-strip a:nth-child(2) { background-image: linear-gradient(140deg, #2b3377, #c96a8d); }
.ig-strip a:nth-child(3) { background-image: linear-gradient(140deg, #14536b, #f5821f); }
.ig-strip a:nth-child(4) { background-image: linear-gradient(140deg, #0d1230, #3d5bd9); }
.ig-strip a:nth-child(5) { background-image: linear-gradient(140deg, #1a86a8, #7fc4d4); }
.ig-strip a:nth-child(6) { background-image: linear-gradient(140deg, #e8491d, #2b3377); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-3, .grid-4, .ig-feed { grid-template-columns: repeat(2, 1fr); }
  .story-row { gap: 18px; }
  .quick-nav { grid-template-columns: repeat(2, 1fr); }
  .trip-highlights { grid-template-columns: repeat(2, 1fr); }
  .trip-gallery { grid-template-columns: repeat(2, minmax(0, 240px)); }
  .split, .detail-layout, .contact-grid, .cta-band { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .book-panel { position: static; }
  .cta-band { padding: 48px 32px; }
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
  section { padding: 72px 0; }
}
@media (max-width: 1200px) {
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--sand);
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 105;
  }
  .nav-open .nav-links { transform: none; }
  .nav-links a { color: var(--ink) !important; font-size: 1.25rem; }
  .nav-toggle { display: block; }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4, .ig-feed { grid-template-columns: 1fr; }
  .story-ring { width: 64px; height: 64px; }
  .session { grid-template-columns: 82px 1fr; }
  .session .s-seats, .session .s-book { grid-column: 2; justify-self: start; }
  .newsletter-form { flex-direction: column; }
  .form-row-2 { grid-template-columns: 1fr; }
  /* Tracking tightens on a phone — 0.32em at 375px eats a third of the line.
     Wide tracking is a wide-screen luxury. */
  .hero .hero-brand { letter-spacing: 0.22em; }
  .bs-line { font-size: 1.5rem; }
  .moments-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .quick-nav { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .section-actions .btn { width: 100%; justify-content: center; }
  .path-ctas .btn { flex: 1; justify-content: center; }
  /* The cue stays on touch (Sherene, 2026-07-16 vNext r3 — it is the only
     instruction in the hero, so it can't be the thing that disappears on the
     device most people arrive on).

     It used to be hidden here, on the grounds that it collided with the
     floating concierge button in the bottom corner. That was true of a hero
     that ran to the bottom of the screen. This one ends at ~62% of the
     viewport, so the cue sits mid-screen with ~300px between it and the
     concierge — measured at 375x812, not assumed. Without it the gap under
     the slogan is just a hole. */
  /* Homepage hero only — inner and trip heroes keep their own framing.

     This padding is the ONLY thing reserving room for the scroll cue, which
     is absolutely positioned 26px off the hero's bottom edge and so takes up
     no space of its own. At 52px the r4 copy (five lines on a phone)
     overlapped the cue by 18px — measured, not guessed — and "SCROLL" read
     as the end of the sentence rather than an instruction. 112px clears it
     with ~20px to spare.

     Note the selector: it beats a plain `.hero` (0,3,0 vs 0,1,0), so setting
     hero padding anywhere else in this block silently does nothing. Change
     it HERE. If the hero copy ever grows, re-measure — the invariant is
     .hero-scroll's top staying below .hero-intro's bottom. */
  .hero:not(.hero-inner):not(.trip-hero) { padding-bottom: 112px; }
}

/* ============================================================
   TRAINING SYSTEM v0.7 — editorial / membership feel.
   Fewer boxes, more air, larger type. Apple Today / Nike Run
   Club / Lululemon Studio energy. Hairlines instead of cards.
   ============================================================ */
:root { --hair: rgba(20, 26, 61, .09); }

/* ---- Member pillars (Hub "what we run") — borderless, airy ---- */
.th-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 56px; margin-top: 60px; }
.th-card { text-decoration: none; display: block; padding: 34px 0 30px; border-top: 1px solid var(--hair); transition: transform .25s ease; }
.th-card:hover { transform: translateY(-2px); }
.th-emoji { font-size: 1.9rem; display: block; margin-bottom: 18px; }
.th-card h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.th-card p { color: var(--muted); line-height: 1.7; max-width: 34ch; }
.th-card-link { display: inline-block; margin-top: 16px; color: var(--orange); font-weight: 600; font-size: .9rem; opacity: 0; transform: translateX(-4px); transition: .25s ease; }
.th-card:hover .th-card-link { opacity: 1; transform: none; }
.th-hero-ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Homepage "Keep Training" — SECONDARY. A quiet, compact strip
   that never competes with the four adventure cards above it. ---- */
.keep-training .th-grid { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0 32px; margin: 44px auto 0; max-width: 960px; }
.keep-training .th-card { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--hair); }
.keep-training .th-card:hover { transform: translateX(3px); }
.keep-training .th-emoji { font-size: 1.3rem; margin: 0; flex: none; }
.keep-training .th-card h3 { font-size: 1rem; font-weight: 500; margin: 0; }
.keep-training .th-card p, .keep-training .th-card-link { display: none; }

/* ---- Training memberships (packages) — open panels, not product cards ---- */
.tp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 46px 60px; margin-top: 60px; align-items: start; }
.tp-cat { padding: 0; }
.tp-cat.is-premium .tp-cat-head { border-bottom-color: var(--navy); }
.tp-premium { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--navy); margin-bottom: 12px; }
.tp-cat-head { padding-bottom: 22px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
.tp-cat-head h3 { font-family: var(--font-display); font-size: 1.95rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; line-height: 1.1; }
.tp-cat-blurb { color: var(--muted); line-height: 1.7; margin-bottom: 14px; font-size: 1.02rem; }
.tp-cat-venues { font-size: .9rem; color: var(--text); font-weight: 500; }
.tp-focus { margin: 22px 0 6px; }
.tp-focus-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chip { font-size: .82rem; color: var(--text); padding: 5px 13px; border-radius: 999px; background: rgba(20, 26, 61, .05); }
.tp-tiers { margin: 8px 0 4px; }
.tp-tier { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 20px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.tp-tier-name { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.tp-tier-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-deep); margin-left: 10px; }
.tp-tier-price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.tp-tier-note { grid-column: 1 / -1; font-size: .88rem; color: var(--muted); margin-top: 2px; }
.tp-cat-rules { list-style: none; padding: 20px 0 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tp-cat-rules li { font-size: .9rem; color: var(--muted); line-height: 1.6; }
.tp-cat-rules b { color: var(--text); font-weight: 600; }
.tp-private-note { font-size: .9rem; color: var(--muted); font-style: italic; margin-top: 14px; }
.tp-cat-foot { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.tp-cat-foot a, .tp-cat-rules a { color: var(--orange); }

/* What every training session includes — reassurance strip under packages. */
.tp-includes { max-width: 760px; margin: 56px auto 0; text-align: center; padding-top: 40px; border-top: 1px solid var(--hair); }
.tp-includes-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 22px; }
.tp-includes-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; padding: 0; margin: 0; }
.tp-includes-list li { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.tp-includes-list li::before { content: "✓"; color: var(--orange); font-family: var(--font-body); font-weight: 700; font-size: .95rem; }
.tp-includes-note { margin-top: 22px; font-size: .92rem; color: var(--muted); }
.tp-cat-cta { margin-top: 26px; }

/* ---- Weekly schedule — a lifestyle agenda, not a timetable ---- */
.ts-list { max-width: 720px; margin: 56px auto 0; }
.ts-row { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 4px 24px; padding: 24px 2px; border-bottom: 1px solid var(--hair); }
.ts-day { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.ts-main { display: flex; flex-direction: column; gap: 3px; }
.ts-name { font-size: 1.08rem; font-weight: 500; color: var(--ink); }
.ts-meta { font-size: .88rem; color: var(--muted); }
.ts-book { color: var(--orange); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.ts-book:hover { text-decoration: underline; }
.th-draft-note { max-width: 720px; margin: 22px auto 0; text-align: center; font-size: .84rem; color: var(--muted); font-style: italic; }

/* ---- Members Calendar — public preview now, log-in feature later.
   The whole .members-preview block is self-contained so it can be
   gated behind auth without touching the calendar UI. ---- */
.members-preview { margin-top: 48px; }
.members-head { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.members-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--navy); background: rgba(43, 51, 119, .1); padding: 6px 13px; border-radius: 999px; }
.members-note { text-align: center; font-size: .9rem; color: var(--muted); margin-bottom: 34px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.cal-day { padding: 8px 8px 12px; }
.cal-day-name { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; text-align: center; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--hair); }
.cal-day.is-rest .cal-day-name { opacity: .55; }
.cal-slot { border-radius: 12px; padding: 12px 12px; margin-bottom: 8px; background: rgba(20, 26, 61, .04); display: flex; flex-direction: column; gap: 3px; }
.cal-slot b { color: var(--orange-deep); font-size: .8rem; font-weight: 700; }
.cal-slot span { font-size: .86rem; color: var(--ink); font-weight: 500; line-height: 1.3; }
.cal-slot small { font-size: .74rem; color: var(--muted); }
.cal-empty { text-align: center; color: var(--muted); font-size: .78rem; padding-top: 22px; opacity: .6; }

/* ---- Rules band on the Hub — soft, editorial ---- */
.th-rules-band { text-align: center; max-width: 780px; margin: 0 auto; }
.th-rules-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; justify-content: center; }

/* ---- Training rules page — numbered list, hairlines not boxes ---- */
.tr-list { max-width: 760px; margin: 44px auto 0; }
.tr-item { display: grid; grid-template-columns: 52px 1fr; gap: 8px 24px; padding: 30px 2px; border-top: 1px solid var(--hair); }
.tr-num { font-family: var(--font-display); font-size: 1.5rem; color: var(--aqua); font-weight: 500; line-height: 1.2; }
.tr-body h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-body p { color: var(--muted); line-height: 1.75; }
.tr-draft { font-family: var(--font-body); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-deep); background: rgba(245, 130, 31, .12); padding: 3px 9px; border-radius: 999px; }

@media (max-width: 860px) {
  .cal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ts-row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .ts-day { grid-column: 1 / -1; }
  .cal-grid { grid-template-columns: 1fr; }
  .cal-day { padding-bottom: 4px; }
  .tr-item { grid-template-columns: 1fr; gap: 4px; }
  .tr-num { font-size: 1.1rem; }
}

/* ============================================================
   TAGS · BADGES · FILTERS · RECOMMENDATIONS
   Francesca's feedback, 2026-07-16. Every one of these renders from
   the tag registry in js/data.js — no component here knows what
   "Freediving" is, which is why a future Pickleball or Ski tag needs
   no CSS either.
   ============================================================ */

/* ---- Badges on cards: the answer to "what kind of trip IS this?" ---- */
.tag-badges {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px;
  /* Leave room for the availability badge on the right — two absolutely
     positioned stacks in one corner is how they ended up overlapping. */
  max-width: calc(100% - 150px);
}
.tag-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .93); color: var(--ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(13, 18, 48, .16);
  white-space: nowrap;
}
.tag-badge i { font-style: normal; font-size: .95em; line-height: 1; }

/* On a photo-led hero the badges sit in the flow, not pinned to a corner. */
.tag-badges.is-hero {
  position: static; margin: 14px 0 18px; max-width: none;
}
.tag-badges.is-hero .tag-badge {
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: none;
  font-size: .78rem; padding: 6px 13px;
}

/* ---- The filter bar ---- */
.filter-bar { margin: 0 0 34px; }
.filter-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--hair);
}
.filter-count { font-size: .82rem; font-weight: 600; color: var(--muted); }
.filter-clear {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  color: var(--orange-deep); padding: 4px 2px;
}
.filter-clear:hover { text-decoration: underline; }

.filter-groups { display: flex; flex-direction: column; gap: 16px; }
.filter-group { display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: baseline; }
.filter-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--hair); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--ink);
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.filter-chip:hover { border-color: var(--navy); transform: translateY(-1px); }
.filter-chip i { font-style: normal; line-height: 1; }
.filter-chip small { color: var(--muted); font-weight: 600; font-size: .74em; }
.filter-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-chip.is-on small { color: rgba(255, 255, 255, .7); }

.filter-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  padding: 50px 20px; border: 1px dashed var(--hair); border-radius: 20px;
}

/* ---- Recommendations ---- */
.rec-section { margin-top: 8px; }
.rec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.rec-head h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--ink); }
.rec-head p { font-size: .85rem; color: var(--muted); }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.rec-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px;
  padding: 18px 20px; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.rec-card:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: 0 14px 40px rgba(13, 18, 48, .1); }
.rec-kind {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-deep);
}
.rec-card b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.rec-why { font-size: .78rem; color: var(--muted); margin-top: auto; padding-top: 6px; }
.rec-price { font-size: .82rem; font-weight: 700; color: var(--ink); }

@media (max-width: 620px) {
  .filter-group { grid-template-columns: 1fr; gap: 8px; }
  .tag-badges { top: 10px; left: 10px; gap: 5px; }
  .tag-badge { font-size: .66rem; padding: 4px 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   LEARN UNTIL YOU'RE READY™ — the freediving education philosophy.
   Bespoke sections for the Pool Freediver + Open Water Camp course
   pages and the freediving landing page. Data-gated in js/main.js and
   tools/prerender.py, so no other course is affected.
   ══════════════════════════════════════════════════════════════════ */

/* Hero pill (on the dark course hero gradient) + the homepage's subtle line */
.hero-philo-badge {
  display: inline-block; margin-top: 20px;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(245, 130, 31, 0.18);
  border: 1px solid rgba(245, 130, 31, 0.55);
  color: #ffd9b0;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero .hero-philo-line { margin-top: 16px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); }
.hero .hero-philo-line a { color: var(--white); font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.hero .hero-philo-line a:hover { color: #ffd9b0; border-color: #ffd9b0; }

/* Philosophy callout under the Overview */
.philo-note {
  background: linear-gradient(150deg, rgba(245, 130, 31, 0.09), rgba(26, 109, 134, 0.09));
  border: 1px solid rgba(245, 130, 31, 0.28);
  border-radius: var(--radius); padding: 24px 26px;
}
.philo-note-badge {
  display: inline-block; margin-bottom: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-deep);
}
.philo-note p { color: var(--ink); font-size: 1.02rem; line-height: 1.65; }

/* Pool entry fee callout */
.pool-fee {
  display: flex; gap: 24px; align-items: center;
  background: var(--ink); color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius); padding: 26px 28px;
}
.pool-fee h2 { color: var(--white); font-size: 1.35rem; margin-bottom: 6px; }
.pool-fee p { color: rgba(255, 255, 255, 0.72); line-height: 1.6; }
.pool-fee-amt {
  flex: 0 0 auto; text-align: center; line-height: 1;
  background: rgba(245, 130, 31, 0.16); border: 1px solid rgba(245, 130, 31, 0.5);
  border-radius: var(--radius-sm); padding: 16px 22px;
}
.pool-fee-amt span { font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); vertical-align: top; }
.pool-fee-amt b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: var(--white); }
.pool-fee-amt small { display: block; margin-top: 6px; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }

/* Who is this for + typical timeline */
.who-for-lead { color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.learn-timeline {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--sand); border: 1px solid var(--sand-2);
  border-radius: var(--radius); padding: 22px 24px;
}
.learn-timeline .lt-ico { font-size: 1.8rem; line-height: 1; }
.learn-timeline h2 { font-size: 1.3rem; margin-bottom: 6px; }
.learn-timeline p { color: var(--muted); line-height: 1.6; }

/* Open water camp experience */
.camp-formats { margin: 14px 0 8px; }
.camp-days { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.camp-day { background: var(--sand); border-radius: var(--radius); padding: 22px 24px; }
.camp-day-tag {
  display: inline-block; margin-bottom: 12px;
  background: var(--navy); color: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.camp-day-intro { color: var(--muted); margin-bottom: 8px; }
.camp-day-close { margin-top: 14px; color: var(--ink); font-style: italic; line-height: 1.6; }

/* The learning-journey band (dark) */
.journey-band .section-head { margin-bottom: 44px; }
.journey {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  position: relative; margin: 0;
}
.journey-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; padding-top: 8px;
}
.journey-step::before {
  content: ""; position: absolute; top: 40px; left: 50%; width: 100%; height: 2px;
  background: rgba(255, 255, 255, 0.16); z-index: 0;
}
.journey-step:last-child::before { display: none; }
.journey-ico {
  position: relative; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem; margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
}
.journey-label { color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.journey-note { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; line-height: 1.5; margin-top: 6px; max-width: 22ch; }
.journey-step.is-here .journey-ico {
  background: var(--orange); border-color: var(--orange);
  box-shadow: 0 8px 26px rgba(245, 130, 31, 0.5);
}
.journey-here {
  margin-top: 10px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #ffd9b0;
}

/* Why Learn Until You're Ready — comparison */
.compare-section { background: var(--sand); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 920px; margin: 0 auto; align-items: start; }
.compare-col {
  background: var(--white); border: 1px solid var(--sand-2);
  border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow);
}
.compare-col h3 { font-size: 1.3rem; margin-bottom: 14px; }
.compare-col.is-shello {
  border: 1px solid rgba(245, 130, 31, 0.45);
  box-shadow: 0 22px 54px rgba(245, 130, 31, 0.16);
}
.compare-flag {
  display: inline-block; margin-bottom: 14px;
  background: var(--orange); color: var(--white);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}

/* Continue-your-journey CTA */
.course-cta {
  border-radius: var(--radius); padding: 56px 60px; color: var(--white);
  display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
.course-cta .kicker { color: #ffd9b0; }
.course-cta h2 { color: var(--white); margin: 6px 0 12px; }
.course-cta p { color: rgba(255, 255, 255, 0.82); max-width: 48ch; line-height: 1.6; }
.course-cta .btn { white-space: nowrap; }

/* Course-card philosophy badge */
.card-philo {
  display: inline-block; margin-bottom: 8px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-deep);
  background: rgba(245, 130, 31, 0.1); border: 1px solid rgba(245, 130, 31, 0.3);
  padding: 4px 10px; border-radius: 999px;
}

/* Booking-panel pool-fee note */
.panel-note {
  background: rgba(245, 130, 31, 0.08); border: 1px dashed rgba(245, 130, 31, 0.45);
  border-radius: var(--radius-sm); padding: 11px 14px;
  font-size: 0.82rem; color: var(--ink); line-height: 1.5; text-align: center;
}
.panel-note b { color: var(--orange-deep); }

@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr; gap: 6px; }
  .journey-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 18px; padding: 6px 0; }
  .journey-step::before { top: 58px; left: 31px; width: 2px; height: calc(100% - 12px); }
  .journey-ico { margin-bottom: 0; width: 56px; height: 56px; flex: 0 0 56px; font-size: 1.5rem; }
  .journey-note { max-width: none; }
  .journey-here { margin-top: 6px; }
  .compare-grid { grid-template-columns: 1fr; }
  .camp-days { grid-template-columns: 1fr; }
  .course-cta { grid-template-columns: 1fr; padding: 40px 32px; gap: 24px; }
  .pool-fee { flex-direction: column; align-items: flex-start; }
}

/* Course hero subtitle (Upgrade to SSI Freediver → "Open Water Training Experience") */
.hero .hero-subtitle {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.2rem; color: rgba(255, 255, 255, 0.7); margin: 2px 0; max-width: none;
}

/* ══════════════════════════════════════════════════════════════════
   FREEDIVING LANDING PAGE (PRD v2) + homepage flow + trip course options
   ══════════════════════════════════════════════════════════════════ */

/* Why Learn With Shello */
.why-cards { margin-top: 8px; }
.why-card { text-align: center; padding: 8px; }
.why-card .why-ico { font-size: 2.2rem; display: block; margin-bottom: 12px; }
.why-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.why-card p { color: var(--muted); line-height: 1.6; }

/* Choose your learning path — two option cards */
.path-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 40px auto 0; }
.path-opt {
  display: block; background: var(--white); border: 1px solid var(--sand-2);
  border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow);
  position: relative; text-decoration: none; color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-opt:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.path-opt.is-rec { border: 2px solid var(--orange); box-shadow: 0 22px 54px rgba(245, 130, 31, 0.18); }
.path-opt-flag {
  display: inline-block; background: var(--orange); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 12px;
}
.path-opt-tag { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.path-opt-badge {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-deep); background: rgba(245, 130, 31, 0.1); border: 1px solid rgba(245, 130, 31, 0.3);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.path-opt h3 { font-size: 1.35rem; margin-bottom: 8px; }
.path-opt-price { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); margin-bottom: 12px; }
.path-opt-price small { display: block; font-family: var(--font-body); font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.path-opt p { color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.path-opt-link { color: var(--orange-deep); font-weight: 600; font-size: 0.9rem; }

/* Option detail cards (sections 5 & 6) */
.opt-detail-wrap { display: grid; gap: 28px; padding: 56px 0; }
.opt-detail { background: var(--white); border: 1px solid var(--sand-2); border-radius: var(--radius); padding: 34px 38px; box-shadow: var(--shadow); }
.opt-detail.is-rec { border: 2px solid var(--orange); box-shadow: 0 22px 54px rgba(245, 130, 31, 0.16); }
.opt-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--sand-2); padding-bottom: 22px; }
.opt-detail-head h3 { font-size: 1.6rem; margin: 8px 0 6px; }
.opt-blurb { color: var(--muted); line-height: 1.6; max-width: 52ch; }
.opt-detail-price { flex: 0 0 auto; text-align: right; font-family: var(--font-display); font-size: 2.1rem; color: var(--ink); line-height: 1.1; }
.opt-detail-price small { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-deep); margin-top: 4px; }
.opt-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.opt-group h4 { font-size: 1.05rem; margin-bottom: 8px; }
.opt-group-note { color: var(--muted); font-size: 0.85rem; margin-bottom: 6px; font-style: italic; }
.opt-trip-note { background: var(--sand); border-radius: var(--radius-sm); padding: 14px 18px; color: var(--ink); margin-top: 22px; font-size: 0.92rem; line-height: 1.6; }
.opt-why { margin-top: 22px; }
.opt-why b { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.opt-detail > .btn { margin-top: 24px; }
.opt-poolfee, .opt-timeline { margin-top: 22px; }
.pool-fee h4 { color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.learn-timeline h4 { font-size: 1.1rem; margin-bottom: 4px; }
.opt-continue {
  display: flex; align-items: center; gap: 18px; margin-top: 22px;
  background: linear-gradient(150deg, rgba(245, 130, 31, 0.08), rgba(26, 109, 134, 0.08));
  border: 1px solid rgba(245, 130, 31, 0.25); border-radius: var(--radius); padding: 20px 24px;
}
.opt-continue-arrow { font-size: 1.4rem; color: var(--orange); }
.opt-continue b { display: block; margin-bottom: 4px; }
.opt-continue p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.opt-continue-price { margin-left: auto; text-align: right; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); flex: 0 0 auto; }
.opt-continue-price small { display: block; font-family: var(--font-body); font-size: 0.68rem; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.opt-cta-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* Comparison table (Option A vs B) */
.compare-table-wrap { max-width: 820px; margin: 40px auto 0; }
.compare-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--sand-2); font-size: 0.92rem; vertical-align: top; }
.compare-table thead th { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); background: var(--sand); }
.compare-table thead th span { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.compare-table th[scope="row"] { font-weight: 600; color: var(--ink); width: 34%; }
.compare-table td { color: var(--muted); }
.compare-table .is-rec { background: rgba(245, 130, 31, 0.06); color: var(--ink); }
.compare-table thead .is-rec { background: rgba(245, 130, 31, 0.14); }
.compare-total th, .compare-total td { border-top: 2px solid var(--sand-2); border-bottom: none; font-weight: 700; color: var(--ink); font-size: 1rem; }
.compare-save { display: block; width: max-content; max-width: 100%; margin: 18px auto 0; font-weight: 700; color: var(--orange-deep); background: rgba(245, 130, 31, 0.1); border: 1px dashed rgba(245, 130, 31, 0.5); border-radius: 999px; padding: 10px 22px; }

/* Homepage Learn→Practice→Master→Explore flow */
.flow-strip { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 900px; margin: 36px auto 28px; position: relative; }
.flow-step { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; }
.flow-step::before { content: ""; position: absolute; top: 30px; left: 50%; width: 100%; height: 2px; background: var(--sand-2); z-index: 0; }
.flow-step:last-child::before { display: none; }
.flow-ico { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--white); border: 1px solid var(--sand-2); box-shadow: var(--shadow); margin-bottom: 12px; }
.flow-label { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.flow-note { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin-top: 4px; max-width: 20ch; }

/* Trip "Course options" (Lang Tengah & Bali) */
.trip-copts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.trip-copt { background: var(--sand); border: 1px solid var(--sand-2); border-radius: var(--radius); padding: 24px 26px; }
.trip-copt.is-premium { background: linear-gradient(150deg, rgba(245, 130, 31, 0.08), rgba(26, 109, 134, 0.08)); border-color: rgba(245, 130, 31, 0.3); }
.trip-copt-tag { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 8px; }
.trip-copt h3 { font-size: 1.25rem; margin-bottom: 4px; }
.trip-copt-price { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-bottom: 10px; }
.trip-copt p { color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.trip-copt-link { color: var(--orange-deep); font-weight: 600; font-size: 0.9rem; }

/* Try Freediving taster band (freediving landing) */
.fd-try {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto;
  background: var(--sand); border: 1px dashed rgba(43, 51, 119, 0.2);
  border-radius: var(--radius); padding: 24px 30px;
}
.fd-try-tag { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 6px; }
.fd-try-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.fd-try-body p { color: var(--muted); line-height: 1.6; max-width: 52ch; }
.fd-try-cta { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.fd-try-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); line-height: 1.1; }
.fd-try-price small { display: block; font-family: var(--font-body); font-size: 0.72rem; color: var(--muted); font-weight: 500; }

/* Meet Your Instructors teaser (freediving landing) */
.fd-ins-grid { margin-top: 8px; align-items: stretch; }
.fd-ins-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: var(--text);
  background: var(--white); border: 1px solid var(--sand-2); border-radius: var(--radius);
  padding: 30px 24px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fd-ins-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fd-ins-avatar {
  width: 116px; height: 116px; border-radius: 50%; margin: 0 auto 16px;
  background: linear-gradient(160deg, var(--navy), #14536b);
  display: grid; place-items: center; position: relative; overflow: hidden; flex: none;
}
.fd-ins-avatar span { font-family: var(--font-display); font-size: 2.4rem; color: rgba(255, 255, 255, 0.5); }
.fd-ins-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.fd-ins-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.fd-ins-roles { list-style: none; margin: 0 0 14px; padding: 0; }
.fd-ins-roles li {
  font-size: 0.8rem; color: var(--muted); line-height: 1.55;
  padding: 2px 0; border-bottom: 1px solid rgba(43, 51, 119, 0.06);
}
.fd-ins-roles li:last-child { border-bottom: 0; }
.fd-ins-roles li:first-child { color: var(--orange-deep); font-weight: 600; }
.fd-ins-tagline { color: var(--ink); font-style: italic; line-height: 1.5; margin-top: auto; font-size: 0.92rem; }

@media (max-width: 860px) {
  .fd-try { flex-direction: column; align-items: flex-start; }
  .path-choose { grid-template-columns: 1fr; }
  .opt-groups { grid-template-columns: 1fr; }
  .opt-detail { padding: 26px 24px; }
  .opt-detail-head { flex-direction: column; }
  .opt-detail-price { text-align: left; }
  .opt-continue { flex-wrap: wrap; }
  .opt-continue-price { margin-left: 0; }
  .compare-table-wrap { overflow-x: auto; }
  .compare-table { min-width: 520px; }
  .trip-copts { grid-template-columns: 1fr; }
  .flow-strip { grid-template-columns: 1fr; gap: 8px; }
  .flow-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; }
  .flow-step::before { top: 52px; left: 30px; width: 2px; height: calc(100% - 8px); }
  .flow-ico { margin-bottom: 0; width: 54px; height: 54px; flex: 0 0 54px; }
  .flow-note { max-width: none; }
}