*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-navy);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-navy);
  color: var(--color-cream);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-light);
}

body,
button,
a {
  -webkit-font-smoothing: antialiased;
}

body,
h1,
h2,
h3,
p,
ul {
  margin-block-start: 0;
  margin-block-end: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button,
input,
textarea,
select,
optgroup,
option {
  font: inherit;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

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

.section-light {
  background: var(--color-cream);
  color: var(--color-navy);
}

/* One-time entrance animation for section titles: Soft Blur & Fade Up */
.title-reveal {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(34px);
  will-change: opacity, filter, transform;
  transition: opacity var(--duration-reveal) var(--ease-emphasized),
    filter var(--duration-reveal) var(--ease-emphasized),
    transform var(--duration-reveal) var(--ease-emphasized);
}

.title-reveal.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .title-reveal,
  .title-reveal.is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

html.visual-test .title-reveal,
html.visual-test .title-reveal.is-revealed {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}

/* Responsive section architecture. Sections participate in normal document flow. */
.site-section {
  position: relative;
  width: 100%;
  overflow: clip;
}

.section-frame {
  position: relative;
  width: min(100%, var(--layout-max-width));
  margin-inline: auto;
  isolation: isolate;
}

/* Header: one per-pixel binary luminance pipeline.
   1) backdrop-filter converts the real backdrop to black/white;
   2) the regular SVG filter maps black to navy and keeps white white;
   3) CSS/SVG masks restrict the surface to logo, glyphs and controls. */
.site-header {
  position: fixed;
  z-index: var(--z-header);
  top: 1.5rem;
  left: 50%;
  width: min(100%, var(--layout-max-width));
  height: 5rem;
  transform: translateX(-50%);
  backface-visibility: hidden;
  pointer-events: none;
}

.header-blur-field {
  position: fixed;
  z-index: calc(var(--z-header) - 1);
  inset: 0 0 auto;
  width: 100%;
  height: clamp(5.5rem, 8vw, 8.5rem);
  pointer-events: none;
  overflow: hidden;
}

.header-blur-field__layer {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--color-white-a001);
  pointer-events: none;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.header-blur-field__layer--near {
  backdrop-filter: blur(clamp(0.2rem, 0.42vw, 0.42rem));
  -webkit-backdrop-filter: blur(clamp(0.2rem, 0.42vw, 0.42rem));
  mask-image: var(--header-camera-blur-near-mask);
  -webkit-mask-image: var(--header-camera-blur-near-mask);
}

.header-blur-field__layer--mid {
  backdrop-filter: blur(clamp(0.42rem, 0.82vw, 0.82rem));
  -webkit-backdrop-filter: blur(clamp(0.42rem, 0.82vw, 0.82rem));
  mask-image: var(--header-camera-blur-mid-mask);
  -webkit-mask-image: var(--header-camera-blur-mid-mask);
}

.header-blur-field__layer--far {
  backdrop-filter: blur(clamp(0.75rem, 1.35vw, 1.2rem));
  -webkit-backdrop-filter: blur(clamp(0.75rem, 1.35vw, 1.2rem));
  mask-image: var(--header-camera-blur-far-mask);
  -webkit-mask-image: var(--header-camera-blur-far-mask);
}

.header-contrast-defs {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.header-contrast-surface {
  position: absolute;
  display: block;
  background: var(--color-white-a001);
  pointer-events: none;
  backdrop-filter: grayscale(1) contrast(10000%) invert(1);
  -webkit-backdrop-filter: grayscale(1) contrast(10000%) invert(1);
  filter: url(#header-binary-colorize);
  mask-image: var(--header-mask-image, none);
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100% 100%;
  -webkit-mask-image: var(--header-mask-image, none);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.brand-lockup {
  --logo-collapse: 0;
  position: absolute;
  left: 37px;
  top: 0;
  width: 292px;
  height: 56px;
}

.brand-logo-layer {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  transform-origin: left center;
}

.brand-logo-layer--full {
  width: 100%;
  height: 100%;
}

.brand-logo-layer--mark {
  left: 0;
  top: 0;
  width: 17.47%;
  height: 96.43%;
}

.adaptive-logo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.adaptive-logo__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.adaptive-logo__surface {
  inset: 0;
  display: none;
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.desktop-logo-contrast {
  position: fixed;
  z-index: var(--z-header);
  top: 1.5rem;
  left: max(37px, calc((100vw - var(--layout-max-width)) / 2 + 37px));
  width: 292px;
  height: 56px;
  pointer-events: none;
}

.desktop-logo-contrast--mark {
  width: 51px;
  height: 54px;
}

.desktop-logo-contrast--full .adaptive-logo__fallback,
.desktop-logo-contrast--full .adaptive-logo__surface {
  opacity: calc(1 - var(--desktop-logo-collapse, 0));
}

.desktop-logo-contrast--mark .adaptive-logo__fallback,
.desktop-logo-contrast--mark .adaptive-logo__surface {
  opacity: var(--desktop-logo-collapse, 0);
}

@supports ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  .adaptive-logo.is-mask-ready .adaptive-logo__fallback {
    visibility: hidden;
  }

  .adaptive-logo.is-mask-ready .adaptive-logo__surface {
    display: block;
  }
}

.desktop-nav {
  position: absolute;
  left: 811px;
  top: 10px;
  display: flex;
  width: 871px;
  font-size: var(--font-size-nav);
  justify-content: space-between;
  gap: 0;
}

.desktop-nav a {
  text-decoration: none;
  white-space: nowrap;
}

.header-masked-link {
  display: block;
}

.header-masked-link--nav {
  position: relative;
  height: 28px;
  overflow: visible;
}

.header-nav-sizer {
  display: block;
  color: var(--color-white);
  line-height: 28px;
  white-space: pre;
}

.header-nav-surface {
  inset: 0;
  opacity: 0;
}

.header-glyph-masks-ready .header-nav-sizer {
  visibility: hidden;
}

.header-glyph-masks-ready .header-nav-surface {
  opacity: 1;
}

.header-nav-underline {
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.desktop-nav a:hover .header-nav-underline,
.desktop-nav a:focus-visible .header-nav-underline {
  opacity: 1;
}

.menu-toggle {
  display: none;
}

.site-header--logo-only .desktop-nav,
.site-header--logo-only .menu-toggle {
  display: none;
}

.menu-toggle-line {
  right: 0;
  height: 2px;
  border-radius: var(--radius-pill);
}

.menu-toggle-line--top {
  left: 0;
  top: 10px;
}

.menu-toggle-line--bottom {
  left: 7px;
  top: 24px;
}

.mobile-menu {
  display: none;
}

/* Hero */
.hero {
  background: var(--color-navy);
}

.hero-shell {
  min-height: 1117px;
}

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

.hero-copy {
  position: absolute;
  z-index: var(--z-copy);
  left: 36px;
  top: 238px;
  width: 767px;
}

.hero h1 {
  width: 767px;
  font-family: var(--font-family-display);
  font-size: var(--font-size-hero-title);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  letter-spacing: -0.09px;
}

.hero-copy p {
  width: 695px;
  margin-top: 32px;
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body);
}

.primary-button {
  --hover-x: 50%;
  --hover-y: 50%;
  position: relative;
  display: grid;
  width: 441px;
  height: var(--control-height);
  margin-top: 104px;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-red-dark);
  color: var(--color-cream);
  font-size: var(--font-size-button);
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.3s ease, color 0.3s ease;
}

@media (min-width: 900px) {
  .primary-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--hover-x, 50%);
    top: var(--hover-y, 50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-button-hover);
    transform: translate(-50%, -50%);
    transition: width 0.45s var(--ease-button), height 0.45s var(--ease-button);
    pointer-events: none;
  }

  .primary-button:hover,
  .primary-button:focus-visible {
    background: var(--color-red-dark);
    color: var(--color-navy);
  }

  .primary-button:hover::before,
  .primary-button:focus-visible::before {
    width: 960px;
    height: 960px;
  }
}



.ship-track {
  position: absolute;
  z-index: var(--z-decoration-back);
  left: 828px;
  top: 60px;
  width: 769px;
  transform-origin: 52% 90%;
  will-change: transform;
}

.hero-ship {
  width: 100%;
}

.sea-wave {
  position: absolute;
  pointer-events: none;
}

.sea-wave--back {
  z-index: var(--z-decoration-front);
  left: -17px;
  top: 637.56px;
  width: 1778px;
  height: 523.44px;
  background: var(--gradient-hero-wave-back);
  clip-path: path("M0 165C260 117 500 213 760 165C1020 117 1260 213 1520 165C1620 145 1700 145 1778 165L1778 523.44L0 523.44L0 165Z"
    );
  will-change: clip-path;
}

.sea-wave--front {
  z-index: var(--z-visual);
  left: -25px;
  top: 779.5px;
  width: 1778px;
  height: 445.5px;
  background: var(--gradient-hero-wave-front);
  clip-path: path("M0 131.5C0 131.5 429 0 890 131C1224.3 226 1778 72.5 1778 72.5L1778 445.5L0 445.5L0 131.5Z"
    );
}

/* Threats */
.threats {
  background: var(--gradient-threats);
}

.threats-shell {
  min-height: 1533px;
}

.threats-bg {
  position: absolute;
  z-index: var(--z-background);
  inset: 0;
  background: var(--gradient-threats);
  pointer-events: none;
  overflow: clip;
}

.threats-bg::after {
  content: "";
  display: none;
  position: absolute;
  z-index: 1;
}

.threats-wave-bottom {
  position: absolute;
  z-index: 5;
  left: -1px;
  top: 1180px;
  display: block;
  width: 1731px;
  height: 353px;
  max-width: none;
  color: var(--color-navy);
  pointer-events: none;
  overflow: visible;
}

.threats-wave-side {
  position: absolute;
  z-index: 3;
  display: block;
  max-width: none;
  pointer-events: none;
  overflow: visible;
}

.threats-wave-stop--navy {
  stop-color: var(--color-navy);
}

.threats-wave-stop--gray {
  stop-color: var(--color-gray-mid);
}

.threats-wave-side--left {
  left: -2px;
  top: 644px;
  width: 152px;
  height: 473px;
}

.threats-wave-side--right {
  right: 0;
  top: 67px;
  width: 200px;
  height: 473px;
}

.threats h2 {
  position: absolute;
  z-index: var(--z-copy);
  left: 391px;
  top: 110px;
  width: 946px;
  text-align: center;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 51px;
  white-space: nowrap;
}

.threat-map {
  position: absolute;
  z-index: var(--z-copy);
  inset: 0;
}

.threat-card {
  --item-progress: 0;
  --item-y: 96px;
  position: absolute;
  opacity: var(--item-progress);
  transform: translateY(var(--item-y));
  transition:
    opacity 1s ease,
    transform 1s ease;
  will-change: transform, opacity;
}

.threat-card h3,
.threat-card p {
  position: absolute;
  margin: 0;
}

.threat-card h3 {
  font-size: 30px;
  font-weight: 400;
  line-height: 34.45px;
}

.threat-card p {
  font-size: 24px;
  line-height: 27.27px;
}

.threat-marker {
  --marker-cap: var(--color-navy);
  --marker-body: var(--color-red);
  --marker-bar: var(--color-navy);
  --marker-connector: var(--color-navy);
  --marker-stem: var(--color-red);
  position: absolute;
  left: 5px;
  top: 44px;
  width: 137px;
  height: calc(100% - 44px);
  pointer-events: none;
}

.threat-marker__base {
  position: absolute;
  inset: 0 auto auto 0;
  width: 137px;
  height: 102px;
  max-width: none;
  overflow: visible;
}

.threat-marker__cap { fill: var(--marker-cap); }
.threat-marker__body { fill: var(--marker-body); }
.threat-marker__bar { fill: var(--marker-bar); }

.threat-marker__connector line,
.threat-marker__stem line {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.threat-marker__connector line {
  stroke: var(--marker-connector);
  stroke-width: 3;
}

.threat-marker__stem {
  position: absolute;
  left: 49px;
  top: 98px;
  width: 3px;
  height: max(0px, calc(100% - 98px));
  max-width: none;
  overflow: visible;
}

.threat-marker__stem line {
  stroke: var(--marker-stem);
  stroke-width: 3;
  stroke-dasharray: 15 15;
}

.threat-marker--fog,
.threat-marker--calm {
  --marker-cap: var(--color-red);
  --marker-body: var(--color-navy);
  --marker-bar: var(--color-red);
  --marker-connector: var(--color-red);
  --marker-stem: var(--color-navy);
}

.threat-marker--fragments {
  --marker-cap: var(--color-navy);
  --marker-body: var(--color-cream);
  --marker-bar: var(--color-navy);
  --marker-connector: var(--color-navy);
  --marker-stem: var(--color-cream);
}

.threat-marker--shallows {
  --marker-cap: var(--color-red);
  --marker-body: var(--color-cream);
  --marker-bar: var(--color-red);
  --marker-connector: var(--color-red);
  --marker-stem: var(--color-cream);
}

.threat-card--fog {
  left: 65px;
  top: 236px;
  width: 413px;
  height: 1297px;
  color: var(--color-navy);
}

.threat-card--fog h3 {
  left: 12px;
  top: 0;
}

.threat-card--fog p {
  left: 144px;
  top: 58px;
  width: 269px;
}


.threat-card--fragments {
  left: 247px;
  top: 473px;
  width: 473px;
  height: 1060px;
  color: var(--color-navy);
}

.threats.is-drift-visible .threat-card--fragments {
  height: 302px;
}

.threat-card--fragments h3 {
  left: 0;
  top: 0;
}

.threat-card--fragments p {
  left: 147px;
  top: 57px;
  width: 326px;
}


.threat-card--drift {
  left: 251px;
  top: 781px;
  width: 457px;
  height: 752px;
  color: var(--color-navy);
}

.threat-card--drift h3 {
  left: 8px;
  top: 0;
}

.threat-card--drift p {
  left: 145px;
  top: 30px;
  width: 312px;
}

.threat-card--calm {
  left: 683px;
  top: 644px;
  width: 418px;
  height: 889px;
  color: var(--color-cream);
}

.threat-card--calm h3 {
  left: 9px;
  top: 0;
}

.threat-card--calm p {
  left: 143px;
  top: 30px;
  width: 275px;
}


.threat-card--mirage {
  left: 1076px;
  top: 318px;
  width: 513px;
  height: 1215px;
  color: var(--color-cream);
}

.threat-card--mirage h3 {
  left: 7px;
  top: 0;
}

.threat-card--mirage p {
  left: 146px;
  top: 44px;
  width: 367px;
}

.threat-card--shallows {
  left: 1248px;
  top: 663px;
  width: 400px;
  height: 870px;
  color: var(--color-cream);
}

.threat-card--shallows h3 {
  left: 18px;
  top: 0;
}

.threat-card--shallows p {
  left: 144px;
  top: 57px;
  width: 256px;
}


/* Clients */
.clients {
  z-index: 1;
  margin-top: -1px;
  background: var(--color-navy);
}

.clients-shell {
  min-height: 1117px;
}

.clients-bg {
  position: absolute;
  z-index: var(--z-background);
  inset: 0;
  background: var(--color-navy);
}

.clients h2 {
  position: absolute;
  z-index: var(--z-copy);
  left: 418px;
  top: 118px;
  width: 892px;
  text-align: center;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 51px;
}

.compass {
  position: absolute;
  z-index: 2;
  left: 478px;
  top: 240px;
  width: 771px;
  height: 772px;
}

.compass-dial {
  position: absolute;
  left: 39px;
  top: 40px;
  width: 693px;
  height: 693px;
}

.compass-needles {
  --needle-angle: 0deg;
  position: absolute;
  left: 105.319px;
  top: 106.319px;
  width: 563.731px;
  height: 563.731px;
  transform: rotate(var(--needle-angle));
  transform-origin: 50% 50%;
  will-change: transform;
}

.compass-needles-art {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.clients.is-targeting .compass-needles-art {
  transform: scale(1.07);
}

.compass-label {
  position: absolute;
  font-family: var(--font-family-display);
  font-size: 35px;
  line-height: 44.5px;
}

.compass-label--n {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.compass-label--s {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(180deg);
}

.compass-label--e {
  right: 19px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.compass-label--w {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.client-copy {
  position: absolute;
  z-index: 3;
  opacity: 0.48;
  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}

.client-copy.is-active {
  opacity: 1;
  transform: translateY(-3px);
}

.client-copy h3 {
  font-family: var(--font-family-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 41px;
}

.client-copy p {
  margin-top: 4px;
  font-size: 24px;
  line-height: 27.27px;
}

.client-copy--student {
  left: 1177px;
  top: 262px;
  width: 447px;
}

.client-copy--business {
  left: 87px;
  top: 408px;
  width: 402px;
}

.client-copy--startup {
  left: 1091px;
  top: 941px;
  width: 438px;
}

/* Principles */
.principles {
  background: var(--color-navy);
}

.principles-shell {
  min-height: 1331px;
}

.principles-bg {
  position: absolute;
  z-index: var(--z-background);
  inset: 0;
  background: var(--color-navy);
}

.principles h2 {
  position: absolute;
  z-index: 2;
  left: 606px;
  top: 105px;
  width: 516px;
  text-align: center;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 51px;
}

.lighthouse {
  position: absolute;
  inset: 0;
}

.lighthouse-stage {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  transform: translateY(95px);
  pointer-events: none;
}

.lighthouse-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.lighthouse-beam {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.lighthouse-beam polygon {
  fill: var(--color-yellow);
}

.lighthouse-stone-desktop {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(95px);
  pointer-events: none;
}

.principle {
  --principle-opacity: 0.2;
  --principle-color: var(--color-cream);
  position: absolute;
  z-index: 6;
  font-size: 24px;
  line-height: 28px;
  opacity: var(--principle-opacity);
  color: var(--principle-color);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard);
}

.principle--1 {
  left: 162.523px;
  top: 456.016px;
  width: 427.094px;
}

.principle--2 {
  left: 1122px;
  top: 558.5px;
  width: 403.852px;
}

.principle--3 {
  left: 291.016px;
  top: 833px;
  width: 439.188px;
}

/* Process */
.process {
  background: var(--color-cream);
}

.process-shell {
  --process-scene-top: clamp(2.125rem, calc(12.25rem - 9.375vw), 4.75rem);
  --process-scene-bottom-bleed: 2.5vw;

  min-height: max(1441px, calc((100vw * 1441 / 1728) + var(--process-scene-top) + var(--process-scene-bottom-bleed)));
  overflow: hidden;
}

.process h2 {
  position: relative;
  z-index: 3;
  padding-top: 95px;
  text-align: center;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 51px;
}

.process-scene {
  position: absolute;
  z-index: 2;
  left: 0;
  top: var(--process-scene-top);
  width: 100%;
  aspect-ratio: 1728 / 1441;
  container-type: inline-size;
}

.process-sail-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-navy);
  overflow: hidden;
  pointer-events: none;
}

.process-sail-stage__mast {
  fill: currentColor;
}

.process-sail-stage__sails {
  fill: var(--color-red);
}

.process-sail-stage__text {
  pointer-events: none;
}

.process-sail-text {
  fill: var(--color-cream);
  text-anchor: middle;
}

.process-sail-text__title {
  font-family: var(--font-family-display);
  font-size: var(--process-sail-title-size);
  font-weight: 400;
}

.process-sail-text__body {
  font-family: var(--font-family-body);
  font-size: var(--process-sail-body-size);
  font-weight: var(--font-weight-light);
}

.process-sail-text--1 {
  --process-sail-title-size: 45px;
  --process-sail-body-size: 24px;
}

.process-sail-text--2 {
  --process-sail-title-size: 48px;
  --process-sail-body-size: 24px;
}

.process-sail-text--3 {
  --process-sail-title-size: 56px;
  --process-sail-body-size: 25px;
}

.process-sail-text--4 {
  --process-sail-title-size: 52px;
  --process-sail-body-size: 24px;
}

.process-steps {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  list-style: none;
  color: var(--color-cream);
  pointer-events: none;
  white-space: nowrap;
}

.process-step {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--process-step-width);
  height: var(--process-step-height);
  text-align: center;
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

.process-step__number {
  position: absolute;
  left: -77.777778%;
  top: 3.5em;
  display: block;
  width: 4.050926cqw;
  font-family: var(--font-family-display);
  font-size: 5.208333cqw;
  line-height: 1;
}

.process-step__copy {
  width: 100%;
}

.process-step h3 {
  font-family: var(--font-family-display);
  font-size: var(--process-step-title-size);
  font-weight: 400;
  line-height: 1.04;
}

.process-step p {
  margin-top: var(--process-step-gap);
  font-family: var(--font-family-body);
  font-size: var(--process-step-body-size);
  line-height: var(--process-step-body-line);
}

.process-step--1 {
  --process-step-width: 14.467593%;
  --process-step-height: 11.242193%;
  --process-step-title-size: 2.141204cqw;
  --process-step-body-size: 1.215278cqw;
  --process-step-body-line: 1.12;
  --process-step-gap: 0.578704cqw;

  left: 42.766204%;
  top: 22.831367%;
}

.process-step--2 {
  --process-step-width: 17.361111%;
  --process-step-height: 11.589174%;
  --process-step-title-size: 2.314815cqw;
  --process-step-body-size: 1.215278cqw;
  --process-step-body-line: 1.1;
  --process-step-gap: 0.520833cqw;

  left: 41.319444%;
  top: 39.070090%;
}

.process-step--3 {
  --process-step-width: 17.939815%;
  --process-step-height: 9.576683%;
  --process-step-title-size: 2.604167cqw;
  --process-step-body-size: 1.302083cqw;
  --process-step-body-line: 1.12;
  --process-step-gap: 0.636574cqw;

  left: 40.972222%;
  top: 58.639833%;
}

.process-step--4 {
  --process-step-width: 18.518519%;
  --process-step-height: 11.797363%;
  --process-step-title-size: 2.430556cqw;
  --process-step-body-size: 1.244213cqw;
  --process-step-body-line: 1.1;
  --process-step-gap: 0.578704cqw;

  left: 40.740741%;
  top: 78.972936%;
}

@media (min-width: 900px) {
  .process {
    --process-principles-overlap: 3vh;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--process-principles-overlap));
  }
}

/* Services */
.services {
  background: var(--color-cream);
}

.services-shell {
  display: flex;
  min-height: 2006px;
  flex-direction: column;
  align-items: center;
  padding: 110px 0 68px;
  color: var(--color-navy);
}

.services h2 {
  text-align: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-regular);
  line-height: 1.275;
}

.price-carousel {
  --price-grid-gap: 90px;
  width: min(calc((2 * (100% - 244px) - var(--price-grid-gap)) / 3), calc((2 * 1480px - var(--price-grid-gap)) / 3));
  margin-top: 95px;
  margin-right: 4px;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--price-grid-gap);
}

.price-card {
  display: grid;
  min-width: 0;
  min-height: 582px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 33px 28px 20px;
  border-radius: var(--radius-card);
  background: var(--color-red);
  color: var(--color-cream);
  overflow: visible;
}

.price-card__heading {
  min-width: 0;
}

.price-card h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-regular);
  line-height: 1.28125;
  overflow-wrap: anywhere;
}

.price-card__subtitle {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.13625;
  overflow-wrap: anywhere;
}

.price-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
}

.price-card__list {
  min-width: 0;
  margin: 0;
  padding-left: 22px;
  font-size: var(--font-size-body);
  line-height: 1.13625;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

.price-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--space-sm);
  align-items: end;
  margin-top: auto;
  font-size: var(--font-size-body-small);
  line-height: 1.1579;
}

.price-card__meta span {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.35em;
  white-space: nowrap;
}

.price-card__meta span:last-child {
  justify-content: flex-end;
}

.price-card__meta strong {
  font-size: 2.375rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.1579;
}

.price-dots {
  display: none;
}

.credit-composite {
  display: flex;
  width: min(calc(100% - 244px), var(--layout-content-width));
  flex-direction: column;
  margin-top: 62px;
  margin-right: 1px;
}

.subscription-card {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-height: 608px;
  grid-template-columns: minmax(0, 1fr) 430px;
  border-radius: var(--radius-card);
  background: var(--color-navy);
  color: var(--color-cream);
  overflow: hidden;
}

.subscription-card__copy {
  padding: 44px 61px;
}

.subscription-card h3 {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-regular);
  line-height: 1.15625;
}

.subscription-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 27px 0;
  border-bottom: var(--border-thin) solid var(--color-cream-a75);
  font-size: var(--font-size-body);
  line-height: 1.1667;
}

.credit-toggle {
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--font-size-body);
  cursor: pointer;
}

.subscription-card > img {
  position: absolute;
  z-index: 2;
  top: clamp(118px, 10vw, 160px);
  right: clamp(0px, 5.5vw, 100px);
  width: clamp(20vw, 28vw, 12vw);
  transform: rotate(-7.34024deg);
  pointer-events: none;
}

.credit-table-panel {
  display: grid;
  width: min(82.2%, 1219px);
  align-self: center;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-left: 22px;
  transform: translateY(-18px);
  visibility: hidden;
  transition:
    grid-template-rows var(--duration-normal) var(--ease-standard),
    opacity 0.24s var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard),
    visibility 0s linear var(--duration-normal);
}

.credit-composite.is-open .credit-table-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.credit-table {
  min-height: 0;
  padding: 32px 40px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-red);
  color: var(--color-cream);
  overflow: hidden;
}

.credit-table__grid {
  width: 100%;
  border-collapse: collapse;
}

.credit-table__grid th,
.credit-table__grid td {
  padding: 12px 20px;
  border-bottom: var(--border-strong) solid var(--color-cream-a50);
  text-align: center;
  vertical-align: middle;
}

.credit-table__grid th {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  line-height: 1.2105;
  letter-spacing: 0.02em;
}

.credit-table__grid td {
  font-size: 1.125rem;
  line-height: 1.2222;
}

.credit-table__grid th.col-prod,
.credit-table__grid td.col-prod {
  width: 50%;
  border-right: var(--border-strong) solid var(--color-cream-a50);
}

.credit-table__grid th.col-cred,
.credit-table__grid td.col-cred {
  width: 50%;
}

.services-accordion {
  --accordion-column-gap: max(30px, calc((100% - (4 * 311px)) / 3));
  display: grid;
  width: min(calc(100% - 250px), 1478px);
  margin-top: 62px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  justify-content: stretch;
  column-gap: var(--accordion-column-gap);
  row-gap: 62px;
  margin-right: 4px;
}

.accordion-item {
  min-width: 0;
  align-self: start;
}

@media (min-width: 900px) {
  .services-accordion > .accordion-item {
    grid-column: span 2;
  }
}

@media (min-width: 1280px) {
  .services-accordion > .accordion-item:last-child:nth-child(4n + 1) {
    grid-column: 4 / span 2;
  }

  .services-accordion > .accordion-item:nth-last-child(2):nth-child(4n + 1) {
    grid-column: 3 / span 2;
  }
}

.accordion-item button {
  display: flex;
  width: 100%;
  min-height: 102px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-navy);
  color: var(--color-cream);
  font-family: var(--font-family-display);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.2917;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.accordion-item button:hover,
.accordion-item button:focus-visible {
  background: var(--color-red);
}

.accordion-item button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.accordion-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.accordion-icon::after {
  transform: rotate(90deg);
  transition: transform 0.25s var(--ease-standard);
}

.accordion-item.is-open .accordion-icon::after {
  transform: rotate(0);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 16px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-red);
  color: var(--color-cream);
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.3s var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.accordion-panel__inner {
  min-height: 0;
  overflow: hidden;
}

.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion-panel ul {
  min-height: 194px;
  margin: 0;
  padding: 13px 22px 13px 34px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.payment-terms {
  width: min(100% - 48px, 787px);
  margin-top: 39px;
  text-align: center;
  white-space: pre-line;
  color: var(--color-text-muted);
  font-family: var(--font-family-admin);
  font-size: 1.625rem;
  line-height: 1.21;
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 420px;
  margin-top: -2px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 64px max(123px, calc((100vw - 1482px) / 2));
  background: var(--color-cream);
  box-shadow: 0 -3px 0 var(--color-cream);
  color: var(--color-navy);
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 24px;
}

.site-footer a {
  min-height: 30px;
}

.footer-logo {
  display: block;
  width: 292px;
  height: 56px;
  margin-top: 60px;
}

.footer-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.error-page {
  display: grid;
  min-height: 100svh;
  place-items: center;
  background: var(--color-navy);
  color: var(--color-cream);
}

.error-page main {
  text-align: center;
}

.error-page strong {
  font-size: 100px;
}

.error-page h1 {
  font-family: var(--font-family-display);
  font-size: 42px;
}

.error-page p {
  margin: 20px 0;
}

.error-page a {
  text-decoration: underline;
}



@media (min-width: 900px) {
  .site-header {
    top: 24px;
    padding-inline: var(--layout-page-padding);
  }

  .brand-lockup {
    left: var(--layout-page-padding);
    width: clamp(190px, 17vw, 292px);
  }

  .desktop-logo-contrast {
    left: var(--layout-page-padding);
    width: clamp(190px, 17vw, 292px);
  }

  .desktop-logo-contrast--mark {
    width: calc(clamp(190px, 17vw, 292px) * 0.1747);
  }

  .desktop-nav {
    left: auto;
    right: var(--layout-page-padding);
    width: min(58vw, 871px);
    gap: clamp(12px, 2vw, 44px);
    justify-content: flex-end;
  }

  .desktop-nav a {
    flex: 0 1 auto;
  }

  .hero-shell {
    min-height: 64.641204vw;
  }

  .hero-copy {
    left: var(--layout-page-padding);
    top: max(180px, 13.77vw);
    width: 48vw;
  }

  .hero h1,
  .hero-copy p {
    width: 100%;
  }

  .hero h1 {
    font-size: max(40px, 3.47vw);
    line-height: 1;
  }

  .hero-copy p {
    font-size: max(20px, 1.74vw);
    line-height: 1.4;
  }

  .primary-button {
    width: min(100%, 25.520833vw);
    margin-top: max(56px, 6vw);
  }

  /* Hero illustration is one local 1728 × 1117 coordinate system. All
     visual layers use the same proportional axes, so resize cannot separate
     the ship from the animated wave or push the front wave below the hero. */
  .ship-track {
    left: 47.916667%;
    top: 5.371531%;
    width: 44.502315%;
  }

  .sea-wave--back {
    left: -0.983796%;
    top: 57.077887%;
    width: 102.893519%;
    height: 46.861236%;
  }

  .sea-wave--front {
    left: -1.446759%;
    top: 69.785139%;
    width: 102.893519%;
    height: 39.883617%;
    -webkit-mask-image: url("/01_assets/svg/hero-wave-front-mask.svg");
    mask-image: url("/01_assets/svg/hero-wave-front-mask.svg");
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    clip-path: none;
  }

  /* The threats scene is a local responsive composition. Its coordinates are
     normalized to the 1728 × 1533 artwork instead of being replaced
     by a generic card grid. */
  .threats-shell {
    min-height: 0;
    padding: 0;
    aspect-ratio: 1728 / 1533;
  }

  .threats h2 {
    left: 22.627315%;
    top: 7.175473%;
    width: 54.745370%;
    margin: 0;
    font-size: max(21px, 2.314815vw);
    line-height: 1.275;
    white-space: nowrap;
  }

  .threat-map {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }

  .threat-card,
  .threat-card--fog,
  .threat-card--fragments,
  .threat-card--drift,
  .threat-card--calm,
  .threat-card--mirage,
  .threat-card--shallows {
    position: absolute;
    display: block;
    min-height: 0;
  }

  .threat-card h3,
  .threat-card p {
    position: absolute;
    width: auto;
  }

  .threat-card h3 {
    font-size: max(16px, 1.736111vw);
    line-height: 1.148333;
  }

  .threat-card p {
    margin-top: 0;
    font-size: max(13px, 1.388889vw);
    line-height: 1.13625;
  }

  .threat-marker {
    left: 0.289352vw;
    top: 2.546296vw;
    width: 7.928241vw;
    height: calc(100% - 2.546296vw);
  }

  .threat-marker__base {
    width: 7.928241vw;
    height: auto;
  }

  .threat-marker__stem {
    left: 2.835648vw;
    top: 5.671296vw;
    width: max(2px, 0.173611vw);
    height: max(0px, calc(100% - 5.671296vw));
  }

  .threat-marker__connector line,
  .threat-marker__stem line {
    stroke-width: max(2px, 0.173611vw);
    stroke-dasharray: max(8px, 0.868056vw) max(8px, 0.868056vw);
  }

  .threat-card--fog {
    left: 3.761574%;
    top: 15.394651%;
    width: 23.900463%;
    height: 84.605349%;
  }

  .threat-card--fog h3 { left: 0.694444vw; top: 0; }
  .threat-card--fog p { left: 8.333333vw; top: 3.356481vw; width: 15.567130vw; }

  .threat-card--fragments {
    left: 14.293981%;
    top: 30.854534%;
    width: 27.372685%;
    height: 69.145466%;
  }

  .threats.is-drift-visible .threat-card--fragments {
    height: 19.699935%;
  }

  .threat-card--fragments h3 { left: 0; top: 0; }
  .threat-card--fragments p { left: 8.506944vw; top: 3.298611vw; width: 18.865741vw; }
  .threat-card--fragments .threat-marker { left: 0.520833vw; }

  .threat-card--drift {
    left: 14.525463%;
    top: 50.945858%;
    width: 26.446759%;
    height: 49.054142%;
  }

  .threat-card--drift h3 { left: 0.462963vw; top: 0; }
  .threat-card--drift p { left: 8.391204vw; top: 1.736111vw; width: 18.055556vw; }

  .threat-card--calm {
    left: 39.525463%;
    top: 42.009133%;
    width: 24.189815%;
    height: 57.990867%;
  }

  .threat-card--calm h3 { left: 0.520833vw; top: 0; }
  .threat-card--calm p { left: 8.275463vw; top: 1.736111vw; width: 15.914352vw; }

  .threat-card--mirage {
    left: 62.268519%;
    top: 20.743640%;
    width: 29.6875%;
    height: 79.256360%;
  }

  .threat-card--mirage h3 { left: 0.405093vw; top: 0; }
  .threat-card--mirage p { left: 8.449074vw; top: 2.546296vw; width: 21.238426vw; }

  .threat-card--shallows {
    left: 72.222222%;
    top: 43.248532%;
    width: 23.148148%;
    height: 56.751468%;
  }

  .threat-card--shallows h3 { left: 1.041667vw; top: 0; }
  .threat-card--shallows p { left: 8.333333vw; top: 3.298611vw; width: 14.814815vw; }

  .threats-wave-side--left {
    left: -0.115741vw;
    top: 42.009133%;
    width: 8.796296vw;
    height: 30.854534%;
  }

  .threats-wave-side--right {
    top: 4.370515%;
    width: 11.574074vw;
    height: 30.854534%;
  }

  .threats-wave-bottom {
    left: -0.057870vw;
    top: 76.973255%;
    display: block;
    width: 100.173611vw;
    height: 23.026745%;
  }

  /* Preserve the original compass composition instead of flattening the
     three targets into a row. Vertical coordinates are width-relative, which
     keeps the 1728 × 1117 artwork proportions at every desktop width. */
  .clients-shell {
    display: block;
    min-height: max(640px, 64.641204vw);
    padding: 0;
  }

  .clients h2 {
    position: absolute;
    left: 24.189815%;
    top: 6.828704vw;
    width: 51.620370%;
    margin: 0;
    font-size: max(24px, 2.314815vw);
    line-height: 1.275;
  }

  .compass {
    position: absolute;
    left: 27.662037%;
    top: 13.888889vw;
    width: 44.618056%;
    height: auto;
    aspect-ratio: 771 / 772;
    margin: 0;
  }

  .compass-dial {
    left: 5.058366%;
    top: 5.181347%;
    width: 89.883268%;
    height: 89.766840%;
  }

  .compass-needles {
    left: 13.660052%;
    top: 13.771891%;
    width: 73.116861%;
    height: 73.021639%;
  }

  .client-copy,
  .client-copy--student,
  .client-copy--business,
  .client-copy--startup {
    position: absolute;
    width: auto;
  }

  .client-copy h3 {
    font-size: max(19px, 1.851852vw);
    line-height: 1.28125;
  }

  .client-copy p {
    font-size: max(14px, 1.388889vw);
    line-height: 1.13625;
  }

  .client-copy--student {
    left: 68.113426%;
    top: 15.162037vw;
    width: 25.868056%;
  }

  .client-copy--business {
    left: 5.034722%;
    top: 23.611111vw;
    width: 23.263889%;
  }

  .client-copy--startup {
    left: 63.136574%;
    top: 54.456019vw;
    width: 25.347222%;
  }

  .principles-shell {
    min-height: calc(95px + 71.527778vw);
  }

  .principles h2 {
    left: 20%;
    top: 105px;
    width: 60%;
    font-size: max(28px, 2.32vw);
    line-height: 1.275;
    white-space: nowrap;
  }


  .principle {
    font-size: max(17px, 1.39vw);
    line-height: 1.17;
  }

  .principle--1 { left: 9.41%; top: 26.39vw; width: 24.72%; }
  .principle--2 { left: 64.93%; top: 32.32vw; width: 23.37%; }
  .principle--3 { left: 16.84%; top: 48.21vw; width: 25.42%; }

  .process-shell {
    min-height: calc(max(900px, 83.39vw) + var(--process-scene-bottom-bleed));
  }

  .credit-composite,
  .services-accordion {
    width: calc(100% - (2 * var(--layout-page-padding)));
  }

  .price-carousel {
    --price-grid-gap: max(24px, 5.2vw);
    width: calc((2 * (100% - (2 * var(--layout-page-padding))) - var(--price-grid-gap)) / 3);
  }

  .price-grid {
    gap: var(--price-grid-gap);
  }

  .price-card {
    min-height: max(423px, 33.680556vw);
    padding: max(20px, 1.909722vw) max(18px, 1.620370vw) max(18px, 1.157407vw);
  }

  .price-card h3 {
    font-size: max(20px, 1.851852vw);
  }

  .price-card__subtitle,
  .price-card__list {
    font-size: max(14px, 1.388889vw);
  }

  .price-card__list {
    padding-left: max(17px, 1.273148vw);
  }

  .price-card__meta {
    font-size: max(13px, 1.099537vw);
  }

  .price-card__meta strong {
    font-size: max(28px, 2.199074vw);
  }

  .services-accordion {
    --accordion-column-gap: max(20px, 2vw);
    width: min(calc(100% - (2 * var(--layout-page-padding))), 92vw);
    margin-inline: auto;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    justify-content: stretch;
    column-gap: var(--accordion-column-gap);
    row-gap: max(20px, 2vw);
  }

  .accordion-item {
    width: 100%;
    max-width: 100%;
  }
}


@media (min-width: 900px) and (max-width: 1279px) {
  .services-accordion {
    width: min(calc(100% - (2 * var(--layout-page-padding))), 92vw, 960px);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .services-accordion > .accordion-item:last-child:nth-child(3n + 1) {
    grid-column: 3 / span 2;
  }

  .services-accordion > .accordion-item:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
  }
}

@media (min-width: 1729px) {
  .hero {
    background: var(--color-navy);
  }

  .hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc((100vw - 1728px) / 2 + 1px);
    background: var(--gradient-hero-gutter);
    pointer-events: none;
  }

  .sea-wave--back {
    background: var(--gradient-hero-wave-wide);
  }

  .threats {
    background: var(--gradient-threats-wide);
  }

  .threats::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 1207px;
    bottom: 0;
    width: calc((100vw - 1728px) / 2 + 1px);
    background: var(--color-navy);
    pointer-events: none;
  }
}

.visual-test .price-grid {
  transition: none !important;
}

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

  .sea-wave--back,
  .ship-track {
    animation: none !important;
  }

  .threat-card {
    --item-progress: 1;
  }

  .threat-slide {
    position: relative;
    left: auto;
    top: auto;
    width: 306px;
    min-height: 145px;
    margin: 0 42px;
    opacity: 1;
    transform: none;
  }

  .threat-slider {
    position: absolute;
    top: 212px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  

.price-grid.is-animating {
    transition: none;
  }

  .accordion-panel,
  .credit-composite {
    transition: none;
  }
}

/* ========================================================================== 
   V6 MOBILE ARCHITECTURE
   The 390px reference SVG supplies local proportions only. All content below
   900px uses normal flow, bounded component stages and real container sizes.
   ========================================================================== */