/* Windlesham Golf Club, a free homepage redesign in the Terrace design (Capture Sites), built from the Clandon Regis
   page (27 Oct 2026). Terrace is the "badrutts" direction of the Capture Sites library: a stone opening that gives way
   to a full-bleed hero, a 70px header that is clear over the hero and a solid bar after it, a navy BOOK block at the
   right edge, the hero's two-way switch (here Clubhouse and Course) with its fact beside it, a pinned line that the
   clubhouse chapter slides over, full-height tiles in a white mount with the word and its fact at the foot, the club's
   numbers in hairline circles, a sign-off with a pill button, a navy footer, and a full-screen menu.
   Added for Windlesham (James, 30 Oct 2026: "make the new clubhouse really stand out on the homepage"): the clubhouse
   chapter (.house), a navy band with the club's own film of the clubhouse, its rooms and a tour booking.
   Brand: the club's own, read from windleshamgolf.com (theme CSS and logo, 30 Oct 2026): navy #00264B, gold #BF9F54
   (the logo's tree and golfer), Montserrat. Headings in Cormorant Garamond, a classical serif in the spirit of the
   logo's W. Gold fails as text on white (2.5:1), so gold text on light grounds is --cr-orange-text #806524 (5.5:1).
   Motion: transform and opacity. */

/* ---------- Windlesham tokens (the --cr- names are Terrace's own) ---------- */
:root {
  --cr-navy: #00264B;          /* Windlesham navy. White on navy 15.2:1 */
  --cr-gold: #BF9F54;          /* Windlesham gold: rules, icons and accents on light grounds; text on navy (6.0:1) */
  --cr-orange-text: #806524;   /* gold for text on white, 5.5:1 */
  --cr-sky: #00264B;           /* links on light grounds: navy, underlined */
  --cr-gold-light: #BF9F54;    /* gold on navy, 6.0:1 */
  --cr-gold-pale: #EADBB3;     /* pale gold: hovers over photographs, the sun */
  --cr-white: #FFFFFF;
  --cr-stone: #F7F5F0;         /* stone: the opening, the solid header, the menu, the crest plate */
  --cr-body: #4A4F5E;          /* body grey, 8.2:1 on white */
  --cr-ink: #0B1A2E;
  --cr-text: var(--cr-body);
  --cr-focus: #00264B;
  --cr-navy-deep: #001A35;     /* navy hover */

  --cr-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;   /* headings */
  --cr-font-ui: Montserrat, "Helvetica Neue", Arial, sans-serif;         /* body, labels, buttons (the club's own) */
  --cr-w-light: 400;
  --cr-w-regular: 400;
  --cr-w-semibold: 600;
  --cr-body-size: 1rem;        /* 16px Montserrat, lh 1.65 */
  --cr-body-lh: 1.65;
  --cr-caption: 0.8125rem;
  --cr-label: 0.75rem;         /* 12px caps labels and buttons */
  --cr-label-tracking: 0.1em;
  --cr-tap: 44px;
  --cr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --cr-dur-fast: 180ms;
}
@media (prefers-reduced-motion: reduce) { :root { --cr-dur-fast: 1ms; } }

/* The club's logo (navy tiles, gold tree and golfer, navy wordmark) sits on a white plate: it would vanish on the navy
   footer. The club holds it at 334 x 150 px, shown at 167 px wide (2x). */
.logo-plate { display: inline-grid; place-items: center; padding: 20px 26px 16px; border-radius: 8px; background: var(--cr-white); }
.logo-plate > img { width: 167px; height: auto; display: block; }

:root {
  --hd: 70px;
  --line: rgba(0, 38, 75, .16);             /* navy hairline */
  --line-light: rgba(255, 255, 255, .55);
  --ease: var(--cr-ease-out);
}
@media (max-width: 599px) { :root { --hd: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--cr-white); color: var(--cr-text); font: var(--cr-w-regular) var(--cr-body-size)/var(--cr-body-lh) var(--cr-font-ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--cr-focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--cr-navy); color: var(--cr-white); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Caps underlined link: the reference's 12px caps label. navy on light grounds, white on photographs, orange hover on navy. */
.ulink { display: inline-flex; align-items: center; min-height: var(--cr-tap); font: var(--cr-w-semibold) var(--cr-label)/1.2 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; color: var(--cr-sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color var(--cr-dur-fast) ease; }
.ulink:hover { color: var(--cr-orange-text); }
.ulink--light { color: var(--cr-white); }
.ulink--light:hover { color: var(--cr-gold-pale); }
.ulink--onnavy { color: var(--cr-white); }
.ulink--onnavy:hover { color: var(--cr-gold-light); }
/* Hit areas of at least 44 x 44 for the shorter footer and menu links and the inline phone links, without moving
   anything: a centred, invisible box behind the link (A6). */
.ft .ulink, .cell .ulink, .tel, .sign__sub a { position: relative; }
.ft .ulink::after, .cell .ulink::after, .tel::after, .sign__sub a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }

/* ---------- Header ---------- */
.hd { position: fixed; inset: 0 0 auto 0; height: var(--hd); z-index: 100; display: flex; align-items: center; padding-left: clamp(12px, 3.6vw, 52px); color: var(--cr-white); }
.hd::before { content: ""; position: absolute; inset: 0; background: var(--cr-stone); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .45s var(--ease); }
.hd::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line-light); transition: opacity .45s var(--ease); }
.hd.is-solid, .menu-open .hd { color: var(--cr-navy); }
.hd.is-solid::before, .menu-open .hd::before { opacity: 1; }
.hd.is-solid::after, .menu-open .hd::after { opacity: 0; }
.is-opening .hd { color: var(--cr-navy); }
.is-opening .hd::after { opacity: 0; }
.hd > * { position: relative; }
.hd { transition: color .45s var(--ease); }

.burger { display: inline-flex; align-items: center; gap: 12px; min-height: var(--cr-tap); min-width: var(--cr-tap); padding: 0 6px; }
.burger__lines { position: relative; width: 28px; height: 14px; }
.burger__lines span { position: absolute; left: 0; width: 28px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), opacity .25s; }
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 6px; }
.burger__lines span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.burger__label { font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; }

/* The wordmark appears in the bar once the film has scrolled away (the reference hides its logo over the film). */
.hd__brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: var(--cr-tap); white-space: nowrap; font: var(--cr-w-semibold) 12px/1 var(--cr-font-ui); letter-spacing: .16em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.hd.is-solid .hd__brand, .menu-open .hd__brand { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.hd__member { margin-left: auto; margin-right: clamp(16px, 2.4vw, 36px); display: inline-flex; align-items: center; min-height: var(--cr-tap); font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; }
.hd__member:hover { text-decoration: underline; text-underline-offset: 5px; }
.hd__book { display: grid; place-items: center; align-self: stretch; padding: 0 clamp(18px, 2vw, 30px); min-width: 102px; background: var(--cr-navy); color: var(--cr-white); font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; transition: background-color var(--cr-dur-fast) ease; }
.hd__book:hover { background: var(--cr-navy-deep); }
.hd__book::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--cr-gold); }
.hd__book { position: relative; }
.hd__book-short { display: none; }

/* ---------- Menu ---------- */
.menu { position: fixed; inset: var(--hd) 0 0 0; z-index: 90; background: var(--cr-stone); display: grid; grid-template-columns: 1fr 1fr; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .4s var(--ease); }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__list { padding: clamp(40px, 7vh, 96px) clamp(24px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; gap: 2px; border-right: 1px solid var(--line); }
.menu__list a { position: relative; display: flex; align-items: center; min-height: 48px; padding-left: 26px; font: 500 clamp(24px, 2.4vw, 34px)/1.15 var(--cr-font); letter-spacing: .04em; text-transform: uppercase; color: var(--cr-navy); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color var(--cr-dur-fast) ease; transition-delay: calc(var(--i, 0) * 35ms + 80ms); }
.menu__list a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 1.5px solid var(--cr-gold); border-right: 1.5px solid var(--cr-gold); transform: rotate(45deg); }
.menu__list a:hover { color: var(--cr-orange-text); }
.menu.is-open .menu__list a { opacity: 1; transform: none; }
.menu__cells { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(200px, auto); }
.cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 36px 40px; text-align: center; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cell:nth-child(2n) { border-right: 0; }
.cell__kicker { font: var(--cr-w-semibold) var(--cr-label)/1.2 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; color: var(--cr-body); }
.cell__big { font: 500 clamp(26px, 2.2vw, 34px)/1.15 var(--cr-font); color: var(--cr-navy); }
.cell__text { font-size: 16px; line-height: 1.5; color: var(--cr-ink); max-width: 30ch; }
.cell__icon { width: 48px; height: 48px; color: var(--cr-gold); }
.tel { color: var(--cr-navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cell--left { align-items: flex-start; text-align: left; }
.cell--links { gap: 0; }
.cell--links .ulink { min-height: 40px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--cr-stone); }
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__poster, .hero__film, .hero__view, .hero__view img, .hero__view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__film { opacity: 0; transition: opacity .9s var(--ease); }
.hero__film.is-on { opacity: 1; }
/* The view is the club's own film over its first frame (main.js HERO_FILM).
   Views cross-fade. A photograph moves forward only, a slow Ken Burns zoom from 1 to 1.1 over 30 s that holds at the
   end (never back and forth); it restarts from 1 each time its view is chosen. None under reduced motion. */
.hero__view { opacity: 0; transition: opacity .9s var(--ease); }
.hero__view.is-on { opacity: 1; }
.hero__view img { transform-origin: 50% 60%; }
.hero__view.is-on img.kb { animation: kb 30s cubic-bezier(.25, .1, .25, 1) both; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.1); } }
.rm .hero__view.is-on img.kb { animation: none; }
/* The top scrim is deep enough under the header for white MENU and MEMBERSHIP to read at 4.5:1 over the brightest sky. */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.62) 0, rgba(0,0,0,.6) 50px, rgba(0,0,0,.36) 100px, rgba(0,0,0,.15) 155px, rgba(0,0,0,0) 215px), linear-gradient(0deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 46%); }
/* Opening (JavaScript only): stone, then the hero picture and its words fade in together. */
.is-opening .hero__media, .is-opening .hero::after { opacity: 0; }
.js .hero__media, .js .hero::after { transition: opacity .6s var(--ease); }
.is-opening .hero__copy { opacity: 0; transform: translateY(10px); }
.hero__copy { transition: opacity .6s var(--ease) .05s, transform .6s var(--ease) .05s; }

.hero__copy { position: absolute; z-index: 2; left: 50%; bottom: clamp(96px, 14vh, 140px); width: min(92vw, 820px); transform: translateX(-50%); text-align: center; color: var(--cr-white); }
.is-opening .hero__copy { transform: translate(-50%, 10px); }
.hero__kicker { font: var(--cr-w-semibold) var(--cr-label)/1.2 var(--cr-font-ui); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero__title { margin: 12px 0 8px; font: 500 clamp(42px, 6vw, 84px)/1 var(--cr-font); letter-spacing: -.01em; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.hero__links { display: flex; justify-content: center; gap: 28px; }

/* The film's pause control (27 Oct): 44 px, bottom left on desktop (the sun's path is bottom right), top right under
   the header from 999 px down. */
.film-toggle { position: absolute; z-index: 3; left: clamp(16px, 2.4vw, 32px); bottom: clamp(20px, 4.6vh, 48px); display: grid; place-items: center; width: var(--cr-tap); height: var(--cr-tap); border-radius: 50%; border: 1px solid var(--line-light); background: rgba(0, 0, 0, .28); color: var(--cr-white); cursor: pointer; transition: background-color var(--cr-dur-fast) ease, border-color var(--cr-dur-fast) ease, opacity .6s var(--ease) .05s; }
.film-toggle[hidden] { display: none; }
.film-toggle:hover { background: rgba(0, 0, 0, .45); border-color: var(--cr-white); }
.film-toggle:focus-visible { outline: 2px solid var(--cr-white); outline-offset: 3px; }
.film-toggle svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.film-toggle .film-toggle__play, .film-toggle[aria-pressed="true"] .film-toggle__pause { display: none; }
.film-toggle[aria-pressed="true"] .film-toggle__play { display: block; }
.is-opening .film-toggle { opacity: 0; }
@media (max-width: 999px) { .film-toggle { left: auto; right: 12px; bottom: auto; top: calc(var(--hd) + 12px); } }

/* ---------- Pinned intro ---------- */
.pinwrap { position: relative; }
.intro { position: sticky; top: var(--hd); z-index: 0; background: var(--cr-white); }
.intro__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: clamp(300px, 38vh, 380px); padding: 56px 24px; text-align: center; transform-origin: 50% 40%; }
.tile-row--first { position: relative; z-index: 1; background: var(--cr-white); }
.rm .intro { position: relative; top: auto; }
.intro__line { max-width: 980px; font: 500 clamp(22px, 2.3vw, 34px)/1.4 var(--cr-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cr-navy); }
.intro__line em { font-style: italic; font-weight: var(--cr-w-regular); font-size: 1.5em; line-height: 1; letter-spacing: -.01em; text-transform: none; color: var(--cr-orange-text); }
.intro__rule { display: inline-block; width: 48px; height: 1.5px; margin-left: 14px; vertical-align: middle; background: var(--cr-gold); }

/* ---------- Tiles ---------- */
.tiles { position: relative; z-index: 1; background: var(--cr-white); }
/* 24 Oct: the tiles sit in a white mount (the reference's run edge to edge with hairline joins). */
.pinwrap, .tiles { --mount: clamp(8px, 1vw, 14px); }
.tile-row { display: flex; gap: var(--mount); padding: 0 var(--mount); }
.tile-row + .tile-row, .tiles > .tile-row:first-child { margin-top: var(--mount); }
.tile { position: relative; flex: 1 1 0; display: block; height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); min-height: 460px; overflow: hidden; background: var(--cr-stone); color: var(--cr-white); }
.tile__media { position: absolute; inset: 0; }
.tile__media img, .tile__media video { width: 100%; height: 100%; object-fit: cover; }
.tile__media picture { display: contents; }
.tile__media video { position: absolute; inset: 0; }
/* Without JavaScript the films never get a source: show their stills, never an empty player (A19). */
html:not(.js) video { display: none; }
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.16) 42%, rgba(0,0,0,.58)), linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 60%); }
.tile__media img, .tile__media video { transition: transform 1.6s var(--ease); }
.tile:hover .tile__media img, .tile:hover .tile__media video { transform: scale(1.03); }
/* Entrance: the white mount draws back to the right to show the tile (the pair's second a beat later), then the
   word and its fact come in from the left. Transform only. */
.tile::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--cr-white); transform-origin: 100% 50%; transform: scaleX(0); pointer-events: none; }
.js .tile::before { transform: scaleX(1); transition: transform 1.05s cubic-bezier(.77, 0, .18, 1) var(--d, 0s); }
.js .tile.is-in::before { transform: scaleX(0); }
.tile-row .tile + .tile { --d: .12s; }
.js .tile__media { transform: scale(1.05); transition: transform 1.8s var(--ease) var(--d, 0s); }
.js .tile.is-in .tile__media { transform: none; }
/* The word and its fact sit at the foot, left: the word upright in Cormorant, the fact beside a white hairline
   (the reference centres one huge script word). Discover moves to the right, a rule after it that runs on on hover. */
/* The word's foot is at the same height in every tile, so a pair's words line up; the fact hangs below it. */
.tile__word { position: absolute; left: clamp(22px, 3.6vw, 56px); right: clamp(22px, 3.6vw, 56px); bottom: clamp(182px, 23vh, 214px); text-align: left; }
.tile__title { font: 400 clamp(48px, 6vw, 104px)/.95 var(--cr-font); letter-spacing: -.02em; text-shadow: 0 2px 28px rgba(0,0,0,.3); }
.tile--full .tile__title { font-size: clamp(54px, 8vw, 136px); }
.tile__cap { position: absolute; left: 0; top: 100%; margin-top: 18px; padding-left: 16px; border-left: 1px solid var(--cr-white); max-width: 44ch; font: var(--cr-w-regular) 15px/1.5 var(--cr-font-ui); text-wrap: pretty; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.js .tile__title, .js .tile__cap { opacity: 0; transform: translateX(-20px); transition: opacity .9s var(--ease) calc(var(--d, 0s) + .45s), transform .9s var(--ease) calc(var(--d, 0s) + .45s); }
.js .tile__cap { transition-delay: calc(var(--d, 0s) + .58s); }
.js .tile.is-in .tile__title, .js .tile.is-in .tile__cap { opacity: 1; transform: none; }
.tile__cta { position: absolute; right: clamp(22px, 3.6vw, 56px); bottom: clamp(20px, 4.4vh, 48px); display: inline-flex; align-items: center; gap: 14px; min-height: var(--cr-tap); font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.tile__cta::after { content: ""; width: 40px; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform .5s var(--ease); }
.tile:hover .tile__cta::after, .tile:focus-visible .tile__cta::after { transform: scaleX(1.8); }
/* The tile at the right edge keeps its Discover clear of the fixed Ask button. */
.tile:last-child .tile__cta { right: calc(clamp(16px, 2.4vw, 32px) + 250px); }
.tile:hover .tile__cta, .tile:focus-visible .tile__cta { color: var(--cr-gold-pale); }
.tile:focus-visible { outline-offset: -4px; outline-color: var(--cr-white); }

/* ---------- Numbers ---------- */
.numbers { padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 60px) clamp(48px, 6vw, 80px); background: var(--cr-white); }
.numbers ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px 24px; max-width: 1180px; margin: 0 auto; }
.numbers li { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.numbers__big { display: flex; align-items: baseline; justify-content: center; padding-top: 40px; width: 112px; height: 112px; border: 1px solid var(--line); border-radius: 50%; font: 600 30px/1 var(--cr-font); color: var(--cr-navy); letter-spacing: .01em; }
.numbers__big small { font-size: 14px; font-weight: var(--cr-w-regular); margin-left: 2px; }
.numbers__big--word { font-size: 20px; letter-spacing: .08em; padding-top: 44px; }
.numbers__label { font: var(--cr-w-semibold) var(--cr-label)/1.4 var(--cr-font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--cr-body); max-width: 18ch; }
.js .numbers li { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .numbers.is-in li { opacity: 1; transform: none; }

/* ---------- Sign-off ---------- */
.sign { padding: clamp(40px, 5vw, 64px) 24px clamp(88px, 10vw, 140px); text-align: center; background: var(--cr-white); }
.sign__title { font: italic 500 clamp(50px, 6vw, 92px)/1 var(--cr-font); letter-spacing: -.015em; color: var(--cr-navy); text-wrap: balance; }
.sign__sub { max-width: 52ch; margin: 22px auto 34px; font-size: var(--cr-body-size); color: var(--cr-body); }
.sign__sub a { color: var(--cr-navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pillbtn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 30px; border: 1px solid var(--cr-navy); border-radius: 40px; font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; color: var(--cr-navy); transition: background-color var(--cr-dur-fast) ease, color var(--cr-dur-fast) ease; }
.pillbtn svg { width: 20px; height: 20px; color: var(--cr-gold); }
.pillbtn:hover { background: var(--cr-navy); color: var(--cr-white); }
.pillbtn:hover svg { color: var(--cr-gold-light); }
/* Before you come: five answers in arrival order, a hairline list with the numbers' circle as the marker. */
.faq { max-width: 680px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: left; }
.faq__title { margin: 0 0 14px; font: var(--cr-w-semibold) var(--cr-label)/1.2 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; color: var(--cr-orange-text); text-align: center; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 8px 0; list-style: none; cursor: pointer; font: 500 clamp(19px, 1.5vw, 22px)/1.3 var(--cr-font); color: var(--cr-navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__mark { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; transition: transform var(--cr-dur-fast) ease; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1px; background: var(--cr-gold); transform: translate(-50%, -50%); }
.faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__mark { transform: rotate(45deg); }
.faq__a { max-width: 60ch; padding: 0 0 22px; color: var(--cr-body); }

/* ---------- Footer (navy, brand rule) ---------- */
.ft { padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 60px) 36px; background: var(--cr-navy); color: var(--cr-white); }
.ft__cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: start; max-width: 1320px; margin: 0 auto; }
.ft__links { display: flex; flex-direction: column; align-items: flex-start; }
.ft__links .ulink, .ft__addr .ulink { min-height: 36px; }
.ft__mid { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.ft__social { display: flex; gap: 24px; }
.ft__addr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 15px; line-height: 1.6; }
.ft__addr p { margin-bottom: 8px; }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; max-width: 1320px; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); font-size: var(--cr-caption); color: var(--cr-white); }
.ft__legal a { display: inline-flex; align-items: center; min-height: var(--cr-tap); margin: -12px 0; text-decoration: underline; text-underline-offset: 3px; }
.ft__legal a:hover { color: var(--cr-gold-light); }
.ft__legal span { display: inline-flex; align-items: center; }

/* ---------- Ask: the one control in the bottom-right corner ---------- */
/* It opens the club's AI Concierge (Capture) through the widget's own launcher, which is hidden so only this sits in
   the corner. Without the widget it goes to the footer's phone and email. Navy, caps label, orange rule (the BOOK
   block's language). */
.ask { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 28px); z-index: 80; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 48px; background: var(--cr-navy); color: var(--cr-white); box-shadow: 0 10px 30px rgba(0, 20, 40, .3); border: 1px solid rgba(255, 255, 255, .45); font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; transition: background-color var(--cr-dur-fast) ease, transform .3s var(--ease); }
.ask:hover { background: var(--cr-navy-deep); transform: translateY(-2px); }
.ask svg { width: 20px; height: 20px; color: var(--cr-gold); }
.ask:focus-visible { outline-color: var(--cr-gold); }
.menu-open .ask { visibility: hidden; }
#cc-bubble { display: none !important; }
/* The widget's own teaser ("Want to chat about ...") sits outside its launcher and covered the footer's legal line on
   a phone (30 Oct 2026). The Ask button is the one invitation in the corner. */
#cc-proactive-wrap, #cc-proactive { display: none !important; }
.ft__addr:focus { outline: none; }

/* ---------- The clubhouse chapter (Windlesham) ----------
   It slides over the pinned line, as Terrace's first tile row does: a navy band in the white mount with the club's own
   film of life in the clubhouse (a loop, muted, playing only while on screen), Watch the film (the club's 66 s film,
   in a dialog), the four rooms from the club's own photographs, and the tour booking. */
.house { position: relative; z-index: 1; padding: var(--mount) var(--mount) 0; background: var(--cr-white); }
.house__band { padding: clamp(64px, 8vw, 128px) clamp(20px, 5vw, 80px) clamp(56px, 7vw, 104px); background: var(--cr-navy); color: var(--cr-white); }
.house__head, .house__film, .rooms, .house__foot { max-width: 1320px; margin-left: auto; margin-right: auto; }
.house__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4.4vw, 60px); }
.house__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: var(--cr-w-semibold) var(--cr-label)/1.2 var(--cr-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--cr-gold); }
.house__kicker::before { content: ""; width: 40px; height: 1px; background: var(--cr-gold); }
.house__title { font: 400 clamp(56px, 8.4vw, 148px)/.9 var(--cr-font); letter-spacing: -.025em; text-wrap: balance; }
.house__title em { font-style: italic; color: var(--cr-gold-pale); }
.house__lede { max-width: 46ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: rgba(255, 255, 255, .86); }
.house__lede strong { color: var(--cr-white); font-weight: 600; }
.house__film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cr-navy-deep); }
.house__film img, .house__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.house__film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 20, 40, .55), rgba(0, 20, 40, 0) 38%); }
.js .house__film { clip-path: inset(6% 6% 6% 6%); transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1); }
.js .house__film.is-in { clip-path: inset(0 0 0 0); }
.watch { position: absolute; z-index: 2; left: clamp(16px, 2.6vw, 40px); bottom: clamp(16px, 2.6vw, 36px); display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 26px 0 8px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 40px; background: rgba(0, 20, 40, .35); color: var(--cr-white); font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color var(--cr-dur-fast) ease, border-color var(--cr-dur-fast) ease; }
.watch:hover { background: rgba(0, 20, 40, .6); border-color: var(--cr-white); }
.watch__play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cr-gold); color: var(--cr-navy); }
.watch__play svg { width: 14px; height: 14px; margin-left: 2px; }
.watch:focus-visible { outline-color: var(--cr-white); }
.film-toggle--house { left: auto; right: clamp(16px, 2.6vw, 40px); bottom: clamp(22px, 2.6vw, 42px); top: auto; }
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); margin-top: clamp(36px, 4.4vw, 60px); }
.room { margin: 0; }
.room__pic { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cr-navy-deep); }
.room__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.room:hover .room__pic img { transform: scale(1.04); }
.room__name { margin: 18px 0 6px; font: 500 clamp(26px, 2.2vw, 34px)/1.05 var(--cr-font); }
.room__fact { max-width: 34ch; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.js .room { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rooms.is-in .room { opacity: 1; transform: none; }
.house__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .2); }
.pillbtn--gold { border-color: var(--cr-gold); color: var(--cr-white); }
.pillbtn--gold svg { color: var(--cr-gold); }
.pillbtn--gold:hover { background: var(--cr-gold); color: var(--cr-navy); }
.pillbtn--gold:hover svg { color: var(--cr-navy); }
.house__foot .ulink { min-height: var(--cr-tap); }

/* Watch the film: the club's whole film in a dialog, with the browser's own controls. */
.watchdlg { width: min(92vw, 1400px); max-width: none; max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.watchdlg::backdrop { background: rgba(0, 14, 28, .92); }
.watchdlg video { width: 100%; height: auto; max-height: 86vh; aspect-ratio: 16 / 9; background: #000; }
.watchdlg__close { position: absolute; right: 0; top: -56px; display: inline-flex; align-items: center; gap: 10px; min-height: var(--cr-tap); padding: 0 4px; color: var(--cr-white); font: var(--cr-w-semibold) var(--cr-label)/1 var(--cr-font-ui); letter-spacing: var(--cr-label-tracking); text-transform: uppercase; }
.watchdlg__close svg { width: 18px; height: 18px; }
.watchdlg__close:focus-visible { outline-color: var(--cr-white); }

/* ---------- Tablet: pairs stack, tiles 70% of the screen ---------- */
@media (max-width: 999px) {
  .tile-row { flex-direction: column; }
  .tile { flex: none; height: 70vh; height: 70svh; min-height: 420px; }
  .tile__title { font-size: clamp(42px, 9vw, 88px); }
  .tile--full .tile__title { font-size: clamp(46px, 10vw, 100px); }
  .tile-row .tile + .tile { --d: 0s; }
  .tile-row .tile .tile__cta { right: calc(clamp(16px, 2.4vw, 32px) + 250px); }   /* stacked: every tile meets the Ask button */
  .menu { grid-template-columns: 1fr; }
  .menu__list { border-right: 0; border-bottom: 1px solid var(--line); justify-content: flex-start; }
  .numbers ul { grid-template-columns: repeat(3, 1fr); }
  .ft__cols { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ft__links { align-items: center; order: 2; }
  .ft__mid { order: 1; }
  .ft__addr { align-items: center; text-align: center; order: 3; }
  .house__head { grid-template-columns: 1fr; }
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
}

/* ---------- Phone ---------- */
@media (max-width: 599px) {
  .burger__label { display: none; }
  .hd__brand { font-size: 12px; letter-spacing: .1em; }
  .hd__member { display: none; }
  .hd__book { min-width: 0; margin-left: auto; padding: 0 18px; }
  .hd__book-long { display: none; }
  .hd__book-short { display: inline; }
  .hero__copy { bottom: 108px; }
  .hero__links { gap: 22px; }
  .ask { width: 48px; padding: 0; justify-content: center; }
  .tile-row .tile .tile__cta { right: 88px; }
  .ft { padding-bottom: 88px; }   /* the legal line clear of the Ask button */
  .ask span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tile__word { bottom: 188px; }
  .tile__cap { font-size: 15px; }
  .intro__rule { display: none; }
  .tile { height: 85vh; height: 85svh; min-height: 0; }
  .menu__cells { grid-template-columns: 1fr; }
  .cell { border-right: 0; padding: 30px 24px; }
  .numbers ul { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
  .numbers__big { width: 104px; height: 104px; font-size: 24px; padding-top: 37px; }
  .numbers__big--word { padding-top: 41px; }
  /* The clubhouse: the film taller than 16:9 so it fills a phone, the rooms a swipeable row. */
  .house__band { padding-left: 16px; padding-right: 16px; }
  .house__film { aspect-ratio: 4 / 5; margin: 0 -16px; }
  .watch { padding-right: 20px; }
  .rooms { display: flex; gap: 12px; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rooms::-webkit-scrollbar { display: none; }
  .room { flex: 0 0 76%; scroll-snap-align: start; }
  .house__foot { flex-direction: column; align-items: flex-start; }
}

/* Gentle photo parallax (James, 24 Oct): each tile photograph sits 8% larger than its tile and drifts 3.5% of the
   tile's height either side of centre as the tile crosses the screen, slower than the tile (main.js sets --px on the
   tile). The word and its fact sit on the shade, fixed to the tile, so only the photograph moves. translate and scale
   are the individual transform properties, so they compose with the hover zoom and the entrance. Film stills stay
   still under their films. Off under reduced motion. */
.px { scale: 1.08; translate: 0 var(--px, 0px); }
.rm .px { scale: none; translate: none; }

/* ---------- Reduced motion: calm and complete ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__film, .hero__view, .hero__media, .hero::after, .ask, .hero__copy, .hero__kicker, .hero__title, .tile::before, .tile__media, .tile__media img, .tile__media video, .tile__title, .tile__cap, .numbers li, .menu, .menu__list a, .hd, .hd::before, .hd__brand { transition: none !important; }
  .js .tile__media, .js .tile__title, .js .tile__cap, .js .numbers li, .js .room { opacity: 1; transform: none; transition: none; }
  .js .house__film { clip-path: none; transition: none; }
  .js .tile::before { transform: scaleX(0); }
  .px { scale: none; translate: none; }
}