/* Premium Sailing: homepage and offer pages. Builds on base.css. */

section { position: relative; }

/* One window per section: every .screen section fills the viewport below the fixed header
   (anchors land with the section top at the header bottom, see scroll-padding-top in base.css).
   Content is centred; if it is taller than the window the section grows, nothing is clipped. */
.screen {
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(28px, 6vh, 88px);
}
h2.eyebrow { margin: 0.75rem 0; text-wrap: balance; } /* keyword H2s keep the light uppercase eyebrow look */

/* ---------- Home hero ---------- */
.hero {
  --p: 0;
  height: 100vh; height: 100svh; min-height: 560px;
  display: grid; place-items: center; overflow: hidden;
  color: var(--white); background: var(--navy-deep); isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; transform: translate3d(0, calc(var(--p) * 22%), 0) scale(calc(1 + var(--p) * 0.08)); transform-origin: 50% 40%; will-change: transform; }
.hero__video::-webkit-media-controls { display: none !important; } /* Chrome shows controls when JS is off; the video is decorative */
.hero__video { display: block; background: var(--navy-deep); width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6, 53, 92, 0.42), transparent 75%),
    linear-gradient(180deg, rgba(6, 53, 92, 0.55) 0%, rgba(6, 53, 92, 0.2) 35%, rgba(6, 53, 92, 0.3) 65%, rgba(6, 53, 92, 0.75) 100%);
}
/* will-change: the lockup carries a drop-shadow filter and this block fades/moves on every scroll frame.
   Promoting it to its own layer rasterises the filtered logo once instead of per frame (part of the flicker fix). */
.hero__content {
  width: min(100% - 2 * var(--gutter), 760px); text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--header-h);
  opacity: calc(1 - var(--p) * 1.8); transform: translate3d(0, calc(var(--p) * -80px), 0);
  will-change: transform, opacity;
}
.hero__title { margin: 0; line-height: 0; }
.hero__lockup { width: clamp(220px, 30vw, 420px); height: auto; aspect-ratio: 1688 / 1046; filter: drop-shadow(0 2px 24px rgba(6, 53, 92, 0.35)); }
.hero__eyebrow { color: rgba(255, 255, 255, 0.86); margin: 0 0 clamp(24px, 4vh, 40px); }
.hero__line { margin: clamp(24px, 4vh, 40px) 0 clamp(28px, 4.5vh, 44px); font-weight: 300; font-size: clamp(0.875rem, 1.3vw, 1.0625rem); letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); padding-left: 0.42em; /* balances trailing tracking */ }
@media (max-width: 599px) { .hero__eyebrow { font-size: 0.6875rem; letter-spacing: 0.22em; } }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero .btn--ghost { color: var(--white); }

/* Scroll cue: a soft highlight travels down the hairline */
.hero__cue { position: absolute; bottom: clamp(16px, 4vh, 36px); left: 50%; translate: -50% 0; width: 44px; height: 64px; display: grid; justify-items: center; opacity: calc(1 - var(--p) * 4); }
.hero__cue-line { width: 1px; height: 100%; background: rgba(255, 255, 255, 0.24); position: relative; overflow: hidden; }
.hero__cue-line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateY(-100%); animation: cue 2.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 75%, 100% { transform: translateY(230%); } }

/* first-paint entrance for hero copy */
.js .hero__content > * { animation: rise 1200ms var(--ease) both; }
.js .hero__content > :nth-child(2) { animation-delay: 120ms; }
.js .hero__content > :nth-child(3) { animation-delay: 240ms; }
.js .hero__content > :nth-child(4) { animation-delay: 360ms; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

/* ---------- Horizontal scrollers (courses, media rolls) ---------- */

.scroller-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(24px, 4vh, 48px); }
.scroller-head .title { margin: 14px 0 16px; }
.scroller-head .lead { max-width: 34em; }

.scroller-nav { display: none; gap: 10px; flex: none; }
.js .scroller-nav { display: flex; } /* arrows need JS; without it the track still scrolls natively */
.arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--white); color: var(--navy);
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out, opacity 300ms var(--ease), border-color 300ms var(--ease);
}
.arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover:not(:disabled) { border-color: var(--navy); }
.arrow:active:not(:disabled) { transform: scale(0.94); }
.arrow:disabled { opacity: 0.3; cursor: default; }

.track {
  --inset: max(var(--gutter), (100% - var(--max)) / 2);
  display: flex; gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset);
  padding: 4px var(--inset) 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline-offset: -2px; }

.card {
  flex: 0 0 min(75vw, 900px); height: clamp(280px, calc(100svh - var(--header-h) - 420px), 640px);
  position: relative; overflow: hidden; border-radius: var(--radius);
  scroll-snap-align: start; color: var(--white); background: var(--navy-deep);
  display: flex; align-items: flex-end; isolation: isolate;
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; scale: 1.02; transition: scale 1400ms var(--ease); }
.card:hover img { scale: 1.06; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 53, 92, 0.1) 25%, rgba(6, 53, 92, 0.88) 100%); }
.card__body { padding: clamp(24px, 4vw, 48px); display: grid; gap: 12px; justify-items: start; }
.card__num { font-weight: 300; font-size: 0.8125rem; letter-spacing: 0.32em; opacity: 0.8; }
.card__title { margin: 0; font-weight: 300; font-size: clamp(1.625rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; max-width: 14em; }
.card__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 500ms var(--ease); }
.card__title a:hover { background-size: 100% 1px; }
.card__text { margin: 0; max-width: 32em; font-weight: 300; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 10px; }
.card :focus-visible { outline-color: var(--white); }
.tag { margin-top: 6px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.text-link::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: transform 400ms var(--ease); transform-origin: left; }
.text-link:hover::after { transform: scaleX(1.6); }

/* Price next to the buy button */
.price { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -0.01em; }
.price small { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }

.progress { height: 2px; margin-top: clamp(20px, 3vh, 32px); background: var(--hairline); border-radius: 2px; overflow: hidden; }
.progress__fill { display: block; height: 100%; background: var(--navy); transform-origin: left; transform: scaleX(var(--progress, 0.25)); transition: transform 200ms linear; }

/* Media roll: photos in the same scroller */
.roll { padding: clamp(64px, 10vh, 120px) 0; }
.roll__item { flex: 0 0 min(70vw, 760px); margin: 0; scroll-snap-align: start; }
.roll__item img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--mist); }
.roll__item figcaption { margin-top: 12px; font-size: 0.875rem; font-weight: 300; color: var(--graphite); }

@media (max-width: 899px) {
  .card { flex-basis: 88vw; height: clamp(320px, calc(100svh - var(--header-h) - 400px), 560px); }
  .roll__item { flex-basis: 84vw; }
  .scroller-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- Feature sections (home lessons, skipper) ---------- */
.feature { padding: clamp(80px, 14vh, 160px) 0; }
.feature + .feature { padding-top: 0; }
.feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.feature--mirror .feature__text { order: 2; }
.feature__text .title { margin: 14px 0 20px; }
.feature__text .lead { max-width: 26em; }
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.facts { margin: 36px 0 40px; display: grid; border-top: 1px solid var(--hairline); }
.facts > div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.facts dt { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--navy); padding-top: 0.2em; }
.facts dd { margin: 0; font-weight: 300; font-size: 1.125rem; color: var(--graphite); }
@media (max-width: 420px) { .facts > div { grid-template-columns: 1fr; gap: 4px; } }

.panel { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.panel img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* clip-path reveal, only when JS can undo it */
.js .reveal-clip { clip-path: inset(10% 10% 10% 10% round var(--radius)); transition: clip-path 1400ms var(--ease); }
.js .reveal-clip img { transform: scale(1.15); transition: transform 1600ms var(--ease); }
.js .reveal-clip.is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .reveal-clip.is-in img { transform: none; }

@media (max-width: 899px) {
  .feature__grid { grid-template-columns: 1fr; }
  .feature--mirror .feature__text { order: 0; }
  .panel { aspect-ratio: 4 / 3; }
}

/* ---------- Library ---------- */
.library { background: var(--mist); overflow: hidden; }
.library__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.library__text .title { margin: 14px 0 20px; }
.library__text .lead { max-width: 24em; }
.note { margin: 28px 0 0; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 12px; }
.note::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.phone {
  justify-self: center; width: min(clamp(220px, 24vw, 300px), calc((100svh - var(--header-h) - 110px) * 0.46));
  padding: 9px; border-radius: 46px; border: 1.5px solid var(--navy);
  background: var(--white); box-shadow: 0 40px 80px -40px rgba(6, 53, 92, 0.45);
}
/* Screen keeps the app render's own ratio (iPhone 390 x 844), so nothing is cropped */
.phone__screen { position: relative; aspect-ratio: 390 / 844; border-radius: 37px; overflow: hidden; background: var(--mist); }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.phone__island { position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 30%; height: 21px; border-radius: 999px; background: #0b0f14; }
/* Slow, calm float. Uses `translate`, so it never fights the reveal transform. */
.js .phone.is-in { animation: float 7s cubic-bezier(0.45, 0, 0.55, 1) 1.2s infinite alternate; }
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }
@media (max-width: 899px) { .library__grid { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about { text-align: center; }
.about__inner { display: flex; flex-direction: column; align-items: center; }
.about h2 { margin: 0 0 32px; }
.about__statement { margin: 0; max-width: 18em; font-weight: 300; font-size: clamp(1.875rem, 4.6vw, 4rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--navy); }
.about .note { margin-top: 40px; }
.js .about__statement .w { display: inline-block; opacity: 0.12; transition: opacity 900ms var(--ease) var(--d, 0ms); }
.js .about__statement.is-in .w { opacity: 1; }

/* ---------- Contact / enquiry band (navy) ---------- */
.contact { background: var(--navy); color: var(--white); padding: clamp(88px, 14vh, 160px) 0; }
.contact.screen { padding-block: clamp(28px, 6vh, 88px); }
.contact__mail { margin: 24px 0 0; font-weight: 300; font-size: 1.0625rem; color: rgba(255, 255, 255, 0.86); }
.contact__mail a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.5); overflow-wrap: anywhere; }
.contact__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact .eyebrow { color: rgba(255, 255, 255, 0.72); }
.contact .title { color: var(--white); margin: 14px 0 20px; }
.contact .lead { max-width: 24em; color: rgba(255, 255, 255, 0.86); }
.contact :focus-visible { outline-color: var(--white); }
@media (max-width: 899px) { .contact__inner { grid-template-columns: 1fr; } }

/* =================== Offer pages =================== */

/* Page hero: full-bleed photo, breadcrumb, H1, answer-first lead */
.page-hero {
  min-height: 78vh; min-height: 78svh; display: flex; align-items: flex-end;
  color: var(--white); background: var(--navy-deep); isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + 48px) 0 clamp(48px, 9vh, 96px);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.page-hero__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.js .page-hero__media img { animation: settle 2200ms var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); } }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 53, 92, 0.55) 0%, rgba(6, 53, 92, 0.15) 35%, rgba(6, 53, 92, 0.55) 70%, rgba(6, 53, 92, 0.9) 100%);
}
.page-hero .container > * { max-width: 46rem; }
.page-hero .crumbs { max-width: none; }
.page-hero h1 { margin: 16px 0 20px; color: var(--white); }
.page-hero .lead { color: rgba(255, 255, 255, 0.92); }
.page-hero .eyebrow { color: rgba(255, 255, 255, 0.86); margin: 0; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.page-hero .btn--ghost { color: var(--white); }
.page-hero :focus-visible { outline-color: var(--white); }

/* Full-window page hero (offer pages) */
.page-hero--full { min-height: 100vh; min-height: 100svh; }

/* Hero option tiles: the three offers, each tile one link to its section */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; max-width: 46rem; }
.option {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-height: 72px; padding: 14px 16px 14px 18px; border-radius: 16px;
  background: rgba(6, 53, 92, 0.55); border: 1px solid rgba(255, 255, 255, 0.4); color: var(--white);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 400ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.option__name { grid-column: 1; font-size: 1.0625rem; font-weight: 400; line-height: 1.25; }
.option__when { grid-column: 1; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); margin-top: 4px; }
.option__arrow { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms var(--ease); }
@media (hover: hover) {
  .option:hover { transform: translateY(-3px); background: rgba(6, 53, 92, 0.75); border-color: var(--white); }
  .option:hover .option__arrow { transform: translateY(3px); }
}
.option:active { transform: scale(0.98); transition-duration: 100ms; }
.option:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (max-width: 699px) { .options { grid-template-columns: 1fr; gap: 8px; } .option { min-height: 60px; } }
@media (prefers-reduced-transparency: reduce) { .option { background: var(--navy-deep); -webkit-backdrop-filter: none; backdrop-filter: none; } }

.season__lead { margin: 0 0 16px; font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.625rem) !important; line-height: 1.35 !important; color: var(--white) !important; }
.season__lead--dark { color: var(--navy) !important; }
.facts--compact { margin: 24px 0 28px; }
.facts--compact > div { grid-template-columns: 6em 1fr; padding: 12px 0; }
.season .facts { border-color: rgba(255, 255, 255, 0.24); }
.season .facts > div { border-color: rgba(255, 255, 255, 0.24); }
.season .facts dt { color: rgba(255, 255, 255, 0.78); }
.season .facts dd { color: var(--white); font-size: 1.0625rem; }

.jump { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); transition: color 300ms var(--ease); }
.jump a::before { content: ""; width: 14px; height: 1px; background: currentColor; }
.jump a:hover { color: var(--white); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 699px) { .crumbs__here { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .crumbs li:first-child::after { content: "/"; margin-left: 8px; opacity: 0.6; } }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: rgba(255, 255, 255, 0.86); }

/* Body sections */
.block { padding: clamp(72px, 12vh, 140px) 0; }
.block + .block { padding-top: 0; }
.block--mist { background: var(--mist); }
.block--mist + .block, .block + .block--mist, .roll + .block { padding-top: clamp(72px, 12vh, 140px); }
.block__head { max-width: 44rem; }
.container.block__head { max-width: none; } /* keep the container width, cap the line length instead */
.container.block__head > * { max-width: 44rem; }
.block__head .title { margin: 14px 0 20px; }
.block h2.title { margin: 0 0 20px; }
.prose { max-width: 40rem; font-weight: 300; font-size: 1.125rem; line-height: 1.65; }
.prose p { margin: 0 0 1em; }
.prose a, .faq a, .related__lead a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(9, 73, 125, 0.35); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }

/* Numbered skill list */
.skills { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: skill; border-top: 1px solid var(--hairline); }
.skills li { counter-increment: skill; display: grid; grid-template-columns: 3.2em 1fr; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hairline); font-weight: 300; font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: var(--navy); }
.skills li::before { content: counter(skill, decimal-leading-zero); font-size: 0.75rem; letter-spacing: 0.24em; color: var(--graphite); }

/* Audience cards */
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 40px; }
.who__item { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--white); border: 1px solid var(--hairline); }
.who__item h3, .who__h { margin: 0 0 10px; font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; color: var(--navy); }
.who__item p { margin: 0; font-weight: 300; line-height: 1.6; }
@media (max-width: 699px) { .who { grid-template-columns: 1fr; } }

.ticks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; font-weight: 300; font-size: 1.0625rem; line-height: 1.55; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 14px; height: 1px; background: var(--navy); }

/* Season band with a full-bleed photo behind */
.season { color: var(--white); background: var(--navy-deep); isolation: isolate; overflow: hidden; padding: clamp(96px, 18vh, 200px) 0; }
.season.screen, .block.screen { padding-block: clamp(48px, 8vh, 96px); }
.season__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.season__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.season::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 53, 92, 0.88) 0%, rgba(6, 53, 92, 0.55) 55%, rgba(6, 53, 92, 0.2) 100%); }
.season .container > * { max-width: 36rem; }
.season .eyebrow { color: rgba(255, 255, 255, 0.82); margin: 0; }
.season .title { margin: 14px 0 20px; color: var(--white); }
.season p:not(.eyebrow) { font-weight: 300; font-size: 1.125rem; line-height: 1.65; color: rgba(255, 255, 255, 0.9); }
.season .btn { margin-top: 12px; }
.season :focus-visible { outline-color: var(--white); }
@media (max-width: 699px) { .season::after { background: linear-gradient(180deg, rgba(6, 53, 92, 0.6) 0%, rgba(6, 53, 92, 0.88) 100%); } }

.tagline { margin: 40px 0 0; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--navy); }

/* Buy panel on the course page */
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }

/* FAQ: native details, works without JS */
.faq { margin-top: 32px; border-top: 1px solid var(--hairline); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 64px; padding: 16px 0; font-weight: 300; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.35; color: var(--navy);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 400ms var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq h3 { margin: 0; font: inherit; color: inherit; }
.faq__a { padding: 0 0 24px; max-width: 44rem; font-weight: 300; font-size: 1.0625rem; line-height: 1.65; }
.faq__a p { margin: 0; }
.js .faq details[open] .faq__a { animation: faq-in 500ms var(--ease) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* Related offers */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 32px; }
.related__item { position: relative; display: flex; align-items: flex-end; min-height: 260px; padding: 28px; border-radius: var(--radius); overflow: hidden; color: var(--white); background: var(--navy-deep); isolation: isolate; }
.related__item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; scale: 1.02; transition: scale 1400ms var(--ease); }
.related__item:hover img { scale: 1.06; }
.related__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 53, 92, 0.1) 20%, rgba(6, 53, 92, 0.88) 100%); }
.related__item span { display: block; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.8; margin-bottom: 8px; }
.related__item strong { display: block; font-weight: 300; font-size: 1.5rem; line-height: 1.2; }
.related__item:focus-visible { outline-offset: 3px; }


/* ---------- Home: private training, three options (each card is one link) ---------- */
.training__head { max-width: 46rem; }
.training__head .title { margin: 10px 0 14px; }
.training__head .lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: clamp(24px, 4vh, 44px) 0 0; padding: 0; list-style: none; }
.choices > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.choice {
  grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0;
  border-radius: var(--radius); overflow: hidden; background: var(--white); color: var(--navy);
  border: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(6, 53, 92, 0.04);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease), border-color 450ms var(--ease);
}
.choice__media { height: clamp(120px, calc(100svh - var(--header-h) - 620px), 340px); position: relative; overflow: hidden; background: var(--mist); }
.choice__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); transition: scale 1200ms var(--ease); }
.choice__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 28px); }
.choice__title { font-weight: 300; font-size: clamp(1.625rem, 2.4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.015em; }
.choice__text { font-weight: 300; font-size: 1rem; line-height: 1.5; color: var(--graphite); }
.choice__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.chip-row { display: inline-flex; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hairline); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); }
.choice__boat { font-size: 0.8125rem; color: var(--graphite); }
.choice__go { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; }
.choice__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms var(--ease); }
@media (hover: hover) {
  .choice:hover { transform: translateY(-4px); border-color: rgba(9, 73, 125, 0.24); box-shadow: 0 24px 48px -24px rgba(6, 53, 92, 0.35); }
  .choice:hover .choice__media img { scale: 1.05; }
  .choice:hover .choice__arrow { transform: translateX(5px); }
}
.choice:active { transform: translateY(-1px) scale(0.985); transition-duration: 100ms; }
.choice:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
@media (max-width: 899px) {
  .choices { grid-template-columns: 1fr; }
  .choice__media { height: auto; aspect-ratio: 16 / 9; }
}

/* No JS on small screens: the header becomes a static wrapped bar, so push hero copy below it */
@media (max-width: 899px) {
  html:not(.js) .hero__content { padding-top: 160px; }
  html:not(.js) .page-hero { padding-top: 200px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__media, .hero__content { transform: none !important; }
  .hero__content { opacity: 1 !important; }
  .js .hero__content > * { animation: none; }
  .hero__cue-line::after { animation: none; transform: translateY(60%); }
  .js .reveal-clip { clip-path: none; opacity: 0; transition: opacity 400ms ease; }
  .js .reveal-clip.is-in { opacity: 1; }
  .js .reveal-clip img { transform: none; transition: none; }
  .choice, .choice:hover, .choice:active, .choice__arrow, .choice:hover .choice__arrow { transform: none !important; }
  .choice__media img, .choice:hover .choice__media img { scale: 1 !important; transition: none; }
  .card img, .card:hover img, .related__item img, .related__item:hover img, .offer img, .offer:hover img { scale: 1; transition: none; }
  .option, .option:hover, .option:active, .option__arrow, .option:hover .option__arrow { transform: none !important; }
  .js .page-hero__media img, .js .faq details[open] .faq__a, .js .phone.is-in { animation: none; }
}