/* =====================================================================
   United Advisory for HNIs | styles.css
   ---------------------------------------------------------------------
   Contents
     1.  Design tokens (colours, fonts)        :root
     2.  Base elements and layout              body, .wrap, h1-h3, section
     3.  Header and navigation                 .top, .brand, .nav, .btn
     4.  Hero                                  .hero
     5.  Two-column text, quotes               .split, .prose, .quote
     6.  Calculator                            .calc, .panel, .field, .out-row
     7.  Airplane background (structure)       .has-plane, .plane-mark
     8.  3D layer helpers                      .hero3d, .glass, .tilt
     9.  How it works / deliverables / why     .steps, .grid3, .why
     10. Fees, deadlines, contact, footer      .fee, .dl, .contact, footer
     11. Responsive breakpoints                @media (max-width:900px / 600px)
     12. Cinematic scroll film                 .film, .ch, .film-rail
     13. Alternating white / blue sections     .s-white, .s-blue, .b1, .b2
   To change the brand colours, edit the variables in section 1 and the
   two blue gradients in section 13 (section.b1 / section.b2).
   ===================================================================== */

:root {
  --navy: #10354D;
  --navy-2: #0B2638;
  --teal: #0BC2EB;
  --teal-ink: #07799A;
  --ground: #F3F7FB;
  --paper: #FFFFFF;
  --ink: #0E2233;
  --muted: #4A5E6E;
  --line: #D6E2EE;
  --band-ink: #F3F7FB;
  --band-muted: #B9CCDA;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0A1A26;
    --paper: #10263A;
    --ink: #E8F0F6;
    --muted: #9FB3C3;
    --line: #23405A;
    --teal-ink: #4CC6EA;
    --navy: #0D2F45;
    --navy-2: #081C2A;
  }
}

:root[data-theme="dark"] {
  --ground: #0A1A26;
  --paper: #10263A;
  --ink: #E8F0F6;
  --muted: #9FB3C3;
  --line: #23405A;
  --teal-ink: #4CC6EA;
  --navy: #0D2F45;
  --navy-2: #081C2A;
}

*,
*::before,
*::after {
  box-sizing: inherit
}

[hidden] {
  display: none !important
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px)
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%
}

a {
  color: var(--teal-ink)
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em
}

h2 {
  font-size: clamp(30px, 4vw, 44px);
  max-width: 22ch
}

h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25
}

p {
  margin: 0
}

.lede {
  font-size: 19px;
  color: var(--muted);
  max-width: 60ch;
  margin-top: 16px
}

section {
  padding: 96px 0
}

.band {
  background: var(--navy);
  color: var(--band-ink)
}

.band h2,
.band h3 {
  color: #fff
}

.band .lede {
  color: var(--band-muted)
}

/* header */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line)
}

.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: #fff
}

.nav {
  display: flex;
  gap: 22px;
  align-items: center
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500
}

.nav a:hover {
  color: var(--teal-ink)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: var(--sans)
}

.btn-primary {
  background: var(--teal);
  color: #062232
}

.btn-primary:hover {
  background: #34CFF1
}

.btn-ghost {
  border-color: currentColor;
  color: inherit;
  background: transparent
}

.nav .btn {
  min-height: 40px;
  padding: 0 18px;
  font-size: 15px
}

@media (max-width:900px) {
  .nav a:not(.btn) {
    display: none
  }
}

/* hero */
.hero {
  padding: 88px 0 72px
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center
}

.hero h1 {
  font-size: clamp(46px, 7vw, 92px);
  line-height: .98;
  letter-spacing: -0.025em
}

.hero h1 span {
  display: block;
  color: var(--teal-ink)
}

.hero .lede {
  font-size: 21px
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px
}

.hero-cta .btn-ghost {
  color: var(--ink)
}

.ledger {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px
}

.ledger-title {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600
}

.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px
}

.ledger-row:last-of-type {
  border-bottom: 0
}

.ledger-row .k {
  color: var(--muted);
  font-size: 15px
}

.ledger-row .v {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums
}

.ledger-row.save .v {
  color: var(--teal-ink)
}

.ledger small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px
}

.engagement {
  margin-top: 40px;
  font-size: 15px;
  color: var(--muted)
}

.engagement strong {
  color: var(--ink)
}

/* clock */
.clock {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 40px;
  max-width: 640px
}

.clock div {
  height: 120px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  font-size: 14px;
  color: var(--band-muted)
}

.clock div.irs {
  background: var(--teal);
  color: #062232;
  font-weight: 600
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 48px
}

.stat .n {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  color: #fff;
  line-height: 1
}

.stat .l {
  font-weight: 600;
  margin-top: 10px;
  color: #fff
}

.stat p {
  color: var(--band-muted);
  margin-top: 6px;
  max-width: 44ch
}

/* two col text */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start
}

.split p+p {
  margin-top: 16px
}

.prose p {
  color: var(--muted);
  max-width: 62ch
}

.prose p strong {
  color: var(--ink)
}

.quote {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink);
  border-top: 3px solid var(--teal);
  padding-top: 20px
}

/* cost */
.cost {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 48px
}

.cost .box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px
}

.cost .box .n {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.cost .box.hi {
  background: rgba(11, 194, 235, .12);
  border-color: var(--teal);
  color: #fff
}

.cost .box.hi .n {
  color: var(--teal)
}

.cost .box p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px
}

.cost .box.hi p {
  color: var(--band-muted)
}

.cost .x {
  font-family: var(--serif);
  font-size: 36px;
  color: var(--teal-ink);
  font-weight: 700;
  text-align: center
}

.fine {
  font-size: 14px;
  color: var(--muted);
  margin-top: 20px;
  max-width: 70ch
}

/* growth chart */
.growth {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 56px;
  align-items: center
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 300px;
  border-bottom: 1px solid var(--line);
  padding-top: 24px
}

.bars .b {
  flex: 1;
  background: var(--navy);
  border-radius: 6px 6px 0 0;
  position: relative
}

.bars .b:last-child {
  background: var(--teal)
}

.bars .b span {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

.bars-x {
  display: flex;
  gap: 10px;
  margin-top: 8px
}

.bars-x span {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--muted)
}

.big {
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 84px);
  font-weight: 700;
  line-height: 1;
  color: var(--teal-ink)
}

/* list rows */
.rows {
  margin-top: 48px;
  border-top: 1px solid var(--line)
}

.row {
  display: grid;
  grid-template-columns: 64px 1fr 1.4fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start
}

.row .i {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--teal-ink);
  font-weight: 700
}

.row p {
  color: var(--muted)
}

/* strategies */
.strat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 48px
}

.strat>div {
  background: var(--paper);
  padding: 28px
}

.strat>div.feature {
  background: var(--navy);
  color: #fff
}

.strat>div.feature h3 {
  color: #fff
}

.strat>div.feature p {
  color: var(--band-muted)
}

.strat p {
  color: var(--muted);
  margin-top: 10px;
  font-size: 16px
}

.tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #062232;
  background: var(--teal);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px
}

/* calculator */
.calc {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 40px;
  margin-top: 48px
}

.panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 28px
}

.field {
  margin-bottom: 20px
}

.field label {
  display: block;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  font-size: 15px
}

.field .hint {
  font-size: 13px;
  color: var(--band-muted);
  margin-top: 6px
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: #0B2638;
  color: #fff;
  font: 600 18px var(--sans);
  padding: 0 14px;
  font-variant-numeric: tabular-nums
}

.field input[aria-invalid="true"] {
  border-color: #FFB86B
}

.err {
  color: #FFD29A;
  font-size: 14px;
  margin-top: 6px
}

.out-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-variant-numeric: tabular-nums
}

.out-row .k {
  color: var(--band-muted)
}

.out-row .v {
  font-weight: 600;
  color: #fff
}

.out-row.strong .v {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--teal)
}

.out-row.total {
  border-bottom: 0;
  padding-top: 18px
}

.out-row.total .k {
  color: #fff;
  font-weight: 600
}

.out-row.total .v {
  font-family: var(--serif);
  font-size: 32px;
  color: #fff
}

.note {
  font-size: 14px;
  color: var(--band-muted);
  margin-top: 16px
}

.pill {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(11, 194, 235, .14);
  color: #BFEFFB;
  font-size: 14px
}

.more {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 16px;
  margin-top: 4px
}

.more summary {
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  min-height: 32px;
  margin-bottom: 12px
}

.cal {
  margin: 40px 0 0;
  max-width: 620px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 22px
}

.cal figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px
}

.cal-m {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #fff
}

.cal-key {
  font-size: 13px;
  color: var(--band-muted);
  display: flex;
  align-items: center;
  gap: 8px
}

.cal-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px
}

.k-tax {
  background: var(--teal)
}

.k-you {
  background: rgba(255, 255, 255, .18);
  margin-left: 8px
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px
}

.ch {
  font-size: 12px;
  font-weight: 600;
  color: var(--band-muted);
  text-align: center;
  padding-bottom: 4px
}

.cd {
  height: 58px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.cd span {
  font-size: 13px;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.cd em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #062232
}

.cd.tax {
  background: var(--teal)
}

.cd.tax span {
  color: #062232;
  font-weight: 700
}

.cal-sum {
  font-size: 14px;
  color: var(--band-muted);
  margin-top: 12px
}

.irsquote {
  margin: 48px 0 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--teal);
  max-width: 760px
}

.irsquote p {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.25;
  color: #fff;
  font-weight: 600
}

@media (max-width:600px) {
  .cd {
    height: 46px;
    padding: 4px 6px
  }

  .cd em {
    font-size: 10px
  }
}

.has-plane {
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.has-plane>.wrap {
  position: relative;
  z-index: 1
}

.plane-mark {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(1180px, 120vw);
  height: auto;
  transform: translate(-44%, -50%);
  opacity: .14;
  pointer-events: none;
  animation: plane-drift 26s ease-in-out infinite alternate
}

@keyframes plane-drift {
  from {
    transform: translate(-50%, -47%)
  }

  to {
    transform: translate(-38%, -54%)
  }
}

@media (prefers-reduced-motion: reduce) {
  .plane-mark {
    animation: none
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plane-mark {
    opacity: .2;
    filter: brightness(2.2) saturate(.8)
  }
}

:root[data-theme="dark"] .plane-mark {
  opacity: .2;
  filter: brightness(2.2) saturate(.8)
}

@media (max-width:900px) {
  .plane-mark {
    width: 160vw;
    opacity: .11
  }
}

/* ---------- 3D layer ---------- */
.hero {
  position: relative;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% 40%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(11, 194, 235, .18), transparent 70%);
  pointer-events: none
}

.hero-visual {
  position: relative
}

.hero3d {
  position: relative;
  height: 420px;
  margin: -60px -40px 0 -20px
}

.hero3d canvas {
  width: 100%;
  height: 100%;
  display: block
}

.hero-visual .ledger {
  position: relative;
  margin: -90px 0 0 -10px;
  width: min(340px, 100%);
  z-index: 2;
  padding: 22px
}

.hero-visual .ledger .v {
  font-size: 24px
}

.glass {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(16, 53, 77, .45)
}

.tilt {
  transition: transform .25s ease;
  transform-style: preserve-3d;
  will-change: transform
}

.plane3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .32;
  pointer-events: none
}

.has-3d .plane-mark {
  display: none
}

/* isometric bars */
.bars3d {
  gap: 16px;
  padding-right: 12px
}

.bars3d .b {
  border-radius: 0;
  background: linear-gradient(90deg, #123D58, #1B5476)
}

.bars3d .b::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 100%;
  height: 10px;
  background: #3F7A9E;
  transform: skewX(-45deg);
  transform-origin: bottom left
}

.bars3d .b::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 10px;
  height: 100%;
  background: #0B2638;
  transform: skewY(-45deg);
  transform-origin: top left
}

.bars3d .b:last-child {
  background: linear-gradient(90deg, #0BC2EB, #34CFF1)
}

.bars3d .b:last-child::before {
  background: #8BE3F7
}

.bars3d .b:last-child::after {
  background: #0788A6
}

.bars3d .b span {
  top: -34px
}

.bars3d .b {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1)
}

.bars3d.in .b {
  transform: scaleY(1)
}

.bars3d.in .b:nth-child(2) {
  transition-delay: .05s
}

.bars3d.in .b:nth-child(3) {
  transition-delay: .1s
}

.bars3d.in .b:nth-child(4) {
  transition-delay: .15s
}

.bars3d.in .b:nth-child(5) {
  transition-delay: .2s
}

.bars3d.in .b:nth-child(6) {
  transition-delay: .25s
}

.bars3d.in .b:nth-child(7) {
  transition-delay: .3s
}

.bars3d.in .b:nth-child(8) {
  transition-delay: .35s
}

.bars3d.in .b:nth-child(9) {
  transition-delay: .4s
}

.bars3d.in .b:nth-child(10) {
  transition-delay: .45s
}

/* 3D calendar */
.cal3d {
  perspective: 1100px
}

.cal3d .cal-grid {
  transform: rotateX(22deg) rotateZ(-2deg) scale(.96);
  transform-style: preserve-3d;
  transform-origin: 50% 0
}

.cal3d .cd {
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s
}

.cal3d.in .cd.tax {
  transform: translateZ(16px);
  box-shadow: 0 14px 18px -8px rgba(0, 0, 0, .55)
}

@media (prefers-reduced-motion: reduce) {
  .bars3d .b {
    transform: none;
    transition: none
  }

  .cal3d .cd {
    transition: none
  }

  .tilt {
    transition: none
  }
}

@media (max-width:900px) {
  .hero-visual {
    min-height: 0
  }

  .hero3d {
    position: relative;
    inset: auto;
    height: 320px;
    margin: -20px -24px 0
  }

  .hero-visual .ledger {
    position: relative;
    left: 0;
    width: 100%
  }
}

@media (max-width:600px) {
  .cal3d .cal-grid {
    transform: rotateX(14deg)
  }
}

.divide {
  border-top: 1px solid var(--line)
}

/* process */
/* process */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  counter-reset: s
}

.step {
  border-top: 3px solid var(--teal);
  padding-top: 18px
}

.step .w {
  font-size: 14px;
  color: var(--teal-ink);
  font-weight: 600
}

.step h3 {
  margin-top: 4px
}

.step p {
  color: var(--muted);
  margin-top: 10px;
  font-size: 16px
}

/* deliverables / services */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin-top: 48px
}

.grid3 h3 {
  font-size: 19px
}

.grid3 p {
  color: var(--muted);
  margin-top: 8px;
  font-size: 16px
}

.check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  display: grid;
  place-items: center;
  margin-bottom: 14px
}

.check svg {
  width: 16px;
  height: 16px
}

/* why */
.why {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 48px
}

.why .n {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--teal-ink);
  line-height: 1
}

.why p {
  color: var(--muted);
  margin-top: 10px
}

/* fees */
.fee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 48px;
  align-items: start
}

.fee-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px
}

.fee-card .pct {
  font-family: var(--serif);
  font-size: 96px;
  font-weight: 700;
  line-height: .9;
  color: var(--navy)
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fee-card .pct {
    color: var(--teal)
  }
}

:root[data-theme="dark"] .fee-card .pct {
  color: var(--teal)
}

.fee-card .of {
  font-size: 20px;
  font-weight: 600;
  margin-top: 8px
}

.fee-card p {
  color: var(--muted);
  margin-top: 12px
}

.eq {
  margin-top: 24px;
  border-top: 1px solid var(--line)
}

.eq div {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  gap: 12px
}

.eq div span:first-child {
  color: var(--muted)
}

.eq div.t span {
  font-weight: 700;
  color: var(--ink)
}

.guarantee {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px
}

.guarantee h3 {
  color: var(--ink);
  font-size: 26px
}

.guarantee p {
  color: var(--muted);
  margin-top: 12px
}

.guarantee hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0
}

/* deadlines */
.dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px
}

.dl>div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px
}

.dl .when {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--teal-ink)
}

.dl p {
  color: var(--muted);
  margin-top: 10px;
  font-size: 16px
}

/* contact */
.contact {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: start
}

.contact dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 24px
}

.contact dt {
  color: var(--band-muted);
  font-size: 15px
}

.contact dd {
  margin: 0;
  color: #fff;
  font-weight: 500
}

.contact dd a {
  color: #fff
}

footer {
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 13px
}

footer p+p {
  margin-top: 10px
}

footer .wrap {
  max-width: 900px
}

@media (max-width:900px) {
  section {
    padding: 72px 0
  }

  .hero-grid,
  .split,
  .growth,
  .calc,
  .fee,
  .contact {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .cost {
    grid-template-columns: 1fr
  }

  .cost .x {
    transform: rotate(90deg)
  }

  .strat,
  .grid3,
  .why,
  .dl {
    grid-template-columns: 1fr 1fr
  }

  .steps {
    grid-template-columns: 1fr 1fr
  }

  .row {
    grid-template-columns: 44px 1fr
  }

  .row p {
    grid-column: 2
  }
}

@media (max-width:600px) {
  .nav .btn .lg {
    display: none
  }

  .brand {
    white-space: nowrap
  }

  body {
    font-size: 16px
  }

  .strat,
  .grid3,
  .why,
  .dl,
  .steps,
  .stats {
    grid-template-columns: 1fr
  }

  .clock div {
    height: 84px;
    font-size: 12px;
    padding: 8px
  }

  .fee-card .pct {
    font-size: 72px
  }
}

/* cinematic scroll film */
.film {
  position: relative;
  padding: 0;
  background: #061521;
  color: #fff;
  isolation: isolate
}

.film-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
  background: radial-gradient(120% 90% at 62% 45%, #0F3550 0%, #0A2436 42%, #061521 100%)
}

.film-stage canvas {
  display: block;
  width: 100%;
  height: 100%
}

.film-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 21, 33, .82) 0%, rgba(6, 21, 33, .35) 38%, rgba(6, 21, 33, 0) 60%), linear-gradient(0deg, rgba(6, 21, 33, .7) 0%, rgba(6, 21, 33, 0) 22%)
}

.film-rail {
  position: absolute;
  right: max(22px, env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 34vh;
  background: rgba(255, 255, 255, .14);
  border-radius: 2px
}

.film-rail i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0BC2EB;
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(0)
}

.film-chapters {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh
}

.film .ch {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center
}

.film .ch .wrap {
  width: 100%
}

.film .ch-box {
  max-width: 30rem;
  text-align: left;
  margin: 0 auto 0 0;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1)
}

.film .ch:not(.on) .ch-box {
  transform: translateY(18px)
}

.film .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7FDCF5;
  margin-bottom: 18px
}

.film .kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor
}

.film h2 {
  color: #fff;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 14ch
}

.film h2 em {
  font-style: normal;
  color: #0BC2EB
}

.film .ch p {
  color: #C4D6E3;
  font-size: clamp(17px, 1.6vw, 20px);
  margin-top: 18px;
  max-width: 34ch
}

.film .ch-stat {
  display: flex;
  gap: 28px;
  margin-top: 26px;
  flex-wrap: wrap
}

.film .ch-stat div {
  border-left: 2px solid #0BC2EB;
  padding-left: 14px
}

.film .ch-stat b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.05;
  color: #fff
}

.film .ch-stat span {
  font-size: 14px;
  color: #9FB8C9
}

.film .big {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(64px, 10vw, 132px);
  line-height: .9;
  letter-spacing: -.03em;
  color: #fff;
  display: block
}

.film .big small {
  display: block;
  font-family: var(--sans);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  letter-spacing: 0;
  color: #C4D6E3;
  margin-top: 14px
}

.film .ch .hero-cta {
  margin-top: 30px
}

.film .ch .btn-ghost {
  color: #fff
}

.film .fine {
  font-size: 13px !important;
  color: #7F98AA !important;
  margin-top: 22px !important
}

.film-hint {
  position: absolute;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8FB0C4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity .4s
}

.film-hint::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(#8FB0C4, transparent);
  animation: hintdrop 1.8s ease-in-out infinite
}

@keyframes hintdrop {
  0% {
    transform: scaleY(0);
    transform-origin: top
  }

  50% {
    transform: scaleY(1);
    transform-origin: top
  }

  51% {
    transform-origin: bottom
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom
  }
}

@media (max-width:760px) {
  .film-vignette {
    background: linear-gradient(0deg, rgba(6, 21, 33, .92) 0%, rgba(6, 21, 33, .6) 30%, rgba(6, 21, 33, 0) 52%)
  }

  .film .ch {
    align-items: flex-end;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))
  }

  .film-rail {
    height: 22vh;
    right: 12px
  }

  .film-hint {
    display: none
  }

  .film .ch-box {
    background: rgba(6, 21, 33, .74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 20px 18px;
    border-radius: 16px;
    border: 1px solid rgba(127, 220, 245, .14)
  }

  .film .ch-stat b {
    font-size: 24px
  }
}

@media (prefers-reduced-motion: reduce) {
  .film .ch-box {
    transition: none;
    transform: none !important
  }

  .film-hint::after {
    animation: none
  }
}

.film .big mark.hl {
  background: rgba(11, 194, 235, .16);
  color: #0BC2EB;
  font-weight: 700;
  padding: 0 .3em;
  border-radius: 6px;
  box-shadow: inset 0 -2px 0 #0BC2EB
}

/* alternating white / blue surfaces */
.s-white {
  background: #FFFFFF;
  color: var(--ink);
  --ground: #F3F7FB;
  --paper: #F4F8FB;
  --ink: #0E2233;
  --muted: #4A5E6E;
  --line: #D6E2EE;
  --teal-ink: #07799A;
  --band-muted: #4A5E6E
}

.s-white h2,
.s-white h3 {
  color: var(--ink)
}

.s-white .panel {
  background: #F4F8FB;
  border-color: #D6E2EE
}

.s-white .field label,
.s-white .more summary,
.s-white .out-row .v,
.s-white .out-row.total .k,
.s-white .out-row.total .v {
  color: var(--ink)
}

.s-white .field input,
.s-white .field select {
  background: #FFFFFF;
  color: var(--ink);
  border-color: #C3D4E2
}

.s-white .out-row {
  border-bottom-color: #D6E2EE
}

.s-white .more {
  border-top-color: #D6E2EE
}

.s-blue {
  color: #fff;
  --paper: rgba(255, 255, 255, .07);
  --ink: #FFFFFF;
  --muted: #BED2E0;
  --line: rgba(255, 255, 255, .16);
  --teal-ink: #5FD3F2;
  --band-muted: #BED2E0
}

.s-blue h2,
.s-blue h3 {
  color: #fff
}

.s-blue .lede {
  color: #BED2E0
}

.s-blue .fee-card .pct {
  color: var(--teal)
}

.s-blue .fee-card,
.s-blue .dl>div,
.s-blue .cost .box:not(.hi) {
  backdrop-filter: blur(6px)
}

section.b1 {
  background: linear-gradient(180deg, #0A2C47 0%, #0C3353 100%)
}

section.b2 {
  background: linear-gradient(180deg, #0F4A72 0%, #125683 100%)
}

.s-blue .engagement,
.s-blue .engagement strong {
  color: #D9E8F2
}

.s-blue .engagement strong {
  color: #fff
}

.s-white .rows,
.s-white .row {
  border-color: var(--line) !important
}

.s-white .row .i {
  color: var(--teal-ink) !important
}

.s-white.contact dt,
.s-white .contact dt {
  color: var(--muted)
}

.s-white .contact dd,
.s-white .contact dd a {
  color: var(--ink)
}

.s-white .btn-ghost {
  color: var(--ink) !important
}

footer.s-blue {
  color: #BED2E0;
  background: linear-gradient(180deg, #0F4A72 0%, #125683 100%)
}

.brand-mark {
  flex: none;
  display: block;
  border-radius: 9px
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.05
}

.brand-name small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #07799A;
  margin-top: 3px
}

header .btn {
  white-space: nowrap
}