/* St Ives (Hunts) Golf Club, Tengile direction.
 * After tengilemalamala.com (audit: research/tengile/). Kept from the reference: one fluid unit pinned to 1440 (--r is
 * 10px there and scales with the viewport above 1024), a very light display face that scales while labels and body
 * never do, square imagery with 2px radii only on things you press, no shadows, designed emptiness, photographs that
 * drift while the page stays calm. In the St Ives brand: Proxima Nova only (kit pdh2nxp), Club Navy for headings, the
 * curtain and the footer, Warm Stone ground, Fairway Gold for rules and hovers only. Transform and opacity only. */

/* A17: a fallback face sized like Proxima Nova, so text laid out before the Typekit fonts arrive keeps its place when
   they do (on a phone on Slow 4G the hero pills wrapped in Arial and unwrapped in Proxima Nova, CLS 0.13). Widths
   measured against kit pdh2nxp on 24 Oct 2026: Light 0.963 of Arial, Regular 0.984, Semibold 0.933 of Arial Bold.
   Invisible once Proxima Nova has loaded. */
@font-face { font-family: "sti-fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 300; size-adjust: 96.3%; }
@font-face { font-family: "sti-fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 98.4%; }
@font-face { font-family: "sti-fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 93.3%; }

:root {
  --sti-font: proxima-nova, "sti-fallback", Arial, Helvetica, sans-serif;
  --r: 10px;
  --edge: 16px;
  --gap: 12px;
  --page: var(--sti-stone);
  --well: var(--sti-rule);
  --navy: var(--sti-navy);
  --text: var(--sti-body);
  --deep: rgba(5, 14, 33, 1);
  --expo: cubic-bezier(.19, 1, .22, 1);
  --quart: cubic-bezier(.165, .84, .44, 1);
  --quad: cubic-bezier(.25, .46, .45, .94);
  --wipe: cubic-bezier(.76, 0, .24, 1);
  --hero-h: 100vh;
  --header-h: 64px;
}
@supports (height: 100svh) { :root { --hero-h: 100svh; } }
@media (min-width: 1024px) { :root { --r: calc(100vw / 144); --edge: calc(var(--r) * 1.6); --gap: calc(var(--r) * 1.6); --header-h: max(64px, calc(var(--r) * 7.2)); } }
@media (min-width: 1920px) { :root { --r: calc(100vw / 192); } }

* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: auto; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 17px/1.6 var(--sti-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, figure, blockquote, ul, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--sti-sky); border-radius: 2px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.locked { overflow: hidden; }
.skip { position: fixed; left: 8px; top: 8px; z-index: 400; padding: 12px 16px; background: #fff; color: var(--navy); font: 600 13px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Lenis (desktop only, see main.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Grid */
.wrap { width: calc(100% - 2 * var(--edge)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* Type */
.eyebrow { font: 600 13px/1.2 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.statement { font: 300 max(24px, calc(var(--r) * 3.4))/1.2 var(--sti-font); letter-spacing: -.012em; color: var(--navy); }
.display { font: 300 max(32px, calc(var(--r) * 5.2))/1.08 var(--sti-font); letter-spacing: -.02em; color: var(--navy); }
.body { font: 400 17px/1.6 var(--sti-font); color: var(--text); }
.statement, .display, .cover__copy h2, .quote blockquote p { text-wrap: balance; }
@media (max-width: 1023px) { .statement { font-size: 26px; line-height: 1.22; } .display { font-size: 34px; line-height: 1.12; } }
@media (max-width: 420px) { .statement { font-size: 24px; } .display { font-size: 30px; } }

/* Pills: a label whose text rises out of a clipped box, and an arrow tile that rounds on hover (crossfade, no layout) */
.pill { position: relative; display: inline-flex; align-items: stretch; gap: 4px; height: 44px; font: 600 13px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.pill__label { position: relative; overflow: hidden; display: grid; align-items: center; padding: 0 16px; border-radius: 2px; background: #fff; transition: background-color .3s var(--quad); }
.pill__label > span { display: block; line-height: 44px; white-space: nowrap; transition: transform .5s var(--quart); }
.pill__label > span + span { position: absolute; left: 16px; top: 100%; }
.pill__tile { position: relative; width: 44px; display: grid; place-items: center; color: var(--navy); }
.pill__tile::before, .pill__tile::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: #fff; transition: opacity .3s var(--quad), transform .45s var(--expo); }
.pill__tile::after { border-radius: 22px; background: var(--navy); opacity: 0; transform: scale(.82); }
.pill__tile svg { position: relative; z-index: 1; width: 15px; height: 15px; transition: color .3s var(--quad); }
@media (hover: hover) {
  .pill:hover .pill__label > span { transform: translateY(-100%); }
  .pill:hover .pill__tile::before { opacity: 0; }
  .pill:hover .pill__tile::after { opacity: 1; transform: none; }
  .pill:hover .pill__tile { color: #fff; }
}
.pill:focus-visible .pill__label > span { transform: translateY(-100%); }
.pill--navy, .pill--navy .pill__tile { color: #fff; }
.pill--navy .pill__label, .pill--navy .pill__tile::before { background: var(--navy); }
.pill--navy .pill__tile::after { background: var(--sti-gold); }
.pill--ghost { color: #fff; }
.pill--ghost .pill__label { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.pill--ghost .pill__tile { color: #fff; }
.pill--ghost .pill__tile::before { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.pill--ghost .pill__tile::after { background: #fff; }
@media (hover: hover) { .pill--ghost:hover .pill__tile { color: var(--navy); } }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) { .pill__label { padding: 0 12px; } .pill__label > span + span { left: 12px; } .pill-row { gap: 6px; } .pill { gap: 3px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  /* Desktop: the reference's slimmer pill, with the hit area kept at 44px */
  .pill { height: 38px; }
  .pill__label > span { line-height: 38px; }
  .pill__tile { width: 40px; }
  .pill::after { content: ""; position: absolute; inset: -3px 0; }
}

/* Curtain (the reference's opening, step for step): solid navy from first paint; the crest on its Warm Stone plate is
   drawn in by three navy mask strokes that pull away top to bottom, left to right (0.8 s each, sine.out, 0.25 s apart,
   from 0.2 s on the clock); 0.05 s after the third, the curtain's bottom edge sweeps up (clip-path, 0.8 s,
   power2.inOut); at 30% of that sweep the hero arrives (html.hero-go). main.js runs the clock with GSAP. Shown only when
   script runs (html.intro, head script), once a session, never under reduced motion; if main.js never takes over
   (html.intro-run), the curtain lets go of the page at 4 s. */
.curtain { display: none; }
html.intro .curtain { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--navy); clip-path: inset(0% 0% 0% 0%); }
html.intro:not(.intro-run) .curtain { animation: curtain-failsafe 0s linear 4s forwards; }
html.intro.intro-done .curtain { display: none; }
html.intro:not(.intro-done) { overflow: hidden; }
.curtain__mark { position: relative; display: block; width: 84px; aspect-ratio: 1; }
.curtain__plate { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--sti-stone); }
.curtain__plate img { width: 80%; height: auto; }
.curtain__mask { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; overflow: visible; }
.curtain__mask path { fill: none; stroke: var(--navy); stroke-width: 29; }
@keyframes curtain-failsafe { to { visibility: hidden; } }
@keyframes plate-in { from { opacity: 0; transform: scale(.84); } }
@keyframes crest-in { from { opacity: 0; transform: translateY(8px) scale(.94); } }

/* Header: transparent over the film; a navy bar once you scroll. On desktop it hides going down and comes back going
   up, fully (no stub). On touch it never hides, so Book and Menu are always in reach. */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h); color: #fff; transition: transform .38s var(--quad); }
.header::before { content: ""; position: absolute; inset: 0; background: var(--navy); opacity: 0; transition: opacity .18s var(--quad); }
.header.is-solid::before { opacity: 1; }
.header.is-hidden { transform: translateY(-100%); }
.header__bar { position: relative; height: 100%; padding: 0 var(--edge); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; }
.header__link, .header__menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 600 13px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; transition: color .3s var(--quad); }
.header__member { justify-self: start; }
.header__brand { justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 6px 4px; text-transform: uppercase; text-align: center; line-height: 1; }
.header__brand-1 { font: 600 20px/1 var(--sti-font); letter-spacing: .18em; margin-right: -.18em; }
.header__brand-2 { font: 600 9.5px/1 var(--sti-font); letter-spacing: .24em; margin-right: -.24em; }
.header__right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.header__book { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 2px; background: #fff; color: var(--navy); font: 600 13px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; position: relative; transition: background-color .3s var(--quad), color .3s var(--quad); }
.header__book::after { content: ""; position: absolute; inset: -4px 0; }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 1024px) { .header__book { height: 44px; } }
@media (hover: hover) {
  .header__link:hover, .header__menu:hover { color: var(--sti-gold-light); }
  .header__book:hover { background: var(--sti-gold-pale); }
}
@media (max-width: 599px) {
  .header__bar { grid-template-columns: auto 1fr; padding: 0 12px 0 var(--edge); }
  .header__member { display: none; }
  .header__brand { justify-self: start; align-items: flex-start; padding-left: 0; }
  .header__brand-1 { font-size: 17px; letter-spacing: .16em; }
  .header__brand-2 { font-size: 8px; letter-spacing: .2em; }
  .header__right { gap: 8px; }
  .header__book { padding: 0 10px; font-size: 12px; letter-spacing: .04em; }
}
@media (max-width: 359px) { .header__book { font-size: 11px; padding: 0 8px; } }

/* Menu: a window that opens out of the top-right corner. The window slides in from the corner while the panel inside
   slides the other way, so the content is uncovered, never moved. Transforms only. */
.menu { position: fixed; inset: 0; z-index: 200; }
.menu[hidden] { display: none; }
.menu__backdrop { position: absolute; inset: 0; background: rgba(13, 48, 111, .45); opacity: 0; transition: opacity .6s var(--wipe); cursor: pointer; }
.menu__win { position: absolute; top: 8px; right: 8px; width: min(max(440px, calc(var(--r) * 48)), calc(100vw - 16px)); height: calc(100vh - 16px); overflow: hidden; border-radius: 4px; transform: translate(100%, -100%); transition: transform .7s var(--wipe); }
@supports (height: 100dvh) { .menu__win { height: calc(100dvh - 16px); } }
.menu__panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: var(--navy); padding: 88px 40px 40px; overflow-y: auto; overscroll-behavior: contain; transform: translate(-100%, 100%); transition: transform .7s var(--wipe); }
.menu.is-open .menu__backdrop { opacity: 1; }
.menu.is-open .menu__win, .menu.is-open .menu__panel { transform: none; }
.menu.is-closing .menu__win, .menu.is-closing .menu__panel { transition-duration: .5s; }
.menu__close { position: absolute; top: 12px; right: 16px; min-height: 44px; padding: 0 8px; font: 600 13px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.menu__big { display: flex; flex-direction: column; gap: 6px; }
.menu__big a { display: inline-block; min-height: 44px; padding: 4px 0; font: 300 max(32px, calc(var(--r) * 4))/1.08 var(--sti-font); letter-spacing: -.015em; transition: color .3s var(--quad); }
.menu__small { margin-top: 40px; display: flex; flex-direction: column; gap: 2px; }
.menu__small a { display: inline-flex; min-height: 36px; align-items: center; font: 400 17px/1.3 var(--sti-font); color: var(--text); transition: color .3s var(--quad); }
@media (hover: hover) { .menu__big a:hover, .menu__small a:hover { color: var(--sti-sky); } .menu__close:hover { color: var(--sti-sky); } }
.menu__foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font: 400 15px/1.5 var(--sti-font); color: var(--text); }
.menu__foot a:not(.pill) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .menu__small a { min-height: 44px; }
}
.menu__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(var(--navy) 0 66%, var(--sti-gold) 66% 100%); }
@media (max-width: 599px) {
  .menu__backdrop { display: none; }
  .menu__win { top: 0; right: 0; width: 100vw; height: 100vh; border-radius: 0; }
  @supports (height: 100dvh) { .menu__win { height: 100dvh; } }
  .menu__panel { padding: 76px var(--edge) 28px; }
  .menu__close { right: 8px; top: 10px; }
  .menu__small { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .menu__foot { padding-top: 28px; }
}

/* The hold and the hero */
.page { position: relative; }
.hold { position: relative; }
.hold__media { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h); min-height: 600px; overflow: hidden; background: var(--navy); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A19: without script the film has no source, and browsers then force native controls onto a video. Show the dawn still
   instead (the same poster, as a background, requested only on this path). */
html:not(.js) .hero__video, html:not(.js) .filmbtn { display: none; }   /* the film button needs script to open the film */
html:not(.js) .hold__media { background: var(--navy) url(media/hero-reel-poster.webp) 50% 50% / cover no-repeat; }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5, 14, 33, .5) 0, rgba(5, 14, 33, 0) 26%),
  linear-gradient(180deg, rgba(5, 14, 33, 0) 42%, rgba(5, 14, 33, .6) 100%),
  rgba(5, 14, 33, .14); }
.hero { position: relative; z-index: 1; min-height: max(var(--hero-h), 600px); display: flex; flex-direction: column; justify-content: center; padding: 120px 0 56px; color: #fff; }
@media (min-width: 1024px) {
  /* a soft pool of shade under the support copy, which sits over the lake in this film */
  .hero__scrim::after { content: ""; position: absolute; inset: 0; background:
    radial-gradient(ellipse 34% 30% at 64% 68%, rgba(5, 14, 33, .42), rgba(5, 14, 33, 0)),
    radial-gradient(ellipse 46% 22% at 52% 37%, rgba(5, 14, 33, .22), rgba(5, 14, 33, 0)); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .hold__media { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .hero { margin-top: -100vh; min-height: 100vh; padding: calc(var(--r) * 15) 0 calc(var(--r) * 9); }
  .hero__play { position: absolute; inset: 0; z-index: 0; cursor: pointer; }
}
.hero__inner { position: relative; z-index: 1; pointer-events: none; }
.hero__inner a, .hero__inner button { pointer-events: auto; }
.hero__title { grid-column: 1 / -1; width: 100%; font: 300 clamp(48px, 13.4vw, 104px)/.94 var(--sti-font); letter-spacing: -.035em; color: #fff; }
.hero__title .line { display: block; }
.hero__title .line + .line { text-align: right; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .04em .06em; margin: -.1em -.04em -.06em; }
/* Hero arrival (the reference's, on html.hero-go): each character rises out of its word and sharpens, 1.6 s expo-out,
   0.05 s per character within its word (words together); the support copy fades in out of a blur, 1 s quart-out; the
   film settles from 1.1 to 1 over 2 s, expo-out. Initial states only while script runs and motion is allowed; if main.js
   never runs (html.arrive missing), they let go at 4 s. */
.hero__title .c { display: inline-block; transform: translateY(100%); filter: blur(5px); will-change: transform; }
.hero-go .hero__title .c { transform: translateY(0%); filter: none; transition: transform 1.6s var(--expo), filter 1.6s var(--expo); }
.js:not(.rm) .hero__support { opacity: 0; filter: blur(5px); }
.js:not(.rm) .hero__video { transform: scale(1.1); }
html.js:not(.arrive) .hero__support, html.js:not(.arrive) .hero__video { animation: arrive-failsafe 0s linear 4s forwards; }
html.js.hero-go .hero__support { opacity: 1; filter: none; transition: opacity 1s var(--quart), filter 1s var(--quart); }
html.js.hero-go .hero__video { transform: scale(1); transition: transform 2s var(--expo); }
@keyframes arrive-failsafe { to { opacity: 1; filter: none; transform: none; } }
.js:not(.rm) .hero__title:not(.is-split) { opacity: 0; animation: failsafe 0s linear 2.6s forwards; }
@keyframes failsafe { to { opacity: 1; } }
.hero__support { grid-column: 1 / -1; margin-top: 48px; max-width: 520px; }
.hero__support p { font: 400 19px/1.42 var(--sti-font); color: #fff; margin-bottom: 24px; max-width: 34ch; text-shadow: 0 1px 14px rgba(5, 14, 33, .55); }
.hero__title { text-shadow: 0 2px 30px rgba(5, 14, 33, .25); }
.hero__support .pill-row { margin-bottom: 18px; }
.filmbtn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 13px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.filmbtn i { position: relative; width: 44px; height: 32px; display: grid; place-items: center; }
.filmbtn i::before { content: ""; position: absolute; inset: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); transition: opacity .3s var(--quad); }
.filmbtn i::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: rgba(255, 255, 255, .2); opacity: 0; transform: scale(.85); transition: opacity .3s var(--quad), transform .45s var(--expo); }
.filmbtn svg { position: relative; z-index: 1; width: 11px; height: 11px; }
@media (hover: hover) { .filmbtn:hover i::before { opacity: 0; } .filmbtn:hover i::after { opacity: 1; transform: none; } }
.hero__label { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .hero__title { width: 84%; margin-inline: auto; font-size: calc(var(--r) * 13); }
  .hero__support { grid-column: 7 / span 4; margin-top: calc(var(--r) * 9); max-width: none; }
  .hero__support p { font-size: max(18px, calc(var(--r) * 2)); }
  .hero__label { display: block; position: absolute; left: 0; top: 0; z-index: 2; height: 28px; overflow: hidden; pointer-events: none; border-radius: 2px; opacity: 0; transition: opacity .2s var(--quad); }
  .hero__label span { display: block; padding: 0 8px; background: #fff; color: var(--navy); font: 600 12px/28px var(--sti-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: translateY(100%); transition: transform .4s var(--expo); }
  .hero__label.is-on { opacity: 1; }
  .hero__label.is-on span { transform: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .hero__title { font-size: clamp(64px, 12.5vw, 112px); }
  .hero__support { grid-column: 4 / -1; margin-top: 64px; }
}
@media (min-width: 1024px) and (hover: none), (min-width: 1024px) and (pointer: coarse) {
  .hero__title { width: 84%; margin-inline: auto; font-size: calc(var(--r) * 13); }
  .hero__support { grid-column: 7 / span 5; margin-top: calc(var(--r) * 8); max-width: none; }
}

/* Sections. Everything after the hero is opaque so it slides over the held film. */
.sec { position: relative; z-index: 1; background: var(--page); padding: calc(var(--r) * 8) 0; }
.sec--quote { padding: calc(var(--r) * 12) 0; }
.sec--tight { padding: calc(var(--r) * 2) 0 calc(var(--r) * 6); }
@media (max-width: 1023px) { .sec { padding: 56px 0; } .sec--quote { padding: 72px 0; } .sec--tight { padding: 8px 0 40px; } }

/* Parallax frames: the frame clips, the photograph inside is scaled and drifts (desktop only, see main.js) */
.px { position: relative; overflow: hidden; background: var(--well); }
.px img { width: 100%; height: 100%; object-fit: cover; }

.stmt { padding-top: calc(var(--r) * 11); padding-bottom: calc(var(--r) * 4); }
.stmt__eyebrow { grid-column: 1 / span 3; padding-top: .6em; }
.stmt__text { grid-column: 5 / span 8; }
@media (max-width: 1023px) { .stmt { padding-top: 64px; padding-bottom: 8px; } .stmt__eyebrow, .stmt__text { grid-column: 1 / -1; } .stmt__text { margin-top: 20px; } }

.dbl__copy { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 16px; max-width: 34ch; }
.dbl__a { grid-column: 4 / span 4; margin-top: calc(var(--r) * 22); aspect-ratio: 647 / 823; }
.dbl__b { grid-column: 8 / span 5; margin-right: calc(-1 * var(--edge)); aspect-ratio: 780 / 941; }
@media (max-width: 1023px) {
  .dbl__copy { grid-column: 1 / -1; margin-bottom: 32px; max-width: 46ch; }
  .dbl__a { grid-column: 1 / span 6; margin-top: 96px; }
  .dbl__b { grid-column: 7 / span 6; }
}

/* A15: the scorecard, a disclosure in the four-tees copy. The summary is the navy pill (its arrow tile turns down when
   open); the tee switch is the clipped-box language at 44 px; the table is hairlines on the page ground, figures aligned. */
.sc { margin-top: 8px; }
.sc__sum { list-style: none; cursor: pointer; align-self: flex-start; width: max-content; max-width: 100%; }
.sc__sum::-webkit-details-marker { display: none; }
@media (min-width: 1024px) and (max-width: 1099px) { .sc__sum .pill__label { padding: 0 12px; } .sc__sum .pill__label > span + span { left: 12px; } }   /* the four-tees column is narrowest here */
.sc__sum .pill__tile svg { transition: transform .45s var(--expo), color .3s var(--quad); }
.sc[open] .sc__sum .pill__tile svg { transform: rotate(90deg); }
.sc__body { padding-top: 20px; }
.sc[open] .sc__body { animation: sc-in .45s var(--quart) both; }
@keyframes sc-in { from { opacity: 0; transform: translateY(8px); } }
.sc__tees { display: flex; align-items: center; gap: 6px; }
.sc__label { margin-right: 6px; font: 600 13px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.sc__tees button { position: relative; width: 44px; height: 44px; border-radius: 2px; background: #fff; color: var(--navy); font: 600 14px/1 var(--sti-font); letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: background-color .3s var(--quad), color .3s var(--quad); }
.sc__tees button[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (hover: hover) { .sc__tees button[aria-pressed="false"]:hover { color: var(--sti-sky); } }
html:not(.js) .sc__tees { display: none; }
.sc__note { margin-top: 14px; font: 400 15px/1.5 var(--sti-font); color: var(--text); }
.sc__table { width: 100%; margin-top: 10px; border-collapse: collapse; font: 400 15px/1 var(--sti-font); font-variant-numeric: tabular-nums; color: var(--text); }
.sc__table th, .sc__table td { padding: 8px 0; border-bottom: 1px solid var(--sti-rule); text-align: right; }
.sc__table th:first-child { text-align: left; }
.sc__table thead th { padding-top: 0; font: 600 12px/1.2 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); border-bottom-color: var(--navy); }
.sc__table abbr { text-decoration: none; }
.sc__table tbody th { font-weight: 600; color: var(--navy); }
.sc__tot th, .sc__tot td { font-weight: 600; color: var(--navy); background: #fff; }
.sc__tot th { padding-left: 8px; }
.sc__tot td:last-child { padding-right: 8px; }
.sc__t { display: none; }
html:not(.js) .sc__y { display: none; }
html:not(.js) .sc__t { display: inline; }
.js .sc__table[data-tee="67"] [data-t]:not([data-t="67"]), .js .sc__table[data-tee="65"] [data-t]:not([data-t="65"]),
.js .sc__table[data-tee="61"] [data-t]:not([data-t="61"]), .js .sc__table[data-tee="56"] [data-t]:not([data-t="56"]) { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .sc__tees button { width: 40px; height: 38px; }
  .sc__tees button::after { content: ""; position: absolute; inset: -3px -2px; }
}

.coll { padding-top: calc(var(--r) * 10); }
.coll__intro { grid-column: 1 / span 11; }
.row { padding-top: calc(var(--r) * 8); }
.row__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: 24px; }
.row__head .eyebrow { grid-column: 1 / span 3; padding-top: .35em; }
.row__head .body { grid-column: 4 / span 5; max-width: 52ch; }
/* A18 and A16 in the visitors row: the scorecard's language (white 44 px boxes, navy when chosen, a pill disclosure) */
.visit { grid-column: 4 / span 5; max-width: 52ch; margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pick__day { display: flex; align-items: center; }
.pick__date { height: 44px; padding: 0 10px; border: 0; border-radius: 2px; background: #fff; color: var(--navy); font: 600 14px/1 var(--sti-font); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pick__holes { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pick__holes label { position: relative; display: block; cursor: pointer; }
.pick__holes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick__holes span { display: grid; place-items: center; height: 44px; padding: 0 14px; border-radius: 2px; background: #fff; color: var(--navy); font: 600 14px/1 var(--sti-font); letter-spacing: .02em; white-space: nowrap; transition: background-color .3s var(--quad), color .3s var(--quad); }
.pick__holes input:checked + span { background: var(--navy); color: #fff; }
.pick__holes input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--sti-sky); }
@media (hover: hover) { .pick__holes input:not(:checked):hover + span { color: var(--sti-sky); } }
html:not(.js) .pick__day, html:not(.js) .pick__holes { display: none; }   /* without script the pill is the plain booking link */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {   /* the desktop 38 px pill height, the hit area kept at 44 px */
  .pick__day { padding: 3px 0; }
  .pick__date { height: 38px; }
  .pick__holes span { height: 38px; }
  .pick__holes input { top: -3px; height: calc(100% + 6px); }
}
.faq { margin-top: 0; width: 100%; }
.faq__list { padding-top: 12px; border-top: 0; }
.faq__item { border-bottom: 1px solid var(--sti-rule); }
.faq__item:first-child { border-top: 1px solid var(--navy); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 4px 0; cursor: pointer; font: 600 15px/1.35 var(--sti-font); color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { flex: none; width: 15px; height: 15px; color: var(--navy); transition: transform .45s var(--expo); }
.faq__item summary i svg { width: 15px; height: 15px; }
.faq__item[open] summary i { transform: rotate(90deg); }
@media (hover: hover) { .faq__item summary:hover { color: var(--sti-sky); } }
.faq__a { padding: 0 0 16px; font: 400 15px/1.6 var(--sti-font); color: var(--text); }
.faq__a a { color: var(--sti-sky); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .faq__a a:hover { color: var(--navy); } }
.cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.card { display: block; color: var(--navy); }
.card__media { aspect-ratio: 460 / 560; }
.card__media img { position: absolute; inset: 0; }
.card__pills { position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; overflow: hidden; padding-top: 2px; }
.card__pills span { padding: 8px 10px; border-radius: 2px; background: #fff; color: var(--navy); font: 600 12px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.card__title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-top: 14px; }
.card__title h4 { font: 600 max(18px, calc(var(--r) * 2))/1.25 var(--sti-font); color: var(--navy); }
.card__title p { margin-top: 6px; font: 400 15px/1.5 var(--sti-font); color: var(--text); max-width: 40ch; }
.card__title i { position: relative; flex: none; width: 36px; height: 32px; display: grid; place-items: center; color: var(--navy); }
.card__title i::before, .card__title i::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: #fff; transition: opacity .3s var(--quad), transform .45s var(--expo); }
.card__title i::after { border-radius: 16px; background: var(--navy); opacity: 0; transform: scale(.82); }
.card__title i svg { position: relative; z-index: 1; width: 14px; height: 14px; transition: color .3s var(--quad); }
@media (hover: hover) {
  .card__pills span { transform: translateY(calc(100% + 40px)); transition: transform .4s var(--expo); }
  .card__pills span:last-child { transform: translateY(calc(200% + 46px)); }
  .card:hover .card__pills span, .card:focus-visible .card__pills span { transform: none; transition: transform .5s var(--quart); }
  .card:hover .card__pills span:last-child, .card:focus-visible .card__pills span:last-child { transition-delay: .12s; }
  .card:hover .card__title i::before { opacity: 0; }
  .card:hover .card__title i::after { opacity: 1; transform: none; }
  .card:hover .card__title i { color: #fff; }
}
@media (max-width: 1023px) {
  .coll { padding-top: 56px; }
  .coll__intro { grid-column: 1 / -1; }
  .row { padding-top: 48px; }
  .row__head .eyebrow, .row__head .body { grid-column: 1 / -1; }
  .row__head .body { margin-top: 10px; }
  .visit { grid-column: 1 / -1; }
  .cards { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--edge)); padding: 0 var(--edge) 4px; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (min-width: 600px) and (max-width: 1023px) { .card { flex-basis: 44%; } }

.quote { grid-column: 2 / span 10; text-align: center; }
.quote blockquote p { font: 300 max(26px, calc(var(--r) * 3.8))/1.2 var(--sti-font); letter-spacing: -.012em; color: var(--navy); }
.quote figcaption { margin-top: 28px; font: 600 13px/1.4 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; }
.quote .author { color: var(--navy); }
.quote .author::after { content: ","; }
.quote .meta { color: var(--text); }
@media (max-width: 1023px) { .quote { grid-column: 1 / -1; } }

/* Large gallery: the next photograph is uncovered from one edge (outer and inner layers counter-translate) */
.gal { grid-column: 1 / -1; position: relative; }
.gal:focus-visible { box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--sti-sky); outline: 0; }
.gal__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--well); }
.gal__slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.gal__slide.is-on { visibility: visible; z-index: 1; }
.gal__slide.is-in { visibility: visible; z-index: 2; }
.gal__in { position: absolute; inset: 0; }
.gal__in img { width: 100%; height: 100%; object-fit: cover; }
.gal__zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; display: flex; align-items: center; padding: 12px; }
.gal__prev { left: 0; justify-content: flex-start; }
.gal__next { right: 0; justify-content: flex-end; }
.gal__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 2px; background: #fff; color: var(--navy); }
.gal__btn svg { width: 16px; height: 16px; }
.gal__counter { position: absolute; right: 12px; bottom: 12px; z-index: 4; padding: 7px 10px; border-radius: 2px; background: rgba(5, 14, 33, .62); color: #fff; font: 600 12px/1 var(--sti-font); letter-spacing: .06em; pointer-events: none; }
.gal__cursor { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .gal__btn { opacity: 0; transition: opacity .2s var(--quad); }
  .gal__zone:focus-visible .gal__btn { opacity: 1; }
  .gal__zone:focus-visible { box-shadow: none; outline: 0; }
  .gal__cursor { display: block; position: absolute; left: 0; top: 0; z-index: 4; height: 28px; overflow: hidden; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .2s var(--quad); }
  .gal__cursor div { display: flex; flex-direction: column; transition: transform .5s var(--quart); }
  .gal__cursor span { display: block; padding: 0 8px; background: #fff; color: var(--navy); font: 600 12px/28px var(--sti-font); letter-spacing: .06em; text-transform: uppercase; }
  .gal__cursor.is-on { opacity: 1; }
  .gal__cursor.is-prev div { transform: translateY(-50%); }
}
@media (max-width: 1023px) { .gal__stage { aspect-ratio: 4 / 5; } .gal { margin-inline: calc(-1 * var(--edge)); } }
@media (min-width: 600px) and (max-width: 1023px) { .gal__stage { aspect-ratio: 4 / 3; } }

/* Story: the aerial (story__a) from the left edge across 8 of 12 columns, the copy in columns 9 to 12 beside it, the
   clubhouse (story__b) under the copy, overlapping the aerial by one column on a Warm Stone mat. Phones and tablets:
   the words, then the aerial edge to edge, then the clubhouse overlapping its lower edge. */
.story__grid { row-gap: 0; }
@media (min-width: 1024px) { .sec.story { padding-top: calc(var(--r) * 5); padding-bottom: calc(var(--r) * 6); } }
.story__copy { display: flex; flex-direction: column; align-items: flex-start; }
.story__head { display: flex; align-items: center; gap: 14px; }
.story__crest { width: 56px; height: auto; flex: none; }
.story__stmt { margin-top: 22px; }
.story__body { margin-top: 20px; max-width: 46ch; }
.story__copy .pill { margin-top: 24px; }
.story__a img, .story__b img { position: absolute; inset: 0; }
.story__b { box-shadow: 0 0 0 var(--mat) var(--page); --mat: 10px; z-index: 1; }
.tags { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { padding: 8px 10px; border-radius: 2px; background: #fff; color: var(--navy); font: 600 12px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.story__tags { top: 16px; bottom: auto; }
@media (min-width: 1024px) {
  .story__a { grid-column: 1 / span 8; grid-row: 1 / span 2; margin-left: calc(-1 * var(--edge)); min-height: min(calc(var(--r) * 86), 88vh); }
  .story__copy { grid-column: 9 / span 4; grid-row: 1; padding-left: calc(var(--r) * 1.2); padding-bottom: calc(var(--r) * 4); }
  .story__stmt { font-size: max(22px, calc(var(--r) * 2.6)); line-height: 1.22; }
  .story__b { grid-column: 8 / span 5; grid-row: 2; align-self: end; aspect-ratio: 4 / 3; --mat: calc(var(--gap) * 0.75); }
  .story__tags { left: calc(var(--edge) + 16px); }
}
@media (max-width: 1023px) {
  .story__copy { grid-column: 1 / -1; grid-row: 1; }
  .story__a { grid-column: 1 / -1; grid-row: 2; margin: 32px calc(-1 * var(--edge)) 0; aspect-ratio: 4 / 5; }
  .story__b { grid-column: 3 / -1; grid-row: 3; margin-top: -132px; margin-right: calc(-1 * var(--edge)); aspect-ratio: 4 / 3; }
  .story__tags { left: var(--edge); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  /* tablets: the body and the button sit under the aerial on the left, the clubhouse overlaps it on the right */
  .story__copy { display: contents; }
  .story__head { grid-column: 1 / -1; grid-row: 1; } .story__stmt { grid-column: 1 / span 11; grid-row: 2; }
  .story__a { grid-row: 3; aspect-ratio: 3 / 2; }
  .story__body { grid-column: 1 / span 5; grid-row: 4; margin-top: 28px; }
  .story__copy .pill { grid-column: 1 / span 5; grid-row: 5; align-self: start; }
  .story__b { grid-column: 6 / -1; grid-row: 4 / span 2; margin-top: -140px; }
}

/* Images cloud: four large photographs (24 Oct pm, James: "you can barely see what they are"), two each side of the
   centred words, never over them; the lower pair bleeds off the edges. */
.cloud { position: relative; z-index: 1; overflow: hidden; background: var(--page); min-height: max(900px, calc(var(--r) * 116)); display: grid; place-items: center; padding: calc(var(--r) * 10) var(--edge); text-align: center; }
.cloud__text { position: relative; z-index: 1; max-width: max(460px, calc(var(--r) * 52)); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cloud__text .statement { max-width: 18ch; text-wrap: balance; }
.cloud__imgs { position: absolute; inset: 0; }
.cloud__img { position: absolute; width: max(280px, calc(var(--r) * 42)); aspect-ratio: 202 / 224; }
.cloud__img.sm { width: max(230px, calc(var(--r) * 34)); aspect-ratio: 157 / 179; }
.c1 { left: 6%; top: 4%; } .c3 { left: -2.5%; top: 58%; }
.c4 { right: 7%; top: 7%; } .c6 { right: -3%; top: 50%; }
@media (max-width: 1023px) {
  .cloud { min-height: 0; padding: 98vw var(--edge) 97vw; }
  .cloud__img { width: 64%; } .cloud__img.sm { width: 50%; }
  .c1 { left: -8%; top: 6vw; } .c4 { right: -8%; top: 31vw; }
  .c3 { left: -4%; top: auto; bottom: 30vw; } .c6 { right: -10%; top: auto; bottom: 6vw; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .cloud { padding: 66vw var(--edge) 68vw; }
  .cloud__img { width: 46%; } .cloud__img.sm { width: 36%; }
  .c1 { left: -4%; top: 3vw; } .c4 { right: -4%; top: 18vw; }
  .c3 { left: 2%; bottom: 20vw; } .c6 { right: -6%; bottom: 4vw; }
}

/* Community strip */
.mq { position: relative; z-index: 1; background: var(--page); padding: calc(var(--r) * 4) 0 calc(var(--r) * 12); }
.mq__copy { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 20px; margin-bottom: calc(var(--r) * 6); }
.mq__strip { overflow: hidden; }
.mq__strip:focus-visible { box-shadow: inset 0 0 0 2px var(--sti-sky); outline: 0; }
.mq__track { display: flex; align-items: flex-start; gap: calc(var(--r) * 2.4); width: max-content; padding-inline: var(--edge); }
.mq__track figure { flex: none; width: calc(var(--r) * 52); }
.mq__track .r1 { aspect-ratio: 1.21; } .mq__track .r2 { aspect-ratio: .85; } .mq__track .r3 { aspect-ratio: .82; }
.mq__track img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 1023px) {
  .mq { padding: 24px 0 72px; }
  .mq__copy { grid-column: 1 / -1; margin-bottom: 32px; }
}
/* Anything that is not a desktop pointer (phones, and tablets at any width) swipes the strip natively */
@media not all and (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .mq__strip { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; }
  .mq__strip::-webkit-scrollbar { display: none; }
  .mq__track { gap: 12px; }
  .mq__track figure { width: 64vw; scroll-snap-align: start; }
}
@media (min-width: 600px) and (max-width: 1023px) { .mq__track figure { width: 36vw; } }

/* Cover call to action */
.cover { position: relative; z-index: 1; aspect-ratio: 1440 / 1170; min-height: 640px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy); }
.cover__media { position: absolute; inset: 0; }
.cover__media picture, .cover__media img { display: block; width: 100%; height: 100%; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 14, 33, 0) 38%, rgba(5, 14, 33, .78) 100%); pointer-events: none; }
.cover__grid { position: relative; z-index: 1; padding-bottom: calc(var(--r) * 8); }
.cover__copy { grid-column: 7 / span 5; display: flex; flex-direction: column; gap: 20px; max-width: 46ch; }
.cover__copy .eyebrow { color: #fff; }
.cover__copy h2 { font: 300 max(32px, calc(var(--r) * 4.8))/1.08 var(--sti-font); letter-spacing: -.02em; }
.cover__copy p { font: 400 17px/1.6 var(--sti-font); }
.cover__copy p a { text-decoration: underline; text-underline-offset: 3px; }
.cover__copy .pill-row { margin-top: 4px; }
@media (max-width: 1023px) {
  .cover { aspect-ratio: auto; min-height: max(640px, 92svh); }
  .cover__grid { padding-bottom: 48px; }
  .cover__copy { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 1023px) { .cover__copy { grid-column: 4 / -1; } }

/* Footer: the one full area of navy */
.footer { position: relative; z-index: 1; background: var(--navy); color: #fff; padding: calc(var(--r) * 8) 0 calc(var(--r) * 4); }
.footer__grid { row-gap: 40px; }
.footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.footer__plate { --sti-crest-plate: 104px; }
.footer address { font: 400 15px/1.6 var(--sti-font); }
.footer a { transition: color .3s var(--quad); }
.footer address a, .footer__col a, .footer__base a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.footer__col { grid-column: span 2; }
.footer__col:nth-of-type(1) { grid-column: 7 / span 2; }
.footer h2 { margin-bottom: 16px; font: 600 13px/1.2 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; color: var(--sti-gold-light); }
.footer ul { display: flex; flex-direction: column; gap: 4px; font: 400 15px/1.4 var(--sti-font); }
.footer ul a { display: inline-flex; min-height: 32px; align-items: center; }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 1024px) { .footer ul { gap: 0; } .footer ul a { min-height: 44px; } }
@media (hover: hover) { .footer a:hover { color: var(--sti-gold-pale); } }
.footer__base { grid-column: 1 / -1; margin-top: 16px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .22); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font: 400 14px/1.5 var(--sti-font); }
.footer__base span:last-child { display: flex; gap: 20px; }
.footer__base span:last-child a { display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 1023px) {
  .footer { padding: 56px 0 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__col:nth-of-type(1) { grid-column: span 6; }
  .footer__col:nth-of-type(3) { grid-column: 1 / span 6; }
}
@media (min-width: 600px) and (max-width: 1023px) { .footer__col, .footer__col:nth-of-type(1), .footer__col:nth-of-type(3) { grid-column: span 4; } }

/* A6: hit areas of at least 44 px where the visible link is smaller, by a transparent ::after centred on it, so nothing
   moves. Footer and menu list links, the footer social links (X is 9 px wide), and calls inside sentences (tel and mailto
   in a paragraph or the address block: the line stays as it is, the tap area is 44 px tall). */
.footer ul a, .footer__base span:last-child a, .menu__small a, p a[href^="tel:"], p a[href^="mailto:"] { position: relative; }
.footer { overflow-x: clip; }   /* the X link's 44 px box may reach past a narrow page edge; never let it widen the page */
.footer ul a::after, .footer__base span:last-child a::after, .menu__small a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
p a[href^="tel:"]::after, p a[href^="mailto:"]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* The footer address keeps the base's 24 px lines, so nothing moves. Its links stack, so a centred 44 px ::after would
   cover the link below (a tap on the phone number opened the email). Instead each box grows away from its neighbour:
   the phone and Directions (A11, on the phone's line so the address gains no line) upwards over the postcode line,
   which is text, and the email downwards into the space under the address. The boxes meet at the line edge. */
.footer address a { position: relative; }
.footer address a::after { content: ""; position: absolute; left: 0; right: 0; height: 44px; }
.footer address a:not([href^="mailto:"])::after { bottom: -3px; }   /* the 18 px link box sits 3 px inside its 24 px line */
.footer address a[href^="mailto:"]::after { top: -3px; }
.footer__dir { margin-left: 8px; }

/* Links inside running copy on the Warm Stone page: Sky Blue, underlined (brand: links and hover); a phone number never splits */
.row__head .body a { color: var(--sti-sky); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .row__head .body a:hover { color: var(--navy); } }
p a[href^="tel:"] { white-space: nowrap; }
.mq__copy .pill { align-self: flex-start; }

/* Film: full screen, silent, opened by a visitor */
.film { position: fixed; inset: 0; z-index: 250; background: #000; color: #fff; }
.film[hidden] { display: none; }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.film__zone { position: absolute; inset: 0; cursor: pointer; }
.film__label { position: absolute; left: 0; top: 0; z-index: 2; height: 28px; overflow: hidden; border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .2s var(--quad); }
.film__label span { display: block; padding: 0 8px; background: #fff; color: var(--navy); font: 600 12px/28px var(--sti-font); letter-spacing: .06em; text-transform: uppercase; }
.film__label.is-on { opacity: 1; }
.film__bar { position: absolute; left: var(--edge); right: var(--edge); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: center; gap: 16px; font: 600 12px/1 var(--sti-font); letter-spacing: .06em; text-transform: uppercase; }
.film__toggle, .film__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 2px; }
.film__toggle { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.film__toggle svg { width: 12px; height: 12px; }
.film__progress { position: relative; flex: 1; height: 44px; cursor: pointer; }
.film__progress::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: rgba(255, 255, 255, .3); }
.film__progress i { position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.film__note { color: rgba(255, 255, 255, .78); }
.film__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: var(--edge); z-index: 3; background: #fff; color: var(--navy); }
.film__close svg { width: 13px; height: 13px; }
@media (max-width: 599px) { .film__note { display: none; } }

/* Overlay entrances and responses (James, 24 Oct: "some sort of interactions or animations on the graphics overlays").
   In the reference's own vocabulary: tags and pills rise out of a mask (1.2 s expo-out), copy over a photograph rises
   16 px and sharpens out of a 5 px blur (1 s quart-out), 0.09 s apart, once, when a quarter of the photograph is in view
   (main.js adds .is-in). The entrances use the individual translate and opacity properties, so every hover state, which
   uses transform, stays free. Hidden states only once main.js has taken over (html.arrive) and motion is allowed. */
html.arrive:not(.rm) [data-reveal] .rv { opacity: 0; translate: 0 16px; filter: blur(5px); }
html.arrive:not(.rm) [data-reveal] .rv-mask { translate: 0 calc(100% + 16px); }
html.arrive:not(.rm) [data-reveal].is-in :is(.rv, .rv-mask) { opacity: 1; translate: none; filter: none;
  transition: opacity 1s var(--quart), filter 1s var(--quart), translate 1.2s var(--expo); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms)); }
.tags { overflow: hidden; padding-top: 2px; }
.card__pills .rv-mask { --d: 120ms; }
/* the gallery counter rolls to the new number (main.js); the buttons answer hover, focus and touch */
.gal__mask { display: inline-block; overflow: hidden; vertical-align: top; height: 1em; }
.gal__n { display: inline-block; }
.gal__btn { transition: background-color .3s var(--quad), color .3s var(--quad), transform .45s var(--expo); }
.gal__btn svg { transition: transform .45s var(--expo); }
.gal__zone:focus-visible .gal__btn { background: var(--navy); color: #fff; }
.gal__zone:active .gal__btn { transform: scale(.92); }
@media (hover: hover) { .gal__zone:hover .gal__btn { background: var(--navy); color: #fff; } .gal__next:hover .gal__btn svg { transform: translateX(3px); } .gal__prev:hover .gal__btn svg { transform: translateX(-3px); } }

/* Reduced motion: a calm, complete page */
html.rm *, html.rm *::before, html.rm *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none !important; }
  .hero__title .c, .hero__support, .hero__video { transform: none !important; opacity: 1 !important; filter: none !important; }
}