/* ==========================================================================
   Red Hawk Golf Club — site stylesheet
   Implemented from design/Red Hawk Golf Club.dc.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

/* Self-hosted,
so no render-blocking round trip to a third-party origin.
   Montserrat is the variable cut (300-800 in one file),
latin subset only --
   U+0000-00FF covers everything on the site including the n-tilde in Dona Ana.
   font-display: swap so text paints immediately in the fallback and reflows,
rather than staying invisible while the font arrives. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AltGothic';
  src: url('../fonts/AlternateGotNo1D.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --ink: #1d1d1f;
  --ink-deep: #141312;
  --ink-rgb: 20, 18, 16;
  --brand: #b03825;
  --brand-dark: #8d2b1c;
  --bone: #faf8f5;
  --line: #e6e1da;
  --line-input: #ddd6cc;
  --body: #5c5854;
  --body-strong: #3a3735;
  --muted: #75706d;   /* was #8a8480 — 3.5:1 on bone, under WCAG AA for small labels */

  /* Colour on dark ground */
  --on-dark: rgba(255, 255, 255, .72);
  --on-dark-dim: rgba(255, 255, 255, .6);
  --on-dark-faint: rgba(255, 255, 255, .58);
  --rule-dark: rgba(255, 255, 255, .14);

  /* Type */
  --display: AltGothic, Oswald, sans-serif;
  --sans: Montserrat, sans-serif;

  /* Layout */
  --wrap: 1440px;
  --wrap-wide: 1600px;
  --gutter: clamp(20px, 3vw, 40px);
  --section-y: 96px;
  --section-y-lg: 110px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  font-family: var(--sans);
  color: var(--ink);
  text-wrap: pretty;
}

img,
video { max-width: 100%; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color .2s, background-color .2s, border-color .2s;
}

a:hover { color: var(--brand-dark); }

h1, h2, h3, h4, p, blockquote, figure { margin: 0; }

::selection {
  background: var(--brand);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes rhFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Hero cycle - 28.4s total.

   Two rules govern this, and breaking either one is visible:

   1. A layer must never outlast its clip, or it sits frozen on its last frame.
      Each generated clip runs 5.04s, so a layer is on screen 5.0s:
      fade in 0.8s, hold 3.4s, fade out 0.8s.

   2. The handoff must be sequential, never a simultaneous cross-dissolve. The
      incoming layer fades in over the outgoing one while that one is still
      fully opaque, and only then does the outgoing one fade away. Two layers
      at 0.5 do not add up to cover: 1 - 0.5*0.5 = 0.75, so a quarter of the
      base clip shows through and the opening golfer ghosts into every
      transition. Something must always be at opacity 1.

   hero-tee-lg.mp4 runs 5.042s. t=0 is the moment the last layer is still fully
   opaque and about to fade: the clip is rewound there, behind it, and is
   already playing by the time the layer clears.

     0.0        last layer opaque; clip rewound to 0 behind it
     0.0 - 0.8  it fades out, revealing the clip already in motion
     0.8 - 3.8  clip, clear
     3.8 - 4.6  layer A fades in   <- clip covered at 4.6s of its 5.042s
     4.6 - 28.4 the 7 clips, 3.4s apart

   Generated arithmetic - percentages are seconds/28.4. Layers carry a
   -0.8s delay so the page opens on the clip. */

@keyframes rhHeroA {
  0.000% { opacity: 0; }
  13.380% { opacity: 0; }   /*   3.80s  begins over the layer below,
still at 1 */
  16.197% { opacity: 1; }   /*   4.60s  fully opaque -- the one below may now fade */
  28.169% { opacity: 1; }   /*   8.00s  holds until the next is fully opaque */
  30.986% { opacity: 0; }   /*   8.80s  gone at 5.00s of its 5.04s clip */
  100.000% { opacity: 0; }
}

@keyframes rhHeroB {
  0.000% { opacity: 0; }
  25.352% { opacity: 0; }   /*   7.20s  begins over the layer below,
still at 1 */
  28.169% { opacity: 1; }   /*   8.00s  fully opaque -- the one below may now fade */
  40.141% { opacity: 1; }   /*  11.40s  holds until the next is fully opaque */
  42.958% { opacity: 0; }   /*  12.20s  gone at 5.00s of its 5.04s clip */
  100.000% { opacity: 0; }
}

@keyframes rhHeroC {
  0.000% { opacity: 0; }
  37.324% { opacity: 0; }   /*  10.60s  begins over the layer below,
still at 1 */
  40.141% { opacity: 1; }   /*  11.40s  fully opaque -- the one below may now fade */
  52.113% { opacity: 1; }   /*  14.80s  holds until the next is fully opaque */
  54.930% { opacity: 0; }   /*  15.60s  gone at 5.00s of its 5.04s clip */
  100.000% { opacity: 0; }
}

@keyframes rhHeroD {
  0.000% { opacity: 0; }
  49.296% { opacity: 0; }   /*  14.00s  begins over the layer below,
still at 1 */
  52.113% { opacity: 1; }   /*  14.80s  fully opaque -- the one below may now fade */
  64.085% { opacity: 1; }   /*  18.20s  holds until the next is fully opaque */
  66.901% { opacity: 0; }   /*  19.00s  gone at 5.00s of its 5.04s clip */
  100.000% { opacity: 0; }
}

@keyframes rhHeroE {
  0.000% { opacity: 0; }
  61.268% { opacity: 0; }   /*  17.40s  begins over the layer below,
still at 1 */
  64.085% { opacity: 1; }   /*  18.20s  fully opaque -- the one below may now fade */
  76.056% { opacity: 1; }   /*  21.60s  holds until the next is fully opaque */
  78.873% { opacity: 0; }   /*  22.40s  gone at 5.00s of its 5.04s clip */
  100.000% { opacity: 0; }
}

@keyframes rhHeroF {
  0.000% { opacity: 0; }
  73.239% { opacity: 0; }   /*  20.80s  begins over the layer below,
still at 1 */
  76.056% { opacity: 1; }   /*  21.60s  fully opaque -- the one below may now fade */
  88.028% { opacity: 1; }   /*  25.00s  holds until the next is fully opaque */
  90.845% { opacity: 0; }   /*  25.80s  gone at 5.00s of its 5.04s clip */
  100.000% { opacity: 0; }
}

/* The last still hands back to the clip, so it starts the cycle opaque. */
@keyframes rhHeroG {
  0.000% { opacity: 1; }
  2.817% { opacity: 0; }   /* 0.8s - clip revealed,
already playing */
  85.211% { opacity: 0; }   /*  24.20s */
  88.028% { opacity: 1; }   /*  25.00s */
  100.000% { opacity: 1; }
}

/* Only the progress dot follows the clip's window; the clip itself stays
   opaque underneath the stills. */
@keyframes rhHeroVideo {
  0.000% { opacity: 0; }
  2.817% { opacity: 1; }   /* 0.8s - last layer gone,
clip clear */
  13.380% { opacity: 1; }   /* 3.8s */
  16.197% { opacity: 0; }   /* 4.6s - A covers it */
  100.000% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
}
.wrap--1080 { max-width: 1080px; }
.wrap--1000 { max-width: 1000px; }
.wrap--900 { max-width: 900px; }
.wrap--820 { max-width: 820px; }
.wrap--760 { max-width: 760px; }

.section {
  background: #fff;
  padding: var(--section-y) var(--gutter);
}

.section--lg { padding-block: var(--section-y-lg); }
.section--bone { background: var(--bone); }
.section--ink { background: var(--ink); color: #fff; }
.section--flush { padding: 0; }
.section--center { text-align: center; }

/* --------------------------------------------------------------------------
   5. Type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}

.eyebrow--wide { letter-spacing: .26em; margin-bottom: 16px; }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: .94;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: inherit;
}

.display--hero { font-size: clamp(56px, 7.6vw, 116px); line-height: .9; }
.display--page { font-size: clamp(46px, 6.4vw, 96px);  line-height: .9; }
.display--page-lg { font-size: clamp(48px, 6.6vw, 104px); line-height: .9; }
.display--xl { font-size: clamp(40px, 5.4vw, 78px); }
.display--lg { font-size: clamp(40px, 5vw, 72px); }
.display--md { font-size: clamp(36px, 4.2vw, 62px); }
.display--sm { font-size: clamp(34px, 3.8vw, 56px); line-height: .95; }
.display--xs { font-size: clamp(30px, 3.2vw, 44px); line-height: .98; }

.lede {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--body);
}

.lede--lg { font-size: 17px; color: var(--body-strong); }
.lede--xl { font-size: 19px; line-height: 1.85; color: var(--body-strong); }
.lede--sm { font-size: 13.5px; line-height: 1.8; }
.lede + .lede { margin-top: 18px; }

.rule {
  width: 58px;
  height: 2px;
  background: var(--brand);
  border: 0;
  margin: 26px 0 0;
}

.rule--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn:hover { background: var(--brand-dark); color: #fff; }

.btn__tick {
  width: 16px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(29, 29, 31, .25);
  font-weight: 600;
}

.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  font-weight: 600;
}

.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.textlink--underline {
  color: #fff;
  border-bottom: 1px solid var(--brand);
  padding-bottom: 6px;
}

.textlink--underline:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   7. Top bar + header
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--ink);
  color: var(--on-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 9px var(--gutter);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.topbar__group {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
}

.topbar a { color: var(--on-dark); }
.topbar a:hover { color: #fff; }
.topbar__sep { color: rgba(255, 255, 255, .3); }

.siteheader {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.siteheader__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px clamp(14px, 1.8vw, 32px);
  padding: 14px var(--gutter);
}

.siteheader__logo { display: block; flex: none; }

/* Capped at 76px: the animated mark is only 176x100 natively,
so a taller
   logo than this starts to soften. */
.siteheader__logo img {
  height: clamp(52px, 5.2vw, 76px);
  width: auto;
  display: block;
}

/* The animated mark is the default. A looping GIF cannot be paused from CSS,
so the still logo stands in for visitors who have asked for less motion. */
.siteheader__logo .siteheader__logo-still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .siteheader__logo .siteheader__logo-anim { display: none; }
  .siteheader__logo .siteheader__logo-still { display: block; }
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px clamp(12px, 1.7vw, 30px);
  font-size: clamp(9.5px, .85vw, 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__link {
  position: relative;
  color: var(--ink);
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav__link:hover { color: var(--brand); }

/* The dropdown parent is a button, not a link -- it opens a menu rather than
   going anywhere. Strip the UA button styling so it sits identically to the
   anchors beside it. */
.nav__link--toggle {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
}

.nav__link[aria-current="page"]::after,
.nav__item--active > .nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand);
}

.nav__item {
  position: relative;
  padding: 8px 0;
}

.nav__item--active > .nav__link::after { bottom: -8px; }

.nav__caret {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--brand);
  border-bottom: 1.5px solid var(--brand);
  transform: rotate(45deg);
  margin-top: -3px;
  flex: none;
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 238px;
  background: var(--ink);
  padding: 10px 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  display: none;
}

.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item[data-open="true"] > .nav__menu { display: block; }

.nav__menu a {
  display: block;
  padding: 12px 22px;
  color: rgba(255, 255, 255, .8);
  font-size: 10.5px;
  letter-spacing: .16em;
}

.nav__menu a:hover {
  background: var(--brand);
  color: #fff;
}

.siteheader__cta {
  flex: none;
  padding: 14px clamp(16px, 1.7vw, 24px);
  font-size: clamp(9.5px, .8vw, 10.5px);
  letter-spacing: .16em;
  white-space: nowrap;
}

.siteheader__cta .btn__tick { width: 14px; }

.navtoggle {
  display: none;
  flex: none;
  width: 44px;
  height: 40px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}

.navtoggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   8. Home hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: min(94vh, 1000px);
  min-height: 680px;
  overflow: hidden;
  background: var(--ink);
}

.hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The clip is the bottom layer and stays opaque; the stills cover it in turn. */
.hero__layer--video { opacity: 1; object-position: center 35%; }

.hero__layer--a,
.hero__layer--b,
.hero__layer--c,
.hero__layer--d,
.hero__layer--e,
.hero__layer--f,
.hero__layer--g {
  opacity: 0;
  animation-duration: 28.4s;
  animation-delay: -0.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* object-position keeps each subject in frame once the wide hero crop bites. */
.hero__layer--a { animation-name: rhHeroA; object-position: center 55%; }
.hero__layer--b { animation-name: rhHeroB; object-position: center 32%; }
.hero__layer--c { animation-name: rhHeroC; object-position: center 50%; }
.hero__layer--d { animation-name: rhHeroD; object-position: center 40%; }
.hero__layer--e { animation-name: rhHeroE; object-position: center 50%; }
.hero__layer--f { animation-name: rhHeroF; object-position: center 0%; }   /* keeps his cap and club in frame at every viewport */
.hero__layer--g { animation-name: rhHeroG; object-position: center 50%; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(var(--ink-rgb), .86) 0%,
    rgba(var(--ink-rgb), .55) 42%,
    rgba(var(--ink-rgb), .08) 72%);
}

.hero__inner {
  position: relative;
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__copy {
  max-width: 660px;
  animation: rhFade .9s ease both;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.hero__kicker span:first-child {
  width: 46px;
  height: 1px;
  background: var(--brand);
  flex: none;
}

.hero__kicker span:last-child {
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .85;
}

.hero h1 { color: #fff; }
/* A home hero heading the CMS draws at another level (data-retag) looks the same. */
.hero__copy > [data-retag] { color: #fff; }
.hero h1 em { font-style: normal; color: var(--brand); }

.hero__lede {
  max-width: 430px;
  margin: 28px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, .8);
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 38px;
  flex-wrap: wrap;
}

.hero__dots {
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__dots span {
  position: relative;
  display: block;
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, .35);
}

/* Each dot rides the same curve as the layer it stands for,
so the marker
   crossfades in step with the picture. */
.hero__dots span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
  opacity: 0;
  animation-duration: 28.4s;
  animation-delay: -0.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hero__dots span:nth-child(1)::after { animation-name: rhHeroVideo; }
.hero__dots span:nth-child(2)::after { animation-name: rhHeroA; }
.hero__dots span:nth-child(3)::after { animation-name: rhHeroB; }
.hero__dots span:nth-child(4)::after { animation-name: rhHeroC; }
.hero__dots span:nth-child(5)::after { animation-name: rhHeroD; }
.hero__dots span:nth-child(6)::after { animation-name: rhHeroE; }
.hero__dots span:nth-child(7)::after { animation-name: rhHeroF; }
.hero__dots span:nth-child(8)::after { animation-name: rhHeroG; }

@media (prefers-reduced-motion: reduce) {
  .hero__layer,
.hero__dots span::after { animation: none; }
  .hero__layer--a,
.hero__layer--b,
.hero__layer--c,
.hero__layer--d,
.hero__layer--e,
.hero__layer--f,
.hero__layer--g { opacity: 0; }
  .hero__dots span:nth-child(1)::after { opacity: 1; }
  .hero__copy { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   9. Interior page hero
   -------------------------------------------------------------------------- */

.pagehero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  height: 600px;
}

.pagehero--sm { height: 520px; }
.pagehero--md { height: 540px; }
.pagehero--lg { height: 620px; }
.pagehero--xl { height: 640px; }

.pagehero > img,
.pagehero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pagehero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .85), rgba(var(--ink-rgb), .25));
}

.pagehero__scrim--deep {
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .88), rgba(var(--ink-rgb), .2));
}

.pagehero__scrim--deepest {
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .9), rgba(var(--ink-rgb), .25));
}

.pagehero__inner {
  position: relative;
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

/* Over photography the brand red eyebrow is unreadable -- measured against
   every page hero's own backdrop it lands between 1.04:1 and 2.52:1,
worst
   where a subject wears white. Red stays the eyebrow colour everywhere it sits
   on a solid light panel; on a hero it goes white,
like the heading under it. */
.pagehero .eyebrow,
.photoband .eyebrow {
  color: #fff;
}

.pagehero__lede {
  max-width: 470px;
  margin: 26px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
  color: rgba(255, 255, 255, .8);
}

/* --------------------------------------------------------------------------
   10. Stat bar
   -------------------------------------------------------------------------- */

.statbar { background: var(--ink); }

.statbar__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.statbar__cell {
  padding: 42px 34px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}

.statbar__cell:first-child { padding-left: 0; }
.statbar__cell:last-child { padding-right: 0; border-right: 0; }

.statbar__num {
  font-family: var(--display);
  font-size: 52px;
  line-height: 1;
  color: var(--brand);
}

.statbar__label {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}

.statbar p {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------------------
   11. Section headers
   -------------------------------------------------------------------------- */

.sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}

.sechead--tight { margin-bottom: 44px; gap: 32px; }

.sechead__main { max-width: 620px; }

.sechead__aside {
  max-width: 340px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   12. Numbered card grid
   -------------------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line);
}

.tiles--3 { grid-template-columns: repeat(3, 1fr); }

.tile {
  background: #fff;
  color: var(--ink);
  padding: 44px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 330px;
  transition: background .35s, color .35s;
}

.tile--flip:hover { background: var(--ink); color: #fff; }
.tile--flip:hover a { color: #fff; }

.tile--static { min-height: 0; padding: 44px 34px; gap: 0; }

.tile__icon {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--brand);
}

.tile__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile--static .tile__icon + .tile__title { margin-top: 22px; }

.tile__num {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .2em;
  color: var(--brand);
}

.tile__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
}

.tile--static .tile__title { font-size: 32px; margin-top: 14px; }

.tile__body {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;
  color: inherit;
  opacity: .72;
  flex: 1;
}

.tile--static .tile__body { margin-top: 14px; opacity: 1; color: var(--body); }

.tile__cta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Lifestyle cards (image + copy) */
.navcard {
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.navcard:hover { color: var(--ink); }
.navcard__media { height: 280px; overflow: hidden; }

.navcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s;
}

.navcard:hover .navcard__media img { transform: scale(1.04); }
.navcard__body { padding: 36px 32px 40px; }
.navcard__body h3 { margin-top: 12px; }
.navcard__body p { margin: 14px 0 22px; }

/* --------------------------------------------------------------------------
   13. Split (text + media)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.split--top { align-items: start; }
.split--gap70 { gap: 70px; }
.split--wide-right { grid-template-columns: 1fr 1.15fr; }
.split--wide-left { grid-template-columns: 1fr 1.2fr; }
.split--lead-left { grid-template-columns: 1.15fr 1fr; }
.split--contact { grid-template-columns: 1fr 1.1fr; align-items: start; }
.split--rates { grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }

/* Two instructor profiles side by side,
each photo over its own copy. */
.instructors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* One instructor rather than a pair: a lone card in a two-column grid leaves
   half the row empty, so the photo sits beside the bio instead. */
.instructors--single { grid-template-columns: 1fr; }

.instructors--single .instructor {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.instructors--single .instructor__photo { margin-bottom: 0; }

.instructor__bio > :first-child { margin-top: 0; }

@media (max-width: 900px) {
  .instructors--single .instructor { grid-template-columns: 1fr; }
}

/* The headshots are square,
so a square box crops nothing — no cut-off heads.
   Capped width keeps them from dominating the column. */
.instructor__photo {
  aspect-ratio: 1 / 1;
  max-width: 340px;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .instructors { grid-template-columns: 1fr; gap: 56px; }
}

.panelsplit {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* Spans the full viewport instead of capping at --wrap-wide,
so the panel
   reaches both edges on screens wider than 1600px. */
.panelsplit--bleed { max-width: none; }

.panelsplit__media {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.panelsplit__media--tall { min-height: 620px; }
.panelsplit__media--xtall { min-height: 560px; }

.panelsplit__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panelsplit__copy {
  padding: 96px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panelsplit__copy--pad100 { padding: 100px 72px; }

.badge {
  position: absolute;
  left: 34px;
  top: 34px;
  z-index: 1;
  background: var(--brand);
  color: #fff;
  padding: 11px 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. Figures & galleries
   -------------------------------------------------------------------------- */

.frame { overflow: hidden; }

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame--h280 { height: 280px; }
.frame--h300 { height: 300px; }
.frame--h340 { height: 340px; }
.frame--h440 { height: 440px; }
.frame--h460 { height: 460px; }
.frame--h520 { height: 520px; }

/* Matches a 4:3 source exactly,
so nothing is cropped. */
.frame--4x3 { aspect-ratio: 4 / 3; height: auto; }

.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mosaic__wide {
  grid-column: span 2;
  position: relative;
  height: 300px;
  overflow: hidden;
}

.mosaic__cell {
  position: relative;
  height: 270px;
  overflow: hidden;
}

.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mosaic__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.factrow {
  display: flex;
  gap: 36px;
  margin-top: 38px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.factrow__num {
  font-family: var(--display);
  font-size: 34px;
  color: var(--ink);
}

.factrow__label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* Family gallery — staggered five-up */
.familygrid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 var(--gutter);
  max-width: var(--wrap-wide);
  margin-inline: auto;
}

.familygrid > div {
  height: 330px;
  overflow: hidden;
}

.familygrid > div:nth-child(even) { margin-top: 34px; }

.familygrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s;
}

.familygrid img:hover { transform: scale(1.06); }

.triptych {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* --------------------------------------------------------------------------
   15. Awards band
   -------------------------------------------------------------------------- */

.awards {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: var(--ink);
}

.awards > img,
.awards > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.awards__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--ink-rgb), .9) 0%,
    rgba(var(--ink-rgb), .35) 55%,
    rgba(var(--ink-rgb), 0) 100%);
}

.awards__inner {
  position: relative;
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
}

.awards__card {
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 46px 44px;
  max-width: 470px;
  background: rgba(var(--ink-rgb), .35);
  color: #fff;
}

.awards__rank {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.awards__medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-family: var(--display);
  font-size: 19px;
  flex: none;
}

.awards__rank span:last-child {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .8;
}

.awards__card p {
  margin: 22px 0 30px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--on-dark);
}

.eventcard__date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.eventcard__month {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
}

.eventcard__day {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
}

.eventcard__title {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.05;
  text-transform: uppercase;
}

.eventcard__time {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

.eventcard__detail {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   17. FAQ accordion
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 4px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.faq__q:hover { color: var(--brand); }

.faq__sign {
  flex: none;
  color: var(--brand);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.faq__q[aria-expanded="true"] .faq__sign::before { content: "\2013"; }
.faq__q[aria-expanded="false"] .faq__sign::before { content: "+"; }

.faq__a {
  padding: 0 60px 28px 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--body);
}

.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   18. Rates
   -------------------------------------------------------------------------- */

.switch {
  display: flex;
  gap: 2px;
  background: var(--line);
  padding: 2px;
}

.switch__btn {
  padding: 14px 26px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  border: 0;
  font-family: var(--sans);
  cursor: pointer;
}

.switch__btn[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

.switch[hidden] { display: none; }

/* Shown only when JavaScript is off — the switch replaces these. */
.ratetable__caption {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ratetable__caption[hidden] { display: none; }
.ratetable__caption ~ .ratetable__caption { margin-top: 54px; }

.ratetable { border-top: 2px solid var(--ink); }
.ratetable[hidden] { display: none; }

.ratetable__row {
  display: grid;
  grid-template-columns: 180px 1fr 140px;
  align-items: center;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}

.ratetable__window {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand);
}

.ratetable__desc { font-size: 15px; font-weight: 400; }

.ratetable__price {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1;
  text-align: right;
}

.ratefoot {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
  align-items: center;
}

.ratefoot span {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.pricelist {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pricelist__row {
  display: flex;
  gap: 20px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 16px;
}

.pricelist__row:last-child { border-bottom: 0; padding-bottom: 0; }

.pricelist__amount {
  font-family: var(--display);
  font-size: 44px;
  color: var(--brand);
  line-height: 1;
  flex: none;
}

.pricelist__note {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--on-dark);
}

.gridcards {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-dark);
}

.gridcards--stack { grid-template-columns: 1fr; margin-top: 0; }

.gridcard {
  background: var(--ink);
  padding: 22px;
}

.gridcard--flush { padding: 26px 0; }

.gridcard__label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.gridcard__label--brand {
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--brand);
}

.gridcard__value {
  font-family: var(--display);
  font-size: 36px;
  color: #fff;
  margin-top: 6px;
}

.gridcard__text {
  font-size: 13px;
  font-weight: 400;
  color: var(--on-dark);
  margin-top: 8px;
  line-height: 1.6;
}

.gridcard__text--lg { font-size: 14.5px; margin-top: 10px; color: rgba(255, 255, 255, .8); }

/* Hole-by-hole */
.holegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
}

.hole {
  background: #fff;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hole__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.hole__n {
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
}

.hole__par {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand);
}

.hole__tip {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--body);
  flex: 1;
}

.hole__tees {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted);
}

.hole__tees span {
  border: 1px solid var(--line);
  padding: 5px 8px;
}

/* Definition rows (programs schedule) */
/* A small heading inside running copy -- "Spring schedule",
"The team". */
.subhead {
  margin-top: 34px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.subhead--ondark { color: #fff; }

.deflist { margin-top: 36px; border-top: 2px solid var(--ink); }

.deflist__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.deflist__term {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}

.deflist__def { font-size: 14.5px; font-weight: 400; }

.section--ink .deflist,
.deflist--ondark { border-top-color: rgba(255, 255, 255, .5); }

.section--ink .deflist__row,
.deflist--ondark .deflist__row { border-bottom-color: rgba(255, 255, 255, .16); }

.section--ink .deflist__def,
.deflist--ondark .deflist__def { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   19. Policy / bordered panel
   -------------------------------------------------------------------------- */

.panel {
  border: 1px solid var(--line);
  padding: 52px 48px;
}

.panel--bone { background: var(--bone); padding: 44px 40px; }
.panel > .lede { margin-top: 22px; }
.panel > .lede + .lede { margin-top: 16px; }
.panel > :first-child { margin-top: 0; }
.panel strong { font-weight: 500; color: var(--ink); }

.statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.statgrid__num { font-family: var(--display); font-size: 32px; }

.statgrid__label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.hairline { height: 1px; background: var(--line); margin: 30px 0; border: 0; }

.quote {
  margin-top: 30px;
  padding: 20px 0 20px 26px;
  border-left: 2px solid var(--brand);
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink);
}

.quote cite {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.role {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.actions--center { justify-content: center; gap: 12px; }

/* --------------------------------------------------------------------------
   20. Capital improvements summary
   -------------------------------------------------------------------------- */

.summary {
  max-width: var(--wrap);
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line);
}

.summary__cell { background: var(--bone); padding: 30px 26px; }

.summary__num {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--brand);
}

.summary__title {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 26px;
  text-transform: uppercase;
}

.summary__meta {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.bigline {
  margin-top: 32px;
  font-family: var(--display);
  font-size: 32px;
  text-transform: uppercase;
  color: var(--brand);
}

.featuregrid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-dark);
}

.featuregrid__cell { background: var(--ink); padding: 32px 26px; }
.featuregrid__cell:first-child { padding-left: 0; }
.featuregrid__cell:last-child { padding-right: 0; }

.featuregrid__title {
  font-family: var(--display);
  font-size: 26px;
  text-transform: uppercase;
  color: #fff;
}

.featuregrid p {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--on-dark-dim);
}

.footnote {
  margin-top: 26px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   22. Contact
   -------------------------------------------------------------------------- */

.contactlist {
  display: grid;
  gap: 2px;
  background: var(--line);
  border-top: 2px solid var(--ink);
}

.contactlist__row { background: #fff; padding: 26px 0; }

/* Three-up variant. The careers block carries only location,
phone and email,
so they sit on one line; the 2px grid gap becomes the rules between them.
   The contact page keeps the stacked default -- it has five rows. */
.contactlist--row { grid-template-columns: repeat(3, 1fr); }

.contactlist--row .contactlist__row { padding: 28px 34px; }
.contactlist--row .contactlist__row:first-child { padding-left: 0; }
.contactlist--row .contactlist__row:last-child { padding-right: 0; }

/* The big phone number would wrap inside a third of the page. */
.contactlist--row .contactlist__big { font-size: 28px; }

.contactlist__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
}

.contactlist__big {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: 34px;
  color: var(--ink);
}

.contactlist__big:hover { color: var(--brand); }

.contactlist__row a:not(.contactlist__big) {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 400;
}

.contactlist__text {
  font-style: normal;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--body-strong);
}

.contactform {
  background: var(--bone);
  padding: 48px 44px;
}

.contactform > p {
  margin: 14px 0 30px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--body);
}

.fieldgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field { display: block; }
.field--full { grid-column: span 2; }

.field > span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-input);
  background: #fff;
  padding: 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}

.field textarea { resize: vertical; }

/* A native select ignores the box above on most platforms,
so draw our own
   chevron and reserve room for it. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  border-radius: 0;
  line-height: 1.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23231f20' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.formstatus {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--brand);
}

.formstatus[hidden] { display: none; }

/* --------------------------------------------------------------------------
   23. Closing CTA + footer
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: var(--ink);
}

.cta > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
}

.cta__inner {
  position: relative;
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.cta h2 { color: #fff; }

.cta__aside {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.cta__aside p {
  max-width: 280px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: rgba(255, 255, 255, .92);
}

.cta .btn { padding: 19px 34px; }

.sitefooter {
  background: var(--ink-deep);
  padding: 72px var(--gutter) 34px;
}

.sitefooter__cols {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 48px;
}

.sitefooter__logo {
  height: 96px;
  width: auto;
  display: block;
}

.sitefooter__blurb {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, .7);
}

.social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .7);
}

.social__link svg { width: 18px; height: 18px; fill: currentColor; }

.social__link:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* The topbar marks sit inline with the phone number, so they take its size. */
.topbar__social {
  display: inline-flex;
  align-items: center;
  color: var(--on-dark);
  /* Padding pulled back by an equal negative margin: a larger tap target on a
     touch screen without moving anything in the bar. */
  padding: 8px 6px;
  margin: -8px -6px;
}

.topbar__social svg { width: 15px; height: 15px; fill: currentColor; }

.topbar__social:hover { color: #fff; }

.sitefooter__head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}

.sitefooter__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, .74);
}

.sitefooter__links a { color: rgba(255, 255, 255, .74); }
.sitefooter__links a:hover { color: #fff; }

.sitefooter__legal {
  max-width: var(--wrap);
  margin: 56px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 400;
  color: var(--on-dark-faint);
}

/* --------------------------------------------------------------------------
   24. Small helpers
   -------------------------------------------------------------------------- */

/* Section whose gutter is owned by its children (full-bleed galleries). */
.section--edge { padding-inline: 0; }
.section--edge > .wrap { padding-inline: var(--gutter); }

.intro { margin-bottom: 54px; }
.stack { margin-top: 26px; }
.stack--sm { margin-top: 18px; }
.stack--lg { margin-top: 38px; }

.lede--ondark { color: var(--on-dark); }
.lede--centered { max-width: 560px; margin-inline: auto; }
.display--58 { font-size: clamp(36px, 4.2vw, 58px); }
.display--64 { font-size: clamp(36px, 4.4vw, 64px); }
.display--50 { font-size: clamp(32px, 3.6vw, 50px); line-height: .96; }

.measure { max-width: 640px; }
.measure--700 { max-width: 700px; }
.measure--760 { max-width: 760px; }
.measure--820 { max-width: 820px; }
.focus-25 { object-position: center 25%; }
.focus-12 { object-position: center 12%; }
.focus-60 { object-position: center 60%; }

.center-actions { text-align: center; margin-top: 48px; }
.panelsplit__copy--ink { background: var(--ink); color: #fff; }

/* Points-earning table on the Fairway Finders page. */
.pointstable {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
}

.pointstable caption {
  caption-side: top;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 14px;
}

.pointstable th,
.pointstable td {
  text-align: left;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}

.pointstable thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
}

.pointstable tbody th {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.pointstable td { font-size: 15px; color: var(--body); }

.pointstable .num {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  text-align: right;
  color: var(--brand);
}

@media (max-width: 640px) {
  .pointstable thead { display: none; }
  .pointstable tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
  .pointstable tbody th { grid-column: 1; border-bottom: 0; padding-bottom: 0; }
  .pointstable td:first-of-type { grid-column: 1; border-bottom: 0; padding-top: 0; font-size: 13px; }
  .pointstable .num { grid-column: 2; grid-row: 1 / span 2; }
}

/* Hint under a form field. */
.field input[type="file"] {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  border: 0;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button:hover { background: var(--ink); }

/* Also matched by `.field > span`,
the uppercase label rule,
which outranks a
   lone class. Scope it to the parent so it wins and the hint reads as prose. */
.field > .field__hint,
.field__hint {
  display: block;
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* Honeypot — off-screen for people,
tempting for bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Four-up figure strip (events page). */
.facts {
  display: grid;
  /* auto-fit, not a fixed four: removing a fact should close the row up rather
     than leave an empty cell showing the divider colour. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px;
  background: var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fact { background: #fff; padding: 34px 28px; }

.fact__n {
  display: block;
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  color: var(--brand);
}

.fact__l {
  display: block;
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* A navcard that is not a link — no hover travel. */
.navcard--static:hover .navcard__media img { transform: none; }

/* Photo gallery. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery li { overflow: hidden; aspect-ratio: 4 / 3; }

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s;
}

.gallery img:hover { transform: scale(1.05); }

/* Responsive video embeds (the testimonial films). */
.embedgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) { .embedgrid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* The invitation cut-out beside the careers hero copy. */
.pagehero--split .pagehero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 27vw, 346px);
  align-items: center;
  gap: 48px;
}

/* The column is capped,
so the figure can never eat the copy column; 92% keeps
   the 819x1350 portrait inside the hero without letterboxing at desktop widths. */
.pagehero__cutout {
  position: relative;
  align-self: end;
  width: 100%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  object-position: bottom;
}

@media (max-width: 900px) {
  .pagehero--split .pagehero__inner { grid-template-columns: 1fr; align-items: center; }
  .pagehero__cutout { display: none; }
}

/* Three-up gallery variant. */
.gallery--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .gallery--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery--3 { grid-template-columns: 1fr; } }

/* Full-bleed photo band with centred copy over it. */
.photoband {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(72px, 9vw, 130px) var(--gutter);
  color: #fff;
}

.photoband > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photoband__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), .72);
}

.photoband__inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.photoband .lede { color: var(--on-dark); }

/* Menu cover,
shown as a printed object. */
.poster {
  margin: 0;
  max-width: 420px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .22);
}

.poster img { width: 100%; height: auto; display: block; }

.poster figcaption {
  margin-top: 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* Contact block beside the enquiry form. */
.callout {
  background: var(--ink);
  color: #fff;
  padding: 40px 36px;
}

.callout p { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--on-dark); }
.callout a:not(.btn) { color: #fff; }
.callout a:not(.btn):hover { color: var(--brand); }
.callout .actions { margin-top: 28px; }

.callout--center { text-align: center; padding: 56px 48px; }
.callout--center .deflist { max-width: 460px; margin-inline: auto; }
.callout--center .deflist__row { grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .callout { padding: 30px 24px; }
}

/* Three-up image row under the venue section. */
.venuegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 640px) {
  .venuegrid { grid-template-columns: 1fr; }
}

/* Stacked pair of images beside a column of copy. */
/* A partner logo dropped into running copy -- the Metro Verde mark on the
   Community Living panel. The mark is green on transparent,
and its "verde"
   strokes measure only 3.12:1 against the ink panel,
so it gets a white plate
   rather than sitting straight on the dark. */
.brandmark {
  display: block;
  width: 100%;
  max-width: 232px;
  height: auto;
  margin-top: 30px;
  padding: 16px 22px;
  background: #fff;
  box-sizing: border-box;
}

.mediastack { display: grid; gap: 14px; }

.note {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--brand);
}

/* Lede at the "16px" step used on Community Living. */
.lede--md { font-size: 16px; color: var(--body-strong); }

/* Eyebrow acting as a label directly above a heading,
with no gap. */
.eyebrow--tight { margin-bottom: 0; }
.heading-after-label { margin-top: 16px; }
.gridcard--lead { padding-left: 0; }

.gridcard__big {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --section-y: 76px; --section-y-lg: 84px; }

  .panelsplit__copy,
.panelsplit__copy--pad100 { padding: 64px 44px; }

  .sitefooter__cols {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }

  .sitefooter__cols > div:first-child { grid-column: span 3; }

  .tiles { grid-template-columns: repeat(2, 1fr); }
  .statbar__inner { grid-template-columns: repeat(2, 1fr); }
  .statbar__cell:nth-child(2) { padding-right: 0; border-right: 0; }
  .statbar__cell:nth-child(3) { padding-left: 0; }
  .holegrid { grid-template-columns: repeat(2, 1fr); }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .featuregrid { grid-template-columns: repeat(2, 1fr); }
  .featuregrid__cell { padding: 32px 26px; }
  .familygrid { grid-template-columns: repeat(3, 1fr); }
  .familygrid > div:nth-child(even) { margin-top: 0; }
}

@media (min-width: 1201px) and (max-width: 1400px) {
  .nav { column-gap: clamp(10px, 1.15vw, 20px); }
}

@media (max-width: 1200px) {
  .navtoggle { display: flex; }

  .siteheader__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
  }

  .siteheader__logo { grid-column: 1; grid-row: 1; }
  .siteheader__cta { grid-column: 2; grid-row: 1; justify-self: end; }
  .navtoggle { grid-column: 3; grid-row: 1; }

  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 12px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 4px;
  }

  .nav[data-open="true"] { display: flex; }

  .nav__link,
.nav__item { padding: 14px 0; width: 100%; }
  .nav__item { padding: 0; }
  .nav__item > .nav__link { padding: 14px 0; }

  .nav__link[aria-current="page"]::after,
.nav__item--active > .nav__link::after {
    left: 0;
    right: auto;
    width: 24px;
    bottom: 6px;
  }

  .nav__menu {
    position: static;
    display: block;
    min-width: 0;
    background: var(--bone);
    box-shadow: none;
    padding: 4px 0 12px;
    margin-left: 0;
  }

  .nav__menu a { color: var(--body); padding: 12px 16px; }
  .nav__menu a:hover { background: var(--ink); color: #fff; }
}

/* Below ~560px the logo, the CTA and the toggle no longer fit on one line:
   drop the CTA to its own full-width row and let the nav open beneath it. */
@media (max-width: 560px) {
  .siteheader__inner { grid-template-columns: 1fr auto; }

  .siteheader__logo { grid-column: 1; grid-row: 1; }
  .navtoggle { grid-column: 2; grid-row: 1; }

  .siteheader__cta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: center;
  }

  .nav { grid-row: 3; }

  /* Three stacked rows of micro-caps push the hero off-screen; the ranking
     also appears in the footer,
so it is the line that gives way. */
  .topbar__sep,
.topbar__group:first-child span:last-child { display: none; }
}

@media (max-width: 900px) {
  .split,
.split--wide-right,
.split--wide-left,
.split--lead-left,
.split--contact,
.split--rates,
.panelsplit { grid-template-columns: 1fr; }

  .split,
.split--gap70,
.split--rates { gap: 44px; }

  .panelsplit__media,
.panelsplit__media--tall,
.panelsplit__media--xtall { min-height: 360px; }

  .hero { height: min(88vh, 820px); min-height: 600px; }
  .hero__dots { display: none; }

  .pagehero,
.pagehero--sm,
.pagehero--md,
.pagehero--lg,
.pagehero--xl { height: 460px; }

  .sechead { margin-bottom: 40px; }
  .sechead__aside { max-width: none; }

  .familygrid { grid-template-columns: repeat(2, 1fr); }
  .familygrid > div { height: 260px; }
  .triptych { grid-template-columns: 1fr; }

  .mosaic__wide { height: 240px; }
  .mosaic__cell { height: 200px; }

  .ratetable__row {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 18px 4px;
  }

  .ratetable__window { grid-column: 1 / -1; }
  .ratetable__price { font-size: 30px; }

  /* The 200px term column leaves the definition ~67px at phone widths,
so the
     two stack instead. */
  .deflist__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .callout--center .deflist__row { grid-template-columns: 1fr; text-align: center; }

  .panel { padding: 36px 28px; }
  .contactform { padding: 36px 28px; }

  .cta { height: auto; padding: 56px 0; }
  .cta__inner { align-items: flex-start; }

  .sitefooter__cols { grid-template-columns: 1fr 1fr; }
  .sitefooter__cols > div:first-child { grid-column: span 2; }
}

@media (max-width: 640px) {
  :root { --section-y: 60px; --section-y-lg: 64px; }

  .topbar { font-size: 9px; gap: 10px; letter-spacing: .14em; }
  .topbar__group { gap: 12px; }

  .tiles,
.tiles--3,
.statbar__inner,
.holegrid,
.summary,
.featuregrid,
.familygrid,
.gridcards,
.statgrid,
.fieldgrid { grid-template-columns: 1fr; }

  .field--full { grid-column: span 1; }

  .statbar__cell {
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .statbar__cell:last-child { border-bottom: 0; }

  .featuregrid__cell { padding: 26px 0; }
  .tile { min-height: 0; padding: 34px 26px; }
  .panelsplit__copy { padding: 48px 24px; }
  .awards { height: auto; padding: 64px 0; }
  .awards__card { padding: 34px 26px; }
  .btn { padding: 15px 24px; font-size: 10px; }
  .factrow { gap: 24px; }
  .faq__a { padding-right: 4px; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */

@media print {
  .topbar,
.siteheader,
.cta,
.hero__dots,
.navtoggle { display: none !important; }

  body { color: #000; }
  .section--ink,
.statbar,
.sitefooter { background: #fff !important; color: #000 !important; }
}

@media (max-width: 900px) {
  .contactlist--row { grid-template-columns: 1fr; }
  .contactlist--row .contactlist__row { padding: 26px 0; }
  .contactlist--row .contactlist__big { font-size: 34px; }
}

/* --------------------------------------------------------------------------
   Clubhouse slideshow - 31.6s, 6 slides, 5.0s on each

   Same rule as the hero, and it is easy to get wrong: the incoming slide must
   reach full opacity BEFORE the outgoing one starts to fade. Overlapping the
   two fades instead leaves nothing at opacity 1, and the panel behind shows
   through. So the stride equals the hold, not hold + fade. Slide 1 sits at the
   bottom of the stack, which lets it return to full while slide 6 still covers
   it, closing the loop without a dissolve.
   -------------------------------------------------------------------------- */

.slideshow > img {
  opacity: 0;
  animation-duration: 31.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.slideshow > img:nth-child(1) { animation-name: rhClub1; }
.slideshow > img:nth-child(2) { animation-name: rhClub2; }
.slideshow > img:nth-child(3) { animation-name: rhClub3; }
.slideshow > img:nth-child(4) { animation-name: rhClub4; }
.slideshow > img:nth-child(5) { animation-name: rhClub5; }
.slideshow > img:nth-child(6) { animation-name: rhClub6; }

@media (prefers-reduced-motion: reduce) {
  .slideshow > img { animation: none; opacity: 0; }
  .slideshow > img:first-child { opacity: 1; }
}

@keyframes rhClub1 {
  0.000%   { opacity: 1; }
  18.354%  { opacity: 1; }   /*  5.80s  slide 2 is fully opaque, so this may go */
  20.886%  { opacity: 0; }   /*  6.60s */
  96.835%  { opacity: 0; }   /* 30.60s */
  97.468%  { opacity: 1; }   /* 30.80s  restored while slide 6 still covers it */
  100.000% { opacity: 1; }
}

@keyframes rhClub2 {
  0.000%   { opacity: 0; }
  15.823%  { opacity: 0; }   /*  5.00s */
  18.354%  { opacity: 1; }   /*  5.80s  fully opaque -- the one below may now fade */
  34.177%  { opacity: 1; }   /* 10.80s  holds until the next is fully opaque */
  36.709%  { opacity: 0; }   /* 11.60s */
  100.000% { opacity: 0; }
}

@keyframes rhClub3 {
  0.000%   { opacity: 0; }
  31.646%  { opacity: 0; }   /* 10.00s */
  34.177%  { opacity: 1; }   /* 10.80s  fully opaque -- the one below may now fade */
  50.000%  { opacity: 1; }   /* 15.80s  holds until the next is fully opaque */
  52.532%  { opacity: 0; }   /* 16.60s */
  100.000% { opacity: 0; }
}

@keyframes rhClub4 {
  0.000%   { opacity: 0; }
  47.468%  { opacity: 0; }   /* 15.00s */
  50.000%  { opacity: 1; }   /* 15.80s  fully opaque -- the one below may now fade */
  65.823%  { opacity: 1; }   /* 20.80s  holds until the next is fully opaque */
  68.354%  { opacity: 0; }   /* 21.60s */
  100.000% { opacity: 0; }
}

@keyframes rhClub5 {
  0.000%   { opacity: 0; }
  63.291%  { opacity: 0; }   /* 20.00s */
  65.823%  { opacity: 1; }   /* 20.80s  fully opaque -- the one below may now fade */
  81.646%  { opacity: 1; }   /* 25.80s  holds until the next is fully opaque */
  84.177%  { opacity: 0; }   /* 26.60s */
  100.000% { opacity: 0; }
}

@keyframes rhClub6 {
  0.000%   { opacity: 0; }
  79.114%  { opacity: 0; }   /* 25.00s */
  81.646%  { opacity: 1; }   /* 25.80s  fully opaque -- the one below may now fade */
  97.468%  { opacity: 1; }   /* 30.80s  holds until the next is fully opaque */
  100.000% { opacity: 0; }   /* 31.60s */
  100.000% { opacity: 0; }
}