/* St Ives (Hunts) Golf Club, after Tidescape (tidescape.framer.ai).
 * Brand tokens come from ../assets/st-ives.css. Proxima Nova only (kit pdh2nxp), Light for display, no serif.
 * Grounds alternate Warm Stone and White; Club Navy for headings, buttons and the footer; Fairway Gold for the
 * arrow icons and rules only. Motion is transform and opacity. Three modes:
 *   - default: phones, tablets, touch screens, reduced motion and no script. Nothing is held; the header is a
 *     solid bar that never moves.
 *   - "held" (1200 px and up, a mouse or trackpad, motion allowed, script on): the card stack, the film and the
 *     closing spread are held by position: sticky while ScrollTrigger scrubs them; the footer is revealed beneath.
 *   - the header bar itself switches at 1200 px with a fine pointer, script or not.
 * No element scrolls on its own except the open menu sheet, so nothing can catch a wheel or trackpad gesture. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--sti-white); color: var(--sti-body); font: 400 var(--sti-body-size)/var(--sti-body-lh) var(--sti-font); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--sti-sky); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--sti-navy); color: var(--sti-white); text-decoration: none; transform: translateY(-150%); }
.skip:focus { transform: none; }

:root { --g: clamp(16px, 1.6vw, 24px); --hd: 64px; --wrap: 1400px; }
@media (min-width: 768px) { :root { --hd: 72px; } }
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) { :root { --hd: 84px; } }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--g)); margin: 0 auto; padding: 0 var(--g); }

/* Type */
h2 { font-weight: 300; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--sti-navy); text-align: center; text-wrap: balance; }
.h4 { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--sti-navy); }
.label { font: 600 var(--sti-label)/1.3 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-navy); }
.lead { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem); line-height: 1.6; color: var(--sti-body); }

/* The reference's arrow link: an L-shaped arrow (Fairway Gold), a caps label, underlined. 44 px tall. */
.alink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-navy); text-decoration: none; }
.alink span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color var(--sti-dur-fast) ease; }
.alink svg { width: 11px; height: 15px; color: var(--sti-gold); flex: none; transform: translateY(-3px); transition: transform var(--sti-dur-fast) ease; }
.alink:hover span { color: var(--sti-sky); }
.alink:hover svg { transform: translate(2px, -3px); }
.alink--light { color: var(--sti-white); }
.alink--light svg { color: var(--sti-gold-light); }
.alink--light:hover span { color: var(--sti-gold-light); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font: 600 var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; text-decoration: none; border: 1px solid var(--sti-navy); border-radius: var(--sti-radius); transition: background-color var(--sti-dur-fast) ease, color var(--sti-dur-fast) ease, border-color var(--sti-dur-fast) ease; }
.btn--navy { background: var(--sti-navy); color: var(--sti-white); }
.btn--line { color: var(--sti-navy); background: transparent; }
@media (hover: hover) {   /* no sticky hover states after a tap */
  .btn--navy:hover { background: var(--sti-sky); border-color: var(--sti-sky); }
  .btn--line:hover { background: var(--sti-navy); color: var(--sti-white); }
}

/* ------------------------------------------------------------------ Header */
.hd { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--hd); display: flex; align-items: center; gap: 12px; padding: 0 var(--g); background: var(--sti-stone); border-bottom: 1px solid rgba(34, 34, 34, .12); }
.hd__brand { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; margin-right: auto; text-decoration: none; color: var(--sti-navy); line-height: 1; }
.hd__name { font-weight: 300; font-size: 26px; letter-spacing: -0.01em; }
.hd__sub { font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.hd__nav { display: none; }
.hd__book { min-height: 44px; padding: 0 16px; background: var(--sti-navy); color: var(--sti-white); border-radius: var(--sti-radius); }
.hd__book svg { color: var(--sti-gold-light); }
.hd__book span { text-decoration: none; }
.hd__book:hover span { color: var(--sti-white); }
.hd__menu { width: 44px; height: 44px; display: grid; place-items: center; background: var(--sti-navy); border-radius: 4px; flex: none; }
.hd__bars { width: 20px; height: 12px; position: relative; display: block; }
.hd__bars i { position: absolute; left: 0; right: 0; height: 1.6px; background: var(--sti-white); transition: transform .3s var(--sti-ease-out), top .3s var(--sti-ease-out); }
.hd__bars i:first-child { top: 2px; }
.hd__bars i:last-child { top: 9px; }
.menu-open .hd__bars i:first-child { top: 5.5px; transform: rotate(45deg); }
.menu-open .hd__bars i:last-child { top: 5.5px; transform: rotate(-45deg); }
@media (max-width: 419px) { .hd__long { display: none; } .hd__name { font-size: 23px; } .hd__book { padding: 0 14px; } }

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .hd { display: grid; grid-template-columns: 1fr auto 1fr; border-bottom-color: transparent; transition: opacity .2s ease, border-color .3s ease; }
  .hd.is-moved { border-bottom-color: rgba(34, 34, 34, .12); }
  .hd.is-hidden { opacity: 0; pointer-events: none; }   /* still focusable: a keyboard user tabbing in brings it back */
  .hd__brand { margin-right: 0; justify-self: start; }
  .hd__name { font-size: 30px; }
  .hd__nav { display: block; }
  .hd__nav > ul { display: flex; gap: 6px; }
  .hd__link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; font-size: 17px; color: var(--sti-ink); text-decoration: none; transition: color var(--sti-dur-fast) ease; }
  .hd__link:hover, .hd__link[aria-expanded="true"] { color: var(--sti-sky); }
  .hd__link .i-down { width: 14px; height: 14px; transition: transform .25s ease; }
  .hd__link[aria-expanded="true"] .i-down { transform: rotate(180deg); }
  .hd__book { justify-self: end; padding: 0; background: none; color: var(--sti-navy); }
  .hd__book svg { color: var(--sti-gold); }
  .hd__book span { text-decoration: underline; }
  .hd__book:hover span { color: var(--sti-sky); }
  .hd__menu { display: none; }
}
.hd__dd { position: relative; }
.dd { position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; padding: 8px 0; background: var(--sti-white); box-shadow: 0 18px 40px rgba(13, 48, 111, .14); border: 1px solid var(--sti-rule); }
.dd:not([hidden]) { animation: ddIn .22s var(--sti-ease-out); }
.dd a { display: flex; align-items: center; min-height: 44px; padding: 0 20px; color: var(--sti-ink); text-decoration: none; font-size: 16px; }
.dd a:hover, .dd a:focus-visible { color: var(--sti-sky); background: var(--sti-stone); }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } }

/* Menu sheet */
.menu { position: fixed; z-index: 49; inset: var(--hd) 0 0 0; background: var(--sti-stone); overflow-y: auto; overscroll-behavior: contain; }
.menu:not([hidden]) { animation: menuIn .32s var(--sti-ease-out); }
.menu__in { display: grid; gap: 36px; padding: 28px var(--g) 48px; max-width: 900px; }
@media (min-width: 768px) { .menu__in { grid-template-columns: 1.3fr 1fr; padding-top: 48px; } }
.menu__h { font-weight: 300; font-size: 28px; color: var(--sti-navy); margin-bottom: 8px; }
.menu__list a { display: flex; align-items: center; min-height: 48px; font-size: 20px; color: var(--sti-ink); text-decoration: none; border-bottom: 1px solid rgba(34, 34, 34, .12); }
.menu__list a:hover { color: var(--sti-sky); }
.menu__links a { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--sti-ink); text-decoration: none; font-size: 17px; }
.menu__links svg { width: 22px; height: 22px; color: var(--sti-navy); flex: none; }
.menu__book { margin-top: 20px; width: 100%; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-14px); } }
html.locked, html.locked body { overflow: hidden; }

/* ------------------------------------------------------------------ Page and footer reveal */
.page { position: relative; }
main { position: relative; z-index: 2; background: var(--sti-white); }

/* ------------------------------------------------------------------ 1. Hero */
.hero { background: var(--sti-stone); padding-top: var(--hd); overflow: hidden; }
.hero__in { position: relative; max-width: calc(var(--wrap) + 2 * var(--g)); margin: 0 auto; padding: 20px var(--g) 28px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; row-gap: 10px; }
.pol { position: relative; width: min(31vw, 210px); aspect-ratio: 314 / 323; border: 5px solid var(--sti-white); box-shadow: 0 14px 30px rgba(34, 34, 34, .16); background: var(--sti-white); overflow: hidden; transform: rotate(var(--r)); }
.pol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 1.6s var(--sti-ease-out); }
.pol img.is-on { opacity: 1; transform: none; }
.pol--a { --r: -9deg; grid-column: 1; grid-row: 1; }
.pol--b { --r: 8deg; grid-column: 2; grid-row: 1; }
.pol--c { --r: 8deg; grid-column: 1; grid-row: 4; }
.pol--d { --r: -8deg; grid-column: 2; grid-row: 4; }
.hero__word { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; font-weight: 300; font-size: clamp(5.6rem, 25vw, 11rem); line-height: .82; letter-spacing: -0.045em; color: var(--sti-navy); white-space: nowrap; margin: 4px 0 6px; }
.hero__copy { grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 3; text-align: center; max-width: 440px; }
.hero__label { margin-bottom: 10px; }
.hero__title { font-weight: 300; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--sti-navy); text-wrap: balance; }
.hero__text { margin-top: 12px; color: var(--sti-body); font-size: 16px; line-height: 1.5; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.hero__pause { position: absolute; z-index: 4; left: var(--g); bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sti-white); color: var(--sti-navy); border: 1px solid rgba(34, 34, 34, .14); }
.hero__pause svg { width: 14px; height: 14px; }
.hero__pause .i-play, .hero__pause[aria-pressed="true"] .i-pause { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
html:not(.js) .hero__pause, .calm .hero__pause { display: none; }
@media (max-width: 767px) { .hero__pause { top: calc(20px + min(31vw, 210px) * .5); bottom: auto; left: 50%; transform: translateX(-50%); } .hero__copy { margin-bottom: 14px; } }   /* buttons clear of the tilted lower pair */

@media (min-width: 768px) and (max-width: 1023px) {
  .pol { width: min(28vw, 250px); }
  .hero__in { padding-top: 28px; padding-bottom: 40px; row-gap: 16px; }
  .hero__word { font-size: clamp(9rem, 24vw, 14rem); }
  .hero__copy { max-width: 520px; }
}
/* Composed, as the reference: the name across the middle, the photographs tilted behind it, the copy at the right */
@media (min-width: 1024px) {
  .hero__in { display: block; height: calc(100svh - var(--hd)); min-height: 620px; max-height: 1040px; padding: 0 var(--g); }
  .pol { position: absolute; width: min(21%, 31vh); }
  .pol--a { --r: 17deg; left: 19%; top: 5%; }
  .pol--b { --r: -16deg; left: 60%; top: 4%; }
  .pol--c { --r: -15deg; left: 1.5%; top: 50%; }
  .pol--d { --r: -14deg; left: 44%; top: 53%; }
  .hero__word { position: absolute; left: 50%; top: 23%; margin: 0; transform: translateX(-50%); font-size: min(21.5vw, 34vh, 320px); }
  .hero__copy { position: absolute; right: var(--g); bottom: 6%; width: min(350px, 28vw); max-width: none; text-align: right; }
  .hero__ctas { justify-content: flex-end; }
  .hero__pause { bottom: 4%; }
}
/* From 1280 the copy sits at least 96 px up, so its buttons clear the AI Concierge launcher (below 1280 the collage
   leaves no room: raising it meets the second photograph, moving it left meets the fourth) */
@media (min-width: 1280px) { .hero__copy { bottom: max(6%, 96px); } }

/* Intro: the name rises, the top pair of photographs lands, then the bottom pair. CSS only, about 1 s in all;
   the copy is there from the first frame. Never under reduced motion; absent without script. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.seen) .pol { animation: polIn .6s var(--sti-ease-out) both; }
  .js:not(.seen) .pol--a, .js:not(.seen) .pol--b { animation-delay: .1s; }
  .js:not(.seen) .pol--c, .js:not(.seen) .pol--d { animation-delay: .4s; }
  .js:not(.seen) .hero__word { animation: wordIn .8s var(--sti-ease-out) both; }
}
@keyframes polIn { from { opacity: 0; transform: rotate(calc(var(--r) * 1.5)) translateY(28px) scale(.92); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes wordIn { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* Reveals (script on, motion allowed): fade up once on arrival */
@media (prefers-reduced-motion: no-preference) {
  .js .fx { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--sti-ease-out), transform .9s var(--sti-ease-out); }
  .js .fx.in { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 2. Welcome */
.about { padding: clamp(80px, 9vw, 130px) 0; }
.about__head { max-width: 960px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 22px; }
.about__crest { width: 112px; height: 112px; }
.about__head .lead { max-width: 820px; }
/* The scorecard, by tee: a disclosure under the course link, in the page's own pieces (the arrow link, caps labels,
   hairline rules, navy for the sums) */
.score { width: 100%; max-width: 560px; }
.score summary { display: flex; width: max-content; margin: 0 auto; cursor: pointer; list-style: none; }
.score summary::-webkit-details-marker { display: none; }
.score__body { margin-top: 14px; }
.score__tees { display: flex; align-items: center; justify-content: center; gap: 2px; margin-bottom: 10px; }
.score__label { font: 600 var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-body); margin-right: 10px; }
.score__tees button { min-width: 44px; min-height: 44px; padding: 0 8px; font: 600 15px/1 var(--sti-font); letter-spacing: .04em; color: var(--sti-body); font-variant-numeric: tabular-nums; text-underline-offset: 6px; transition: color var(--sti-dur-fast) ease; }
.score__tees button[aria-pressed="true"] { color: var(--sti-navy); text-decoration: underline; text-decoration-thickness: 1px; }
.score__tees button:hover { color: var(--sti-sky); }
html:not(.js) .score__tees { display: none; }
.score__table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.3; color: var(--sti-ink); font-variant-numeric: tabular-nums; }
.score__table caption { caption-side: bottom; padding-top: 12px; font-size: 15px; color: var(--sti-body); }
.score__table th, .score__table td { padding: 7px 12px; border-top: 1px solid rgba(34, 34, 34, .14); text-align: right; font-weight: 400; }
.score__table th:first-child { text-align: left; }
.score__table thead th { border-top: 0; font: 600 var(--sti-label)/1.3 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-navy); padding-bottom: 10px; }
.score__sum th, .score__sum td { font-weight: 600; color: var(--sti-navy); }
.score__total th, .score__total td { border-top-color: var(--sti-navy); }
.about__img { max-width: 1120px; margin: clamp(48px, 6vw, 80px) auto 0; aspect-ratio: 1120 / 618; overflow: hidden; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ 3. Four ways in */
.stack { background: var(--sti-stone); padding: clamp(80px, 9vw, 130px) 0 clamp(80px, 8vw, 110px); }
.stack__title { max-width: 900px; margin: 0 auto clamp(48px, 6vw, 80px); }
.stack__line { display: none; }
.stack__view { display: grid; gap: clamp(64px, 8vw, 96px); }
.card { display: grid; gap: 18px; }
.card__text { display: grid; gap: 16px; }
.card__n { font-variant-numeric: tabular-nums; }
.card__small { display: none; }
.card__big { order: -1; aspect-ratio: 4 / 3; overflow: hidden; }
.card__big img { width: 100%; height: 100%; object-fit: cover; }
.feats { display: grid; gap: 10px; margin-top: 4px; color: var(--sti-ink); font-size: 16px; }
.feats li { display: flex; align-items: center; gap: 12px; }
.feats svg { width: 24px; height: 24px; color: var(--sti-gold); flex: none; }
.card .alink { justify-self: start; }
html:not(.js) .stack img[data-src] { display: none; }   /* without script the noscript copies show instead */
.feats a { color: var(--sti-sky); }
/* A phone number inside a sentence: kept on one line, with a 44 px tap area that changes nothing you can see
   (vertical padding on an inline box widens what a finger hits without moving the line) */
.tel { white-space: nowrap; padding: 12px 0; }
@media (min-width: 768px) {
  .card { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); align-items: center; }
  .card__big { order: 0; aspect-ratio: 644 / 807; }
  .card__text { align-content: center; }
}

/* Held stack (desktop): the frame holds while the four cards swap, a hairline filling beside them */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .stack { padding-bottom: 0; }
  .js .stack__rail { height: calc(100vh + 3 * 70vh); }
  .js .stack__view { position: sticky; top: 0; height: 100vh; display: block; }
  .js .stack__line { display: block; position: absolute; left: var(--g); top: 14vh; bottom: 14vh; width: 1px; background: rgba(34, 34, 34, .14); }
  .js .stack__line i { position: absolute; inset: 0; background: var(--sti-navy); transform-origin: 50% 0; transform: scaleY(.25); }
  .js .card { position: absolute; top: 0; bottom: 0; left: var(--g); right: var(--g); padding: 0 0 0 clamp(60px, 6vw, 82px); grid-template-columns: minmax(0, 450px) auto; justify-content: space-between; align-items: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  /* Two-stage swap: the outgoing card fades out in 0.25 s, then the incoming one fades in (0.3 s) and its text lifts */
  .js .card.is-on { opacity: 1; pointer-events: auto; transition: opacity .3s ease .25s; }   /* hidden cards stay focusable: focus brings them round */
  .js .card__text { transform: translateY(18px); transition: transform .7s var(--sti-ease-out); }
  .js .card.is-on .card__text { transform: none; transition-delay: .25s; }
  .js .card__big { height: min(807px, calc(100vh - 120px)); width: auto; aspect-ratio: 644 / 807; }
  .js .card__big img { transform: scale(1.06); transition: transform 1.4s var(--sti-ease-out); }
  .js .card.is-on .card__big img { transform: none; transition-delay: .25s; }
  .js .card__small { display: block; height: min(285px, 22vh); width: auto; aspect-ratio: 450 / 285; object-fit: cover; }
}

/* ------------------------------------------------------------------ 4. More than the round */
.acts { padding: clamp(80px, 9vw, 130px) 0; }
.acts h2 { max-width: 900px; margin: 0 auto clamp(40px, 5vw, 80px); }
.acts__grid { display: grid; gap: 44px 25px; }
@media (min-width: 640px) { .acts__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .acts__grid { grid-template-columns: repeat(4, 1fr); } }
.act a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.act__frame { display: contents; }
.act__note { order: 2; font-size: 16px; line-height: 1.45; color: var(--sti-body); margin-top: -6px; }
.act__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; order: 0; }
.act__name { order: 1; }
.act__media img { width: 100%; height: 100%; object-fit: cover; }
.act__name { font-weight: 300; font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem); line-height: 1.1; color: var(--sti-navy); }
@media (min-width: 640px) { .act__media { aspect-ratio: 331 / 440; } }
@media (min-width: 1024px) { .act__media { aspect-ratio: 331 / 560; } }
/* With a mouse: the reference's hover. The photograph slides down 80 px to show the note, a gold hairline beside
   it, and the other cards dim (the reference blurs them; a dim reads the same and costs nothing). Focus does the
   same. Without a mouse the note is printed above the photograph, so one tap follows the link. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .act__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 331 / 587; }
  .act__note { margin-top: 0; }
  .act__note { position: absolute; inset: 0 0 auto 0; height: 80px; display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.35; opacity: 0; transition: opacity .45s ease .05s; }
  .act__note::after { content: ""; flex: 0 0 28px; height: 1px; background: var(--sti-gold); }
  .act__media { position: absolute; inset: 0; aspect-ratio: auto; transition: transform .6s var(--sti-ease-out); }
  .act a:hover .act__media, .act a:focus-visible .act__media { transform: translateY(80px); }
  .act a:hover .act__note, .act a:focus-visible .act__note { opacity: 1; }
  .act { transition: opacity .45s ease; }
  .acts__grid:has(a:hover) .act:not(:has(a:hover)) { opacity: .45; }
  .act a:hover .act__name { color: var(--sti-sky); }
}

/* ------------------------------------------------------------------ 5. Film */
.film { background: var(--sti-stone); }
.film__frame { position: relative; display: flex; flex-direction: column; }
.film__video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sti-navy); }
.film__panel { background: var(--sti-stone); padding: 40px var(--g); text-align: center; }
.film__panel--top { order: -1; }
.film__line { font-weight: 300; font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--sti-navy); text-align: center; }
/* Script on, motion allowed: the panels cover the film and part as it scrolls past */
@media (prefers-reduced-motion: no-preference) {
  .js .film__frame { display: block; height: 100svh; min-height: 520px; max-height: 1000px; overflow: hidden; }
  .js .film__video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .js .film__panel { position: absolute; left: 0; right: 0; height: calc(50% - 22px); padding: 0 var(--g); display: flex; justify-content: center; will-change: transform; }
  .js .film__panel--top { top: 0; align-items: flex-end; padding-bottom: 18px; }
  .js .film__panel--bot { bottom: 0; align-items: flex-start; padding-top: 18px; }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .film__hold { height: calc(100vh + 1100px); }
  .js .film__frame { position: sticky; top: 0; height: 100vh; max-height: none; }
}

/* ------------------------------------------------------------------ 6. Clubhouse rows */
.rows { background: var(--sti-stone); padding: clamp(80px, 9vw, 130px) 0; }
.rows h2 { max-width: 900px; margin: 0 auto clamp(40px, 5vw, 80px); }
.row { display: grid; gap: 18px; padding: 32px 0 40px; border-top: 1px solid rgba(34, 34, 34, .14); }
.row figure { aspect-ratio: 4 / 3; overflow: hidden; }
.row figure img { width: 100%; height: 100%; object-fit: cover; }
.row__text { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 768px) {
  .row { grid-template-columns: 1fr minmax(0, 267px) 1fr; column-gap: 32px; align-items: start; padding: 40px 0; }
  .row figure { aspect-ratio: 267 / 370; }
  .row__text { justify-self: end; max-width: 300px; text-align: right; justify-items: end; }
}

/* ------------------------------------------------------------------ 7. Quotes */
.quotes { padding: clamp(80px, 9vw, 130px) 0; }
.quotes h2 { max-width: 900px; margin: 0 auto clamp(40px, 5vw, 80px); }
.quotes__grid { display: grid; gap: 32px; }
.quotes__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.quotes__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.quotes__media img.is-on { opacity: 1; }
.quotes__body { display: grid; align-content: space-between; gap: 32px; }
.quote blockquote p { font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--sti-navy); }
.quote figcaption { display: grid; gap: 4px; margin-top: 22px; }
.quote__who { font-size: 18px; color: var(--sti-ink); }
.quote__where { font-size: 15px; color: var(--sti-body); }
.quote:not([hidden]) { animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.quotes__thumbs { display: flex; gap: 12px; }
.quotes__thumbs button { width: clamp(64px, 9vw, 120px); aspect-ratio: 1; overflow: hidden; opacity: .55; transition: opacity .3s ease; border: 2px solid transparent; }
.quotes__thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--sti-navy); }
.quotes__thumbs button:hover { opacity: 1; }
.quotes__thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .quotes__grid { grid-template-columns: minmax(0, 637fr) minmax(0, 700fr); column-gap: clamp(32px, 4vw, 64px); }
  .quotes__media { aspect-ratio: 637 / 720; }
}

/* ------------------------------------------------------------------ 8. Gallery */
.gallery { background: var(--sti-stone); padding: clamp(80px, 9vw, 130px) 0; }
.gallery h2 { max-width: 900px; margin: 0 auto clamp(40px, 5vw, 80px); }
.gal { --w: min(1000px, 78vw); --gap: clamp(14px, 2vw, 30px); position: relative; overflow: hidden; touch-action: pan-y; }
.gal__track { display: flex; gap: var(--gap); align-items: center; transform: translateX(calc(50% - var(--w) / 2)); transition: transform .7s var(--sti-ease-out); }
.gal__item { flex: none; width: var(--w); aspect-ratio: 10 / 7; overflow: hidden; transform: scale(.8); opacity: .7; transition: transform .7s var(--sti-ease-out), opacity .7s ease; }
.gal__item.is-on { transform: none; opacity: 1; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gal__btn { position: absolute; top: calc(var(--w) * .35); width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border-radius: 50%; background: var(--sti-navy); color: var(--sti-white); transition: background-color var(--sti-dur-fast) ease; }
.gal__btn:hover { background: var(--sti-sky); }
.gal__btn svg { width: 16px; height: 16px; }
.gal__btn--prev { left: calc(50% - var(--w) / 2 + 16px); }
.gal__btn--prev svg { transform: rotate(180deg); }
.gal__btn--next { right: calc(50% - var(--w) / 2 + 16px); }
.gal__count { text-align: center; margin-top: 22px; font-size: 16px; color: var(--sti-ink); font-variant-numeric: tabular-nums; }
.gal:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------------ 9. Closing */
.cta { padding: clamp(80px, 9vw, 120px) 0; }
.cta__frame { display: flex; flex-direction: column; gap: 40px; padding: 0 var(--g); max-width: calc(var(--wrap) + 2 * var(--g)); margin: 0 auto; }
.cta__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; order: 2; }
.cta__img { width: 100%; height: auto; align-self: start; aspect-ratio: 350 / 380; object-fit: cover; }
.cta__text { text-align: center; display: grid; gap: 18px; justify-items: center; max-width: 560px; margin: 0 auto; }
.cta__text p { color: var(--sti-body); }
.cta__text p a { color: var(--sti-sky); }
.cta__links { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; }
@media (min-width: 768px) { .cta__imgs { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .cta { padding: 0; }
  .js .cta__hold { height: calc(100vh + 700px); }
  .js .cta__frame { position: sticky; top: 0; height: 100vh; display: block; }
  .js .cta__imgs { position: absolute; top: 0; bottom: 0; left: var(--g); right: var(--g); display: block; }
  .js .cta__img { position: absolute; width: min(350px, 24vw, 37vh); height: auto; will-change: transform; }
  .js .cta__img--1 { left: 8px; top: 52px; }
  .js .cta__img--2 { right: 8px; top: 52px; }
  .js .cta__img--3 { left: 8px; bottom: 52px; }
  .js .cta__img--4 { right: 8px; bottom: 52px; }
  .js .cta__text { position: absolute; left: 50%; top: 50%; width: min(560px, 40vw); transform: translate(-50%, -50%); }
}

/* ------------------------------------------------------------------ 10. Footer */
.ft { background: var(--sti-navy); color: var(--sti-white); padding: clamp(56px, 7vw, 90px) 0 28px; }
.ft > .wrap { width: 100%; }
.ft a { color: var(--sti-white); text-decoration: none; }
.ft a:hover { color: var(--sti-gold-light); }
.ft__top { display: grid; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.ft__name { font-weight: 300; font-size: clamp(2.6rem, 1.6rem + 4vw, 5.6rem); line-height: .95; letter-spacing: -0.03em; }
.ft__name span { display: block; font-size: .32em; letter-spacing: .02em; margin-top: 10px; color: var(--sti-gold-light); }
.ft__contact a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px; }
.ft__contact svg { width: 20px; height: 20px; color: var(--sti-gold-light); }
.ft__mid { display: grid; gap: 40px; padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.ft__about { display: grid; gap: 16px; justify-items: start; max-width: 380px; }
.ft__about p { color: var(--sti-white); }
.ft__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.ft__h { font: 600 var(--sti-label)/1.3 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-gold-light); margin-bottom: 6px; }
.ft__cols a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
.ft__base { display: grid; gap: 18px; justify-items: center; padding-top: 28px; text-align: center; font-size: 15px; }
.ft__crest { --sti-crest-plate: 96px; }
@media (min-width: 768px) {
  .ft__top { grid-template-columns: 1fr auto; align-items: end; }
  .ft__mid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ft__cols { grid-template-columns: repeat(4, 1fr); }
  .ft__base { grid-template-columns: 1fr auto 1fr; text-align: left; align-items: center; }
  .ft__base p:last-child { text-align: right; justify-self: end; }
  .ft__base p:first-child { justify-self: start; }
}
/* The reference's reveal: the page slides up off the footer, which waits beneath */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .ft { position: sticky; bottom: 0; z-index: 1; min-height: 100vh; display: flex; align-items: center; }
}

/* ------------------------------------------------------------------ Gentle photo parallax (James, 24 Oct)
 * The photo drifts slower than its frame (the frame clips it): about 7% of the frame height in all, transform only.
 * translate and scale are the individual transform properties, so they compose with the transform the card stack
 * and the reveals already use. --px is set on the frame by main.js (ScrollTrigger, no layout reads while scrolling).
 * Not on the hero photographs (the club's name sits over them), the film, the closing spread or the thumbnails. */
.js .px { scale: 1.08; translate: 0 var(--px, 0px); }
@media (prefers-reduced-motion: reduce) { .js .px { scale: none; translate: none; } }