/* St Ives (Hunts) Golf Club, after Lingers (https://www.lingers.it/en).
 * The reference's four decisions, in the St Ives brand: one quiet ground (white and Warm Stone), one ink (Club Navy for
 * headings, Body Grey for copy), radius zero with hairline 1 px borders and 3 px rules, and two speeds only: slow
 * reveals (2 s) and quick touches (.25 s), with the menu at .5 s. Proxima Nova only (kit pdh2nxp); Light for display.
 * Transform and opacity are the only things that animate. No scroll library: the reference scrolls natively. */

:root {
  --navy: var(--sti-navy);
  --gold: var(--sti-gold);
  --sky: var(--sti-sky);
  --stone: var(--sti-stone);
  --body: var(--sti-body);
  --ink: var(--sti-ink);
  --rule: var(--sti-rule);
  --font: var(--sti-font);
  --t: .25s;
  --reveal: 2s;
  --pad: 40px;
  --bar-h: 88px;
  --mobar-h: 56px;
  --space: 128px;
  --space-s: 88px;
  --gap-tp: 128px;
}
@media (max-width: 1366px) { :root { --space: 104px; --space-s: 72px; --gap-tp: 96px; } }
@media (max-width: 1099px) { :root { --pad: 32px; --bar-h: 76px; --space: 88px; --space-s: 64px; --gap-tp: 56px; } }
@media (max-width: 767px) { :root { --pad: 20px; --bar-h: 64px; --space: 72px; --space-s: 52px; --gap-tp: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); background: #fff; }
html.locked, html.locked body { overflow: hidden; }
body { margin: 0; font: 400 18px/1.6 var(--font); color: var(--body); background: #fff; overflow-x: clip; -webkit-font-smoothing: antialiased; }
@media (max-width: 1099px) { body { padding-bottom: calc(var(--mobar-h) + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 767px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
h1, h2, h3, blockquote { text-wrap: balance; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
strong { font-weight: 600; color: var(--ink); }
svg { width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--navy); color: #fff; transform: translateY(-200%); }
.skip:focus { transform: none; }
.sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 10px; pointer-events: none; }

/* ---------- type ---------- */
.eyebrow { font: 600 13px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 18px; }
.eyebrow--lg { font-size: 14px; letter-spacing: .14em; text-align: center; margin-bottom: 28px; }
.h-display { font: 300 44px/1.12 var(--font); letter-spacing: .005em; color: var(--navy); }
.h-section { font: 300 40px/1.15 var(--font); color: var(--navy); }
.h-xl { font: 300 72px/1.02 var(--font); letter-spacing: -.005em; color: var(--navy); }
.lead { font: 300 21px/1.55 var(--font); color: var(--body); }
@media (max-width: 1366px) { .h-display { font-size: 38px; } .h-xl { font-size: 60px; } .h-section { font-size: 36px; } }
@media (max-width: 1099px) { .h-display { font-size: 34px; } .h-xl { font-size: 48px; } .h-section { font-size: 32px; } }
@media (max-width: 767px) { .h-display { font-size: 30px; } .h-xl { font-size: 38px; } .h-section { font-size: 28px; } .lead { font-size: 18px; } }
.copy p + p { margin-top: 1em; }
.copy a, .tlink, .teaser__foot a, .slide__price a { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t) ease; }
.copy a:hover, .tlink:hover, .teaser__foot a:hover, .slide__price a:hover { color: var(--navy); }
/* Links inside a sentence: 12 px of vertical padding gives a 44 px tall hit area; on an inline box it changes nothing in
   the line layout, so nothing moves. */
.copy a, .teaser__foot a, .slide__price a { padding: 12px 0; }

/* ---------- buttons: hairline box, a divided arrow cell, a fill on hover; nothing moves ---------- */
.btn { display: inline-flex; align-items: stretch; min-height: 48px; border: 1px solid var(--navy); color: var(--navy); background: transparent; font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; transition: background-color var(--t) ease, color var(--t) ease, border-color var(--t) ease; }
.btn span { display: flex; align-items: center; padding: 0 20px; }
.btn i { display: grid; place-items: center; width: 48px; border-left: 1px solid currentColor; }
.btn:hover { background: var(--stone); }
.btn--solid { background: var(--navy); color: #fff; }
.btn--solid i { border-left-color: rgba(255, 255, 255, .4); }
.btn--solid:hover { background: var(--sky); border-color: var(--sky); }
.btn--pale { background: var(--sti-gold-pale); border-color: var(--sti-gold-pale); color: var(--navy); }
.btn--pale:hover { background: #fff; border-color: #fff; }
.btn--line { border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--line:hover { background: #fff; color: var(--navy); }
.btn--line:focus-visible, .btn--pale:focus-visible, .ft a:focus-visible { outline-color: var(--sti-gold-light); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn-row--center { justify-content: center; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(1312px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: calc(980px + 2 * var(--pad)); }
.wrap--wide { max-width: calc(1180px + 2 * var(--pad)); }
.section { padding: var(--space) 0; position: relative; }
.section--stone { background: var(--stone); }
.section--quote { padding: var(--space-s) 0; }

/* Photographs: the reference's hover veil (Warm Stone at 45%), never a zoom. */
.photo { position: relative; overflow: hidden; background: var(--stone); }
.photo > img { width: 100%; height: 100%; object-fit: cover; }
/* Gentle photo parallax (James, 24 Oct): the photo drifts slower than its frame, 3.5% of the frame height either way.
   CSS scroll-driven (a view timeline on the frame: the frame clips with overflow hidden, which makes it its own
   scroller, so the image cannot use view() itself), so no script and no layout reads in any scroll path. Photos inside a sideways
   strip (cards on phones, membership, gallery) or the trio sections (overflow hidden for the deko name) follow that
   box's own timeline, as it is their nearest scroller.
   Browsers without view timelines, reduced motion and calm keep the still photograph. Not on the hero or the
   clubhouse lettering (copy over the photograph), the menu or the crest. */
@keyframes px { from { translate: 0 -3.5%; } to { translate: 0 3.5%; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not(.calm) .px { scale: 1.08; animation: px linear both; animation-timeline: --px-frame; animation-range: cover; }
    html:not(.calm) .photo:has(> .px) { view-timeline: --px-frame block; }
    html:not(.calm) .trio, html:not(.calm) .boxes__row, html:not(.calm) .teaser__track, html:not(.calm) .gallery__track { view-timeline: --px-row block; }
    html:not(.calm) :is(.trio, .boxes__row, .teaser__track, .gallery__track) .px { animation-timeline: --px-row; }
  }
}
.photo::after { content: ""; position: absolute; inset: 0; background: rgba(244, 241, 240, .45); opacity: 0; transition: opacity var(--t) ease; pointer-events: none; }
a:hover .photo::after, a:focus-visible .photo::after, .gallery__item a:hover::after { opacity: 1; }

/* Captions over a photograph: bottom centred, white, on a shade under the words only. */
.cap { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 120px 24px 48px; text-align: center; color: #fff; background: linear-gradient(to top, rgba(34, 34, 34, .62), rgba(34, 34, 34, .38) 45%, rgba(34, 34, 34, 0)); z-index: 1; }
/* The range photograph is the brightest behind its caption: a deeper shade there keeps the title at 4.5:1. */
.cap--deep { background: linear-gradient(to top, rgba(34, 34, 34, .7), rgba(34, 34, 34, .5) 50%, rgba(34, 34, 34, 0)); }
.cap__title { font: 300 32px/1.15 var(--font); }
.cap__sub { font: 400 17px/1.4 var(--font); letter-spacing: .02em; }
.sq { display: grid; place-items: center; width: 48px; height: 48px; margin-top: 14px; border: 1px solid rgba(255, 255, 255, .85); color: #fff; transition: background-color var(--t) ease, color var(--t) ease; }
.sq:hover { background: #fff; color: var(--navy); }
.sq:focus-visible { outline-color: #fff; }
@media (max-width: 767px) { .cap { padding: 96px 16px 28px; } .cap__title { font-size: 26px; } .cap__sub { font-size: 15px; } }

/* Reveals: opacity (and a 50 px rise on the trio copy and the slides), 2 s, once. Only with script, never calm. The
   reference eases with plain `ease`; an ease-out puts four fifths of the opacity in the first 0.7 s, so a reader who
   scrolls at a normal pace never meets a page of half-faded copy (the first walkthrough did). */
.js:not(.calm) .fx { opacity: 0; transition: opacity var(--reveal) cubic-bezier(.16, .84, .3, 1), transform var(--reveal) cubic-bezier(.16, .84, .3, 1); }
.js:not(.calm) .fx--up, .js:not(.calm) .trio__portrait, .js:not(.calm) .slide { transform: translateY(50px); }
.js:not(.calm) .fx.in { opacity: 1; transform: none; }
@media (max-width: 767px) { .js:not(.calm) .fx--up, .js:not(.calm) .trio__portrait, .js:not(.calm) .slide { transform: translateY(25px); } }

/* ---------- the bar ---------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--bar-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 var(--pad); color: #fff; }
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--rule); opacity: 0; transition: opacity var(--t) ease; }
.bar.is-solid, .menu-open .bar { color: var(--navy); }
.bar.is-solid::before, .menu-open .bar::before { opacity: 1; }
.bar__menu { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; padding: 0 6px 0 0; font: 600 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.burger { position: relative; width: 26px; height: 16px; }
.burger i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transform-origin: left center; transition: transform var(--t) ease, opacity var(--t) ease; }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7px; } .burger i:nth-child(3) { top: 14px; }
.bar__menu:hover .burger i:nth-child(2) { transform: scaleX(.7); }
.menu-open .burger i:nth-child(1) { transform: translate(4px, -1px) rotate(45deg) scaleX(1.02); }
.menu-open .burger i:nth-child(2) { opacity: 0; transform: none; }
.menu-open .burger i:nth-child(3) { transform: translate(4px, 1px) rotate(-45deg) scaleX(1.02); }
.bar__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; color: var(--navy); opacity: 0; visibility: hidden; transition: opacity var(--t) ease, visibility 0s linear var(--t); }
.bar.is-solid .bar__brand, .menu-open .bar__brand { opacity: 1; visibility: visible; transition: opacity var(--t) ease, visibility 0s; }
.bar__name { font: 300 30px/1 var(--font); letter-spacing: .01em; }
.bar__sub { font: 600 10px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; }
.bar__right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.bar__phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; justify-content: center; font: 600 13px/1 var(--font); letter-spacing: .08em; }
.bar__book { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid currentColor; font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; transition: background-color var(--t) ease, color var(--t) ease; }
.bar__book:hover { background: #fff; color: var(--navy); }
.bar.is-solid .bar__book:hover, .menu-open .bar__book:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.bar:not(.is-solid) :focus-visible { outline-color: #fff; }
.menu-open .bar :focus-visible { outline-color: var(--sky); }
@media (max-width: 1099px) { .bar__book { display: none; } .bar__phone span { display: none; } .bar__name { font-size: 26px; } }
@media (max-width: 767px) { .bar__name { font-size: 22px; } .bar__sub { font-size: 9px; margin-top: 5px; } .bar__menu-label { font-size: 12px; } }

/* ---------- menu: slides down from the top in .5 s ---------- */
.menu { position: fixed; inset: 0; z-index: 78; overflow-y: auto; overscroll-behavior: contain; transform: translateY(-100%); transition: transform .5s ease; background: #fff; }
.menu.is-open { transform: none; }
.menu__bg { position: absolute; inset: 0; z-index: 0; }
.menu__bg img { width: 100%; height: 100%; object-fit: cover; }
.menu__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .92); }
.menu__inner { position: relative; z-index: 1; width: 100%; max-width: calc(1312px + 2 * var(--pad)); min-height: 100%; margin: 0 auto; padding: calc(var(--bar-h) + 72px) var(--pad) 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.menu__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.menu__title { font: 300 46px/1.05 var(--font); color: var(--navy); margin-bottom: 28px; }
.menu__toggle { display: none; }
.menu__list li a { display: inline-flex; align-items: center; min-height: 44px; font: 400 21px/1.2 var(--font); color: var(--body); transition: color var(--t) ease; }
.menu__list li a:hover { color: var(--sky); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; }
.menu__contact { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; color: var(--body); }
.menu__contact a { color: var(--navy); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1099px) { .menu__title { font-size: 34px; } .menu__list li a { font-size: 19px; } .menu__inner { padding-top: calc(var(--bar-h) + 48px); } }
@media (max-width: 767px) {
  .menu__inner { padding: calc(var(--bar-h) + 28px) var(--pad) 32px; gap: 36px; justify-content: flex-start; }
  .menu__groups { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .menu__title { margin: 0; font-size: 32px; }
  .js .menu__toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; min-width: 200px; font: inherit; color: inherit; }
  .js .menu__title-text { display: none; }
  .js .menu__list { display: none; padding: 4px 0 14px; }
  .js .menu__group.is-open .menu__list { display: block; animation: menuIn .5s ease both; }
  .menu__list li a { font-size: 18px; justify-content: center; min-width: 200px; }
  .menu__foot { flex-direction: column; align-items: stretch; }
  .menu__foot .btn { justify-content: space-between; }
  .menu__contact { margin: 8px 0 0; align-items: center; text-align: center; }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- hero: full screen, the course film (poster first, the film fades in over it once it plays) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; background: var(--navy); }
.hero__film, .hero__shade { position: absolute; inset: 0; }
.hero__poster img, .hero__still, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1.2s ease; }
.hero__video.is-playing { opacity: 1; }
/* Only what the type needs: a band under the bar (the sunrise is brightest top right, where Book a tee time sits) and
   one under the name. No wash over the film. */
.hero__shade { background:
  linear-gradient(to bottom, rgba(34, 34, 34, .8), rgba(34, 34, 34, .48) 13%, rgba(34, 34, 34, 0) 32%),
  linear-gradient(to top, rgba(34, 34, 34, .6), rgba(34, 34, 34, .26) 36%, rgba(34, 34, 34, 0) 58%); }
.hero__crest { position: absolute; left: 50%; top: 22px; --sti-crest-plate: 116px; transform: translateX(-50%); z-index: 2; box-shadow: none; }
.hero__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--pad) 216px; }
.hero__label { font: 600 13px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.hero__title { max-width: 15em; font: 300 58px/1.08 var(--font); letter-spacing: .005em; }
/* The copy is in place from the first frame: a 0.8 s fade that starts at once, with or without script (the September build's
   waited for a first mousemove, with a 2.4 s fallback and a 2 s fade: blank for up to 4.4 s). */
.hero__copy { animation: heroIn .8s ease both; }
.seen .hero__copy, .calm .hero__copy { animation: none; }
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
.hero__pause { position: absolute; right: calc(var(--pad) + 72px); bottom: 40px;   /* + 72: clear of the AI Concierge launcher */
  z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .8); color: #fff; transition: background-color var(--t) ease, color var(--t) ease; }
.hero__pause:hover { background: #fff; color: var(--navy); }
.hero__pause:focus-visible { outline-color: #fff; }
.hero__pause .is-play, .hero__pause[aria-pressed="true"] .is-pause { display: none; }
.hero__pause[aria-pressed="true"] .is-play { display: block; }
html:not(.js) .hero__pause, .calm .hero__pause { display: none; }
@media (max-width: 1366px) { .hero__title { font-size: 50px; } }
@media (max-width: 1099px) {
  .hero { height: calc(100svh - var(--mobar-h)); min-height: 520px; }
  .hero__copy { padding-bottom: 64px; }
  .hero__title { font-size: 50px; }
  .hero__pause { bottom: 24px; }
}
@media (max-width: 767px) {
  .hero { min-height: 560px; }
  .hero__crest { --sti-crest-plate: 108px; top: calc(var(--bar-h) - 6px); }
  .hero__copy { padding: 0 var(--pad) 84px; }
  .hero__label { font-size: 12px; letter-spacing: .12em; }
  .hero__title { font-size: 34px; }
  .hero__pause { right: 12px; bottom: 16px; }
}

/* ---------- the persistent booking card (desktop) and bar (tablets and phones) ---------- */
.quick { position: fixed; left: var(--pad); bottom: 64px; z-index: 60; display: flex; align-items: stretch; background: #fff; color: var(--navy); transition: transform var(--t) ease, opacity var(--t) ease, visibility 0s; }
.quick.is-scrolled { transform: translateY(28px); }
.quick.is-away, .quick.is-tucked, .quick.is-aside { opacity: 0; visibility: hidden; transform: translateY(56px); transition: transform var(--t) ease, opacity var(--t) ease, visibility 0s linear var(--t); }
.quick__cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 116px; padding: 16px 18px 12px; text-align: center; }
.quick__num { font: 300 34px/1 var(--font); }
.quick__lbl { font: 600 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--body); margin-top: 6px; max-width: 110px; }
.quick__div { width: 1px; margin: 16px 0; background: var(--rule); }
.quick__btns { display: flex; flex-direction: column; min-width: 184px; }
.quick__btns a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; transition: background-color var(--t) ease, color var(--t) ease; }
.quick__book { background: var(--navy); color: #fff; }
.quick__book:hover { background: var(--sky); }
.quick__member { background: var(--stone); color: var(--navy); }
.quick__member:hover { background: var(--navy); color: #fff; }
.mobar { display: none; }
@media (max-width: 1099px) {
  .quick { display: none; }
  .mobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex; height: calc(var(--mobar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--rule); }
  .mobar a { display: flex; align-items: center; justify-content: center; min-height: 44px; font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
  .mobar > * { min-width: 0; }
  .mobar__member { flex: 1; background: var(--stone); color: var(--navy); }
  .mobar__book { flex: 1.25; background: var(--navy); color: #fff; }
  .mobar__call { width: var(--mobar-h); color: var(--navy); background: #fff; }
  .mobar__call svg { width: 20px; height: 20px; }
  /* The right end of the bar is left clear for the St Ives AI Concierge launcher (56 px, 16 to 24 px from the corner) */
  .mobar { padding-right: 88px; }
  .mobar a { letter-spacing: .06em; }
  .hero__pause { left: 12px; right: auto; }   /* the hero's pause moves to the left, clear of the launcher above the bar */
}
@media (max-width: 379px) { .mobar a { font-size: 12px; letter-spacing: .06em; } }

/* ---------- TextPic: text beside one portrait photograph ---------- */
.textpic__row { display: flex; align-items: center; gap: var(--gap-tp); }
.textpic__text { flex: 1 1 0; max-width: 560px; }
.textpic__text .h-display { margin-bottom: 28px; }
.textpic__photo { flex: 0 0 48%; aspect-ratio: 7 / 9; }
.textpic--reflect .textpic__row { flex-direction: row-reverse; }
.crop { position: relative; }
.js .crop.is-cropped .crop__body { max-height: 9.6em; overflow: hidden; }
.js .crop.is-cropped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 44px; height: 4.8em; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); pointer-events: none; }
.crop__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--sky); text-decoration: underline; text-underline-offset: 4px; }
.crop__more:hover { color: var(--navy); }
.crop.is-open .crop__body > p:last-child { animation: menuIn .5s ease both; }
.cap--big { padding-bottom: 56px; gap: 0; background: linear-gradient(to top, rgba(34, 34, 34, .66), rgba(34, 34, 34, .4) 50%, rgba(34, 34, 34, 0)); }
.cap__big1 { font: 300 104px/.86 var(--font); letter-spacing: .02em; }
.cap__big2 { font: 300 46px/1.2 var(--font); letter-spacing: .02em; }
@media (max-width: 1366px) { .cap__big1 { font-size: 88px; } .cap__big2 { font-size: 40px; } }
@media (max-width: 899px) {
  .textpic__row, .textpic--reflect .textpic__row { flex-direction: column; align-items: stretch; }
  .textpic--reflect .textpic__row { flex-direction: column-reverse; }
  .textpic__text { max-width: 640px; }
  .textpic__photo { flex: none; width: 100%; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) { .cap__big1 { font-size: 64px; } .cap__big2 { font-size: 28px; } .cap--big { padding-bottom: 32px; } .textpic__photo { aspect-ratio: 3 / 4; } }

/* ---------- TextPicV2: a portrait and a pair of landscapes, the giant name behind ---------- */
.trio { overflow: hidden; }
/* The name reads the way the reference's does (James, 24 Oct: the pale gold at 16% on Warm Stone was hard to read): one
   ink a clear step darker than the ground (Club Navy at 22%, 1.51:1 on Warm Stone, where the gold was 1.19:1; lingers.it is 1.22:1 in a wider serif that spans the screen),
   near the full width, and the photographs overlap only the foot of the letters. Shown at every width, as there. */
.deko { position: relative; z-index: 0; margin: -1vw 0 -4.5vw; text-align: center; font: 300 29vw/.8 var(--font); letter-spacing: 0; white-space: nowrap; color: rgba(13, 48, 111, .22); pointer-events: none; user-select: none; }
@media (max-width: 767px) { .deko { margin: -8px 0 -2px; color: rgba(13, 48, 111, .26); } }
.trio .wrap { position: relative; z-index: 1; }
.trio__media { display: flex; gap: 32px; }
.trio--reflect .trio__media { flex-direction: row-reverse; }
.trio__portrait { flex: 1 1 0; aspect-ratio: 3 / 4; }
.trio__pair { flex: 1 1 0; display: flex; flex-direction: column; gap: 32px; }
.trio__pair .photo { flex: 1 1 0; min-height: 0; }
.trio__text { max-width: 840px; margin: 88px auto 0; text-align: center; }
.trio__text .h-section { margin-bottom: 24px; }
@media (max-width: 1099px) { .trio__media, .trio__pair { gap: 16px; } .trio__text { margin-top: 56px; } }
@media (max-width: 767px) { .trio__pair { display: none; } .trio__portrait { flex: none; width: 100%; } .trio__text { margin-top: 40px; text-align: left; } .trio .btn-row--center { justify-content: flex-start; } }

/* Pick a day (A18) and Before you come (A16), in the visitors block: hairline boxes, radius zero, navy for the chosen
   course, the page's plus icon on each answer. Left-aligned in a centred column so the answers read as a list. */
.pick { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; max-width: 640px; margin: 40px auto 0; text-align: left; }
.pick__lbl { flex-basis: 100%; font: 600 12px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); text-align: center; }
.pick__box { flex: 1 1 340px; display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr; border: 1px solid var(--navy); background: #fff; }
.pick__date { min-width: 0; min-height: 46px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; font: 400 16px/1 var(--font); color: var(--navy); }
.pick__holes { display: grid; grid-template-columns: 1fr 1fr; }
.pick__hole { min-height: 46px; border-left: 1px solid var(--navy); font: 600 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); transition: background-color var(--t) ease, color var(--t) ease; }
.pick__hole[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pick__hole[aria-pressed="false"]:hover { background: var(--stone); }
.pick__go { flex: none; }
html:not(.js) .pick { display: none; }
.faq { max-width: 640px; margin: 56px auto 0; text-align: left; }
.faq__head { margin-bottom: 14px; font: 600 12px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); text-align: center; }
.faq__item { border-top: 1px solid rgba(13, 48, 111, .18); }
.faq__item:last-child { border-bottom: 1px solid rgba(13, 48, 111, .18); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; cursor: pointer; list-style: none; font: 400 18px/1.4 var(--font); color: var(--navy); transition: color var(--t) ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: none; width: 12px; height: 12px; color: var(--sky); transition: transform var(--t) ease; }
.faq__item[open] summary svg { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--sky); }
.faq__item p { padding: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--body); }
.faq__item a { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: 12px 0; transition: color var(--t) ease; }
.faq__item a:hover { color: var(--navy); }
.nobr { white-space: nowrap; }
@media (max-width: 767px) { .pick, .pick__lbl, .faq__head { justify-content: flex-start; text-align: left; } .pick__box { flex-basis: 100%; } .pick__go { width: 100%; justify-content: space-between; } .faq { margin-top: 44px; } .faq__item summary { font-size: 17px; } }

/* ---------- LinkBoxes: four tall cards ---------- */
.boxes__title { text-align: center; margin-bottom: 72px; }
.boxes__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.box a { display: flex; flex-direction: column; height: 100%; }
.box__img { aspect-ratio: 3 / 4; }
.box__rule { display: block; height: 3px; margin-top: 18px; background: var(--rule); transition: background-color var(--t) ease; }
.box a:hover .box__rule, .box a:focus-visible .box__rule { background: var(--gold); }
.box__title { margin-top: 18px; font: 600 14px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.box__text { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.boxes__copy { max-width: 760px; margin: 72px auto 0; text-align: center; }
.boxes__copy .btn-row { margin-top: 28px; }
@media (max-width: 1099px) { .boxes__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } .boxes__title { margin-bottom: 48px; } }
@media (max-width: 767px) {
  .boxes__title { text-align: left; margin-bottom: 32px; }
  .boxes__row { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 8px; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .boxes__row::-webkit-scrollbar { display: none; }
  .box { flex: 0 0 74%; scroll-snap-align: start; }
  .boxes__copy { text-align: left; margin-top: 44px; }
  .boxes__copy .btn-row--center { justify-content: flex-start; }
}

/* ---------- tees: the reference's "Recommended" tabs ---------- */
.tees { text-align: center; }
.tees__panels { display: grid; }
.tees__panel { grid-area: 1 / 1; }
.tees__panel.is-on { animation: menuIn .5s ease both; }
.tees__big { font: 300 120px/1 var(--font); letter-spacing: -.01em; color: var(--navy); }
.tees__big span { font-size: .3em; letter-spacing: .02em; }
.tees__line { margin-top: 18px; font-size: 18px; }
.tees__tabs { display: flex; justify-content: center; gap: 12px; margin-top: 44px; }
.tees__tab { position: relative; min-width: 72px; min-height: 56px; padding: 0 14px; border: 1px solid rgba(13, 48, 111, .28); color: var(--navy); font: 300 28px/1 var(--font); transition: background-color var(--t) ease, color var(--t) ease, border-color var(--t) ease; }
.tees__tab:hover { border-color: var(--navy); }
.tees__tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 1099px) { .tees__big { font-size: 96px; } }
/* The scorecard: a disclosure where the scorecard link sat, a hairline table under the 3 px rule; the tee tabs above
   set its yardages. */
.sc { margin-top: 32px; }
.sc__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.sc__toggle::-webkit-details-marker { display: none; }
.sc__toggle svg { width: 12px; height: 12px; transition: transform var(--t) ease; }
.sc[open] .sc__toggle svg { transform: rotate(45deg); }
.sc__table { width: 100%; max-width: 560px; margin: 24px auto 0; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.sc__table caption { padding-bottom: 14px; font: 600 12px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.sc__table thead th { padding: 0 12px 10px; border-bottom: 3px solid var(--rule); font: 600 12px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
.sc__table tbody th, .sc__table td { padding: 9px 12px; border-bottom: 1px solid var(--rule); text-align: center; }
.sc__table tbody th { font-weight: 300; color: var(--navy); }
.sc__table .sc__tot th, .sc__table .sc__tot td { font-weight: 600; color: var(--navy); border-bottom-color: rgba(13, 48, 111, .28); }
.sc__more { margin-top: 20px; }
.sc__more .tlink { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 767px) { .tees__big { font-size: 64px; } .tees__line { font-size: 16px; } .tees__tabs { gap: 8px; } .tees__tab { min-width: 60px; font-size: 24px; } }

/* ---------- quotes: one line between two 3 px rules ---------- */
.quote figure { text-align: center; }
.quote__row { display: flex; align-items: center; gap: 72px; }
.quote__rule { flex: 1 1 0; max-width: 170px; height: 3px; background: var(--rule); }
.quote blockquote { flex: 0 1 auto; max-width: 760px; font: 300 32px/1.3 var(--font); color: var(--navy); }
.quote figcaption { margin-top: 20px; font: 600 12px/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
@media (max-width: 1099px) { .quote__row { gap: 36px; } .quote blockquote { font-size: 28px; } .quote__rule { max-width: 90px; } }
@media (max-width: 767px) { .quote__row { gap: 18px; } .quote blockquote { font-size: 23px; } .quote__rule { max-width: 36px; } }

/* ---------- membership: full-bleed slider, the next slide bleeding off the edge ---------- */
/* Every sideways strip sets overflow-y: hidden: with overflow-x: auto alone, overflow-y computes to auto, and a strip a
   few pixels taller inside than out catches the wheel and the trackpad, so the page stops scrolling over it. */
.teaser { padding-bottom: calc(var(--space) - 24px); }
.teaser__head { text-align: center; }
.teaser__head .lead { max-width: 760px; margin: 20px auto 0; }
.bars { display: flex; gap: 10px; }
/* Previous and next either side of the bars, and the count: the strip says where it is and how to move it. The arrows
   go quiet at either end. Without script the strip still scrolls sideways and the controls are not shown. */
.teaser__nav { display: flex; align-items: center; gap: 16px; width: min(840px, 100%); margin: 40px auto 0; }
.teaser__nav .bars { flex: 1; min-width: 0; }
.teaser__arrow { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--navy); color: var(--navy); transition: background-color var(--t) ease, color var(--t) ease, border-color var(--t) ease; }
.teaser__arrow:hover:not([aria-disabled="true"]) { background: var(--navy); color: #fff; }
.teaser__arrow[aria-disabled="true"] { border-color: rgba(13, 48, 111, .28); color: rgba(13, 48, 111, .28); cursor: default; }
.teaser__count { flex: none; min-width: 52px; font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); text-align: center; font-variant-numeric: tabular-nums; }
html:not(.js) .teaser__arrow, html:not(.js) .teaser__count { display: none; }
@media (max-width: 767px) { .teaser__nav { gap: 10px; } .teaser__arrow { width: 44px; height: 44px; } }
.bars button { position: relative; flex: 1; height: 44px; }
.bars button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(13, 48, 111, .18); transition: background-color var(--t) ease; }
.bars button[aria-current="true"]::before { background: var(--navy); }
.bars button:hover::before { background: var(--gold); }
.teaser__track { display: flex; gap: 72px; margin-top: 48px; padding: 0 calc((100vw - min(720px, 50vw)) / 2) 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.teaser__track::-webkit-scrollbar { display: none; }
.teaser__track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.teaser__track.dragging a { pointer-events: none; }
.teaser__track:focus-visible { outline-offset: -3px; }
.slide { flex: 0 0 min(720px, 50vw); scroll-snap-align: center; display: flex; flex-direction: column; }
.slide__img { aspect-ratio: 4 / 3; }
.slide__img img { -webkit-user-drag: none; }
.slide__img::before { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, rgba(34, 34, 34, .62), rgba(34, 34, 34, 0)); z-index: 1; }
.slide__meta { position: absolute; right: 24px; bottom: 20px; z-index: 2; font: 400 18px/1.3 var(--font); color: #fff; text-align: right; }
.slide__tab { position: absolute; top: 24px; right: 0; z-index: 2; padding: 14px 10px; background: #fff; color: var(--navy); font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; }
.slide__body { flex: 1; background: #fff; padding: 44px 48px 48px; }
.slide__title { font: 300 32px/1.15 var(--font); color: var(--navy); }
.slide__price { margin-top: 10px; font-weight: 600; color: var(--ink); }
.ticks { margin-top: 18px; }
.ticks li { position: relative; padding-left: 26px; margin-top: 6px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--gold); }
.slide .btn-row { margin-top: 28px; }
.teaser__foot { margin-top: 24px; text-align: center; font-size: 16px; }
@media (max-width: 1099px) { .teaser__track { gap: 32px; padding: 0 calc((100vw - 64vw) / 2) 24px; } .slide { flex-basis: 64vw; } .slide__body { padding: 32px; } }
@media (max-width: 767px) { .teaser__head { text-align: left; } .teaser__head .lead { margin-left: 0; } .teaser__track { gap: 14px; padding: 0 var(--pad) 20px; scroll-padding: 0 var(--pad); } .slide { flex-basis: 86vw; scroll-snap-align: start; } .slide__body { padding: 26px 22px 28px; } .slide__title { font-size: 28px; } .slide__meta { font-size: 15px; right: 16px; bottom: 14px; left: 16px; } .teaser__foot { text-align: left; } .slide .btn { width: 100%; justify-content: space-between; } }

/* ---------- gallery: two up, autoplay with a pause button ---------- */
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gallery__ctrl { display: flex; align-items: center; gap: 20px; flex: 0 1 520px; }
@media (max-width: 1099px) { .gallery__ctrl { flex-basis: 340px; } }
.bars--short { flex: 1; align-items: center; height: 44px; }
.bars--short span { flex: 1; height: 3px; background: rgba(13, 48, 111, .18); transition: background-color var(--t) ease; }
.bars--short span.is-on { background: var(--navy); }
.gallery__pause { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--navy); color: var(--navy); transition: background-color var(--t) ease, color var(--t) ease; }
.gallery__pause:hover { background: var(--navy); color: #fff; }
.gallery__pause .is-play, .gallery__pause[aria-pressed="true"] .is-pause { display: none; }
.gallery__pause[aria-pressed="true"] .is-play { display: block; }
.calm .gallery__pause, html:not(.js) .gallery__pause, html:not(.js) .bars--short { display: none; }
.gallery__track { display: flex; gap: 40px; margin-top: 48px; padding: 0 var(--pad); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; cursor: grab; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.gallery__item { flex: 0 0 calc((100% - 2 * var(--pad) - 40px) / 2); scroll-snap-align: start; }
.gallery__item a { position: relative; display: block; aspect-ratio: 7 / 5; overflow: hidden; background: #fff; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.gallery__item a::after { content: ""; position: absolute; inset: 0; background: rgba(244, 241, 240, .45); opacity: 0; transition: opacity var(--t) ease; }
@media (max-width: 1099px) { .gallery__track { gap: 20px; } .gallery__item { flex-basis: calc((100% - 2 * var(--pad) - 20px) / 2); } }
@media (max-width: 767px) { .gallery__head { flex-direction: column; align-items: stretch; } .gallery__ctrl { flex: none; } .gallery__track { gap: 12px; margin-top: 28px; } .gallery__item { flex-basis: 86%; } }

/* ---------- viewer ---------- */
.lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(34, 34, 34, .94); opacity: 0; transition: opacity var(--t) ease; }
.lb.is-open { opacity: 1; }
.lb__fig { max-width: min(1400px, 92vw); text-align: center; color: #fff; }
.lb__img { max-height: 80vh; width: auto; margin: 0 auto; }
.lb__cap { margin-top: 14px; font-size: 15px; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .6); color: #fff; transition: background-color var(--t) ease, color var(--t) ease; }
.lb__btn:hover { background: #fff; color: var(--ink); }
.lb__btn:focus-visible { outline-color: #fff; }
.lb__close { top: 20px; right: 20px; }
.lb__prev { left: 20px; top: 50%; margin-top: -26px; }
.lb__next { right: 20px; top: 50%; margin-top: -26px; }
@media (max-width: 767px) { .lb__prev, .lb__next { top: auto; bottom: 24px; margin: 0; } .lb__prev { left: calc(50% - 60px); } .lb__next { right: calc(50% - 60px); } }

/* ---------- footer: navy, the crest on its Warm Stone plate ---------- */
.ft { background: var(--navy); color: #fff; padding: 96px 0 40px; }
.ft__top { display: flex; align-items: center; gap: 56px; padding-bottom: 64px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.ft__plate { --sti-crest-plate: 132px; flex: none; }
.ft__title { font: 300 48px/1.1 var(--font); }
.ft__line { margin-top: 12px; font-size: 18px; }
.ft__invite .btn-row { margin-top: 28px; }
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr) minmax(0, .8fr); gap: 32px; padding: 56px 0; }
.ft__label { font: 600 12px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--sti-gold-light); margin-bottom: 10px; }
.ft__col a { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0); text-underline-offset: 4px; transition: color var(--t) ease, text-decoration-color var(--t) ease; }
.ft__col a:hover { color: var(--sti-gold-pale); text-decoration-color: currentColor; }
.ft__col address { font-size: 16px; line-height: 1.6; margin: 8px 0 4px; }
/* The email never breaks (James, 24 Oct: "golf@ stivesgolfclub.co.uk" split over two lines): one text, no wrapping, and
   the Find us column is given the room for it at every width (wider on desktop, the full row on phones). */
.ft__mail { white-space: nowrap; }
@media (max-width: 767px) { .ft__find { grid-column: 1 / -1; } }
.ft__base { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 14px; color: rgba(255, 255, 255, .82); }
@media (max-width: 1099px) { .ft__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ft { padding-top: 64px; } .ft__top { flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: 44px; } .ft__plate { --sti-crest-plate: 112px; } .ft__title { font-size: 38px; } .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding: 40px 0; } .ft__invite .btn { width: 100%; justify-content: space-between; } }

/* ---------- reduced motion: the end state at once, nothing autoplays ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}