/* Site Alive - hero presentations (loaded only on pages that use them). Colours come from the theme. */

/* ---------- Grand title: a big photo, a centred spaced-out title between fine lines ---------- */
.hero-grand { align-items: center; text-align: center; }
.hero-grand .sa-hero-inner { justify-content: center; }
.hero-grand .pg-text { max-width: 1040px; margin-inline: auto; text-align: center; }
.hero-grand .pg-eyebrow { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 0 0 1.4rem; font-size: .8rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--fg); opacity: .92; }
.hero-grand .pg-eyebrow::before, .hero-grand .pg-eyebrow::after { content: ""; width: clamp(28px, 5vw, 64px); height: 1px; background: currentColor; opacity: .7; }
.hero-grand .pg-title { font-size: calc(clamp(2.4rem, 4.4vw + 1rem, 5.4rem) * var(--h-scale)); line-height: 1.04; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 40px rgba(0, 0, 0, .25); }
.hero-grand .sa-hero-p { margin: 1.3rem auto 0; font-size: clamp(1.05rem, .6vw + .95rem, 1.4rem); letter-spacing: .02em; }
.hero-grand .sa-hero-btns { justify-content: center; margin-top: 2.2rem; }
.hero-grand.has-media .sa-ov { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .55)); }
.hero-grand:not(.has-media) { --bg: var(--c-dark); --fg: var(--c-dark-ink); --fg-soft: color-mix(in srgb, var(--c-dark-ink) 75%, var(--c-dark)); }
@media (max-width: 640px) { .hero-grand .pg-title { letter-spacing: .04em; } .hero-grand .pg-eyebrow { letter-spacing: .22em; } }

/* ---------- Words first: headline beside the story, numbers under a fine line, then the picture ---------- */
.hero-statement .ps-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 6rem); align-items: start; }
.hero-statement .sa-hero-h { font-size: calc(clamp(2.3rem, 3.4vw + 1rem, 4.6rem) * var(--h-scale)); line-height: 1.06; color: var(--fg); }
.hero-statement .ps-story { padding-top: .6rem; }
.hero-statement .ps-story .sa-hero-p { margin-top: 0; font-size: 1.02rem; line-height: 1.7; }
.hero-statement .ps-story .sa-hero-btns { margin-top: 1.4rem; }
.hero-statement .ps-rule { margin-top: clamp(2rem, 4vw, 3.4rem); padding-top: clamp(1.2rem, 2vw, 1.8rem); border-top: 1px solid var(--line); max-width: 60%; }
.hero-statement .ps-figs { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 4rem); margin: 0; }
.hero-statement .ps-fig { display: flex; flex-direction: column-reverse; gap: .35rem; }
.hero-statement .ps-fig dd { margin: 0; font-family: var(--f-head); font-weight: var(--h-weight); font-size: clamp(1.9rem, 2.4vw + 1rem, 2.9rem); line-height: 1; letter-spacing: -.01em; }
.hero-statement .ps-fig dt { font-size: .85rem; color: var(--fg-soft); max-width: 16ch; }
.hero-statement .ps-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-weight: 600; }
.hero-statement .ps-points li { display: inline-flex; gap: .45em; align-items: center; }
.hero-statement .ps-points .i { color: var(--hi); }
.hero-statement .ps-media { margin: clamp(2rem, 4vw, 3.4rem) 0 0; position: relative; aspect-ratio: 21 / 8; border-radius: var(--r-lg); overflow: hidden; background: var(--line); }
.hero-statement .ps-media img, .hero-statement .ps-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .hero-statement .ps-top { grid-template-columns: 1fr; }
  .hero-statement .ps-rule { max-width: none; }
  .hero-statement .ps-media { aspect-ratio: 4 / 3; }
}

/* ---------- Electric: full screen and dark, live electricity behind a huge flickering headline ---------- */
.hero-surge { --bg: var(--c-dark); --fg: #fff; --fg-soft: rgba(255, 255, 255, .72); position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 60%, color-mix(in srgb, var(--c-primary) 14%, var(--c-dark)) 0%, var(--c-dark) 62%); color: var(--fg); isolation: isolate; }
.hero-surge .sa-hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-surge .sa-hero-bg img, .hero-surge .sa-hero-bg video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(.55); }
.hero-surge .sa-ov { z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 50%, var(--c-dark)); }
.hero-surge .pz-arcs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-surge .pz-scan { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.hero-surge.is-zap { background-color: color-mix(in srgb, var(--c-primary) 18%, var(--c-dark)); }
.hero-surge.is-zap .pz-title { text-shadow: 0 0 6px #fff, 0 0 30px var(--c-primary), 0 0 90px var(--c-primary); }
.hero-surge .sa-hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(7rem, 14vh, 10rem) clamp(4rem, 10vh, 7rem); }
.hero-surge .pz-text { max-width: 1180px; margin-inline: auto; text-align: center; }
.hero-surge .pz-eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.6rem; padding: .45rem 1rem; border: 1px solid color-mix(in srgb, var(--c-primary) 55%, transparent); font-size: .78rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.hero-surge .pz-eyebrow i { width: 8px; height: 8px; background: var(--c-primary); box-shadow: 0 0 10px var(--c-primary); animation: pz-blink 1.4s steps(2, jump-none) infinite; }
.hero-surge .pz-title { font-size: calc(clamp(3.6rem, 11vw, 12rem) * var(--h-scale)); line-height: .86; letter-spacing: .01em; margin: 0; color: #fff; text-shadow: 0 0 2px #fff, 0 0 24px color-mix(in srgb, var(--c-primary) 70%, transparent), 0 0 70px color-mix(in srgb, var(--c-primary) 40%, transparent); opacity: 0; }
.hero-surge .pz-title .sa-accent { color: var(--c-primary); font-style: normal; text-shadow: 0 0 4px #fff, 0 0 28px var(--c-primary), 0 0 80px var(--c-primary); }
.hero-surge .pz-title.is-lit { opacity: 1; animation: pz-neon 1.1s linear both; }
.hero-surge .pz-p { max-width: 640px; margin: 1.8rem auto 0; font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem); color: var(--fg-soft); }
.hero-surge .pz-btns { justify-content: center; margin-top: 2.4rem; }
.hero-surge.arcs-still { background-image: radial-gradient(120% 90% at 50% 60%, color-mix(in srgb, var(--c-primary) 22%, var(--c-dark)) 0%, var(--c-dark) 62%); }
.hero-surge .pz-hint { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 1; }
@keyframes pz-neon { 0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: .1; } 14% { opacity: 1; } 18% { opacity: .3; } 26% { opacity: 1; } 31% { opacity: .55; } 36%, 100% { opacity: 1; } }
@keyframes pz-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .hero-surge .pz-title { opacity: 1; animation: none; } }
html:not(.sa-js) .hero-surge .pz-title { opacity: 1; }

/* ---------- On the wall (Salon): the title beside one matted piece with a wall label ---------- */
.hero-exhibit { padding-block: clamp(48px, 7vw, 120px); }
.hero-exhibit .px-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.hero-exhibit:not(.has-pic) .px-grid { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.hero-exhibit .px-text { display: grid; gap: 1.4rem; align-content: center; }
.hero-exhibit .px-title { margin: 0; text-wrap: balance; }
.hero-exhibit .sa-hero-p { color: var(--fg-soft); max-width: 46ch; }
.hero-exhibit .px-piece { margin: 0; display: grid; gap: 1rem; justify-items: start; }
.hero-exhibit .px-mat { background: #fff; padding: clamp(14px, 2.2vw, 34px); box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .5), 0 3px 8px -3px rgba(0, 0, 0, .14); width: 100%; }
.hero-exhibit .px-mat img, .hero-exhibit .px-mat video { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; padding: 0 !important; box-shadow: none !important; background: none !important; }
.hero-exhibit .px-label { display: grid; gap: .1rem; font-size: .82rem; line-height: 1.5; color: var(--fg-soft); padding-left: 1.2rem; position: relative; }
.hero-exhibit .px-label span:first-of-type { color: var(--fg); font-style: italic; font-family: var(--f-head); font-size: 1.05rem; }
.hero-exhibit .px-dot { position: absolute; left: 0; top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); }
@media (max-width: 860px) { .hero-exhibit .px-grid { grid-template-columns: minmax(0, 1fr); } .hero-exhibit .px-piece { order: -1; } }

/* ---------- Blue horizon (Signal): a crisp white headline over a soft blue glow, an optional framed screen below ---------- */
.hero-horizon { --rim: 104px; --rim-gap: 76px; --bg: var(--c-paper); --fg: var(--c-ink); --fg-soft: color-mix(in srgb, var(--c-ink) 66%, transparent); position: relative; overflow: hidden; isolation: isolate; color: var(--fg); background: var(--bg); }
.hero-horizon .ph-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 70%), radial-gradient(90% 60% at 50% 115%, color-mix(in srgb, var(--c-primary) 30%, transparent), transparent 60%); }
.hero-horizon .ph-glow::after { content: ""; position: absolute; left: -60vw; right: -60vw; top: calc(100% - var(--rim)); height: 1800px; border-radius: 50%; border-top: 1px solid color-mix(in srgb, var(--c-primary) 75%, #fff); box-shadow: 0 -20px 80px -20px var(--c-primary), inset 0 30px 60px -40px var(--c-primary); background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 12%, var(--bg)) 0, var(--bg) var(--rim)); }
.hero-horizon.has-pic .ph-glow::after { display: none; }
.hero-horizon .ph-screen::before { content: ""; position: absolute; z-index: -1; left: -60vw; right: -60vw; top: -44px; height: 160vw; border-radius: 50%; border-top: 1px solid color-mix(in srgb, var(--c-primary) 75%, #fff); box-shadow: 0 -20px 80px -20px var(--c-primary), inset 0 40px 80px -50px var(--c-primary); pointer-events: none; }
.hero-horizon .sa-hero-inner { position: relative; padding-block: clamp(7rem, 13vh, 9rem) clamp(4rem, 10vh, 7rem); min-height: var(--hero-h); display: flex; flex-direction: column; justify-content: center; }
.hero-horizon.has-pic .sa-hero-inner { min-height: 0; padding-bottom: 0; }
.hero-horizon .ph-text { max-width: 980px; }
.hero-horizon.al-center .ph-text { margin-inline: auto; text-align: center; }
.hero-horizon .ph-eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.8rem; padding: .42rem 1rem .42rem .8rem; border: 1px solid color-mix(in srgb, var(--c-ink) 16%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c-ink) 4%, transparent); font-size: .82rem; font-weight: 500; letter-spacing: .02em; color: var(--fg-soft); }
.hero-horizon .ph-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 22%, transparent), 0 0 12px var(--c-primary); }
.hero-horizon .ph-title { font-size: calc(clamp(2.8rem, 6.4vw + .6rem, 6.6rem) * var(--h-scale)); line-height: 1; letter-spacing: -.035em; margin: 0; color: var(--fg); background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--c-ink) 62%, transparent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-horizon .ph-title .sa-accent { -webkit-text-fill-color: var(--c-primary); color: var(--c-primary); font-style: normal; }
.hero-horizon .ph-p { max-width: 620px; margin: 1.6rem 0 0; font-size: clamp(1.05rem, .4vw + .98rem, 1.25rem); line-height: 1.6; color: var(--fg-soft); }
.hero-horizon.al-center .ph-p { margin-inline: auto; }
.hero-horizon .ph-btns { margin-top: 2.2rem; }
.hero-horizon.al-center .ph-btns { justify-content: center; }
.hero-horizon .ph-points { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 2.2rem 0 0; padding: 0; font-size: .9rem; color: var(--fg-soft); }
.hero-horizon.al-center .ph-points { justify-content: center; }
.hero-horizon .ph-points li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-horizon .ph-points .i { width: 16px; height: 16px; color: var(--c-primary); }
.hero-horizon .ph-screen { isolation: isolate; margin: clamp(3rem, 7vw, 5rem) auto 0; max-width: 1100px; position: relative; }
.hero-horizon .ph-frame { border-radius: calc(var(--r) + 6px); padding: 8px; background: color-mix(in srgb, var(--c-ink) 5%, var(--c-paper)); border: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent); box-shadow: 0 -1px 0 color-mix(in srgb, var(--c-primary) 60%, transparent), 0 40px 120px -30px color-mix(in srgb, var(--c-primary) 45%, transparent); }
.hero-horizon .ph-frame img, .hero-horizon .ph-frame video { display: block; width: 100%; height: auto; border-radius: var(--r); }
/* 1.8.1: a video plays full width behind the horizon; the planet's dark body curves over its lower part */
.hero-horizon.has-video .sa-hero-bg { z-index: -3; }
.hero-horizon.has-video .sa-ov { z-index: -2; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .5)); }
/* 1.8.4: one planet for every horizon hero without a framed screen. Its rim sits a fixed --rim above the hero's bottom and the words and buttons always keep --rim-gap clear above it */
.sa-sec.hero-horizon:not(.has-pic) { padding-bottom: 0; }
.hero-horizon:not(.has-pic) .sa-hero-inner { padding-bottom: calc(var(--rim) + var(--rim-gap)); }
.hero-horizon.has-video .sa-hero-inner { min-height: 0; }
@media (max-width: 640px) { .hero-horizon { --rim: 76px; --rim-gap: 52px; } .hero-horizon .ph-glow::after { left: -90vw; right: -90vw; height: 260vw; } }
@media (max-width: 640px) { .hero-horizon .ph-title { letter-spacing: -.03em; } .hero-horizon .ph-points { gap: .5rem 1rem; } .hero-horizon .sa-hero-inner { padding-top: 6.5rem; } .hero-horizon .ph-screen::before { top: -28px; left: -90vw; right: -90vw; height: 260vw; } }

/* ---------- Gilt frame (Sovereign, 1.5.0): the photo drifts slowly closer inside a fine gold frame; the title catches the light ---------- */
.hero-gilt { background-color: #0b0a09; --gl: cubic-bezier(.19, 1, .22, 1); --gl-gold: linear-gradient(105deg, #9c7a3c 0%, #ecd9ab 30%, #c9a35a 50%, #f6e7c1 68%, #a9853f 100%); position: relative; overflow: hidden; text-align: center; }
.hero-gilt .sa-hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-gilt .sa-hero-bg img, .hero-gilt .sa-hero-bg video { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 45%; animation: pg-drift 32s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.hero-gilt.has-media .sa-ov { z-index: -1; background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .62) 70%, rgba(0, 0, 0, .86) 100%), linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 30%, transparent 62%, rgba(0, 0, 0, .7) 100%); }
.hero-gilt .pg-velvet { position: absolute; inset: 0; z-index: -2; background: radial-gradient(80% 70% at 50% 40%, color-mix(in srgb, var(--c-primary) 16%, #0b0a09) 0%, #0b0a09 60%, #000 100%); }
.hero-gilt:not(.has-media) { --bg: #0b0a09; --fg: #f6f0e4; --fg-soft: rgba(246, 240, 228, .8); --hi: var(--c-accent); color: var(--fg); }
/* on the light colours a hero with no photo is warm ivory, the title in ink */
html:not(.paper-dark) .hero-gilt:not(.has-media) { background-color: var(--c-surface); --bg: var(--c-surface); --fg: var(--c-ink); --fg-soft: var(--c-ink-soft); --hi: var(--c-primary); }
html:not(.paper-dark) .hero-gilt .pg-velvet { background: radial-gradient(80% 80% at 50% 30%, var(--c-paper) 0%, var(--c-surface) 70%); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-frame { border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-c { border-color: var(--c-primary); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-text { color: var(--c-ink); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-eyebrow { color: var(--c-primary); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-title { filter: none; }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-shine { background-image: linear-gradient(105deg, var(--c-ink) 0 42%, #9a7634 48%, #c9a35a 52%, var(--c-ink) 58% 100%); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-title .sa-accent { background-image: linear-gradient(105deg, #6b4f1f 0%, #8f6c30 40%, #6a4d1c 62%, #85652b 100%); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .sa-hero-p { color: var(--c-ink-soft); }
html:not(.paper-dark) .hero-gilt:not(.has-media) .pg-rule i { background: linear-gradient(90deg, transparent, var(--c-primary) 30%, #c9a35a 50%, var(--c-primary) 70%, transparent); }
/* the frame: a fine gold rule with brighter corners, drawn in once */
.hero-gilt .pg-frame { position: absolute; inset: clamp(12px, 2.2vw, 30px); z-index: 0; pointer-events: none; border: 1px solid rgba(214, 180, 112, .38); animation: pg-frame 2.4s var(--gl) .2s both; }
.hero-gilt .pg-c { position: absolute; width: clamp(18px, 2.4vw, 34px); height: clamp(18px, 2.4vw, 34px); border: 0 solid #e3c78b; }
.hero-gilt .pg-c.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-gilt .pg-c.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.hero-gilt .pg-c.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.hero-gilt .pg-c.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hero-gilt .sa-hero-inner { position: relative; z-index: 1; justify-content: center; }
.hero-gilt .pg-text { max-width: 980px; margin-inline: auto; color: #fff; }
.hero-gilt .pg-text > * { animation: pg-rise 1.8s var(--gl) both; }
.hero-gilt .pg-text > :nth-child(2) { animation-delay: .25s; } .hero-gilt .pg-text > :nth-child(3) { animation-delay: .7s; }
.hero-gilt .pg-text > :nth-child(4) { animation-delay: .85s; } .hero-gilt .pg-text > :nth-child(5) { animation-delay: 1s; } .hero-gilt .pg-text > :nth-child(6) { animation-delay: 1.15s; }
body.sa-arriving .hero-gilt .pg-text > *, body.sa-arriving .hero-gilt .pg-frame, body.sa-arriving .hero-gilt .pg-shine, body.sa-arriving .hero-gilt .pg-rule i { animation-play-state: paused; }
.hero-gilt .pg-eyebrow { display: inline-flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; font-family: var(--f-body); font-size: .74rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: #ead7a8; }
.hero-gilt .pg-eyebrow::before, .hero-gilt .pg-eyebrow::after { content: ""; width: clamp(24px, 4vw, 54px); height: 1px; background: currentColor; opacity: .7; }
.hero-gilt .pg-title { margin: 0; font-size: calc(clamp(2.9rem, 6.2vw + .6rem, 7.4rem) * var(--h-scale)); line-height: .98; font-weight: var(--h-weight); letter-spacing: -.005em; filter: drop-shadow(0 2px 30px rgba(0, 0, 0, .45)); }
/* a slow sheen crosses the title once, like light across polished metal */
.hero-gilt .pg-shine { display: inline; background: linear-gradient(105deg, #fff 0 42%, #f3dfae 48%, #fffaf0 52%, #fff 58% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pg-sheen 3.4s cubic-bezier(.45, 0, .2, 1) 1.1s both; }
.hero-gilt .pg-title .sa-accent { display: inline-block; font-style: italic; padding-inline: .04em .08em; background: var(--gl-gold); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pg-gold 9s ease-in-out infinite alternate; }
.hero-gilt .pg-rule { display: flex; justify-content: center; margin: clamp(1.4rem, 3vh, 2.2rem) auto 0; }
.hero-gilt .pg-rule i { display: block; width: clamp(90px, 14vw, 180px); height: 1px; background: linear-gradient(90deg, transparent, #d9bb7c 30%, #f3e2b8 50%, #d9bb7c 70%, transparent); transform: scaleX(0); animation: pg-line 1.6s var(--gl) .6s forwards; }
.hero-gilt .sa-hero-p { max-width: 620px; margin: 1.4rem auto 0; font-size: clamp(1rem, .4vw + .92rem, 1.18rem); line-height: 1.75; color: rgba(255, 255, 255, .86); font-weight: 400; }
.hero-gilt .sa-hero-btns { justify-content: center; margin-top: 2.3rem; }
.hero-gilt .pg-points { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 0; margin: 2.4rem 0 0; padding: 0; font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hero-gilt .pg-points li { padding-inline: 1.2rem; }
.hero-gilt .pg-points li + li { border-left: 1px solid rgba(214, 180, 112, .55); }
.hero-gilt .pg-stamp { position: absolute; right: clamp(36px, 5vw, 80px); bottom: clamp(36px, 6vh, 80px); z-index: 1; }
.hero-gilt .pg-hint { position: absolute; left: 50%; bottom: clamp(26px, 4.5vh, 48px); transform: translateX(-50%); z-index: 1; }
.hero-gilt.h-short, .hero-gilt.h-medium { text-align: center; }
.hero-gilt.h-short .pg-title, .hero-gilt.h-medium .pg-title { font-size: calc(clamp(2.4rem, 3.8vw + .8rem, 4.8rem) * var(--h-scale)); }
.hero-gilt.h-short .pg-eyebrow { margin-bottom: 1rem; }
@keyframes pg-drift { from { transform: scale(1.02); } to { transform: scale(1.13) translate3d(-1.2%, -.8%, 0); } }
@keyframes pg-frame { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes pg-rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pg-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes pg-gold { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes pg-line { to { transform: scaleX(1); } }
@media (max-width: 640px) {
  .hero-gilt .pg-eyebrow { letter-spacing: .26em; font-size: .68rem; }
  .hero-gilt .pg-points li { padding-inline: .8rem; letter-spacing: .18em; }
  .hero-gilt .pg-stamp { display: none; }
}
html[data-motion="off"] .hero-gilt *, html[data-motion="off"] .hero-gilt .sa-hero-bg img { animation: none !important; }
html[data-motion="off"] .hero-gilt .pg-rule i { transform: none; }
html[data-motion="off"] .hero-gilt .pg-shine { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-gilt *, .hero-gilt .sa-hero-bg img { animation: none !important; }
  .hero-gilt .pg-rule i { transform: none; }
  .hero-gilt .pg-shine { background-position: 0 0; }
}
/* the scroll hint: one fine gold line with light running down it */
.hero-gilt .pg-hint { width: 44px; height: 64px; border: 0; border-radius: 0; translate: none; }
.hero-gilt .pg-hint::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: rgba(227, 199, 139, .3); }
.hero-gilt .pg-hint span { left: 50%; top: 4px; width: 1px; height: 22px; margin-left: 0; border-radius: 0; background: #e3c78b; animation: pg-hint 2.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes pg-hint { 0% { transform: translateY(0) scaleY(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(34px) scaleY(1); opacity: 0; } }

/* ---------- Impact (1.8.5, smoothed 1.8.6, lean-in 1.8.7, no hang 1.8.9): the mark glides in, hangs, slams down, waves of colour roll out; then a soft pulse ----------
 * At rest (no class) it shows the finished layout. .pi-arr = the "impact" opening is on; .pi-go = it is playing
 * (engine.js adds it once the pictures are ready); .pi-done = finished or skipped; .is-thum = one pulse. */
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.hero-impact { --bg: var(--c-dark); --fg: #fff; --fg-soft: rgba(255, 255, 255, .8); --w1: var(--c-accent); --w2: var(--c-primary); --w3: color-mix(in srgb, var(--c-primary) 65%, #b0f); --pi-h: min(10.5rem, 21vw); --s1: 2.75; --jolt: 5px; position: relative; overflow: hidden; background: var(--c-dark); color: var(--fg); isolation: isolate; padding: 0; }
.hero-impact .pi-stage { position: relative; min-height: 100svh; display: grid; align-items: center; }
.hero-impact .pi-bg, .hero-impact .pi-wave, .hero-impact .pi-vig, .hero-impact .pi-lit { position: absolute; inset: 0; pointer-events: none; }
.hero-impact .pi-bg { z-index: 0; }
.hero-impact .pi-bg img, .hero-impact .pi-lit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-impact .pi-shade { z-index: 1; }
/* a wave: the photo's own lines brightened, coloured leading edge first, seen only through a soft-edged ring that grows from --cx --cy */
.hero-impact .pi-wave { --w: 32vmin; --cx: 50%; --cy: 40%; z-index: 2; opacity: 0; mix-blend-mode: screen; isolation: isolate;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--r) - var(--w)), rgba(0, 0, 0, .3) calc(var(--r) - var(--w) * .78), #000 calc(var(--r) - var(--w) * .46), #000 calc(var(--r) - var(--w) * .3), rgba(0, 0, 0, .35) calc(var(--r) - var(--w) * .12), transparent var(--r));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--r) - var(--w)), rgba(0, 0, 0, .3) calc(var(--r) - var(--w) * .78), #000 calc(var(--r) - var(--w) * .46), #000 calc(var(--r) - var(--w) * .3), rgba(0, 0, 0, .35) calc(var(--r) - var(--w) * .12), transparent var(--r)); }
.hero-impact .pi-lit img { filter: grayscale(1) brightness(3.4) contrast(1.7); }
.hero-impact .pi-tint { position: absolute; inset: 0; mix-blend-mode: multiply; background: radial-gradient(circle at var(--cx) var(--cy), var(--w3) calc(var(--r) - var(--w)), var(--w3) calc(var(--r) - var(--w) * .8), var(--w2) calc(var(--r) - var(--w) * .45), var(--w1) calc(var(--r) - var(--w) * .12), var(--w1) var(--r)); }
.hero-impact .pi-vig { z-index: 3; opacity: 0; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgba(0, 0, 0, .9)); }
.hero-impact .pi-inner { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(4.5rem, 11vh, 7rem); }
/* the logo is the page title: the mark, then the name tucked in a drawer under its right half */
.hero-impact .pi-lock { display: flex; align-items: center; justify-content: center; gap: calc(var(--pi-h) * .26); margin: 0; line-height: 0; font-size: 1rem; }
.hero-impact .pi-mark { position: relative; z-index: 2; display: block; flex: none; transform-origin: 50% 85%; filter: drop-shadow(0 .6vh .8vh rgba(0, 0, 0, .6)); }
.hero-impact .pi-mark-img, .hero-impact .pi-word-img { display: block; height: var(--pi-h); width: auto; max-width: none; }
.hero-impact .pi-logo-img { display: block; width: min(640px, 86vw); height: auto; }
.hero-impact .pi-name { display: block; font-family: var(--f-head); font-weight: var(--h-weight); font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: 1; color: #fff; }
.hero-impact .pi-drawer { position: relative; z-index: 1; display: block; overflow: hidden; margin-left: calc(var(--pi-h) * -.71); padding-left: calc(var(--pi-h) * .71); }
.hero-impact .pi-word { display: block; }
/* the words: a soft dark glow behind them so a passing wave never makes them hard to read */
.hero-impact .pi-copy { position: relative; margin-top: clamp(2.2rem, 6vh, 3.6rem); display: flex; flex-direction: column; align-items: center; }
.hero-impact .pi-h { margin: 0; font-family: var(--f-head); font-weight: 600; font-size: calc(clamp(1.9rem, 1.9vw + 1.1rem, 3.3rem) * var(--h-scale)); line-height: 1.15; letter-spacing: .01em; text-transform: none; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.hero-impact .pi-btns { margin-top: 1.6rem; justify-content: center; align-items: center; gap: .8rem 1.6rem; }
.hero-impact .pi-btns .sa-btn { min-height: 54px; border-radius: 999px; font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; text-transform: none; }
.hero-impact .pi-btns .sa-btn.btn-primary { color: #fff; border: 3px solid transparent; background: linear-gradient(var(--c-dark), var(--c-dark)) padding-box, linear-gradient(90deg, var(--w1), var(--w2), var(--w3)) border-box; box-shadow: 0 0 26px -8px var(--w2); padding: .85em 2em; }
.hero-impact .pi-btns .sa-btn.btn-primary:hover { background: linear-gradient(#1c1c22, #1c1c22) padding-box, linear-gradient(90deg, var(--w1), var(--w2), var(--w3)) border-box; box-shadow: 0 0 34px -6px var(--w2); }
.hero-impact .pi-btns .sa-btn:not(.btn-primary) { border: 0; background: none; box-shadow: none; color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: .03em; padding: .4em .3em; text-shadow: 0 1px 3px #000, 0 0 14px rgba(0, 0, 0, .7); }
.hero-impact .pi-btns .sa-btn:not(.btn-primary):hover { color: var(--w1); }
.hero-impact .pi-btns .sa-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* 2.5.5: no dark patch behind the words, so the background stays one even surface; the small lines carry their own
 * letter shadow, like the heading, so a passing wave never makes them hard to read */
.hero-impact .pi-p { margin: 1.5rem 0 0; font-size: .98rem; line-height: 1.6; color: var(--fg-soft); text-shadow: 0 1px 3px #000, 0 0 14px rgba(0, 0, 0, .7); }
.hero-impact .pi-p a { color: #fff; }
.hero-impact .pi-p p { margin: 0; }
.hero-impact .pi-skip, .hero-impact .pi-pause { position: absolute; z-index: 5; bottom: max(1.1rem, env(safe-area-inset-bottom)); border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .45); color: #fff; font: inherit; cursor: pointer; }
.hero-impact .pi-skip { display: none; right: 1.1rem; padding: .45rem 1rem; border-radius: 999px; font-size: .8rem; letter-spacing: .08em; }
.hero-impact .pi-pause { left: 1.1rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; opacity: .55; transition: opacity .2s; }
.hero-impact .pi-pause[hidden] { display: none; }
.hero-impact .pi-pause:hover, .hero-impact .pi-pause:focus-visible { opacity: 1; }
.hero-impact .pi-pause .i { width: 16px; height: 16px; }
.hero-impact .pi-pause .i + .i, .hero-impact .pi-pause[aria-pressed="true"] .i:first-child { display: none; }
.hero-impact .pi-pause[aria-pressed="true"] .i + .i { display: block; }
/* the menu bar stays out of the way while this banner fills the screen */
body:has(.sa-main > .hero-impact:first-child) .sa-header:not(.scrolled) { opacity: 0; visibility: hidden; }
body:has(.sa-main > .hero-impact:first-child) .sa-header { transition: opacity .3s ease, visibility .3s; }
/* 1.8.6 follow: the background and its waves stay put behind the whole page as visitors scroll down to the rest of it;
 * 1.8.7: the sections below are see-through, so the background looks the same all the way down; 1.8.8: the footer stays solid */
.hero-impact.pi-follow { z-index: 0; background: transparent; }
.hero-impact.pi-follow :is(.pi-bg, .pi-shade, .pi-wave, .pi-vig) { position: fixed; inset: 0; }
.sa-main > .hero-impact.pi-follow ~ * { position: relative; z-index: 1; background: transparent; }
body:has(.sa-main > .hero-impact.pi-follow) { background: var(--c-dark); }
body:has(.sa-main > .hero-impact.pi-follow) .sa-footer { position: relative; z-index: 1; }

/* before it plays: everything that arrives later is hidden (a fail-safe shows it after 2.6 s if the script never runs) */
html.sa-js:not(.arr-seen) .hero-impact.pi-arr:not(.pi-go):not(.pi-done) :is(.pi-mark, .pi-word, .pi-copy > *) { opacity: 0; animation: pi-safe .4s ease 2.6s forwards; }
/* playing (times from the moment the pictures are ready) */
.hero-impact.pi-go .pi-mark { animation: pi-fly 1.5s linear both; }
.hero-impact.pi-go .pi-lock { animation: pi-room .7s cubic-bezier(.65, 0, .35, 1) 2.8s both; }
.hero-impact.pi-go .pi-word { animation: pi-drawer .85s linear 2.9s both; }
.hero-impact.pi-go .pi-stage { animation: pi-jolt .42s linear 1.45s both; }
.hero-impact.pi-go .pi-vig { animation: pi-vig .65s ease-out 1.45s both; }
.hero-impact.pi-go .pi-bg { animation: pi-dim 2.38s linear both; }
.hero-impact.pi-go .pi-wave.w1 { animation: pi-wave 1.8s cubic-bezier(.22, .6, .36, 1) 1.45s both; }
.hero-impact.pi-go .pi-wave.w2 { animation: pi-wave 1.8s cubic-bezier(.22, .6, .36, 1) 1.8s both; }
.hero-impact.pi-go .pi-copy > * { animation: pi-drop .45s cubic-bezier(.2, .9, .3, 1.15) both; }
.hero-impact.pi-go .pi-c1 { animation-delay: 3.75s; }
.hero-impact.pi-go .pi-c2 { animation-delay: 3.9s; }
.hero-impact.pi-go .pi-c3 { animation-delay: 4.05s; }
.hero-impact.pi-go .pi-skip { display: block; animation: pi-drop .3s ease .3s both; }
.hero-impact.pi-go .pi-stage, .hero-impact.pi-go .pi-stage *:not(a):not(button) { cursor: pointer; }
/* the pulse: the mark glows like a neon tube coming on and sends one soft wave out */
.hero-impact.is-thum .pi-mark { animation: pi-thum .6s cubic-bezier(.2, .8, .3, 1) both; }
.hero-impact.is-thum .pi-wave.wp { --w: 19vmin; animation: pi-wave-soft 2.4s cubic-bezier(.25, .55, .35, 1) both; }

/* 2.5.8 3D mark (impact3d.js): once the 3D shape is ready (.pi-3d-on) it is drawn on a canvas over the banner and flies
 * the opening itself; the flat mark stays in its place as the shadow the shape casts on the page, with a soft spill of
 * its colours. On each pulse it bounces and glows, and the soft wave (a wider band) leaves from it a beat later. Without WebGL or with reduced motion nothing changes. */
.hero-impact .pi-3d-cv { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; display: block; }
.hero-impact .pi-3d-aura { z-index: 4; }
.hero-impact.pi-3d-on .pi-mark { filter: none; animation: none !important; }
.hero-impact.pi-3d-on .pi-mark-img { transform-origin: 50% 50%; will-change: transform, filter, opacity; }
.hero-impact .pi-3d-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
.hero-impact .pi-3d-glow img { width: 100%; height: 100%; display: block; filter: blur(26px) saturate(2.2); }
.hero-impact.pi-3d-on.is-thum .pi-wave.wp { --w: 25vmin; animation-delay: .2s; }

@keyframes pi-safe { to { opacity: 1; } }
/* 0 - 1 s one smooth glide in from the right, medium-sized to big, easing into place; no hang:
 * 1 - 1.25 s it boosts straight on toward you; 1.25 - 1.45 s BAM, no bounce */
@keyframes pi-fly {
  0% { transform: translate(44vw, -18vh) rotate(-14deg) scale(1.4); filter: blur(3px) drop-shadow(0 2vh 1.5vh rgba(0, 0, 0, .5)); animation-timing-function: cubic-bezier(.3, .55, .4, 1); }
  66.67% { transform: translate(0, -4vh) rotate(0deg) scale(var(--s1)); filter: blur(0) drop-shadow(0 7vh 4vh rgba(0, 0, 0, .55)); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  83.33% { transform: translate(0, -5vh) rotate(0deg) scale(calc(var(--s1) * 1.14)); filter: blur(0) drop-shadow(0 9vh 5vh rgba(0, 0, 0, .5)); animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  96.67% { transform: translate(0, 0) rotate(0deg) scale(1); filter: blur(0) drop-shadow(0 .4vh .5vh rgba(0, 0, 0, .85)); animation-timing-function: ease-out; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); filter: blur(0) drop-shadow(0 .6vh .8vh rgba(0, 0, 0, .6)); }
}
@keyframes pi-room { from { transform: translateX(var(--shift, 0px)); } to { transform: translateX(0); } }
@keyframes pi-drawer {
  0% { transform: translateX(calc(-100% - var(--pi-h) * .8)); animation-timing-function: cubic-bezier(.25, .8, .3, 1); }
  88% { transform: translateX(.45%); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0); }
}
@keyframes pi-jolt {
  0% { transform: none; }
  12% { transform: translate(0, var(--jolt)) scale(1.01); }
  30% { transform: translate(calc(var(--jolt) * -.8), calc(var(--jolt) * -.3)) scale(1.008); }
  50% { transform: translate(calc(var(--jolt) * .5), calc(var(--jolt) * .2)) scale(1.005); }
  72% { transform: translate(calc(var(--jolt) * -.2), 0) scale(1.002); }
  100% { transform: none; }
}
@keyframes pi-vig { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pi-dim { 0%, 61% { filter: brightness(.45); } 64% { filter: brightness(1.5); } 72% { filter: brightness(1.15); } 100% { filter: brightness(1); } }
@keyframes pi-wave { 0% { --r: 0px; opacity: 1; } 72% { opacity: 1; } 100% { --r: 90vmax; opacity: 0; } }
@keyframes pi-wave-soft { 0% { --r: 0px; opacity: .52; } 62% { opacity: .4; } 100% { --r: 86vmax; opacity: 0; } }
@keyframes pi-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes pi-thum {
  0% { transform: scale(1); filter: brightness(1) drop-shadow(0 .6vh .8vh rgba(0, 0, 0, .6)); }
  22% { transform: scale(1.04); filter: brightness(1.45) drop-shadow(0 0 18px var(--w2)); }
  100% { transform: scale(1); filter: brightness(1) drop-shadow(0 .6vh .8vh rgba(0, 0, 0, .6)); }
}
@media (max-width: 640px) {
  .hero-impact { --pi-h: min(5.6rem, 21vw); --s1: 2.05; --jolt: 3px; }
  .hero-impact .pi-inner { padding-block: clamp(3rem, 9vh, 5rem); }
  .hero-impact .pi-btns { flex-direction: column; align-items: stretch; width: min(100%, 22rem); }
  .hero-impact .pi-btns .sa-btn { width: 100%; justify-content: center; }
  .hero-impact .pi-btns .sa-btn:not(.btn-primary) { border: 1px solid rgba(255, 255, 255, .4); font-size: 1.1rem; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-impact .pi-wave, .hero-impact .pi-pause, .hero-impact .pi-skip { display: none !important; }
  .hero-impact .pi-3d-cv, .hero-impact .pi-3d-glow { display: none !important; }
  .hero-impact *, .hero-impact { animation: none !important; }
}

/* ---------- 2.7.1 Photo, then title (showroom): the photo alone, the title underneath ---------- */
.hero-showroom { padding-block: clamp(20px, 3vw, 44px) clamp(28px, 4vw, 56px); }
.hero-showroom .hs-wrap { width: min(calc(100% - 2 * clamp(12px, 3vw, 60px)), 1240px); margin-inline: auto; display: grid; gap: clamp(14px, 2vw, 24px); }
.hero-showroom .hs-photo { margin: 0; }
.hero-showroom .hs-frame { position: relative; aspect-ratio: 21 / 9; max-height: min(44vh, 520px); width: 100%; overflow: hidden; background: var(--c-surface); }
.hero-showroom .hs-frame img, .hero-showroom .hs-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-showroom .hs-plate { position: relative; padding: clamp(24px, 3.4vw, 52px) clamp(20px, 4vw, 64px) clamp(24px, 3.2vw, 48px); background: var(--c-surface); color: var(--fg); }
.hero-showroom .hs-title { margin: .1em 0 0; font-size: calc(clamp(2.9rem, 5.2vw + .4rem, 6.6rem) * var(--h-scale)); line-height: .92; }
.hero-showroom .hs-row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 64px); margin-top: clamp(18px, 2.4vw, 34px); }
.hero-showroom .hs-copy { max-width: 40rem; }
.hero-showroom .hs-copy .sa-hero-p { font-size: clamp(1.02rem, .4vw + .9rem, 1.22rem); line-height: 1.6; opacity: .88; }
.hero-showroom .sa-hero-btns { margin-top: 1.4rem; }
.hero-showroom .hs-stamp { flex: none; }
.hero-showroom .hs-stamp .sa-stamp { position: static; width: 132px; height: 132px; }
.hero-showroom .hs-points { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: clamp(22px, 2.6vw, 36px) 0 0; padding: clamp(16px, 2vw, 24px) 0 0; border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.hero-showroom .hs-points li { display: inline-flex; align-items: center; gap: .55em; font-size: .9rem; }
.hero-showroom .hs-points .i { width: 1.15em; height: 1.15em; color: var(--c-primary); }
@media (max-width: 760px) {
  .hero-showroom .hs-frame { aspect-ratio: 4 / 3; }
  .hero-showroom .hs-row { flex-direction: column; align-items: flex-start; }
  .hero-showroom .hs-stamp { align-self: flex-end; margin-top: -8px; }
  .hero-showroom .hs-stamp .sa-stamp { width: 96px; height: 96px; }
  .hero-showroom .hs-points { flex-direction: column; gap: .5rem; }
}

/* ---------- 2.8.0 Sign board (Ironclad): the title sign-written on a dark board, the site's own wide picture under it ---------- */
.hero-fascia { padding: 0 !important; --bg: var(--c-dark); --fg: var(--c-dark-ink); --fg-soft: color-mix(in srgb, var(--c-dark-ink) 78%, var(--c-dark)); --hi: var(--c-hi-dark); --line: color-mix(in srgb, var(--c-dark-ink) 16%, transparent); background: var(--c-dark); color: var(--fg); }
.hero-fascia .hf-board { position: relative; padding: clamp(36px, 6vw, 84px) 0 clamp(30px, 4.6vw, 64px); background-color: var(--c-dark); }
.hero-fascia .hf-in { position: relative; z-index: 1; }
.hero-fascia .hf-eyebrow { margin-bottom: 1.1rem; }
.hero-fascia .hf-title { margin: 0; max-width: 16ch; font-size: calc(clamp(2.9rem, 6.4vw + .6rem, 7.6rem) * var(--h-scale, 1)); line-height: .9; color: #f3f2ec; text-shadow: .035em .05em 0 rgba(0, 0, 0, .62); text-wrap: balance; }
.hero-fascia .hf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: end; margin-top: clamp(18px, 2.6vw, 30px); }
.hero-fascia .sa-hero-p { max-width: 54ch; color: var(--fg-soft); font-size: clamp(1.02rem, .35vw + .95rem, 1.22rem); }
.hero-fascia .sa-hero-btns { margin-top: 1.4rem; }
.hero-fascia .hf-plates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 250px; }
.hero-fascia .hf-plates li { display: flex; align-items: center; gap: .65em; padding: .62em .95em; background: #f3f2ec; color: #17181b; font-weight: 600; font-size: .92rem; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1), 0 3px 0 rgba(0, 0, 0, .45); }
.hero-fascia .hf-plates .i { width: 1.15em; height: 1.15em; color: var(--c-primary); flex: none; }
/* the trim along the bottom of the board, where it meets the picture */
.hero-fascia .hf-trim { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(180deg, #d9dcdf, #a9adb2 60%, #7c8086); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); z-index: 2; }
.hero-fascia .hf-scene { margin: 0; position: relative; height: clamp(230px, 33vw, 560px); overflow: hidden; background: #8ea0b6; }
.hero-fascia .hf-scene img, .hero-fascia .hf-scene video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; }
/* the picture's crop focus (Media) still counts on a narrow screen; buildings stand on the ground, so keep the lower part */
.hero-fascia .hf-scene img.fx-left { object-position: 15% 70%; } .hero-fascia .hf-scene img.fx-right { object-position: 85% 70%; }
.hero-fascia .hf-scene img.fx-top { object-position: 50% 15%; } .hero-fascia .hf-scene img.fx-bottom { object-position: 50% 90%; }
@media (max-width: 860px) {
  .hero-fascia .hf-row { grid-template-columns: 1fr; }
  .hero-fascia .hf-plates { min-width: 0; grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero-fascia .hf-title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hero-fascia .sa-hero-btns .sa-btn { flex: 1 1 100%; justify-content: center; }
}