/* St Ives (Hunts) Golf Club, Kube direction (after Kube Hotel Saint-Tropez).
   Kube's cream is Warm Stone, its lime circles are Fairway Gold with a white icon, its thin Deco caps are
   Proxima Nova Light (uppercase for labels only; headings stay in sentence case). Motion is transform and
   opacity only. Tokens come from ../assets/st-ives.css. */

:root {
  --navy: var(--sti-navy);
  --gold: var(--sti-gold);
  --sky: var(--sti-sky);
  --stone: var(--sti-stone);
  --white: var(--sti-white);
  --ink: var(--sti-ink);
  --body: var(--sti-body);
  --line: rgba(34, 34, 34, .14);           /* hairlines: Rule Grey vanishes on Warm Stone, so Ink at 14% */
  --line-light: rgba(255, 255, 255, .22);
  --gut: clamp(16px, 2.45vw, 36px);        /* the reference's site margin: 35px at 1440, 17px at 390 */
  --hd-h: 64px;
  --font: var(--sti-font);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
}
@media (min-width: 1024px) { :root { --hd-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd-h); scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
html.menu-lock { overflow: hidden; }
body {
  margin: 0; background: var(--stone); color: var(--body);
  font: 400 var(--sti-body-size)/var(--sti-body-lh) var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 16px;
  background: var(--navy); color: #fff; font: 600 13px/1 var(--font); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--sti-dur-fast) ease;
}
.skip:focus { transform: none; }
.skip { display: inline-flex; align-items: center; min-height: 44px; }   /* A6 */

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 18px; font: 600 12px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--body);
}
.eyebrow--light { color: #fff; }
.display {
  font: 300 clamp(2rem, 1.45rem + 2.1vw, 3.25rem)/1.12 var(--font); letter-spacing: -.005em; color: var(--navy);
  text-wrap: balance;
}
.display--hero { font-size: clamp(2.75rem, 1.75rem + 3.9vw, 4.875rem); line-height: 1.04; color: #fff; }
.display--sm { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem); }

/* Caps link with an underline that wipes out and back in on hover (transform only) */
.lnk {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font: 600 13px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--sky);
}
.lnk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: currentColor;
  transform-origin: left; transition: transform .4s var(--ease-out);
}
@media (hover: hover) {
  .lnk:hover::after { animation: line-wipe .7s var(--ease-out); }
  .lnk:hover { color: var(--navy); }
  .lnk--light:hover, .lnk--gold:hover { color: inherit; }
}
@keyframes line-wipe {
  0% { transform: scaleX(1); transform-origin: right; }
  45% { transform: scaleX(0); transform-origin: right; }
  46% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
.lnk--light { color: #fff; }
.lnk--gold { color: var(--sti-gold-light); }
.lnk--inline {
  display: inline; min-height: 0; font: inherit; letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-underline-offset: 3px;
}
.lnk--inline::after { content: none; }
/* A6: a 44 px tall hit area round inline links (invisible, no layout change); it overlaps the lines above and below.
   The links never wrap: a wrapped link's ::after spans both lines and centres between them, off each line (fix round). */
.lnk.lnk--inline { white-space: nowrap; }
.lnk.lnk--inline::after {
  content: ""; left: -2px; right: -2px; top: 50%; bottom: auto; height: 44px; background: none;
  transform: translateY(-50%); transition: none; animation: none;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
  font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--navy); border: 0; border-radius: var(--sti-radius); cursor: pointer;
  transition: background-color var(--sti-dur-fast) ease, color var(--sti-dur-fast) ease;
}
.btn:hover { background: var(--sky); }
.btn--light { color: var(--navy); background: #fff; }
.btn--light:hover { color: #fff; background: var(--navy); }

/* Gold circle with a white icon: Kube's lime circle. Icons on gold pass the 3:1 non-text bar (3.90:1). */
.circle {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: #fff;
}
.circle svg { width: 14px; height: 14px; }

.hairline { display: block; width: 1px; height: 72px; margin: 0 auto clamp(40px, 5vw, 64px); background: var(--gold); }

/* Reveals: opacity only, as the reference. Script adds .is-in; without script nothing is hidden. */
html.js .rv { opacity: 0; transition: opacity 1s ease; }
html.js .rv.is-in { opacity: 1; }

/* ---------- Header ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 var(--gut); padding-top: env(safe-area-inset-top); color: #fff;
  transition: color .35s ease;
}
.hd::before {                                   /* the Warm Stone bar fades in: opacity, not background */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--stone);
  border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .35s ease;
}
.hd.is-solid, .hd.is-menu { color: var(--navy); }
.hd.is-solid::before, .hd.is-menu::before { opacity: 1; }
.hd.is-menu::before { border-bottom-color: transparent; }
.hd__member, .hd__book { color: inherit; }
.hd__member { justify-self: start; }
.hd__brand {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; justify-content: center;
  color: inherit; text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.hd__brand-1 { font: 700 17px/1 var(--font); letter-spacing: .26em; margin-right: -.26em; }
.hd__brand-2 { font: 600 10px/1 var(--font); letter-spacing: .2em; margin-right: -.2em; }
.hd__right { justify-self: end; display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.hd__book-short { display: none; }
.hd__book::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: max(100%, 44px); transform: translateX(-50%); }   /* A6: "Book" is 37 px wide at 390 */
@media (max-width: 599px) {
  .hd__book-long { display: none; }
  .hd__book-short { display: inline; }
  .hd__member, .hd__book { font-size: 12px; letter-spacing: .08em; }
  .hd__brand-1 { font-size: 15px; letter-spacing: .22em; margin-right: -.22em; }
  .hd__brand-2 { font-size: 10px; letter-spacing: .1em; margin-right: -.1em; }
}
@media (max-width: 359px) { .hd__member { display: none; } }

/* Hamburger: a translucent ring over the film, a gold circle on the bar, a cross over the menu */
.burger {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); cursor: pointer; color: #fff;
  transition: border-color .35s ease;
}
.burger::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--gold);
  opacity: 0; transition: opacity .35s ease;
}
.hd.is-solid .burger, .hd.is-menu .burger { border-color: transparent; }
.hd.is-solid .burger::before, .hd.is-menu .burger::before { opacity: 1; }
.burger__lines { position: relative; width: 18px; height: 8px; }
.burger__lines i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform .5s var(--ease-out);
}
.burger__lines i:first-child { top: 0; }
.burger__lines i:last-child { bottom: 0; }
html:not(.js) .burger { display: none; }                     /* no script, no menu: the footer carries every link */
.hd.is-menu .burger__lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
.hd.is-menu .burger__lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.hd.is-solid .burger:focus-visible, .hd.is-menu .burger:focus-visible { outline-color: var(--navy); }
.hd:not(.is-solid):not(.is-menu) :focus-visible { outline-color: #fff; }

/* ---------- Menu ---------- */
.menu { position: fixed; inset: 0; z-index: 40; }
.menu[hidden] { display: none; }
.menu__panel {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--stone);
  transform: translate3d(100%, 0, 0); transition: transform .7s var(--ease-expo); will-change: transform;
}
.menu.is-open .menu__panel { transform: none; }
.menu.is-closing .menu__panel { transition: transform .5s var(--ease-in); }
.menu__scroll {
  height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--hd-h) + env(safe-area-inset-top) + 8px) var(--gut) calc(24px + env(safe-area-inset-bottom));
}
.menu__list { border-top: 1px solid var(--line); }
.menu__list li, .menu__small, .menu__foot {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .5s ease, transform .9s var(--ease-expo);
}
.menu__list li { transition-delay: calc(.12s + var(--i, 0) * .045s); }
.menu__small, .menu__foot { transition-delay: .42s; }
.menu.is-open .menu__list li, .menu.is-open .menu__small, .menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu.is-closing .menu__list li, .menu.is-closing .menu__small, .menu.is-closing .menu__foot { transition-delay: 0s; }
.menu__link {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 0;
  border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none;
}
.menu__t { font: 300 clamp(1.5rem, 1.25rem + .9vw, 1.875rem)/1.1 var(--font); letter-spacing: .05em; text-transform: uppercase; }
.menu__sub { font: 600 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--body); }
.menu__t, .menu__sub { transition: opacity .3s ease; }
.menu__list.has-active .menu__link:not(.is-active) .menu__t,
.menu__list.has-active .menu__link:not(.is-active) .menu__sub { opacity: .62; }   /* 3.9:1 on Warm Stone at 30px */
.menu__link .circle { margin-left: auto; opacity: 0; transform: translate3d(-8px, 0, 0) scale(.8); transition: opacity .3s ease, transform .4s var(--ease-out); }
.menu__link.is-active .circle { opacity: 1; transform: none; }
.menu__small { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(32px, 6vw, 72px); }
.menu__small a {
  display: inline-flex; align-items: center; min-height: 44px; font: 600 12px/1.2 var(--font); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--navy);
}
.menu__small a:hover { color: var(--sky); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.menu__media { display: none; }
@media (min-width: 600px) { .menu__foot { display: none; } }   /* the header shows Book a tee time in full from 600 px */
@media (hover: none) { .menu__link .circle { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .menu__foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 0 calc(var(--gut) * -1); padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: var(--stone); border-top: 1px solid var(--line); }
  .menu__foot .btn { flex: 1; }
  .menu__small { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
@media (min-width: 1024px) {
  .menu__panel { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); transform: translate3d(0, 100%, 0); transition-duration: .8s; }
  .menu.is-closing .menu__panel { transition-duration: .6s; }
  .menu__scroll { gap: clamp(24px, 5vh, 48px); padding-bottom: clamp(20px, 4vh, 36px); }
  .menu__link { min-height: clamp(48px, 7.2vh, 76px); padding-block: 8px; }   /* 76px rows at 900 tall, 55px at 768 */
  .menu__media { display: block; position: relative; margin-top: var(--hd-h); overflow: hidden; }
  .menu__media > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
    transform: scale(1.1); transition: opacity .6s ease, transform 1.4s var(--ease-expo);
  }
  .menu__media > img.is-on { opacity: 1; }
  .menu.is-open .menu__media > img { transform: none; }
  .menu__plate { position: absolute; left: 32px; bottom: 32px; --sti-crest-plate: 104px; opacity: 0; transition: opacity .6s ease .5s; }
  .menu.is-open .menu__plate { opacity: 1; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  background: #000; color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: -1; transition: opacity .45s ease; }
html.opening .hero__media { opacity: 0; animation: hero-fallback .5s ease 2.5s forwards; }   /* if main.js never runs */
@keyframes hero-fallback { to { opacity: 1; } }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .4s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .52) calc(var(--hd-h) + 8px), rgba(0, 0, 0, 0) 30%),   /* white header labels over the sky */
    linear-gradient(0deg, rgba(0, 0, 0, .66) 0, rgba(0, 0, 0, .38) 36%, rgba(0, 0, 0, 0) 62%);
}
.hero__copy {
  position: absolute; left: 50%; bottom: calc(clamp(48px, 6vh, 72px) + 96px); width: min(100% - 2 * var(--gut), 980px);
  transform: translateX(-50%); text-align: center;
}
.hero__copy .eyebrow { margin-bottom: 16px; }
.hero__actions {
  position: absolute; left: 50%; bottom: clamp(48px, 6vh, 72px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 28px; white-space: nowrap;
}
@media (max-width: 599px) {
  /* The reference centres its phone headline; over St Ives' bright dunes shot that measured 1.85:1 for the eyebrow,
     so the copy sits above the actions on a deeper foot shade and the film stays clear in the top half. */
  .hero__copy { bottom: calc(88px + env(safe-area-inset-bottom) + 48px + 4px + 44px + 20px); }   /* 88: actions sit above the AI Concierge launcher */
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .52) calc(var(--hd-h) + 8px), rgba(0, 0, 0, 0) 26%),
      linear-gradient(0deg, rgba(0, 0, 0, .74) 0, rgba(0, 0, 0, .62) 36%, rgba(0, 0, 0, 0) 64%);
  }
  .hero__actions {
    left: var(--gut); right: var(--gut); bottom: calc(88px + env(safe-area-inset-bottom)); transform: none;
    flex-direction: column; gap: 4px;
  }
  .hero__actions .btn { order: 2; width: 100%; }
}

/* ---------- Intro ---------- */
.intro { padding: clamp(80px, 11vw, 160px) var(--gut) clamp(80px, 9vw, 140px); }
.intro__text { max-width: 640px; margin: 0 auto; text-align: center; }
.intro__text .display { margin-bottom: 28px; }
.intro__text .lnk { margin-top: 4px; }
.intro__fig { margin: clamp(48px, 6vw, 80px) auto 0; max-width: 1060px; }
.intro__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.intro__frame img {
  position: absolute; left: 0; top: 0; width: 100%; height: 118%; object-fit: cover;
  transform: translate3d(0, -7.6%, 0);                    /* centred when the drift is off (touch, reduced motion) */
}
/* Gentle photo parallax (James, 24 Oct): the photograph drifts slower than its frame, 3.5% of the frame's height either
   side of centre (main.js sets --px on the frame). translate and scale are the individual transform properties, so
   they compose with the drift, hover and reveal transforms already on these images. Off under reduced motion. The
   intro aerial is already 118% tall, so it drifts without the scale (touch only: on desktop it has its own drift). */
.px { scale: 1.08; translate: 0 var(--px, 0px); }
.px--tall { scale: none; }
@media (prefers-reduced-motion: reduce) { .px { scale: none; translate: none; } }

/* ---------- Section heads ---------- */
.sec-head { padding: 0 var(--gut); margin: 0 auto clamp(40px, 5vw, 64px); max-width: 860px; text-align: center; }

/* ---------- Cards, numbered like holes ----------
   Phones: stacked inside the page margin with Warm Stone gaps. From 700: a 12-column grid, the wide Visitors card (7)
   beside a shorter Membership card (5) whose foot lines up with it, so it steps down; Societies (10) is set in from
   the left beneath. Each card: hole number, title, a gold yardage rule (ticks at 0, half and full), one line, Discover,
   bottom left. Hover or keyboard focus raises the second photograph from the foot (the lift and its image move in
   opposite directions, so the picture holds still while its window opens upwards), a gold edge leading; the edge fades
   once it reaches the top. Touch screens never show or fetch the second photograph. */
.cards { --cgap: clamp(10px, 1.1vw, 16px); padding: 0 var(--gut) clamp(80px, 9vw, 140px); }
.cards__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cgap); max-width: 1640px; margin: 0 auto; }
.card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; color: #fff; text-decoration: none; isolation: isolate; background: var(--navy); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease-out); }
.card--a .card__img { object-position: 74% 50%; }          /* phones: the buggy and the golfer beside it */
.card--b .card__img { object-position: 50% 62%; }          /* the golfer on the mat */
.card__lift { position: absolute; inset: 0; z-index: -2; overflow: hidden; transform: translate3d(0, 101%, 0); transition: transform .72s var(--ease-expo); }
.card__lift .card__img--hover { transform: translate3d(0, -101%, 0); transition: transform .72s var(--ease-expo); }
.card__lift::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 2px; background: var(--gold); }
.card__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .74) 0, rgba(0, 0, 0, .5) 32%, rgba(0, 0, 0, 0) 66%), linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 50%); }
.card__body {
  position: absolute; left: clamp(20px, 2.6vw, 40px); right: clamp(20px, 2.6vw, 40px); bottom: clamp(18px, 2.4vw, 36px);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.card__no { font: 600 13px/1 var(--font); letter-spacing: .16em; font-variant-numeric: tabular-nums lining-nums; margin-bottom: clamp(10px, 1.1vw, 14px); }
.card__title { font: 300 clamp(1.875rem, 1.45rem + 1.5vw, 2.875rem)/1.08 var(--font); letter-spacing: -.01em; text-wrap: balance; }
.card__rule {
  display: block; width: clamp(88px, 8vw, 124px); height: 9px; margin: 14px 0 12px;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 100% / 1px 5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 1px 9px no-repeat;
}
.card__sub { font: 400 15px/1.4 var(--font); text-wrap: balance; max-width: 34ch; }
.card--c .card__sub { max-width: 52ch; }
.card .lnk { margin-top: 6px; }
.card:focus-visible .card__img { transform: scale(1.03); }
.card:focus-visible .card__lift, .card:focus-visible .card__lift .card__img--hover { transform: none; }
.card:focus-visible .card__lift::before { opacity: 0; transition: opacity .3s ease .5s; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__img { transform: scale(1.03); }
  .card:hover .card__lift, .card:hover .card__lift .card__img--hover { transform: none; }
  .card:hover .card__lift::before { opacity: 0; transition: opacity .3s ease .5s; }
}
@media (hover: none) { .card__lift { display: none; } }
.card:focus-visible, .tile:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
/* Entrance: each card rises as it comes into view, the stepped one a beat after its neighbour */
html.js .cards .card.rv { transform: translate3d(0, 56px, 0); transition: opacity .9s ease var(--d, 0s), transform 1.2s var(--ease-out) var(--d, 0s); }
html.js .cards .card.rv.is-in { transform: none; }
.card--b { --d: .14s; }
@media (min-width: 700px) {
  .cards__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .card { aspect-ratio: auto; }
  .card--a { grid-column: 1 / span 7; height: min(50vw, 740px); }
  .card--a .card__img { object-position: 50% 50%; }
  .card--b { grid-column: 8 / span 5; height: min(40vw, 590px); }
  .card--c { grid-column: 3 / -1; height: min(42vw, 640px); }
}

/* ---------- Tiles: 4-up above 1100, 2-up from 600, a swipe strip on phones ---------- */
.tiles { padding-bottom: clamp(80px, 9vw, 140px); }
.tiles__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { position: relative; display: block; overflow: hidden; height: clamp(320px, 28vw, 420px); color: #fff; text-decoration: none; isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, 0) 55%); }
.tile__body { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.tile__title { font: 300 22px/1.1 var(--font); letter-spacing: .07em; text-transform: uppercase; }
.tile__sub { font: 600 11px/1.35 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
@media (min-width: 600px) and (max-width: 1100px) {
  .tiles__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { height: clamp(300px, 40vw, 440px); }
}
@media (max-width: 599px) {
  .tiles__row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding: 0 var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none;
  }
  .tiles__row::-webkit-scrollbar { display: none; }
  .tile { height: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; }
}

/* ---------- The course list: hover or focus dims the others, shows the circle, swaps the photo ---------- */
.acts { background: var(--white); padding: clamp(80px, 9vw, 140px) var(--gut); display: grid; gap: 48px; }
.acts__head p:not(.eyebrow) { max-width: 46ch; }
.acts__head .display { margin-bottom: 24px; }
.acts__imgs { display: none; }
.acts__list { border-top: 1px solid var(--line); align-self: start; }
.acts__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 0;
  border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none;
  font: 300 clamp(1.25rem, 1.05rem + .7vw, 1.625rem)/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase;
}
.acts__list a > span:first-child { transition: opacity .3s ease; }
.acts__list.has-active a:not(.is-active) > span:first-child { opacity: .62; }
.acts__list .circle { opacity: 0; transform: translate3d(-8px, 0, 0) scale(.8); transition: opacity .3s ease, transform .4s var(--ease-out); }
.acts__list a.is-active .circle { opacity: 1; transform: none; }
@media (hover: none) { .acts__list .circle { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .acts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 120px); max-width: 1440px; margin: 0 auto; }
  .acts__imgs { display: block; position: relative; margin-top: 40px; width: min(100%, 340px); aspect-ratio: 4 / 5; overflow: hidden; }
  .acts__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
  .acts__imgs img.is-on { opacity: 1; }
  .acts__list { margin-top: 30px; }
}

/* ---------- Scorecard by tee (A15): the FAQ's disclosure (gold plus circle) under the course rows, hairline table ---------- */
.acts__side { align-self: start; min-width: 0; }
.sc { border-bottom: 1px solid var(--line); }
.sc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 18px 0;
  list-style: none; cursor: pointer; color: var(--navy); font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.35 var(--font);
}
.sc__sum::-webkit-details-marker { display: none; }
.sc[open] .sc__sum .circle--plus i:last-child { transform: rotate(90deg) scaleX(0); }
.sc[open] .sc__body { animation: sc-in .5s var(--ease-out); }
@keyframes sc-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
.sc__body { padding: 0 0 28px; }
.sc__tees { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: -4px 0 8px; }
html:not(.js) .sc__tees { display: none; }                      /* the switch needs script; the card shows the 67 yards */
.sc__label { margin-right: 8px; font: 600 12px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--body); }
.sc__tee {
  position: relative; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.2 var(--font); letter-spacing: .12em; color: var(--sky);
}
.sc__tee::after {                                               /* the caps link's underline marks the chosen tee */
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 11px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.sc__tee[aria-pressed="true"] { color: var(--navy); }
.sc__tee[aria-pressed="true"]::after { transform: none; }
@media (hover: hover) { .sc__tee:hover { color: var(--navy); } }
.sc__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sc__table caption { caption-side: top; padding: 0 0 10px; text-align: left; font-size: 14px; color: var(--body); }
.sc__table th, .sc__table td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; }
.sc__table th:first-child { text-align: left; }
.sc__table thead th { border-top: 1px solid var(--line); font: 600 12px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.sc__table tbody th { color: var(--ink); }
.sc__tot th, .sc__tot td { color: var(--navy); font-weight: 600; }
.sc__table tfoot tr:last-child th, .sc__table tfoot tr:last-child td { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .sc[open] .sc__body { animation: none; } .sc__tee::after { transition: none; } }

/* ---------- Splits: text beside a tall photograph (Kube's Privatiser) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); }
.split__text { padding: clamp(72px, 8vw, 120px) var(--gut); }
.split__text > p:not(.eyebrow) { max-width: 52ch; }
.split__text .display { margin-bottom: 24px; }
.split__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.split:not(.split--flip) .split__media { aspect-ratio: 4 / 3; }
@media (min-width: 600px) and (max-width: 899px) { .split__media, .split:not(.split--flip) .split__media { aspect-ratio: 3 / 2; } }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
.rows { margin: 32px 0 0; border-top: 1px solid var(--line); }
.row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.row dt { font: 600 13px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.row dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; }
.items { margin-top: 32px; border-top: 1px solid var(--line); }
.items a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.items__t { font: 300 clamp(1.25rem, 1.1rem + .6vw, 1.5rem)/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.items__d { grid-column: 1; font-size: 16px; line-height: 1.5; color: var(--body); }
.items .circle { grid-column: 2; grid-row: 1 / 3; transition: transform .4s var(--ease-out); }
.items a:hover .circle, .items a:focus-visible .circle { transform: translate3d(4px, 0, 0); }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1440px; margin: 0 auto; }
  .split__text { padding: clamp(96px, 9vw, 140px) clamp(40px, 6vw, 112px); align-self: center; }
  .split__media, .split:not(.split--flip) .split__media { aspect-ratio: auto; min-height: 640px; }
  .split--flip .split__media { order: -1; }
}

/* ---------- Full-screen CTA on film ---------- */
.cta {
  position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate; color: #fff; text-align: center; background: #10221a;
}
.cta__media { position: absolute; inset: 0; z-index: -1; }
.cta__poster, .cta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__video { opacity: 0; transition: opacity .6s ease; }
.cta__video.is-playing { opacity: 1; }
.cta__shade {                                   /* the lake film's sky sits behind the copy: a centred shade on top of a light wash */
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 72% 56% at 50% 50%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 100%), rgba(0, 0, 0, .3);
}
.cta__text { width: min(100% - 2 * var(--gut), 900px); }
.cta__text .display { margin-bottom: 36px; }
.cta__note { max-width: 36em; margin: -14px auto 32px; text-wrap: balance; font: 400 clamp(1rem, .95rem + .25vw, 1.125rem)/1.5 var(--font); }   /* A8: the visitor line by Book */
.cta__ctas { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
/* A18: pick a day and a course, in the scorecard tee switch's language (thin caps, the underline marks the choice) */
.pick { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 28px; margin: -16px auto 24px; }
html:not(.js) .pick { display: none; }                          /* without script, Book is the plain club link */
.pick__day { display: flex; align-items: center; gap: 12px; }
.pick__label { font: 600 12px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.pick__date {
  height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .7); border-radius: 0; background: none;
  color: #fff; color-scheme: dark; font: 400 16px/1 var(--font); font-variant-numeric: tabular-nums;
}
.pick__holes { display: flex; gap: 0 12px; }
.pick__hole {
  position: relative; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.pick__hole::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 11px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.pick__hole[aria-pressed="true"] { color: #fff; }
.pick__hole[aria-pressed="true"]::after { transform: none; }
@media (hover: hover) { .pick__hole:hover { color: #fff; } }
.pick :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .pick__hole::after { transition: none; } }
@media (max-width: 599px) { .cta__ctas { flex-direction: column; } .cta__ctas .btn { width: 100%; } }

/* ---------- FAQ: on White ---------- */
.faq { background: var(--white); padding: clamp(80px, 9vw, 140px) var(--gut); }
.faq__list { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 68px; padding: 18px 0;
  border: 0; background: none; text-align: left; cursor: pointer; color: var(--navy); font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.35 var(--font);
}
.circle--plus { position: relative; }
.circle--plus i { position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform .4s var(--ease-out); }
.circle--plus i:last-child { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .circle--plus i:last-child { transform: rotate(90deg) scaleX(0); }
.faq__a > p {
  max-width: 68ch; padding: 0 56px 26px 0; margin: 0;
  opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .45s ease, transform .5s var(--ease-out);
}
.faq__a.is-open > p { opacity: 1; transform: none; }
.faq__a strong { color: var(--ink); font-weight: 600; }
/* A19: without script the answers cannot open, so every one is shown and every circle reads as open */
html:not(.js) .faq__a[hidden] { display: block; }
html:not(.js) .faq__a > p { opacity: 1; transform: none; }
html:not(.js) .faq__q .circle--plus i:last-child { transform: rotate(90deg) scaleX(0); }

/* ---------- Closing ---------- */
.close { padding: clamp(96px, 11vw, 168px) var(--gut); text-align: center; }
.close .display { margin-bottom: 32px; }

/* ---------- Footer: navy ---------- */
.ft { background: var(--navy); color: #fff; padding: clamp(64px, 7vw, 96px) var(--gut) 32px; font-size: 15px; }
.ft a { color: #fff; }
.ft a:hover { color: var(--sti-gold-light); }
.ft .btn--light { color: var(--navy); }
.ft .btn--light:hover { color: var(--navy); background: var(--sti-gold-pale); }   /* Pale Gold on navy only */
.ft :focus-visible { outline-color: var(--sti-gold-light); }
.ft__cols { display: grid; gap: 48px; max-width: 1440px; margin: 0 auto; text-align: center; }
.ft__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft__links a { display: flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; font: 600 12px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.ft__mid { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ft__crest { --sti-crest-plate: 112px; }
.ft__social { display: flex; gap: 8px; }
.ft__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-light); }
.ft__social svg { width: 20px; height: 20px; }
.ft__addr p { margin-bottom: 14px; line-height: 1.6; }
.ft__addr a { text-decoration: none; }
/* A6: 44 px tall hit areas for the phone and email lines (invisible, no layout change), split where they would overlap */
.ft__addr p a { position: relative; }
.ft__addr p a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(calc(-50% - 10px)); }
.ft__addr p a[href^="mailto:"]::after { transform: translateY(calc(-50% + 10px)); }
.ft__base { max-width: 1440px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--line-light); display: grid; gap: 20px; justify-items: center; text-align: center; }
.ft__kicker { margin: 0; font: 600 12px/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--sti-gold-light); }
.ft__pill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; padding: 8px 8px 8px 24px; border: 1px solid var(--line-light); border-radius: 999px; }
.ft__pill .btn { border-radius: 999px; }
.ft__copy { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .8); }
@media (max-width: 599px) {
  .ft__pill { border-radius: 16px; padding: 16px; }
  .ft__pill-text { font-size: 14px; }
  .ft__pill .btn { width: 100%; }
}
@media (min-width: 900px) {
  .ft__cols { grid-template-columns: 1fr auto 1fr; align-items: start; text-align: left; }
  .ft__links { grid-template-columns: repeat(2, max-content); column-gap: 40px; }
  .ft__links a { justify-content: flex-start; }
  .ft__addr { text-align: right; }
}

/* ---------- Reduced motion: a calm, complete page ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transition: none; }
  .menu__panel, .menu.is-closing .menu__panel { transform: none; opacity: 0; transition: opacity .2s ease; }
  .menu.is-open .menu__panel { opacity: 1; }
  .menu__list li, .menu__small, .menu__foot, .menu__media > img { transform: none; transition: opacity .2s ease; transition-delay: 0s; }
  .card__img, .card__lift, .tile img, .lnk::after { transition: none; animation: none !important; }
  .card:hover .card__img, .tile:hover img { transform: none; }
  html.js .cards .card.rv { transform: none; transition: none; }
}