:root {
  --red: #c1121f;
  --deepred: #780000;
  --cream: #fdf0d5;
  --navy: #003049;
  --sky: #669bbc;
  --white: #fff;
  --ink: #091f2c;
  --t: 0;
  --vp: 1vh;
  --slow: 1;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: auto
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--navy);
  color: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
  overscroll-behavior-y: contain
}

button,
a {
  -webkit-tap-highlight-color: transparent
}

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

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 6px
}

::selection {
  background: var(--red);
  color: #fff
}

#film {
  height: 1240vh;
  position: relative
}

#stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy)
}

#stage:before {
  content: "";
  position: absolute;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".87" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Cpath filter="url(%23n)" opacity=".25" d="M0 0h180v180H0z"/%3E%3C/svg%3E');
  mix-blend-mode: soft-light
}

#stage:after {
  content: "";
  position: absolute;
  z-index: 85;
  inset: 0;
  box-shadow: inset 0 0 22vw #04172255;
  pointer-events: none
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  will-change: transform, opacity;
  transform-origin: center center;
  pointer-events: none
}

.scene.interactive {
  pointer-events: auto
}

.scene:not(.scene--hero) {
  opacity: 0;
  visibility: hidden
}

.cover {
  position: absolute;
  inset: 0
}

.scene--hero {
  background: radial-gradient(ellipse at 73% 31%, #18455a 0%, #002c40 47%, #001521 100%)
}

.scene--statement {
  background: var(--cream);
  color: var(--navy)
}

.scene--route {
  background: var(--navy)
}

.scene--alliance {
  background: #071d2a
}

.scene--action {
  background: var(--cream);
  color: var(--navy)
}

.scene--founder {
  background: var(--deepred)
}

.scene--end {
  background: var(--red)
}

/* Unified Masthead & Navigation styles are managed in site-navigation.css */

.brand {
  display: flex;
  align-items: center;
  gap: 11px
}

.brand img {
  height: 46px;
  width: 46px;
  object-fit: contain;
  filter: brightness(1.25)
}

.brandword {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -1px
}

.brandwords {
  display: flex;
  flex-direction: column;
  line-height: .91
}

.brandcaption {
  font-size: 8px;
  letter-spacing: .15em;
  font-weight: 800;
  margin-top: 3px
}


.navpill:hover,
.maincta:hover {
  transform: translateY(-3px)
}

#progress-rail {
  position: absolute;
  right: 31px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff55;
  border: 1px solid #ffffff80;
  transition: .25s;
  position: relative
}

.dot.active {
  background: var(--red);
  transform: scale(1.8);
  border-color: #fff
}

.dot::before {
  content: attr(data-label);
  position: absolute;
  white-space: nowrap;
  right: 23px;
  top: -4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #fdf0d5;
  opacity: 0;
  transition: opacity .25s
}

.dot:hover:before,
.dot.active:hover:before {
  opacity: 1
}

#bottomUI {
  pointer-events: none;
  position: absolute;
  z-index: 108;
  left: clamp(22px, 5vw, 82px);
  bottom: 34px;
  right: clamp(22px, 5vw, 82px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .15em;
  font-weight: bold
}

#bottomUI span {
  font-size: 12px;
  color: var(--sky)
}

#bar {
  width: 132px;
  height: 2px;
  background: #d4e6e84b;
  margin-top: 13px
}

#bar i {
  display: block;
  height: 100%;
  background: var(--red);
  width: 0%;
  min-width: 18px
}

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

.scroll-icon {
  width: 24px;
  height: 37px;
  border: 1px solid #dceaf4ba;
  border-radius: 15px;
  position: relative
}

.scroll-icon:before {
  content: '';
  position: absolute;
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: #fff;
  left: 9px;
  top: 8px;
  animation: wheel 1.45s ease-in-out infinite
}

@keyframes wheel {
  to {
    transform: translateY(14px);
    opacity: 0
  }
}

.stage-count {
  font-size: 22px;
  letter-spacing: -.03em
}

.stage-count em {
  font-size: 12px;
  color: #bbd0d9;
  font-style: normal
}

.kicker {
  font-size: clamp(10px, .83vw, 14px);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 800
}

.wordmark {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  letter-spacing: -.035em;
  font-stretch: condensed;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0
}

.copy {
  font-size: clamp(15px, 1.25vw, 21px);
  line-height: 1.53;
  letter-spacing: .005em
}

.maincta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  padding: 20px 24px;
  border-radius: 50px;
  background: var(--red);
  color: white;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .2s
}

.maincta.alt {
  background: var(--cream);
  color: var(--deepred)
}

.maincta.dark {
  background: var(--navy);
  color: var(--cream)
}

/* intro / animated letter assembly */
.hero-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 58%, #b33f3b39, transparent 45%);
  mix-blend-mode: screen
}

.orbit {
  position: absolute;
  border: 1px solid #669bbc55;
  border-radius: 50%;
  width: min(64vw, 820px);
  aspect-ratio: 1;
  right: -4vw;
  top: 3vh;
  transform: rotate(-22deg);
  box-shadow: 0 0 0 105px #9db8ca07, 0 0 0 260px #9db8ca05
}

.orbit2 {
  position: absolute;
  border: 1px dashed #669bbc33;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  right: 3%;
  top: 14%
}

.medical-cross {
  position: absolute;
  right: 16%;
  top: 24%;
  font-size: 120px;
  font-weight: 200;
  color: #c1121f55
}

.hero-logo {
  position: absolute;
  right: 11%;
  top: 30%;
  width: min(39vw, 570px);
  filter: drop-shadow(0 10px 24px #17070755);
  will-change: transform, opacity
}

.hero-logo img {
  width: 100%;
  height: auto;
  display: block
}

.hero-body {
  position: absolute;
  z-index: 3;
  left: 6.3vw;
  top: 23%;
  width: min(980px, 72vw)
}

.hero-title {
  font-size: clamp(82px, 10.4vw, 150px);
  position: relative;
  z-index: 5;
  white-space: nowrap
}

.hero-ghost {
  position: absolute;
  left: 0;
  top: 40px;
  z-index: 1;
  pointer-events: none;
  opacity: .20;
  font-size: clamp(82px, 10.4vw, 150px);
  white-space: nowrap
}

.hero-title .line {
  display: block;
  overflow: hidden;
  padding: .035em .04em .11em;
  margin: 0 0 .02em
}

.hero-title .glyph {
  display: inline-block;
  will-change: transform, opacity
}

.hero-mini {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .23em;
  color: var(--sky);
  margin-bottom: 25px
}

.hero-descr {
  max-width: 390px;
  margin-top: 3vh;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.55
}

.hero-cta {
  margin-top: 28px
}

.city-outline {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 25%;
  opacity: .24;
  display: flex;
  align-items: end;
  gap: 8px;
  overflow: hidden
}

.city-outline span {
  width: 4vw;
  min-width: 24px;
  background: #9eb1b5;
  display: block;
  filter: blur(.5px)
}

.hero-corner {
  position: absolute;
  right: 5vw;
  bottom: 12vh;
  text-align: right;
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 2;
  text-transform: uppercase;
  font-weight: 700
}

/* text activation / image punch through */
.statement-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#00304912 1px, transparent 1px), linear-gradient(90deg, #00304912 1px, transparent 1px);
  background-size: 8vw 8vw;
  opacity: .42
}

.statement-top {
  position: absolute;
  left: 6vw;
  top: 17%;
  right: 6vw;
  display: flex;
  justify-content: space-between;
  color: var(--deepred)
}

.statement-title {
  font-size: clamp(62px, 8vw, 142px);
  position: absolute;
  left: 5.6vw;
  right: 5vw;
  top: 24%
}

.statement-title .word {
  display: inline-block;
  opacity: .19;
  transform: translateY(46px);
  filter: blur(6px);
  transition: filter .2s
}

.statement-message {
  position: absolute;
  left: 6vw;
  bottom: 15%;
  width: 42%;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.42
}

.statement-mark {
  position: absolute;
  bottom: -19vh;
  right: -9vw;
  width: 36vw;
  aspect-ratio: 1;
  border: 6vw solid #c1121f;
  color: var(--red);
  border-radius: 50%;
  opacity: .24;
  will-change: transform
}

/* Map journey -- SVG line redraw on scroll */
.route-top {
  position: absolute;
  left: 6vw;
  top: 18%
}

.route-top h2 {
  font-size: clamp(76px, 9vw, 160px);
  margin: 20px 0;
  line-height: 1.09
}

.route-copy {
  position: absolute;
  left: 6.5vw;
  bottom: 20%;
  max-width: 340px
}

.route-map {
  position: absolute;
  right: 1%;
  top: 12%;
  height: 88%;
  width: min(66vw, 1100px);
  overflow: visible
}

.route-map path.road-base {
  stroke: #669bbc22;
  stroke-width: 24;
  stroke-linecap: round;
  fill: none
}

.route-map path.route-highlight {
  stroke: var(--red);
  stroke-width: 13;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 18px #c1121f66)
}

.map-faint {
  position: absolute;
  right: 2vw;
  top: 12vh;
  font-size: clamp(120px, 27vw, 490px);
  color: #fdf0d50d;
  line-height: .9;
  pointer-events: none
}

.place {
  position: absolute;
  z-index: 3;
  background: rgba(0, 20, 36, .78);
  padding: 10px 17px;
  border: 1px solid #669bbc55;
  border-radius: 80px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 800;
  white-space: nowrap
}

.place.ka {
  right: 35%;
  bottom: 18%
}

.place.go {
  right: 11%;
  top: 22%
}

.place.future {
  right: 5%;
  bottom: 39%
}

.place i {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 8px
}

.ambulance {
  position: absolute;
  z-index: 15;
  right: 36%;
  bottom: 45%;
  font-size: 32px;
  filter: drop-shadow(0 8px 10px #000a)
}

.route-badge {
  position: absolute;
  left: 6vw;
  top: 68%;
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--sky)
}

/* medical team building from edges */
.team-heading {
  position: absolute;
  left: 6.5vw;
  top: 15%;
  font-size: clamp(72px, 8.8vw, 152px);
  z-index: 3
}

.team-sub {
  position: absolute;
  left: 6.5vw;
  bottom: 15%;
  max-width: 410px
}

.team-stack {
  position: absolute;
  right: 4.5%;
  top: 17%;
  width: min(52vw, 790px);
  height: 70%;
  perspective: 1200px
}

.team-card {
  position: absolute;
  width: 43%;
  height: 58%;
  border: 1px solid #669bbc66;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(140deg, #2c5968, #071b28);
  padding: 26px 23px;
  box-shadow: 0 24px 80px #0007;
  will-change: transform, opacity
}

.team-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 15%, #669bbc44, transparent 56%)
}

.team-card strong {
  font-family: Impact, Arial;
  font-size: clamp(50px, 6vw, 96px);
  line-height: .8;
  display: block;
  color: var(--cream)
}

.team-card .disc {
  position: absolute;
  bottom: 22px;
  left: 24px;
  font-size: 11px;
  letter-spacing: .15em;
  font-weight: 900;
  text-transform: uppercase;
  max-width: 80%;
  line-height: 1.5
}

.team-card:nth-child(1) {
  left: 4%;
  top: 2%;
  background: linear-gradient(150deg, #98080e, #450303)
}

.team-card:nth-child(2) {
  right: 0;
  top: 8%;
  background: linear-gradient(145deg, #3a6576, #002e48)
}

.team-card:nth-child(3) {
  left: 24%;
  bottom: 0;
  background: linear-gradient(140deg, #245965, #032c3e)
}

.team-card:nth-child(4) {
  right: 1%;
  bottom: -6%;
  width: 28%;
  height: 40%;
  background: var(--cream);
  color: var(--navy)
}

.team-card:nth-child(4) strong {
  color: var(--red);
  font-size: clamp(45px, 5vw, 72px)
}

.team-card:nth-child(4) .disc {
  font-size: 10px
}

/* action layered wipe / cards */
.action-title {
  position: absolute;
  left: 6.5vw;
  top: 18%;
  font-size: clamp(76px, 10vw, 180px);
  z-index: 5
}

.action-bgmark {
  position: absolute;
  right: -8%;
  top: -10%;
  font-size: 62vw;
  color: #7800000f;
  line-height: 1;
  font-family: Impact, Arial;
  z-index: 1
}

.action-card {
  position: absolute;
  border-radius: 10px;
  padding: 25px 28px;
  box-shadow: 0 24px 70px #0030492a;
  will-change: transform, opacity
}

.action-card:nth-of-type(1) {
  left: 8%;
  bottom: 13%;
  width: 27%;
  height: 28%;
  background: var(--red);
  color: white
}

.action-card:nth-of-type(2) {
  left: 37%;
  bottom: 13%;
  width: 27%;
  height: 28%;
  background: var(--navy);
  color: var(--cream)
}

.action-card:nth-of-type(3) {
  left: 66%;
  bottom: 13%;
  width: 27%;
  height: 28%;
  background: var(--sky);
  color: var(--navy)
}

.action-card .n {
  font-family: Impact, Arial;
  font-size: clamp(55px, 7vw, 115px);
  line-height: 1
}

.action-card h3 {
  position: absolute;
  bottom: 17px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.action-note {
  position: absolute;
  left: 6.5vw;
  bottom: 5%;
  font-size: 11px;
  letter-spacing: .08em;
  color: #780000
}

/* Founder cinematic wipe */
.founder-circle {
  position: absolute;
  right: -11vw;
  top: -24vh;
  width: 67vw;
  height: 67vw;
  border: 11vw solid #c1121f;
  border-radius: 50%;
  opacity: .55
}

.founder-head {
  position: absolute;
  left: 6%;
  top: 15%;
  font-size: clamp(70px, 9vw, 154px)
}

.founder-quote {
  position: absolute;
  left: 7%;
  bottom: 19%;
  font-size: clamp(21px, 2.4vw, 40px);
  line-height: 1.36;
  width: 62%;
  font-weight: bold
}

.founder-credit {
  position: absolute;
  left: 7%;
  bottom: 13%;
  font-size: 12px;
  letter-spacing: .2em;
  color: #ffc8c5
}

.founder-stamp {
  position: absolute;
  right: 9%;
  bottom: 9%;
  width: 180px;
  height: 180px;
  opacity: .85
}

.founder-stamp img {
  width: 100%
}

/* Outro */
.end-disc {
  position: absolute;
  inset: auto;
  width: 72vw;
  height: 72vw;
  max-width: 950px;
  max-height: 950px;
  border: 1px solid #fdf0d5aa;
  border-radius: 50%;
  will-change: transform
}

.end-disc:after {
  content: '';
  position: absolute;
  inset: 9%;
  border: 1px solid #fdf0d555;
  border-radius: 50%
}

.end-title {
  position: absolute;
  top: 13%;
  text-align: center;
  font-size: clamp(70px, 8.6vw, 146px);
  line-height: 1.09;
  z-index: 5
}

.end-logo {
  position: absolute;
  top: 59%;
  width: min(9vw, 120px);
  aspect-ratio: 1;
  will-change: transform
}

.end-logo img {
  width: 100%;
  filter: brightness(0) invert(1)
}

.end-action {
  position: absolute;
  bottom: 12%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  z-index: 5
}

.end-action small {
  max-width: 450px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6
}

.final-word {
  font-size: 10px;
  letter-spacing: .2em;
  color: #fdf0d5a8
}

/* social footer */
.outside {
  background: var(--cream);
  color: var(--navy);
  padding: 85px max(6vw, 25px) 28px
}

.outside-head {
  font-family: Impact, Arial;
  font-size: clamp(60px, 13vw, 220px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 36px
}

.outside-row {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: start;
  border-top: 1px solid #00304950;
  padding: 24px 0
}

.outside p {
  font-size: 14px;
  line-height: 1.6
}

.outside a {
  text-decoration: underline;
  text-underline-offset: 5px
}

.legal {
  font-size: 11px;
  max-width: 750px;
  color: #003049bb
}

.tag-corner {
  position: absolute;
  top: 19%;
  right: 6%;
  font-size: 10px;
  letter-spacing: .24em;
  writing-mode: vertical-rl
}

@media(max-width:900px) {

  .brand img {
    height: 35px;
    width: 35px
  }

  .brandword {
    font-size: 25px
  }

  #progress-rail {
    right: 13px;
    gap: 16px
  }

  .dot {
    width: 7px;
    height: 7px
  }

  .hero-body {
    left: 6%;
    top: 31%;
    width: 94%
  }

  .hero-title,
  .hero-ghost {
    font-size: clamp(72px, 13.8vw, 125px)
  }

  .hero-descr {
    max-width: 68%
  }

  .hero-logo {
    width: 65%;
    right: -12%;
    top: 8%;
    opacity: .65
  }

  .hero-corner {
    display: none
  }

  .hero-mini {
    margin-bottom: 15px
  }

  .city-outline {
    height: 22%
  }

  .statement-title {
    top: 26%;
    font-size: 9.5vw
  }

  .statement-message {
    bottom: 18%;
    width: 70%
  }

  .route-top {
    top: 15%
  }

  .route-top h2 {
    font-size: 11vw
  }

  .route-map {
    width: 100%;
    top: 24%;
    right: -5%;
    height: 65%
  }

  .route-copy {
    bottom: 12%;
    max-width: 70%
  }

  .route-badge {
    top: 38%
  }

  .place.ka {
    right: 50%;
    bottom: 13%
  }

  .team-heading {
    font-size: 10vw;
    top: 15%
  }

  .team-stack {
    right: 4%;
    top: 41%;
    width: 92%;
    height: 48%
  }

  .team-sub {
    bottom: 6%;
    max-width: 80%;
    font-size: 14px
  }

  .team-card {
    padding: 14px 12px
  }

  .team-card .disc {
    left: 12px;
    bottom: 12px;
    font-size: 9px
  }

  .team-card strong {
    font-size: 52px
  }

  .team-card:nth-child(4) strong {
    font-size: 48px
  }

  .action-title {
    font-size: 11vw;
    top: 20%
  }

  .action-card {
    padding: 15px
  }

  .action-card .n {
    font-size: 63px
  }

  .action-card h3 {
    font-size: 11px
  }

  .action-card:nth-of-type(1),
  .action-card:nth-of-type(2),
  .action-card:nth-of-type(3) {
    height: 28%;
    bottom: 20%
  }

  .action-note {
    bottom: 9%;
    max-width: 77%
  }

  .founder-head {
    font-size: 12vw;
    top: 23%
  }

  .founder-quote {
    width: 78%;
    bottom: 26%
  }

  .founder-stamp {
    width: 95px;
    height: 95px;
    right: 7%;
    bottom: 7%
  }

  .end-title {
    font-size: 9vw;
    top: 18%
  }

  .end-logo {
    top: 57%;
    width: 14vw
  }

  .end-action {
    bottom: 13%;
    width: 80%
  }

  .outside-row {
    flex-direction: column
  }

  .scroll-hint {
    display: none
  }
}

@media(max-width:550px) {
  .masthead {
    padding: 0 20px
  }

  .hero-title,
  .hero-ghost {
    font-size: clamp(58px, 16vw, 82px)
  }

  .hero-title .line:nth-child(2),
  .hero-ghost .line:nth-child(2) {
    font-size: .73em
  }

  .hero-body {
    top: 33%
  }

  .hero-mini {
    font-size: 9px
  }

  .hero-descr {
    max-width: 78%;
    font-size: 15px
  }

  .hero-logo {
    top: 10%;
    right: -4%;
    width: 68%
  }

  .statement-title {
    top: 26%;
    font-size: 12.4vw
  }

  .statement-message {
    width: 83%;
    bottom: 20%;
    font-size: 19px
  }

  .statement-mark {
    right: -25vw;
    width: 70vw;
    bottom: 2vh
  }

  .route-top h2 {
    font-size: 13.5vw
  }

  .route-top {
    top: 17%
  }

  .route-map {
    width: 150%;
    right: -45%;
    top: 21%
  }

  .route-copy {
    bottom: 13%;
    width: 79%;
    font-size: 14px
  }

  .place {
    font-size: 8px;
    padding: 7px 8px
  }

  .place.go {
    right: 29%;
    top: 26%
  }

  .place.ka {
    bottom: 25%;
    right: 62%
  }

  .place.future {
    right: 17%;
    bottom: 40%
  }

  .team-heading {
    top: 20%;
    font-size: 13.5vw
  }

  .team-stack {
    width: 94%;
    top: 44%;
    height: 39%;
    right: 3%
  }

  .team-card {
    height: 63%;
    width: 46%
  }

  .team-card:nth-child(3) {
    bottom: -6%
  }

  .team-card:nth-child(4) {
    bottom: -9%;
    width: 33%;
    height: 44%
  }

  .team-sub {
    bottom: 7%;
    font-size: 14px
  }

  .action-title {
    font-size: 13.5vw;
    top: 19%
  }

  .action-card:nth-of-type(1) {
    left: 5%;
    bottom: 23%;
    width: 30%;
    height: 26%
  }

  .action-card:nth-of-type(2) {
    left: 36%;
    bottom: 23%;
    width: 30%;
    height: 26%
  }

  .action-card:nth-of-type(3) {
    left: 67%;
    bottom: 23%;
    width: 30%;
    height: 26%
  }

  .action-card {
    padding: 10px
  }

  .action-card .n {
    font-size: 44px
  }

  .action-card h3 {
    font-size: 10px;
    bottom: 10px
  }

  .action-note {
    font-size: 10px
  }

  .founder-head {
    font-size: 14vw;
    top: 23%
  }

  .founder-quote {
    font-size: 22px;
    bottom: 30%;
    width: 83%
  }

  .founder-credit {
    bottom: 21%
  }

  .end-title {
    top: 28%;
    font-size: 13vw
  }

  .end-logo {
    top: 51%;
    width: 35vw
  }

  .end-action {
    bottom: 15%
  }

  .end-disc {
    width: 115vw;
    height: 115vw
  }

  .outside {
    padding-top: 64px
  }

  #bottomUI {
    bottom: 22px
  }
}

@media(prefers-reduced-motion:reduce) {
  .scroll-icon:before {
    animation: none
  }

  .maincta,
  .dot {
    transition: none
  }

  .scene {
    will-change: auto
  }

  .glyph,
  .word,
  .team-card {
    will-change: auto
  }
}

/* Keep decorative ghost title aligned with main headline without collapsing baselines. */
.hero-ghost .line {
  display: block;
  line-height: 1.1;
  white-space: nowrap
}

/* Prevent multiline headings from crowding adjacent story content on compact laptops. */
@media (min-width:901px) and (max-height:750px) {
  .hero-body {
    top: 20%
  }

  .hero-title,
  .hero-ghost {
    font-size: clamp(72px, 9vw, 156px)
  }

  .statement-title {
    top: 22%;
    font-size: clamp(60px, 7vw, 132px)
  }

  .team-heading {
    top: 12%;
    font-size: clamp(66px, 7.8vw, 125px)
  }

  .action-title {
    top: 15%;
    font-size: clamp(68px, 8.8vw, 153px)
  }

  .founder-head {
    top: 12%;
    font-size: clamp(65px, 8vw, 140px)
  }

  .end-title {
    top: 14%;
    font-size: clamp(66px, 8.7vw, 146px)
  }
}

/* V3 — typographic layout safety & cinematic frame collision fixes */
/* Impact's negative tracking made adjacent letters appear fused, especially with
   synthetic bold fonts on Windows. Visible separation is now intentional. */
.wordmark {
  letter-spacing: .032em;
  line-height: 1.16;
  font-kerning: normal;
  font-variant-ligatures: none;
  text-wrap: nowrap;
}

.hero-title .line,
.hero-ghost .line {
  line-height: 1.16;
  padding-top: .055em;
  padding-bottom: .14em;
  margin-bottom: .005em;
}

.hero-title .glyph {
  letter-spacing: .032em;
}

/* Prevent giant display fonts from occupying space reserved for editorial copy. */
.statement-title {
  top: 21%;
  font-size: clamp(58px, min(7.15vw, 10.5vh), 123px);
}

.statement-message {
  bottom: 17%;
  max-width: 620px;
  line-height: 1.48;
}

.route-top h2 {
  font-size: clamp(56px, min(7.55vw, 10.8vh), 132px);
  line-height: 1.14;
}

.route-top {
  top: 17%;
  max-width: 52vw;
}

.route-copy {
  bottom: 17%;
  max-width: 350px;
  line-height: 1.6;
  z-index: 8;
}

.route-badge {
  top: auto;
  bottom: 10.8%;
  z-index: 9;
}

.team-heading {
  font-size: clamp(55px, min(6.75vw, 10.6vh), 110px);
  left: 6.5vw;
  top: 16%;
}

.team-stack {
  right: 3.5%;
  width: min(49vw, 710px);
  top: 19%;
  height: 66%;
}

.team-sub {
  left: 6.5vw;
  bottom: 16%;
  max-width: 390px;
}

.action-title {
  font-size: clamp(62px, min(8.6vw, 13vh), 142px);
  top: 15%;
}

/* Cards are the 3rd–5th DOM children, not the 1st–3rd DIV elements.
   Old nth-of-type selectors left the first card unpositioned and the third
   card floating over the page. Use explicit, structural targeting. */
.action-card:nth-child(3) {
  left: 8%;
  bottom: 13%;
  width: 27%;
  height: 28%;
  background: var(--red);
  color: white;
}

.action-card:nth-child(4) {
  left: 37%;
  bottom: 13%;
  width: 27%;
  height: 28%;
  background: var(--navy);
  color: var(--cream);
}

.action-card:nth-child(5) {
  left: 66%;
  bottom: 13%;
  width: 27%;
  height: 28%;
  background: var(--sky);
  color: var(--navy);
}

.action-card h3 {
  left: 26px;
  right: 20px;
  line-height: 1.3;
  letter-spacing: .045em;
  margin: 0;
}

.action-note {
  bottom: 10.4%;
  max-width: 76%;
  line-height: 1.4;
}

.founder-head {
  top: 14%;
  font-size: clamp(60px, min(8.6vw, 11.4vh), 135px);
}

.founder-quote {
  bottom: 20%;
  max-width: 840px;
  line-height: 1.45;
}

.founder-credit {
  bottom: 13%;
}

.end-title {
  top: 11%;
  font-size: clamp(62px, min(8vw, 10.8vh), 127px);
  line-height: 1.14;
}

.end-logo {
  top: 53%;
  width: min(9vw, 12vh, 120px);
}

.end-action {
  bottom: 13%;
}

.end-action small {
  line-height: 1.65;
}

/* Chapter/status controls occupy their own shaded footer surface, rather
   than printing over the narrative text in an unreserved area. */
#bottomUI {
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 87px;
  padding: 20px clamp(22px, 5vw, 82px) 17px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 18, 31, .70) 56%, rgba(0, 18, 31, .93) 100%);
  align-items: flex-end;
  gap: 14px;
  z-index: 120;
  color: var(--cream);
}

#bottomUI span {
  color: #92c4dc;
}

#bar {
  margin-top: 10px;
}

/* Mid-size screens: prioritize headline-to-paragraph spacing, not raw font size. */
@media (min-width:901px) and (max-height:750px) {
  .statement-title {
    top: 20%;
    font-size: clamp(48px, min(6.8vw, 10vh), 115px);
  }

  .route-top {
    top: 14%;
  }

  .route-top h2 {
    font-size: clamp(50px, min(7vw, 10.2vh), 115px);
  }

  .route-copy {
    bottom: 16%;
  }

  .route-badge {
    bottom: 10%;
  }

  .team-heading {
    top: 14%;
    font-size: clamp(52px, min(6.5vw, 10vh), 104px);
  }

  .team-stack {
    top: 19%;
  }

  .action-title {
    top: 12%;
    font-size: clamp(60px, min(8.5vw, 12vh), 125px);
  }

  .founder-head {
    top: 12%;
    font-size: clamp(58px, min(8vw, 10.8vh), 120px);
  }

  .end-title {
    top: 10%;
    font-size: clamp(58px, min(7.7vw, 10.5vh), 117px);
  }

  .end-logo {
    top: 51%;
    width: min(9vw, 11vh);
  }
}

@media (max-width:900px) {
  .wordmark {
    letter-spacing: .024em;
    line-height: 1.14;
  }

  .hero-title,
  .hero-ghost {
    font-size: clamp(61px, 12.7vw, 112px);
  }

  .statement-title {
    top: 24%;
    font-size: clamp(42px, 8.65vw, 76px);
  }

  .statement-message {
    bottom: 19%;
    width: 82%;
    font-size: clamp(16px, 2vw, 21px);
  }

  .route-top {
    top: 14%;
    max-width: 76%;
  }

  .route-top h2 {
    font-size: clamp(50px, 9.7vw, 87px);
    line-height: 1.14;
  }

  .route-copy {
    bottom: 14%;
    max-width: 70%;
  }

  .route-badge {
    display: none;
  }

  .team-heading {
    top: 17%;
    font-size: clamp(49px, 9.5vw, 82px);
  }

  .team-stack {
    top: 43%;
    height: 38%;
    width: 91%;
    right: 4.5%;
  }

  .team-sub {
    bottom: 9%;
    max-width: 78%;
    font-size: 14px;
  }

  .action-title {
    top: 16%;
    font-size: clamp(49px, 9.8vw, 92px);
  }

  .action-card h3 {
    left: 13px;
    right: 12px;
    bottom: 14px;
    line-height: 1.25;
  }

  .action-note {
    bottom: 11%;
    font-size: 10px;
    max-width: 84%;
  }

  .founder-head {
    top: 17%;
    font-size: clamp(48px, 10vw, 89px);
  }

  .founder-quote {
    bottom: 26%;
    line-height: 1.5;
    max-width: 78%;
  }

  .founder-credit {
    bottom: 17%;
  }

  .end-title {
    top: 15%;
    font-size: clamp(49px, 8vw, 80px);
  }

  .end-logo {
    top: 49%;
    width: min(14vw, 12vh);
  }

  .end-action {
    bottom: 15%;
  }
}

@media (max-width:550px) {
  .wordmark {
    letter-spacing: .02em;
    line-height: 1.16;
  }

  .hero-title,
  .hero-ghost {
    font-size: clamp(56px, 14.7vw, 76px);
  }

  .hero-title .line:nth-child(2),
  .hero-ghost .line:nth-child(2) {
    font-size: .73em;
  }

  .hero-body {
    top: 32%;
    width: 94%;
  }

  .hero-descr {
    margin-top: 2vh;
  }

  .statement-title {
    top: 25%;
    font-size: clamp(33px, 10.6vw, 58px);
    left: 5%;
    right: 5%;
  }

  .statement-message {
    bottom: 18%;
    width: 83%;
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.54;
  }

  .route-top {
    top: 15%;
    max-width: 88%;
  }

  .route-top h2 {
    font-size: clamp(39px, 11.8vw, 64px);
    line-height: 1.14;
  }

  .route-copy {
    bottom: 14%;
    font-size: 14px;
    max-width: 76%;
    line-height: 1.57;
  }

  .team-heading {
    top: 17%;
    font-size: clamp(36px, 11.7vw, 59px);
    left: 6.5vw;
  }

  .team-stack {
    top: 44%;
    height: 34%;
    right: 3%;
    width: 94%;
  }

  .team-sub {
    bottom: 10%;
    font-size: 13px;
    max-width: 82%;
    line-height: 1.5;
  }

  .team-card strong {
    font-size: clamp(36px, 12vw, 54px);
    line-height: 1.1;
  }

  .team-card:nth-child(4) strong {
    font-size: clamp(30px, 10vw, 48px);
  }

  .action-title {
    top: 16%;
    font-size: clamp(39px, 11vw, 59px);
  }

  .action-card:nth-child(3) {
    left: 5%;
    bottom: 23%;
    width: 30%;
    height: 26%;
  }

  .action-card:nth-child(4) {
    left: 36%;
    bottom: 23%;
    width: 30%;
    height: 26%;
  }

  .action-card:nth-child(5) {
    left: 67%;
    bottom: 23%;
    width: 30%;
    height: 26%;
  }

  .action-card {
    padding: 11px;
  }

  .action-card .n {
    font-size: clamp(38px, 11vw, 54px);
  }

  .action-card h3 {
    font-size: clamp(9px, 2.7vw, 12px);
    left: 11px;
    bottom: 12px;
    right: 5px;
  }

  .action-note {
    bottom: 13%;
    max-width: 84%;
    font-size: 9px;
  }

  .founder-head {
    top: 18%;
    font-size: clamp(36px, 11.6vw, 62px);
  }

  .founder-quote {
    bottom: 29%;
    width: 80%;
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1.56;
  }

  .founder-credit {
    bottom: 21%;
    font-size: 10px;
  }

  .end-title {
    top: 20%;
    font-size: clamp(38px, 11vw, 60px);
  }

  .end-logo {
    top: 49%;
    width: min(25vw, 13vh);
  }

  .end-action {
    bottom: 16%;
    gap: 11px;
  }

  .end-action small {
    font-size: 11px;
    line-height: 1.45;
  }

  #bottomUI {
    min-height: 75px;
    padding: 17px 20px 13px;
  }

  #bottomUI span {
    font-size: 10px;
    letter-spacing: .11em;
  }

  .stage-count {
    font-size: 18px;
  }
}

@media (max-width:370px) {
  .statement-title {
    font-size: clamp(30px, 10.2vw, 38px);
    top: 24%;
  }

  .statement-message {
    bottom: 19%;
    font-size: 16px;
  }

  .route-top h2 {
    font-size: clamp(34px, 11.5vw, 43px);
  }

  .team-heading {
    font-size: 11.2vw;
  }

  .team-sub {
    bottom: 9%;
  }

  .founder-head {
    font-size: 11.2vw;
  }

  .end-title {
    font-size: 10.4vw;
  }

  .end-logo {
    top: 48%;
  }
}

@media (max-height:630px) and (min-width:901px) {
  .route-badge {
    display: none;
  }

  .route-top {
    top: 14%;
  }

  .route-top h2 {
    font-size: clamp(46px, min(6.7vw, 10.3vh), 110px);
  }

  .route-copy {
    bottom: 17%;
    font-size: 15px;
  }

  .team-heading {
    font-size: clamp(47px, min(6.2vw, 10vh), 98px);
  }

  .founder-head {
    font-size: clamp(46px, min(7.5vw, 10.2vh), 100px);
  }
}

/* V3.1 editorial fit and safe-area refinement */
/* Let the final red word move to its own line on narrow screens instead of
   clipping past the viewport edge. Forced <br> lines are still respected. */
.statement-title {
  text-wrap: wrap;
  overflow-wrap: normal;
}

.wordmark {
  letter-spacing: .045em;
}

.hero-title .glyph {
  letter-spacing: .045em;
}

/* Strong editorial tracking remains readable with Impact on Windows. */
@media(max-width:900px) {
  .wordmark {
    letter-spacing: .037em;
  }
}

@media(max-width:550px) {
  .wordmark {
    letter-spacing: .035em;
  }
}

/* Readable chapter context appears above the motion cards. */
.action-note {
  top: calc(92px + 12px);
  bottom: auto;
  left: 6.5vw;
  max-width: 82%;
  font-size: 10px;
  z-index: 8;
}

@media (min-width:901px) and (max-height:750px) {
  .action-title {
    top: max(130px, 18vh);
  }
}

@media (max-width:900px) {
  .action-note {
    top: calc(73px + 18px);
    bottom: auto;
    max-width: 83%;
  }

  .action-title {
    top: max(138px, 19vh);
  }
}

@media(max-width:550px) {
  .action-note {
    top: calc(73px + 16px);
    bottom: auto;
    font-size: 9px;
    max-width: 87%;
  }

  .action-title {
    top: max(140px, 18vh);
  }

  .statement-title {
    font-size: clamp(32px, 10.2vw, 55px);
  }
}

@media(max-width:370px) {
  .action-title {
    top: max(126px, 18vh);
  }

  .statement-title {
    font-size: clamp(30px, 10.1vw, 36px);
  }
}

/* Give the team heading its own clear horizontal territory on large screens. */
@media (min-width:901px) {
  .team-stack {
    right: 2.6%;
    width: min(46vw, 680px);
  }
}

/* Keep the fixed masthead controls inside narrow touch viewports. */
@media (max-width:550px) {
  .masthead {
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand img {
    width: 31px;
    height: 31px;
  }

  .brandword {
    font-size: 22px;
  }

  .brandcaption {
    font-size: 7px;
    letter-spacing: .08em;
  }

  .place.go {
    right: 7%;
    top: 40%;
  }

  .tag-corner {
    display: none;
  }
}

@media (max-width:370px) {
  .brandcaption {
    display: none;
  }
}