/* ===== Hero overlay presets (2026-10-25) =====
   The portal worker sets <html data-hero-overlay="<id>"> (portal/src/overlays.js; admin /admin/overlay). No attribute = Auto:
   the event/month look's own overlay from css/events.css, untouched. A preset is layered ON TOP of the look: the look still picks
   the photo, composition (data-compose), decoration and tone; the preset re-colours the scrim and, for the light veils, flips the
   text to dark. Geometry follows the composition, so the strongest part of the scrim is always under the text:
     overlay  : desktop 90deg (text on the left) + bottom fade; phones 180deg, strong under the whole text column
     center / verse : radial, strongest where the centred text sits
     split / split-l / poster / sky : text already sits on a solid panel; the panel and the photo fades take the preset colour
   Tokens: --ho-base (text-side colour) --ho-far (photo-side tint) --ho-a1/a2/a3 (desktop text side / middle / far opacity)
   --ho-m1/m2 (phone top / under text) --ho-accent --ho-ink --ho-ink2 --ho-filter (photo). Contrast checked against the real
   photos (screenshots/overlay-2026-10-25/contrast.json). Also used by the admin mini preview (.hov-mini). */

[data-hero-overlay] { --ho-filter: saturate(1); --ho-ink: #ffffff; --ho-ink2: rgba(255,255,255,.88); }
[data-hero-overlay="green"] { --ho-base: #012A13; --ho-far: #0B5A2E; --ho-a1: .93; --ho-a2: .74; --ho-a3: .28; --ho-m1: .62; --ho-m2: .88; --ho-accent: #7CE3A6; }
[data-hero-overlay="ink"]   { --ho-base: #0A1222; --ho-far: #1B2B4A; --ho-a1: .93; --ho-a2: .74; --ho-a3: .3;  --ho-m1: .62; --ho-m2: .88; --ho-accent: #9CC8FF; --ho-filter: saturate(.9); }
[data-hero-overlay="dusk"]  { --ho-base: #3A0C14; --ho-far: #B4461A; --ho-a1: .95; --ho-a2: .72; --ho-a3: .38; --ho-m1: .62; --ho-m2: .88; --ho-accent: #FFC56B; --ho-filter: saturate(1.1) sepia(.12); --ho-fs: .42; }
[data-hero-overlay="teal"]  { --ho-base: #05302E; --ho-far: #0E6B66; --ho-a1: .95; --ho-a2: .74; --ho-a3: .3;  --ho-m1: .62; --ho-m2: .88; --ho-accent: #86E3D6; }
[data-hero-overlay="slate"] { --ho-base: #18232C; --ho-far: #3C4F5E; --ho-a1: .93; --ho-a2: .74; --ho-a3: .36; --ho-m1: .62; --ho-m2: .88; --ho-accent: #BBD5E8; --ho-filter: saturate(.7); }
[data-hero-overlay="sand"]  { --ho-base: #F4E8D0; --ho-far: #E2CDA3; --ho-a1: .95; --ho-a2: .84; --ho-a3: .4;  --ho-m1: .74; --ho-m2: .93; --ho-accent: #8A3B0A;
  --ho-ink: #1F160B; --ho-ink2: #3B2E1E; --ho-filter: saturate(.8); }
[data-hero-overlay="mist"]  { --ho-base: #EAF2F6; --ho-far: #C9DCE6; --ho-a1: .95; --ho-a2: .84; --ho-a3: .4;  --ho-m1: .74; --ho-m2: .93; --ho-accent: #0F5B7A;
  --ho-ink: #0E1E2A; --ho-ink2: #24394A; --ho-filter: saturate(.75) brightness(1.05); }
/* Photo first / Solid band keep the look's colours (--lk-bg); only the geometry and strength change. */
[data-hero-overlay="photo"] { --ho-a1: .84; --ho-a2: .4; --ho-a3: 0; --ho-m1: .6; --ho-m2: .82; }

/* ====================== HOMEPAGE (.hero) ====================== */
/* colour presets: the look's palette variables are re-pointed inside the hero only, so every composition (and its phone layout,
   the photo fades, the skyline) takes the preset colour without touching the events.css geometry (incl. the seam fix). */
:root[data-hero-overlay]:not([data-hero-overlay="photo"]):not([data-hero-overlay="band"]) .hero {
  --lk-bg: var(--ho-base); --lk-accent: var(--ho-accent); --lk-ov: var(--ho-a1); }
:root[data-hero-overlay]:not([data-hero-overlay="band"]) .hero-img img { filter: var(--ho-filter); }
:root[data-hero-overlay]:not([data-hero-overlay="band"]):is([data-compose="center"], [data-compose="verse"]) .hero-img img { filter: brightness(.6) var(--ho-filter); }

/* overlay composition: own gradient stops per preset */
:root[data-hero-overlay]:not([data-hero-overlay="band"])[data-compose="overlay"] .hero::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--lk-bg) calc(var(--ho-m1) * 100%), transparent) 0%,
                                      color-mix(in srgb, var(--lk-bg) calc(var(--ho-m2) * 100%), transparent) 32%,
                                      color-mix(in srgb, var(--lk-bg) calc(var(--ho-m2) * 100%), transparent) 86%, var(--lk-bg) 100%); }
@media (min-width: 960px) {
  :root[data-hero-overlay]:not([data-hero-overlay="band"])[data-compose="overlay"] .hero::before {
    background:
      linear-gradient(0deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 60%, transparent) 14%, transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--lk-bg) 55%, transparent) 0, transparent 140px),
      linear-gradient(90deg, color-mix(in srgb, var(--lk-bg) calc(var(--ho-a1) * 100%), transparent) 0%,
                             color-mix(in srgb, var(--lk-bg) calc(var(--ho-a1) * 100%), transparent) 44%,
                             color-mix(in srgb, var(--ho-far, var(--lk-bg)) calc(var(--ho-a2) * 100%), transparent) 64%,
                             color-mix(in srgb, var(--ho-far, var(--lk-bg)) calc(var(--ho-a3) * 100%), transparent) 92%); }
}
/* centred compositions: radial, strongest under the text; the far tint sits underneath at the corners */
:root[data-hero-overlay]:not([data-hero-overlay="band"]):is([data-compose="center"], [data-compose="verse"]) .hero::before {
  background: radial-gradient(ellipse 78% 68% at 50% 46%, color-mix(in srgb, var(--lk-bg) calc(var(--ho-a2) * 100%), transparent),
                                color-mix(in srgb, var(--lk-bg) calc(var(--ho-a1) * 100%), transparent) 62%, var(--lk-bg) 100%),
              linear-gradient(135deg, color-mix(in srgb, var(--ho-far, var(--lk-bg)) 40%, transparent), transparent 55%); }
@media (max-width: 959px) {
  :root[data-hero-overlay]:not([data-hero-overlay="band"]):is([data-compose="center"], [data-compose="verse"]) .hero::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--lk-bg) calc(var(--ho-m1) * 100%), transparent) 0%,
                                        color-mix(in srgb, var(--lk-bg) calc(var(--ho-m2) * 100%), transparent) 30%, var(--lk-bg) 100%); }
}
/* photo-beside compositions: the fade into the text panel takes the far tint on desktop (dusk = saffron edge) */
@media (min-width: 960px) {
  :root[data-hero-overlay]:not([data-hero-overlay="photo"]):not([data-hero-overlay="band"])[data-compose="split"] .hero-img::after {
    background: linear-gradient(90deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 45%, transparent) 18%, color-mix(in srgb, var(--ho-far) calc(var(--ho-fs, .22) * 100%), transparent) 45%, transparent 80%); }
  :root[data-hero-overlay]:not([data-hero-overlay="photo"]):not([data-hero-overlay="band"])[data-compose="split-l"] .hero-img::after {
    background: linear-gradient(270deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 45%, transparent) 18%, color-mix(in srgb, var(--ho-far) calc(var(--ho-fs, .22) * 100%), transparent) 45%, transparent 80%); }
}

/* Photo first: text column scrim only + a strong text shadow; photo-beside layouts get a short fade */
:root[data-hero-overlay="photo"] .hero :is(h1, .hero-sub, .hero-ur, .ask-label, .eyebrow, .ev-feature, .hero-meta) {
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 22px rgba(0,0,0,.55); }
:root[data-hero-overlay="photo"] :is(.hero, .ix-hero) h1 em { color: color-mix(in srgb, var(--lk-accent, #2FBF71) 55%, #fff); }
@media (min-width: 960px) {
  :root[data-hero-overlay="photo"][data-compose="split"] .hero-img::after { background: linear-gradient(90deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 30%, transparent) 9%, transparent 20%); }
  :root[data-hero-overlay="photo"][data-compose="split-l"] .hero-img::after { background: linear-gradient(270deg, var(--lk-bg) 0%, color-mix(in srgb, var(--lk-bg) 30%, transparent) 9%, transparent 20%); }
  :root[data-hero-overlay="photo"][data-compose="poster"] .hero-img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--lk-bg) 40%, transparent) 0%, transparent 20%, transparent 78%, var(--lk-bg) 100%); }
}
@media (max-width: 959px) {
  :root[data-hero-overlay="photo"]:is([data-compose="split"], [data-compose="split-l"], [data-compose="poster"]) .hero-img::after {
    background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--lk-bg) 70%, transparent) 88%, var(--lk-bg) 100%); }
}

/* Solid band: the server switches overlay/center/sky to the split composition; split/split-l/poster are band layouts already.
   Desktop: a hard edge between the text band and the photo (no long fade). */
@media (min-width: 960px) {
  :root[data-hero-overlay="band"][data-compose="split"] .hero-img { inset: 0 0 0 52%; }
  :root[data-hero-overlay="band"][data-compose="split"] .hero-img::after { background: linear-gradient(90deg, var(--lk-bg) 0, color-mix(in srgb, var(--lk-bg) 0%, transparent) 4%); }
  :root[data-hero-overlay="band"][data-compose="split-l"] .hero-img { inset: 0 52% 0 0; }
  :root[data-hero-overlay="band"][data-compose="split-l"] .hero-img::after { background: linear-gradient(270deg, var(--lk-bg) 0, color-mix(in srgb, var(--lk-bg) 0%, transparent) 4%); }
}
:root[data-hero-overlay="band"][data-compose="split"] .hero-in { text-align: left; align-items: flex-start; }
:root[data-hero-overlay="band"][data-compose="split"] .hero-in > * { margin-left: 0; margin-right: 0; }
:root[data-hero-overlay="band"][data-compose="split"] :is(.chips, .ev-feature__row) { justify-content: flex-start; }

/* light veils (Desert sand, Kashmir mist): dark text, light chips, solid nav bar so the white logo never sits on the veil */
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero { color: var(--ho-ink); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero h1 { color: var(--ho-ink); text-shadow: none; }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero :is(.hero-sub, .hero-sub .ur, .hero-ur, .ask-label, .hero-meta, .ev-feature__date) { color: var(--ho-ink2); text-shadow: none; opacity: 1; }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .hero-meta { border-top-color: rgba(0,0,0,.16); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .hero-meta b { color: var(--ho-ink); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .eyebrow { background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.18); color: var(--ho-ink); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .dot { background: var(--ho-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ho-accent) 22%, transparent); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero :is(.ev-feature__ur, .ev-feature__verse) { color: var(--ho-accent); text-shadow: none; }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .ev-feature__count { color: var(--ho-ink); background: color-mix(in srgb, var(--ho-accent) 10%, transparent); border-color: color-mix(in srgb, var(--ho-accent) 45%, transparent); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .ev-feature__count b { color: var(--ho-accent); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .ev-feature__count--today { background: var(--ho-accent); color: #fff; }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .ev-feature__cta { background: var(--ho-accent); color: #fff; }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .ev-ribbon { color: var(--ho-ink); background: rgba(255,255,255,.62); border-color: rgba(0,0,0,.16); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .skyline::before { background: rgba(0,0,0,.09); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .hero .dk-verse { color: var(--ho-accent); text-shadow: none; }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .nav { background: color-mix(in srgb, var(--lk-deep) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]):is([data-compose="center"], [data-compose="verse"]) .hero-img img { filter: var(--ho-filter); }

/* ====================== /ideas (.ix-hero) ====================== */
:root[data-hero-overlay]:not([data-hero-overlay="photo"]):not([data-hero-overlay="band"]) .ix-hero { --ix-deep: var(--ho-base); --ix-acc: var(--ho-accent); }
:root[data-hero-overlay]:not([data-hero-overlay="band"]) .ix-hero-img { filter: var(--ho-filter); }
:root[data-hero-overlay]:not([data-hero-overlay="band"]) .ix-hero::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ix-deep) calc(var(--ho-m2) * 100%), transparent) 0%,
                                      color-mix(in srgb, var(--ix-deep) calc(var(--ho-m2) * 100%), transparent) 60%, var(--ix-deep) 100%); }
@media (min-width: 900px) {
  :root[data-hero-overlay]:not([data-hero-overlay="band"]) .ix-hero::after {
    background: linear-gradient(0deg, color-mix(in srgb, var(--ix-deep) 80%, transparent), transparent 40%),
      linear-gradient(90deg, color-mix(in srgb, var(--ix-deep) calc(var(--ho-a1) * 100%), transparent) 0%,
                             color-mix(in srgb, var(--ix-deep) calc(var(--ho-a1) * 100%), transparent) 40%,
                             color-mix(in srgb, var(--ho-far, var(--ix-deep)) calc(var(--ho-a2) * 100%), transparent) 66%,
                             color-mix(in srgb, var(--ho-far, var(--ix-deep)) calc(var(--ho-a3) * 100%), transparent) 100%); }
}
:root[data-hero-overlay="photo"] .ix-hero :is(h1, .ix-ur, .ix-lead, .kicker) { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 22px rgba(0,0,0,.55); }
:root:is([data-hero-overlay="photo"], [data-hero-overlay="band"]) .ix-credit { background: rgba(0,0,0,.6); color: #fff; padding: 2px 8px; border-radius: 6px; }
/* Solid band: photo beside (desktop) or below (phones) the text, text on the solid look colour */
@media (min-width: 900px) {
  :root[data-hero-overlay="band"] .ix-hero-img { left: 56%; width: 44%; }
  :root[data-hero-overlay="band"] .ix-hero::after { background: linear-gradient(90deg, var(--ix-deep) 56%, color-mix(in srgb, var(--ix-deep) 0%, transparent) 59%); }
  :root[data-hero-overlay="band"] .ix-hero-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  :root[data-hero-overlay="band"] .ix-hero-in > * { max-width: calc(56vw - max(0px, (100vw - var(--wrap, 1200px)) / 2) - 48px); }
}
@media (max-width: 899px) {
  :root[data-hero-overlay="band"] .ix-hero { padding-bottom: 214px; }
  :root[data-hero-overlay="band"] .ix-hero-img { inset: auto 0 0 0; height: 180px; }
  :root[data-hero-overlay="band"] .ix-hero::after { background: linear-gradient(180deg, var(--ix-deep) calc(100% - 180px), color-mix(in srgb, var(--ix-deep) 0%, transparent) calc(100% - 150px)); }
}
/* light veils */
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .ix-hero { color: var(--ho-ink); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .ix-hero :is(.ix-ur, .ix-lead, .ix-stats dt, .ix-credit) { color: var(--ho-ink2); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .ix-hero .ix-stats { background: rgba(255,255,255,.58); border-color: rgba(0,0,0,.12); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .ix-hero .ix-stats > div { background: rgba(255,255,255,.55); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .ix-hero .btn.ghost { color: var(--ho-ink); border-color: rgba(0,0,0,.35); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .ix-hero .btn.ghost:hover { background: rgba(255,255,255,.6); }

/* ====================== /links (.lkh, colour hero without a photo) ====================== */
:root[data-hero-overlay]:not([data-hero-overlay="photo"]):not([data-hero-overlay="band"]) .lkh { --acc: var(--ho-accent);
  background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--ho-far) 75%, transparent), transparent 70%), var(--ho-base); }
:root[data-hero-overlay="band"] .lkh { background: var(--lk-deep, #012A13); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .lkh { color: var(--ho-ink); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .lkh :is(.lkh-promise, .lkh-trust, .lk-ql small, .lk-qur) { color: var(--ho-ink2); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .lkh .lkh-trust b { color: var(--ho-ink); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .lkh .lk-q { color: var(--ho-ink); background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.14); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .lkh a.lk-q:hover { background: #fff; border-color: rgba(0,0,0,.3); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .lkh .lk-q > :is(svg, i) { background: color-mix(in srgb, var(--ho-accent) 14%, transparent); color: var(--ho-accent); }
:root:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) .lkh .lk-search { box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 14px 30px -18px rgba(0,0,0,.35); }

/* ====================== high contrast (shared a11y panel) ======================
   Whatever the preset (Auto included), text that sits over a photo gets a near-solid scrim and no shadow. */
:root[data-mp-contrast="high"]:is([data-compose="overlay"], [data-compose="center"], [data-compose="verse"], [data-compose="sky"]) .hero::before {
  display: block !important; background: color-mix(in srgb, var(--lk-bg) 92%, transparent) !important; }
@media (max-width: 959px) {
  :root[data-mp-contrast="high"]:is([data-compose="split"], [data-compose="split-l"], [data-compose="poster"]) .hero-img::after {
    background: linear-gradient(180deg, transparent 40%, var(--lk-bg) 96%) !important; }
}
:root[data-mp-contrast="high"] .ix-hero::after { background: color-mix(in srgb, var(--ix-deep) 93%, transparent) !important; }
:root[data-mp-contrast="high"] .ix-credit { background: #000; color: #fff; padding: 2px 8px; border-radius: 6px; }

/* ====================== admin mini preview (.hov-mini, /admin/overlay) ====================== */
.hov-mini { --m-base: var(--lk-bg, #012A13); --m-acc: var(--lk-accent, #2FBF71); --m-ink: #fff; --m-ink2: rgba(255,255,255,.88);
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; border-radius: .75rem; background: var(--m-base); color: var(--m-ink);
  aspect-ratio: 16 / 9; container-type: inline-size; }
.hov-mini[data-device="phone"] { aspect-ratio: 9 / 16; align-items: flex-end; }
.hov-mini:is([data-hero-overlay="green"], [data-hero-overlay="ink"], [data-hero-overlay="dusk"], [data-hero-overlay="teal"], [data-hero-overlay="slate"], [data-hero-overlay="sand"], [data-hero-overlay="mist"]) {
  --m-base: var(--ho-base); --m-acc: var(--ho-accent); }
.hov-mini:is([data-hero-overlay="sand"], [data-hero-overlay="mist"]) { --m-ink: var(--ho-ink); --m-ink2: var(--ho-ink2); }
.hov-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hov-mini[data-hero-overlay] .hov-img { filter: var(--ho-filter); }
.hov-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--m-base) 88%, transparent) 0%, color-mix(in srgb, var(--m-base) 70%, transparent) 45%, transparent 85%); }
.hov-mini[data-hero-overlay] .hov-scrim {
  background: linear-gradient(90deg, color-mix(in srgb, var(--m-base) calc(var(--ho-a1, .9) * 100%), transparent) 0%, color-mix(in srgb, var(--m-base) calc(var(--ho-a1, .9) * 100%), transparent) 34%,
    color-mix(in srgb, var(--ho-far, var(--m-base)) calc(var(--ho-a2, .7) * 100%), transparent) 58%, color-mix(in srgb, var(--ho-far, var(--m-base)) calc(var(--ho-a3, .3) * 100%), transparent) 92%); }
.hov-mini[data-device="phone"] .hov-scrim, .hov-mini[data-device="phone"][data-hero-overlay] .hov-scrim {
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-base) calc(var(--ho-m1, .6) * 100%), transparent) 0%, color-mix(in srgb, var(--m-base) calc(var(--ho-m2, .88) * 100%), transparent) 40%, var(--m-base) 100%); }
/* photo beside the text (split / poster compositions, Solid band, /links has no photo) */
.hov-mini[data-geom="beside"] .hov-img { left: 52%; width: 48%; }
.hov-mini[data-geom="beside"] .hov-scrim { background: linear-gradient(90deg, var(--m-base) 52%, color-mix(in srgb, var(--m-base) 30%, transparent) 60%, transparent 72%) !important; }
.hov-mini[data-device="phone"][data-geom="beside"] .hov-img { left: 0; width: 100%; height: 42%; }
.hov-mini[data-device="phone"][data-geom="beside"] .hov-scrim { background: linear-gradient(180deg, transparent 22%, var(--m-base) 44%) !important; }
.hov-mini[data-geom="none"] .hov-scrim { background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--ho-far, var(--m-acc)) 45%, transparent), transparent 70%) !important; }
.hov-mini[data-hero-overlay="photo"] .hov-copy { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.55); }
.hov-copy { position: relative; display: grid; gap: .3rem; width: 52%; padding: 6% 5%; }
.hov-mini[data-device="phone"] .hov-copy { width: 100%; padding: 8% 7% 12%; }
.hov-eyebrow { justify-self: start; padding: .1rem .45rem; border-radius: 999px; font-size: .6rem; font-weight: 600; background: color-mix(in srgb, var(--m-ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--m-ink) 25%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hov-h { font-size: clamp(.95rem, 7cqi, 1.6rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
.hov-mini[data-device="phone"] .hov-h { font-size: clamp(1rem, 11cqi, 1.5rem); }
.hov-h em { font-style: normal; color: var(--m-acc); }
.hov-sub { margin: 0; font-size: .62rem; line-height: 1.4; color: var(--m-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hov-chips { display: flex; gap: .25rem; margin-top: .2rem; }
.hov-chips i { display: block; width: 2.6rem; height: .9rem; border-radius: .3rem; background: linear-gradient(135deg, #7C3AED, #5B21B6); }
.hov-chips i:nth-child(2) { background: linear-gradient(135deg, #0D9488, #0F766E); } .hov-chips i:nth-child(3) { background: linear-gradient(135deg, #F5B301, #C98A00); }