/* St Ives (Hunts) Golf Club, cadillac direction.
   After cadillacf1team.com: a navy preloader with three phrases on a 12-column grid and a count to 100, then the
   panel fades onto the hero; an inset bar (solid here, so it reads over every band); a navy hero with a large inset
   film almost the full width, the line in wide capitals under it with Book and Membership, and St Ives's own rule of
   18 ticks for the 18 holes (out 36, in 36) before the page turns white; the course in four rolling numbers; a
   typewriter button; a ticker; a navy news band; a
   membership panel over a blurred photograph; a pinned horizontal scrub alternating high and low; spec sheets with
   square markers; a numbers grid behind shutters; a right-hand drawer. The reference's black and white become Club Navy
   and white, its noise ground Warm Stone, and Fairway Gold is kept for the square markers and hairlines.
   Labels in tracked capitals, headings in sentence case. 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: 64px; --hdTop: 16px;
}
@media (max-width: 1099px) { :root { --g: 40px; } }
@media (max-width: 699px) { :root { --g: 20px; --hdTop: 0px; } }

* { box-sizing: border-box; }
html { background: var(--navy); color: var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.6 var(--font); background: var(--white); 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, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--navy); color: var(--white); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.on-navy :focus-visible, .menu__top :focus-visible, .ft :focus-visible, .ticker :focus-visible { outline-color: var(--gold-l); }
html.locked, html.locked body { overflow: hidden; }
.wrap { width: 100%; max-width: 1600px; 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: 600; background: var(--navy); color: var(--white); padding: 12px 18px; min-height: 44px; }
.skip:focus { top: 12px; }
.lbl { font: 600 .75rem/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.h2 { font: 600 clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem)/1.1 var(--font); letter-spacing: -.005em; color: var(--navy); }
.h3 { font: 600 1.5rem/1.2 var(--font); color: var(--white); }
.on-navy { background: var(--navy); color: rgba(255, 255, 255, .86); }
.on-navy .h2 { color: var(--white); }

/* Buttons. The typewriter button: navy, its label typed in once. */
.type-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 22px; background: var(--navy); color: var(--white); font: 600 .8125rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; transition: background-color .35s var(--ease); }
.type-btn:hover { background: var(--sky); }
.type-btn svg, .line-btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.type-btn:hover svg, .line-btn:hover svg { transform: translateX(4px); }
.type-btn--light { background: var(--white); color: var(--navy); }
.type-btn--light:hover { background: var(--gold-l); }
.type-btn__t span { display: inline-block; }
html.js:not(.rm) .type-btn__t span { opacity: 0; }
html.js.hero-in .type-btn__t span { animation: type 0s steps(1) forwards; animation-delay: calc(.35s + var(--k) * 38ms); }
@keyframes type { to { opacity: 1; } }
.line-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; border: 1px solid var(--navy); color: var(--navy); font: 600 .8125rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; transition: background-color .35s var(--ease), color .35s var(--ease); }
.line-btn:hover { background: var(--navy); color: var(--white); }
.line-btn--light { border-color: rgba(255, 255, 255, .8); color: var(--white); }
.line-btn--light:hover { background: var(--white); color: var(--navy); }
.ul { position: relative; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--expo); }
.ul:hover::after, .ul:focus-visible::after { transform: scaleX(1); }

/* Reveals (script only), once. Headings and paragraphs marked .fill come up from a fifth of their strength. */
.js .rise { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .75s var(--expo); transition-delay: var(--d, 0s); }
.js.hero-in .rise { opacity: 1; transform: none; }
.js .fill { opacity: .2; transition: opacity 1s var(--ease); }
.js .fill.in { opacity: 1; }

/* ---------- Preloader (html.intro): gone by about 1.35 s ---------- */
.pre { display: none; }
html.intro .pre { display: block; position: fixed; inset: 0; z-index: 500; pointer-events: none; color: var(--white); animation: pre-off 0s linear 1.18s forwards; }
.pre__panel { position: absolute; inset: 0; background: var(--navy); animation: panel .4s var(--ease) .64s forwards; }
.pre__words { position: absolute; left: var(--g); right: var(--g); top: 50%; display: grid; grid-template-columns: repeat(12, 1fr); transform: translateY(-50%); }
.pre__w { font: 600 .75rem/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; opacity: 0; animation: w-in .22s var(--ease) forwards, w-out .18s var(--ease) .6s forwards; }
.pre__w--1 { grid-column: 1 / span 3; animation-delay: .04s, .6s; }
.pre__w--2 { grid-column: 3 / span 3; animation-delay: .16s, .6s; }
.pre__w--3 { grid-column: 8 / span 5; text-align: right; animation-delay: .28s, .6s; }
.pre__load, .pre__pct { position: absolute; bottom: 28px; font: 600 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; animation: w-out .18s var(--ease) .6s forwards; }
.pre__load { left: var(--g); }
.pre__pct { right: var(--g); counter-reset: pct var(--p); }
.pre__pct::after { content: counter(pct) "%"; }
@property --p { syntax: "<integer>"; inherits: false; initial-value: 0; }
html.intro .pre__pct { animation: pct .56s linear forwards, w-out .18s var(--ease) .6s forwards; }
@keyframes pct { to { --p: 100; } }
@keyframes w-in { to { opacity: 1; } }
@keyframes w-out { to { opacity: 0; } }
@keyframes panel { to { opacity: 0; } }
@keyframes pre-off { to { visibility: hidden; } }
@media (max-width: 699px) { .pre__words { grid-template-columns: 1fr; gap: 10px; } .pre__w--1, .pre__w--2, .pre__w--3 { grid-column: 1; text-align: left; } }

/* ---------- Header: inset and solid, never hides ---------- */
.hd { position: fixed; z-index: 200; top: var(--hdTop); left: var(--g); right: var(--g); height: var(--hd); padding: 0 12px 0 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(244, 241, 240, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--navy); }
.hd__book { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.hd__book svg { width: 12px; height: 12px; }
.hd__short { display: none; }
.hd__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; line-height: 1; }
.hd__name { font: 600 1.25rem/1 var(--font); letter-spacing: .02em; }
.hd__sub { font: 600 .625rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase; margin-top: 4px; }
.hd__menu { justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; }
.hd__menu i { position: relative; width: 22px; height: 8px; }
.hd__menu i::before, .hd__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--expo); }
.hd__menu i::before { top: 0; } .hd__menu i::after { bottom: 0; }
.hd__menu:hover i::before { transform: translateX(-4px); } .hd__menu:hover i::after { transform: translateX(4px); }
@media (max-width: 699px) {
  .hd { left: 0; right: 0; grid-template-columns: 1fr auto auto; gap: 6px; padding: 0 8px 0 20px; box-shadow: 0 1px 0 var(--rule); }
  .hd__brand { order: -1; align-items: flex-start; justify-self: start; }
  .hd__book { justify-self: end; padding: 0 14px; border: 1px solid var(--navy); }
  .hd__long { display: none; } .hd__short { display: inline; }
}

/* ---------- Drawer ---------- */
.shade { position: fixed; inset: 0; z-index: 290; background: rgba(13, 48, 111, .45); opacity: 0; transition: opacity .35s var(--ease); }
.shade[hidden] { display: none; }
.shade.is-on { opacity: 1; }
.menu { position: fixed; z-index: 300; top: 0; right: 0; bottom: 0; width: min(40vw, 600px); min-width: 420px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .55s var(--expo); }
.menu[hidden] { display: none; }
.menu.is-open { transform: none; }
.menu__top { position: relative; flex: 1 0 auto; background: var(--navy); color: var(--white); padding: 88px 48px 40px; }
.menu__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; display: grid; place-items: center; color: var(--white); }
.menu__close svg { width: 18px; height: 18px; }
.menu__list li { opacity: 0; transform: translateX(28px); transition: opacity .45s var(--ease), transform .6s var(--expo); transition-delay: calc(.12s + .05s * var(--i, 1)); }
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu__list a { display: flex; align-items: center; min-height: 54px; font: 600 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.1 var(--font); letter-spacing: -.005em; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: color .3s var(--ease); }
.menu__list a:hover { color: var(--gold-l); }
.menu__ext { background: var(--white); padding: 24px 48px 32px; }
.menu__ext a { display: flex; align-items: center; gap: 8px; min-height: 48px; font: 600 .8125rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.menu__ext a:hover { color: var(--sky); }
.menu__ext svg { width: 12px; height: 12px; }
@media (max-width: 699px) { .menu { width: 86vw; min-width: 0; } .menu__top, .menu__ext { padding-left: 28px; padding-right: 28px; } }

/* ---------- Hero: navy ground, the inset film, the line in wide capitals, the 18 ticks ---------- */
.hero { position: relative; background: var(--navy); color: var(--white); padding: calc(var(--hdTop) + var(--hd) + 16px) var(--g) 0; }
.hero__frame { position: relative; max-width: 1600px; margin: 0 auto; overflow: hidden; background: var(--navy); height: min(calc(100vh - 264px), 62.5vw); height: min(calc(100svh - 264px), 62.5vw); min-height: 280px; }
.hero__media { position: absolute; left: 0; right: 0; top: -12%; height: 112%; pointer-events: none; will-change: transform; }
.hero__media picture, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; max-width: none; }
.hero__media video { opacity: 0; transition: opacity 1s var(--ease); }
.hero__media video.is-on { opacity: 1; }
html:not(.js) .hero__media video, html.rm .hero__media video { display: none; }
/* Pause: a square tab in the frame's corner, not over the picture's middle */
.film-btn { position: absolute; right: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 16px; background: rgba(13, 48, 111, .78); color: var(--white); font: 600 .6875rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; transition: background-color .3s var(--ease); }
.film-btn:hover { background: var(--navy); }
.film-btn:focus-visible { outline-color: var(--gold-l); }
.film-btn svg { width: 10px; height: 10px; }
.film-btn .i-play, .film-btn .t-play { display: none; }
.film-btn[aria-pressed="true"] .i-play, .film-btn[aria-pressed="true"] .t-play { display: inline; }
.film-btn[aria-pressed="true"] .i-pause, .film-btn[aria-pressed="true"] .t-pause { display: none; }
html:not(.js) .film-btn, html.rm .film-btn { display: none; }
.hero__foot { max-width: 1600px; margin: 0 auto; padding: 28px 0 0; text-align: center; }
.hero__line { font: 600 clamp(1.75rem, .7rem + 2.75vw, 3.5rem)/1.04 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--white); text-wrap: balance; margin-right: -.12em; }
.nw { white-space: nowrap; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.holes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 88px; padding-bottom: 40px; color: rgba(255, 255, 255, .86); }
.holes__ticks { display: flex; justify-content: space-between; align-items: flex-end; height: 14px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.holes__ticks i { width: 2px; height: 9px; background: var(--gold-l); transform-origin: bottom center; }
.holes__ticks i:nth-child(9), .holes__ticks i:nth-child(18) { height: 14px; }
html.js:not(.rm) .holes__ticks i { transform: scaleY(0); transition: transform .45s var(--expo); }
html.js.hero-in .holes__ticks i { transform: none; transition-delay: calc(.3s + var(--h) * 20ms); }
@media (max-width: 899px) { .holes { margin-top: 64px; } }
@media (max-width: 699px) {
  .hero { padding-top: calc(var(--hd) + 12px); }
  .hero__frame { height: min(calc(100vh - 400px), 150vw); height: min(calc(100svh - 400px), 150vw); min-height: 260px; }
  .hero__foot { padding-top: 24px; }
  .hero__line { letter-spacing: .1em; margin-right: -.1em; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta a { flex: 1 1 100%; justify-content: center; }
  .holes { gap: 14px; margin-top: 52px; padding-bottom: 28px; }
  .film-btn { right: 10px; bottom: 10px; }
}

/* ---------- The course: first light section; the four numbers roll as they arrive ---------- */
.course { padding: 120px 0 112px; background: var(--white); }
.course__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px 96px; align-items: end; }
.course .lbl { color: var(--navy); margin-bottom: 18px; }
.course__title { font: 600 clamp(2rem, 1.2rem + 2.2vw, 3.5rem)/1.04 var(--font); letter-spacing: -.012em; color: var(--navy); max-width: 13em; }
.digits { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 28px; margin-bottom: 26px; }
.digits > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.digits dt { color: var(--body); }
.digits dd { display: flex; font: 300 clamp(2.25rem, 1.6rem + 1.6vw, 3.5rem)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--navy); letter-spacing: -.02em; }
.dg { display: inline-block; height: 1em; overflow: hidden; }
.dg i { display: block; font-style: normal; line-height: 1; transform: translateY(calc(var(--n) * -10%)); }
.dg-sep { display: inline-block; line-height: 1; }
html.js:not(.rm) .dg i { transform: translateY(0); transition: transform .9s var(--expo); }
html.js:not(.rm) .digits.in .dg i { transform: translateY(calc(var(--n) * -10%)); transition-delay: calc(.1s + var(--n) * 25ms); }
.course__body { max-width: 34em; font-size: .9375rem; line-height: 1.65; color: var(--body); }
@media (max-width: 899px) { .course__grid { grid-template-columns: 1fr; } }
@media (max-width: 699px) { .course { padding: 80px 0 72px; } .digits { gap: 0 18px; } }

/* ---------- Ticker ---------- */
.ticker { position: relative; background: var(--navy); color: var(--white); display: flex; align-items: center; }
.ticker__view { flex: 1; overflow-x: auto; scrollbar-width: none; }
.ticker__view::-webkit-scrollbar { display: none; }
.ticker__track { display: flex; width: max-content; }
.ticker__track li { display: flex; align-items: center; gap: 22px; padding: 0 22px 0 0; min-height: 52px; font: 600 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ticker__track li::after { content: ""; width: 6px; height: 6px; background: var(--gold-l); }
html.js:not(.rm) .ticker__view { overflow: hidden; }
html.js:not(.rm) .ticker__track { animation: tick 46s linear infinite; }
html.js .ticker__view:hover .ticker__track, html.js .ticker.is-paused .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker__pause { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-left: 1px solid rgba(255, 255, 255, .2); color: var(--white); }
.ticker__pause svg { width: 12px; height: 12px; }
.ticker__pause .i-play { display: none; }
.ticker__pause[aria-pressed="true"] .i-play { display: block; }
.ticker__pause[aria-pressed="true"] .i-pause { display: none; }
html.rm .ticker__pause, html:not(.js) .ticker__pause { display: none; }

/* ---------- Around the club ---------- */
.news { padding: 112px 0; }
.news__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.news__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
.meta { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; font: 600 .75rem/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.feature { display: block; position: relative; }
.feature__media { position: relative; display: block; overflow: hidden; }
.feature__media video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--expo); }
.feature:hover .feature__media video { transform: scale(1.03); }
.feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 48, 111, .92) 0%, rgba(13, 48, 111, .55) 32%, rgba(13, 48, 111, 0) 60%); }
.feature__text { position: absolute; left: 32px; right: 32px; bottom: 30px; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.feature__title { font: 600 clamp(1.4rem, 1rem + 1.2vw, 2.25rem)/1.12 var(--font); color: var(--white); max-width: 18em; }
.feature__body { max-width: 34em; color: var(--white); font-size: .9375rem; }
.list { display: grid; gap: 22px; }
.list li { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 14px; }
.list a { display: block; }
.list__row { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; }
.list__img { display: block; overflow: hidden; }
.list__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1s var(--expo); }
.list a:hover .list__img img { transform: scale(1.06); }
.list__title { display: block; font: 600 1.0625rem/1.25 var(--font); color: var(--white); margin-bottom: 6px; transition: color .3s var(--ease); }
.list a:hover .list__title { color: var(--gold-l); }
.list__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.5; }
@media (max-width: 899px) { .news { padding: 80px 0; } .news__grid { grid-template-columns: 1fr; } .feature__text { left: 20px; right: 20px; bottom: 20px; } .feature__body { display: none; } }

/* ---------- Membership over a blurred photograph ---------- */
.join { position: relative; padding: 140px var(--g); overflow: hidden; }
.join__bg { position: absolute; inset: -40px; }
.join__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px); opacity: .3; }
.join__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(13, 48, 111, .7), rgba(13, 48, 111, 0)); }
.join__col { position: relative; max-width: 680px; margin: 0 auto; text-align: center; }
.join__col .lbl { color: var(--gold-l); margin-bottom: 16px; }
.join__col .h2 { margin-bottom: 18px; }
.join__col > p:not(.lbl) { color: var(--white); }
.spec { margin: 32px 0; text-align: left; }
.spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.spec dt { font: 600 .75rem/1.6 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.spec dd { text-align: right; color: var(--white); }
.join__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 699px) { .join { padding: 88px var(--g); } }

/* ---------- The practice ground: the pinned scrub on desktop pointers, a staggered grid otherwise ---------- */
.practice { padding-top: 120px; }
.practice__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.practice__head p { max-width: 36em; color: var(--body); }
@media (max-width: 699px) { .practice { padding-top: 80px; } .practice__head { grid-template-columns: 1fr; margin-bottom: 36px; } .scrub { padding-bottom: 80px; } }
.scrub { padding: 0 var(--g) 120px; }
.scrub__track { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pcard:nth-child(even) { margin-top: 56px; }
.pcard a { position: relative; display: block; overflow: hidden; color: var(--white); }
.pcard img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s var(--expo); }
.pcard a:hover img { transform: scale(1.04); }
.pcard a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 48, 111, .9) 0%, rgba(13, 48, 111, .45) 30%, rgba(13, 48, 111, 0) 55%); }
.pcard__cap { position: absolute; z-index: 1; left: 18px; right: 52px; bottom: 18px; font: 600 .75rem/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.pcard svg { position: absolute; z-index: 1; right: 18px; bottom: 20px; width: 18px; height: 18px; transition: transform .35s var(--ease); }
.pcard a:hover svg { transform: translateX(4px); }
@media (min-width: 900px) { .scrub__track { grid-template-columns: repeat(3, 1fr); } .pcard:nth-child(even) { margin-top: 0; } .pcard:nth-child(3n+2) { margin-top: 64px; } }
/* Desktop pointers (class set by script): one screen held while the track crosses it. The hold is the track's
   overflow, set in CSS: six cards of 24vw, five gaps of 3.2vw and insets of 4.4vw make the track 168.8vw, 68.8vw wider
   than the screen, so 68.8vw of vertical scroll moves it the whole way and the last card ends at the right inset. */
.scrub.is-held { --dist: 68.8vw; padding: 0; height: calc(100vh + var(--dist)); height: calc(100svh + var(--dist)); }
.scrub.is-held .scrub__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.scrub.is-held .scrub__track { display: flex; gap: 3.2vw; padding: 0 4.4vw; width: max-content; will-change: transform; }
.scrub.is-held .pcard { width: 24vw; margin-top: 0; }
.scrub.is-held .pcard img { aspect-ratio: 3 / 3.6; max-height: 62svh; }
.scrub.is-held .pcard:nth-child(even) { transform: translateY(10svh); }
.scrub.is-held .pcard:nth-child(odd) { transform: translateY(-6svh); }

/* ---------- Two ways in, and occasions: spec sheets with square markers ---------- */
.ways { padding: 120px 0; }
.ways--stone { background: var(--stone); color: var(--body); }
.ways__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
.ways__intro .lbl { margin: 18px 0 14px; }
.on-navy .ways__intro .lbl { color: var(--gold-l); }
.ways--stone .ways__intro .lbl { color: var(--navy); }
.sheet--low { margin-top: 96px; }
.sheet__img { position: relative; margin-bottom: 18px; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); }
.sheet__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sheet__name { position: relative; font: 600 .875rem/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--white); padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.ways--stone .sheet__name { color: var(--navy); border-bottom-color: var(--rule); }
.sq::after { content: ""; position: absolute; right: 0; top: 4px; width: 7px; height: 7px; background: var(--gold); }
.spec--sheet { margin: 0; }
.spec--sheet > div { padding: 10px 0; }
.ways--stone .spec--sheet > div { border-bottom-color: var(--rule); }
.ways--stone .spec dd { color: var(--navy); }
.ways--stone .spec dt { color: var(--body); }
@media (max-width: 1099px) { .ways__grid { grid-template-columns: 1fr 1fr; } .ways__intro { grid-column: 1 / -1; } }
@media (max-width: 599px) { .ways { padding: 80px 0; } .ways__grid { grid-template-columns: 1fr; } .sheet--low { margin-top: 0; } }

/* ---------- In numbers: hairline grid, navy shutters that slide away ---------- */
.nums { padding: 120px 0; }
.nums__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.nums__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cell { position: relative; overflow: hidden; min-height: 200px; padding: 28px 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; color: var(--navy); }
.cell b { font: 300 clamp(2.5rem, 1.8rem + 2vw, 4rem)/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cell .lbl { color: var(--body); }
.cell--wide { grid-column: span 4; flex-direction: row; align-items: flex-end; padding: 0; min-height: 0; }
.cell--wide img { width: 55%; aspect-ratio: 16 / 7; object-fit: cover; }
.cell--wide .lbl { padding: 24px; }
.shutter { position: absolute; inset: 0; background: var(--navy); transform-origin: right center; }
.js .shutter { transition: transform .8s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--s, 0) * 70ms); }
html:not(.js) .shutter, html.rm .shutter, .nums__grid.in .shutter { transform: scaleX(0); }
@media (max-width: 899px) { .nums__grid { grid-template-columns: 1fr 1fr; } .cell--wide { grid-column: span 2; flex-direction: column; align-items: stretch; } .cell--wide img { width: 100%; } }
@media (max-width: 599px) { .nums { padding: 80px 0; } .cell { min-height: 150px; padding: 20px 16px; } }

/* ---------- Footer ---------- */
.ft { position: relative; background: var(--navy); color: rgba(255, 255, 255, .86); padding-top: 96px; overflow: hidden; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.ft__plate { --sti-crest-plate: 104px; margin-bottom: 24px; }
.ft__intro .h3 { margin-bottom: 12px; }
.ft__intro p { max-width: 30em; margin-bottom: 14px; }
.ft__intro a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ft__tag { color: var(--white); }
.ft__tag span { font-size: .875rem; color: rgba(255, 255, 255, .86); }
.ft .lbl { color: var(--gold-l); margin-bottom: 8px; }
.ft nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--white); }
.ft__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .875rem; }
.ft__base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-right: 16px; color: var(--white); }
.ft__name { font: 600 clamp(6rem, 2rem + 18vw, 20rem)/.8 var(--font); color: rgba(255, 255, 255, .08); letter-spacing: -.04em; white-space: nowrap; margin: 24px 0 -.12em var(--g); }
@media (max-width: 899px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__intro { grid-column: 1 / -1; } }

/* ---------- Gentle photo parallax (James, 24 Oct) ----------
   The photo drifts slower than its clipped frame: translate and scale are the individual transform properties, so they
   compose with the hover zoom on the same image. --px is scrubbed by ScrollTrigger in main.js. */
.js .px { scale: 1.08; translate: 0 var(--px, 0px); }
@media (prefers-reduced-motion: reduce) { .js .px { scale: none; translate: none; } }
html.rm .px { scale: none; translate: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pre { display: none !important; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
html.rm .ticker__track { animation: none !important; transform: none !important; }