/* St Ives (Hunts) Golf Club, after Blanca Padel (blancapadel.com).
   The reference is a dark site, so the ground is Club Navy throughout: white headings, white at 78% for body copy,
   Light Gold (on navy only) where the reference uses its yellow, Warm Stone for the menu sheet and the finder.
   Proxima Nova Light for display, from kit pdh2nxp (no display serif). Brand tokens: ../assets/st-ives.css.
   Motion: transform and opacity only, no scroll library (the reference has none), no scroll handlers. Sticky
   columns at 1024 px and up on screens at least 700 px tall; below that everything stacks and nothing is held.
   Every horizontal strip has overflow-y: hidden, so it can never catch a vertical wheel or trackpad gesture. */

:root {
  --navy: var(--sti-navy);
  --white: #FFFFFF;
  --muted: rgba(255, 255, 255, .78);   /* body copy on navy, 8.5:1 */
  --faint: rgba(255, 255, 255, .2);    /* rules */
  --panel: rgba(255, 255, 255, .07);   /* the reference's frosted fill, as white over navy */
  --panel-hi: rgba(255, 255, 255, .13);
  --gold: var(--sti-gold-light);       /* Light Gold, on navy only */
  --stone: var(--sti-stone);
  --ink-rule: rgba(34, 34, 34, .14);   /* hairlines on Warm Stone (Rule Grey vanishes there) */
  --ease: cubic-bezier(.4, 0, .2, 1);  /* the reference's site-wide transition */
  --out: cubic-bezier(.215, .61, .355, 1);
  --hd-h: 64px;
  --pad: 16px;
  --gap: 8px;
  --sec: 64px;
  --stick-top: 88px;
}
@media (min-width: 640px) { :root { --pad: 24px; } }
@media (min-width: 1024px) { :root { --pad: 40px; --hd-h: 76px; --sec: 128px; --stick-top: 100px; } }

* { box-sizing: border-box; }
html { background: var(--navy); color: var(--white); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.menu-open, html.finder-open { overflow: hidden; }
body {
  margin: 0; overflow-x: clip;
  font: 300 17px/1.45 var(--sti-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background-color: var(--navy);
  /* the reference's faint dot grid, drawn rather than tiled from an image */
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px);
  background-size: 30px 30px;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
svg { display: block; width: 100%; height: 100%; }
[hidden] { display: none !important; }   /* components that set display must still honour hidden */
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.skip { position: absolute; left: var(--pad); top: -80px; z-index: 200; padding: 12px 18px; background: var(--white); color: var(--navy); border-radius: 4px; font-weight: 600; }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } }

/* Type: the reference's ramp in Proxima Nova Light, sentence case */
.h2 { font-weight: 300; font-size: clamp(38px, 2.1rem + 2.6vw, 64px); line-height: 1.05; letter-spacing: -.01em; color: var(--white); }
.h3 { font-weight: 300; font-size: clamp(24px, 1.2rem + 1.1vw, 32px); line-height: 1.2; letter-spacing: -.005em; }
.h4 { font-weight: 400; font-size: 20px; line-height: 1.35; }
.body { color: var(--muted); }
.eyebrow { position: relative; padding-left: 12px; font-size: 16px; line-height: 1; font-weight: 300; color: var(--white); margin-bottom: 24px; }
.eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 13px; border-radius: 2px; background: var(--gold); transform: translateY(-50%); }
.eyebrow--dark { color: var(--navy); }
.eyebrow--dark::before { background: var(--navy); }
@media (min-width: 1024px) { .eyebrow { margin-bottom: 32px; } }

/* The reference's measured rule: a hairline with end ticks, before every section */
.rule { position: relative; height: 16px; margin-bottom: var(--sec); }
.rule::before, .rule::after { content: ""; position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); }
.rule::before { height: 9px; border-left: 1px solid rgba(255, 255, 255, .32); border-right: 1px solid rgba(255, 255, 255, .32); }
.rule::after { height: 1px; background: var(--faint); }
.section { position: relative; margin-top: var(--sec); }
/* the glows hang off the page edges: clip them sideways (clip, not hidden, so the sticky columns inside still stick) */
.diff, .course, .ways { overflow-x: clip; }

/* Soft glows behind sections, desktop only (as on the reference) */
.glow { display: none; position: absolute; pointer-events: none; z-index: -1; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .11) 0, rgba(255, 255, 255, 0) 100%); }
@media (min-width: 1024px) {
  .glow { display: block; }
  .glow--r { width: 840px; height: 1280px; right: -420px; top: 120px; transform: rotate(-20deg); }
  .glow--l { width: 1130px; height: 1130px; left: -560px; top: -120px; }
  .glow--r2 { width: 1050px; height: 1280px; right: -520px; top: 0; }
}
main, .ft, .marquee { position: relative; z-index: 1; }

/* Buttons: the reference's icon button, the square at the right end; inverts on hover and focus, arrow turns 45 deg */
.btn {
  position: relative; display: inline-flex; align-items: center; height: 56px; padding: 0 64px 0 24px;
  border-radius: 8px; font-size: 16px; font-weight: 400; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.btn__ic { position: absolute; top: 7px; bottom: 7px; right: 7px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn__ic svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold .btn__ic { background: var(--white); color: var(--navy); }
.btn--line { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn--line .btn__ic { background: var(--white); color: var(--navy); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy .btn__ic { background: var(--gold); color: var(--navy); }
.btn--sm { height: 44px; padding: 0 48px 0 16px; font-size: 15px; border-radius: 6px; }
.btn--sm .btn__ic { top: 6px; bottom: 6px; right: 6px; }
@media (hover: hover) {
  .btn--gold:hover, .btn--line:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
  .btn--gold:hover .btn__ic, .btn--line:hover .btn__ic { background: var(--navy); color: var(--white); }
  .btn--navy:hover { background: var(--sti-sky); }
  .btn:hover .btn__ic svg { transform: rotate(45deg); }
}
.btn--gold:focus-visible, .btn--line:focus-visible { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--gold:focus-visible .btn__ic, .btn--line:focus-visible .btn__ic { background: var(--navy); color: var(--white); }
.btn--navy:focus-visible { background: var(--sti-sky); outline-color: var(--sti-sky); }
.btn:focus-visible .btn__ic svg { transform: rotate(45deg); }

/* Square icon buttons: slider arrows, pause buttons, the finder's close (44 px, the reference's are 40) */
.ibtn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; color: var(--white); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.ibtn svg { width: 18px; height: 18px; }
@media (hover: hover) { .ibtn:hover { background: var(--white); color: var(--navy); border-color: var(--white); } }
.ibtn:focus-visible { background: var(--white); color: var(--navy); border-color: var(--white); }
.ibtn--dark { color: var(--navy); border-color: rgba(13, 48, 111, .35); }
@media (hover: hover) { .ibtn--dark:hover { background: var(--navy); color: var(--white); border-color: var(--navy); } }
.ibtn--dark:focus-visible { background: var(--navy); color: var(--white); border-color: var(--navy); outline-color: var(--sti-sky); }
[aria-pressed="true"] .i-pause, [aria-pressed="false"] .i-play { display: none; }
.ibtn .i-pause, .ibtn .i-play, .pill .i-pause, .pill .i-play { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Header */
.hd { position: sticky; top: 0; z-index: 50; height: var(--hd-h); }
.hd__scrim { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hd-h) + 96px); pointer-events: none; opacity: 0; transform: translateY(-10px);
  background: linear-gradient(to bottom, rgba(13, 48, 111, .97) 0, rgba(13, 48, 111, .94) calc(var(--hd-h) - 8px), rgba(13, 48, 111, .45) calc(var(--hd-h) + 40px), rgba(13, 48, 111, 0));
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.hd.is-scrolled .hd__scrim { opacity: 1; transform: none; }
.hd__bar { position: relative; height: var(--hd-h); max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; line-height: 1; color: var(--white); flex: none; }
.brand__name { font-size: 22px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand__sub { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--white); }
.hd__nav { display: none; flex: 1; justify-content: center; }
.hd__links { position: relative; display: flex; align-items: center; padding: 0 6px; border-radius: 8px; transition: background-color .3s var(--ease); }
.hd.is-scrolled .hd__links { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hd__link { position: relative; display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 4px; font-size: 16px; font-weight: 300; white-space: nowrap; }
@media (hover: hover) { .hd__link:hover { background: rgba(255, 255, 255, .12); } }
.hd__link:focus-visible { background: rgba(255, 255, 255, .12); outline-offset: -2px; }
/* The reference's pill that glides between links, by CSS anchor positioning where the browser has it */
@supports (anchor-name: --a) {
  @media (hover: hover) {
    .hd__links li:has(.hd__link:is(:hover, :focus-visible)) { anchor-name: --hd-link; }
    .hd__links::before { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0; border-radius: 4px; background: rgba(255, 255, 255, .12);
      left: anchor(--hd-link left); top: anchor(--hd-link top); width: anchor-size(--hd-link width); height: anchor-size(--hd-link height);
      transition: left .18s linear(0, .2342 12.49%, .4374 24.99%, .6093 37.49%, .7499 49.99%, .8593 62.5%, .9375 75%, .9844 87.5%, 1), width .18s ease-out, opacity .18s; }
    .hd__links:has(.hd__link:is(:hover, :focus-visible))::before { opacity: 1; }
    .hd__links .hd__link:hover { background: transparent; }
  }
}
.hd__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hd__book-short { display: none; }
@media (max-width: 459px) { .hd__book-long { display: none; } .hd__book-short { display: inline; } }
.hd__menu { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.hd.is-scrolled .hd__menu { background: rgba(255, 255, 255, .1); border-color: transparent; }
.hd__lines { position: relative; width: 18px; height: 12px; }
.hd__lines i { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--white); border-radius: 1px; transition: transform .3s var(--ease); }
.hd__lines i:first-child { top: 2px; }
.hd__lines i:last-child { bottom: 2px; }
.menu-open .hd__lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .hd__lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (min-width: 1200px) { .hd__nav { display: flex; } .hd__menu { display: none; } }
.menu-open .hd { background: var(--navy); }
/* the page under an open sheet dims, as on the reference; a tap on it closes the sheet */
html.menu-open body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--hd-h); z-index: 45; background: rgba(13, 48, 111, .62); animation: fadeIn .3s var(--ease) both; }

/* The menu sheet (below 1200 px): Warm Stone, navy capitals, hairlines, an arrow at the end of each row */
.menu { position: fixed; left: 0; right: 0; top: var(--hd-h); max-height: calc(100vh - var(--hd-h)); max-height: calc(100dvh - var(--hd-h)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--stone); color: var(--navy); padding: 8px var(--pad) 24px; box-shadow: 0 24px 48px rgba(13, 48, 111, .35); }
.menu[hidden] { display: none; }
.menu.is-open { animation: menuIn .3s var(--ease) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu__list li { border-bottom: 1px solid var(--ink-rule); }
.menu__list a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; font-size: 19px; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); }
.menu__list a svg { width: 12px; height: 12px; flex: none; transition: transform .3s var(--ease); }
@media (hover: hover) { .menu__list a:hover svg { transform: rotate(45deg); } .menu__list a:hover { color: var(--sti-sky); } }
.menu a:focus-visible { outline-color: var(--sti-sky); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 24px; }
.menu__book { flex: 1 1 260px; justify-content: flex-start; }
.menu__tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: 400; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 700px) { .menu { left: auto; width: 440px; right: var(--pad); border-radius: 0 0 8px 8px; } }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 560px; margin-top: calc(-1 * var(--hd-h)); padding-top: var(--hd-h); display: flex; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media picture, .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .6s var(--ease); }
.hero__video.is-playing { opacity: 1; }
/* the reference's two 80 px scrims, plus a deeper one at the foot for the bottom row */
.hero__media::before, .hero__media::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero__media::before { top: 0; height: 160px; background: linear-gradient(to bottom, rgba(13, 48, 111, .85), rgba(13, 48, 111, 0)); }
.hero__media::after { bottom: 0; height: 45%; background: linear-gradient(to top, rgba(13, 48, 111, .92), rgba(13, 48, 111, .5) 45%, rgba(13, 48, 111, 0)); }
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding-bottom: 92px; }
.hero__top { flex: 1 1 0; }
.hero__mid { text-align: center; }
.hero__label { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.hero__place { font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: 15px; color: var(--muted); }
.hero__title { max-width: 1052px; margin: 0 auto; font-weight: 300; font-size: clamp(46px, 1.4rem + 5.6vw, 88px); line-height: .98; letter-spacing: -.01em; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.hero__br { display: none; }
@media (min-width: 640px) { .hero__br { display: inline; } }
.hero__row { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 20px; }
.hero__copy { max-width: 380px; font-size: 16px; line-height: 1.45; color: var(--muted); text-align: center; }
.hero__ctas { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 360px; }
.hero__pause { position: absolute; right: var(--pad); top: 12px; }
@media (min-width: 640px) {
  .hero__ctas { flex-direction: row; align-items: center; justify-content: center; max-width: none; width: auto; }
}
@media (min-width: 1024px) {
  .hero__inner { gap: 64px; padding-bottom: 96px; }
  .hero__row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .hero__copy { text-align: left; max-width: 360px; }
  .hero__ctas { margin-left: auto; }
  .hero__pause { position: static; }
  .hero__label { margin-bottom: 28px; }
}
@media (max-width: 639px) {
  .hero { min-height: 640px; }
  .hero__inner { gap: 24px; padding-bottom: 84px; }
  .hero__top { flex: .55 1 0; }
  .hero__label { gap: 4px; margin-bottom: 16px; font-size: 12px; }
  .hero__place { font-size: 14px; }
  .hero__ctas .btn { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- The opening (html.opening) */
.intro { display: none; }
html.js.opening .intro { display: block; position: fixed; inset: 0; z-index: 120; pointer-events: none; animation: introGone 0s linear 1.04s both; }
/* the navy ground of the opening, faded by opacity as the hero rises behind it */
html.js.opening .intro::before { content: ""; position: absolute; inset: 0; background-color: var(--navy);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px); background-size: 30px 30px;
  animation: fadeOut .38s ease-out .56s both; }
.intro__lockup { position: absolute; inset: 0; }
.intro__plate { position: fixed; left: var(--px, calc(50% - 190px)); top: var(--py, calc(50% - 56px)); width: var(--pw, 112px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--stone);
  animation: plateIn .45s var(--out) both, plateOut .3s ease-in .52s both; }
.intro__plate img { width: 78%; height: auto; }
.intro__mask { position: fixed; left: var(--bl, 40px); top: var(--bt, 16px); display: block; overflow: hidden; transform-origin: 0 0; padding: 0 2px 2px 0;
  transform: translate(var(--rx, calc(50vw - 40px)), var(--ry, calc(50vh - 40px))) scale(var(--rs, 2));
  animation: fly .5s cubic-bezier(.165, .84, .44, 1) .52s both; }
.intro__name { display: flex; flex-direction: column; line-height: 1; animation: unfurl .45s var(--out) .06s both; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes introGone { to { visibility: hidden; } }
/* The plate is there from the first frame (as the reference's mark is), settling from .86 */
@keyframes plateIn { from { transform: scale(.86); } to { transform: none; } }
@keyframes plateOut { to { opacity: 0; transform: scale(.85); } }
@keyframes unfurl { from { transform: translateX(-101%); } to { transform: none; } }
@keyframes fly { from { transform: translate(var(--rx, calc(50vw - 40px)), var(--ry, calc(50vh - 40px))) scale(var(--rs, 2)); } to { transform: none; } }
/* Everything else arrives with the flight, as on the reference: film up from 1.1, words out of their masks,
   header links down, bottom row up. The real header name takes over as the flying one lands. */
html.opening .hero__media { animation: filmIn .6s var(--out) .52s both; }
html.opening .w > span { animation: wordUp .6s var(--out) both; animation-delay: calc(.52s + var(--i, 0) * .05s); }
html.opening .hero__label, html.opening .hero__row { animation: rise .6s var(--out) .52s both; }
html.opening .hd__nav, html.opening .hd__end { animation: drop .6s var(--out) .52s both; }
html.opening .brand { animation: show 0s linear 1.02s both; }
html.opening .tab { animation: fadeIn .4s ease .8s both; }
.w:nth-child(2) > span { --i: 1; } .w:nth-child(3) > span { --i: 2; } .w:nth-child(4) > span { --i: 3; }
.w:nth-child(5) > span { --i: 4; } .w:nth-child(6) > span { --i: 5; } .w:nth-child(7) > span { --i: 6; }
@keyframes filmIn { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes wordUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- The difference */
.diff__grid { grid-template-areas: "head" "main" "side"; row-gap: 40px; }
.diff__head { grid-area: head; }
.diff__main { grid-area: main; }
.diff__side { grid-area: side; }
.diff__stick { display: grid; gap: 24px; }
.diff__photo { aspect-ratio: 448 / 337; border-radius: 8px; overflow: hidden; background: var(--panel); }
.diff__photo img { width: 100%; height: 100%; object-fit: cover; }
.diff__film { position: relative; aspect-ratio: 904 / 678; border-radius: 8px; overflow: hidden; background: var(--panel); }
.diff__film video { width: 100%; height: 100%; object-fit: cover; }
.chip { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 10px 10px 10px 16px; border-radius: 4px;
  background: rgba(13, 48, 111, .82); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: var(--white); transition: background-color .3s var(--ease); }
.chip__text { display: grid; gap: 4px; }
.chip__name { font-size: 16px; font-weight: 400; }
.chip__sub { font-size: 13px; color: var(--muted); }
.chip__ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: var(--gold); color: var(--navy); flex: none; }
.chip__ic svg { width: 10px; height: 10px; transition: transform .3s var(--ease); }
@media (hover: hover) { .chip:hover { background: var(--navy); } .chip:hover .chip__ic svg { transform: rotate(45deg); } }
.strap { margin-top: 32px; font-size: clamp(22px, 1.1rem + 1vw, 32px); line-height: 1.2; font-weight: 300; color: var(--white); max-width: 30ch; }
.rule--mid { margin: 40px 0; }
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.benefit { display: grid; align-content: start; gap: 16px; }
.benefit__ic { width: 32px; height: 32px; color: var(--gold); }
.benefit p { font-size: 16px; color: var(--muted); }
@media (min-width: 640px) and (max-width: 1023px) {
  .diff__stick { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 639px) {
  /* the reference's 1.45-up swiped row; overflow-y hidden so it never catches a vertical gesture */
  .benefits { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .benefits::-webkit-scrollbar { display: none; }
  .benefit { flex: 0 0 68%; scroll-snap-align: start; }
}
@media (min-width: 1024px) {
  .diff__grid { grid-template-areas: none; row-gap: 0; align-items: stretch; }
  .diff__head { grid-area: 1 / 5 / 2 / 11; margin-bottom: 80px; }
  .diff__side { grid-area: 2 / 1 / 3 / 5; }
  .diff__main { grid-area: 2 / 5 / 3 / 13; }
  .diff__stick { gap: 40px; }
  .chip { right: 32px; bottom: 32px; padding: 14px 14px 14px 18px; gap: 48px; }
  .strap { margin-top: 40px; }
  .rule--mid, .benefits { margin-left: calc((100% + var(--gap)) / 3); }
  .benefits { gap: 0; }
  .benefit { padding-right: 32px; }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .diff__stick { position: sticky; top: var(--stick-top); }
}

/* ---------------------------------------------------------------- Padel band */
.band__frame { position: relative; isolation: isolate; height: 600px; border-radius: 8px; overflow: hidden; background: var(--panel); display: flex; align-items: flex-end; }
.band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(13, 48, 111, .96) 0, rgba(13, 48, 111, .92) 50%, rgba(13, 48, 111, .3) 78%, rgba(13, 48, 111, 0) 100%); }
.band__text { padding: 24px; display: grid; justify-items: start; gap: 20px; max-width: 560px; }
.band__text .eyebrow, .band__text .h2 { margin: 0; }
.pill { position: absolute; top: 16px; right: 16px; height: 44px; min-width: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 22px;
  background: rgba(13, 48, 111, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); font-size: 15px; font-weight: 400; transition: background-color .3s var(--ease), color .3s var(--ease); }
@media (hover: hover) { .pill:hover { background: var(--white); color: var(--navy); } }
.pill:focus-visible { background: var(--white); color: var(--navy); }
@media (min-width: 640px) { .band__text { padding: 40px; } }
@media (min-width: 1024px) {
  .band__frame { align-items: center; }
  .band__shade { background: linear-gradient(90deg, rgba(13, 48, 111, .95) 0, rgba(13, 48, 111, .92) 46%, rgba(13, 48, 111, .4) 66%, rgba(13, 48, 111, 0) 84%); }
  .band__text { padding: 56px; max-width: 540px; }
}

/* ---------------------------------------------------------------- Course slider (the reference's technology panel) */
.panel { position: relative; border-radius: 8px; background: var(--panel); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); overflow: clip; /* clip, not hidden: hidden would make the panel the scroller its sticky text sticks to */ padding: 48px var(--pad) 32px; }
.course__head { margin-bottom: 40px; }
.slider { display: grid; gap: 32px; outline-offset: 6px; }
.slider__stage { position: relative; aspect-ratio: 782 / 585; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .05); touch-action: pan-y; }
.slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.slider__stage { cursor: grab; user-select: none; }
.slider__img.is-on { opacity: 1; }
.slider__ctrls { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.slider__count { margin-left: 12px; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slider__slides { display: grid; }
.slide { grid-area: 1 / 1; display: grid; align-content: start; gap: 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.slide.is-on { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.slide .body { font-size: 16px; }
.tees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tees li { display: grid; gap: 4px; padding: 12px 10px; border-radius: 4px; background: var(--panel); }
.tees b { font-size: 26px; font-weight: 300; line-height: 1; color: var(--gold); }
.tees span { font-size: 13px; color: var(--muted); }
.tlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; justify-self: start; font-size: 16px; font-weight: 400; color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 5px; }
.tlink svg { width: 11px; height: 11px; transition: transform .3s var(--ease); }
@media (hover: hover) { .tlink:hover { text-decoration-color: var(--white); } .tlink:hover svg { transform: rotate(45deg); } }
@media (max-width: 459px) { .tees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .panel { padding: 128px 0 40px; }
  .course__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: 80px; }
  .course__head > * { grid-column: 2 / span 6; }
  .slider { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); gap: 0 var(--gap); align-items: stretch; }
  .slider__stage { grid-column: 1 / span 7; align-self: start; border-radius: 0 4px 4px 0; }
  .slider__text { grid-column: 8 / span 5; padding: 0 56px 40px 56px; }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .slider__stick { position: sticky; top: var(--stick-top); }
}
@media (min-width: 1300px) { .slider__text { grid-column: 8 / span 4; padding: 0 0 40px 72px; } }

/* ---------------------------------------------------------------- Find your way in: rail and cards */
.ways__grid { row-gap: 40px; }
.ways__stick { display: grid; justify-items: start; }
.ways__stick .h2, .ways__stick .body { margin-bottom: 32px; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.card { position: relative; aspect-ratio: 448 / 515; border-radius: 8px; overflow: hidden; background: var(--panel); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.card__link { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; color: var(--white); border-radius: 8px; }
.card__link:focus-visible { outline-offset: -3px; }
.card__fig { position: absolute; inset: 0 0 34% 0; display: grid; place-items: center; text-align: center; font-size: clamp(56px, 2rem + 4vw, 92px); line-height: .92; font-weight: 300; letter-spacing: -.02em; color: var(--white);
  transition: transform .3s var(--ease), opacity .3s var(--ease); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.card__num { position: absolute; top: 18px; left: 20px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.card__body { position: relative; display: grid; gap: 8px; padding: 72px 20px 20px; background: linear-gradient(to top, rgba(13, 48, 111, .96) 0, rgba(13, 48, 111, .93) 62%, rgba(13, 48, 111, 0) 100%); }
.card__name { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 400; line-height: 1.2; }
.card__ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--gold); color: var(--navy); }
.card__ic svg { width: 10px; height: 10px; transition: transform .3s var(--ease); }
.card__line { font-size: 15px; line-height: 1.4; color: var(--muted); }
/* The reference's swap: the figure shrinks to .9 and fades while the photograph comes up from 1.1 */
@media (hover: hover) and (pointer: fine) {
  .card__link:hover .card__fig, .card__link:focus-visible .card__fig { transform: scale(.9); opacity: 0; }
  .card__link:hover .card__img, .card__link:focus-visible .card__img { transform: none; opacity: 1; }
  .card__link:hover .card__ic svg, .card__link:focus-visible .card__ic svg { transform: rotate(45deg); }
}
/* Touch: nothing waits for a hover; the photograph is simply there and one tap follows the link */
@media (hover: none), (pointer: coarse) {
  .card__fig { display: none; }
  .card__img { opacity: 1; transform: none; }
}
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card__name { font-size: 20px; } }
@media (min-width: 1024px) {
  .ways__rail { grid-column: 1 / span 4; padding-right: 32px; }
  .cards { grid-column: 5 / span 8; }
  .card__name { font-size: 22px; }
}
@media (min-width: 1024px) and (min-height: 700px) { .ways__stick { position: sticky; top: var(--stick-top); } }

/* ---------------------------------------------------------------- Club life */
.life__grid { row-gap: 40px; }
.life__left .h2 { margin-bottom: 24px; }
.quote { margin-top: 40px; padding-left: 20px; border-left: 2px solid var(--gold); }
.quote p { font-size: 20px; line-height: 1.4; color: var(--white); }
.quote footer { margin-top: 10px; font-size: 14px; color: var(--muted); }
.life__media { display: flex; justify-content: center; }
.life__films { position: relative; width: 100%; max-width: 403px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 4px; background: var(--panel); }
.life__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s var(--ease); }
.life__film.is-on { opacity: 1; }
.life__handle { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 48px 16px 18px; font-size: 14px; color: var(--white); background: linear-gradient(to top, rgba(13, 48, 111, .85), rgba(13, 48, 111, 0)); }
.life__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.ibtn--film { position: absolute; top: 12px; right: 12px; background: rgba(13, 48, 111, .6); border-color: transparent; }
.life__links { display: grid; gap: 8px; align-content: end; }
.row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 12px 0 20px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 4px; font-size: 22px; font-weight: 300; transition: background-color .3s var(--ease), color .3s var(--ease); }
.row__ic { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; }
.row__ic svg { width: 11px; height: 11px; transition: transform .3s var(--ease); }
@media (hover: hover) { .row:hover { background: var(--white); color: var(--navy); } .row:hover svg { transform: rotate(45deg); } }
.row:focus-visible { background: var(--white); color: var(--navy); }
@media (min-width: 768px) and (max-width: 1023px) {
  .life__grid { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .life__left { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .life__left { grid-column: 1 / span 5; padding-right: 24px; }
  .life__media { grid-column: 6 / span 4; }
  .life__links { grid-column: 10 / span 3; }
}

/* ---------------------------------------------------------------- Marquee */
.marquee { margin-top: var(--sec); overflow: hidden; overflow-y: hidden; user-select: none; padding: 40px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee.is-off .marquee__track, .calm .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; flex: none; font-size: 90px; line-height: 1.05; font-weight: 300; text-transform: uppercase; white-space: nowrap; color: var(--white); }
.marquee__item i { display: inline-block; width: 12px; height: 12px; margin: 0 16px; border-radius: 50%; background: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (min-width: 1024px) {
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
  .marquee__item { font-size: 180px; }
  .marquee__item i { width: 16px; height: 16px; margin: 0 32px; }
}

/* ---------------------------------------------------------------- Footer */
.ft { padding: 24px 0 96px; }
.ft .rule { margin-bottom: 48px; }
.ft__grid { display: grid; gap: 48px; }
.ft__club { display: grid; justify-items: start; gap: 12px; }
.ft__crest { --sti-crest-plate: 112px; margin-bottom: 8px; }
.ft__name { font-size: 20px; font-weight: 400; }
.ft__addr { color: var(--muted); font-size: 16px; }
.ft__contact { display: grid; }
.ft__contact a, .ft__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 16px; color: var(--muted); transition: color .3s var(--ease); }
.ft__contact a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
@media (hover: hover) { .ft__col a:hover { color: var(--white); } .ft__contact a:hover { text-decoration-color: var(--white); } }
.ft__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 24px; }
.ft__h { font-size: 20px; font-weight: 400; margin-bottom: 8px; }
.ft__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 56px; font-size: 14px; color: var(--muted); }
.ft__top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--white); font-size: 15px; }
@media (min-width: 1024px) {
  .ft { padding-bottom: 40px; }
  .ft__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .ft__club { grid-column: 1 / span 4; }
  .ft__nav { grid-column: 5 / span 8; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Fixed tab and finder */
.tab { position: fixed; left: 50%; bottom: 0; z-index: 40; transform: translateX(-50%); transition: opacity .3s var(--ease), transform .3s var(--ease); width: max-content; max-width: calc(100% - 2 * var(--pad)); }
.tab::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: 0; height: 96px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(13, 48, 111, 0), rgba(13, 48, 111, .7)); }
.tab.is-hidden { opacity: 0; transform: translate(-50%, 100%); pointer-events: none; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.tab__btn { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 52px 8px 20px; border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--white); text-align: left; transition: background-color .3s var(--ease); }
.tab__t { font-size: 16px; font-weight: 400; white-space: nowrap; }
.tab__sub { font-size: 14px; color: var(--muted); white-space: nowrap; }
.tab__btn .btn__ic { top: 10px; bottom: 10px; right: 10px; background: var(--gold); color: var(--navy); }
@media (hover: hover) { .tab__btn:hover { background: rgba(255, 255, 255, .24); } .tab__btn:hover .btn__ic svg { transform: rotate(45deg); } }
@media (max-width: 359px) { .tab__sub { display: none; } }
/* Narrow screens: the tab moves to the left so the St Ives AI Concierge launcher has the bottom-right corner */
@media (max-width: 560px) {
  .tab { left: var(--pad); transform: none; max-width: calc(100% - var(--pad) - 88px); }
  .tab::before { left: calc(-1 * var(--pad)); }
  .tab.is-hidden { transform: translateY(100%); }
  .tab__sub { display: none; }
}

.finder { position: fixed; inset: 0; z-index: 150; display: grid; place-items: end center; }
.finder[hidden] { display: none; }
.finder__scrim { position: absolute; inset: 0; background: rgba(13, 48, 111, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadeIn .3s var(--ease) both; }
.finder__box { position: relative; width: 100%; max-width: 600px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--pad) 32px; border-radius: 8px 8px 0 0; background: var(--stone); color: var(--navy); animation: boxIn .3s var(--ease) both; outline: none; }
@keyframes boxIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.finder__close { position: absolute; top: 16px; right: 16px; }
.finder__title { font-size: clamp(26px, 1.2rem + 1.2vw, 34px); font-weight: 300; line-height: 1.15; margin-bottom: 24px; padding-right: 40px; }
.finder__choices { display: grid; gap: 8px; }
.choice { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 16px; border: 1px solid rgba(13, 48, 111, .25); border-radius: 6px; text-align: left; color: var(--navy); font-size: 18px; font-weight: 400; transition: background-color .3s var(--ease), color .3s var(--ease); }
.choice small { display: block; margin-top: 4px; font-size: 14px; color: var(--sti-body); transition: color .3s var(--ease); }
.choice svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .choice:hover { background: var(--navy); color: var(--white); } .choice:hover small { color: var(--white); } }
.choice:focus-visible { background: var(--navy); color: var(--white); outline-color: var(--sti-sky); }
.choice:focus-visible small { color: var(--white); }
.fit[hidden] { display: none; }
.fit { display: grid; justify-items: start; gap: 18px; }
.fit__name { font-size: clamp(24px, 1.1rem + 1vw, 30px); font-weight: 300; line-height: 1.2; padding-right: 40px; }
.fit ul { display: grid; gap: 8px; }
.fit li { position: relative; padding-left: 20px; color: var(--sti-body); font-size: 16px; }
.fit li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--navy); }
.finder__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-size: 16px; color: var(--sti-sky); text-decoration: underline; text-underline-offset: 4px; }
.finder__back svg { width: 16px; height: 16px; }
.finder__back:focus-visible { outline-color: var(--sti-sky); }
@media (min-width: 640px) {
  .finder { place-items: center; padding: 24px; }
  .finder__box { border-radius: 8px; padding: 40px; }
}

/* ---------------------------------------------------------------- Without script: everything reads, nothing waits */
html:not(.js) .tab, html:not(.js) .ibtn, html:not(.js) .pill, html:not(.js) .slider__ctrls { display: none; }
html:not(.js) .slide { grid-area: auto; opacity: 1; visibility: visible; margin-bottom: 32px; }
.nojs-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band .nojs-poster { z-index: -2; }
/* The course film's stand-in where it never plays (script off, reduced motion): a real photograph, not a film frame */
.film-still { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .film-still, .calm .film-still { display: block; }

/* ---------------------------------------------------------------- Gentle photo parallax (James, 24 Oct)
   The photo drifts slower than its frame: 7% of the frame's height in all (-3.5% as the frame enters at the bottom,
   +3.5% as it leaves at the top), inside a frame that already clips it. As everywhere on this page, nothing is read
   while scrolling: a CSS view timeline on the frame drives it where supported; elsewhere main.js reads the frames at
   load and resize and only scrollY while scrolling. translate and scale are the individual transform properties, so
   they leave any transform on the image alone. Not on the hero (the headline sits over it), the cards (their text
   sits over the photo, and hover scales it) or the films. */
.diff__photo, .slider__stage { view-timeline: --px block; }
.px { scale: 1.08; translate: 0 var(--px, 0px); }
@supports (animation-timeline: view()) {
  .px { animation: px linear both; animation-timeline: --px; }
}
@keyframes px { from { translate: 0 -3.5%; } to { translate: 0 3.5%; } }

/* ---------------------------------------------------------------- Reduced motion: a calm, complete page */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0s !important; }
  .marquee__track { animation: none !important; }
  .px { animation: none; scale: none; translate: none; }
}
.calm .hero__video { display: none; }