.navend { display: flex; align-items: center; gap: var(--sp-3); }
.sitenav .theme { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: var(--border-w) solid var(--border-subtle); background: transparent; color: var(--icon); display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .2s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.sitenav .theme .icon { font-size: 20px; }
.sitenav .theme:hover { border-color: var(--link); transform: rotate(20deg); }
.sitenav .theme:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ---- the logo top left: a hover lift and the press pop the icon buttons have (owner-directed 2026-09-28) ---- */
.sitenav .brand svg { transition: transform .3s cubic-bezier(.2, .7, .2, 1), filter .18s ease; }
@media (hover: hover) { .sitenav .brand:hover svg { transform: scale(1.08) rotate(-4deg); filter: brightness(1.12); } }
.sitenav .brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .sitenav .brand svg { transition: none; } .sitenav .brand:hover svg { transform: none; } }
/* ---- hero backgrounds: soft light fields in CSS, after the owner’s images in assets/bg (owner-directed 2026-09-28, redrawn 2026-09-29) ---- */
.hero[data-bg] { position: relative; isolation: isolate; }
/* how much of the page colour covers the light: left where the text starts, middle, right (tuned by measured contrast).
   Applied as a mask, so the page colour shows through and the lights can drift under the text while the scrim holds still */
.hero[data-bg] { --scrim-l: 76%; --scrim-m: 62%; --scrim-r: 24%; }
:root[data-theme="light"] .hero[data-bg] { --scrim-l: 82%; --scrim-m: 70%; --scrim-r: 30%; }
/* the eyebrow is small amber text, 4.8:1 even on the plain page: a halo in the page colour backs it over the image */
.hero[data-bg] .eyebrow { text-shadow: 0 0 1px var(--background), 0 0 6px var(--background), 0 0 14px var(--background), 0 0 22px var(--background); }
:root[data-theme="light"] .hero[data-bg] .eyebrow { color: #6b4100; }   /* the same amber, deeper: #835000 tops out at 4.8:1 */
/* two layers, 112vw wide so a drift never shows an edge: the field (::before) and its warm cores (::after) */
.hero[data-bg]::before, .hero[data-bg]::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 112vw; margin-left: -56vw; pointer-events: none;
  --hero-fade: linear-gradient(to bottom, #000 58%, transparent);
  --hero-scrim: linear-gradient(90deg, rgb(0 0 0 / calc(100% - var(--scrim-l))) 5.4%, rgb(0 0 0 / calc(100% - var(--scrim-m))) 54.5%, rgb(0 0 0 / calc(100% - var(--scrim-r))) 94.6%);
  -webkit-mask-image: var(--hero-fade), var(--hero-scrim); -webkit-mask-composite: source-in; mask-image: var(--hero-fade), var(--hero-scrim); mask-composite: intersect; }
.hero[data-bg]::before { background: var(--hero-bg); background-blend-mode: screen; }
.hero[data-bg]::after { background: var(--hero-lift, none); mix-blend-mode: screen; }
:root[data-theme="light"] .hero[data-bg]::before { background-blend-mode: normal; }
:root[data-theme="light"] .hero[data-bg]::after { mix-blend-mode: normal; }
/* the motion: slow, on transform and opacity only; the four clocks differ so the picture never repeats in step */
@media (prefers-reduced-motion: no-preference) {
  .hero[data-bg]::before { animation: hero-pan 47s ease-in-out infinite alternate, hero-breathe 29s ease-in-out infinite alternate; will-change: transform; }
  .hero[data-bg]::after { animation: hero-cross 37s ease-in-out infinite alternate, hero-swell 23s ease-in-out infinite alternate; will-change: transform, opacity; }
  @keyframes hero-pan { from { translate: -2.5% 0; } to { translate: 2.5% 0; } }
  @keyframes hero-breathe { from { scale: 1; } to { scale: 1.06; } }
  @keyframes hero-cross { from { translate: 3.5% 1%; } to { translate: -3.5% -1.5%; } }
  @keyframes hero-swell { from { opacity: .7; } to { opacity: 1; } }
}
/* the fields, from hero_glows.py (colours sampled from LH-Dark-0N / LH-Lite-0N; 04 is the Brand pair he liked) */
.hero[data-bg="01"] { --hero-bg: radial-gradient(34% 110% at 62% 60%, rgb(126 120 166 / 0.330) 0%, rgb(126 120 166 / 0.322) 8%, rgb(126 120 166 / 0.301) 17%, rgb(126 120 166 / 0.268) 25%, rgb(126 120 166 / 0.227) 33%, rgb(126 120 166 / 0.183) 42%, rgb(126 120 166 / 0.141) 50%, rgb(126 120 166 / 0.102) 58%, rgb(126 120 166 / 0.069) 67%, rgb(126 120 166 / 0.043) 75%, rgb(126 120 166 / 0.023) 83%, rgb(126 120 166 / 0.009) 92%, rgb(126 120 166 / 0.000) 100%), radial-gradient(30% 90% at 38% 80%, rgb(106 68 96 / 0.220) 0%, rgb(106 68 96 / 0.215) 8%, rgb(106 68 96 / 0.200) 17%, rgb(106 68 96 / 0.178) 25%, rgb(106 68 96 / 0.151) 33%, rgb(106 68 96 / 0.122) 42%, rgb(106 68 96 / 0.094) 50%, rgb(106 68 96 / 0.068) 58%, rgb(106 68 96 / 0.046) 67%, rgb(106 68 96 / 0.029) 75%, rgb(106 68 96 / 0.016) 83%, rgb(106 68 96 / 0.006) 92%, rgb(106 68 96 / 0.000) 100%), linear-gradient(180deg, #141c33 0%, #231f3c 100%); --hero-lift: radial-gradient(18% 60% at 62% 72%, rgb(232 176 136 / 0.330) 0%, rgb(232 176 136 / 0.322) 8%, rgb(232 176 136 / 0.301) 17%, rgb(232 176 136 / 0.268) 25%, rgb(232 176 136 / 0.227) 33%, rgb(232 176 136 / 0.183) 42%, rgb(232 176 136 / 0.141) 50%, rgb(232 176 136 / 0.102) 58%, rgb(232 176 136 / 0.069) 67%, rgb(232 176 136 / 0.043) 75%, rgb(232 176 136 / 0.023) 83%, rgb(232 176 136 / 0.009) 92%, rgb(232 176 136 / 0.000) 100%); }
:root[data-theme="light"] .hero[data-bg="01"] { --hero-bg: radial-gradient(30% 90% at 62% 50%, rgb(252 212 246 / 0.440) 0%, rgb(252 212 246 / 0.430) 8%, rgb(252 212 246 / 0.401) 17%, rgb(252 212 246 / 0.357) 25%, rgb(252 212 246 / 0.303) 33%, rgb(252 212 246 / 0.244) 42%, rgb(252 212 246 / 0.187) 50%, rgb(252 212 246 / 0.136) 58%, rgb(252 212 246 / 0.092) 67%, rgb(252 212 246 / 0.057) 75%, rgb(252 212 246 / 0.031) 83%, rgb(252 212 246 / 0.012) 92%, rgb(252 212 246 / 0.000) 100%), radial-gradient(24% 90% at 100% 40%, rgb(192 136 220 / 0.248) 0%, rgb(192 136 220 / 0.242) 8%, rgb(192 136 220 / 0.226) 17%, rgb(192 136 220 / 0.201) 25%, rgb(192 136 220 / 0.170) 33%, rgb(192 136 220 / 0.138) 42%, rgb(192 136 220 / 0.105) 50%, rgb(192 136 220 / 0.076) 58%, rgb(192 136 220 / 0.052) 67%, rgb(192 136 220 / 0.032) 75%, rgb(192 136 220 / 0.017) 83%, rgb(192 136 220 / 0.007) 92%, rgb(192 136 220 / 0.000) 100%), radial-gradient(30% 90% at 0% 20%, rgb(134 162 194 / 0.193) 0%, rgb(134 162 194 / 0.188) 8%, rgb(134 162 194 / 0.175) 17%, rgb(134 162 194 / 0.156) 25%, rgb(134 162 194 / 0.132) 33%, rgb(134 162 194 / 0.107) 42%, rgb(134 162 194 / 0.082) 50%, rgb(134 162 194 / 0.059) 58%, rgb(134 162 194 / 0.040) 67%, rgb(134 162 194 / 0.025) 75%, rgb(134 162 194 / 0.014) 83%, rgb(134 162 194 / 0.005) 92%, rgb(134 162 194 / 0.000) 100%), linear-gradient(180deg, #8a9fbe 0%, #b99ac8 100%); --hero-lift: radial-gradient(20% 60% at 60% 70%, rgb(255 240 196 / 0.385) 0%, rgb(255 240 196 / 0.376) 8%, rgb(255 240 196 / 0.351) 17%, rgb(255 240 196 / 0.312) 25%, rgb(255 240 196 / 0.265) 33%, rgb(255 240 196 / 0.214) 42%, rgb(255 240 196 / 0.164) 50%, rgb(255 240 196 / 0.119) 58%, rgb(255 240 196 / 0.080) 67%, rgb(255 240 196 / 0.050) 75%, rgb(255 240 196 / 0.027) 83%, rgb(255 240 196 / 0.011) 92%, rgb(255 240 196 / 0.000) 100%); }
.hero[data-bg="02"] { --hero-bg: radial-gradient(30% 96% at 60% 62%, rgb(138 112 164 / 0.330) 0%, rgb(138 112 164 / 0.322) 8%, rgb(138 112 164 / 0.301) 17%, rgb(138 112 164 / 0.268) 25%, rgb(138 112 164 / 0.227) 33%, rgb(138 112 164 / 0.183) 42%, rgb(138 112 164 / 0.141) 50%, rgb(138 112 164 / 0.102) 58%, rgb(138 112 164 / 0.069) 67%, rgb(138 112 164 / 0.043) 75%, rgb(138 112 164 / 0.023) 83%, rgb(138 112 164 / 0.009) 92%, rgb(138 112 164 / 0.000) 100%), linear-gradient(180deg, #0c1931 0%, #1c1f3a 100%); --hero-lift: radial-gradient(14% 50% at 60% 74%, rgb(255 216 150 / 0.330) 0%, rgb(255 216 150 / 0.322) 8%, rgb(255 216 150 / 0.301) 17%, rgb(255 216 150 / 0.268) 25%, rgb(255 216 150 / 0.227) 33%, rgb(255 216 150 / 0.183) 42%, rgb(255 216 150 / 0.141) 50%, rgb(255 216 150 / 0.102) 58%, rgb(255 216 150 / 0.069) 67%, rgb(255 216 150 / 0.043) 75%, rgb(255 216 150 / 0.023) 83%, rgb(255 216 150 / 0.009) 92%, rgb(255 216 150 / 0.000) 100%); }
:root[data-theme="light"] .hero[data-bg="02"] { --hero-bg: radial-gradient(22% 90% at 100% 40%, rgb(164 170 250 / 0.330) 0%, rgb(164 170 250 / 0.322) 8%, rgb(164 170 250 / 0.301) 17%, rgb(164 170 250 / 0.268) 25%, rgb(164 170 250 / 0.227) 33%, rgb(164 170 250 / 0.183) 42%, rgb(164 170 250 / 0.141) 50%, rgb(164 170 250 / 0.102) 58%, rgb(164 170 250 / 0.069) 67%, rgb(164 170 250 / 0.043) 75%, rgb(164 170 250 / 0.023) 83%, rgb(164 170 250 / 0.009) 92%, rgb(164 170 250 / 0.000) 100%), radial-gradient(30% 86% at 58% 0%, rgb(152 144 224 / 0.248) 0%, rgb(152 144 224 / 0.242) 8%, rgb(152 144 224 / 0.226) 17%, rgb(152 144 224 / 0.201) 25%, rgb(152 144 224 / 0.170) 33%, rgb(152 144 224 / 0.138) 42%, rgb(152 144 224 / 0.105) 50%, rgb(152 144 224 / 0.076) 58%, rgb(152 144 224 / 0.052) 67%, rgb(152 144 224 / 0.032) 75%, rgb(152 144 224 / 0.017) 83%, rgb(152 144 224 / 0.007) 92%, rgb(152 144 224 / 0.000) 100%), linear-gradient(180deg, #7a6aa6 0%, #9c84b4 100%); --hero-lift: radial-gradient(24% 76% at 58% 55%, rgb(246 210 178 / 0.440) 0%, rgb(246 210 178 / 0.430) 8%, rgb(246 210 178 / 0.401) 17%, rgb(246 210 178 / 0.357) 25%, rgb(246 210 178 / 0.303) 33%, rgb(246 210 178 / 0.244) 42%, rgb(246 210 178 / 0.187) 50%, rgb(246 210 178 / 0.136) 58%, rgb(246 210 178 / 0.092) 67%, rgb(246 210 178 / 0.057) 75%, rgb(246 210 178 / 0.031) 83%, rgb(246 210 178 / 0.012) 92%, rgb(246 210 178 / 0.000) 100%); }
.hero[data-bg="03"] { --hero-bg: radial-gradient(40% 110% at 62% 56%, rgb(138 116 192 / 0.193) 0%, rgb(138 116 192 / 0.188) 8%, rgb(138 116 192 / 0.175) 17%, rgb(138 116 192 / 0.156) 25%, rgb(138 116 192 / 0.132) 33%, rgb(138 116 192 / 0.107) 42%, rgb(138 116 192 / 0.082) 50%, rgb(138 116 192 / 0.059) 58%, rgb(138 116 192 / 0.040) 67%, rgb(138 116 192 / 0.025) 75%, rgb(138 116 192 / 0.014) 83%, rgb(138 116 192 / 0.005) 92%, rgb(138 116 192 / 0.000) 100%), radial-gradient(20% 64% at 40% 66%, rgb(208 158 240 / 0.248) 0%, rgb(208 158 240 / 0.242) 8%, rgb(208 158 240 / 0.226) 17%, rgb(208 158 240 / 0.201) 25%, rgb(208 158 240 / 0.170) 33%, rgb(208 158 240 / 0.138) 42%, rgb(208 158 240 / 0.105) 50%, rgb(208 158 240 / 0.076) 58%, rgb(208 158 240 / 0.052) 67%, rgb(208 158 240 / 0.032) 75%, rgb(208 158 240 / 0.017) 83%, rgb(208 158 240 / 0.007) 92%, rgb(208 158 240 / 0.000) 100%), radial-gradient(20% 64% at 84% 62%, rgb(200 144 224 / 0.248) 0%, rgb(200 144 224 / 0.242) 8%, rgb(200 144 224 / 0.226) 17%, rgb(200 144 224 / 0.201) 25%, rgb(200 144 224 / 0.170) 33%, rgb(200 144 224 / 0.138) 42%, rgb(200 144 224 / 0.105) 50%, rgb(200 144 224 / 0.076) 58%, rgb(200 144 224 / 0.052) 67%, rgb(200 144 224 / 0.032) 75%, rgb(200 144 224 / 0.017) 83%, rgb(200 144 224 / 0.007) 92%, rgb(200 144 224 / 0.000) 100%), linear-gradient(180deg, #3a4684 0%, #2c2458 100%); --hero-lift: radial-gradient(16% 52% at 62% 76%, rgb(255 190 136 / 0.303) 0%, rgb(255 190 136 / 0.296) 8%, rgb(255 190 136 / 0.276) 17%, rgb(255 190 136 / 0.245) 25%, rgb(255 190 136 / 0.208) 33%, rgb(255 190 136 / 0.168) 42%, rgb(255 190 136 / 0.129) 50%, rgb(255 190 136 / 0.093) 58%, rgb(255 190 136 / 0.063) 67%, rgb(255 190 136 / 0.039) 75%, rgb(255 190 136 / 0.021) 83%, rgb(255 190 136 / 0.009) 92%, rgb(255 190 136 / 0.000) 100%); }
:root[data-theme="light"] .hero[data-bg="03"] { --hero-bg: radial-gradient(32% 90% at 60% 8%, rgb(112 162 242 / 0.303) 0%, rgb(112 162 242 / 0.296) 8%, rgb(112 162 242 / 0.276) 17%, rgb(112 162 242 / 0.245) 25%, rgb(112 162 242 / 0.208) 33%, rgb(112 162 242 / 0.168) 42%, rgb(112 162 242 / 0.129) 50%, rgb(112 162 242 / 0.093) 58%, rgb(112 162 242 / 0.063) 67%, rgb(112 162 242 / 0.039) 75%, rgb(112 162 242 / 0.021) 83%, rgb(112 162 242 / 0.009) 92%, rgb(112 162 242 / 0.000) 100%), radial-gradient(22% 70% at 92% 50%, rgb(196 156 182 / 0.248) 0%, rgb(196 156 182 / 0.242) 8%, rgb(196 156 182 / 0.226) 17%, rgb(196 156 182 / 0.201) 25%, rgb(196 156 182 / 0.170) 33%, rgb(196 156 182 / 0.138) 42%, rgb(196 156 182 / 0.105) 50%, rgb(196 156 182 / 0.076) 58%, rgb(196 156 182 / 0.052) 67%, rgb(196 156 182 / 0.032) 75%, rgb(196 156 182 / 0.017) 83%, rgb(196 156 182 / 0.007) 92%, rgb(196 156 182 / 0.000) 100%), linear-gradient(180deg, #5a64ac 0%, #6c5c98 100%); --hero-lift: radial-gradient(14% 56% at 58% 62%, rgb(234 160 116 / 0.330) 0%, rgb(234 160 116 / 0.322) 8%, rgb(234 160 116 / 0.301) 17%, rgb(234 160 116 / 0.268) 25%, rgb(234 160 116 / 0.227) 33%, rgb(234 160 116 / 0.183) 42%, rgb(234 160 116 / 0.141) 50%, rgb(234 160 116 / 0.102) 58%, rgb(234 160 116 / 0.069) 67%, rgb(234 160 116 / 0.043) 75%, rgb(234 160 116 / 0.023) 83%, rgb(234 160 116 / 0.009) 92%, rgb(234 160 116 / 0.000) 100%); }
.hero[data-bg="04"] { --hero-bg: radial-gradient(16% 60% at 80% 56%, rgb(164 151 247 / 0.330) 0%, rgb(164 151 247 / 0.322) 8%, rgb(164 151 247 / 0.301) 17%, rgb(164 151 247 / 0.268) 25%, rgb(164 151 247 / 0.227) 33%, rgb(164 151 247 / 0.183) 42%, rgb(164 151 247 / 0.141) 50%, rgb(164 151 247 / 0.102) 58%, rgb(164 151 247 / 0.069) 67%, rgb(164 151 247 / 0.043) 75%, rgb(164 151 247 / 0.023) 83%, rgb(164 151 247 / 0.009) 92%, rgb(164 151 247 / 0.000) 100%), radial-gradient(16% 60% at 28% 56%, rgb(120 112 192 / 0.248) 0%, rgb(120 112 192 / 0.242) 8%, rgb(120 112 192 / 0.226) 17%, rgb(120 112 192 / 0.201) 25%, rgb(120 112 192 / 0.170) 33%, rgb(120 112 192 / 0.138) 42%, rgb(120 112 192 / 0.105) 50%, rgb(120 112 192 / 0.076) 58%, rgb(120 112 192 / 0.052) 67%, rgb(120 112 192 / 0.032) 75%, rgb(120 112 192 / 0.017) 83%, rgb(120 112 192 / 0.007) 92%, rgb(120 112 192 / 0.000) 100%), linear-gradient(180deg, #26274f 0%, #2c2552 100%); --hero-lift: radial-gradient(18% 64% at 56% 40%, rgb(232 194 114 / 0.385) 0%, rgb(232 194 114 / 0.376) 8%, rgb(232 194 114 / 0.351) 17%, rgb(232 194 114 / 0.312) 25%, rgb(232 194 114 / 0.265) 33%, rgb(232 194 114 / 0.214) 42%, rgb(232 194 114 / 0.164) 50%, rgb(232 194 114 / 0.119) 58%, rgb(232 194 114 / 0.080) 67%, rgb(232 194 114 / 0.050) 75%, rgb(232 194 114 / 0.027) 83%, rgb(232 194 114 / 0.011) 92%, rgb(232 194 114 / 0.000) 100%), radial-gradient(26% 70% at 56% 100%, rgb(192 138 88 / 0.193) 0%, rgb(192 138 88 / 0.188) 8%, rgb(192 138 88 / 0.175) 17%, rgb(192 138 88 / 0.156) 25%, rgb(192 138 88 / 0.132) 33%, rgb(192 138 88 / 0.107) 42%, rgb(192 138 88 / 0.082) 50%, rgb(192 138 88 / 0.059) 58%, rgb(192 138 88 / 0.040) 67%, rgb(192 138 88 / 0.025) 75%, rgb(192 138 88 / 0.014) 83%, rgb(192 138 88 / 0.005) 92%, rgb(192 138 88 / 0.000) 100%); }
:root[data-theme="light"] .hero[data-bg="04"] { --hero-bg: radial-gradient(30% 84% at 100% 0%, rgb(192 196 254 / 0.330) 0%, rgb(192 196 254 / 0.322) 8%, rgb(192 196 254 / 0.301) 17%, rgb(192 196 254 / 0.268) 25%, rgb(192 196 254 / 0.227) 33%, rgb(192 196 254 / 0.183) 42%, rgb(192 196 254 / 0.141) 50%, rgb(192 196 254 / 0.102) 58%, rgb(192 196 254 / 0.069) 67%, rgb(192 196 254 / 0.043) 75%, rgb(192 196 254 / 0.023) 83%, rgb(192 196 254 / 0.009) 92%, rgb(192 196 254 / 0.000) 100%), radial-gradient(26% 76% at 94% 72%, rgb(248 212 172 / 0.413) 0%, rgb(248 212 172 / 0.403) 8%, rgb(248 212 172 / 0.376) 17%, rgb(248 212 172 / 0.335) 25%, rgb(248 212 172 / 0.284) 33%, rgb(248 212 172 / 0.229) 42%, rgb(248 212 172 / 0.176) 50%, rgb(248 212 172 / 0.127) 58%, rgb(248 212 172 / 0.086) 67%, rgb(248 212 172 / 0.054) 75%, rgb(248 212 172 / 0.029) 83%, rgb(248 212 172 / 0.012) 92%, rgb(248 212 172 / 0.000) 100%), linear-gradient(180deg, #8187d6 0%, #a894d8 100%); --hero-lift: radial-gradient(30% 84% at 60% 56%, rgb(246 236 252 / 0.413) 0%, rgb(246 236 252 / 0.403) 8%, rgb(246 236 252 / 0.376) 17%, rgb(246 236 252 / 0.335) 25%, rgb(246 236 252 / 0.284) 33%, rgb(246 236 252 / 0.229) 42%, rgb(246 236 252 / 0.176) 50%, rgb(246 236 252 / 0.127) 58%, rgb(246 236 252 / 0.086) 67%, rgb(246 236 252 / 0.054) 75%, rgb(246 236 252 / 0.029) 83%, rgb(246 236 252 / 0.012) 92%, rgb(246 236 252 / 0.000) 100%), radial-gradient(24% 66% at 56% 80%, rgb(248 208 234 / 0.275) 0%, rgb(248 208 234 / 0.269) 8%, rgb(248 208 234 / 0.251) 17%, rgb(248 208 234 / 0.223) 25%, rgb(248 208 234 / 0.189) 33%, rgb(248 208 234 / 0.153) 42%, rgb(248 208 234 / 0.117) 50%, rgb(248 208 234 / 0.085) 58%, rgb(248 208 234 / 0.057) 67%, rgb(248 208 234 / 0.036) 75%, rgb(248 208 234 / 0.019) 83%, rgb(248 208 234 / 0.008) 92%, rgb(248 208 234 / 0.000) 100%); }
.hero[data-bg="05"] { --hero-bg: radial-gradient(40% 104% at 58% 66%, rgb(46 66 96 / 0.275) 0%, rgb(46 66 96 / 0.269) 8%, rgb(46 66 96 / 0.251) 17%, rgb(46 66 96 / 0.223) 25%, rgb(46 66 96 / 0.189) 33%, rgb(46 66 96 / 0.153) 42%, rgb(46 66 96 / 0.117) 50%, rgb(46 66 96 / 0.085) 58%, rgb(46 66 96 / 0.057) 67%, rgb(46 66 96 / 0.036) 75%, rgb(46 66 96 / 0.019) 83%, rgb(46 66 96 / 0.008) 92%, rgb(46 66 96 / 0.000) 100%), linear-gradient(180deg, #05080f 0%, #151a2c 100%); --hero-lift: radial-gradient(44% 110% at 58% 86%, rgb(224 160 112 / 0.275) 0%, rgb(224 160 112 / 0.269) 8%, rgb(224 160 112 / 0.251) 17%, rgb(224 160 112 / 0.223) 25%, rgb(224 160 112 / 0.189) 33%, rgb(224 160 112 / 0.153) 42%, rgb(224 160 112 / 0.117) 50%, rgb(224 160 112 / 0.085) 58%, rgb(224 160 112 / 0.057) 67%, rgb(224 160 112 / 0.036) 75%, rgb(224 160 112 / 0.019) 83%, rgb(224 160 112 / 0.008) 92%, rgb(224 160 112 / 0.000) 100%); }
:root[data-theme="light"] .hero[data-bg="05"] { --hero-bg: radial-gradient(42% 110% at 58% 90%, rgb(170 188 252 / 0.303) 0%, rgb(170 188 252 / 0.296) 8%, rgb(170 188 252 / 0.276) 17%, rgb(170 188 252 / 0.245) 25%, rgb(170 188 252 / 0.208) 33%, rgb(170 188 252 / 0.168) 42%, rgb(170 188 252 / 0.129) 50%, rgb(170 188 252 / 0.093) 58%, rgb(170 188 252 / 0.063) 67%, rgb(170 188 252 / 0.039) 75%, rgb(170 188 252 / 0.021) 83%, rgb(170 188 252 / 0.009) 92%, rgb(170 188 252 / 0.000) 100%), linear-gradient(180deg, #777abf 0%, #90a0e8 100%); --hero-lift: radial-gradient(16% 56% at 58% 52%, rgb(240 196 174 / 0.358) 0%, rgb(240 196 174 / 0.349) 8%, rgb(240 196 174 / 0.326) 17%, rgb(240 196 174 / 0.290) 25%, rgb(240 196 174 / 0.246) 33%, rgb(240 196 174 / 0.199) 42%, rgb(240 196 174 / 0.152) 50%, rgb(240 196 174 / 0.110) 58%, rgb(240 196 174 / 0.075) 67%, rgb(240 196 174 / 0.046) 75%, rgb(240 196 174 / 0.025) 83%, rgb(240 196 174 / 0.010) 92%, rgb(240 196 174 / 0.000) 100%), radial-gradient(22% 64% at 58% 66%, rgb(200 204 232 / 0.248) 0%, rgb(200 204 232 / 0.242) 8%, rgb(200 204 232 / 0.226) 17%, rgb(200 204 232 / 0.201) 25%, rgb(200 204 232 / 0.170) 33%, rgb(200 204 232 / 0.138) 42%, rgb(200 204 232 / 0.105) 50%, rgb(200 204 232 / 0.076) 58%, rgb(200 204 232 / 0.052) 67%, rgb(200 204 232 / 0.032) 75%, rgb(200 204 232 / 0.017) 83%, rgb(200 204 232 / 0.007) 92%, rgb(200 204 232 / 0.000) 100%); }
/* ---- page to page: an elegant fade, the nav bar holding still (owner-directed 2026-09-27) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; types: page; }
  .sitenav { view-transition-name: sitenav; }
  html:active-view-transition-type(page)::view-transition-old(root) { animation: pg-out .22s cubic-bezier(.4, 0, 1, 1) both; }
  html:active-view-transition-type(page)::view-transition-new(root) { animation: pg-in .42s cubic-bezier(.2, .7, .2, 1) .05s both; }
  @keyframes pg-out { to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }
  @keyframes pg-in { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } }
}
/* ---- mobile (owner-directed 2026-09-24) ---- */
/* no page is ever wider than the phone: clip, not hidden, so the sticky nav keeps working (both must be clip) */
html, body { overflow-x: clip; }
/* 12-column grids: 11 gaps of 32px outgrew a 375px phone (382px wide page). The gap scales with the grid there */
@media (max-width: 860px) {
  html body .g12, html body .contact .g12, html body .history, html body .mosaic, html body .products, html body .rebrand,
  html body .beat.word, html body .qs, html body .qsec { column-gap: min(var(--sp-5), 2.4%); }
}
/* the menu button and its rollout panel, below 861px where the nav links are hidden */
.navmenu-btn { display: none; appearance: none; width: 40px; height: 40px; border-radius: 50%; border: var(--border-w) solid var(--border-subtle); background: transparent; color: var(--icon); place-items: center; cursor: pointer; padding: 0; transition: border-color .2s ease; }
.navmenu-btn .icon { font-size: 22px; }
.navmenu-btn:hover, .navmenu-btn[aria-expanded="true"] { border-color: var(--link); }
.navmenu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the panel drops out from behind the bar: the clip box starts at the bottom edge of the bar (owner-directed 2026-09-24) */
.navmenu-clip { position: fixed; left: 0; right: 0; top: 80px; bottom: 0; z-index: 29; overflow: hidden; pointer-events: none; }
.navmenu { position: absolute; left: 0; right: 0; top: 0; background: var(--background); border-bottom: var(--border-w) solid var(--border-subtle); padding: var(--sp-2) var(--margin) var(--sp-5); max-height: 100%; overflow-y: auto; box-shadow: 0 24px 48px rgba(5, 5, 20, .35);
  transform: translateY(-101%); visibility: hidden; pointer-events: none; transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .42s; }
.navmenu.open { transform: none; visibility: visible; pointer-events: auto; transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.navmenu a.item { display: flex; align-items: center; gap: var(--sp-3); padding: 16px 0; border-bottom: var(--border-w) solid var(--border-subtle); text-decoration: none; color: var(--text-heading); font-family: var(--f-03); font-size: 16px; letter-spacing: .15em; text-transform: uppercase;
  opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .32s cubic-bezier(.2, .7, .2, 1), color .18s ease; }
.navmenu.open a.item { opacity: 1; transform: none; }
.navmenu a.item .icon { font-size: 22px; color: var(--link); margin: 0; }
.navmenu a.item[aria-current="page"] { color: var(--link); }
.navmenu a.item:hover { color: var(--link); }
.navmenu .btn { display: flex; justify-content: center; width: 100%; margin-top: var(--sp-5); }
@media (max-width: 860px) { .navmenu-btn { display: grid; } }
.navscrim { position: fixed; left: 0; right: 0; top: 80px; bottom: 0; z-index: 28; background: color-mix(in srgb, var(--ground-deep) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); touch-action: none;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.navscrim.open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
html.navlock { overflow-y: hidden; }
@media (min-width: 861px) { .navmenu-clip, .navmenu, .navscrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .navmenu, .navmenu a.item, .navscrim { transition: none; transform: none; } }
:root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }
/* ---- the theme change, animated (owner-directed 2026-09-22) ---- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  /* only while the switch is running: a standing rule here would lag every hover on the site */
  .theming, .theming *, .theming *::before, .theming *::after {
    transition: background-color .34s ease, color .34s ease, border-color .34s ease, fill .34s ease, outline-color .34s ease !important;
  }
  .sitenav .theme.turning .icon { animation: theme-turn .42s cubic-bezier(.2, .7, .2, 1); }
  /* the icon pop on press, every button and link with an icon (owner-directed 2026-09-24) */
  .ic-pop { animation: ic-pop .42s cubic-bezier(.2, .7, .2, 1); }
  @keyframes ic-pop { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
  @keyframes theme-turn {
    0%   { transform: rotate(0) scale(1); opacity: 1; }
    45%  { transform: rotate(90deg) scale(.7); opacity: .25; }
    100% { transform: rotate(180deg) scale(1); opacity: 1; }
  }
}