/* Front page designs (markup and behaviour in js/hero.js).
   Each design sets its own colours through --h-* and is scoped by [data-hero]. */
.hero { --h-acc: var(--amber); --h-acc-ink: var(--ink); }
.hero[data-hero] { background: var(--h-bg); color: var(--h-fg); }
.hero[data-hero]::after { content: none; }

/* ---------------------------------------------------------------- shared pieces */
.h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h-ln { display: block; overflow: hidden; padding-top: .05em; }
.h-ln > span { display: block; }
.h-tag { display: flex; align-items: center; gap: 12px; color: var(--h-fg2); }
.h-tag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--h-dot, var(--amber)); animation: ping 2.4s ease-out infinite; }
.h-tag .sep { opacity: .4; }
.h-tag { flex-wrap: wrap; row-gap: 4px; } .h-tag span { white-space: nowrap; }
.h-name { font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; line-height: .82; margin-left: -.03em; font-variation-settings: "wdth" 62; }
.h-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 36px); }
.h-facts b { display: block; font-size: clamp(28px, 3.3vw, 54px); line-height: 1; font-weight: 700; font-variation-settings: "wdth" 62; white-space: nowrap; }
.h-facts b.is-long { font-size: clamp(19px, 2.05vw, 34px); line-height: 1.1; padding: .28em 0 .3em; }
.h-facts b small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--h-unit, var(--amber)); margin-left: 8px; }
.h-facts span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--h-fg2); max-width: 24ch; }
.h-mini { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; color: var(--h-fg2); font-size: 10.5px; }
.h-mini b { color: var(--h-fg); font-weight: 500; }
.h-mini > i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.h-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.h-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border: 1px solid var(--h-rule); border-radius: 999px; text-decoration: none; color: var(--h-fg);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.h-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-btn-solid { background: var(--h-acc); color: var(--h-acc-ink); border-color: var(--h-acc); }
.h-btn:hover, .h-btn:focus-visible { background: var(--h-fg); color: var(--h-bg); border-color: var(--h-fg); }
.h-btn-solid:hover, .h-btn-solid:focus-visible { background: var(--h-hover, var(--h-fg)); border-color: var(--h-hover, var(--h-fg)); }
/* a labelled tile */
.h-card { position: relative; margin: 0; flex: none; border-radius: 12px; overflow: hidden; background: #0B1216; }
.h-card img, .h-card video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.h-card figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(6, 20, 26, .84); color: #EEF2EE; font-size: 9.5px; white-space: nowrap; }
/* a window bar and the screen under it */
.h-bar { position: relative; height: 38px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #0D181D; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #9FB4B6; font-size: 10px; }
.h-dots { display: flex; gap: 6px; } .h-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.h-bar-t { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 12px; white-space: nowrap; overflow: hidden; }
.h-bar-t b, .h-bar-n b { color: #EEF2EE; font-weight: 500; }
.h-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.h-prog i { display: block; height: 100%; background: #7FD6DD; transform: scaleX(0); transform-origin: 0 50%; }
.h-prog i.is-on { animation: h-fill var(--tick-ms, 5200ms) linear forwards; }
.h-screen { position: relative; display: block; aspect-ratio: 16 / 10; background: #0B1216; }
.h-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; opacity: 0; clip-path: inset(0 0 0 100%); }
.h-screen img.is-prev { opacity: 1; clip-path: inset(0 0 0 0); z-index: 1; }
.h-screen img.is-on { opacity: 1; clip-path: inset(0 0 0 0); z-index: 2; transition: clip-path 1.05s cubic-bezier(.7, 0, .2, 1); }
/* progress ticks */
.h-ticks { display: flex; gap: 6px; }
.h-ticks button { position: relative; width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.h-ticks button::before, .h-ticks i { content: ""; position: absolute; left: 0; top: 11px; width: 100%; height: 2px; }
.h-ticks button::before { background: var(--h-rule); }
.h-ticks i { background: var(--h-tick, var(--amber)); transform: scaleX(0); transform-origin: 0 50%; }
.h-ticks button.is-on i { animation: h-fill var(--tick-ms, 4600ms) linear forwards; }
.hero.is-paused .h-ticks i, .hero.is-away .h-ticks i, .hero.is-waiting .h-ticks i,
.hero.is-paused .h-prog i, .hero.is-away .h-prog i, .hero.is-waiting .h-prog i { animation-play-state: paused; }
@keyframes h-fill { to { transform: scaleX(1); } }
@keyframes h-up2 { to { transform: translateY(-50%); } }
@media (max-width: 860px) { .h-facts span { font-size: 12.5px; } .h-facts b small { display: block; margin: 8px 0 0; } }
@media (max-width: 480px) { .h-cta { gap: 8px; } .h-btn { height: 44px; padding: 0 14px; gap: 8px; font-size: 10.5px; } .h-ticks button { width: 20px; } }

/* ---------------------------------------------------------------- reel (the original) */
.hero[data-hero="reel"] { --h-bg: #05090B; --h-fg: #EEF1EE; --h-fg2: #A9B9BA; --h-rule: rgba(238, 241, 238, .18); grid-template-rows: 1fr auto; }
.hr-wall { position: absolute; inset: 0; z-index: -2; perspective: 1700px; perspective-origin: 60% 40%; overflow: hidden; }
/* five columns on a sheet much larger than the screen: tilted and turned, its edges stay out of sight at any size */
.hr-plane { --mx: 0; --my: 0; position: absolute; left: 60%; top: 50%; width: max(2300px, 180vw, 270vh); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;
  transform: translate(-50%, -50%) rotateX(calc(34deg - var(--my) * 3deg)) rotateZ(calc(-16deg + var(--mx) * 2.5deg)); will-change: transform; }
.hr-col { height: 0; }
.hr-track { display: flex; flex-direction: column; margin-top: -250%; animation: hr-up var(--d, 90s) linear infinite; will-change: transform; }
.hr-col:nth-child(even) .hr-track { animation-direction: reverse; }
.hr-track img, .hr-track video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; border-radius: 10px; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, .1); background: #0B1216; }
@keyframes hr-up { to { transform: translateY(-33.3333%); } }
.hero.is-away .hr-track { animation-play-state: paused; }
.hr-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(5, 9, 11, .97) 0%, rgba(5, 9, 11, .9) 30%, rgba(5, 9, 11, .3) 62%, rgba(5, 9, 11, .36) 100%),
  linear-gradient(180deg, rgba(5, 9, 11, .75) 0%, rgba(5, 9, 11, 0) 22%, rgba(5, 9, 11, 0) 62%, rgba(5, 9, 11, .94) 100%); }
.hr-in { align-self: end; width: min(100%, 58vw); padding: 110px 0 0 var(--gut); display: grid; gap: clamp(14px, 2.3vh, 26px); }
.hr-name { font-size: clamp(64px, 11.4vw, 224px); }
.hr-line { font-size: clamp(18px, 1.7vw, 27px); line-height: 1.22; font-weight: 500; font-variation-settings: "wdth" 88; max-width: 27ch; text-wrap: balance; }
.hr-line em { font-style: normal; color: var(--amber); }
.hr-facts { margin: clamp(22px, 4vh, 40px) var(--gut) clamp(44px, 7vh, 72px); padding-top: clamp(12px, 2vh, 22px); border-top: 1px solid var(--h-rule); }
@media (max-width: 860px) {
  .hr-in { width: 100%; padding-right: var(--gut); }
  .hr-plane { left: 50%; top: 30%; width: 1900px; }
  .hr-shade { background: linear-gradient(180deg, rgba(5, 9, 11, .7) 0%, rgba(5, 9, 11, .3) 22%, rgba(5, 9, 11, .88) 50%, rgba(5, 9, 11, .98) 100%); }
}

/* ---------------------------------------------------------------- orbit */
.hero[data-hero="orbit"] { --h-bg: #06262A; --h-fg: #F1F4EF; --h-fg2: rgba(241, 244, 239, .78); --h-rule: rgba(241, 244, 239, .24); grid-template-rows: 1fr auto;
  background: radial-gradient(110% 95% at 68% 38%, #12909B 0%, #0B6A72 34%, #06262A 78%); }
.ho-scene { position: absolute; inset: 0; z-index: -2; perspective: 1800px; perspective-origin: 64% 40%; overflow: hidden; }
.ho-tilt { --mx: 0; --my: 0; position: absolute; left: 64%; top: 43%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(calc(-7deg - var(--my) * 3deg)) rotateY(calc(var(--mx) * 9deg)); }
.ho-ring { --n: 10; --w: clamp(300px, 34vw, 680px); --r: calc(var(--w) * 1.68); position: absolute; width: var(--w); aspect-ratio: 16 / 10; left: calc(var(--w) / -2); top: calc(var(--w) * -.3125);
  transform-style: preserve-3d; animation: ho-spin 95s linear infinite; }
@keyframes ho-spin { from { transform: translateZ(calc(var(--r) * -1)) rotateY(0deg); } to { transform: translateZ(calc(var(--r) * -1)) rotateY(-360deg); } }
.hero.is-away .ho-ring { animation-play-state: paused; }
.ho-card { position: absolute; inset: 0; margin: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; background: #0B1216; border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45); transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); }
.ho-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.ho-card figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(6, 20, 26, .86); color: #EEF2EE; font-size: 10px; }
.ho-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(6, 38, 42, .94) 0%, rgba(6, 38, 42, .62) 30%, rgba(6, 38, 42, 0) 58%), linear-gradient(180deg, rgba(6, 38, 42, .5) 0%, rgba(6, 38, 42, 0) 20%, rgba(6, 38, 42, 0) 66%, rgba(6, 38, 42, .94) 100%); }
.ho-in { align-self: end; width: min(100%, 52vw); padding: 110px 0 0 var(--gut); display: grid; gap: clamp(14px, 2.3vh, 26px); }
.ho-name { font-size: clamp(64px, 11vw, 218px); text-shadow: 0 8px 50px rgba(6, 38, 42, .5); }
.ho-line { font-size: clamp(18px, 1.7vw, 27px); line-height: 1.22; font-weight: 500; font-variation-settings: "wdth" 88; max-width: 27ch; text-wrap: balance; }
.ho-line em { font-style: normal; color: var(--amber); }
.ho-facts { margin: clamp(22px, 4vh, 40px) var(--gut) clamp(44px, 7vh, 72px); padding-top: clamp(12px, 2vh, 22px); border-top: 1px solid var(--h-rule); }
@media (max-width: 860px) {
  .ho-tilt { left: 50%; top: 25%; } .ho-ring { --w: 78vw; } .ho-in { width: 100%; padding-right: var(--gut); }
  .ho-shade { background: linear-gradient(180deg, rgba(6, 38, 42, .6) 0%, rgba(6, 38, 42, 0) 16%, rgba(6, 38, 42, 0) 40%, rgba(6, 38, 42, .96) 58%); }
}

/* ---------------------------------------------------------------- columns */
.hero[data-hero="columns"] { --h-bg: #F3F5F1; --h-fg: var(--ink); --h-fg2: var(--ink-2); --h-rule: rgba(10, 30, 33, .22); --h-acc: var(--petrol); --h-acc-ink: #fff; --h-hover: var(--ink); --h-unit: var(--petrol);
  --h-dot: var(--petrol); grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.hl-left { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(18px, 3vh, 34px); padding: 92px clamp(20px, 3vw, 56px) clamp(40px, 6vh, 60px) var(--gut); min-width: 0; }
.hl-mid { display: grid; gap: clamp(14px, 2.3vh, 26px); }
.hl-name { font-size: clamp(60px, 10.2vw, 206px); }
.hl-line { font-size: clamp(18px, 1.6vw, 26px); line-height: 1.22; font-weight: 500; font-variation-settings: "wdth" 88; max-width: 25ch; text-wrap: balance; }
.hl-line em { font-style: normal; color: var(--petrol); }
.hl-facts { padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid var(--h-rule); }
.hl-right { position: relative; min-height: 0; overflow: hidden; margin-right: var(--gut);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%); }
.hl-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hl-col { height: 0; }
.hl-track { display: flex; flex-direction: column; animation: h-up2 var(--d, 100s) linear infinite; will-change: transform; }
.hl-col:nth-child(even) .hl-track { animation-direction: reverse; }
.hl-track .h-card { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 18px; border: 1px solid rgba(10, 30, 33, .14); box-shadow: 0 14px 30px rgba(10, 30, 33, .13); }
.hero.is-away .hl-track { animation-play-state: paused; }
@media (max-width: 960px) {
  .hero[data-hero="columns"] { grid-template-columns: 1fr; grid-template-rows: auto 46svh; }
  .hl-left { padding-right: var(--gut); padding-bottom: 22px; } .hl-right { margin: 0 var(--gut); }
  .hl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hl-col:nth-child(3) { display: none; } .hl-track .h-card { margin-bottom: 12px; }
}

/* ---------------------------------------------------------------- depth */
.hero[data-hero="depth"] { --h-bg: #04070D; --h-fg: #EEF1EE; --h-fg2: #AEBCC4; --h-rule: rgba(238, 241, 238, .2); --h-acc: #EEF1EE; --h-acc-ink: #04070D; --h-hover: #7FD6DD; --h-unit: #7FD6DD; --h-dot: #7FD6DD;
  grid-template-rows: 1fr auto; background: radial-gradient(58% 70% at 66% 46%, #10303F 0%, #08131C 46%, #04070D 82%); }
.hf-scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; perspective: 1200px; perspective-origin: 66% 46%; }
.hf-space { --mx: 0; --my: 0; position: absolute; left: 66%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--mx) * 6deg)) rotateX(calc(var(--my) * -4deg)); }
.hf-card { --w: clamp(300px, 30vw, 600px); position: absolute; width: var(--w); aspect-ratio: 16 / 10; left: calc(var(--w) / -2 + var(--x) * 1vw); top: calc(var(--w) * -.3125 + var(--y) * 1vh); margin: 0;
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); background: #0B1216; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); backface-visibility: hidden;
  animation: hf-fly 32s linear infinite; animation-delay: calc(var(--i) * -3.2s); will-change: transform, opacity; }
.hf-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.hf-card figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(6, 20, 26, .86); color: #EEF2EE; font-size: 10px; }
@keyframes hf-fly { 0% { transform: translateZ(-3200px); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 93%, 100% { opacity: 0; } 100% { transform: translateZ(330px); } }
.hero.is-away .hf-card { animation-play-state: paused; }
.hf-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(4, 7, 13, .95) 0%, rgba(4, 7, 13, .7) 28%, rgba(4, 7, 13, 0) 56%), linear-gradient(180deg, rgba(4, 7, 13, .55) 0%, rgba(4, 7, 13, 0) 18%, rgba(4, 7, 13, 0) 66%, rgba(4, 7, 13, .95) 100%); }
.hf-in { align-self: end; width: min(100%, 54vw); padding: 110px 0 0 var(--gut); display: grid; gap: clamp(14px, 2.3vh, 26px); }
.hf-name { font-size: clamp(64px, 11.2vw, 220px); }
.hf-line { font-size: clamp(18px, 1.7vw, 27px); line-height: 1.22; font-weight: 500; font-variation-settings: "wdth" 88; max-width: 27ch; text-wrap: balance; }
.hf-line em { font-style: normal; color: #7FD6DD; }
.hf-facts { margin: clamp(22px, 4vh, 40px) var(--gut) clamp(44px, 7vh, 72px); padding-top: clamp(12px, 2vh, 22px); border-top: 1px solid var(--h-rule); }
@media (max-width: 860px) {
  .hf-scene { perspective-origin: 50% 24%; } .hf-space { left: 50%; top: 24%; } .hf-card { --w: 64vw; } .hf-in { width: 100%; padding-right: var(--gut); }
  .hf-shade { background: linear-gradient(180deg, rgba(4, 7, 13, .5) 0%, rgba(4, 7, 13, 0) 14%, rgba(4, 7, 13, 0) 38%, rgba(4, 7, 13, .96) 56%); }
}

/* ---------------------------------------------------------------- layers */
.hero[data-hero="layers"] { --h-bg: #070C0F; --h-fg: #EEF2EE; --h-fg2: #A6B7BA; --h-rule: rgba(238, 242, 238, .2); --h-acc: #EEF2EE; --h-acc-ink: #070C0F; --h-hover: #7FD6DD; --h-unit: #7FD6DD; --h-dot: #7FD6DD; --h-tick: #7FD6DD;
  grid-template-rows: 1fr auto; background: radial-gradient(56% 66% at 70% 44%, #143037 0%, #0A1417 54%, #070C0F 100%); }
.hy-scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; perspective: 2800px; perspective-origin: 68% 40%; }
.hy-iso { --mx: 0; --my: 0; --spread: 1; --w: clamp(300px, 33vw, 660px); --gap: calc(var(--w) * .2 * var(--spread)); position: absolute; left: 70%; top: 45%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(calc(57deg - var(--my) * 4deg)) rotateZ(calc(-37deg + var(--mx) * 6deg)); }
.hy-floor { position: absolute; width: calc(var(--w) * 2.8); height: calc(var(--w) * 2.8); left: calc(var(--w) * -1.4); top: calc(var(--w) * -1.4); transform: translateZ(calc(-3.3 * var(--gap)));
  background-image: linear-gradient(rgba(127, 214, 221, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 214, 221, .16) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, transparent 100%); }
.hy-layer { --lift: 0; position: absolute; width: var(--w); aspect-ratio: 16 / 10; left: calc(var(--w) / -2); top: calc(var(--w) * -.3125); margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2); background: #0B1216; box-shadow: -34px 44px 70px rgba(0, 0, 0, .5);
  transform: translateZ(calc((var(--i) - 2.5) * var(--gap) + var(--lift) * 1px)); opacity: .94; filter: saturate(.75) brightness(.78);
  transition: transform 1s var(--ease), opacity .7s linear, filter .7s linear, border-color .5s linear, box-shadow .5s linear; }
.hy-layer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.hy-layer.is-above { opacity: .07; filter: saturate(.4) brightness(1.1); }
.hy-layer.is-on { --lift: 54; opacity: 1; filter: none; border-color: rgba(127, 214, 221, .9); box-shadow: 0 0 0 1px rgba(127, 214, 221, .5), 0 0 70px rgba(127, 214, 221, .28), -34px 44px 70px rgba(0, 0, 0, .55); }
.hy-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(7, 12, 15, .95) 0%, rgba(7, 12, 15, .66) 26%, rgba(7, 12, 15, 0) 52%), linear-gradient(180deg, rgba(7, 12, 15, .5) 0%, rgba(7, 12, 15, 0) 16%, rgba(7, 12, 15, 0) 78%, rgba(7, 12, 15, .9) 100%); }
.hy-row { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 60px); align-items: end; padding: 110px var(--gut) 0; }
.hy-in { display: grid; gap: clamp(14px, 2.3vh, 26px); max-width: 52vw; }
.hy-name { font-size: clamp(64px, 11.2vw, 220px); }
.hy-line { font-size: clamp(18px, 1.7vw, 27px); line-height: 1.22; font-weight: 500; font-variation-settings: "wdth" 88; max-width: 25ch; text-wrap: balance; }
.hy-line em { font-style: normal; color: #7FD6DD; }
.hy-now { display: grid; gap: 10px; justify-items: end; text-align: right; padding: 16px 18px; border-radius: 14px; background: rgba(7, 12, 15, .82); border: 1px solid rgba(127, 214, 221, .3); }
.hy-k { color: var(--h-fg2); font-size: 10px; } .hy-k b { color: #7FD6DD; font-weight: 500; }
.hy-now a { text-decoration: none; display: grid; gap: 6px; }
.hy-now a b { font-size: clamp(19px, 1.7vw, 28px); line-height: 1.05; font-weight: 700; font-variation-settings: "wdth" 80; }
.hy-now a span { color: var(--h-fg2); font-size: 10px; }
.hy-facts { margin: clamp(22px, 4vh, 40px) var(--gut) clamp(44px, 7vh, 72px); padding-top: clamp(12px, 2vh, 22px); border-top: 1px solid var(--h-rule); }
@media (max-width: 860px) {
  .hy-scene { perspective-origin: 50% 16%; } .hy-iso { left: 54%; top: 17%; --w: 50vw; }
  .hy-row { grid-template-columns: 1fr; } .hy-in { max-width: none; } .hy-now { justify-items: start; text-align: left; }
  .hy-shade { background: linear-gradient(180deg, rgba(7, 12, 15, .5) 0%, rgba(7, 12, 15, 0) 10%, rgba(7, 12, 15, 0) 28%, rgba(7, 12, 15, .97) 40%); }
}

/* ---------------------------------------------------------------- the chooser (temporary: SHOW_PICKER in js/hero.js) */
.hero-pick { position: fixed; z-index: 70; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px 12px 5px 14px; border-radius: 999px;
  background: rgba(10, 30, 33, .94); border: 1px solid rgba(236, 239, 234, .22); color: #ECEFEA; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hero-pick-l { color: #A9C1C0; margin-right: 6px; }
.hero-pick-s { width: 1px; height: 14px; background: rgba(236, 239, 234, .3); margin: 0 6px; }
.hero-pick-n { display: none; color: #7FD6DD; margin-left: 8px; }
@media (min-width: 1500px) { .hero-pick-n { display: inline; } }
.hero-pick a { min-width: 26px; height: 26px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; text-decoration: none; color: #C9DAD8; }
.hero-pick a:hover { color: #fff; }
.hero-pick a.is-on { background: #EEF2EE; color: var(--ink); }
@media (max-width: 1180px) { .hero-pick { top: auto; bottom: 12px; } }
@media (max-width: 480px) { .hero-pick-l { display: none; } .hero-pick a { padding: 0 6px; } }