:root {
  --enamel: #F2F5F7;
  --white: #FFFFFF;
  --ink: #18222A;
  --ink-2: #34414B;
  --muted: #5B6771;
  --line: rgba(24,34,42,.12);
  --line-2: rgba(24,34,42,.2);
  --teal: #1297B6;
  --teal-deep: #0B6E87;
  --teal-tint: #E2F2F6;
  --signal: #F05A24;
  --signal-deep: #D0441A;
  --night: #0D1216;
  --night-2: #141C22;
  --champagne: #C4AB8A;
  --ease: cubic-bezier(.2,.7,.1,1);
  --ease-io: cubic-bezier(.77,0,.18,1);
  --navh: 76px;
  --vh: 1vh;
  --pad: clamp(20px,4vw,56px);
  --safe-t: env(safe-area-inset-top,0px);
  --safe-b: env(safe-area-inset-bottom,0px);
  --iw: 270px;
  --ih: 390px
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
body {
  height: 100%;
  overflow: hidden;
  background: var(--night);
  font-family: Archivo,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}
img,
video {
  display: block;
  max-width: 100%
}
a {
  color: inherit;
  text-decoration: none
}
button {
  font: inherit;
  color: inherit;
  background: 0 0;
  border: 0;
  cursor: pointer
}
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor
}
h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em
}
.display {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9
}
h2 {
  font-stretch: 118%;
  font-size: clamp(2.1rem,4.4vw,3.7rem);
  line-height: .98
}
h3 {
  font-stretch: 112%;
  font-size: clamp(1.25rem,2vw,1.6rem);
  letter-spacing: -.02em;
  line-height: 1.1
}
.lead {
  font-size: clamp(1.05rem,1.35vw,1.2rem);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.6
}
.on-dark {
  color: #c9d3da
}
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: #fff
}
.on-dark .lead {
  color: #aeb9c1
}
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad)
}
.sec {
  padding: clamp(80px,11vw,150px) 0;
  position: relative
}
.sec-head {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: 40px 64px;
  align-items: end;
  margin-bottom: clamp(40px,6vw,72px)
}
.sec-head .lead {
  justify-self: end
}
@media (max-width:860px) {
  .sec-head {
    grid-template-columns: 1fr
  }
  .sec-head .lead {
    justify-self: start
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-stretch: 112%;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;
}
.btn .icon {
  font-size: 1.05em
}
.btn-start {
  background: var(--signal);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.18),0 10px 26px -8px rgba(240,90,36,.6)
}
.btn-start:hover {
  background: #f46a36;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.18),0 16px 34px -10px rgba(240,90,36,.7)
}
.btn-start:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25)
}
.btn-ghost {
  border: 1.5px solid var(--line-2);
  color: var(--ink)
}
.btn-ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px)
}
.btn-ghost.light,
.on-dark .btn-ghost {
  border-color: rgba(255,255,255,.3);
  color: #fff
}
.btn-ghost.light:hover,
.on-dark .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.06)
}
.link {
  color: var(--teal-deep);
  font-weight: 650;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s
}
.link:hover {
  color: var(--ink)
}
.on-dark .link {
  color: #7fd6ea
}
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #0a0f12;
  z-index: 1
}
.view {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--enamel);
  visibility: hidden;
  transform-origin: 50% 50%;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(24,34,42,.35) transparent
}
.view::-webkit-scrollbar {
  width: 10px
}
.view::-webkit-scrollbar-thumb {
  background: rgba(24,34,42,.3);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box
}
.view:not(.is-active):not(.is-entering):not(.is-leaving) {
  content-visibility: hidden
}
.view.is-active {
  visibility: visible;
  z-index: 2
}
.view.is-leaving {
  visibility: visible;
  z-index: 1;
  pointer-events: none
}
.view.is-entering {
  visibility: visible;
  z-index: 3
}
#stageShade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #05080a;
  opacity: 0;
  pointer-events: none
}
.iris-ring {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55),0 0 0 9px var(--champagne),0 0 0 11px rgba(0,0,0,.35),0 0 60px 10px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.35)
}
#nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
  padding-top: var(--safe-t);
  transition: background .45s,backdrop-filter .45s,box-shadow .45s,transform .6s var(--ease)
}
#nav .bar {
  height: var(--navh);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--pad)
}
.brand {
  display: flex;
  align-items: center;
  height: 100%
}
.brand img {
  height: 44px;
  width: auto
}
.brand .logo-dark {
  display: none
}
.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  align-items: center
}
.nav-links a {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: 999px;
  font-stretch: 112%;
  font-weight: 600;
  font-size: .97rem;
  color: rgba(255,255,255,.82);
  transition: color .25s,background .25s
}
.nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,.08)
}
.nav-links a[aria-current=page] {
  color: #fff
}
.nav-links a[aria-current=page]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal)
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px
}
.nav-right .btn {
  height: 44px;
  padding: 0 20px;
  font-size: .92rem
}
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  align-items: center;
  justify-content: center
}
.nav-toggle span {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .35s var(--ease),background .2s
}
.nav-toggle span::after,
.nav-toggle span::before {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .35s var(--ease)
}
.nav-toggle span::before {
  top: -6px
}
.nav-toggle span::after {
  top: 6px
}
body.menu-open .nav-toggle span {
  background: 0 0
}
body.menu-open .nav-toggle span::before {
  transform: translateY(6px) rotate(45deg)
}
body.menu-open .nav-toggle span::after {
  transform: translateY(-6px) rotate(-45deg)
}
body.nav-solid #nav {
  background: rgba(242,245,247,.72);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 1px 0 var(--line)
}
body.nav-solid .brand .logo-light {
  display: none
}
body.nav-solid .brand .logo-dark {
  display: block
}
body.nav-solid .nav-links a {
  color: var(--ink-2)
}
body.nav-solid .nav-links a:hover {
  color: var(--ink);
  background: rgba(24,34,42,.06)
}
body.nav-solid .nav-links a[aria-current=page] {
  color: var(--ink)
}
body.nav-solid .nav-toggle {
  border-color: var(--line-2);
  color: var(--ink)
}
@media (max-width:1020px) {
  .nav-links,
  .nav-right .btn {
    display: none
  }
  .nav-toggle {
    display: inline-flex
  }
  :root {
    --navh: 68px
  }
  .brand img {
    height: 38px
  }
}
#menu {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--night);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--navh) + var(--safe-t) + 20px) var(--pad) calc(40px + var(--safe-b));
  perspective: 900px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s,visibility 0s .4s
}
body.menu-open #menu {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s
}
body.menu-open #nav {
  background: 0 0;
  backdrop-filter: none;
  box-shadow: none
}
body.menu-open .brand .logo-light {
  display: block
}
body.menu-open .brand .logo-dark {
  display: none
}
body.menu-open .nav-toggle {
  color: #fff;
  border-color: rgba(255,255,255,.3)
}
#menu ul {
  list-style: none;
  transform-style: preserve-3d
}
#menu li {
  transform: rotateX(-80deg) translateZ(-40px);
  transform-origin: 50% 0;
  opacity: 0;
  transition: transform .7s var(--ease),opacity .5s
}
body.menu-open #menu li {
  transform: none;
  opacity: 1
}
body.menu-open #menu li:nth-child(2) {
  transition-delay: .05s
}
body.menu-open #menu li:nth-child(3) {
  transition-delay: .1s
}
body.menu-open #menu li:nth-child(4) {
  transition-delay: .15s
}
#menu li a {
  display: block;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.4rem,11vw,3.6rem);
  letter-spacing: -.04em;
  line-height: 1.15;
  color: #fff
}
#menu li a[aria-current=page] {
  color: #6fd0e6
}
#menu .menu-foot {
  margin-top: 40px;
  display: grid;
  gap: 6px;
  color: #9ba8b1;
  font-size: .95rem
}
#menu .menu-foot a {
  color: #fff;
  font-weight: 600
}
#intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #07090b;
  overflow: hidden;
  color: #dde5ea;
  -webkit-mask-image: radial-gradient(circle at var(--ix,50%) var(--iy,50%),transparent var(--ir,0px),#000 calc(var(--ir,0px) + 1px));
  mask-image: radial-gradient(circle at var(--ix,50%) var(--iy,50%),transparent var(--ir,0px),#000 calc(var(--ir,0px) + 1px))
}
#intro.no-mask {
  -webkit-mask-image: none;
  mask-image: none
}
.intro-bg {
  position: absolute;
  inset: -6%;
  background: radial-gradient(ellipse 60% 55% at 50% 45%,rgba(22,36,44,0),rgba(4,6,8,.85) 75%),linear-gradient(180deg,rgba(6,9,11,.72),rgba(6,9,11,.55) 45%,rgba(3,4,5,.96) 72%),url('../images/intro-bg.webp') center 38%/cover no-repeat;
  filter: blur(10px) saturate(.8) brightness(.7);
  transform: translate3d(var(--bx,0),var(--by,0),0) scale(1.04)
}
.intro-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 38% 60% at 50% 0,rgba(190,225,240,.1),transparent 70%),radial-gradient(ellipse 50% 22% at 50% 88%,rgba(18,151,182,.1),transparent 70%)
}
#introCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s
}
#intro.ready #introCanvas {
  opacity: 1
}
#intro.hovering #introCanvas {
  cursor: pointer
}
.intro-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: calc(22px + var(--safe-t)) var(--pad) calc(26px + var(--safe-b));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity .6s
}
.intro-ui > * {
  pointer-events: auto
}
.intro-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px
}
.intro-top img {
  height: 40px;
  width: auto;
  opacity: .95
}
#intro:not(.ready) .intro-cta {
  opacity: 0;
  pointer-events: none
}
.intro-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 20px
}
.intro-caption {
  font-size: .92rem;
  line-height: 1.45;
  color: #93a1ab;
  max-width: 30ch;
  justify-self: end;
  text-align: right
}
.intro-caption strong {
  display: block;
  color: #eef3f6;
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1rem;
  margin-bottom: 2px
}
.intro-cta {
  transition: opacity .6s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}
.intro-status {
  justify-self: start;
  text-align: left;
  font-size: .85rem;
  color: #93a1ab;
  min-height: 1.4em
}
.intro-status b {
  color: #fff;
  font-weight: 700
}
.intro-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #8e9ca6;
  font-size: .9rem;
  transition: opacity .6s
}
#intro.ready .intro-loading {
  opacity: 0;
  pointer-events: none
}
.loader-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: var(--teal);
  animation: 1s linear infinite spin
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
#intro.running .intro-ui {
  opacity: 0;
  transition: opacity .9s .2s
}
#intro.running .intro-status {
  opacity: 1
}
.intro-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  padding: 24px
}
#intro.fallback .intro-fallback {
  display: flex
}
#intro.fallback #introCanvas,
#intro.fallback .intro-cta,
#intro.fallback .intro-loading {
  display: none
}
.intro-fallback .cube-css {
  --s: 120px
}
@media (max-width:720px) {
  .intro-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center
  }
  .intro-caption {
    order: 2;
    text-align: center;
    max-width: 36ch;
    justify-self: center
  }
  .intro-status {
    justify-self: center;
    text-align: center;
    order: 3
  }
  .intro-top img {
    height: 34px
  }
}
.hero {
  position: relative;
  height: calc(var(--vh)*100);
  min-height: 560px;
  background: var(--night);
  overflow: hidden;
  perspective: 1200px
}
.hero-media {
  position: absolute;
  inset: 0;
  transform-origin: 50% 60%;
  will-change: transform
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 62%,rgba(8,12,15,.6) 0,rgba(8,12,15,.25) 100%),linear-gradient(0deg,rgba(8,12,15,.9) 0,rgba(8,12,15,0) 50%)
}
.hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(56px,9vh,110px);
  transform-style: preserve-3d
}
.hero h1 {
  font-size: clamp(3rem,8.4vw,8.2rem);
  max-width: 11ch;
  margin: 0 auto;
  color: #fff
}
.hero h1 .l {
  display: block;
  overflow: hidden;
  padding-bottom: .06em
}
.hero h1 .l > span {
  display: block
}
.hero .lead {
  margin: 28px auto 0;
  max-width: 52ch;
  color: #b9c4cb
}
.hero .hero-actions {
  justify-content: center
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px
}
.hero-layer {
  will-change: transform
}
@media (max-width:720px) {
  .hero-media::after {
    background: linear-gradient(0deg,rgba(8,12,15,.95) 0,rgba(8,12,15,.55) 60%,rgba(8,12,15,.35) 100%)
  }
}
.stats {
  background: var(--white);
  border-bottom: 1px solid var(--line)
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr)
}
.stat {
  padding: clamp(34px,4.5vw,56px) clamp(10px,2vw,28px);
  border-right: 1px solid var(--line)
}
.stat:first-child {
  padding-left: 0
}
.stat:last-child {
  border-right: 0
}
.stat-num {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.6rem,5vw,4.4rem);
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px
}
.stat-num small {
  font-size: .38em;
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  margin-right: 6px
}
.stat-num sup {
  font-size: .5em;
  color: var(--teal);
  vertical-align: baseline
}
.stat-num sup.star {
  color: var(--signal)
}
.stat-lbl {
  margin-top: 10px;
  color: var(--muted);
  font-size: .95rem
}
@media (max-width:860px) {
  .stats-grid {
    grid-template-columns: repeat(2,1fr)
  }
  .stat {
    padding-left: 0!important
  }
  .stat:nth-child(2) {
    border-right: 0
  }
  .stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--line)
  }
  .stat:nth-child(odd) {
    padding-right: 20px
  }
  .stat:nth-child(2n) {
    padding-left: 24px!important
  }
}
.ring-sec {
  position: relative;
  height: calc(var(--vh)*330);
  background: var(--night)
}
.ring-sticky {
  position: sticky;
  top: 0;
  height: calc(var(--vh)*100);
  min-height: 620px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: calc(var(--navh) + 28px);
  background: radial-gradient(ellipse 55% 48% at 50% 58%,rgba(18,151,182,.18),transparent 70%),radial-gradient(ellipse 80% 40% at 50% 100%,rgba(255,255,255,.05),transparent 70%),var(--night)
}
.ring-sticky .sec-head {
  margin-bottom: 0
}
.ring-scene {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 30%;
  display: grid;
  place-items: center;
  min-height: 0
}
.ring {
  position: relative;
  width: 1px;
  height: 1px;
  transform-style: preserve-3d;
  will-change: transform
}
.ring-item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--iw);
  height: var(--ih);
  margin: calc(var(--ih)/-2) 0 0 calc(var(--iw)/-2);
  transform-style: preserve-3d;
  cursor: pointer
}
.ring-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.55));
  transition: filter .3s
}
.ring-item::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(0,0,0,.7),transparent);
  transform: translateZ(-1px)
}
.ring-floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1100px,120vw);
  height: 420px;
  margin: -60px 0 0 calc(min(1100px,120vw)/-2);
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(18,151,182,.16),rgba(18,151,182,.04) 60%,transparent);
  transform: rotateX(78deg) translateZ(-200px);
  pointer-events: none
}
.ring-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding-bottom: clamp(28px,5vh,56px)
}
.ring-caption {
  min-height: 112px
}
.ring-caption .count {
  color: #6fd0e6;
  font-weight: 600;
  font-size: .92rem;
  font-variant-numeric: tabular-nums
}
.ring-caption h3 {
  color: #fff;
  font-size: clamp(1.5rem,2.6vw,2.2rem);
  margin: 6px 0;
  font-stretch: 118%
}
.ring-caption p {
  color: #9facb5
}
.ring-caption .link {
  margin-top: 10px;
  display: inline-block
}
.ring-caption .swap {
  transition: opacity .25s,transform .35s var(--ease)
}
.ring-caption.switching .swap {
  opacity: 0;
  transform: translateY(8px)
}
.ring-ctrl {
  display: flex;
  gap: 10px
}
.round-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255,255,255,.22);
  color: #fff;
  transition: background .2s,border-color .2s,transform .2s
}
.round-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5)
}
.round-btn .icon {
  font-size: 20px
}
.ring-progress {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.08)
}
.ring-progress i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  background: var(--teal);
  transform: scaleX(var(--rp,0))
}
@media (max-height:760px) {
  :root {
    --iw: 220px;
    --ih: 310px
  }
}
@media (max-width:720px) {
  :root {
    --iw: 160px;
    --ih: 235px
  }
  .ring-bar {
    grid-template-columns: 1fr
  }
  .ring-ctrl {
    justify-self: start
  }
  .ring-caption {
    min-height: 0
  }
}
.packages {
  background: linear-gradient(180deg,var(--enamel),#e7edf1)
}
.pkg-stack {
  position: relative;
  perspective: 1600px;
  padding-bottom: 40px
}
.pkg {
  position: sticky;
  top: calc(var(--navh) + 18px + var(--n)*16px);
  padding-bottom: 28px
}
.pkg-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  min-height: min(600px,calc(var(--vh)*100 - var(--navh) - 110px));
  border-radius: 30px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset,0 30px 60px -30px rgba(13,18,22,.35),0 0 0 1px var(--line);
  transform-origin: 50% 0;
}
.pkg-left {
  padding: clamp(28px,4vw,56px);
  display: flex;
  flex-direction: column
}
.pkg-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px
}
.pkg-badge {
  display: inline-flex;
  height: 30px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--signal);
  color: #fff;
  font-weight: 700;
  font-size: .82rem
}
.pkg h3 {
  font-stretch: 125%;
  font-size: clamp(2.2rem,4.6vw,3.8rem);
  letter-spacing: -.045em
}
.pkg .sub {
  margin-top: 12px;
  font-weight: 650;
  color: var(--ink)
}
.pkg .desc {
  margin-top: 8px;
  color: var(--muted);
  max-width: 52ch
}
.prices {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 0 36px
}
.price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line)
}
.price span {
  color: var(--muted);
  font-size: .95rem
}
.price b {
  font-stretch: 112%;
  font-weight: 750;
  font-size: 1.2rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em
}
.price b small {
  font-size: .75em;
  color: var(--muted);
  font-weight: 600;
  margin-right: 2px
}
.pkg-actions {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
.pkg-list {
  margin-top: 22px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 9px 28px
}
.pkg-list.three {
  grid-template-columns: repeat(3,1fr)
}
.pkg-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink-2)
}
.pkg-list li .icon {
  margin-top: 3px;
  color: var(--teal);
  font-size: 14px
}
.pkg-right {
  position: relative;
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: hidden
}
.pkg-right img {
  position: absolute;
  left: 30px;
  top: 30px;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(13,18,22,.35))
}
.tone-steel .pkg-right {
  background: radial-gradient(ellipse at 50% 30%,#fff,#dde6eb)
}
.tone-teal .pkg-card {
  background: var(--teal-deep)
}
.tone-teal .pkg-left {
  color: #d6edf3
}
.tone-teal .sub,
.tone-teal h3 {
  color: #fff
}
.tone-teal .desc,
.tone-teal .pkg-list li {
  color: #d4ecf2
}
.tone-teal .pkg-list li .icon {
  color: #fff
}
.tone-teal .pkg-right {
  background: radial-gradient(ellipse at 50% 40%,#1a8ba7,#095a6e)
}
.tone-slate .pkg-card {
  background: #24323b
}
.tone-slate .sub,
.tone-slate h3,
.tone-slate .pkg-label {
  color: #fff
}
.tone-slate .desc,
.tone-slate .pkg-list li {
  color: #c9d4db
}
.tone-slate .pkg-list li .icon {
  color: #6fd0e6
}
.tone-teal .pkg-label {
  color: #fff
}
.tone-night .pkg-card {
  background: var(--night)
}
.tone-night .sub,
.tone-night .pkg-label {
  color: #fff
}
.tone-night h3 {
  color: var(--champagne)
}
.tone-night .desc,
.tone-night .pkg-list li {
  color: #c1cbd2
}
.tone-night .pkg-list li .icon {
  color: var(--champagne)
}
.tone-signal .pkg-card {
  background: linear-gradient(135deg,var(--signal-deep),#b23a15)
}
.tone-signal .sub,
.tone-signal h3,
.tone-signal .pkg-label,
.tone-signal .pkg-list li,
.tone-signal .pkg-list li .icon {
  color: #fff
}
.tone-signal .pkg-right {
  display: block;
  padding: 0;
  background: #e9ebee
}
.tone-signal .pkg-right::before {
  content: "";
  display: block;
  padding-top: 125%
}
.tone-signal .pkg-right img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none
}
.pkg-photo .pkg-right {
  padding: 0;
  background: #10171c
}
.pkg-photo .pkg-right img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos,50% 50%);
  filter: none
}
.pkg-wide .pkg-card {
  grid-template-columns: minmax(0,2.1fr) minmax(0,1fr)
}
.pkg-wide h3 {
  font-size: clamp(2rem,3.4vw,2.9rem)
}
.pkg-wide .pkg-left {
  padding: clamp(26px,3vw,40px)
}
.pkg-wide .pkg-list {
  margin-top: 10px;
  gap: 6px 22px
}
.pkg-wide .pkg-list li {
  font-size: .87rem;
  line-height: 1.35
}
.pkg-wide .pkg-actions {
  padding-top: 20px
}
.pkg-label {
  margin-top: 18px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink)
}
.pkg-label + .pkg-list {
  margin-top: 10px
}
.pkg-tiers {
  margin-top: 10px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px
}
.pkg-tiers li {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  color: #fff;
  font-size: .85rem;
  line-height: 1.35
}
.pkg-tiers b {
  display: block;
  margin-bottom: 4px;
  font-stretch: 112%;
  font-size: 1rem
}
.tone-teal .btn-ghost,
.tone-slate .btn-ghost,
.tone-night .btn-ghost {
  border-color: rgba(255,255,255,.55);
  color: #fff
}
.tone-teal .btn-ghost:hover,
.tone-slate .btn-ghost:hover,
.tone-night .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.1)
}
.tone-signal.pkg-wide .pkg-card {
  grid-template-columns: minmax(0,1.55fr) minmax(0,1fr)
}
.pkg-foot {
  grid-column: 1/-1;
  padding: 0 clamp(26px,3vw,40px) clamp(26px,3vw,40px)
}
.pkg-foot .pkg-label {
  margin-top: 22px
}
@media (max-width:1000px) {
  .pkg-list.three {
    grid-template-columns: repeat(2,1fr)
  }
}
@media (max-width:860px) {
  .pkg {
    padding-bottom: 16px
  }
  .pkg-card {
    grid-template-columns: 1fr;
    min-height: 0
  }
  .pkg-right {
    order: -1;
    height: clamp(190px,46vw,300px)
  }
  .pkg-wide .pkg-card,
  .tone-signal.pkg-wide .pkg-card {
    grid-template-columns: 1fr
  }
  .tone-signal .pkg-right {
    height: auto
  }
  .pkg-tiers {
    grid-template-columns: repeat(2,1fr)
  }
  .prices {
    grid-template-columns: 1fr
  }
}
@media (max-width:520px) {
  .pkg-list,
  .pkg-list.three {
    grid-template-columns: 1fr
  }
}
.seminar {
  background: var(--teal-tint)
}
.seminar-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0,560px);
  gap: clamp(40px,6vw,90px);
  align-items: start
}
.perks {
  list-style: none;
  margin-top: 34px;
  display: grid;
  gap: 14px
}
.perks li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-weight: 550;
  color: var(--ink)
}
.perks li .dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--teal-deep);
  box-shadow: 0 0 0 1px rgba(11,110,135,.2)
}
.perks li .dot .icon {
  font-size: 13px
}
.form-card {
  background: var(--white);
  border-radius: 26px;
  padding: clamp(26px,3.6vw,44px);
  box-shadow: 0 40px 80px -40px rgba(11,70,90,.4),0 0 0 1px rgba(11,110,135,.12)
}
.form-card h3 {
  font-stretch: 118%;
  font-size: 1.8rem
}
.form-card .note {
  color: var(--muted);
  margin-top: 8px;
  font-size: .95rem
}
.fields {
  margin-top: 26px;
  display: grid;
  gap: 16px
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}
.field label {
  display: block;
  font-weight: 650;
  font-size: .88rem;
  color: var(--ink);
  margin-bottom: 7px
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--enamel);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .2s,background .2s
}
.field textarea {
  min-height: 110px;
  resize: vertical
}
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--teal);
  background: #fff
}
.form-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px
}
.form-ok {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 600;
  font-size: .95rem
}
.form-ok.show {
  display: block
}
@media (max-width:900px) {
  .seminar-grid {
    grid-template-columns: 1fr
  }
}
@media (max-width:520px) {
  .row2 {
    grid-template-columns: 1fr
  }
}
.reviews {
  background: var(--white)
}
.rev-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px
}
.rev {
  padding: 32px;
  border-radius: 22px;
  background: var(--enamel);
  display: flex;
  flex-direction: column;
  gap: 22px
}
.rev .stars {
  color: var(--signal);
  letter-spacing: 3px;
  font-size: 1rem
}
.rev blockquote {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--ink)
}
.rev figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 750;
  font-stretch: 112%
}
.rev figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 700
}
.rev figcaption span {
  color: var(--muted);
  font-size: .9rem
}
@media (max-width:980px) {
  .rev-grid {
    grid-template-columns: 1fr
  }
}
.contact {
  background: var(--night)
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px,6vw,90px);
  align-items: start
}
.contact h2 {
  color: #fff;
  max-width: 14ch
}
.offices {
  display: grid;
  gap: 16px
}
.office {
  padding: 28px;
  border-radius: 22px;
  background: var(--night-2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07);
  transition: box-shadow .3s,transform .3s var(--ease)
}
.office:hover {
  box-shadow: 0 0 0 1px rgba(111,208,230,.4);
  transform: translateY(-3px)
}
.office .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6fd0e6;
  font-weight: 650;
  font-size: .88rem
}
.office h3 {
  color: #fff;
  margin: 10px 0 14px;
  font-size: 1.5rem
}
.office p {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #aeb9c1;
  font-size: .97rem;
  line-height: 1.5;
  margin-top: 8px
}
.office p .icon {
  margin-top: 4px;
  color: #6fd0e6;
  font-size: 15px
}
.office a:hover {
  color: #fff
}
@media (max-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr
  }
}
.site-footer {
  background: var(--enamel);
  padding: clamp(60px,8vw,100px) 0 calc(28px + var(--safe-b));
  border-top: 1px solid var(--line)
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px
}
.foot-brand img {
  height: 52px;
  width: auto
}
.foot-brand p {
  margin-top: 18px;
  color: var(--muted);
  max-width: 36ch;
  font-size: .97rem
}
.socials {
  display: flex;
  gap: 8px;
  margin-top: 22px
}
.socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
  transition: background .2s,color .2s,transform .2s
}
.socials a:hover {
  background: var(--teal-deep);
  color: #fff;
  transform: translateY(-2px)
}
.socials .icon {
  font-size: 17px
}
.foot-col h3 {
  font-stretch: 112%;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1;
  margin-bottom: 16px
}
.foot-col ul {
  list-style: none;
  display: grid;
  gap: 10px
}
.foot-col a {
  color: var(--muted);
  font-size: .97rem;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 10px
}
.foot-col a:hover {
  color: var(--teal-deep)
}
.foot-col .icon {
  font-size: 14px;
  color: var(--teal)
}
.foot-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .88rem
}
.foot-bottom button {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: .88rem
}
.foot-bottom button:hover {
  text-decoration: underline
}
@media (max-width:900px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr
  }
  .foot-brand {
    grid-column: 1/-1
  }
}
.page-hero {
  position: relative;
  height: min(calc(var(--vh)*88),820px);
  min-height: 520px;
  background: var(--night);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  perspective: 1000px;
  align-items: center;
  text-align: center
}
.page-hero .ph-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  will-change: transform
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,rgba(9,13,16,.55),rgba(9,13,16,.2) 70%),linear-gradient(0deg,rgba(9,13,16,.95) 0,rgba(9,13,16,.25) 40%,rgba(9,13,16,.35) 100%)
}
.page-hero .container {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--navh) + 20px);
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center
}
.page-hero .display {
  font-size: clamp(2.8rem,7vw,6.6rem);
  max-width: 13ch;
  color: #fff;
  margin: 0 auto
}
.page-hero .lead {
  margin: 24px auto 0;
  max-width: 60ch
}
.model-index {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(242,245,247,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: var(--navh)
}
.model-index .container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  scrollbar-width: none
}
.model-index .container::-webkit-scrollbar {
  display: none
}
.model-index a {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .2s,color .2s,box-shadow .2s
}
.model-index a:hover {
  box-shadow: 0 0 0 1px var(--teal)
}
.model-index a.on {
  background: var(--ink);
  color: #fff;
  box-shadow: none
}
.pd {
  padding: clamp(44px,5.5vw,84px) 0;
  border-bottom: 1px solid var(--line)
}
.pd:nth-of-type(2n) {
  background: var(--white)
}
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(40px,6vw,96px);
  align-items: center
}
.pd.flip .pd-media {
  order: 2
}
.pd-media {
  position: relative;
  height: clamp(320px,36vw,480px);
  display: grid;
  place-items: center;
  perspective: 1100px
}
.pd-plinth {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 78%;
  aspect-ratio: 1;
  margin-left: -39%;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(18,151,182,.18),rgba(18,151,182,.05) 60%,transparent 72%);
  transform: rotateX(76deg);
  transform-origin: 50% 100%
}
.pd-tag {
  display: inline-flex;
  height: 26px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 650;
  font-size: .76rem
}
.pd-name {
  margin-top: 12px;
  font-stretch: 122%;
  font-size: clamp(1.6rem,2.8vw,2.4rem);
  letter-spacing: -.04em
}
.pd-sub {
  margin-top: 6px;
  font-weight: 650;
  color: var(--teal-deep);
  font-size: .95rem
}
.pd-blurb {
  margin-top: 10px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
  max-width: 56ch
}
.pd-cols {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px
}
.pd-cols .specs {
  max-width: 560px
}
.pd-cols h3 {
  font-size: .9rem;
  letter-spacing: -.01em;
  margin-bottom: 8px
}
.feat {
  list-style: none;
  columns: 2;
  column-gap: 26px
}
.feat li {
  break-inside: avoid;
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ink-2)
}
.feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal)
}
.specs {
  display: grid;
  grid-template-columns: auto 1fr;
  border-top: 1px solid var(--line)
}
.specs dd,
.specs dt {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: .8rem
}
.specs dt {
  color: var(--muted);
  padding-right: 18px
}
.specs dd {
  color: var(--ink);
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums
}
.pd-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
@media (max-width:860px) {
  .pd-grid {
    grid-template-columns: 1fr
  }
  .pd.flip .pd-media {
    order: 0
  }
  .pd-media {
    height: 270px
  }
}
@media (max-width:520px) {
  .feat {
    columns: 1
  }
}
.band {
  background: var(--night);
  padding: clamp(70px,9vw,120px) 0
}
.band-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px
}
.band h2 {
  color: #fff;
  max-width: 16ch
}
.band .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
.about-hero {
  position: relative;
  height: calc(var(--vh)*100);
  min-height: 620px;
  background: var(--night);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  perspective: 1000px
}
.about-hero .ph-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: 50% 40%;
  will-change: transform
}
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(9,13,16,.97) 0,rgba(9,13,16,.82) 42%,rgba(9,13,16,.35) 75%,rgba(9,13,16,.25) 100%),radial-gradient(ellipse 60% 55% at 50% 60%,rgba(9,13,16,.4),rgba(9,13,16,0))
}
.about-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(50px,8vh,90px)
}
.about-hero .lead {
  margin-left: auto;
  margin-right: auto
}
.about-hero .display {
  font-size: clamp(2.6rem,6.2vw,6rem);
  max-width: 16ch;
  margin: 0 auto;
  color: #fff
}
.about-stats {
  margin-top: 44px;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px,5vw,72px);
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.14)
}
.about-stats b {
  display: block;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2rem,3.6vw,3rem);
  letter-spacing: -.04em;
  color: #fff;
  line-height: 1
}
.about-stats b i {
  font-style: normal;
  color: var(--signal)
}
.about-stats span {
  display: block;
  margin-top: 8px;
  color: #9facb5;
  font-size: .93rem
}
.founders {
  background: var(--white)
}
.founders-grid {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(40px,6vw,100px);
  align-items: center
}
.founders h2 span {
  display: block;
  color: var(--teal-deep)
}
.founders .creds {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.founders .creds span {
  display: inline-flex;
  height: 32px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--enamel);
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink-2)
}
.founders .story p {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 60ch
}
.portrait {
  position: relative;
  perspective: 1100px
}
.portrait-frame {
  position: relative;
  border-radius: 26px;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: var(--teal);
  transform: translate3d(22px,22px,-60px);
  opacity: .9
}
.portrait-frame img {
  position: relative;
  width: 100%;
  border-radius: 26px;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 45%;
  box-shadow: 0 40px 70px -30px rgba(13,18,22,.55)
}
.portrait figcaption {
  margin-top: 34px;
  color: var(--muted);
  font-size: .9rem
}
@media (max-width:900px) {
  .founders-grid {
    grid-template-columns: 1fr
  }
  .portrait {
    max-width: 520px
  }
}
.journey {
  background: var(--enamel)
}
.journey-grid {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(40px,6vw,100px)
}
.journey-intro {
  position: sticky;
  top: calc(var(--navh) + 40px);
  align-self: start
}
.chapters {
  position: relative;
  padding-left: 44px
}
.chapters::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line-2)
}
.chapters .fill {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 2px;
  height: calc(100% - 16px);
  background: var(--teal);
  transform-origin: 0 0;
  transform: scaleY(var(--jp,0))
}
.chapter {
  position: relative;
  padding-bottom: 64px
}
.chapter:last-child {
  padding-bottom: 0
}
.chapter::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--enamel);
  box-shadow: inset 0 0 0 2px var(--teal)
}
.chapter.lit::before {
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(18,151,182,.15)
}
.chapter .year {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.6rem,5vw,4.2rem);
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink)
}
.chapter .tag {
  margin-top: 10px;
  color: var(--teal-deep);
  font-weight: 650
}
.chapter h3 {
  margin-top: 18px;
  font-size: 1.5rem
}
.chapter p {
  margin-top: 12px;
  color: var(--muted);
  max-width: 56ch
}
@media (max-width:900px) {
  .journey-grid {
    grid-template-columns: 1fr
  }
  .journey-intro {
    position: static
  }
}
.cta {
  background: var(--night);
  overflow: hidden
}
.cta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(30px,6vw,90px);
  align-items: center
}
.cta h2 {
  color: #fff;
  max-width: 18ch
}
.cta .actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
@media (max-width:760px) {
  .cta-grid {
    grid-template-columns: 1fr
  }
}
.cube-css {
  --s: 150px;
  width: var(--s);
  height: var(--s);
  perspective: 800px;
  cursor: grab;
  touch-action: none
}
.cube-css .cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.cube-css .f {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #1c242b;
  padding: 6%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)
}
.cube-css .f svg {
  width: 100%;
  height: 100%;
  display: block
}
.cube-css .f1 {
  transform: translateZ(calc(var(--s)/2))
}
.cube-css .f2 {
  transform: rotateY(90deg) translateZ(calc(var(--s)/2))
}
.cube-css .f3 {
  transform: rotateX(90deg) translateZ(calc(var(--s)/2))
}
.cube-css .f4 {
  transform: rotateY(180deg) translateZ(calc(var(--s)/2))
}
.cube-css .f5 {
  transform: rotateY(-90deg) translateZ(calc(var(--s)/2))
}
.cube-css .f6 {
  transform: rotateX(-90deg) translateZ(calc(var(--s)/2))
}
.js [data-rv] {
  opacity: 0;
  transform: perspective(1000px) translate3d(0,46px,-180px) rotateX(12deg);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--ease),transform 1.2s var(--ease);
  transition-delay: calc(var(--d,0)*90ms)
}
.js [data-rv].in {
  opacity: 1;
  transform: none
}
.js .hero [data-hl] {
  transform: translate3d(0,105%,0) rotateX(-40deg);
  transform-origin: 50% 100%;
  opacity: 0
}
.js .hero.play [data-hl] {
  transform: none;
  opacity: 1;
  transition: transform 1.3s var(--ease),opacity .9s;
  transition-delay: calc(var(--d,0)*110ms + .1s)
}
.js .hero [data-hf] {
  opacity: 0;
  transform: translateY(18px)
}
.js .hero.play [data-hf] {
  opacity: 1;
  transform: none;
  transition: opacity 1s .55s,transform 1.1s var(--ease) .55s
}
@media (prefers-reduced-motion:reduce) {
  *,
  ::after,
  ::before {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
    transition-delay: 0s!important;
    scroll-behavior: auto!important
  }
  .js .hero [data-hf],
  .js .hero [data-hl],
  .js [data-rv] {
    opacity: 1!important;
    transform: none!important
  }
}
.bx {
  --bw: calc(var(--bh)*var(--ar));
  --bd: calc(var(--bw)*var(--dr));
  position: relative;
  width: var(--bw);
  height: var(--bh);
  transform-style: preserve-3d;
  --sl: .3;
  --sr: .5;
  --st: .15
}
.bx-f {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible
}
.bx-f::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none
}
.bx-front {
  width: var(--bw);
  height: var(--bh);
  transform: translateZ(calc(var(--bd)/2))
}
.bx-front img {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
  max-width: none;
  object-fit: fill;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
.bx-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 62%) 50% 0/300% 100% no-repeat
}
.bx-front::after {
  content: none
}
.bx-dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  pointer-events: none;
  opacity: 0
}
.bx-back,
.bx-left,
.bx-right {
  height: var(--bh)
}
.bx-left,
.bx-right {
  width: var(--bd);
  left: calc((var(--bw) - var(--bd))/ 2)
}
.bx-left {
  transform: rotateY(-90deg) translateZ(calc(var(--bw)/2))
}
.bx-right {
  transform: rotateY(90deg) translateZ(calc(var(--bw)/2))
}
.bx-left::after {
  opacity: var(--sl)
}
.bx-right::after {
  opacity: var(--sr)
}
.bx-f i {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center
}
.bx-right i {
  transform: scaleX(-1)
}
.bx-back {
  width: var(--bw);
  transform: rotateY(180deg) translateZ(calc(var(--bd)/2));
  background: #1d2024
}
.bx-back::after {
  opacity: .35
}
.bx-top {
  width: var(--bw);
  height: var(--bd);
  top: calc((var(--bh) - var(--bd))/ 2);
  transform: rotateX(90deg) translateZ(calc(var(--bh)/2));
  background: linear-gradient(180deg,#2c3035,#3b4046)
}
.bx-top::after {
  opacity: var(--st)
}
.bx.silver .bx-top {
  background: linear-gradient(180deg,#a9aeb3,#d3d7db)
}
.bx.silver .bx-back {
  background: #9aa0a5
}
.side-xlw {
  background-image: url('../images/side-xlw.webp')
}
.side-xls {
  background-image: url('../images/side-xls.webp')
}
.side-silver {
  background-image: url('../images/side-silver.webp')
}
.side-silver-stack {
  background-image: url('../images/side-silver-stack.webp')
}
.pd-media {
  perspective: 1500px;
  perspective-origin: 50% 35%
}
.pd-stage {
  position: relative;
  height: 100%;
  display: grid;
  place-items: end center;
  padding-bottom: 6%;
  transform-style: preserve-3d
}
.pd-stage .bx {
  --bh: min(350px,32vw)
}
.pd-stage .bx.tall {
  --bh: min(420px,38vw)
}
@media (max-width:860px) {
  .pd-stage .bx {
    --bh: 220px
  }
  .pd-stage .bx.tall {
    --bh: 250px
  }
}
.ring-item {
  width: auto;
  height: auto;
  margin: 0;
  transform-style: preserve-3d
}
.ring-item .bx {
  --bh: calc(var(--ih)*.8);
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,calc(var(--ih)*.5 - 100%))
}
.ring-item .bx.tall {
  --bh: calc(var(--ih)*1.02)
}
.ring-item::after {
  display: none
}
.services {
  --muted: #4d5358;
  --line: rgba(70,55,35,.18);
  --line-2: rgba(70,55,35,.3);
  background: #E6DBCA
}
.svc2 {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(32px,4vw,64px);
  align-items: start
}
.svc2-media {
  position: sticky;
  top: calc(var(--navh) + 24px);
  height: min(800px,calc(var(--vh)*100 - var(--navh) - 48px));
  perspective: 1400px;
  perspective-origin: 30% 40%
}
.svc2-deck {
  position: relative;
  height: 100%;
  transform-style: preserve-3d
}
.svc2-card {
  position: absolute;
  inset: 0 8% 5% 0;
  border-radius: 26px;
  overflow: hidden;
  background: #20292f;
  box-shadow: 0 40px 70px -34px rgba(13,18,22,.6);
  transform-origin: 50% 100%;
  transition: transform 1s var(--ease),opacity .8s var(--ease),filter .8s;
}
.svc2-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.svc2-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 26px;
  color: #fff;
  font-stretch: 112%;
  font-weight: 700;
  background: linear-gradient(0deg,rgba(9,13,16,.8),transparent)
}
.svc2-list {
  list-style: none;
  counter-reset: none
}
.svc2-item {
  position: relative;
  padding: 34px 0 34px 28px;
  border-top: 1px solid var(--line);
  cursor: default;
  min-height: min(46vh,340px);
  display: flex;
  flex-direction: column;
  justify-content: center
}
.svc2-item:last-child {
  border-bottom: 1px solid var(--line)
}
.svc2-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 34px;
  width: 3px;
  border-radius: 3px;
  background: var(--line-2);
  transition: background .4s,transform .6s var(--ease);
  transform-origin: 50% 0;
  transform: scaleY(.25)
}
.svc2-item h3 {
  font-stretch: 122%;
  font-size: clamp(1.6rem,2.6vw,2.4rem);
  letter-spacing: -.035em;
  color: var(--muted);
  transition: color .4s
}
.svc2-item p {
  margin-top: 12px;
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.02rem;
  opacity: .7;
  transition: opacity .4s,color .4s
}
.svc2-item img {
  display: none
}
.svc2-item.on::before {
  background: var(--signal);
  transform: scaleY(1)
}
.svc2-item.on h3 {
  color: var(--ink)
}
.svc2-item.on p {
  opacity: 1;
  color: var(--ink-2)
}
@media (max-width:900px) {
  .svc2 {
    grid-template-columns: 1fr
  }
  .svc2-media {
    display: none
  }
  .svc2-item {
    position: sticky;
    min-height: 0;
    margin-bottom: 14px;
    padding: 12px 12px 22px;
    border: 0;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 24px 40px -28px rgba(50,35,15,.55),0 0 0 1px rgba(70,55,35,.08);
    transform-origin: 50% 0
  }
  .svc2-item:last-child {
    margin-bottom: 0;
    border: 0
  }
  .svc2-item h3,
  .svc2-item p {
    margin-left: 8px;
    margin-right: 8px
  }
  .svc2-item::before {
    display: none
  }
  .svc2-item h3 {
    color: var(--ink)
  }
  .svc2-item p {
    opacity: 1;
    color: var(--ink-2)
  }
  .svc2-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 18px
  }
}
.family {
  background: var(--white)
}
.fam-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px
}
.fam {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  color: #fff;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  isolation: isolate
}
.fam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform .8s var(--ease)
}
.fam:hover::before {
  transform: scale(1.05)
}
.fam-a::before {
  background: radial-gradient(circle at 80% 20%,#2a3a45,transparent 60%),var(--night)
}
.fam-b::before {
  background: radial-gradient(circle at 80% 15%,#39c0dd,transparent 55%),var(--teal-deep)
}
.fam-c::before {
  background: radial-gradient(circle at 70% 15%,#4b5f86,transparent 60%),#141b27
}
.fam .tag {
  font-weight: 650;
  font-size: .9rem;
  color: rgba(255,255,255,.72)
}
.fam h3 {
  color: #fff;
  font-stretch: 122%;
  margin-top: 10px;
  letter-spacing: -.035em
}
.fam p {
  margin-top: 12px;
  color: rgba(255,255,255,.8);
  font-size: .98rem;
  max-width: 34ch
}
.fam .go {
  margin-top: auto;
  padding-top: 28px;
  font-weight: 700;
  font-stretch: 112%;
  display: inline-flex;
  align-items: center;
  gap: 8px
}
.fam .go .icon {
  transition: transform .3s var(--ease)
}
.fam:hover .go .icon {
  transform: translateX(4px)
}
@media (max-width:900px) {
  .fam-grid {
    grid-template-columns: 1fr
  }
  .fam {
    min-height: 260px
  }
}
.sub-hero {
  position: relative;
  min-height: min(calc(var(--vh)*86),820px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: calc(var(--navh) + 60px) 0 80px;
  perspective: 1000px
}
.sub-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center
}
.sub-hero .display {
  font-size: clamp(2.7rem,6.6vw,6.2rem);
  max-width: 14ch;
  margin: 14px auto 0
}
.sub-hero .lead {
  margin: 24px auto 0;
  max-width: 60ch
}
.sub-hero .hero-actions {
  justify-content: center
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  font-stretch: 112%;
  font-size: .95rem
}
.clean-hero {
  background: radial-gradient(ellipse 80% 70% at 50% 40%,#e9f8fc,#cfeaf2 60%,#b9dfea)
}
.clean-hero .display {
  color: var(--ink)
}
.clean-hero .brand-chip {
  background: #fff;
  color: var(--teal-deep);
  box-shadow: 0 0 0 1px rgba(11,110,135,.15)
}
.clean-hero .brand-chip b {
  color: var(--signal)
}
.clean-band {
  background: var(--white)
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,90px);
  align-items: center
}
.split .list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 28px
}
.split .list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--ink);
  font-weight: 550
}
.split .list .dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--teal-tint);
  color: var(--teal-deep)
}
.split .list .dot .icon {
  font-size: 13px
}
.order-card {
  border-radius: 28px;
  padding: clamp(28px,4vw,48px);
  background: var(--night);
  color: #c9d3da
}
.order-card h3 {
  color: #fff;
  font-stretch: 118%;
  font-size: 1.9rem
}
.order-card p {
  margin-top: 12px
}
.order-card .hero-actions {
  margin-top: 26px
}
@media (max-width:900px) {
  .split {
    grid-template-columns: 1fr
  }
}
.appl-hero .container {
  padding-bottom: 10px
}
.appl-hero .brand-chip {
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18)
}
.appl-hero .display {
  color: #fff
}
.appl-hero .lead {
  color: #b8c3d3
}
.lineup {
  position: relative;
  max-width: 1270px;
  margin: 40px auto 0;
  aspect-ratio: 1270/462
}
.lineup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 18%);
  mask-image: linear-gradient(180deg,transparent 0,#000 18%)
}
.hot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform .3s var(--ease),background .3s
}
.hot::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff
}
.hot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);
  animation: ping 2.4s var(--ease) infinite;
  animation-delay: var(--dl,0s)
}
@keyframes ping {
  0% {
    transform: scale(.6);
    opacity: 1
  }
  100% {
    transform: scale(1.6);
    opacity: 0
  }
}
.hot span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: .82rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s,transform .3s var(--ease)
}
.hot.on,
.hot:hover {
  transform: scale(1.15);
  background: var(--signal)
}
.hot.on span,
.hot:hover span {
  opacity: 1;
  transform: translateX(-50%)
}
@media (max-width:720px) {
  .hot {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px
  }
  .hot::after {
    inset: 6px
  }
  .hot span {
    display: none
  }
}
.appl-cats {
  background: #121823;
  padding: clamp(40px,6vw,70px) 0 clamp(80px,10vw,130px)
}
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px
}
.chips button {
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  color: #dce3ec;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
  font-weight: 600;
  transition: background .2s,color .2s,box-shadow .2s
}
.chips button.on,
.chips button:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: none
}
.appl-cta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
  align-items: center;
  padding: clamp(28px,4vw,48px);
  border-radius: 28px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08)
}
.appl-cta h2 {
  color: #fff;
  font-size: clamp(1.8rem,3.2vw,2.8rem)
}
.appl-cta p {
  color: #afbacb;
  margin-top: 12px
}
.appl-cta .hero-actions {
  margin-top: 0;
  justify-content: flex-end
}
@media (max-width:860px) {
  .appl-cta {
    grid-template-columns: 1fr
  }
  .appl-cta .hero-actions {
    justify-content: flex-start
  }
}
.blog-hero {
  background: radial-gradient(ellipse 70% 60% at 50% 30%,#1c2a33,var(--night) 70%)
}
.blog-logo {
  display: block;
  width: auto;
  height: clamp(46px,5vw,64px);
  margin-bottom: 10px
}
.blog-hero .display {
  color: #fff
}
.blog-hero .lead {
  color: #c3ccd2
}
.blog-hero .display,
.blog-hero .lead {
  text-shadow: 0 2px 28px rgba(0,0,0,.5)
}
.blog-hero .brand-chip {
  background: rgba(255,255,255,.06);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16)
}
.reels {
  background: var(--enamel)
}
.reel-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px 22px
}
.reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 18px 22px;
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line),0 30px 50px -36px rgba(13,18,22,.4)
}
.reel-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow: hidden;
  background: var(--night)
}
.reel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}
.reel-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #8e9ca6;
  font-size: .88rem;
  background: radial-gradient(circle at 50% 40%,#1c2a33,var(--night))
}
.reel-ph .cube-css {
  --s: 56px
}
.reel-meta {
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 10px
}
.reel-meta span {
  font-weight: 650;
  color: var(--ink);
  font-stretch: 112%
}
.reel-meta a {
  font-weight: 650;
  font-size: .9rem;
  color: var(--teal-deep)
}
.reel-meta a:hover {
  color: var(--ink)
}
.reel-more {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(26px,4vw,44px);
  border-radius: 28px;
  background: var(--night)
}
.reel-more h2 {
  color: #fff;
  font-size: clamp(1.7rem,3vw,2.6rem);
  max-width: 18ch
}
@media (max-width:1000px) {
  .reel-grid {
    grid-template-columns: repeat(2,1fr)
  }
}
@media (max-width:640px) {
  .reel-grid {
    grid-template-columns: 1fr
  }
}
.bx-floor {
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(var(--bw) * 1.9);
  height: calc(var(--bd) * 1.7);
  margin: calc(var(--bd) * -.85) 0 0 calc(var(--bw) * -.95);
  transform: rotateX(90deg);
  background: radial-gradient(closest-side,rgba(8,12,15,.5),rgba(8,12,15,.18) 55%,transparent);
  pointer-events: none
}
.ring-item .bx-floor {
  background: radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,.25) 55%,transparent)
}
.tap-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-stretch: 112%;
  font-weight: 700;
  font-size: .98rem;
  cursor: pointer
}
.tap-hint i {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal)
}
.tap-hint i::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--signal);
  animation: ping 1.8s var(--ease) infinite
}
.tap-hint:hover {
  background: rgba(255,255,255,.1)
}
.bx-front {
  transform-style: flat
}
.door {
  position: absolute;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  --dz: calc(var(--dd)*.78);
  --sw: calc(var(--dd)*3.1416/12*1.08)
}
.drum-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d
}
.drum-back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  transform: translateZ(calc(var(--dz)*-1));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
.drum-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sw);
  height: var(--dz);
  margin: calc(var(--dz)/-2) 0 0 calc(var(--sw)/-2);
  background: radial-gradient(circle,rgba(0,0,0,.5) 0 1.1px,transparent 1.6px) 0 0/7px 7px,linear-gradient(to bottom,#2b3035,#9aa1a8 70%,#c4c9ce);
  transform: rotateZ(var(--a)) translateY(calc(var(--dd)/2)) translateZ(calc(var(--dz)/-2)) rotateX(90deg);
  box-shadow: inset 0 0 0 999px rgba(0,0,0,var(--k,0));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
.glass {
  position: absolute;
  inset: -1%;
  border-radius: 50%;
  transform: translateZ(1px);
  pointer-events: none;
  background: radial-gradient(circle at 33% 27%,rgba(255,255,255,.34),rgba(255,255,255,.07) 26%,transparent 50%),radial-gradient(circle at 72% 78%,rgba(255,255,255,.1),transparent 35%),rgba(150,190,205,.07);
  box-shadow: inset 0 0 calc(var(--dd)*.12) rgba(0,0,0,.55)
}
.rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: translateZ(.5px);
  pointer-events: none;
  box-shadow: inset 0 0 calc(var(--dd)*.1) rgba(0,0,0,.6)
}
.side-xld {
  background-image: url('../images/side-xld.webp')
}

.logo-tile {
  display: inline-grid;
  place-items: center;
  aspect-ratio: 1.25;
  box-shadow: 0 24px 50px -24px rgba(11,70,90,.45),0 0 0 1px rgba(11,110,135,.1)
}
.logo-tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}
.appl-hero .logo-tile {
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6)
}
.biz-contact {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4,auto);
  justify-content: start;
  gap: 12px 34px;
  padding: 24px 28px;
  border-radius: 22px;
  background: var(--enamel);
  box-shadow: 0 0 0 1px var(--line)
}
.biz-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem
}
.biz-contact a:hover {
  color: var(--teal-deep)
}
.biz-contact .icon {
  color: var(--teal);
  font-size: 16px
}
.biz-contact.dark {
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1)
}
.biz-contact.dark a {
  color: #dce3ec
}
.biz-contact.dark a:hover {
  color: #fff
}
.biz-contact.dark .icon {
  color: #6fd0e6
}
@media (max-width:1100px) {
  .biz-contact {
    grid-template-columns: 1fr 1fr
  }
}
@media (max-width:620px) {
  .biz-contact {
    grid-template-columns: 1fr
  }
}
.fam-grid {
  grid-template-columns: repeat(4,1fr)
}
.fam {
  min-height: 380px;
  padding: 26px
}
.fam-logo.wide {
  width: 170px;
  height: 62px
}
.fam-logo img {
  max-height: 100%;
  object-fit: contain;
  display: block;
  height: 96px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35))
}
.fam h3 {
  font-size: clamp(1.45rem,1.9vw,1.9rem)
}
@media (max-width:1150px) {
  .fam-grid {
    grid-template-columns: repeat(2,1fr)
  }
}
@media (max-width:640px) {
  .fam-grid {
    grid-template-columns: 1fr
  }
}
.stat {
  text-align: center;
  padding-left: clamp(10px,2vw,28px)!important;
  padding-right: clamp(10px,2vw,28px)!important
}
.stat-num {
  justify-content: center
}
.hero-media {
  will-change: transform;
  backface-visibility: hidden
}
.hero-media video {
  transform: translateZ(0)
}
.fam-logo {
  place-items: center;
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.5);
  width: auto;
  height: 96px;
  padding: 0;
  margin-bottom: 20px;
  background: 0 0;
  box-shadow: none;
  border-radius: 0;
  justify-items: start;
  place-items: center start;
  display: block
}
.fam-logo.wide img {
  height: 54px;
  max-width: 200px
}
.fam-b::before {
  background: radial-gradient(circle at 80% 12%,#fff,transparent 55%),#cfeaf2
}
.fam-b,
.fam-b h3 {
  color: var(--ink)
}
.fam-b p {
  color: var(--ink-2)
}
.fam-b .tag {
  color: var(--teal-deep)
}
.fam-b .fam-logo img {
  filter: drop-shadow(0 10px 18px rgba(11,70,90,.25))
}
.appl-hero {
  --H: max(640px,calc(var(--vh)*100));
  position: relative;
  display: block;
  height: var(--H);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #0b1633;
  text-align: center
}
.appl-stage {
  position: absolute;
  left: 50%;
  top: calc(var(--H)*.585);
  width: max(100%,calc(var(--H)*1.05));
  aspect-ratio: 1;
  transform: translate(-50%,-48%)
}
.appl-stage img {
  width: 100%;
  height: 100%;
  display: block
}
.appl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(6,12,28,.78) 0,rgba(6,12,28,.45) 38%,rgba(6,12,28,0) 56%),linear-gradient(0deg,#121823 0,rgba(18,24,35,0) 16%)
}
.appl-text {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--navh) + var(--safe-t) + 28px);
  display: flex;
  flex-direction: column;
  align-items: center
}
.appl-text .logo-tile {
  border-radius: 22px
}
.appl-text .display {
  color: #fff;
  font-size: clamp(2.3rem,5vw,4.6rem);
  max-width: 15ch;
  margin: 16px auto 0;
  text-shadow: 0 4px 30px rgba(0,0,0,.45)
}
.appl-text .lead {
  color: #c9d3e4;
  margin: 18px auto 0;
  max-width: 58ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.5)
}
.appl-hero .hot {
  z-index: 2
}
@media (max-width:720px) {
  .appl-text .lead {
    font-size: .98rem;
    max-width: 34ch
  }
}
.logo-tile {
  width: clamp(190px,20vw,270px);
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: 0 0;
  box-shadow: none
}
.logo-tile img {
  width: 100%;
  height: auto;
  max-height: none;
  filter: drop-shadow(0 14px 26px rgba(11,70,90,.28))
}
.appl-hero .logo-tile,
.appl-text .logo-tile {
  width: clamp(140px,13vw,180px);
  padding: 0;
  box-shadow: none
}
.appl-text .logo-tile img {
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55))
}
.form-legal {
  margin-top: 12px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center
}
.form-legal a {
  color: var(--teal-deep);
  font-weight: 600;
  border-bottom: 1px solid currentColor
}
.foot-links {
  display: inline-flex;
  gap: 22px;
  align-items: center
}
.foot-links a {
  color: var(--teal-deep);
  font-weight: 600;
  font-size: .88rem
}
.foot-links a:hover {
  text-decoration: underline
}
.legal-hero {
  background: var(--enamel);
  padding: calc(var(--navh) + var(--safe-t) + 70px) 0 20px
}
.legal-hero .display {
  font-size: clamp(2.6rem,6vw,5rem)
}
.legal-hero .updated {
  margin-top: 14px;
  color: var(--muted)
}
.legal {
  background: var(--enamel);
  padding: 30px 0 clamp(80px,10vw,130px)
}
.legal .container,
.legal-hero .container {
  max-width: 860px
}
.legal .intro {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink-2)
}
.legal h2 {
  font-stretch: 112%;
  font-size: clamp(1.35rem,2.2vw,1.75rem);
  margin: 48px 0 14px
}
.legal p {
  margin-top: 12px;
  line-height: 1.7;
  color: var(--ink-2)
}
.legal p strong {
  color: var(--ink)
}
.legal ul {
  margin: 12px 0 0 1.2em;
  display: grid;
  gap: 8px;
  color: var(--ink-2);
  line-height: 1.6
}
.legal a {
  color: var(--teal-deep);
  font-weight: 600;
  border-bottom: 1px solid currentColor
}

.seb-fab {
  position: fixed;
  right: calc(10px + env(safe-area-inset-right,0px));
  bottom: calc(10px + var(--safe-b));
  z-index: 35;
  width: 124px;
  height: 124px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .35s var(--ease), visibility .35s, color .4s
}
.seb-fab.on-dark { color: #EEF2F4 }
.seb-fab-icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 10px 12px rgba(8,12,15,.35));
  transition: transform .3s var(--ease)
}
.seb-fab .cube-css.fab-cube {
  --s: 40px;
  display: block;
  perspective: 600px;
  cursor: pointer;
  touch-action: manipulation
}
.fab-cube .cube {
  display: block;
  transform: rotateX(-35.26deg) rotateY(-45deg);
  animation: fabCube 9s linear infinite
}
.fab-cube .f { border-radius: 3px }
@keyframes fabCube {
  from { transform: rotateX(-35.26deg) rotateY(-45deg) }
  to { transform: rotateX(-35.26deg) rotateY(315deg) }
}
.seb-fab:hover .fab-cube .cube,
.seb-fab:focus-visible .fab-cube .cube { animation-play-state: paused }
.seb-fab:hover .seb-fab-icon,
.seb-fab:focus-visible .seb-fab-icon { transform: scale(1.08) }
.seb-fab:active .seb-fab-icon { transform: scale(.95) }
.seb-fab:focus-visible { outline: none }
.seb-fab:focus-visible .seb-fab-icon { outline: 3px solid var(--signal); outline-offset: 4px }
.seb-fab-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: .06em;
  fill: currentColor
}
body.intro-on .seb-fab,
body.menu-open .seb-fab,
body.faq-open .seb-fab { opacity: 0; visibility: hidden }
body:not(.intro-on) .seb-fab { animation: fabIn .7s .9s var(--ease) both }
@keyframes fabIn { from { opacity: 0; transform: translateY(14px) scale(.8) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .fab-cube .cube { animation: none }
}

.faq-scrim {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(8,12,15,.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s
}
.faq-pop {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right,0px));
  bottom: calc(16px + var(--safe-b));
  z-index: 49;
  width: min(430px, calc(100vw - 32px));
  max-height: min(680px, calc(100% - var(--navh) - 40px - var(--safe-b)));
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink-2);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(24,34,42,.08), 0 30px 70px -20px rgba(8,12,15,.6);
  transform-origin: 100% 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.94);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .4s
}
body.faq-open .faq-scrim { opacity: 1; visibility: visible }
body.faq-open .faq-pop { opacity: 1; visibility: visible; transform: none }
.faq-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px 20px;
  border-bottom: 1px solid var(--line)
}
.faq-head img { width: 34px; height: 34px; flex: none }
.faq-head h2 { font-size: 1.15rem; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.15 }
.faq-head p { font-size: .82rem; color: var(--muted); line-height: 1.3; margin-top: 3px }
.faq-x {
  margin-left: auto;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--enamel);
  color: var(--ink);
  transition: background .2s
}
.faq-x:hover { background: #e3e9ed }
.faq-x svg { width: 16px; height: 16px }
.faq-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px 20px 8px
}
.faq-list details { border-bottom: 1px solid var(--line) }
.faq-list details:last-child { border-bottom: 0 }
.faq-list summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink)
}
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--enamel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 6v10M6 11h10' stroke='%2318222A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/22px no-repeat;
  transition: transform .3s var(--ease), background-color .2s
}
.faq-list details[open] summary::after { transform: rotate(45deg); background-color: #fde3d8 }
.faq-list summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 6px }
.faq-list .faq-a { padding: 0 36px 16px 0; font-size: .9rem; line-height: 1.6; color: var(--muted) }
.faq-list .faq-a a { color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.faq-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--enamel);
  border-radius: 0 0 22px 22px
}
.faq-foot span { font-size: .85rem; color: var(--muted); line-height: 1.3 }
.faq-foot .btn { height: 44px; padding: 0 18px; font-size: .88rem }
@media (max-width:560px) {
  .faq-pop {
    right: 10px;
    left: 10px;
    bottom: calc(10px + var(--safe-b));
    width: auto;
    max-height: calc(100% - 80px - var(--safe-b))
  }
  .faq-foot { flex-wrap: wrap }
}
@media (prefers-reduced-motion: reduce) {
  .seb-fab, .seb-fab-icon, .faq-pop, .faq-scrim { transition: none }
  body:not(.intro-on) .seb-fab { animation: none }
}

.fam-d::before {
  background: radial-gradient(circle at 80% 12%,#fff,transparent 55%),#cfeaf2
}
.fam-d,
.fam-d h3 {
  color: var(--ink)
}
.fam-d p {
  color: var(--ink-2)
}
.fam-d .tag {
  color: var(--teal-deep)
}
.fam-d .fam-logo img {
  filter: drop-shadow(0 10px 18px rgba(11,70,90,.25))
}
.cp-line {
  background: radial-gradient(ellipse 80% 55% at 50% 0,#123a4b 0,var(--night) 72%)
}
.cp-line .sec-head h2 {
  color: #fff
}
.cp-line .sec-head .lead {
  color: #9fb0ba
}
.cp-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px
}
.cp {
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg,var(--tint) 0,#fff 78%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08),0 40px 60px -40px rgba(0,0,0,.7);
  transition: transform .5s var(--ease),box-shadow .5s var(--ease)
}
.cp:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14),0 50px 70px -40px rgba(0,0,0,.8)
}
.cp-media {
  position: relative;
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 30px 20px 26px;
  background: radial-gradient(ellipse 62% 58% at 50% 46%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 100%)
}
.cp-media::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(13,18,22,.22),transparent)
}
.cp-media img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: none;
  transition: transform .6s var(--ease)
}
.cp:hover .cp-jug {
  transform: translateY(-10px) rotate(-3deg)
}
.cp:hover .cp-bottle {
  transform: translateY(-16px) rotate(4deg)
}
.cp:hover .cp-media.solo .cp-bottle {
  transform: translateY(-12px) rotate(-3deg)
}
.cp-jug {
  height: 100%
}
.cp-bottle {
  height: 74%;
  margin-left: -34px
}
.cp-media.solo .cp-bottle {
  height: 92%;
  margin-left: 0
}
.cp-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px
}
.cp-type {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 1px rgba(11,110,135,.14);
  color: var(--teal-deep);
  font-weight: 650;
  font-size: .8rem
}
.cp h3 {
  margin-top: 8px;
  font-size: 1.4rem
}
.cp-ask {
  display: none
}
.cp p {
  margin-top: 10px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55
}
@media (max-width:1000px) {
  .cp-grid {
    grid-template-columns: repeat(2,1fr)
  }
}

.ha-head {
  margin-top: clamp(56px,7vw,90px);
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 20px 64px;
  align-items: end
}
.ha-head h2 {
  color: #fff;
  font-size: clamp(1.9rem,3.6vw,3rem)
}
.ha-head .lead {
  color: #afbacb;
  justify-self: end
}
.ha-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px
}
.ha {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transition: box-shadow .3s,transform .3s var(--ease)
}
.ha:hover {
  box-shadow: 0 0 0 1px rgba(111,208,230,.4);
  transform: translateY(-3px)
}
.ha-media {
  position: relative;
  height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 26px 22px 30px;
  background: radial-gradient(ellipse 70% 60% at 50% 58%,rgba(143,180,255,.18),transparent 72%)
}
.ha-media::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 22px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(0,0,0,.6),transparent)
}
.ha-media img {
  position: relative;
  z-index: 1;
  max-width: 88%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain
}
.ha-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
  border-top: 1px solid rgba(255,255,255,.07)
}
.ha-type {
  color: #6fd0e6;
  font-weight: 650;
  font-size: .84rem
}
.ha h3 {
  margin-top: 6px;
  color: #fff;
  font-size: 1.2rem
}
.ha p {
  margin-top: 8px;
  color: #afbacb;
  font-size: .92rem;
  line-height: 1.5
}
.ha-ask {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-stretch: 112%;
  font-size: .92rem
}
.ha-ask .icon {
  transition: transform .3s var(--ease)
}
.ha-ask:hover .icon {
  transform: translateX(4px)
}
@media (max-width:1100px) {
  .ha-grid {
    grid-template-columns: repeat(2,1fr)
  }
}
@media (max-width:860px) {
  .ha-head {
    grid-template-columns: 1fr
  }
  .ha-head .lead {
    justify-self: start
  }
}
@media (max-width:520px) {
  .ha-grid {
    gap: 12px
  }
  .ha-media {
    height: 160px;
    padding: 18px 12px 22px
  }
  .ha-body {
    padding: 16px 14px 18px
  }
  .ha h3 {
    font-size: 1.02rem
  }
  .ha p {
    font-size: .85rem
  }
}
.blog-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none
}
.blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 58% 46% at 50% 54%,rgba(8,11,14,.5),rgba(8,11,14,0) 100%),radial-gradient(ellipse 120% 90% at 50% 50%,rgba(8,11,14,0) 40%,rgba(8,11,14,.7) 100%),linear-gradient(180deg,rgba(8,11,14,.55) 0,rgba(8,11,14,.12) 38%,rgba(8,11,14,.2) 62%,rgba(8,11,14,.92) 100%)
}
.floaters {
  position: absolute;
  inset: 0;
  pointer-events: none
}
.floater {
  position: absolute;
  height: var(--fh);
  will-change: transform
}
.floater img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 22px 20px rgba(11,70,90,.3));
  animation: clFloat var(--ft,6s) ease-in-out var(--fd,0s) infinite alternate
}
.fl1 { left: 4%; top: 17%; --fh: clamp(150px,15vw,250px); --ft: 6.5s }
.fl2 { left: 8%; top: 64%; --fh: clamp(120px,12vw,200px); --ft: 5.5s; --fd: -3.4s }
.fl3 { right: 7%; top: 16%; --fh: clamp(120px,12vw,200px); --ft: 6s; --fd: -2.6s }
.fl4 { right: 4%; top: 60%; --fh: clamp(150px,15vw,250px); --ft: 7.5s; --fd: -4s }
@media (max-width:1099px) {
  .clean-hero {
    padding-bottom: clamp(160px,24vw,230px)
  }
  .fl1,
  .fl3 {
    display: none
  }
  .fl2,
  .fl4 {
    top: auto;
    bottom: 26px;
    --fh: clamp(112px,20vw,180px)
  }
  .fl2 { left: 22% }
  .fl4 { right: 22% }
}
@keyframes clFloat {
  from { transform: translateY(0) rotate(-3deg) }
  to { transform: translateY(-22px) rotate(3deg) }
}
.cl-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(18px,2.4vw,28px) 0;
  background: var(--teal-deep);
  color: #fff
}
.cl-track {
  display: flex;
  width: max-content;
  animation: clRun 40s linear infinite
}
.cl-run {
  display: flex;
  align-items: center;
  flex: none
}
.cl-run span {
  padding: 0 clamp(18px,2.4vw,34px);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.5rem,3.4vw,2.8rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  white-space: nowrap
}
.cl-run span.o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.85)
}
.cl-run i {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal)
}
@keyframes clRun {
  to { transform: translateX(-50%) }
}
.art-off .ring,
.art-off .ring-floor,
.art-off .svc2-deck,
.art-off .pd-stage {
  visibility: hidden
}
@media (max-width:900px) {
  .appl-stage {
    top: calc(var(--H)*.7);
    width: 106%
  }
}
@media (max-width:720px) {
  .seb-fab {
    scale: .7;
    transform-origin: 100% 100%
  }
  .ring-sticky .lead {
    font-size: .92rem
  }
}
@media (max-width:600px) {
  .fam {
    position: sticky;
    transform-origin: 50% 0
  }
}
@media (max-width:420px) {
  .about-hero .display {
    font-size: 10.2vw
  }
  .page-hero .display {
    font-size: 10.6vw
  }
}
@media (max-width:720px) {
  .cp-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 12px
  }
  .cp {
    border-radius: 24px;
    background: rgba(255,255,255,.04);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08)
  }
  .cp:hover {
    transform: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08)
  }
  .cp-media {
    height: 160px;
    padding: 18px 12px 22px;
    background: radial-gradient(ellipse 70% 60% at 50% 58%,rgba(143,180,255,.18),transparent 72%)
  }
  .cp-media::after {
    bottom: 14px;
    height: 14px;
    background: radial-gradient(closest-side,rgba(0,0,0,.6),transparent)
  }
  .cp-bottle {
    margin-left: -16px
  }
  .cp-body {
    padding: 16px 14px 18px;
    border-top: 1px solid rgba(255,255,255,.07)
  }
  .cp-type {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #6fd0e6;
    font-size: .84rem
  }
  .cp h3 {
    margin-top: 6px;
    color: #fff;
    font-size: 1.02rem
  }
  .cp p {
    margin-top: 8px;
    color: #afbacb;
    font-size: .85rem;
    line-height: 1.5
  }
  .cp-ask {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    color: #fff;
    font-weight: 700;
    font-stretch: 112%;
    font-size: .92rem
  }
  .site-footer {
    padding: 40px 0 calc(84px + var(--safe-b))
  }
  .foot-grid {
    gap: 28px 20px
  }
  .foot-brand img {
    height: 42px
  }
  .foot-brand p {
    margin-top: 12px;
    max-width: none;
    font-size: .88rem;
    line-height: 1.5
  }
  .socials {
    margin-top: 14px
  }
  .foot-col h3 {
    margin-bottom: 10px;
    font-size: .92rem
  }
  .foot-col ul {
    gap: 2px
  }
  .foot-col a {
    min-height: 34px;
    font-size: .88rem;
    line-height: 1.25
  }
  .foot-col:last-child {
    grid-column: 1/-1
  }
  .foot-col:last-child ul {
    grid-template-columns: repeat(2,1fr);
    gap: 2px 20px
  }
  .foot-bottom {
    margin-top: 24px;
    padding-top: 16px;
    flex-direction: column;
    gap: 8px;
    font-size: .8rem;
    line-height: 1.5
  }
  .foot-links a,
  .foot-bottom button {
    font-size: .8rem
  }
}
@media (max-width:360px) {
  .cp-body {
    padding: 14px 10px 16px
  }
  .cp-type {
    font-size: .74rem
  }
  .cp h3 {
    font-size: .84rem
  }
  .cp p {
    font-size: .8rem
  }
  .cp-ask {
    font-size: .82rem;
    white-space: nowrap;
    gap: 5px
  }
}