@import url('/assets/css/page-audit-20260723.css?v=20260723-audit-v1');

/*
 * Hot Tub Shine — Studio refinement layer
 * This file intentionally sits after main.css. It preserves the original art
 * direction while making the motion system tactile, responsive, and dependable.
 */

:root {
  --studio-ease: cubic-bezier(.2, .72, .18, 1);
  --studio-spring: cubic-bezier(.16, 1.15, .32, 1);
  --studio-glass: rgba(5, 17, 33, .78);
  --studio-line: rgba(127, 224, 247, .28);
}

html.studio-arriving body { animation: studio-document-in .3s ease-out both; }
@keyframes studio-document-in { from { opacity: .76; } to { opacity: 1; } }

/* ---------- Shine Current page transition ---------- */
.studio-transition {
  --current-target-x: 50vw;
  --current-target-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: transparent;
  transition: opacity .12s ease, visibility 0s linear .76s;
}
.studio-transition::before,
.studio-transition::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: circle(0 at var(--current-target-x) var(--current-target-y));
}
.studio-transition::before {
  z-index: 1;
  background:
    radial-gradient(circle at var(--current-target-x) var(--current-target-y), rgba(34, 172, 226, .42), transparent 13%),
    repeating-radial-gradient(circle at var(--current-target-x) var(--current-target-y), rgba(89, 218, 248, .08) 0 2px, transparent 3px 25px),
    linear-gradient(125deg, #020b16, #063a69 48%, #04101e 82%);
}
.studio-transition::after {
  z-index: 2;
  background:
    radial-gradient(circle at var(--current-target-x) var(--current-target-y), rgba(235,253,255,.4), transparent 5%, rgba(53,199,240,.11) 16%, transparent 34%),
    linear-gradient(110deg, transparent 35%, rgba(255,255,255,.12) 49%, transparent 61%);
  mix-blend-mode: screen;
}
.studio-transition__mark {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  gap: .32em;
  translate: -50% -50%;
  width: max-content;
  color: #fff;
  font: 400 clamp(1.45rem, 4.5vw, 4.1rem)/1 Marcellus, serif;
  letter-spacing: .13em;
  text-shadow: 0 0 25px rgba(127,224,247,.75), 0 12px 35px rgba(2,8,18,.8);
  opacity: 0;
  transform: translateY(18px) scale(.92);
}
.studio-transition__mark i {
  width: .3em;
  height: .42em;
  border-radius: 70% 30% 66% 34% / 72% 38% 62% 28%;
  rotate: 45deg;
  background: linear-gradient(145deg, #effdff, #38c7ec 58%, #8070f2);
  box-shadow: 0 0 18px rgba(89,224,255,.88), inset 0 0 4px rgba(255,255,255,.75);
}
.studio-leaving .studio-transition {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.studio-leaving .studio-transition::before { animation: studio-current-flood .48s .17s var(--studio-ease) both; }
.studio-leaving .studio-transition::after { animation: studio-current-caustic .55s .14s ease-out both; }
.studio-leaving .studio-transition__mark { animation: studio-mark-pass .38s .3s var(--studio-spring) both; }
@keyframes studio-current-flood {
  0% { opacity: .2; clip-path: circle(0 at var(--current-target-x) var(--current-target-y)); }
  100% { opacity: 1; clip-path: circle(160vmax at var(--current-target-x) var(--current-target-y)); }
}
@keyframes studio-current-caustic {
  0% { opacity: 0; clip-path: circle(0 at var(--current-target-x) var(--current-target-y)); filter: brightness(1.6); }
  52% { opacity: .9; }
  100% { opacity: .34; clip-path: circle(165vmax at var(--current-target-x) var(--current-target-y)); filter: brightness(1); }
}
@keyframes studio-mark-pass {
  45%, 100% { opacity: .94; transform: translateY(0) scale(1); }
}

.studio-transition-source {
  transform: translateY(2px) scale(.965) !important;
  filter: brightness(1.18) saturate(1.12) !important;
}

.studio-current {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity .42s ease;
  contain: strict;
}
.studio-current__canvas,
.studio-current__letters { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-current__canvas { filter: saturate(1.08) brightness(1.01); }
.studio-current__segment {
  --current-x: 0px;
  --current-y: 0px;
  --current-angle: 0deg;
  --current-alpha: 0;
  position: fixed;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(226,250,255,.36);
  border-radius: 58% 42% 54% 46%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.7), transparent 19%),
    conic-gradient(from calc(var(--current-index) * 23deg), rgba(77,218,255,.7), rgba(79,139,255,.5), rgba(107,223,244,.55), rgba(77,218,255,.7));
  box-shadow: inset 0 0 6px rgba(255,255,255,.2), 0 0 10px rgba(80,210,255,.34);
  color: rgba(255,255,255,.82);
  font: 750 .48rem/1 Outfit, sans-serif;
  font-style: normal;
  text-shadow: 0 1px 4px rgba(4,16,30,.72);
  opacity: var(--current-alpha);
  transform: translate3d(var(--current-x), var(--current-y), 0) translate(-50%, -50%) rotate(var(--current-angle));
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.studio-current__segment:nth-child(3n) { width: 13px; height: 13px; }
.studio-current__segment:nth-child(4n) { width: 20px; height: 15px; }
.studio-current__drop {
  --current-x: 0px;
  --current-y: 0px;
  --current-rotate: 45deg;
  position: fixed;
  left: 0;
  top: 0;
  width: 15px;
  height: 19px;
  border-radius: 72% 28% 68% 32% / 74% 34% 66% 26%;
  background: linear-gradient(145deg, #f5feff, #45d6f4 58%, #2f8eff 96%);
  box-shadow: 0 0 10px #6ee8ff, 0 0 24px rgba(83,203,255,.62), inset 0 0 5px rgba(255,255,255,.72);
  opacity: 0;
  transform: translate3d(var(--current-x), var(--current-y), 0) translate(-50%, -50%) rotate(var(--current-rotate));
  mix-blend-mode: screen;
}
.studio-current.is-running .studio-current__drop { opacity: 1; }

.studio-arrival-current {
  z-index: 999;
  animation: studio-current-arrival-in .18s ease both;
}
.studio-arrival-current.is-finishing { opacity: 0; }
@keyframes studio-current-arrival-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Quiet water-ripple route transition ---------- */
.studio-transition.studio-ripple-transition {
  --ripple-origin-x: 50vw;
  --ripple-origin-y: 50vh;
  opacity: 0;
  visibility: hidden;
  background: #020a15;
  transition: opacity .2s ease, visibility 0s linear .66s;
}
.studio-transition.studio-ripple-transition::before,
.studio-transition.studio-ripple-transition::after {
  clip-path: none;
  inset: 0;
  opacity: 0;
}
.studio-transition.studio-ripple-transition::before {
  z-index: 0;
  background:
    radial-gradient(circle at var(--ripple-origin-x) var(--ripple-origin-y), rgba(40, 155, 215, .09), transparent 22%),
    linear-gradient(145deg, #010711 0%, #031426 48%, #041d32 100%);
}
.studio-transition.studio-ripple-transition::after {
  z-index: 1;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(121, 222, 246, .028) 0 1px, transparent 2px 44px),
    radial-gradient(circle at 50% 50%, rgba(109, 217, 243, .035), transparent 50%);
  mix-blend-mode: screen;
  transform: scale(1.08);
}
.studio-ripple-transition__surface {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
}
.studio-ripple-transition__ring {
  position: absolute;
  left: var(--ripple-origin-x);
  top: var(--ripple-origin-y);
  width: 32px;
  height: 32px;
  border: 1px solid rgba(156, 226, 244, .38);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.12);
  box-shadow: 0 0 11px rgba(76, 184, 226, .09), inset 0 0 8px rgba(139, 225, 246, .035);
}
.studio-ripple-transition__ring:nth-child(n + 4) { display: none; }
.studio-ripple-leaving .studio-ripple-transition {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.studio-ripple-leaving .studio-ripple-transition::before {
  animation: studio-ripple-ground .5s ease-out both;
}
.studio-ripple-leaving .studio-ripple-transition::after {
  animation: studio-ripple-surface .62s .06s ease-out both;
}
.studio-ripple-leaving .studio-ripple-transition__ring {
  animation: studio-route-ripple .66s calc(var(--ripple-order) * 58ms + 40ms) cubic-bezier(.2,.72,.18,1) both;
}
@keyframes studio-ripple-ground {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes studio-ripple-surface {
  0% { opacity: 0; transform: scale(1.12) translateY(8px); }
  100% { opacity: .42; transform: scale(1.02) translateY(0); }
}
@keyframes studio-route-ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  16% { opacity: .34; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(19); }
}

.studio-arriving .orbit-widget.is-arrived.is-route-arrival { animation: orbit-current-arrive .46s .04s var(--studio-ease) forwards; }
@keyframes orbit-current-arrive {
  0% { opacity: 0; scale: .92; filter: blur(5px) brightness(1.25); }
  100% { opacity: 1; scale: 1; filter: none; }
}

.orbit-widget.is-current-catch { z-index: 1001; }
.orbit-widget.is-current-catch .orbit-mark {
  animation: orbit-current-catch .74s var(--studio-ease) both;
  border-color: rgba(197,242,253,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 16px 46px rgba(2,8,18,.64),
    0 0 28px rgba(71,218,249,.48),
    0 0 42px rgba(38,151,255,.28);
}
.orbit-widget.is-current-catch .orbit-mark__rotor { animation: none; }
.orbit-widget.is-current-catch .orbit-mark::before { animation: orbit-current-catch-ring .7s var(--studio-ease) both; }
.orbit-widget.is-current-catch .orbit-mark__drop {
  animation: orbit-current-drop-catch .6s var(--studio-ease) both;
}
.orbit-widget.is-current-catch .orbit-mark__line--shine {
  animation-duration: 1.1s, .8s;
  filter: drop-shadow(0 0 8px rgba(113,227,255,.9)) drop-shadow(0 0 16px rgba(47,142,255,.55));
}
.orbit-widget.is-current-catch .orbit-spark { animation: orbit-spark-burst .7s var(--studio-ease) both; }
.orbit-widget.is-current-catch .orbit-spark--two { animation-delay: .08s; }
.orbit-widget.is-current-catch .orbit-spark--three { animation-delay: .15s; }
@keyframes orbit-current-catch {
  0% { transform: perspective(960px) rotateY(var(--tap-spin-angle)) scale(1); filter: brightness(1); }
  32% { transform: perspective(960px) rotateY(calc(var(--tap-spin-angle) + 132deg)) scale(.985); filter: brightness(1.28); }
  72% { transform: perspective(960px) rotateY(calc(var(--tap-spin-angle) + 324deg)) scale(1.015); filter: brightness(1.12); }
  100% { transform: perspective(960px) rotateY(calc(var(--tap-spin-angle) + 360deg)) scale(1); filter: brightness(1); }
}
@keyframes orbit-current-catch-shell {
  0% { scale: 1; filter: brightness(1); }
  32% { scale: .985; filter: brightness(1.22); }
  72% { scale: 1.018; filter: brightness(1.08); }
  100% { scale: 1; filter: brightness(1); }
}
@keyframes orbit-current-catch-ring {
  0% { opacity: .64; scale: .42; border-color: rgba(225,250,255,.8); }
  68% { opacity: .28; scale: 2.7; border-color: rgba(47,174,255,.58); }
  100% { opacity: 0; scale: 3.3; }
}
@keyframes orbit-current-drop-catch {
  0% { scale: 1; filter: brightness(1); }
  35% { scale: 1.45; filter: brightness(1.55) drop-shadow(0 0 11px #71e9ff); }
  100% { scale: 1; filter: brightness(1); }
}
.hero-brandmark.is-current-catch { animation: home-current-catch .9s var(--studio-spring) both; }
@keyframes home-current-catch {
  0% { scale: 1; filter: brightness(1); }
  45% { scale: 1.045; filter: brightness(1.32) drop-shadow(0 0 30px rgba(71,218,249,.48)); }
  100% { scale: 1; filter: brightness(1); }
}

/* ---------- The draggable Shine: utility + fidget object ---------- */
.orbit-widget {
  --orbit-x: 0px;
  --orbit-y: 0px;
  --orbit-rx: 0deg;
  --orbit-ry: 0deg;
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(286px, 23vw, 340px);
  z-index: 210;
  transform: translate3d(var(--orbit-x), var(--orbit-y), 0) rotateX(var(--orbit-rx)) rotateY(var(--orbit-ry));
  transform-style: preserve-3d;
  opacity: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.orbit-widget.is-document-anchored {
  position: absolute;
  will-change: auto;
}
.orbit-widget.is-user-pinned {
  position: fixed;
  will-change: transform;
}
.orbit-widget.is-arrived { animation: orbit-arrive 1.15s .25s var(--studio-spring) forwards; }
.orbit-widget.is-arrived.is-route-arrival { animation: none; opacity: 1; scale: 1; filter: none; }
.orbit-widget.is-dragging { cursor: grabbing; z-index: 240; }
.orbit-widget.is-tap-spinning .orbit-mark { will-change: transform; }
@keyframes orbit-arrive {
  0% { opacity: 0; scale: .38; filter: blur(9px); }
  58% { opacity: 1; scale: 1.08; filter: blur(0); }
  100% { opacity: 1; scale: 1; }
}
@keyframes orbit-spin {
  0% { transform: perspective(700px) rotateY(0) scale(1); }
  55% { transform: perspective(700px) rotateY(230deg) scale(1.12); }
  100% { transform: perspective(700px) rotateY(360deg) scale(1); }
}

.orbit-mark {
  --tap-spin-angle: 0deg;
  position: relative;
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 0;
  color: #f6fbff;
  text-align: center;
  border: 1px solid rgba(127,224,247,.38);
  border-radius: 999px;
  background:
    linear-gradient(110deg, transparent 18%, rgba(255,255,255,.11) 44%, transparent 66%),
    radial-gradient(circle at 50% 120%, rgba(53,199,240,.23), transparent 58%),
    rgba(4,16,30,.84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -12px 24px rgba(2,8,18,.42),
    0 12px 35px rgba(2,8,18,.48),
    0 0 0 0 rgba(53,199,240,.2);
  backdrop-filter: blur(15px) saturate(1.35);
  -webkit-backdrop-filter: blur(15px) saturate(1.35);
  cursor: grab;
  overflow: visible;
  transform: perspective(960px) rotateY(var(--tap-spin-angle));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: border-color .3s ease, box-shadow .35s ease, background .35s ease;
}
.orbit-mark::before {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border: 1px solid rgba(127,224,247,.26);
  border-radius: 50%;
  scale: .4;
  opacity: 0;
}
.orbit-mark:hover,
.orbit-mark:focus-visible,
.orbit-widget.is-dragging .orbit-mark,
.orbit-widget.is-open .orbit-mark {
  border-color: rgba(127,224,247,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 18px 48px rgba(2,8,18,.62), 0 0 36px rgba(53,199,240,.23);
}
.orbit-widget.is-dragging .orbit-mark::before {
  animation: none;
  opacity: .36;
  scale: 2.25;
  border-color: rgba(71, 201, 255, .68);
}
.orbit-widget.is-bursting .orbit-mark,
.orbit-widget.is-tap-spinning .orbit-mark {
  border-color: rgba(92, 214, 255, .88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 50px rgba(2,8,18,.65), 0 0 44px rgba(71,201,255,.42), 0 0 24px rgba(47,142,255,.28);
}
@keyframes orbit-pulse { to { scale: 3.8; opacity: .42; } }

.orbit-mark__rotor {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.orbit-mark__face {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: .18rem;
  min-height: 100%;
  padding: .7rem 1.2rem .48rem;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
}
.orbit-mark__face--front { transform: translateZ(1px); }
.orbit-mark__face--back {
  transform: rotateY(180deg) translateZ(1px);
  background: transparent;
}
.orbit-mark__back-brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .64em;
  padding-top: .12rem;
  white-space: nowrap;
}
.orbit-mark__back-kicker,
.orbit-mark__back-word {
  display: inline-block;
  font: 400 clamp(.78rem, .92vw, .96rem)/1 Marcellus, serif;
  letter-spacing: .13em;
}
.orbit-mark__back-kicker { color: #d7e7f4; }
.orbit-mark__back-word {
  color: transparent;
  background: linear-gradient(105deg, #ecfbff 0%, #63e7ff 32%, #2f8eff 64%, #b8f4ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(71,201,255,.62));
  animation: orbit-chrome 3.8s linear infinite;
}
.orbit-mark__back-i { position: relative; display: inline-block; }
.orbit-mark__back-drop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .13em);
  width: .46em;
  height: .58em;
  translate: -50% 0;
  rotate: 45deg;
  border-radius: 0 58% 58% 58%;
  background: linear-gradient(135deg, #e9fbff, #47c9ff 56%, #176ed5);
  box-shadow: 0 0 12px rgba(71,201,255,.78);
}

.orbit-mark__brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .68em;
  padding-top: .18rem;
  white-space: nowrap;
}

.orbit-mark__line {
  position: relative;
  z-index: 1;
  display: inline-block;
  font: 400 clamp(.82rem, .96vw, 1rem)/1 Marcellus, serif;
  letter-spacing: .125em;
  white-space: nowrap;
  background: linear-gradient(100deg, #fff 5%, #c4d6e6 35%, #7fe0f7 58%, #fff 82%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: orbit-chrome 5.8s linear infinite;
}
.orbit-mark__line--hot {
  background-image: linear-gradient(105deg, #fff 8%, #a9b9c8 35%, #f7fbff 50%, #7f93a6 68%, #fff 92%);
  background-size: 240% 100%;
  animation: orbit-silver 7.5s linear infinite;
}
.orbit-mark__line--shine {
  background-image: linear-gradient(105deg, #f8fdff 0%, #62e7ff 18%, #2f8eff 34%, #9d7bff 50%, #ff9fcf 64%, #ffc46b 79%, #72e6dd 91%, #f8fdff 100%);
  background-size: 420% 100%;
  filter: drop-shadow(0 0 5px rgba(93, 219, 255, .62));
  animation: orbit-prism 8s linear infinite, orbit-color-breathe 2.8s ease-in-out infinite;
  transition: letter-spacing .45s var(--studio-spring), filter .35s ease;
}
.orbit-mark__i {
  position: relative;
  display: inline-block;
}
.orbit-mark:hover .orbit-mark__line--shine,
.orbit-mark:focus-visible .orbit-mark__line--shine,
.orbit-widget.is-dragging .orbit-mark__line--shine {
  animation-duration: 2.2s, 1.25s;
  letter-spacing: .18em;
  filter: drop-shadow(0 0 9px rgba(113, 227, 255, .95)) drop-shadow(0 0 18px rgba(157, 123, 255, .44));
}
@keyframes orbit-silver { to { background-position: -240% 0; } }
@keyframes orbit-prism { to { background-position: -420% 0; } }
@keyframes orbit-color-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(98, 231, 255, .52)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 159, 207, .75)); }
}

.orbit-spark {
  position: absolute;
  z-index: 3;
  color: #e9fbff;
  font: 700 .88rem/1 serif;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 7px #62e7ff);
  animation: orbit-sparkle 2.65s ease-in-out infinite;
}
.orbit-spark--one { left: 7%; top: 10%; animation-delay: -.5s; }
.orbit-spark--two { right: 10%; top: 4%; font-size: .74rem; animation-delay: -1.7s; }
.orbit-spark--three { right: 25%; bottom: 8%; font-size: .62rem; animation-delay: -.95s; }
.orbit-mark:hover .orbit-spark,
.orbit-mark:focus-visible .orbit-spark,
.orbit-widget.is-dragging .orbit-spark,
.orbit-widget.is-tap-spinning .orbit-spark { animation-duration: 1.05s; filter: drop-shadow(0 0 10px #62e7ff) drop-shadow(0 0 18px rgba(47,142,255,.68)); }
.orbit-widget.is-bursting .orbit-spark { animation: orbit-spark-burst .82s var(--studio-spring) both; }
.orbit-widget.is-bursting .orbit-spark--two { animation-delay: .08s; }
.orbit-widget.is-bursting .orbit-spark--three { animation-delay: .15s; }
@keyframes orbit-sparkle {
  0%, 42%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  56% { opacity: 1; transform: scale(1.65) rotate(45deg); }
  72% { opacity: .58; transform: scale(.9) rotate(82deg); }
  86% { opacity: 0; transform: scale(.35) rotate(120deg); }
}
@keyframes orbit-spark-burst {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: 1; transform: scale(2.6) rotate(90deg); }
  100% { opacity: 0; transform: scale(.5) rotate(180deg); }
}
.orbit-mark__hint {
  position: relative;
  z-index: 1;
  font: 650 .54rem/1 Outfit, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(191,238,255,.76);
}
.orbit-mark__drop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .13em);
  display: block;
  width: .48em;
  height: .6em;
  translate: -50% 0;
  rotate: 45deg;
  border-radius: 0 58% 58% 58%;
  background: linear-gradient(135deg, #dff8ff, #35c7f0 56%, #0a75c9);
  box-shadow: 0 0 12px rgba(127,224,247,.72);
}
@keyframes orbit-chrome { to { background-position: -180% 0; } }

.orbit-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.orbit-menu a {
  position: absolute;
  left: 0;
  top: 0;
  min-width: max-content;
  padding: .58rem .8rem;
  border: 1px solid rgba(127,224,247,.35);
  border-radius: 999px;
  background: rgba(4,16,30,.92);
  box-shadow: 0 10px 24px rgba(2,8,18,.45);
  color: #eef9ff;
  font: 700 .72rem/1 Outfit, sans-serif;
  letter-spacing: .07em;
  text-decoration: none;
  opacity: 0;
  scale: .65;
  translate: -50% -50%;
  transition: opacity .26s ease, scale .42s var(--studio-spring), transform .42s var(--studio-spring), border-color .2s ease;
}
.orbit-menu a:hover,
.orbit-menu a:focus-visible { border-color: #7fe0f7; color: #7fe0f7; }
.orbit-menu a:nth-child(1) { transform: translate(-108px, 64px); }
.orbit-menu a:nth-child(2) { transform: translate(0, 88px); }
.orbit-menu a:nth-child(3) { transform: translate(108px, 64px); }
.orbit-widget[data-menu-side="left"] .orbit-menu a:nth-child(1) { transform: translate(-184px, -8px); }
.orbit-widget[data-menu-side="left"] .orbit-menu a:nth-child(2) { transform: translate(-146px, 55px); }
.orbit-widget[data-menu-side="left"] .orbit-menu a:nth-child(3) { transform: translate(-54px, 82px); }
.orbit-widget[data-menu-side="right"] .orbit-menu a:nth-child(1) { transform: translate(54px, 82px); }
.orbit-widget[data-menu-side="right"] .orbit-menu a:nth-child(2) { transform: translate(146px, 55px); }
.orbit-widget[data-menu-side="right"] .orbit-menu a:nth-child(3) { transform: translate(184px, -8px); }
.orbit-widget.is-open .orbit-menu { pointer-events: auto; }
.orbit-widget.is-open .orbit-menu a { opacity: 1; scale: 1; }
.orbit-widget.is-tap-spinning .orbit-menu { pointer-events: none; }
.orbit-widget.is-tap-spinning .orbit-menu a {
  opacity: 0;
  scale: .72;
  transition-duration: .14s;
}

/* A kinetic, lettered light-ribbon replaces the generic drag ripple. */
.orbit-ribbon {
  position: fixed;
  inset: 0;
  z-index: 207;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .4s;
  contain: strict;
}
.orbit-ribbon.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.orbit-ribbon.is-recoiling { opacity: .82; }
.orbit-ribbon__canvas,
.orbit-ribbon__letters { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-ribbon__canvas { filter: saturate(1.18); }
.orbit-ribbon__segment {
  --trail-x: 0px;
  --trail-y: 0px;
  --trail-angle: 0deg;
  --trail-alpha: 0;
  --trail-scale: 1;
  position: fixed;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(221, 249, 255, .48);
  border-radius: 58% 42% 54% 46%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.82), transparent 19%),
    conic-gradient(from calc(var(--trail-index) * 22deg), rgba(77,218,255,.88), rgba(128,92,255,.78), rgba(255,172,106,.76), rgba(77,218,255,.88));
  box-shadow: inset 0 0 8px rgba(255,255,255,.28), 0 0 13px rgba(80,210,255,.38);
  color: rgba(255,255,255,.94);
  font: 750 .58rem/1 Outfit, sans-serif;
  text-shadow: 0 1px 4px rgba(4,16,30,.72);
  opacity: var(--trail-alpha);
  transform: translate3d(var(--trail-x), var(--trail-y), 0) translate(-50%, -50%) rotate(var(--trail-angle)) scale(var(--trail-scale));
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.orbit-ribbon__segment:nth-child(3n) { width: 18px; height: 18px; border-radius: 42% 58% 46% 54%; }
.orbit-ribbon__segment:nth-child(4n) { width: 26px; height: 20px; }
.orbit-ribbon.is-recoiling .orbit-ribbon__segment { filter: brightness(1.18); }

/* A periodic gold-prism glint keeps the Strong Spas launch feeling new. */
.nav-newtag {
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 rgba(255,190,89,0);
  transform-style: preserve-3d;
  animation: nav-newtag-attention 3.8s ease-in-out infinite;
}
.nav-newtag::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -80%;
  bottom: -80%;
  left: -115%;
  width: 58%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.2) 25%, rgba(255,255,255,.95) 50%, rgba(255,245,201,.35) 72%, transparent);
  rotate: 12deg;
  mix-blend-mode: screen;
  animation: nav-newtag-shimmer 3.8s ease-in-out infinite;
}
.nav-strong:hover .nav-newtag,
.nav-strong:focus-visible .nav-newtag { animation-duration: 1.8s; }
.nav-strong:hover .nav-newtag::before,
.nav-strong:focus-visible .nav-newtag::before { animation-duration: 1.8s; }
@keyframes nav-newtag-attention {
  0%, 68%, 100% { transform: perspective(120px) rotateY(0) scale(1); box-shadow: 0 0 0 rgba(255,190,89,0); filter: brightness(1); }
  76% { transform: perspective(120px) rotateY(15deg) scale(1.08); box-shadow: 0 0 12px rgba(255,190,89,.75); filter: brightness(1.22); }
  84% { transform: perspective(120px) rotateY(-8deg) scale(1.04); box-shadow: 0 0 18px rgba(255,218,138,.58); filter: brightness(1.1); }
  92% { transform: perspective(120px) rotateY(0) scale(1); box-shadow: 0 0 4px rgba(255,190,89,.25); filter: brightness(1); }
}
@keyframes nav-newtag-shimmer {
  0%, 66% { left: -115%; opacity: 0; }
  70% { opacity: .9; }
  88% { left: 155%; opacity: .72; }
  89%, 100% { left: 155%; opacity: 0; }
}

/* The homepage dealer-strip launch badge shares the header's gold-prism signal. */
.dealer-strip__new {
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 rgba(255,190,89,0);
  transform-style: preserve-3d;
  animation: nav-newtag-attention 3.8s ease-in-out infinite;
}
.dealer-strip__new::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -80%;
  bottom: -80%;
  left: -115%;
  width: 58%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.2) 25%, rgba(255,255,255,.95) 50%, rgba(255,245,201,.35) 72%, transparent);
  rotate: 12deg;
  mix-blend-mode: screen;
  animation: nav-newtag-shimmer 3.8s ease-in-out infinite;
}
.dealer-strip:hover .dealer-strip__new,
.dealer-strip:focus-within .dealer-strip__new,
.dealer-strip:hover .dealer-strip__new::before,
.dealer-strip:focus-within .dealer-strip__new::before { animation-duration: 1.8s; }

/* ---------- Strong Spas collection mega-menu ---------- */
@media (min-width: 1275px) {
  .nav-links .strong-menu { position: static; }
  .nav-links .strong-menu > .nav-strong { position: relative; display: inline-flex; align-items: center; gap: .28rem; }
  .nav-links .strong-menu > .nav-strong::before {
    content: "";
    position: absolute;
    top: 100%;
    right: -.85rem;
    left: -.85rem;
    height: 26px;
  }
  .strong-menu__caret {
    width: 7px;
    height: 7px;
    margin: -.18rem 0 0 .05rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    transition: rotate .3s var(--ease-soft), translate .3s var(--ease-soft);
  }
  .strong-menu:hover .strong-menu__caret,
  .strong-menu:focus-within .strong-menu__caret,
  .strong-menu.is-open .strong-menu__caret { rotate: 225deg; translate: 0 3px; }

  .strong-mega-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 70;
    display: block;
    background: rgba(2, 8, 18, .54);
    backdrop-filter: blur(3px) saturate(.82);
    -webkit-backdrop-filter: blur(3px) saturate(.82);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease, visibility .32s;
  }
  .strong-mega {
    position: fixed;
    top: calc(var(--header-h) - 1px);
    right: clamp(.75rem, 1.35vw, 1.6rem);
    z-index: 72;
    display: grid;
    grid-template-columns: 270px minmax(320px, 350px) minmax(390px, 1fr);
    width: min(1080px, calc(100vw - 2.5rem));
    min-height: 390px;
    max-height: calc(100vh - var(--header-h) - 1.25rem);
    overflow: hidden;
    color: #fff;
    background: rgba(5, 15, 29, .98);
    border: 1px solid rgba(127, 224, 247, .28);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 34px 90px rgba(1, 6, 15, .7), 0 0 55px rgba(53, 199, 240, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(.985);
    transform-origin: 88% 0;
    transition: opacity .28s ease, transform .4s var(--ease-soft), visibility .28s;
  }
  .strong-menu:hover > .strong-mega,
  .strong-menu:focus-within > .strong-mega,
  .strong-menu.is-open > .strong-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .strong-menu:hover > .strong-mega-backdrop,
  .strong-menu:focus-within > .strong-mega-backdrop,
  .strong-menu.is-open > .strong-mega-backdrop { opacity: 1; visibility: visible; }

  .strong-mega a::after { display: none !important; }
  .strong-mega__rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.55rem 1.15rem 1.15rem;
    background:
      radial-gradient(circle at 18% 10%, rgba(53, 199, 240, .15), transparent 34%),
      linear-gradient(160deg, #102e49, #071827 70%);
    border-right: 1px solid rgba(255,255,255,.09);
  }
  .strong-mega__eyebrow {
    margin: 0 0 .75rem .7rem;
    color: var(--aqua-300);
    font: 750 .68rem/1 var(--font-display);
    letter-spacing: .19em;
    text-transform: uppercase;
  }
  .strong-mega__series { display: grid; gap: .12rem; }
  .strong-mega__series button {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: .46rem .72rem .46rem .9rem;
    border: 0;
    border-radius: 9px;
    color: rgba(232, 242, 251, .7);
    background: transparent;
    font: 680 clamp(.82rem, .82vw, .92rem)/1.15 var(--font-display);
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, translate .25s var(--ease-soft);
  }
  .strong-mega__series button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 99px;
    translate: 0 -50%;
    background: linear-gradient(180deg, var(--aqua-300), #8a72ff);
    box-shadow: 0 0 14px rgba(53,199,240,.7);
    transition: height .24s var(--ease-soft);
  }
  .strong-mega__series button:hover,
  .strong-mega__series button:focus-visible,
  .strong-mega__series button[aria-selected="true"] {
    color: #fff;
    background: rgba(127, 224, 247, .1);
    translate: 4px 0;
    outline: none;
  }
  .strong-mega__series button[aria-selected="true"]::before { height: 66%; }
  .nav-links .strong-mega__all {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding: .75rem .7rem .15rem;
    color: var(--gold-300);
    font-size: .76rem;
    font-weight: 700;
  }
  .nav-links .strong-mega__all:hover { color: #fff; }

  .strong-mega__visual {
    position: relative;
    min-width: 0;
    min-height: 390px;
    margin: 0;
    overflow: hidden;
    background: #dfe9ee;
  }
  .strong-mega__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 56%, rgba(3, 12, 24, .72));
    pointer-events: none;
  }
  .strong-mega__visual img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
    transform: scale(1.025);
    opacity: 1;
    transition: opacity .18s ease, transform .65s var(--ease-soft), filter .25s ease;
  }
  .strong-mega__visual.is-changing img { opacity: .18; transform: scale(1.075); filter: blur(3px); }
  .strong-mega__visual figcaption {
    position: absolute;
    left: 1.15rem;
    bottom: 1rem;
    z-index: 2;
    color: rgba(255,255,255,.82);
    font: 650 .66rem/1 var(--font-display);
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .strong-mega__detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.65rem 1.8rem 1.45rem;
    color: #0b2342;
    background:
      radial-gradient(circle at 90% 5%, rgba(53,199,240,.12), transparent 34%),
      rgba(247, 250, 252, .985);
    opacity: 1;
    transition: opacity .16s ease, translate .25s var(--ease-soft);
  }
  .strong-mega__detail.is-changing { opacity: .36; translate: 8px 0; }
  .strong-mega__brand {
    margin: 0 0 .8rem;
    color: #246fae;
    font: 750 .7rem/1 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .strong-mega__brand span { padding-inline: .35rem; color: #7d8c99; }
  .strong-mega__tier {
    margin: 0 0 .3rem;
    color: #50708c;
    font: 750 .67rem/1 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .strong-mega__detail h2 {
    margin: 0;
    color: #071a2e;
    font: 800 clamp(1.7rem, 2vw, 2.2rem)/1.02 var(--font-display);
    letter-spacing: -.035em;
  }
  .strong-mega__price {
    margin: .45rem 0 .8rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(11,35,66,.14);
    color: #147fc2;
    font: 760 .9rem/1.2 var(--font-display);
  }
  .strong-mega__description { margin: 0 0 .8rem; color: #39536b; font-size: .84rem; line-height: 1.45; }
  .strong-mega__specs { display: grid; gap: .42rem; margin: 0; padding: 0; list-style: none; }
  .strong-mega__specs li {
    position: relative;
    padding-left: 1.25rem;
    color: #193a57;
    font: 620 .78rem/1.25 var(--font-display);
  }
  .strong-mega__specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3em;
    width: 7px;
    height: 7px;
    border: 2px solid #35aeda;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(53,174,218,.12);
  }
  .strong-mega__actions { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1rem; }
  .nav-links .strong-mega__primary,
  .nav-links .strong-mega__quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .72rem 1rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 760;
    text-align: center;
  }
  .nav-links .strong-mega__primary { color: #fff; background: linear-gradient(135deg, #117ec3, #31b8de); box-shadow: 0 9px 20px rgba(17,126,195,.2); }
  .nav-links .strong-mega__primary:hover { color: #fff; filter: brightness(1.08); translate: 0 -2px; }
  .nav-links .strong-mega__quote { color: #163e5f; border: 1px solid rgba(22,62,95,.28); }
  .nav-links .strong-mega__quote:hover { color: #0a78b8; border-color: rgba(10,120,184,.55); }
}

@media (max-width: 1274px) {
  .strong-mega,
  .strong-mega-backdrop,
  .strong-menu__caret { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .strong-mega,
  .strong-mega-backdrop,
  .strong-mega__visual img,
  .strong-mega__detail,
  .strong-mega__series button { transition: none; }
}

/* One entrance signature for the home wordmark: the droplet releases a
   lettered current that draws a still illuminated underline from right to left. */
.home-brand-ribbon {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  contain: strict;
  transition: opacity .45s ease;
}
.home-brand-ribbon.is-entering { opacity: .86; }
.home-brand-ribbon.is-settled { opacity: .72; }
.home-brand-ribbon__canvas,
.home-brand-ribbon__letters { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-brand-ribbon__canvas { filter: saturate(1.22) brightness(1.05); }
.home-brand-ribbon__segment {
  --trail-x: 0px;
  --trail-y: 0px;
  --trail-angle: 0deg;
  --trail-alpha: 0;
  --trail-scale: 1;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(226, 250, 255, .46);
  border-radius: 58% 42% 54% 46%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.84), transparent 19%),
    conic-gradient(from calc(var(--trail-index) * 22deg), rgba(77,218,255,.84), rgba(128,92,255,.72), rgba(255,172,106,.7), rgba(77,218,255,.84));
  box-shadow: inset 0 0 7px rgba(255,255,255,.24), 0 0 13px rgba(80,210,255,.34);
  color: rgba(255,255,255,.92);
  font: 750 .52rem/1 Outfit, sans-serif;
  text-shadow: 0 1px 4px rgba(4,16,30,.72);
  opacity: var(--trail-alpha);
  transform: translate3d(var(--trail-x), var(--trail-y), 0) translate(-50%, -50%) rotate(var(--trail-angle)) scale(var(--trail-scale));
  mix-blend-mode: screen;
  transition: opacity .45s ease;
  will-change: transform, opacity;
}
.home-brand-ribbon.is-settled .home-brand-ribbon__segment { opacity: 0 !important; }
.home-brand-ribbon__segment:nth-child(3n) { width: 16px; height: 16px; border-radius: 42% 58% 46% 54%; }
.home-brand-ribbon__segment:nth-child(4n) { width: 23px; height: 17px; }

/* The water drop is the source of the home entrance current. */
.hero-brandmark .bl--drop.is-emitting::after {
  animation: brand-drop-emission 1.25s cubic-bezier(.2, .82, .25, 1) both;
}
@keyframes brand-drop-emission {
  0% { scale: .82; filter: brightness(1.05) drop-shadow(0 0 5px rgba(127,224,247,.5)); }
  34% { scale: 1.28; filter: brightness(1.65) drop-shadow(0 0 22px rgba(127,224,247,1)); }
  72% { scale: 1.04; filter: brightness(1.2) drop-shadow(0 0 12px rgba(127,224,247,.78)); }
  100% { scale: 1; filter: drop-shadow(0 0 8px rgba(127,224,247,.6)); }
}

/* ---------- Touch/mouse water impulses ---------- */
.studio-ripple {
  position: fixed;
  left: var(--ripple-x, 0px);
  top: var(--ripple-y, 0px);
  width: var(--ripple-size, 56px);
  height: var(--ripple-size, 56px);
  translate: -50% -50%;
  pointer-events: none;
  z-index: 205;
  border: 1.5px solid rgba(191,238,255,.86);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(53,199,240,.42), inset 0 0 12px rgba(127,224,247,.24);
  mix-blend-mode: screen;
  animation: studio-ripple-out .82s ease-out forwards;
}
.studio-ripple::after {
  content: "";
  position: absolute;
  inset: 28%;
  border: 1px solid rgba(127,224,247,.7);
  border-radius: inherit;
}
@keyframes studio-ripple-out {
  0% { opacity: .9; scale: .45; }
  100% { opacity: 0; scale: 5.2; }
}

/* ---------- Physical card motion ---------- */
.studio-tilt {
  --studio-rx: 0deg;
  --studio-ry: 0deg;
  --studio-lift: 0px;
  transform: perspective(950px) rotateX(var(--studio-rx)) rotateY(var(--studio-ry)) translate3d(0, var(--studio-lift), 0);
  transform-style: preserve-3d;
  transition: transform .6s var(--studio-spring), filter .35s ease, box-shadow .4s ease;
  will-change: transform;
}
.studio-tilt.is-tilting {
  transition: transform .06s linear, filter .2s ease, box-shadow .2s ease;
  filter: saturate(1.06) brightness(1.035);
  box-shadow: 0 24px 65px rgba(2,8,18,.54), 0 0 28px rgba(53,199,240,.11);
}
.studio-tilt.is-pressed { --studio-lift: -4px; filter: brightness(1.08); }
.studio-tilt > * { transform: translateZ(0); }
.studio-tilt.is-tilting > h3,
.studio-tilt.is-tilting > .product-card__body,
.studio-tilt.is-tilting > .fact-flip__inner { transform: translateZ(12px); }

/* Magnetic motion is reserved for conversion and dealer controls. */
.studio-magnetic {
  --mag-x: 0px;
  --mag-y: 0px;
  --mag-mx: 50%;
  --mag-my: 50%;
  translate: var(--mag-x) var(--mag-y);
  transition: translate .55s var(--studio-spring), filter .35s ease, box-shadow .35s ease;
  will-change: translate;
}
.studio-magnetic.is-magnetic {
  transition: translate .07s linear, filter .2s ease, box-shadow .2s ease;
  filter: brightness(1.08) saturate(1.08);
}

/* Horizontally grabbed motion rails. Desktop remains a grid. */
.studio-rail { position: relative; }
.studio-grab-strip { cursor: grab; overscroll-behavior-inline: contain; }
.studio-grab-strip.is-grabbing { cursor: grabbing; scroll-snap-type: none !important; }
.studio-grab-strip.is-grabbing .photo-marquee__track,
.studio-grab-strip.is-grabbing .review-track { animation-play-state: paused !important; }

/* ---------- Before/after controls ---------- */
.ba input[type="range"]:focus-visible,
.ba-slider input[type="range"]:focus-visible {
  outline: 3px solid #7fe0f7;
  outline-offset: -5px;
  border-radius: inherit;
}
.ba.is-scrubbing,
.ba-slider.is-scrubbing { box-shadow: 0 28px 70px rgba(2,8,18,.6), 0 0 0 1px rgba(127,224,247,.6); }
.ba-slider__handle { transition: scale .3s var(--studio-spring), box-shadow .3s ease; }
.ba-slider.is-scrubbing .ba-slider__handle { scale: 1.18; box-shadow: 0 0 0 7px rgba(53,199,240,.18), 0 10px 28px rgba(2,8,18,.55); }

/* ---------- Restrained desktop hero cleanup ---------- */
@media (min-width: 901px) {
  /* Give the primary headline and floating brand lockup separate visual lanes.
     The complete lockup shares one center axis after the scale correction. */
  .hero-brandmark {
    top: 15.5%;
    left: 66%;
  }
  .hero-brandmark__word {
    gap: clamp(.85rem, 1.8vw, 1.45rem);
    font-size: clamp(2.4rem, 5.55vw, 5.15rem);
  }

  /* The copy layer is visually transparent over the right side of the hero.
     Let the dealer controls below it receive input while preserving every CTA. */
  .hero__content { pointer-events: none; }
  .hero__content a,
  .hero__content button,
  .hero__content input,
  .hero__content select,
  .hero__content textarea,
  .hero__content [tabindex] { pointer-events: auto; }

  /* Keep the original dealer actions in the wordmark's center line. The parent
     is deliberately invisible; only the two intended controls read as pills. */
  .hero-brandmark .hero-dealer {
    position: relative;
    top: -.2rem;
    right: auto;
    left: 0;
    width: auto;
    margin: .78rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: auto;
  }
  .hero-brandmark .hero-dealer__line {
    margin-bottom: .38rem;
    font-size: clamp(.82rem, 1.05vw, .98rem);
    letter-spacing: .015em;
  }
  .hero-brandmark .dealer-brands {
    display: inline-block;
    width: auto;
    pointer-events: auto;
    isolation: isolate;
  }
  .hero-brandmark .dealer-brands summary {
    justify-content: center;
    min-width: clamp(218px, 19vw, 250px);
    padding: .43rem .82rem;
    font-size: .76rem;
    background:
      radial-gradient(circle at var(--mag-mx, 50%) var(--mag-my, 50%), rgba(127,224,247,.18), transparent 48%),
      rgba(4,11,22,.35);
  }
  .hero-brandmark .dealer-brands__panel {
    right: auto;
    left: 50%;
    top: calc(100% + .62rem);
    width: min(410px, 70vw);
    transform: translateX(-50%);
    text-align: left;
  }
  .hero-brandmark .hero-strong {
    position: relative;
    top: -.2rem;
    right: auto;
    left: 0;
    z-index: 4;
    justify-content: center;
    width: fit-content;
    min-width: clamp(218px, 19vw, 250px);
    margin: .48rem auto 0;
    padding: .34rem .78rem .34rem .48rem;
    pointer-events: auto;
    isolation: isolate;
  }
  .hero-brandmark .hero-strong img { height: 16px; }
  .hero-brandmark .hero-strong span { font-size: .72rem; }
}

@media (max-width: 900px) {
  .home-brand-ribbon.is-entering { opacity: .64; }
  .home-brand-ribbon.is-settled { opacity: .58; }
  .home-brand-ribbon__segment { width: 15px; height: 15px; font-size: .44rem; }
  .home-brand-ribbon__segment:nth-child(3n) { width: 12px; height: 12px; }
  .home-brand-ribbon__segment:nth-child(4n) { width: 18px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-brand-ribbon { display: none; }
  .studio-magnetic { translate: 0 0; }
}

/* ---------- Bright closing chapter ----------
   The city stories finish in luminous water and sunrise color instead of
   falling into a near-black footer. Text retains localized shadow/contrast. */
.section--night:has(.cta-band) {
  background:
    radial-gradient(900px 430px at 50% 4%, rgba(53, 199, 240, .20), transparent 62%),
    radial-gradient(700px 360px at 82% 16%, rgba(255, 196, 107, .14), transparent 62%),
    linear-gradient(180deg, #0b3558 0%, #0a2b49 56%, #081f38 100%);
}

.cta-band {
  background:
    radial-gradient(700px 300px at 74% 14%, rgba(255, 210, 132, .20), transparent 55%),
    linear-gradient(180deg, rgba(6, 15, 29, .48) 0%, rgba(6, 15, 29, .32) 48%, rgba(6, 15, 29, .58) 100%),
    url('/assets/img/hero/hero-sunrise-acrylic-1280.jpg') center 62% / cover no-repeat;
  border-color: rgba(255, 214, 145, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 92px rgba(53, 199, 240, .17),
    0 24px 68px rgba(2, 10, 22, .34);
}

.cta-band h2 {
  text-shadow: 0 3px 22px rgba(2, 8, 18, .82), 0 1px 4px rgba(2, 8, 18, .95);
}

.cta-band .lead {
  color: rgba(240, 249, 255, .91);
  text-shadow: 0 2px 14px rgba(2, 8, 18, .88);
}

.site-footer {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(820px 480px at 12% 0%, rgba(53, 199, 240, .22), transparent 62%),
    radial-gradient(720px 420px at 88% 3%, rgba(255, 196, 107, .15), transparent 62%),
    linear-gradient(155deg, #0d3b61 0%, #0a2d4d 48%, #071d35 100%);
  color: rgba(229, 244, 253, .87);
  border-top: 1px solid rgba(127, 224, 247, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(53, 199, 240, .82), rgba(255, 196, 107, .82), transparent);
  box-shadow: 0 0 24px rgba(53, 199, 240, .38);
}

.footer-watermark {
  background: linear-gradient(180deg, #fff8dc 0%, #ffd48a 38%, #ffc05e 68%, #d98d31 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .25;
  filter: drop-shadow(0 0 30px rgba(255, 196, 107, .22));
}

.footer-grid {
  position: relative;
  z-index: 1;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border: 1px solid rgba(191, 238, 255, .15);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 55px rgba(2, 10, 22, .18);
}

.site-footer h3 {
  color: #f2fbff;
  text-shadow: 0 0 18px rgba(53, 199, 240, .24);
}

.site-footer a,
.footer-brand p {
  color: rgba(229, 244, 253, .86);
}

.site-footer a:hover {
  color: #8deaff;
  text-shadow: 0 0 14px rgba(53, 199, 240, .34);
}

.footer-bottom {
  color: rgba(216, 236, 249, .76);
  border-top-color: rgba(191, 238, 255, .20);
}

@supports not selector(:has(*)) {
  main > .section--night:last-child {
    background:
      radial-gradient(900px 430px at 50% 4%, rgba(53, 199, 240, .20), transparent 62%),
      linear-gradient(180deg, #0b3558 0%, #081f38 100%);
  }
}

@media (min-width: 1100px) {
  .hero-brandmark { max-width: min(58vw, 760px); }
  .hero-brandmark__glow { opacity: .82; }
  .hero__content { z-index: 3; }
  .hero__lead { max-width: 59ch; }
}

/* ---------- Mobile pacing and reliability ---------- */
@media (max-width: 900px) {
  /* Mobile content never waits invisibly for an observer or smooth-scroll frame. */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal-stagger,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-parallax] { transform: none !important; will-change: auto; }

  /* Skip layout work for the long homepage chapters until they approach the
     viewport. Accurate intrinsic fallbacks preserve scroll length and prevent
     the jumps caused by a one-size-fits-all placeholder. */
  .film-section,
  #showcase,
  #mobile-service,
  #transformations,
  #reviews,
  #service-area,
  #products-home,
  #spa-weather {
    content-visibility: auto;
  }
  .film-section { contain-intrinsic-size: auto 826px; }
  #showcase { contain-intrinsic-size: auto 734px; }
  #mobile-service { contain-intrinsic-size: auto 952px; }
  #transformations { contain-intrinsic-size: auto 1708px; }
  #reviews { contain-intrinsic-size: auto 1155px; }
  #service-area { contain-intrinsic-size: auto 1331px; }
  #products-home { contain-intrinsic-size: auto 1540px; }
  #spa-weather { contain-intrinsic-size: auto 1173px; }
  .section--day,
  .section--dawn,
  .section--mist,
  .section--night { background-attachment: scroll !important; }

  .section { padding-block: clamp(3.4rem, 14vw, 5.25rem); }
  .page-hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + 2.8rem);
    padding-bottom: 3.25rem;
  }
  .page-hero h1 { max-width: 15ch; }

  /* Long card stories become one swipeable chapter instead of six screens. */
  .studio-rail {
    display: flex !important;
    gap: 1rem !important;
    width: calc(100% + 2.5rem);
    margin-inline: -1.25rem;
    padding: .25rem 1.25rem 1.15rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .studio-rail::-webkit-scrollbar { display: none; }
  .studio-rail > * {
    flex: 0 0 min(82vw, 370px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .studio-rail::after {
    content: "Swipe →";
    flex: 0 0 4.5rem;
    align-self: center;
    color: rgba(191,238,255,.72);
    font: 700 .72rem/1 Outfit, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  #transformations .card-grid,
  #products-home .card-grid,
  .page-hero--gallery + .section .card-grid { align-items: stretch; }

  .orbit-widget { width: min(244px, calc(100vw - 24px)); }
  .orbit-mark { min-height: 54px; padding: 0; }
  .orbit-mark__face { padding: .62rem .88rem .4rem; }
  .orbit-mark__brand { gap: .52em; padding-top: .12rem; }
  .orbit-mark__line { font-size: clamp(.7rem, 3vw, .82rem); }
  .orbit-mark__hint { font-size: .46rem; letter-spacing: .1em; }
  .orbit-ribbon__segment { width: 19px; height: 19px; font-size: .5rem; }
  .orbit-menu a { padding: .5rem .67rem; font-size: .66rem; }
  .orbit-menu a:nth-child(1) { transform: translate(-80px, 58px); }
  .orbit-menu a:nth-child(2) { transform: translate(0, 80px); }
  .orbit-menu a:nth-child(3) { transform: translate(80px, 58px); }
  .orbit-widget[data-menu-side="left"] .orbit-menu a:nth-child(1) { transform: translate(-138px, -4px); }
  .orbit-widget[data-menu-side="left"] .orbit-menu a:nth-child(2) { transform: translate(-108px, 47px); }
  .orbit-widget[data-menu-side="left"] .orbit-menu a:nth-child(3) { transform: translate(-34px, 68px); }
  .orbit-widget[data-menu-side="right"] .orbit-menu a:nth-child(1) { transform: translate(34px, 68px); }
  .orbit-widget[data-menu-side="right"] .orbit-menu a:nth-child(2) { transform: translate(108px, 47px); }
  .orbit-widget[data-menu-side="right"] .orbit-menu a:nth-child(3) { transform: translate(138px, -4px); }

  .contact-booking-focus { scroll-margin-top: calc(var(--header-h) + 1rem); }
  .jobber-embed,
  iframe[src*="clienthub.getjobber.com"] { max-width: 100%; }
}

/* The narrow-header edge case: preserve the menu, sacrifice repeated phone text. */
@media (max-width: 360px) {
  .site-header .nav-bar { gap: .45rem; }
  .site-header .brand img { height: 18px !important; max-width: 132px; }
  .site-header .nav-phone { display: none !important; }
  .site-header .nav-cta { margin-left: auto; gap: .15rem; }
  .site-header .nav-toggle { display: block; margin-left: auto; padding: .5rem; }
  .action-bar { gap: .4rem; padding-inline: .5rem; }
  .action-bar a { font-size: .84rem; padding-inline: .25rem; }
}

@media (pointer: coarse) {
  .cursor-glow { display: none !important; }
  .orbit-mark { cursor: grab; }
  .studio-tilt { transform: none; }
  .studio-tilt.is-pressed { transform: translateY(-3px) scale(.985); }
}

@media (max-width: 900px) {
  .nav-drawer.is-open ~ .orbit-widget {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .studio-transition,
  .studio-arrival-current,
  .studio-current__segment,
  .studio-current__drop,
  .nav-newtag,
  .nav-newtag::before,
  .dealer-strip__new,
  .dealer-strip__new::before,
  .orbit-widget,
  .orbit-widget.is-current-catch .orbit-mark,
  .orbit-widget.is-current-catch .orbit-mark__rotor,
  .orbit-widget.is-current-catch .orbit-mark::before,
  .orbit-widget.is-current-catch .orbit-mark__drop,
  .orbit-mark__line,
  .orbit-spark,
  .orbit-ribbon,
  .studio-ripple,
  .studio-tilt { animation: none !important; transition-duration: .01ms !important; }
  .orbit-widget.is-arrived { opacity: 1; }
  .studio-arrival-current { display: none !important; }
  .orbit-ribbon { display: none !important; }
  .studio-ripple { display: none; }
}

/* ---------- Studio navigation panels ---------- */
.studio-nav-panel__intro,
.studio-nav-panel__arrow { display: none; }

@media (min-width: 1275px) {
  .nav-links .studio-menu::after {
    right: -.9rem;
    left: -.9rem;
    height: 28px;
  }
  .nav-links .studio-menu > a { position: relative; }
  .nav-links .studio-menu > a::before {
    content: "";
    position: absolute;
    right: 45%;
    bottom: -.72rem;
    left: 45%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--aqua-300), transparent);
    box-shadow: 0 0 14px rgba(53,199,240,.8);
    opacity: 0;
    transition: right .3s var(--ease-soft), left .3s var(--ease-soft), opacity .25s ease;
  }
  .nav-links .studio-menu:hover > a::before,
  .nav-links .studio-menu:focus-within > a::before {
    right: 7%;
    left: 7%;
    opacity: .9;
  }

  .nav-links .studio-nav-panel {
    top: calc(100% + 18px);
    display: grid;
    gap: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(127,224,247,.28);
    border-radius: 3px 3px 20px 20px;
    background:
      radial-gradient(circle at 14% 0, rgba(53,199,240,.15), transparent 34%),
      linear-gradient(145deg, rgba(14,39,65,.985), rgba(4,14,27,.99) 62%);
    box-shadow: 0 30px 74px rgba(1,6,15,.68), 0 0 42px rgba(53,199,240,.1);
    transform: translateY(14px) scale(.985);
    transform-origin: 24% 0;
    isolation: isolate;
    transition: opacity .24s ease, transform .38s var(--ease-soft), visibility .24s;
  }
  .nav-links .studio-nav-panel::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0 12%, rgba(127,224,247,.35) 28%, #fff 43%, rgba(92,195,255,.9) 54%, transparent 74% 100%);
    background-size: 240% 100%;
    opacity: .82;
    animation: studio-panel-glimmer 5.8s ease-in-out infinite;
    pointer-events: none;
  }
  .nav-links .studio-nav-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -12%;
    bottom: -34%;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(127,224,247,.09);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(127,224,247,.025), 0 0 0 68px rgba(127,224,247,.018);
    pointer-events: none;
  }
  .nav-links .studio-menu:hover > .studio-nav-panel,
  .nav-links .studio-menu:focus-within > .studio-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .nav-links .studio-nav-panel--services {
    left: -1rem;
    width: 486px;
    grid-template-columns: 1fr 1fr;
  }
  .nav-links .studio-nav-panel--areas {
    left: 50%;
    width: 536px;
    margin-left: -268px;
    grid-template-columns: 1fr 1fr;
    transform-origin: 50% 0;
  }
  .nav-links .studio-nav-panel--about {
    right: -.8rem;
    left: auto;
    width: 392px;
    grid-template-columns: 1fr;
    transform-origin: 84% 0;
  }

  .studio-nav-panel__intro {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    gap: .34rem;
    padding: 1.2rem 1.25rem 1.05rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(127,224,247,.14);
    background:
      linear-gradient(90deg, rgba(53,199,240,.085), transparent 68%),
      rgba(255,255,255,.018);
  }
  .studio-nav-panel__eyebrow {
    color: var(--aqua-300);
    font: 760 .62rem/1 var(--font-display);
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .studio-nav-panel__intro strong {
    max-width: 30ch;
    color: #fff;
    font: 760 1.04rem/1.14 var(--font-display);
    letter-spacing: -.018em;
  }
  .studio-nav-panel__note {
    max-width: 52ch;
    color: rgba(220,237,249,.65);
    font-size: .7rem;
    line-height: 1.42;
  }
  .studio-nav-panel__signal {
    position: absolute;
    top: 1.22rem;
    right: 1.15rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: rgba(205,240,249,.58);
    font: 680 .52rem/1 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .studio-nav-panel__signal i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--aqua-300);
    box-shadow: 0 0 8px rgba(127,224,247,.8);
  }
  .studio-nav-panel__signal i:last-child { opacity: .34; }

  .studio-nav-panel__item {
    position: relative;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .22s ease calc(var(--nav-row) * 22ms + 50ms), transform .34s var(--ease-soft) calc(var(--nav-row) * 22ms + 50ms);
  }
  .studio-menu:hover .studio-nav-panel__item,
  .studio-menu:focus-within .studio-nav-panel__item {
    opacity: 1;
    transform: translateY(0);
  }
  .studio-nav-panel--services .studio-nav-panel__item:nth-last-child(even),
  .studio-nav-panel--areas .studio-nav-panel__item:nth-last-child(even) {
    border-left: 1px solid rgba(127,224,247,.08);
  }
  .nav-links .studio-nav-panel .studio-nav-panel__link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: .6rem .95rem;
    border: 0;
    border-bottom: 1px solid rgba(127,224,247,.075);
    border-radius: 0;
    color: rgba(232,243,251,.82);
    background: transparent;
    font: 630 .76rem/1.18 var(--font-display);
    white-space: normal;
    transition: color .2s ease, background-color .2s ease, padding .3s var(--ease-soft);
  }
  .nav-links .studio-nav-panel .studio-nav-panel__link::before {
    content: "";
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 0;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--aqua-300), #7188ff);
    box-shadow: 0 0 12px rgba(53,199,240,.72);
    opacity: 0;
    transform: scaleY(.25);
    transition: opacity .2s ease, transform .26s var(--ease-soft);
  }
  .nav-links .studio-nav-panel .studio-nav-panel__link::after { display: none !important; }
  .nav-links .studio-nav-panel .studio-nav-panel__link:hover,
  .nav-links .studio-nav-panel .studio-nav-panel__link:focus-visible {
    padding-left: 1.08rem;
    color: #fff;
    background: linear-gradient(90deg, rgba(53,199,240,.12), rgba(53,199,240,.035));
    outline: none;
  }
  .nav-links .studio-nav-panel .studio-nav-panel__link:hover::before,
  .nav-links .studio-nav-panel .studio-nav-panel__link:focus-visible::before { opacity: 1; transform: scaleY(1); }
  .studio-nav-panel__label { min-width: 0; }
  .studio-nav-panel__arrow {
    display: inline-block;
    color: var(--aqua-300);
    opacity: .25;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .28s var(--ease-soft);
  }
  .studio-nav-panel__link:hover .studio-nav-panel__arrow,
  .studio-nav-panel__link:focus-visible .studio-nav-panel__arrow { opacity: 1; transform: translateX(0); }
  .studio-nav-panel__all { grid-column: 1 / -1; }
  .nav-links .studio-nav-panel .studio-nav-panel__all .studio-nav-panel__link {
    min-height: 50px;
    margin: 0;
    padding: .68rem .92rem;
    border-top: 1px solid rgba(127,224,247,.12);
    border-bottom: 0;
    color: var(--gold-300);
    background: rgba(2,10,21,.34);
  }
}

@keyframes studio-panel-glimmer {
  0%, 58% { background-position: 190% 0; opacity: .35; }
  78% { opacity: .9; }
  100% { background-position: -80% 0; opacity: .42; }
}

/* ---------- Home proof instruments ---------- */
.hero .proof-instruments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  width: min(100%, 820px);
  margin-top: 1.35rem;
  perspective: 1000px;
}
.hero .proof-instrument {
  --proof-rgb: 93, 205, 239;
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  min-width: 0;
  min-height: 74px;
  padding: .66rem .72rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(var(--proof-rgb), .25);
  border-radius: 4px 15px 4px 15px;
  color: #edf8ff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 38%),
    linear-gradient(155deg, rgba(10,33,55,.86), rgba(3,13,25,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 0 24px rgba(var(--proof-rgb), .035), 0 10px 28px rgba(1,8,18,.28);
  text-decoration: none;
  animation: none !important;
}
.hero .proof-instrument--rating { --proof-rgb: 246, 184, 102; }
.hero .proof-instrument--pricing { --proof-rgb: 117, 157, 255; }
.hero .proof-instrument--reset { --proof-rgb: 102, 218, 232; }
.hero .proof-instrument::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at var(--studio-mx, 50%) var(--studio-my, 50%), rgba(var(--proof-rgb), .16), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(255,255,255,.018) 22px);
  opacity: .64;
  transition: opacity .25s ease;
  pointer-events: none;
}
.hero .proof-instrument::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: -48%;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), rgba(var(--proof-rgb), .92), transparent);
  opacity: 0;
  transition: left .65s var(--ease-soft), opacity .18s ease;
  pointer-events: none;
}
.hero .proof-instrument:hover::after,
.hero .proof-instrument:focus-visible::after { left: 116%; opacity: .92; }
.hero .proof-instrument:hover,
.hero .proof-instrument:focus-visible {
  border-color: rgba(var(--proof-rgb), .56);
  box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 0 28px rgba(var(--proof-rgb), .07), 0 18px 40px rgba(1,8,18,.44), 0 0 24px rgba(var(--proof-rgb), .09);
  outline: none;
}
.hero .proof-instrument:hover::before,
.hero .proof-instrument:focus-visible::before { opacity: 1; }
.proof-instrument__sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--proof-rgb), .32);
  border-radius: 50%;
  color: rgb(var(--proof-rgb));
  background: radial-gradient(circle, rgba(var(--proof-rgb), .14), rgba(var(--proof-rgb), .025) 66%);
  box-shadow: inset 0 0 12px rgba(var(--proof-rgb), .09), 0 0 0 4px rgba(var(--proof-rgb), .035);
  font: 760 .7rem/1 var(--font-display);
  letter-spacing: -.03em;
  transition: rotate .5s var(--studio-spring), scale .4s var(--studio-spring), box-shadow .3s ease;
}
.proof-instrument__sigil::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-top: 1px solid rgba(var(--proof-rgb), .7);
  border-right: 1px solid transparent;
  border-bottom: 1px solid rgba(var(--proof-rgb), .18);
  border-left: 1px solid transparent;
  border-radius: 50%;
  rotate: -30deg;
}
.proof-instrument:hover .proof-instrument__sigil,
.proof-instrument:focus-visible .proof-instrument__sigil {
  rotate: 10deg;
  scale: 1.06;
  box-shadow: inset 0 0 15px rgba(var(--proof-rgb), .15), 0 0 15px rgba(var(--proof-rgb), .14);
}
.proof-instrument__copy {
  display: grid;
  min-width: 0;
  gap: .14rem;
  text-align: left;
}
.proof-instrument__meta {
  display: flex;
  align-items: center;
  gap: .34rem;
  color: rgba(var(--proof-rgb), .72);
  font: 730 .49rem/1 var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.proof-instrument__meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--proof-rgb));
  box-shadow: 0 0 7px rgba(var(--proof-rgb), .85);
  animation: proof-signal 2.6s ease-in-out infinite;
}
.hero .proof-instrument .t-tile__label {
  display: block;
  min-width: 0;
  color: #f3f9fd;
  font: 680 .7rem/1.15 var(--font-display);
  white-space: normal;
}
.hero .proof-instrument .t-tile__sub {
  display: block;
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: rgba(218,237,247,.56);
  font: 570 .57rem/1.15 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  transition: color .2s ease;
}
.hero .proof-instrument:hover .t-tile__sub,
.hero .proof-instrument:focus-visible .t-tile__sub { max-width: none; margin: 0; color: rgba(229,245,252,.82); opacity: 1; }
.proof-instrument__edge {
  position: absolute;
  top: 12px;
  right: 6px;
  bottom: 12px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, rgba(var(--proof-rgb), .8), transparent);
  box-shadow: 0 0 8px rgba(var(--proof-rgb), .42);
  opacity: .45;
  transition: opacity .25s ease, transform .35s var(--ease-soft);
}
.proof-instrument:hover .proof-instrument__edge,
.proof-instrument:focus-visible .proof-instrument__edge { opacity: 1; transform: scaleY(1.2); }

@keyframes proof-signal {
  0%, 100% { opacity: .42; box-shadow: 0 0 5px rgba(var(--proof-rgb), .48); }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(var(--proof-rgb), .9); }
}

@media (max-width: 900px) {
  /* A no-rebuild mobile variant of the proof instruments. Keeping the source
     links intact avoids a costly hero DOM replacement during first paint. */
  .hero .proof-instruments-lite {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    width: min(100%, 560px);
    margin-top: 1.35rem;
  }
  .hero .proof-instruments-lite > .t-tile {
    --proof-rgb: 93, 205, 239;
    position: relative;
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 67px;
    padding: .7rem .72rem .66rem .9rem;
    overflow: hidden;
    border: 1px solid rgba(var(--proof-rgb), .28);
    border-radius: 4px 15px 4px 15px;
    color: #edf8ff;
    background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%), linear-gradient(155deg, rgba(10,33,55,.9), rgba(3,13,25,.86));
    box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 0 22px rgba(var(--proof-rgb), .04), 0 10px 26px rgba(1,8,18,.3);
    text-align: left;
    animation: none !important;
  }
  .hero .proof-instruments-lite > .t-tile:nth-child(1) { --proof-rgb: 246, 184, 102; }
  .hero .proof-instruments-lite > .t-tile:nth-child(3) { --proof-rgb: 117, 157, 255; }
  .hero .proof-instruments-lite > .t-tile:nth-child(4) { --proof-rgb: 102, 218, 232; }
  .hero .proof-instruments-lite > .t-tile::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 7px;
    bottom: 13px;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, transparent, rgba(var(--proof-rgb), .86), transparent);
    box-shadow: 0 0 9px rgba(var(--proof-rgb), .5);
  }
  .hero .proof-instruments-lite > .t-tile > svg { display: none; }
  .hero .proof-instruments-lite .t-tile__label {
    color: #f3f9fd;
    font: 680 .7rem/1.18 var(--font-display);
    white-space: normal;
  }
  .hero .proof-instruments-lite .t-tile__sub {
    display: block;
    margin-top: .18rem;
    color: rgba(218,237,247,.62);
    font: 570 .58rem/1.2 var(--font-display);
    opacity: 1;
  }
  .hero .proof-instruments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    width: min(100%, 560px);
  }
  .hero .proof-instrument {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 67px;
    padding: .55rem .62rem;
  }
  .proof-instrument__sigil { width: 34px; height: 34px; }
  .hero .proof-instrument .t-tile__label { font-size: .65rem; }
}

@media (max-width: 390px) {
  .hero .proof-instruments-lite { grid-template-columns: 1fr; }
  .hero .proof-instruments-lite > .t-tile { min-height: 62px; }
  .hero .proof-instruments { grid-template-columns: 1fr; }
  .hero .proof-instrument { min-height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links .studio-nav-panel::before,
  .proof-instrument__meta i { animation: none !important; }
  .hero .proof-instrument::after { display: none; }
}

/* Coordinate the desktop sunrise with the brand entrance while preserving the
   moving-water video underneath. The static sunlight layer crossfades away as
   the reveal footage reaches its own daylight frames. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.home-hero-sync .hero__media .sunrise-layer { opacity: 0; }
  html.home-hero-launched .hero__media .sunrise-layer {
    animation: home-sun-wordmark-sync 2.65s cubic-bezier(.18,.74,.2,1) both;
  }
}

@keyframes home-sun-wordmark-sync {
  0% { opacity: 0; filter: saturate(1.02) brightness(1); }
  18% { opacity: .44; filter: saturate(1.12) brightness(1.07); }
  58% { opacity: .34; filter: saturate(1.08) brightness(1.04); }
  100% { opacity: 0; filter: saturate(1) brightness(1); }
}

/* Once the reveal hands off to the living-water loop, lift the spa and water
   into a cleaner daylight grade. The lower veil remains strong enough for the
   white service copy, while the center and right side gain crisp aqua detail. */
@media (min-width: 901px) {
  .hero__media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(ellipse at 63% 50%, rgba(164, 236, 249, .13), rgba(100, 211, 236, .045) 37%, transparent 64%),
      linear-gradient(180deg, rgba(255, 246, 224, .035), transparent 48%);
    mix-blend-mode: screen;
    transition: opacity 1.35s cubic-bezier(.2,.74,.22,1);
  }
  .hero__media::after {
    z-index: 2;
    transition: opacity 1.35s cubic-bezier(.2,.74,.22,1);
  }
  .hero__media .hero-vid--b {
    transition: opacity .9s var(--ease-soft), filter 1.4s cubic-bezier(.2,.74,.22,1);
  }
  html.home-hero-settled .hero__media .hero-vid--b.is-live {
    filter: brightness(1.14) saturate(1.11) contrast(1.025);
  }
  html.home-hero-settled .hero__media::before { opacity: .78; }
  html.home-hero-settled .hero__media::after { opacity: .82; }
}

/* Bright interior-page hero family. These deliberately favor open water and
   warm daylight instead of the repeated dark forest scene. */
@media (max-width: 640px) {
  .page-hero--brightwater {
    background: linear-gradient(90deg, rgba(3,20,31,.58), rgba(4,28,43,.34) 60%, rgba(4,28,43,.12)), linear-gradient(180deg, rgba(4,23,37,.04) 20%, rgba(10,28,51,.68)), url('/assets/img/ambient/brightwater-900.jpg') center 48% / cover no-repeat !important;
  }
  .page-hero--warmsound {
    background: linear-gradient(180deg, rgba(5,13,26,.18), rgba(7,19,37,.14) 55%, rgba(10,28,51,.72)), url('/assets/img/ambient/warmsound-900.jpg') center 47% / cover no-repeat !important;
  }
  .page-hero--goldridge {
    background: linear-gradient(180deg, rgba(5,13,26,.22), rgba(7,19,37,.16) 55%, rgba(10,28,51,.74)), url('/assets/img/ambient/goldridge-900.jpg') center 46% / cover no-repeat !important;
  }
}

/* ---------- Lean mobile motion budget ----------
   Desktop keeps the full studio layer. Phones/coarse pointers use the centered
   route ripple plus native scrolling, without the draggable dock, canvas trails,
   per-card 3D layers or perpetual status pulses. */
@media (max-width: 900px), (pointer: coarse) {
  .orbit-widget,
  .orbit-ribbon,
  .home-brand-ribbon,
  .studio-ripple { display: none !important; }

  .studio-tilt,
  .studio-magnetic {
    transform: none !important;
    translate: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .proof-instrument__meta i { animation: none !important; }
  .hero .proof-instrument::after { display: none; }

  /* Preserve the home signature as a paint-only underline when the animated
     canvas ribbon is intentionally not installed. */
  .hero-brandmark__word { position: relative; }
  .hero-brandmark__word::after {
    content: "";
    position: absolute;
    right: 5%;
    bottom: -.48rem;
    left: 7%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(82,220,250,.68) 16%, rgba(212,249,255,.86) 58%, rgba(145,117,255,.56) 84%, transparent);
    box-shadow: 0 0 9px rgba(61,210,248,.38);
  }

  .studio-ripple-transition__ring:nth-child(n + 3) { display: none; }
  .studio-ripple-leaving .studio-ripple-transition::before {
    animation: studio-ripple-ground .36s ease-out both;
  }
  .studio-ripple-leaving .studio-ripple-transition::after {
    animation: studio-ripple-surface .44s .03s ease-out both;
  }
  .studio-ripple-leaving .studio-ripple-transition__ring {
    animation: studio-route-ripple .42s calc(var(--ripple-order) * 34ms + 20ms) cubic-bezier(.2,.72,.18,1) both;
  }
}


/* Transformation of the Week (2026-07-23) */
.totw-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2rem; align-items: start; }
.totw-player video { width: 100%; height: auto; border-radius: 20px; border: 1px solid rgba(53,199,240,0.28); box-shadow: 0 24px 60px rgba(0,0,0,0.45); background: #06172c; display: block; }
.totw-yt { display: flex; align-items: center; gap: 0.9rem; padding: 1.05rem 1.3rem; border-radius: 18px; background: #fff; color: #06172c; text-decoration: none; box-shadow: 0 14px 40px rgba(0,0,0,0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.totw-yt:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.totw-yt span { display: flex; flex-direction: column; line-height: 1.25; }
.totw-yt strong { font-weight: 800; font-size: 1.02rem; }
.totw-yt em { font-style: normal; font-size: 0.85rem; color: #4b6b8a; font-weight: 650; }
.totw-cta { margin-top: 1.3rem; padding: 1.3rem 1.4rem 1.45rem; border-radius: 18px; background: rgba(7, 18, 34, 0.55); border: 1px solid rgba(53, 199, 240, 0.3); }
.totw-cta h3 { font-size: 1.22rem; margin-bottom: 0.5rem; }
.totw-cta p { font-size: 0.95rem; line-height: 1.55; color: #c9dcee; margin-bottom: 0.95rem; }
.totw-cta .button-row { flex-wrap: wrap; gap: 0.55rem; }
@media (max-width: 900px) {
  .totw-grid { grid-template-columns: 1fr; }
}


/* TOTW v2 polish (2026-07-24): cinematic centered stage */
.totw-section .totw-grid, .totw-section .totw-player, .totw-section .totw-side, .totw-section .totw-cta { all: revert; }
.totw-stage { max-width: 960px; margin: clamp(1.6rem, 3.5vw, 2.6rem) auto 0; position: relative; }
.totw-stage video { width: 100%; height: auto; display: block; border-radius: 22px; border: 1px solid rgba(53, 199, 240, 0.32); background: #06172c; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(53, 199, 240, 0.06); }
.totw-bar { max-width: 960px; margin: clamp(1.3rem, 2.6vw, 2rem) auto 0; display: grid; grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.25fr) auto; gap: clamp(1rem, 2.4vw, 1.8rem); align-items: center; padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.7rem); border-radius: 20px; background: rgba(7, 18, 34, 0.6); border: 1px solid rgba(53, 199, 240, 0.26); backdrop-filter: blur(6px); }
.totw-bar .totw-yt { display: flex; align-items: center; gap: 0.8rem; color: #eef4fa; text-decoration: none; transition: opacity 0.2s ease; }
.totw-bar .totw-yt:hover { opacity: 0.85; }
.totw-bar .totw-yt span { display: flex; flex-direction: column; line-height: 1.3; }
.totw-bar .totw-yt strong { font-weight: 800; font-size: 0.98rem; }
.totw-bar .totw-yt em { font-style: normal; font-size: 0.82rem; color: #7fe0f7; font-weight: 650; }
.totw-pitch { border-left: 1px solid rgba(53, 199, 240, 0.25); padding-left: clamp(1rem, 2.4vw, 1.8rem); }
.totw-pitch h3 { font-size: 1.06rem; margin-bottom: 0.3rem; }
.totw-pitch p { font-size: 0.88rem; line-height: 1.5; color: #c9dcee; margin: 0; }
.totw-actions { display: flex; flex-direction: column; gap: 0.55rem; align-items: stretch; white-space: nowrap; }
@media (max-width: 900px) {
  .totw-bar { grid-template-columns: 1fr; }
  .totw-pitch { border-left: 0; padding-left: 0; border-top: 1px solid rgba(53, 199, 240, 0.25); padding-top: 1rem; }
  .totw-actions { flex-direction: row; flex-wrap: wrap; }
}

/* Click-reliability: press-lift moved links out from under the cursor (2026-07-24) */
.studio-tilt.is-pressed { --studio-lift: 0px; }


/* ============ Studio dropdown polish (2026-07-24) ============ */
.nav-links .nav-caret { transition: transform .25s var(--ease-soft, ease); }
.nav-links .has-sub:hover > a .nav-caret,
.nav-links .has-sub:focus-within > a .nav-caret { transform: rotate(180deg); }
.nav-sub {
  padding: .8rem .6rem .6rem;
  background: linear-gradient(180deg, rgba(12, 32, 58, 0.90), rgba(7, 18, 34, 0.97));
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(53, 199, 240, 0.34);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(2, 8, 18, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 55px rgba(12, 140, 233, 0.14);
  transform: translateY(16px) scale(0.965);
  transform-origin: top left;
  overflow: hidden;
}
.nav-sub::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, #7fe0f7, transparent);
  opacity: .9;
}
.nav-sub::after {
  content: ""; position: absolute; top: -60px; right: -40px; width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(53, 199, 240, 0.16), transparent 70%);
  pointer-events: none;
}
.nav-links .has-sub:hover .nav-sub,
.nav-links .has-sub:focus-within .nav-sub { transform: translateY(0) scale(1); }
.nav-sub li { opacity: 0; translate: 0 8px; transition: opacity .3s var(--ease-soft, ease), translate .3s var(--ease-soft, ease); }
.nav-links .has-sub:hover .nav-sub li,
.nav-links .has-sub:focus-within .nav-sub li { opacity: 1; translate: 0 0; }
.nav-sub li:nth-child(1) { transition-delay: .02s; }
.nav-sub li:nth-child(2) { transition-delay: .05s; }
.nav-sub li:nth-child(3) { transition-delay: .08s; }
.nav-sub li:nth-child(4) { transition-delay: .11s; }
.nav-sub li:nth-child(5) { transition-delay: .14s; }
.nav-sub li:nth-child(6) { transition-delay: .17s; }
.nav-sub li:nth-child(7) { transition-delay: .20s; }
.nav-sub li:nth-child(8) { transition-delay: .22s; }
.nav-sub li:nth-child(9) { transition-delay: .24s; }
.nav-sub li:nth-child(10) { transition-delay: .26s; }
.nav-sub li:nth-child(n+11) { transition-delay: .28s; }
.nav-sub a { position: relative; padding-left: 1.65rem; transition: background .18s ease, color .18s ease, padding-left .18s ease; }
.nav-sub a::before {
  content: ""; position: absolute; left: .68rem; top: 50%; width: 7px; height: 9.5px;
  translate: 0 -55%; opacity: 0; scale: .5;
  background: linear-gradient(180deg, #bff1ff 10%, #35c7f0 55%, #0a75c9 95%);
  border-radius: 50% 50% 50% 50% / 12% 12% 65% 65%;
  transition: opacity .18s ease, scale .18s ease;
}
.nav-sub a:hover { padding-left: 1.95rem; background: linear-gradient(90deg, rgba(53, 199, 240, 0.18), rgba(53, 199, 240, 0.04)); color: #bff1ff; }
.nav-sub a:hover::before { opacity: 1; scale: 1; }
.nav-sub__all a { margin-top: .35rem; background: linear-gradient(90deg, rgba(53, 199, 240, 0.10), transparent); border-top: 1px solid rgba(53, 199, 240, 0.28); }
.nav-sub__all a:hover { background: linear-gradient(90deg, rgba(53, 199, 240, 0.22), rgba(53, 199, 240, 0.06)); }
@media (prefers-reduced-motion: reduce) {
  .nav-sub li { opacity: 1; translate: 0 0; transition: none; }
  .nav-links .nav-caret { transition: none; }
}


/* ============ Illuminated borders ? Linear-style light sweep (2026-07-24) ============ */
@property --ill-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card, .totw-bar, .intake-shell { position: relative; }
.card::before { z-index: 0; }
.card > * { position: relative; z-index: 1; }
.ill-ring {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ill-a),
    transparent 0turn 0.08turn,
    rgba(127, 224, 247, 0.95) 0.14turn,
    rgba(12, 140, 233, 0.55) 0.20turn,
    transparent 0.28turn 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2;
}
.card:hover > .ill-ring, .totw-bar:hover > .ill-ring, .intake-shell:hover > .ill-ring {
  opacity: 1; animation: ill-sweep 2.8s linear infinite;
}
@keyframes ill-sweep { to { --ill-a: 1turn; } }
@media (prefers-reduced-motion: reduce) {
  .card:hover > .ill-ring, .totw-bar:hover > .ill-ring, .intake-shell:hover > .ill-ring { animation: none; }
}


/* ============ Surface Break hero prelude (2026-07-24) ============ */
.surface-break {
  --surface-p: -15%;
  --surface-fade: 1;
  position: fixed; inset: 0; z-index: 240; pointer-events: none;
  opacity: var(--surface-fade);
  clip-path: inset(var(--surface-p) 0 0 0);
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(6, 40, 66, 0.98), rgba(7, 24, 47, 0.99) 55%, rgba(4, 14, 30, 1)),
    linear-gradient(180deg, rgba(20, 90, 130, 0.5), rgba(6, 24, 46, 0.9));
  transition: opacity 0.5s ease;
}
.surface-break::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 30% at 24% 30%, rgba(53, 199, 240, 0.20), transparent 70%),
    radial-gradient(38% 26% at 76% 55%, rgba(53, 199, 240, 0.14), transparent 70%);
  animation: surface-caustic 2.6s ease-in-out infinite alternate;
}
@keyframes surface-caustic { to { transform: translateY(-4%) scale(1.05); } }
.surface-break__bubbles { position: absolute; inset: 0; width: 100%; height: 100%; }
.surface-break__line {
  position: absolute; left: 0; right: 0; top: calc(var(--surface-p) - 12px); height: 26px;
  filter: blur(0.5px) drop-shadow(0 2px 14px rgba(127, 224, 247, 0.55));
  opacity: 0.9;
}
.surface-break__line svg { width: 100%; height: 100%; }
.surface-break__steam { position: absolute; left: 0; right: 0; top: calc(var(--surface-p) - 60px); height: 90px; }
.surface-break__steam i {
  position: absolute; top: 0; width: 220px; height: 70px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
  filter: blur(14px);
  animation: steam-drift 2.4s ease-out forwards;
}
.surface-break__steam i:nth-child(1) { left: 18%; animation-delay: 0.6s; }
.surface-break__steam i:nth-child(2) { left: 46%; width: 300px; animation-delay: 0.9s; }
.surface-break__steam i:nth-child(3) { left: 70%; animation-delay: 1.15s; }
@keyframes steam-drift {
  0% { opacity: 0; transform: translateY(18px) scale(0.8); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) translateX(24px) scale(1.25); }
}
.surface-break.is-done { opacity: 0; }