:root {
  --white: #fff;
  --carbon-black: #18221a;
  --pine-teal: #294833;
  --yellow-green: #9cdb44;
  --muted: #5b675e;
  --line: #dfe5e0;
  --soft: #f4f7f3;
  --max: 1360px;
  --gut: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-lead: clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --fs-h2: clamp(2.125rem, 1.3rem + 4vw, 4.75rem);
  --fs-h1: clamp(2.75rem, 1.4rem + 7vw, 8rem);
  --fs-small: clamp(.8125rem, .78rem + .15vw, .9375rem)
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  color: var(--carbon-black);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

ul {
  list-style: none
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit
}

:focus-visible {
  outline: 3px solid var(--yellow-green);
  outline-offset: 3px
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut)
}

section {
  padding: clamp(72px, 10vw, 150px) 0;
  position: relative
}

h1,
h2,
h3 {
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700
}

h2 {
  font-size: var(--fs-h2);
  text-wrap: balance
}

p {
  text-wrap: pretty
}

img,
svg {
  max-width: 100%
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -.02em;
  line-height: 1.15
}

.eyebrow {
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pine-teal);
  margin-bottom: 20px;
  display: block
}

.dark .eyebrow {
  color: var(--yellow-green)
}

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 56ch;
  margin-top: 22px
}

.dark {
  background: var(--carbon-black);
  color: #fff
}

.dark .lead {
  color: #b9c4bb
}

.num {
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  font-variant-numeric: tabular-nums
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s
}

.btn:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .35)
}

.btn-primary {
  background: var(--yellow-green);
  color: var(--carbon-black)
}

.btn-ghost {
  border: 1.5px solid currentColor
}

.dark .btn-ghost,
.hero .btn-ghost {
  color: #fff
}

.tag-ph {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #fff3c4;
  color: #6b5300;
  border: 1px dashed #c9a400;
  border-radius: 6px;
  padding: 2px 8px
}

/* nav */
.nav {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none
}

.nav-in {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--max), calc(100% - 2*var(--gut)));
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  background: rgba(24, 34, 26, .72);
  backdrop-filter: blur(10px);
  color: #fff;
  transition: all .3s ease
}

.nav.compact .nav-in {
  width: min(640px, calc(100% - 32px))
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.03em
}

.menu {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .4);
  margin-left: auto
}

.nav ul {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 500
}

.nav ul a {
  opacity: .85;
  padding: 8px 0
}

.nav ul a:hover {
  opacity: 1;
  color: var(--yellow-green)
}

.nav .btn {
  min-height: 42px;
  padding: 0 22px;
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  transition: all .3s ease
}

.nav.compact .btn {
  max-width: 0;
  padding: 0;
  opacity: 0;
  min-height: 42px;
  border: 0;
  pointer-events: none
}

@media(max-width:820px) {
  .nav ul {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--carbon-black);
    border-radius: 24px;
    padding: 10px 22px;
    display: none
  }

  .nav ul.open {
    display: flex
  }

  .nav ul a {
    display: block;
    padding: 14px 0;
    min-height: 48px
  }

  .nav-in {
    position: relative
  }

  .menu {
    display: grid !important
  }

  .nav.compact .nav-in {
    width: calc(100% - 32px)
  }

  .nav.compact .btn {
    max-width: 260px;
    padding: 0 22px;
    opacity: 1;
    pointer-events: auto
  }
}

/* hero */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--carbon-black);
  overflow: hidden;
  padding: 140px 0 100px
}

.hero-bg {
  position: absolute;
  inset: 0
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 34, 26, .95) 0%, rgba(24, 34, 26, .7) 45%, rgba(24, 34, 26, .15) 100%)
}

.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 70%) var(--my, 40%), rgba(156, 219, 68, .22), transparent 65%);
  z-index: 1
}

.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%
}

.hero h1 {
  font-size: var(--fs-h1);
  margin: 8px 0 26px;
  max-width: 11ch
}

.hero p.sub {
  font-size: clamp(1.125rem, 1rem + 1vw, 1.75rem);
  max-width: 32ch;
  color: #dce4de
}

.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px
}

.ph-note {
  position: absolute;
  right: var(--gut);
  bottom: 24px;
  z-index: 2
}

/* brands */
.brands {
  padding: 56px 0;
  border-bottom: 1px solid var(--line)
}

.brands h2 {
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  margin-bottom: 28px;
  font-weight: 600
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
}

.track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: scroll 34s linear infinite;
  will-change: transform
}

.tgroup {
  display: flex;
  gap: 20px;
  flex: none
}

.marquee:hover .track,
.marquee:focus-within .track {
  animation-play-state: paused
}

@keyframes scroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-33.3333%)
  }
}

.logo-slot {
  --bc: #294833;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  border: 1.5px solid #e3e8e4;
  border-radius: 14px;
  color: color-mix(in srgb, var(--bc) 45%, #8a968d);
  font-weight: 700;
  white-space: nowrap;
  transition: color .3s, border-color .3s
}

.logo-slot i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--bc) 30%, #dfe5e0);
  color: #fff;
  font-style: normal;
  font-size: 15px;
  display: grid;
  place-items: center;
  transition: background .3s
}

.logo-slot:hover,
.logo-slot:focus-visible {
  color: var(--bc);
  border-color: var(--bc)
}

.logo-slot:hover i,
.logo-slot:focus-visible i {
  background: var(--bc)
}

/* split sticky */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start
}

.sticky {
  position: sticky;
  top: 120px
}

@media(max-width:900px) {
  .split {
    grid-template-columns: 1fr
  }

  .sticky {
    position: static
  }
}

/* stack cards */
.stack-card {
  position: sticky;
  top: calc(110px + var(--i)*22px);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  min-height: 340px;
  margin-bottom: 28px;
  border: 1.5px solid var(--line);
  background: #fff;
  box-shadow: 0 -12px 40px -20px rgba(24, 34, 26, .25);
  transition: border-color .3s
}

.stack-card:hover {
  border-color: var(--yellow-green)
}

.res .stack-card:nth-child(2) {
  background: var(--soft)
}

.res .stack-card:nth-child(3) {
  background: var(--pine-teal);
  color: #fff
}

.res .stack-card:nth-child(3) p {
  color: #cfdcd2
}

.big {
  font-size: clamp(64px, 10vw, 140px);
  color: var(--pine-teal)
}

.res .stack-card:nth-child(3) .big {
  color: var(--yellow-green)
}

.stack-card .big {
  position: relative
}

.stack-card .big::after {
  content: "";
  position: absolute;
  left: -30px;
  top: -30px;
  width: 260px;
  height: 180px;
  background: radial-gradient(closest-side, rgba(156, 219, 68, .25), transparent);
  z-index: -1
}

.stack-card h3 {
  margin: 18px 0 10px
}

.stack-card p {
  color: var(--muted);
  max-width: 40ch
}

.card-ico {
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: clamp(90px, 12vw, 150px);
  height: auto;
  opacity: .9;
  color: var(--yellow-green)
}

.res .stack-card:not(:nth-child(3)) .card-ico {
  color: var(--pine-teal);
  opacity: .25
}

svg.i {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* testimonials */
.tst {
  background: var(--soft);
  overflow: hidden
}

.tst-head {
  text-align: center;
  margin-bottom: 56px
}

.tst-head .lead {
  margin-inline: auto
}

.car {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 360px
}

.t {
  flex: 0 0 auto;
  transition: all .5s var(--ease);
  padding: 32px
}

.t .q {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  margin-bottom: 24px
}

.t .who {
  font-weight: 700
}

.t .role {
  font-size: 14px;
  color: var(--muted)
}

.t.c0 {
  width: min(520px, 80vw);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 30px 60px -30px rgba(24, 34, 26, .35)
}

.t.c1 {
  width: 300px;
  opacity: .75;
  font-size: 14px
}

.t.c2 {
  width: 260px;
  opacity: .28;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
  font-size: 13px
}

.t.hide {
  display: none
}

@media(max-width:900px) {

  .t.c1,
  .t.c2 {
    display: none
  }
}

.ctrl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 36px
}

.arr {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--carbon-black);
  display: grid;
  place-items: center;
  transition: background .2s
}

.arr:hover {
  background: var(--yellow-green);
  border-color: var(--yellow-green)
}

.dots {
  display: flex;
  gap: 8px
}

.dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c3ccc5;
  padding: 0
}

.dots button[aria-current=true] {
  background: var(--carbon-black);
  width: 26px;
  border-radius: 6px
}

/* plays */
.plays-head {
  max-width: 760px;
  margin-bottom: 64px
}

#playlist {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px
}

.play {
  position: relative;
  min-height: 380px;
  background: var(--carbon-black);
  color: #fff;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s
}

.play:hover {
  transform: translateY(-6px);
  border-color: var(--yellow-green);
  box-shadow: 0 28px 54px -26px rgba(0, 0, 0, .55)
}

.play:nth-child(even) {
  background: var(--pine-teal)
}

.play:nth-child(1) {
  grid-column: span 4
}

.play:nth-child(n+2) {
  grid-column: span 2
}

.play h3 {
  font-size: clamp(28px, 4vw, 52px);
  max-width: 12ch;
  position: relative
}

.play p {
  color: #d3ded6;
  font-size: clamp(17px, 1.5vw, 21px);
  max-width: 38ch;
  position: relative
}

.play ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  position: relative
}

.play li {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px
}

.plays-cta {
  margin-top: 40px
}

/* flywheel */
.fly {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center
}

@media(max-width:900px) {
  .fly {
    grid-template-columns: 1fr
  }
}

.wheel {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin: auto
}

.wheel svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.wheel .ring {
  fill: none;
  stroke: var(--yellow-green);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s var(--ease)
}

.wheel.in .ring {
  stroke-dashoffset: 0
}

.node {
  position: absolute;
  width: 24%;
  aspect-ratio: 1;
  margin: -12%;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pine-teal);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: clamp(10px, 1.3vw, 14px);
  font-weight: 600;
  line-height: 1.2;
  padding: 6px;
  transition: all .3s var(--ease)
}

.node b {
  display: block;
  font-size: clamp(22px, 3.4vw, 40px);
  letter-spacing: -.06em;
  color: var(--pine-teal);
  font-weight: 800
}

.node:hover {
  background: var(--carbon-black);
  color: #fff;
  border-color: var(--yellow-green);
  transform: scale(1.08)
}

.node:hover b {
  color: var(--yellow-green)
}

.core {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: var(--carbon-black);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  padding: 10px;
  font-size: clamp(12px, 1.7vw, 20px);
  line-height: 1.15
}

.core::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(closest-side, rgba(156, 219, 68, .25), transparent);
  z-index: -1
}

/* why */
.why {
  background: var(--soft)
}

.why-head {
  text-align: center;
  margin-bottom: 64px
}

.why-head .lead {
  margin-inline: auto
}

.why-head .eyebrow {
  display: block;
  color: var(--pine-teal)
}

.col {
  position: relative
}

.col.us .badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow-green);
  color: var(--carbon-black);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .4)
}

.col dd {
  display: flex;
  align-items: center;
  gap: 8px
}

.col dd .i {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  padding: 3px
}

.col dd .wc {
  background: var(--yellow-green);
  color: var(--carbon-black)
}

.col dd .wx {
  background: rgba(91, 103, 94, .18);
  color: #5b675e
}

.col.us dd .wx {
  background: rgba(255, 255, 255, .14);
  color: #c9d5cc
}

.cols {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 24px;
  align-items: center
}

@media(max-width:900px) {
  .cols {
    grid-template-columns: 1fr
  }
}

.col {
  border-radius: 28px;
  padding: 36px;
  border: 1.5px solid #c9d2cb;
  color: #5b675e;
  background: transparent
}

.col h3 {
  margin-bottom: 24px;
  color: var(--carbon-black)
}

.col dt {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 18px;
  opacity: .7
}

.col dd {
  font-size: 18px;
  font-weight: 500
}

.col.us {
  background: var(--carbon-black);
  color: #fff;
  border: 2px solid var(--yellow-green);
  padding: 52px 40px;
  box-shadow: 0 40px 70px -35px rgba(24, 34, 26, .6);
  transform: translateY(-8px)
}

.col.us h3 {
  color: var(--yellow-green)
}

.col.us dd {
  font-size: 20px
}

/* rhythm */
.rhy-head {
  max-width: 640px
}

.path {
  position: relative;
  margin-top: 60px
}

.path svg.route {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible
}

.route path.t {
  fill: none;
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 2;
  stroke-dasharray: 6 8
}

.route path.d {
  fill: none;
  stroke: var(--yellow-green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: -10px
}

@media(max-width:900px) {
  .steps {
    grid-template-columns: 1fr
  }

  .path svg.route {
    display: none
  }

  .steps {
    margin-top: 40px
  }
}

.step {
  position: relative;
  padding-top: 10px
}

.step .n {
  font-size: clamp(100px, 13vw, 190px);
  color: rgba(255, 255, 255, .07);
  position: absolute;
  top: -30px;
  left: -6px;
  z-index: 0
}

.step h3,
.step small {
  position: relative;
  z-index: 1
}

.step small {
  display: block;
  color: var(--yellow-green);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 70px 0 6px
}

.dot {
  fill: var(--carbon-black);
  stroke: var(--yellow-green);
  stroke-width: 3
}

/* fit */
.fit-head {
  margin-bottom: 56px
}

.fit {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px
}

@media(max-width:800px) {
  .fit {
    grid-template-columns: 1fr
  }
}

.fc {
  border-radius: 28px;
  padding: clamp(28px, 4vw, 52px)
}

.fc h3 {
  font-size: clamp(28px, 3.4vw, 44px);
  margin-bottom: 28px
}

.fc li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid;
  font-size: 19px
}

.fc.yes {
  background: var(--pine-teal);
  color: #fff
}

.fc.yes li {
  border-color: rgba(255, 255, 255, .2)
}

.fc.yes svg {
  color: var(--yellow-green)
}

.fc.no {
  border: 1.5px solid #c9d2cb;
  color: var(--muted)
}

.fc.no li {
  border-color: var(--line)
}

.fc svg {
  width: 24px;
  height: 24px;
  flex: none
}

/* founder */
.founder {
  background: var(--soft)
}

.bento {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
  min-height: 640px
}

@media(max-width:800px) {
  .bento {
    grid-template-columns: 1fr
  }
}

.photo {
  overflow: hidden;
  padding: 0 !important;
  grid-row: 1/3;
  border-radius: 28px;
  background: linear-gradient(160deg, #294833, #18221a);
  display: grid;
  place-items: center;
  min-height: 420px;
  color: #b9c4bb;
  text-align: center;
  padding: 24px
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block
}

.photo svg {
  width: 40%;
  opacity: .4;
  margin: 0 auto 16px;
  color: #fff
}

.quote {
  position: relative;
  border-radius: 28px;
  background: #fff;
  border: 1.5px solid var(--line);
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden
}

.quote p {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 600;
  max-width: 24ch;
  position: relative
}

.quote .qm {
  position: absolute;
  right: 16px;
  top: -10px;
  width: clamp(110px, 14vw, 190px);
  color: var(--yellow-green)
}

.quote cite {
  display: block;
  margin-top: 24px;
  font-style: normal;
  color: var(--muted);
  font-size: 15px
}

.sm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: stretch
}

.sm .sq:first-child {
  width: clamp(96px, 9vw, 124px);
  padding: 0;
  justify-content: center;
  align-items: center
}

.sq {
  border-radius: 28px;
  aspect-ratio: 1;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 1.5px solid var(--line)
}

.sq.stat {
  background: var(--carbon-black);
  color: #fff;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  justify-content: flex-start
}

.sq.stat .num {
  font-size: clamp(48px, 6vw, 80px);
  color: var(--yellow-green);
  flex: none;
  line-height: 1
}

.sq.stat>div:last-child {
  font-size: .95rem;
  line-height: 1.75
}

.soc {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  height: 100%;
  width: 100%
}

.soc a,
.round {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--carbon-black);
  display: grid;
  place-items: center;
  transition: all .25s;
  max-height: 68px;
  max-width: 68px
}

.sm .soc a {
  width: clamp(54px, 5vw, 68px);
  max-width: none;
  max-height: none
}

.soc a:hover,
.round:hover {
  background: var(--yellow-green);
  border-color: var(--yellow-green);
  transform: translateY(-3px)
}

.soc svg,
.round svg {
  width: 44%
}

/* faq */
.faq-list {
  border-top: 1.5px solid var(--carbon-black)
}

.fq {
  border-bottom: 1.5px solid var(--line)
}

.fq button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  text-align: left;
  padding: 28px 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  min-height: 48px
}

.fq .pm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex: none;
  position: relative;
  transition: all .3s
}

.fq .pm::before,
.fq .pm::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .3s
}

.fq .pm::after {
  transform: translate(-50%, -50%) rotate(90deg)
}

.fq.open .pm {
  background: var(--yellow-green);
  border-color: var(--yellow-green);
  color: var(--carbon-black)
}

.fq.open .pm::after {
  transform: translate(-50%, -50%) rotate(0)
}

.ans {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease)
}

.fq.open .ans {
  grid-template-rows: 1fr
}

.ans>div {
  overflow: hidden
}

.ans p {
  padding: 0 60px 28px 0;
  color: var(--muted);
  max-width: 60ch
}

.cta-box {
  margin-top: 36px;
  padding: 28px;
  border-radius: 24px;
  background: var(--carbon-black);
  color: #fff
}

.avs {
  display: flex;
  align-items: center;
  margin-bottom: 18px
}

.av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5c7a66;
  border: 3px solid var(--carbon-black);
  margin-left: -12px
}

.av:first-child {
  margin-left: 0
}

.av:nth-child(2) {
  background: #7d9a85
}

.av:nth-child(3) {
  background: #3c5c47
}

.you {
  background: var(--yellow-green);
  color: var(--carbon-black);
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center
}

/* final */
.final {
  background: var(--carbon-black);
  color: #fff
}

.final h2 {
  font-size: clamp(38px, 6.4vw, 92px);
  max-width: 16ch
}

.pill {
  display: inline-block;
  background: var(--yellow-green);
  color: var(--carbon-black);
  border-radius: 999px;
  padding: 0 .4em;
  transition: transform .25s
}

.pill:hover {
  transform: scale(1.04) rotate(-1.5deg)
}

.fin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 96px);
  margin-top: 80px
}

@media(max-width:900px) {
  .fin-grid {
    grid-template-columns: 1fr
  }
}

.fin-grid h3 {
  font-size: clamp(30px, 4vw, 52px)
}

.contact-l a.ln {
  display: block;
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px
}

.contact-l .rs {
  display: flex;
  gap: 12px;
  margin-top: 32px
}

.contact-l .round {
  border-color: #fff;
  width: 56px;
  height: 56px
}

.form {
  background: #fff;
  color: var(--carbon-black);
  border-radius: 28px;
  padding: clamp(24px, 3.5vw, 44px);
  display: grid;
  gap: 18px
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

@media(max-width:600px) {
  .row {
    grid-template-columns: 1fr
  }
}

label {
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px
}

input,
select {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: 1.5px solid #c9d2cb;
  padding: 0 16px;
  font: inherit;
  background: #fff;
  color: inherit
}

input:focus,
select:focus {
  outline: 3px solid var(--yellow-green);
  border-color: var(--pine-teal)
}

input[aria-invalid=true] {
  border-color: #b3261e
}

.err {
  color: #b3261e;
  font-size: 13px;
  min-height: 0
}

.form .btn {
  width: 100%;
  min-height: 56px
}

.ok {
  display: none;
  text-align: center;
  padding: 24px;
  font-weight: 600
}

/* footer */
footer {
  background: var(--carbon-black);
  color: #fff;
  padding: 80px 0 24px;
  overflow: hidden;
  border-top: 1px solid #2c3b2f
}

.ft {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 var(--gut);
}

.footer_nav{
  padding-right: 120px;
}

@media(max-width:800px) {
  .ft {
    grid-template-columns: 1fr 1fr
  }
}

footer h4 {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yellow-green);
  margin-bottom: 16px
}

footer li {
  margin: 8px 0
}

footer a:hover {
  color: var(--yellow-green)
}

.word {
  font-size: clamp(60px, 20.5vw, 250px);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .9;
  margin: 70px 0 10px;
  white-space: nowrap;
  text-align: center
}

.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #9aa89d;
  border-top: 1px solid #2c3b2f;
  padding-top: 20px
}

/* reveal */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease)
}

.rv.in {
  opacity: 1;
  transform: none
}

/* cursor */
.cur {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow-green);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
  opacity: 0
}

.cur-r {
  position: fixed;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--yellow-green);
  pointer-events: none;
  z-index: 998;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s;
  opacity: 0
}

.cur-r.big {
  width: 64px;
  height: 64px;
  background: rgba(156, 219, 68, .15)
}

@media(hover:hover) and (pointer:fine) {

  body.cc,
  body.cc * {
    cursor: none !important
  }

  .cur,
  .cur-r {
    opacity: 1
  }
}

.mag {
  will-change: transform
}

@media(max-width:700px) {
  .stack-card {
    position: relative;
    top: 0 !important
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }

  .rv {
    opacity: 1;
    transform: none
  }

  .stack-card {
    position: relative;
    top: 0 !important
  }

  .cur,
  .cur-r {
    display: none
  }
}

@media(max-width:767px) {
  section {
    padding: 64px 0
  }

  .hero {
    padding: 120px 0 80px
  }

  .hero .cta {
    flex-direction: column
  }

  .hero .cta .btn,
  .plays-cta .btn {
    width: 100%
  }

  .stack-card {
    min-height: 0;
    padding: 28px 22px 110px
  }

  .card-ico {
    width: 84px
  }

  .col.us {
    transform: none;
    padding: 36px 26px
  }

  .sq {
    aspect-ratio: auto;
    min-height: 190px
  }

  .ans p {
    padding-right: 0
  }

  .photo {
    min-height: 340px
  }

  .bento {
    min-height: 0
  }

  .fin-grid {
    margin-top: 48px
  }

  .ph-note {
    display: none
  }

  .wheel {
    max-width: 380px
  }

  .node {
    width: 27%;
    margin: -13.5%
  }

  .bar {
    flex-direction: column
  }
}

@media(min-width:768px) and (max-width:1023px) {
  .split {
    grid-template-columns: 1fr
  }

  .sticky {
    position: static
  }

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

  .photo {
    grid-row: auto;
    grid-column: 1/3;
    min-height: 420px
  }

  .quote {
    grid-column: 1/3
  }

  .sm {
    grid-column: 1/3
  }

  .sq {
    aspect-ratio: auto;
    min-height: 220px
  }

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

@media(min-width:1440px) {
  :root {
    --max: 1440px
  }
}

/* ===== v3 refinements ===== */
h1,
h2,
h3 {
  font-weight: 600
}

.num {
  font-weight: 700
}

.brand {
  font-weight: 700
}

.col dt,
.eyebrow {
  font-weight: 600
}

.node b,
.big,
.pn {
  font-weight: 700
}

.fq button,
.t .who,
.quote p,
.core {
  font-weight: 600
}

:root {
  --fs-h2: clamp(1.875rem, 1.2rem + 3vw, 3.75rem);
  --fs-h1: clamp(2.5rem, 1.3rem + 6vw, 6.5rem)
}

section {
  padding: clamp(40px, 7vh, 84px) 0
}

.brands {
  padding: 36px 0
}

.brands h2 {
  font-weight: 600;
  font-size: .8rem
}

.lead {
  margin-top: 14px
}

.tst-head,
.why-head,
.plays-head,
.fit-head {
  margin-bottom: clamp(24px, 4vh, 44px)
}

.tst-head {
  margin-bottom: 14px
}

.tst-head h2 {
  margin-bottom: 0
}

.hero h1 {
  margin: 6px 0 18px
}

.eyebrow {
  margin-bottom: 12px
}

@media(min-width:1024px) {
  section:not(.hero):not(.res):not(#plays):not(.brands) {
    min-height: min(100svh, 900px);
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  .final {
    min-height: 100svh
  }
}

/* results stack */
.stack-card {
  transform-origin: top center;
  transition: border-color .3s, transform .25s var(--ease);
  min-height: 0
}

.res .stack-card {
  min-height: clamp(240px, 42vh, 340px)
}

.stack-card {
  margin-bottom: 20px
}

.big {
  font-size: clamp(3.5rem, 2rem + 6vw, 6.75rem)
}

/* plays grid */
.play:nth-child(1) {
  min-height: 340px
}

.play:nth-child(n+2) {
  min-height: 300px
}

.play .pf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px 28px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16)
}

.play .ps {
  font-size: 13px;
  color: #b9c4bb;
  display: flex;
  align-items: baseline;
  gap: 8px
}

.play .ps b {
  font-size: 26px;
  letter-spacing: -.04em;
  color: var(--yellow-green)
}

.play li.pl-li {
  border: 0;
  padding: 0
}

.play .pl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow-green);
  color: var(--carbon-black);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .2s var(--ease), background .2s
}

.play .pl:hover {
  transform: translateX(3px);
  background: #fff
}

.play .pn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .1em
}

.play .pn b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow-green);
  color: var(--carbon-black);
  font-weight: 800
}

.play .pn i {
  display: block;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--yellow-green), transparent)
}

.play .ill {
  position: absolute;
  pointer-events: none;
  perspective: 900px;
  right: clamp(14px, 2.4vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 24vw, 340px);
  aspect-ratio: 1
}

.play:nth-child(1) h3,
.play:nth-child(1) p,
.play:nth-child(1) ul {
  max-width: 56%
}

.play:nth-child(n+2) .ill {
  top: clamp(14px, 2vw, 26px);
  right: clamp(14px, 2vw, 26px);
  transform: none;
  width: clamp(110px, 11vw, 150px)
}

.play .scene {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin3d 9s ease-in-out infinite
}

.play .ly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(var(--z));
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .28));
  animation: bob 4s ease-in-out infinite;
  animation-delay: calc(var(--z)*-.05s)
}

.play .sh {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -4%;
  height: 8%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  filter: blur(8px);
  transform: translateZ(-30px)
}

@keyframes spin3d {

  0%,
  100% {
    transform: rotateX(14deg) rotateY(-22deg)
  }

  50% {
    transform: rotateX(8deg) rotateY(22deg)
  }
}

@keyframes bob {

  0%,
  100% {
    translate: 0 0
  }

  50% {
    translate: 0 -6px
  }
}

@media(prefers-reduced-motion:reduce) {

  .play .scene,
  .play .ly {
    animation: none
  }
}

.play h3 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.9rem)
}

.play p {
  font-size: var(--fs-body)
}

@media(max-width:1000px) {
  #playlist {
    grid-template-columns: 1fr 1fr
  }

  .play:nth-child(1) {
    grid-column: span 2
  }

  .play:nth-child(n+2) {
    grid-column: span 1
  }
}

@media(max-width:640px) {
  #playlist {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .play:nth-child(n) {
    grid-column: span 1;
    min-height: 0;
    padding: 26px 22px
  }

  .play:nth-child(1) .ill {
    opacity: .3;
    width: 52%;
    right: -6%;
    top: 50%;
    transform: translateY(-50%)
  }

  .play:nth-child(n+2) .ill {
    opacity: .3;
    width: 96px;
    top: 20px;
    right: 20px
  }
}

/* flywheel */
.wheel {
  max-width: min(520px, 60vh, 100%)
}

.wheel .orbit {
  fill: none;
  stroke: rgba(41, 72, 51, .25);
  stroke-width: .25;
  stroke-dasharray: 1 2;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 60s linear infinite reverse
}

.wheel .ring {
  stroke: rgba(156, 219, 68, .55);
  stroke-width: 5
}

.wheel .flow {
  fill: none;
  stroke: var(--pine-teal);
  stroke-width: .7;
  stroke-dasharray: 1.4 2.6;
  animation: flow 5s linear infinite
}

@keyframes flow {
  to {
    stroke-dashoffset: -64
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.wheel .sat {
  fill: var(--yellow-green);
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 12s linear infinite;
  filter: drop-shadow(0 0 2px var(--yellow-green))
}

#spokes line {
  stroke: var(--pine-teal);
  stroke-opacity: .25;
  stroke-width: .3;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1s var(--ease) var(--d), stroke-opacity .3s, stroke-width .3s
}

.wheel.in #spokes line {
  stroke-dashoffset: 0
}

#spokes line.on {
  stroke: var(--yellow-green);
  stroke-opacity: 1;
  stroke-width: .7
}

.wheel:not(.in) .node {
  opacity: 0
}

.wheel.in .node {
  animation: pop .7s var(--ease) var(--d) backwards
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(.4)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}

.node {
  cursor: default;
  box-shadow: 0 10px 24px -14px rgba(24, 34, 26, .5)
}

.node::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--yellow-green);
  opacity: 0;
  transform: scale(.9)
}

.node:hover::after,
.node:focus-visible::after {
  opacity: 1;
  transform: scale(1);
  transition: all .3s
}

.wheel.in .node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--yellow-green);
  animation: ping 3.2s ease-out infinite;
  animation-delay: var(--d)
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: .6
  }

  70%,
  100% {
    transform: scale(1.5);
    opacity: 0
  }
}

.core {
  background: radial-gradient(circle at 30% 25%, #294833, #18221a);
  box-shadow: 0 0 0 6px rgba(156, 219, 68, .15), 0 20px 50px -20px rgba(24, 34, 26, .8);
  transition: box-shadow .4s;
  inset: 31%;
  font-size: clamp(.75rem, .6rem + .9vw, 1.15rem)
}

.wheel.hot .core {
  box-shadow: 0 0 0 10px rgba(156, 219, 68, .3), 0 20px 50px -20px rgba(24, 34, 26, .8)
}

.core span {
  display: block;
  max-width: 11ch;
  animation: swap .35s var(--ease)
}

@keyframes swap {
  from {
    opacity: 0;
    transform: translateY(6px)
  }
}

.core::before {
  animation: breathe 3s ease-in-out infinite
}

@keyframes breathe {
  50% {
    transform: scale(1.12);
    opacity: .7
  }
}

.fly {
  gap: clamp(24px, 4vw, 64px)
}

/* why */
.col {
  padding: 26px 28px
}

.col.us {
  padding: 34px 30px
}

.col dt {
  margin-top: 12px
}

.col dd {
  font-size: 1rem
}

.col.us dd {
  font-size: 1.1rem
}

/* rhythm */
.path {
  position: relative;
  margin-top: clamp(16px, 3vh, 32px)
}

.steps {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  list-style: none
}

.step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(-100% - 20px));
  text-align: center;
  padding: 0;
  width: max-content;
  max-width: 190px
}

.step.rv {
  transition: opacity .7s var(--ease), transform .7s var(--ease)
}

.step .n {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 100%;
  transform: translateX(-50%);
  font-size: clamp(3rem, 5.5vw, 4.6rem);
  line-height: .85;
  color: rgba(255, 255, 255, .18);
  z-index: 0
}

.step small {
  margin: 0 0 4px;
  font-size: .75rem
}

.step h3 {
  font-size: clamp(1.05rem, .8rem + .9vw, 1.6rem)
}

.step.rv:not(.in) {
  transform: translate(-50%, calc(-100% - 6px))
}

@media(max-width:899px) {
  .path svg.route {
    display: block
  }

  .steps {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px
  }

  .step {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    text-align: left;
    width: auto;
    max-width: none;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .15)
  }

  .step .n {
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    transform: none
  }

  .path svg.route {
    display: none
  }
}

@media(max-width:520px) {
  .steps {
    grid-template-columns: 1fr
  }
}

/* fit */
.fc {
  padding: clamp(22px, 3vw, 36px)
}

.fc h3 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)
}

.fc li {
  padding: 11px 0;
  font-size: 1.05rem
}

/* founder */
.bento {
  grid-template-columns: 4fr 8fr;
  gap: 16px;
  min-height: 0;
  max-width: 1040px;
  margin-inline: auto
}

.photo {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  max-height: min(62vh, 460px)
}

.photo img {
  height: 100%
}

.quote {
  padding: clamp(22px, 3vw, 36px)
}

.quote p {
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.7rem);
  max-width: 26ch
}

.quote .qm {
  width: clamp(80px, 10vw, 130px)
}

.sq {
  aspect-ratio: auto;
  height: clamp(130px, 20vh, 190px);
  padding: 18px;
  border-radius: 24px
}

.sq.stat .num {
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem)
}

.sm {
  gap: 16px
}

.sq:first-child {
  justify-content: center
}

@media(max-width:800px) {
  .bento {
    grid-template-columns: 1fr
  }

  .photo {
    max-height: 340px;
    grid-row: auto
  }

  .sq {
    height: 150px
  }

  .sm {
    grid-template-columns: auto 1fr
  }

  .sm .sq:first-child {
    width: clamp(84px, 18vw, 104px)
  }
}

@media(min-width:768px) and (max-width:1023px) {
  .bento {
    grid-template-columns: 1fr 1fr
  }

  .photo {
    grid-column: 1/3;
    max-height: 340px
  }
}

/* faq */
.fq {
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 0 18px;
  transition: background-color .3s, border-color .3s
}

.faq-list {
  border-top: 0
}

.fq button {
  padding: 20px 0;
  font-size: clamp(1rem, .9rem + .5vw, 1.2rem)
}

.fq.open {
  background: linear-gradient(135deg, rgba(156, 219, 68, .28), rgba(156, 219, 68, .12));
  border-color: transparent
}

.fq:hover:not(.open) {
  background: var(--soft)
}

.ans p {
  padding: 0 44px 20px 0;
  color: var(--carbon-black);
  opacity: .8
}

.av {
  overflow: hidden;
  background: none;
  display: block
}

.av svg {
  width: 100%;
  height: 100%;
  display: block
}

.av.you {
  display: grid
}

.cta-box {
  padding: 22px;
  margin-top: 22px
}

/* final */
.final h2 {
  font-size: clamp(1.9rem, 1rem + 3.6vw, 4.2rem);
  max-width: 20ch
}

.fin-grid {
  margin-top: clamp(20px, 4vh, 40px);
  gap: clamp(24px, 5vw, 72px);
  align-items: center
}

.fin-grid h3 {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem)
}

.contact-l a.ln {
  font-size: 1.1rem;
  margin-top: 4px
}

.contact-l .rs {
  margin-top: 20px
}

.contact-l .round {
  width: 48px;
  height: 48px
}

.form {
  padding: clamp(18px, 2.4vw, 30px);
  gap: 12px
}

input,
select {
  min-height: 46px
}

.form .btn {
  min-height: 50px
}

label {
  margin-bottom: 4px;
  font-size: .85rem
}

/* footer */
.word {
  display: block;
  width: 100%;
  text-align: left;
  margin: 48px 0 8px;
  line-height: .85;
  overflow: hidden
}

.word span {
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .9;
  padding-bottom: .06em
}

footer {
  padding: 56px 0 20px
}


/* ===== v4 ===== */
.wrap {
  width: 100%
}

.logo-slot {
  border: 0;
  padding: 8px 18px;
  gap: 10px;
  color: #8a968d;
  font-weight: 600;
  background: none
}

.logo-slot span {
  font-size: 1rem;
  transition: color .3s
}

.logo-slot img {
  display: block;
  filter: grayscale(1) opacity(.55);
  transition: filter .3s
}

.logo-slot img.lg {
  height: 28px;
  width: auto;
  max-width: 170px
}

.logo-slot img.ic {
  height: 30px;
  width: 30px;
  border-radius: 8px;
  object-fit: contain
}

.logo-slot i {
  --bc: #294833;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #c9d2cb;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: background .3s
}

.logo-slot:hover img,
.logo-slot:focus-visible img {
  filter: none
}

.logo-slot:hover,
.logo-slot:focus-visible {
  color: var(--carbon-black);
  border: 0
}

.logo-slot:hover i,
.logo-slot:focus-visible i {
  background: var(--bc)
}

.tst-head {
  text-align: left
}

.tst-head .lead {
  margin-inline: 0
}

/* rhythm bigger */
#how .wrap {
  max-width: var(--max)
}

.path {
  margin-top: clamp(28px, 5vh, 56px)
}

.dot {
  r: 11
}

.step {
  max-width: 230px
}

.step small {
  font-size: .85rem
}

.step h3 {
  font-size: clamp(1.15rem, .8rem + 1.3vw, 2rem)
}

.step .n {
  font-size: clamp(3.6rem, 6.5vw, 5.6rem)
}

/* fit */
.fit-head {
  text-align: center
}

.fit {
  width: 100%
}

/* founder */
.quote {
  background: var(--pine-teal);
  border-color: var(--pine-teal);
  color: #fff
}

.quote cite {
  color: #c5d6c9
}

.quote .qm {
  color: var(--yellow-green)
}

.sq.stat {
  background: #eef6de;
  border-color: #d9e8bd;
  color: var(--carbon-black)
}

.sq.stat .num {
  color: var(--pine-teal)
}

/* cta band */
.cta-sec {
  min-height: 0 !important;
  background: var(--pine-teal);
  text-align: center;
  padding: clamp(56px, 11vh, 120px) 0 !important
}

.cta-sec h2 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(2rem, 1rem + 4.6vw, 5rem);
  line-height: 1.12
}

.cta-sec .pill {
  padding: 0 .45em;
  margin-top: .1em
}

.contact-sec {
  background: var(--carbon-black)
}

/* footer */
.word {
  text-align: center;
  overflow: visible;
  margin: 40px 0 10px
}

.word span {
  letter-spacing: -.05em;
  padding: 0 .04em .08em
}

/* mouse interactivity */
.hero-bg img {
  transform: scale(1.06) translate(calc(var(--tx, 0) * -12px), calc(var(--ty, 0) * -8px));
  transition: transform .5s var(--ease)
}

.hero-bg::after {
  z-index: 1
}

.hero-bg .lit {
  position: absolute;
  inset: 0;
  z-index: 2;
  filter: brightness(1.7) saturate(1.25);
  -webkit-mask-image: radial-gradient(230px circle at var(--mx, 70%) var(--my, 40%), #000 0%, transparent 72%);
  mask-image: radial-gradient(230px circle at var(--mx, 70%) var(--my, 40%), #000 0%, transparent 72%)
}

.hero .glow {
  z-index: 3
}

.hero .wrap {
  z-index: 4
}

.hero h1 {
  transform: translate(calc(var(--tx, 0) * 6px), calc(var(--ty, 0) * 4px));
  transition: transform .5s var(--ease)
}

.sheen {
  position: relative
}

.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--px, 50%) var(--py, 50%), rgba(156, 219, 68, .2), transparent 62%);
  opacity: 0;
  transition: opacity .3s
}

.sheen:hover::after {
  opacity: 1
}

.t.sheen {
  position: absolute
}

.stack-card.sheen {
  position: sticky
}

.tilt {
  transition: transform .2s ease-out, opacity .7s var(--ease)
}

.tilt.rv {
  transition: opacity .7s var(--ease), transform .2s ease-out
}

.cur-r.lab {
  width: 78px;
  height: 78px;
  background: var(--yellow-green);
  border-color: var(--yellow-green);
  display: grid;
  place-items: center;
  mix-blend-mode: normal
}

.cur-r.lab::after {
  content: attr(data-l);
  font-size: 12px;
  font-weight: 700;
  color: var(--carbon-black);
  letter-spacing: .04em
}

.rip {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--yellow-green);
  pointer-events: none;
  z-index: 997;
  transform: translate(-50%, -50%);
  animation: rip .7s var(--ease) forwards
}

@keyframes rip {
  to {
    width: 120px;
    height: 120px;
    opacity: 0
  }
}

@media(prefers-reduced-motion:reduce) {

  .hero-bg .lit,
  .rip {
    display: none
  }
}

.res .split>div:last-child::after {
  content: "";
  display: block;
  height: 34vh
}

.step.rv.in {
  transform: translate(-50%, calc(-100% - 22px))
}

.logo-slot img.lg[alt="Venture Bridge Law"] {
  height: 46px;
  max-width: 200px
}

.logo-slot img[alt="Flairox"] {
  filter: invert(1) grayscale(1) opacity(.55)
}

.logo-slot:hover img[alt="Flairox"],
.logo-slot:focus-visible img[alt="Flairox"] {
  filter: invert(1) grayscale(1)
}

@media(max-width:899px) {

  .step.rv.in,
  .step.rv:not(.in) {
    transform: none
  }
}

.final .lead {
  color: #b9c4bb
}

.t.p0 {
  background: var(--yellow-green);
  border-color: var(--yellow-green);
  color: var(--carbon-black);
  box-shadow: 0 30px 60px -32px rgba(156, 219, 68, .7)
}

.t.p0 .role {
  color: rgba(24, 34, 26, .78)
}

.by {
  display: flex;
  align-items: center;
  gap: 12px
}

.tav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: block
}

.tav svg,
.tav img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}

.tav {
  width: 48px;
  height: 48px
}

/* bigger brand strip */
.brands {
  padding: 52px 0
}

.brands h2 {
  font-size: .95rem;
  margin-bottom: 34px
}

.logo-slot {
  padding: 10px 26px;
  gap: 14px
}

.logo-slot span {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em
}

.logo-slot img.lg {
  height: 44px;
  max-width: 260px
}

.logo-slot img.lg[alt="Venture Bridge Law"] {
  height: 68px;
  max-width: 300px
}

.logo-slot img.ic {
  height: 46px;
  width: 46px;
  border-radius: 12px
}

.logo-slot i {
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  border-radius: 12px
}

@media(max-width:767px) {
  .logo-slot span {
    font-size: 1.15rem
  }

  .logo-slot img.lg {
    height: 34px
  }

  .logo-slot img.lg[alt="Venture Bridge Law"] {
    height: 52px
  }

  .logo-slot img.ic,
  .logo-slot i {
    width: 38px;
    height: 38px
  }
}

.av.you {
  background: var(--yellow-green);
  color: var(--carbon-black);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800
}

.soc svg.b {
  fill: currentColor;
  stroke: none;
  width: 46%
}

.soc a:nth-child(1):hover {
  background: #0a66c2;
  border-color: #0a66c2;
  color: #fff
}

.soc a:nth-child(2):hover {
  background: #000;
  border-color: #000;
  color: #fff
}

.soc a:nth-child(3):hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff
}

.soc a:nth-child(4):hover {
  background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888);
  border-color: #dc2743;
  color: #fff
}

.sr {
  position: absolute;
  left: -9999px
}

/* isometric hero */
.hero {
  background: radial-gradient(60% 65% at 50% 55%, rgba(156, 219, 68, .06) 0%, transparent 70%), linear-gradient(180deg, #0e2622 0%, #123a32 55%, #153f36 100%);
  color: #fff;
  align-items: center;
  padding: 120px 0 60px;
  min-height: 100svh
}

.hero .glow,
.hero-bg.rg::after {
  display: none
}

.hero {
  flex-direction: column
}

.hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  order: 1
}

.hero-bg.rg {
  position: relative;
  inset: auto;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  pointer-events: none;
  z-index: 1;
  margin-top: clamp(-100px, -9vw, -58px);
  order: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%)
}

.hf-vid {
  display: block;
  width: 100%;
  height: clamp(260px, 46vw, 560px);
  object-fit: cover
}

.hero .eyebrow {
  color: var(--yellow-green) !important
}

.hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, .9rem + 3.6vw, 5.6rem);
  max-width: none;
  white-space: nowrap;
  letter-spacing: -.045em
}

.hero p.sub {
  color: #c9d5cc;
  max-width: 52ch;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.5rem);
  font-weight: 500;
  margin-inline: auto
}

.hero .wrap {
  max-width: min(1000px, 92%)
}

@media(max-width:520px) {
  .hero h1 {
    white-space: normal;
    max-width: 16ch
  }
}

.hero .btn-primary {
  background: var(--yellow-green);
  color: var(--carbon-black)
}

.hero .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55)
}

.hero .cta {
  margin-top: 30px;
  justify-content: center
}

.hero .wrap {
  z-index: 4
}

@media(max-width:900px) {
  .hero {
    padding: 110px 0 30px;
    min-height: 0
  }

  .hero-bg.rg {
    margin-top: -42px
  }

  .hf-vid {
    height: clamp(220px, 70vw, 360px)
  }

  .hero .wrap {
    padding-bottom: 0
  }
}

/* ==========================================================================
   Responsive layer — appended last so it overrides earlier rules
   ========================================================================== */

/* Let grid/flex children shrink below their content width instead of
   pushing the layout wider than the viewport. */
.split>*,
.cols>*,
.bento>*,
.fly>*,
.ft>*,
.fin-grid>*,
.row>*,
.steps>*,
.fit>*,
.sm>* {
  min-width: 0
}

/* Long unbroken strings (emails, URLs) must not force a horizontal scroll. */
p,
li,
dd,
dt,
blockquote,
.q,
.by {
  overflow-wrap: break-word
}

/* Notched / rounded displays: keep the fixed nav and page gutters clear. */
@supports(padding:max(0px)) {
  .wrap {
    padding-left: max(var(--gut), env(safe-area-inset-left));
    padding-right: max(var(--gut), env(safe-area-inset-right))
  }

  .nav {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right)
  }
}

/* Touch input: comfortable hit areas. */
@media(pointer:coarse) {
  .nav ul a {
    min-height: 46px;
    display: flex;
    align-items: center
  }

  .menu {
    width: 46px;
    height: 46px
  }

  .btn {
    min-height: 46px
  }
}

/* ---------- Tablet / narrow laptop ---------- */
@media(max-width:820px) {
  .nav-in {
    gap: 12px;
    padding: 8px 8px 8px 16px
  }

  .nav .btn {
    max-width: 200px;
    padding: 0 16px;
    font-size: 14px
  }

  .nav.compact .btn {
    max-width: 200px;
    padding: 0 16px
  }
}

/* ---------- Phones: navbar is brand + menu button only ---------- */
@media(max-width:640px) {
  .nav {
    top: 10px
  }

  .nav-in,
  .nav.compact .nav-in {
    width: calc(100% - 20px);
    gap: 10px;
    padding: 8px 8px 8px 14px
  }

  /* Both selectors are needed: .nav.compact .btn re-shows the CTA above. */
  .nav .btn,
  .nav.compact .btn {
    display: none
  }

  .nav ul {
    top: calc(100% + 8px);
    padding: 8px 18px
  }

  .brand {
    font-size: 19px;
    gap: 8px
  }

  .brand svg,
  .brand .mark {
    width: 28px;
    height: 28px
  }

  .menu {
    margin-left: auto
  }
}

/* ---------- Small phones ---------- */
@media(max-width:380px) {

  .nav-in,
  .nav.compact .nav-in {
    padding: 7px 7px 7px 12px;
    width: calc(100% - 16px)
  }

  .brand {
    font-size: 17px;
    gap: 7px
  }

  .brand svg,
  .brand .mark {
    width: 26px;
    height: 26px
  }

  .menu {
    width: 42px;
    height: 42px
  }
}



/* ---------- Contact form: conditional "Something else" field ---------- */
[hidden] {
  display: none !important
}

textarea {
  width: 100%;
  min-height: 120px;
  border-radius: 14px;
  border: 1.5px solid #c9d2cb;
  padding: 14px 16px;
  font: inherit;
  line-height: 1.5;
  background: #fff;
  color: inherit;
  resize: vertical
}

textarea:focus {
  outline: 3px solid var(--yellow-green);
  border-color: var(--pine-teal)
}

textarea[aria-invalid=true],
select[aria-invalid=true] {
  border-color: #b3261e
}

/* ---------- Brand mark (assets/new_logo.png) ---------- */
.brand .mark {
  flex: none;
  display: block
}

/* ---------- Brand wordmark: Hammersmith One ---------- */
.brand {
  font-family: "Hammersmith One", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0
}

.word,
.word span {
  font-family: "Hammersmith One", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -.02em
}

/* ---------- Navbar wordmark: a touch larger than the footer brand ---------- */
.nav .brand {
  font-size: 24px
}

@media(max-width:640px) {
  .nav .brand {
    font-size: 21px
  }
}

@media(max-width:380px) {
  .nav .brand {
    font-size: 19px
  }
}

/* ---------- Display type: Hammersmith One ----------
   Single-weight (400) display face: used for headings, numerals, labels
   and CTAs. Body copy, forms and FAQ answers stay in Inter for legibility.
   Weight is pinned to 400 so browsers don't fake a bold. */
h1,
h2,
h3,
h4,
.eyebrow,
.num,
.node b,
.core,
.big,
.pn,
.pn b,
.pnb b,
.own b,
.play .ps b,
.play .pn b,
.play .pl,
.col .badge,
.col.us .badge,
.col dt,
.step small,
.quote p,
.fq button,
.btn,
.pn2 a,
.tp b,
.av.you,
.you,
.logo-slot span,
.logo-slot i,
.contact-l a.ln,
footer h4 {
  font-family: "Hammersmith One", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400
}

h1,
h2,
h3 {
  letter-spacing: -.015em
}

.hero h1 {
  letter-spacing: -.02em
}

.num,
.node b,
.big {
  letter-spacing: -.03em
}

.quote p {
  letter-spacing: -.005em;
  line-height: 1.35
}

.eyebrow,
.col dt,
.step small,
footer h4,
.brands h2 {
  letter-spacing: .12em
}

.btn,
.play .pl,
.pn2 a {
  letter-spacing: .01em
}