/* St Ives (Hunts) Golf Club, nynj direction.
   After nynjfwc26.com: a white preloader rolling phrases over a count, a navy bar and a lift; the name set huge and full
   of film, shrinking towards the header; two held panels; a held statement that swaps its line and turns navy as
   photographs pass and pixel wheels turn; the four tees on navy with stepped edges; a fixture list of rounded rows;
   one site as chips; tiles; contact as links; a marquee to finish. White and Warm Stone grounds, Club Navy for the
   inverted sections, Fairway Gold for the wheels, the steps and hairlines. Proxima Nova Bold for the mark and the big
   lines in sentence case, capitals for labels and buttons. Transform and opacity only. */

/* ST IVES is set in Anton (SIL Open Font License, from Google Fonts, self-hosted): a tall condensed face, so the name is
   bigger and shows more of the course (James, 24 Oct). Used for the mark only. */
@font-face { font-family: "Nynj Mark"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

: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: 56px; --hd: 84px;
}
@media (max-width: 1099px) { :root { --g: 36px; } }
@media (max-width: 699px) { :root { --g: 18px; --hd: 64px; } }

* { box-sizing: border-box; }
html { background: var(--white); color: var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/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, 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; }
[data-dark] :focus-visible, .hd.is-dark :focus-visible, .menu :focus-visible, .panel--navy :focus-visible, .tile--navy :focus-visible, .row--final :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); }
.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: 700 .75rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.h2 { font: 700 clamp(2rem, 1.2rem + 2.6vw, 4rem)/1 var(--font); letter-spacing: -.02em; color: var(--navy); }

/* Buttons: rounded, capitals, 52 px */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 12px; background: var(--navy); color: var(--white); border: 2px solid var(--navy); font: 800 .875rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); }
.btn:hover { background: var(--sky); border-color: var(--sky); }
.btn:hover svg { transform: translateX(4px); }
.btn--line { background: transparent; color: var(--navy); }
.btn--line:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--gold-l); border-color: var(--gold-l); color: var(--navy); }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 10px; background: var(--navy); color: var(--white); font: 800 .8125rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.pill:hover { background: var(--sky); }
.pill--light { background: var(--white); color: var(--navy); }
.pill--light:hover { background: var(--gold-l); color: var(--navy); }
/* The roll: the label doubled, the second rises into place on hover */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.2; }
.roll::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.roll, .roll::after { transition: transform .25s var(--ease); }
a:hover .roll, button:hover .roll, a:focus-visible .roll, button:focus-visible .roll { transform: translateY(-100%); }

/* Reveals (script only), once */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .75s var(--expo); transition-delay: var(--d, 0s); }
.js.hero-in .rise { opacity: 1; transform: none; }
.js .up { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .9s var(--expo); }
.js .up.in { opacity: 1; transform: none; }

/* ---------- Preloader (html.intro): gone by about 1.25 s of animation ---------- */
.pre { display: none; }
html.intro .pre { display: block; position: fixed; inset: 0; z-index: 500; pointer-events: none; animation: pre-off 0s linear 1.24s forwards; }
.pre__panel { position: absolute; inset: 0; background: var(--white); display: grid; place-items: center; overflow: hidden; animation: lift .42s cubic-bezier(.7, 0, .2, 1) .8s forwards; }
.pre__roll { position: relative; height: 1.1em; overflow: hidden; font: 700 clamp(1.5rem, 1rem + 2vw, 2.75rem)/1.1 var(--font); color: var(--navy); letter-spacing: -.01em; text-align: center; }
.pre__roll span { display: block; height: 1.1em; white-space: nowrap; animation: roll .62s steps(1) forwards; }
.pre__roll span:nth-child(2) { color: var(--sky); }
@keyframes roll { 0% { transform: translateY(0); } 25% { transform: translateY(-100%); } 50% { transform: translateY(-200%); } 75% { transform: translateY(-300%); } 100% { transform: translateY(-300%); } }
.pre__pct { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font: 700 .75rem/1 var(--font); letter-spacing: .14em; color: var(--navy); 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 .62s linear forwards; }
@keyframes pct { to { --p: 100; } }
.pre__bar { position: absolute; inset: 0; background: var(--navy); transform: translateY(101%); animation: bar .3s cubic-bezier(.7, 0, .2, 1) .62s forwards; }
@keyframes bar { to { transform: none; } }
@keyframes lift { to { transform: translateY(-101%); } }
@keyframes pre-off { to { visibility: hidden; } }

/* ---------- Header: white, navy over the dark sections, 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: 16px; background: var(--white); color: var(--navy); box-shadow: 0 1px 0 var(--rule); transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.hd.is-dark { background: var(--navy); color: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, .15); }
.hd__nav { display: flex; gap: 6px; }
.hd__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 700 .875rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.hd__mark { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; line-height: 1; transition: opacity .35s var(--ease); }
.hd__name { font: 700 1.5rem/1 var(--font); letter-spacing: -.02em; }
.hd__sub { font: 700 .625rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
html.mark-big .hd__mark { opacity: 0; }
.hd__right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.hd__book { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--navy); color: var(--white); font: 800 .8125rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s var(--ease), color .3s var(--ease); }
.hd__book:hover { background: var(--sky); }
.hd.is-dark .hd__book { background: var(--white); color: var(--navy); }
.hd.is-dark .hd__book:hover { background: var(--gold-l); }
.hd__short { display: none; }
.hd__menu { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 10px; font: 700 .875rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1099px) { .hd { grid-template-columns: auto 1fr auto; } .hd__nav { display: none; } .hd__mark { align-items: flex-start; } }
@media (max-width: 699px) { .hd__name { font-size: 1.25rem; } .hd__long { display: none; } .hd__short { display: inline; } .hd__book { padding: 0 14px; } }

/* ---------- Menu: full-screen navy ---------- */
.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, .15); }
.menu__name { font: 700 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.menu__close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .8); font: 800 .8125rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.menu__close svg { width: 14px; height: 14px; }
.menu__close:hover { background: var(--white); color: var(--navy); }
.menu__list { padding: 28px var(--g); }
.menu__list li { opacity: 0; transform: translateY(20px); transition: opacity .45s var(--ease), transform .7s var(--expo); transition-delay: calc(.05s + .04s * var(--i, 1)); }
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu__list a { display: flex; align-items: center; min-height: 56px; font: 700 clamp(1.75rem, 1.2rem + 2vw, 3rem)/1.05 var(--font); letter-spacing: -.015em; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: color .3s var(--ease); }
.menu__list a:hover { color: var(--gold-l); }
.menu__foot { display: flex; align-items: center; gap: 22px; padding: 12px var(--g) 40px; }
.menu__plate { --sti-crest-plate: 92px; flex: none; }
.menu__foot a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Hero: the name full of film ---------- */
.hero { position: relative; background: var(--white); padding-top: var(--hd); }
.hero__stage { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 24px var(--g) 40px; }
.mark { position: relative; overflow: hidden; transform-origin: 50% 0; background: var(--white); clip-path: inset(1px); }
/* the film stops well inside the white layer (3% each side, 1.5% top and bottom; the letters never reach the edge), so no
   hairline of film can show at the box edge at any size while the mark scales */
.mark video { position: absolute; inset: 1.5% 3%; width: 94%; height: 97%; object-fit: cover; }
/* white with the word cut out: screen keeps white white, and lets the film show where the word is black.
   ST IVES in capitals in Anton (James, 24 Oct), sized to about 92% of the width. */
.mark__knock { position: relative; background: var(--white); mix-blend-mode: screen; text-align: center; text-transform: uppercase; font: 400 clamp(4.5rem, 31vw, 42rem)/.9 "Nynj Mark", Impact, var(--font); color: var(--ink); letter-spacing: 0; padding: .04em 0 .06em; white-space: nowrap; }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; }
.hero__foot .lbl { grid-column: 1 / -1; color: var(--navy); }
.hero__title { font: 700 clamp(2.25rem, 1.2rem + 3vw, 4.5rem)/1 var(--font); letter-spacing: -.025em; color: var(--navy); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 899px) { .hero__foot { grid-template-columns: 1fr; } }
@media (max-width: 699px) { .hero__stage { padding-top: 18px; gap: 22px; } .mark__knock { font-size: 30.5vw; } .hero__where { display: none; } }

/* ---------- Panels ---------- */
.panels { position: relative; padding: 0 var(--g) 10vh; background: var(--white); }
.panel { position: sticky; top: calc(var(--hd) + 6vh); height: min(78svh, 760px); margin: 0 auto 6vh; overflow: hidden; border-radius: 18px; }
.panel--photo img { width: 100%; height: 100%; object-fit: cover; }
.panel--navy { background: var(--navy); color: rgba(255, 255, 255, .88); padding: clamp(28px, 5vw, 80px); display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; }
.panel--navy .lbl { color: var(--gold-l); }
.panel__big { font: 700 clamp(2rem, 1.1rem + 3.4vw, 5rem)/1 var(--font); letter-spacing: -.025em; color: var(--white); max-width: 15em; }
.panel__small { max-width: 38em; }
@media (max-width: 699px) { .panel { position: relative; top: 0; height: auto; margin-bottom: 18px; border-radius: 12px; } .panel--photo img { aspect-ratio: 4 / 5; } .panels { padding-bottom: 40px; } }

/* ---------- Statement: held on desktop pointers; the ground turns navy, photographs pass in two lanes ---------- */
.st { position: relative; background: var(--white); }
.st__stage { position: relative; overflow: hidden; }
.st__navy { position: absolute; inset: 0; background: var(--navy); opacity: 0; }
.st__copy { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 96px var(--g); text-align: center; }
.st__line { font: 700 clamp(2.4rem, 1.2rem + 4.6vw, 6.6rem)/.95 var(--font); letter-spacing: -.03em; color: var(--navy); }
.st__line .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.st__line .ln > span { display: inline-block; }
.st__body { max-width: 34em; margin: 26px auto 0; }
.st__copy--b { background: var(--navy); color: rgba(255, 255, 255, .88); }
.st__copy--b .st__line { color: var(--white); }
.st__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 var(--g) 48px; }
.sp { overflow: hidden; border-radius: 12px; }
.sp img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.wheel { display: none; }
/* held (class set by script): one stage, two lines that cross-fade with the navy ground, photographs in the side lanes */
.st.is-held .st__hold { height: 320vh; height: 320svh; }
.st.is-held .st__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.st.is-held .st__copy { position: absolute; left: 50%; top: 50%; width: min(640px, 46vw); padding: 0; transform: translate(-50%, -50%); background: none; }
.st.is-held .st__copy--b { opacity: 0; }
.st.is-held .st__line .ln > span { transform: translateY(105%); transition: transform .55s var(--expo); }
.st.is-held .st__copy.is-on .st__line .ln > span { transform: none; }
.st.is-held .st__copy .ln:nth-child(2) > span { transition-delay: .06s; } .st.is-held .st__copy .ln:nth-child(3) > span { transition-delay: .12s; }
.st.is-held .st__body { opacity: 0; transition: opacity .6s var(--ease) .25s; }
.st.is-held .st__copy.is-on .st__body { opacity: 1; }
.st.is-held .st__photos { position: absolute; inset: 0; display: block; padding: 0; z-index: 1; pointer-events: none; --lane: calc((100vw - min(640px, 46vw)) / 2); }
/* large portrait photographs in the side lanes, as on nynjfwc26.com (James, 24 Oct: they were far too small) */
.st.is-held .sp { position: absolute; width: calc(var(--lane) - 3vw); max-width: 460px; will-change: transform; }
.st.is-held .sp img { aspect-ratio: 4 / 5; border-radius: 14px; }
.st.is-held .sp { border-radius: 14px; }
.st.is-held .sp--1 { left: 2.5vw; top: 100%; } .st.is-held .sp--2 { right: 2vw; top: 100%; } .st.is-held .sp--3 { left: 4vw; top: 100%; }
.st.is-held .sp--4 { right: 2vw; top: 100%; } .st.is-held .sp--5 { left: 3vw; top: 100%; }
.st.is-held .wheel { display: block; position: absolute; z-index: 0; width: min(36vw, 520px); height: min(36vw, 520px); top: 50%; fill: var(--gold); opacity: .9; will-change: transform; }
.st.is-held .wheel--l { left: 0; transform: translate(-50%, -50%) rotate(180deg); }
.st.is-held .wheel--r { right: 0; transform: translate(50%, -50%); }
@media (max-width: 699px) { .st__photos { grid-template-columns: 1fr; } .st__copy { padding: 72px var(--g); } }

/* ---------- Four tees: navy, stepped edges ---------- */
.tees { position: relative; background: var(--navy); color: rgba(255, 255, 255, .88); padding: 140px 0; text-align: center; }
.tees .lbl { color: var(--gold-l); }
.tees__title { font: 700 clamp(2rem, 1.2rem + 2.4vw, 3.75rem)/1 var(--font); letter-spacing: -.02em; color: var(--white); margin: 14px 0 48px; }
.tees__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1240px; margin: 0 auto 48px; border-top: 1px solid rgba(255, 255, 255, .25); }
.tees__grid > div { padding: 26px 12px; border-right: 1px solid rgba(255, 255, 255, .25); display: flex; flex-direction: column-reverse; gap: 10px; }
.tees__grid > div:last-child { border-right: 0; }
.tees__grid dt { font: 700 .8125rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.tees__grid dd { font: 700 clamp(2.6rem, 1.4rem + 4.2vw, 7rem)/1 var(--font); letter-spacing: -.03em; color: var(--white); font-variant-numeric: tabular-nums; }
.tees__grid dd span { display: block; margin-top: 8px; font: 700 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.steps { position: absolute; left: 0; right: 0; height: 80px; display: grid; grid-template-columns: repeat(12, 1fr); }
.steps i { align-self: start; height: calc(var(--h) * 1px); }
.steps--top { top: 0; } .steps--top i { background: var(--white); transform-origin: top center; }
.steps--bottom { bottom: 0; } .steps--bottom i { align-self: end; background: var(--white); transform-origin: bottom center; }
.js:not(.rm) .steps i { transform: scaleY(0); transition: transform .7s var(--expo); transition-delay: calc(var(--k) * 35ms); }
.js .steps.in i { transform: none; }
@media (max-width: 699px) { .tees { padding: 110px 0; } .tees__grid { grid-template-columns: 1fr 1fr; } .tees__grid > div:nth-child(2) { border-right: 0; } .tees__grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .25); } .steps { height: 56px; } .steps i { height: calc(var(--h) * .7px); } }

/* ---------- Fixtures ---------- */
.fix { padding-top: 120px; padding-bottom: 120px; }
.fix__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: 40px; }
.fix__rows { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(0, 2fr) auto; align-items: center; gap: 16px 32px; padding: 18px 18px 18px 28px; border-radius: 16px; background: var(--stone); color: var(--navy); }
.row__when { display: flex; flex-direction: column; font: 700 1.25rem/1.15 var(--font); }
.row__when b { font: 700 .75rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin-bottom: 4px; }
.row__what { color: var(--body); }
.row--final { background: var(--navy); color: var(--white); }
.row--final .row__when b, .row--final .row__what { color: rgba(255, 255, 255, .86); }
@media (max-width: 799px) { .fix__head { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; padding: 20px; } .row .pill { justify-self: start; } }

/* ---------- One site ---------- */
.site { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, .88); padding: 140px 0; }
.site__media { position: absolute; inset: 0; }
.site__media img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.site__inner { position: relative; }
.site .lbl { color: var(--gold-l); }
.site .h2 { color: var(--white); margin: 14px 0 48px; max-width: 12em; }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-bottom: 48px; }
.chips ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chips li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; color: var(--white); font-size: .9375rem; background: rgba(13, 48, 111, .6); }
@media (max-width: 899px) { .chips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .site { padding: 96px 0; } .chips { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- Tiles ---------- */
.tiles { padding-top: 120px; padding-bottom: 120px; }
.tiles .h2 { max-width: 14em; margin-bottom: 40px; }
.tiles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 1; }
.tile:not(.tile--navy) > a { position: absolute; inset: 0; display: block; color: var(--white); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--expo); }
.tile:not(.tile--navy) > a:hover img { transform: scale(1.1); }
.tile:not(.tile--navy) > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 48, 111, .85), rgba(13, 48, 111, 0) 50%); }
.tile__cap { position: absolute; z-index: 1; left: 18px; bottom: 16px; font: 800 .875rem/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.tile--navy { background: var(--navy); color: rgba(255, 255, 255, .88); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.tile__big { font: 700 clamp(2rem, 1.2rem + 2vw, 3.5rem)/1 var(--font); color: var(--white); letter-spacing: -.03em; }
.tile--navy .pill { align-self: start; }
@media (max-width: 899px) { .tiles__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .tiles { padding-top: 88px; padding-bottom: 88px; } .tiles__grid { gap: 10px; } .tile--navy { grid-column: 1 / -1; aspect-ratio: auto; } }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, .88); padding: 140px 0; }
.contact__media { position: absolute; inset: 0; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.contact__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px 72px; align-items: start; }
.contact .h2 { color: var(--white); }
.contact__links li + li { margin-top: 12px; }
.contact__links a { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 16px; min-height: 64px; padding: 0 22px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .55); background: rgba(13, 48, 111, .55); color: var(--white); font-size: 1.125rem; transition: background-color .3s var(--ease), color .3s var(--ease); }
.contact__links a:hover { background: var(--white); color: var(--navy); }
.contact__links .lbl { color: inherit; }
@media (max-width: 899px) { .contact { padding: 96px 0; } .contact__inner { grid-template-columns: 1fr; } .contact__links a { grid-template-columns: 60px 1fr; padding: 0 16px; font-size: 1rem; } }

/* ---------- Proof band ---------- */
.proof { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--white); }
.proof__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 26px; padding-bottom: 26px; }
.proof__row li { font: 700 .8125rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }

/* ---------- Footer: navy, a marquee ---------- */
.ft { background: var(--navy); color: rgba(255, 255, 255, .86); padding-top: 88px; overflow: hidden; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.ft__plate { --sti-crest-plate: 100px; margin-bottom: 22px; }
.ft__brand a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ft__tag { margin-top: 12px; 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 nav a:hover { color: var(--gold-l); }
.marquee { margin-top: 72px; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.marquee__run { display: flex; align-items: center; gap: 48px; width: max-content; padding: 22px 0; font: 700 clamp(3rem, 1.6rem + 5vw, 7.5rem)/1 var(--font); letter-spacing: -.03em; color: var(--white); white-space: nowrap; }
.marquee__run i { width: 22px; height: 22px; background: var(--gold-l); flex: none; }
html.js:not(.rm) .marquee__run { animation: mq 40s linear infinite; }
@keyframes mq { to { transform: translateX(-50%); } }
.ft__base { padding-top: 24px; padding-bottom: 32px; font-size: .875rem; }
@media (max-width: 899px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }

/* ---------- 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 .marquee__run { animation: none !important; }

/* Gentle photo parallax (James, 24 Oct): the photograph drifts slower than its frame, about 7% of the frame height in
   all. translate and scale are the individual transform properties, so they compose with the tiles' hover zoom and the
   lanes' own movement. Not on the photographs under words (one site, contact), the film or the crest. */
.px { scale: 1.08; translate: 0 var(--px, 0px); }
@media (prefers-reduced-motion: reduce) { .px { scale: none; translate: none; } }
html.rm .px { scale: none; translate: none; }