/* St Ives (Hunts) Golf Club, bend direction.
   After thebendclub.com: a Warm Stone opening where the name rises, a window opens between the words, cuts through
   two photographs and grows into the first film; a full-bleed hero slider (here, three St Ives films) with the line bottom left; a star and a long
   statement that brightens a word at a time; a dark band where a portrait film and the time of day swap as you
   scroll; rows of three cards on uneven heights; the September image cloud; a first-visit FAQ in hairline rows; a
   navy card over the lake to plan a visit. Proxima Nova Light display in sentence case, tiny letterspaced eyebrows,
   Fairway Gold for the star and hairlines only. Transform and opacity only. */

:root {
  --navy: var(--sti-navy); --gold: var(--sti-gold); --sky: var(--sti-sky); --gold-l: var(--sti-gold-light);
  --stone: var(--sti-stone); --white: #fff; --body: var(--sti-body); --ink: var(--sti-ink); --rule: var(--sti-rule);
  --font: var(--sti-font);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --g: 64px; --hd: 88px;
}
@media (max-width: 1099px) { :root { --g: 40px; } }
@media (max-width: 699px) { :root { --g: 20px; --hd: 64px; } }

* { box-sizing: border-box; }
html { background: var(--stone); color: var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--sti-body-size)/var(--sti-body-lh) var(--font); background: var(--stone); overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--navy); color: var(--white); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.hero :focus-visible, .day :focus-visible, .visit :focus-visible, .ft :focus-visible, .menu :focus-visible, .hd.is-over :focus-visible { outline-color: var(--gold-l); }
html.locked, html.locked body { overflow: hidden; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--g); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 400; background: var(--navy); color: var(--white); padding: 12px 18px; min-height: 44px; }
.skip:focus { top: 12px; }
/* a 44 px hit box round a link set in a line of copy, with no change to how it looks (A6) */
.tap { position: relative; white-space: nowrap; }
.tap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.eyebrow { font: 600 .75rem/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 20px; font: 600 .8125rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--sky); border-color: var(--sky); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--gold-l); border-color: var(--gold-l); }
.btn--glass { border-color: rgba(255, 255, 255, .8); color: var(--white); }
.btn--glass:hover { background: var(--white); color: var(--navy); }
.rbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .7); color: var(--white); transition: background-color .35s var(--ease), color .35s var(--ease); }
.rbtn svg { width: 16px; height: 16px; }
.rbtn:hover { background: var(--white); color: var(--navy); }
.rbtn .i-play { display: none; }
.rbtn[aria-pressed="true"] .i-play { display: block; }
.rbtn[aria-pressed="true"] .i-pause { display: none; }

/* ---------- Reveals (script only), once ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .75s var(--expo); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.wipe { position: relative; display: block; overflow: hidden; }
.js .wipe::after { content: ""; position: absolute; inset: -1px; background: var(--stone); transform-origin: top center; transition: transform 1.1s var(--expo); }
.js .wipe.in::after { transform: scaleY(0); }
.js .wipe img { transform: scale(1.12); transition: transform 1.6s var(--expo); }
.js .wipe.in img { transform: none; }

/* ---------- Opening (html.intro), timed as thebendclub.com's: GSAP drives it from main.js on the reference's own
   timeline (5.8 s). Here only the parts and the states before the first frame. The lockup's unit (1em) is the window's
   height and the words' cap height; it is sized so the lockup spans the same 85% of the width as the reference's. */
.opening { display: none; }
html.intro .opening { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--stone); pointer-events: none; }
.opening__row { display: flex; align-items: flex-end; justify-content: center; height: 1em; font-size: min(calc(85.3vw / var(--lk)), calc(1240px / var(--lk))); --lk: 10.58; color: var(--navy); white-space: nowrap; }
.opening__word { display: flex; overflow: hidden; padding-top: .06em; }
.opening__word--start { justify-content: flex-end; }
.opening__word--end { justify-content: flex-start; }
.opening__lift { display: block; padding-top: .06em; transform: translateY(100%); }   /* the padding keeps the ascenders under the mask until it rises */
.opening__small { display: block; font: 400 italic .42em/1 var(--font); letter-spacing: 0; margin: 0 0 .2em .06em; }
/* 1.5em puts Proxima Nova's cap height (0.667) at the window's height; line-height .7 and the margin set the baseline on the mask's edge */
.opening__big { display: block; font: 300 1.5em/.7 var(--font); letter-spacing: -.035em; margin-bottom: -.02em; }
.opening__box { position: relative; display: flex; align-items: center; justify-content: center; width: 0; height: 1em; margin: 0 .08em; flex: none; }
.opening__boxin { position: relative; display: flex; align-items: center; justify-content: center; min-width: 1em; height: 100%; }
.opening__img { position: absolute; display: flex; align-items: center; justify-content: center; width: 0; height: 100%; overflow: hidden; }
.opening__pic { position: absolute; width: 100%; min-width: 1em; height: 100%; }
.opening__pic img, .opening__cover { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.opening__cover { z-index: 1; }
/* the hero's own shade, in proportions, so the window is the hero's first frame from the start */
.opening__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 48, 111, .84) 0, rgba(13, 48, 111, .58) 11%, rgba(13, 48, 111, 0) 25.5%), linear-gradient(to top, rgba(13, 48, 111, .9) 0%, rgba(13, 48, 111, .66) 34%, rgba(13, 48, 111, 0) 70%); }
/* what the opening brings in afterwards starts hidden (GSAP sets these from here) */
html.intro .hd, html.intro .hero__eyebrow, html.intro .hero__cta, html.intro .hero__ctrl, html.intro .hero__title .hw { opacity: 0; visibility: hidden; }

/* ---------- Header: transparent over the hero, a solid Warm Stone bar after it; it never hides ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--hd); padding: 0 var(--g); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background: var(--stone); color: var(--navy); box-shadow: 0 1px 0 var(--rule); transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.hd.is-over { background: rgba(244, 241, 240, 0); color: var(--white); box-shadow: none; }
.hd__brand { display: flex; align-items: center; gap: 10px; min-height: 44px; justify-self: start; }
.hd__name { font: 400 1.375rem/1 var(--font); letter-spacing: -.01em; }
.hd__star { width: 12px; height: 12px; color: var(--gold); }
.hd.is-over .hd__star { color: var(--gold-l); }
.hd__sub { font: 600 .6875rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.hd__nav { display: flex; gap: 28px; }
.hd__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 calc(50% + 10px); transition: background-size .35s var(--ease); }
.hd__nav a:hover { background-size: 100% 1px; }
.hd__right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.hd__book, .hd__menu { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.hd__book { background: var(--navy); border-color: var(--navy); color: var(--white); }
.hd__book:hover { background: var(--sky); border-color: var(--sky); }
.hd.is-over .hd__book { background: var(--white); border-color: var(--white); color: var(--navy); }
.hd.is-over .hd__book:hover { background: var(--gold-l); border-color: var(--gold-l); }
.hd__menu:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.hd.is-over .hd__menu:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.hd__short { display: none; }
@media (max-width: 1099px) { .hd { grid-template-columns: 1fr auto; } .hd__nav { display: none; } }
@media (max-width: 699px) {
  .hd__brand { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hd__star { display: none; }
  .hd__name { font-size: 1.25rem; } .hd__sub { font-size: .625rem; letter-spacing: .12em; }
  .hd__long { display: none; } .hd__short { display: inline; }
  .hd__book, .hd__menu { padding: 0 13px; }
}

/* ---------- Menu: full screen navy, numbered list, an aside with the crest ---------- */
.menu { position: fixed; inset: 0; z-index: 300; background: var(--navy); color: var(--white); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .3s var(--ease); }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: var(--hd); padding: 0 var(--g); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.menu__name { font: 600 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.menu__close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .7); font: 600 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; transition: background-color .35s var(--ease), color .35s var(--ease); }
.menu__close svg { width: 14px; height: 14px; }
.menu__close:hover { background: var(--white); color: var(--navy); }
.menu__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px 80px; padding: 56px var(--g) 64px; max-width: 1440px; margin: 0 auto; }
.menu__list li { border-bottom: 1px solid rgba(255, 255, 255, .14); opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .8s var(--expo); transition-delay: calc(.04s + .05s * var(--i, 1)); }
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu__list a { display: flex; align-items: baseline; gap: 22px; min-height: 64px; padding: 12px 0; font: 300 clamp(1.75rem, 1.1rem + 2vw, 3rem)/1.1 var(--font); letter-spacing: -.015em; transition: color .3s var(--ease); }
.menu__list a:hover { color: var(--gold-l); }
.menu__list small { font: 600 .75rem/1 var(--font); letter-spacing: .14em; color: var(--gold-l); }
.menu__aside { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease) .3s, transform .8s var(--expo) .3s; }
.menu.is-open .menu__aside { opacity: 1; transform: none; }
.menu__plate { --sti-crest-plate: 112px; margin-bottom: 28px; }
.menu__small { margin-bottom: 28px; }
.menu__small a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; color: rgba(255, 255, 255, .9); }
.menu__small a:hover { color: var(--gold-l); }
.menu__aside p { color: rgba(255, 255, 255, .86); margin-bottom: 24px; }
.menu__aside p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.menu .btn--navy { background: var(--white); border-color: var(--white); color: var(--navy); }
.menu .btn--navy:hover { background: var(--gold-l); border-color: var(--gold-l); }
@media (max-width: 899px) { .menu__inner { grid-template-columns: 1fr; padding-top: 24px; } .menu__plate { --sti-crest-plate: 88px; } }

/* ---------- Hero: three films, the line bottom left ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--navy); color: var(--white); }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__slide.is-on { opacity: 1; }
/* the poster is an image under the film (the phone takes the vertical one, hidden slides fetch theirs only when shown); the film covers it once it plays */
.hero__poster, .hero__poster img, .hero__slide video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img, .hero__slide video { object-fit: cover; transform: scale(1.06); transition: transform 2.6s var(--expo); }
.hero__slide.is-on .hero__poster img, .hero__slide.is-on video { transform: none; }
/* measured against the brightest 5% of each film: a band under the header, and a deeper shade under the copy */
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 48, 111, .84) 0, rgba(13, 48, 111, .58) 100px, rgba(13, 48, 111, 0) 230px), linear-gradient(to top, rgba(13, 48, 111, .9) 0%, rgba(13, 48, 111, .66) 34%, rgba(13, 48, 111, 0) 70%); }
.hero__inner { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 var(--g) clamp(32px, 7vh, 64px); }
.hero__eyebrow { margin-bottom: 18px; }
.hero__title { font: 300 clamp(2.9rem, 1.2rem + 5vw, 6.25rem)/1 var(--font); letter-spacing: -.025em; color: var(--white); }
.hero__title .hero__line { display: block; }
.hero__title .hw { display: inline-block; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; text-align: right; padding-right: 72px; }   /* 72: clear of the AI Concierge launcher */
.hero__cap { display: flex; flex-direction: column; gap: 6px; font-size: .9375rem; }
.hero__count { font: 600 .75rem/1 var(--font); letter-spacing: .16em; }
.hero__btns { display: flex; gap: 10px; }
@media (max-width: 899px) {
  .hero__inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; }
  .hero__ctrl { flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
  .hero__cap { font-size: .875rem; }
}
@media (max-width: 699px) { .hero__cta { margin-top: 24px; } .hero__cta .btn { padding: 0 16px; } .hero__where { display: none; } }

/* ---------- Statement: a word at a time ---------- */
.statement { padding-top: clamp(96px, 14vh, 160px); padding-bottom: clamp(96px, 14vh, 160px); }
.statement__star { width: 22px; height: 22px; color: var(--gold); margin-bottom: 36px; }
.statement__text { max-width: 28em; font: 300 clamp(1.6rem, .95rem + 2.15vw, 2.875rem)/1.28 var(--font); color: var(--navy); letter-spacing: -.012em; }
.sw { opacity: var(--o, 1); }
.js:not(.rm) .statement__text.is-split .sw { --o: .2; }
.js:not(.rm) .statement__text.is-once .sw { transition: opacity .6s var(--ease); transition-delay: calc(var(--k, 0) * 14ms); }
.js:not(.rm) .statement__text.is-once.in .sw { --o: 1; }

/* ---------- The day: navy, held on desktop pointers ---------- */
.day { background: var(--navy); color: rgba(255, 255, 255, .88); }
/* The ground (html.fx, script and motion only): a fixed Warm Stone layer behind the page, which main.js turns navy over
   0.9 s (power2.out) when the day band's top passes 220 px from the top of the window, and back when its bottom rises
   220 px above the bottom, as thebendclub.com does round its Afternoons band. The band itself is then clear, so the page
   floods navy round it; settled, it is the same navy as before. Without script or with reduced motion the band keeps its
   own navy and the ground is not used. */
.ground { display: none; }
html.fx .ground { display: block; position: fixed; inset: 0; z-index: -1; background: var(--stone); pointer-events: none; }
html.fx body { background: transparent; }
html.fx .day { background: transparent; }
.day .eyebrow { color: var(--gold-l); }
.day__stage { position: relative; padding: 96px var(--g); max-width: 1440px; margin: 0 auto; }
.day__steps { display: grid; gap: 80px; }
.day__step { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px 72px; align-items: center; }
.day__card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0d306f; }
.day__card img, .day__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Where the films never play (reduced motion, no script) the card shows a club photograph, not a frame of the film (James, 24 Oct) */
.day__still { display: none; }
html.rm .day__still, html:not(.js) .day__still { display: block; }
html.rm .day__poster, html:not(.js) .day__poster { display: none; }
.day__line { font: 300 clamp(2rem, 1.2rem + 2.6vw, 3.75rem)/1.08 var(--font); color: var(--white); letter-spacing: -.02em; margin: 14px 0 20px; max-width: 12em; }
.day__note { max-width: 30em; }
.day__bar { display: none; }
/* desktop pointers: one screen held for three, the steps cross-fade (class set by script) */
.day.is-held .day__hold { height: 300vh; height: 300svh; }
.day.is-held .day__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--hd) + 24px); padding-bottom: 48px; display: flex; align-items: center; }
.day.is-held .day__steps { position: relative; width: 100%; height: min(72svh, 620px); display: block; }
.day.is-held .day__step { position: absolute; inset: 0; grid-template-columns: auto minmax(0, 1fr); pointer-events: none; }
.day.is-held .day__step.is-on { pointer-events: auto; }
.day.is-held .day__card { height: 100%; width: auto; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.1s var(--expo); }
.day.is-held .day__copy { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .9s var(--expo); }
.day.is-held .day__step.is-on .day__card { opacity: 1; transform: none; }
.day.is-held .day__step.is-on .day__copy { opacity: 1; transform: none; transition-delay: .12s; }
.day.is-held .day__bar { display: block; position: absolute; left: var(--g); bottom: 28px; width: calc(min(72svh, 620px) * .75); height: 2px; background: rgba(255, 255, 255, .2); }
.day.is-held .day__bar i { position: absolute; inset: 0; background: var(--gold-l); transform: scaleX(0); transform-origin: left center; }
@media (max-width: 699px) {
  .day__stage { padding-top: 72px; padding-bottom: 72px; }
  .day__steps { gap: 64px; }
  .day__step { grid-template-columns: 1fr; }
  .day__card { width: 78%; }
}

/* ---------- Rows of three cards on uneven heights ---------- */
.row { padding-top: 120px; padding-bottom: 40px; }
.row + .row, .cloud + .row { padding-top: 40px; }
.row__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px 48px; align-items: start; margin-bottom: 48px; color: var(--navy); }
.row__lead { font: 300 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.35 var(--font); color: var(--navy); max-width: 30em; }
.row__lead a { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .3s var(--ease); }
.row__lead a:hover { color: var(--navy); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.card a { display: block; color: var(--navy); }
.card__img { margin-bottom: 18px; }
.card__img img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform 1.2s var(--expo); }
.card--b { margin-top: 72px; } .card--b .card__img img { aspect-ratio: 1 / 1.08; }
.card--c .card__img img { aspect-ratio: 4 / 5.6; }
.card a:hover .card__img img { transform: scale(1.04); }
.card .eyebrow { display: block; color: var(--body); margin-bottom: 8px; }
.card__line { display: block; font: 300 1.5rem/1.2 var(--font); letter-spacing: -.01em; transition: color .3s var(--ease); }
.card__note { display: block; margin-top: 10px; color: var(--body); max-width: 24em; }
.card a:hover .card__line { color: var(--sky); }
@media (max-width: 899px) { .row__head { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr 1fr; } .card--b { margin-top: 48px; } .card--c { grid-column: 1 / -1; width: 70%; } .card--c .card__img img { aspect-ratio: 4 / 3; } }
@media (max-width: 599px) { .row { padding-top: 88px; } .cards { grid-template-columns: 1fr; gap: 40px; } .card--b { margin-top: 0; width: 84%; margin-left: auto; } .card--c { width: 100%; } }

/* ---------- The course: the copy centred between staggered pairs of large photographs ----------
   Sized to thebendclub.com's scale at 1440 (its photographs run 28% to 100% of the width): here 28% to 62%. */
.cloud { position: relative; padding: 120px var(--g); overflow: hidden; }
.cloud__pair { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--g); }
.cloud__img { will-change: transform; overflow: hidden; }
.cloud__img img { width: 100%; height: auto; }
.cloud__img--1 { width: 58vw; }
.cloud__img--2 { width: 32vw; margin-top: 14vw; }
.cloud__img--3 { width: 28vw; }
.cloud__img--4 { width: 56vw; margin-top: 10vw; }
.cloud__img--5 { width: 62vw; }
.cloud__img--6 { width: 28vw; margin-top: 12vw; }
.cloud__pair--a { margin-left: calc(var(--g) * -1); }
.cloud__pair--b { margin-right: calc(var(--g) * -1); }
.cloud__pair--c { margin-top: 9vw; margin-left: calc(var(--g) * -1); }
.cloud__pair--a .cloud__img--1, .cloud__pair--c .cloud__img--5 { margin-left: 0; }
.cloud__centre { position: relative; z-index: 1; max-width: 560px; margin: 140px auto; text-align: center; color: var(--body); }
.cloud__centre .eyebrow { color: var(--navy); margin-bottom: 18px; }
.cloud__title { font: 300 clamp(1.9rem, 1.2rem + 2.2vw, 3.25rem)/1.12 var(--font); color: var(--navy); letter-spacing: -.02em; margin-bottom: 22px; }
.cloud__centre p { margin-bottom: 28px; }
@media (max-width: 1099px) {
  .cloud { padding: 88px var(--g); }
  .cloud__img { transform: none !important; }
  .cloud__centre { margin: 88px auto; }
}
@media (max-width: 699px) {
  .cloud__pair { flex-direction: column; gap: 20px; margin-left: 0 !important; margin-right: 0 !important; }
  .cloud__img { width: 100% !important; margin-top: 0 !important; }
  .cloud__img--2, .cloud__img--6 { width: 82% !important; align-self: flex-end; }
  .cloud__img--3 { width: 76% !important; }
  .cloud__pair--c { margin-top: 20px; }
  .cloud__centre { margin: 64px auto; }
}

/* ---------- FAQ: hairline rows ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px 72px; padding-top: 120px; padding-bottom: 120px; }
.faq__head .eyebrow { color: var(--navy); margin-bottom: 18px; }
.faq__title { font: 300 clamp(1.9rem, 1.2rem + 2vw, 3rem)/1.12 var(--font); color: var(--navy); letter-spacing: -.02em; max-width: 12em; }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__item h3 { font: inherit; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; min-height: 68px; padding: 14px 0; text-align: left; font: 400 1.1875rem/1.35 var(--font); color: var(--navy); transition: color .3s var(--ease); }
.faq__q:hover { color: var(--sky); }
.faq__q svg { width: 16px; height: 16px; flex: none; color: var(--gold); transition: transform .4s var(--expo); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { padding: 0 48px 24px 0; max-width: 40em; }
.faq__a.is-open p { animation: faq-in .5s var(--expo) both; }
.faq__a a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; padding: 3px 0; }
.faq__a a:hover { color: var(--navy); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }
/* the scorecard row: a tee switch of square buttons and a hairline table; without script every tee column shows */
.sc-tees { display: none; align-items: center; gap: 8px; margin: 20px 0 8px; }
.js .sc-tees { display: flex; }
.sc-tees .eyebrow { color: var(--body); margin-right: 8px; }
.sc-tees button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--navy); color: var(--navy); font: 600 .8125rem/1 var(--font); letter-spacing: .08em; transition: background-color .3s var(--ease), color .3s var(--ease); }
.sc-tees button:hover { background: var(--white); }
.sc-tees button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.sc { width: 100%; max-width: 34em; margin-top: 16px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; color: var(--ink); }
.sc th, .sc td { padding: 9px 8px 9px 0; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.sc th:first-child { text-align: left; }
.sc thead th { font: 600 .6875rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); border-bottom-color: var(--navy); }
.sc abbr { text-decoration: none; }
.sc tbody th { font-weight: 400; }
.sc__sum th, .sc__sum td { font-weight: 600; color: var(--navy); }
.sc[data-tee] .t { display: none; }
.sc[data-tee="67"] .t67, .sc[data-tee="65"] .t65, .sc[data-tee="61"] .t61, .sc[data-tee="56"] .t56 { display: table-cell; }
@media (max-width: 599px) { .faq__a--sc { padding-right: 0; } .sc { font-size: .875rem; } .sc th, .sc td { padding-right: 6px; } }
@media (max-width: 899px) { .faq { grid-template-columns: 1fr; padding-top: 88px; padding-bottom: 88px; } }

/* ---------- Plan a visit: the navy card over the lake ---------- */
.visit { position: relative; padding: 18vh var(--g) 12vh; overflow: hidden; }
.visit__media { position: absolute; inset: 0; overflow: hidden; }
.visit__media img { width: 100%; height: 100%; object-fit: cover; }
.visit__card { position: relative; max-width: 1200px; margin: 0 auto; padding: 64px; background: rgba(13, 48, 111, .94); color: rgba(255, 255, 255, .88); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 72px; }
.visit__card .eyebrow { color: var(--gold-l); }
.visit__intro .eyebrow { margin-bottom: 16px; }
.visit__title { font: 300 clamp(1.9rem, 1.2rem + 2vw, 3rem)/1.12 var(--font); color: var(--white); letter-spacing: -.02em; margin-bottom: 20px; }
.visit__links li { border-top: 1px solid rgba(255, 255, 255, .2); }
.visit__links li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.visit__links a { display: grid; grid-template-columns: 72px 1fr 18px; align-items: center; gap: 16px; min-height: 60px; color: var(--white); transition: color .3s var(--ease); }
.visit__links a:hover { color: var(--gold-l); }
.visit__links svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.visit__links a:hover svg { transform: translateX(4px); }
.visit__where { grid-column: 1 / -1; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; padding-top: 8px; }
.visit__intro a, .visit__where a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--ease); }
.visit__intro a:hover, .visit__where a:hover { color: var(--gold-l); }
@media (max-width: 899px) { .visit { padding: 40vh var(--g) 40px; } .visit__card { grid-template-columns: 1fr; padding: 40px 28px; } }
@media (max-width: 599px) { .visit { padding: 34vh 12px 12px; } .visit__links a { grid-template-columns: 56px 1fr 16px; } }

/* ---------- Footer ---------- */
.ft { background: var(--navy); color: rgba(255, 255, 255, .86); padding: 88px 0 40px; }
.ft__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.ft__plate { --sti-crest-plate: 104px; margin-bottom: 22px; }
.ft__brand p { max-width: 22em; }
.ft .eyebrow { color: var(--gold-l); margin-bottom: 12px; }
.ft nav a, .ft__contact a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--white); transition: color .3s var(--ease); }
.ft nav a:hover, .ft__contact a:hover { color: var(--gold-l); }
.ft__addr { margin-top: 18px; }
.ft__addr span { white-space: nowrap; }
.ft__contact { margin-top: 6px; }
.ft__base { grid-column: 1 / -1; padding-top: 24px; margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .875rem; }
@media (max-width: 899px) { .ft__inner { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 499px) { .ft__inner { grid-template-columns: 1fr; } }

/* Gentle photo parallax (James, 24 Oct): the photo drifts slower than its frame (main.js, section 8b). translate and scale
   are the individual transform properties, so they compose with the wipe's and the hover's transform on the same image. */
html.px-on .px { scale: 1.08; translate: 0 var(--px, 0px); }
@media (prefers-reduced-motion: reduce) { html.px-on .px { scale: none; translate: none; } }

/* ---------- Reduced motion: a calm, complete page ---------- */
@media (prefers-reduced-motion: reduce) {
  .opening { display: none !important; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
html.rm .wipe::after { display: none; }
html.rm .wipe img, html.rm .hero__slide video, html.rm .hero__poster img { transform: none; }