/* =====================================================================
   YOUR BRAND AUTHORITY
   Liquid-glass editorial site · brand palette: blue / banana white / black
   ===================================================================== */

:root {
  /* ---- brand ---- */
  --blue:        #B9CDED;   /* soft water blue */
  --blue-deep:   #2C5488;   /* accessible accent for small text on cream */
  --blue-ink:    #1C3C66;
  --cream:       #F7F3E8;   /* banana white */
  --cream-soft:  #ECE6D6;
  --ink:         #0D0D0D;   /* near-black */
  --ink-soft:    #2B2B28;

  /* ---- derived ---- */
  --paper:       #FBF8F0;
  --line:        rgba(13,13,13,.10);
  --line-light:  rgba(247,243,232,.16);
  --muted:       #5A5950;
  --muted-dark:  rgba(247,243,232,.62);

  /* glass */
  --glass-bg:        rgba(255,255,255,.55);
  --glass-border:    rgba(255,255,255,.7);
  --glass-shadow:    0 30px 60px -24px rgba(38,64,110,.30);
  --glass-bg-dark:   rgba(185,205,237,.07);
  --glass-border-dk: rgba(185,205,237,.18);

  /* type */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 60px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--blue); color: var(--ink); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

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

.site { transition: opacity 1.1s var(--ease) .1s; }

/* film grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue-deep));
  box-shadow: 0 0 12px rgba(124,160,222,.7);
}

/* cursor glow is rendered per-scene via .dissolve .scene::before so it sits
   above each section's background but behind the text — see DISSOLVE block */

/* =====================================================================
   LOADER  (water fills the R)
   ===================================================================== */
/* crest water-rise: ghost crest sits empty; the full-colour crest + waterline
   rise inside a window masked to the crest artwork, so the logo itself fills */
.crest-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.crest-img--ghost { opacity: .3; filter: saturate(.85); }
.loader__maskwin {
  position: absolute; inset: 0;
  -webkit-mask: url("/assets/yba-mark.png") center / contain no-repeat;
          mask: url("/assets/yba-mark.png") center / contain no-repeat;
}
.loader__level-wrap { position: absolute; inset: 0; overflow: hidden; transform: translateY(101%); }
.loader__level-inner { position: absolute; inset: 0; transform: translateY(-101%); }
.loader__level-inner .crest-img { filter: saturate(1.08); }
.loader__surface { position: absolute; top: -11px; left: -2%; width: 104%; height: 22px; }
.loader__level-wrap .bubble { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #EAF2FD; opacity: 0; }
.bubble--1 { left: 42%; top: 58%; }
.bubble--2 { left: 56%; top: 66%; width: 4px; height: 4px; }
.bubble--3 { left: 49%; top: 72%; }

.loader__word { text-align: center; opacity: 0; transform: translateY(10px);
  transition: opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s; }
#loader.is-filled .loader__word { opacity: 1; transform: none; }

.loader__wordmark {
  display: block; white-space: nowrap;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(12px, 2.2vw, 17px); letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase; color: var(--cream);
}
.loader__word::after {
  content: ""; display: block; width: 48px; height: 1px; margin: 16px auto 0;
  background: rgba(185,205,237,.5);
}

.loader__bar {
  width: 168px; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.14);
}
.loader__bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue-deep));
}

/* wave + bubble motion (only animate once JS marks the loader active) */
#loader.is-active .wave--a { animation: waveX 3.4s linear infinite; }
#loader.is-active .wave--b { animation: waveX 2.6s linear infinite reverse; }
@keyframes waveX { to { transform: translateX(-260px); } }

#loader.is-active .bubble { animation: bubbleUp 2.6s var(--ease-soft) infinite; }
.bubble--2 { animation-delay: .7s !important; }
.bubble--3 { animation-delay: 1.3s !important; }
@keyframes bubbleUp {
  0%   { transform: translateY(40px); opacity: 0; }
  20%  { opacity: .8; }
  100% { transform: translateY(-150px); opacity: 0; }
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gut);
  transition: padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(247,243,232,.72);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line); transition: opacity .5s var(--ease);
}
.nav.is-stuck { padding-top: 12px; padding-bottom: 12px; }
.nav.is-stuck::before { opacity: 1; }

.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__r {
  font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1;
  background: linear-gradient(140deg, var(--blue-deep), var(--blue) 60%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 4px rgba(44,84,136,.25));
}
.nav__crest {
  width: 48px; height: auto; display: block;
  filter: drop-shadow(0 2px 4px rgba(44,84,136,.18));
}
.nav__name { font-family: var(--serif); font-weight: 600; font-size: clamp(11px, 1.15vw, 15px); letter-spacing: .14em; line-height: 1; text-transform: uppercase; white-space: nowrap; }

.nav__links { display: flex; gap: 34px; }
.nav__links a {
  position: relative; font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--ink-soft);
  padding: 6px 0; transition: color .25s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--blue-deep); transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; letter-spacing: .01em; color: var(--cream);
  background: var(--ink); padding: 11px 20px; border-radius: 100px;
  box-shadow: 0 10px 24px -10px rgba(13,13,13,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.nav__cta svg { transition: transform .35s var(--ease); }
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(44,84,136,.6); background: var(--blue-deep); }
.nav__cta:hover svg { transform: translateX(3px); }

.nav__toggle { display: none; }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 79; display: grid; place-items: center;
  background: rgba(247,243,232,.92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mobile-menu a {
  font-family: var(--serif); font-size: 30px; font-weight: 500; padding: 10px 16px;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.mobile-menu.is-open a { opacity: 1; transform: none; }
.mobile-menu.is-open a:nth-child(1){ transition-delay:.08s } .mobile-menu.is-open a:nth-child(2){ transition-delay:.14s }
.mobile-menu.is-open a:nth-child(3){ transition-delay:.20s } .mobile-menu.is-open a:nth-child(4){ transition-delay:.26s }
.mobile-menu.is-open a:nth-child(5){ transition-delay:.34s }
.mobile-menu a:hover { color: var(--blue-deep); }
.mobile-menu__cta { margin-top: 14px; font-family: var(--sans) !important; font-size: 16px !important; letter-spacing: .02em; color: var(--cream) !important; background: var(--ink); border-radius: 100px; padding: 14px 30px !important; }

/* =====================================================================
   SHARED
   ===================================================================== */
.kicker, .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  color: var(--blue-deep);
}
.eyebrow span {
  font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: 0;
  color: var(--blue-deep); opacity: .8;
}
.kicker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-deep); box-shadow: 0 0 0 4px rgba(44,84,136,.14); }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title {
  font-family: var(--serif); font-weight: 500; line-height: 1.06;
  font-size: clamp(32px, 5.4vw, 60px); letter-spacing: -.015em; margin-top: 20px;
}
.section-title em { color: var(--blue-deep); font-style: italic; }
.section-lead { margin-top: 22px; font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 56ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 500; letter-spacing: .01em; cursor: pointer;
  padding: 15px 28px; border-radius: 100px; border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn svg { transition: transform .35s var(--ease); }
.btn--primary { background: var(--ink); color: var(--cream); box-shadow: 0 16px 34px -16px rgba(13,13,13,.7); }
.btn--primary:hover { transform: translateY(-3px); background: var(--blue-deep); box-shadow: 0 22px 40px -16px rgba(44,84,136,.65); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ghost { background: rgba(255,255,255,.5); border-color: var(--line); color: var(--ink); backdrop-filter: blur(8px); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--blue-deep); color: var(--blue-deep); }
.btn--light { background: linear-gradient(140deg, #FFFFFF, var(--blue) 88%); color: var(--ink); box-shadow: 0 16px 34px -16px rgba(185,205,237,.55); }
.btn--light:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -16px rgba(185,205,237,.8); }
.btn--light:hover svg { transform: translateX(4px); }
.btn--full { width: 100%; }

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--glass-shadow);
}

/* reveal-on-scroll base */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 96px; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg::after { /* subtle vignette so type pops */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(236,230,214,.55) 100%);
}

.orb { position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform; }
.orb--1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: radial-gradient(circle at 40% 40%, rgba(185,205,237,.85), rgba(185,205,237,0) 70%); animation: breathe 9s var(--ease-soft) infinite; }
.orb--2 { width: 40vw; height: 40vw; right: -10vw; top: 18vh; background: radial-gradient(circle at 50% 50%, rgba(124,160,222,.5), rgba(124,160,222,0) 70%); animation: breathe 11s var(--ease-soft) infinite reverse; }
.orb--3 { width: 30vw; height: 30vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle at 50% 50%, rgba(247,243,232,.9), rgba(247,243,232,0) 70%); animation: drift 14s var(--ease-soft) infinite; }
@keyframes breathe { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .9; } 50% { transform: translate3d(0,-3%,0) scale(1.08); opacity: 1; } }
@keyframes drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(4%,-5%,0); } }

.caustics {
  position: absolute; inset: -20%; opacity: .35; mix-blend-mode: soft-light;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.9), transparent) 20% 30%/30% 30% no-repeat,
    radial-gradient(closest-side, rgba(185,205,237,.8), transparent) 70% 60%/26% 26% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.7), transparent) 50% 80%/22% 22% no-repeat;
  animation: causticsMove 18s ease-in-out infinite alternate;
}
@keyframes causticsMove { from { transform: translate3d(-2%,-1%,0) scale(1); } to { transform: translate3d(3%,2%,0) scale(1.12); } }

.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.hero__title {
  font-family: var(--serif); font-weight: 500; line-height: 1.04;
  font-size: clamp(33px, 8vw, 104px); letter-spacing: -.025em; margin-top: 26px;
}
.hero__title .line { display: block; }
.hero__title em { color: var(--blue-deep); font-style: italic; }
.hero__sub { margin-top: 30px; max-width: 54ch; font-size: clamp(17px, 2.1vw, 21px); color: var(--ink-soft); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 44px; font-size: 13px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.hero__meta i { color: var(--blue-deep); font-style: normal; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted);
}
.hero__scroll-line { width: 1px; height: 46px; background: rgba(13,13,13,.18); overflow: hidden; }
.hero__scroll-line i { display: block; width: 100%; height: 50%; background: var(--blue-deep); animation: scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(200%); } }

/* =====================================================================
   MANIFESTO  (dark cinematic)
   ===================================================================== */
.manifesto { position: relative; background: var(--ink); color: var(--cream); padding: clamp(110px, 16vw, 220px) 0; overflow: hidden; }
.manifesto__bg { position: absolute; inset: 0; z-index: 0; }
.depth-light {
  position: absolute; width: 80vw; height: 80vw; left: 50%; top: 40%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(124,160,222,.22), transparent 60%); filter: blur(30px);
  animation: breathe 12s var(--ease-soft) infinite;
}
.manifesto .wrap { position: relative; z-index: 1; }
.manifesto .eyebrow { color: var(--blue); }
.manifesto .eyebrow span { color: var(--blue); }
.manifesto__lines { margin-top: clamp(40px, 6vw, 80px); display: flex; flex-direction: column; gap: clamp(20px, 3.4vw, 40px); }
.mline {
  font-family: var(--serif); font-weight: 400; line-height: 1.08;
  font-size: clamp(28px, 5.8vw, 74px); letter-spacing: -.02em; max-width: none;
  color: rgba(247,243,232,.30);
  transition: color .9s var(--ease), transform .9s var(--ease), opacity .9s var(--ease);
  transform: translateY(20px); opacity: .4;
}
.mline em { color: var(--blue); font-style: italic; }
.mline.is-lit { color: var(--cream); transform: none; opacity: 1; }

/* =====================================================================
   SERVICES
   ===================================================================== */
.services { position: relative; padding: clamp(90px, 13vw, 170px) 0; background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
.card {
  position: relative; padding: clamp(26px, 3vw, 40px); border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(26px) saturate(175%); -webkit-backdrop-filter: blur(26px) saturate(175%);
  box-shadow: 0 24px 50px -30px rgba(38,64,110,.4), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -12px 26px -16px rgba(13,13,13,.05);
  transform-style: preserve-3d; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow: hidden; min-height: 290px; display: flex; flex-direction: column;
}
/* keep the card content above the glass light layers */
.card > * { position: relative; z-index: 2; }
.card::before { /* cursor-follow gleam */
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(185,205,237,.4), transparent 60%);
  transition: opacity .4s var(--ease); pointer-events: none;
}
/* minimal Apple-glass sheen drifting across the surface (behind the text) */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-160%);
  animation: cardSheen 8.5s ease-in-out infinite;
}
@keyframes cardSheen { 0% { transform: translateX(-160%); } 13%, 100% { transform: translateX(160%); } }
.cards .card:nth-child(2)::after { animation-delay: -2.1s; }
.cards .card:nth-child(3)::after { animation-delay: -4.3s; }
.cards .card:nth-child(4)::after { animation-delay: -6.4s; }
.card:hover { box-shadow: 0 40px 70px -34px rgba(38,64,110,.55), inset 0 1px 0 rgba(255,255,255,.95); border-color: rgba(185,205,237,.9); }
.card:hover::before { opacity: 1; }
.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.card__num { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--blue-deep); letter-spacing: .04em; }
.card__icon {
  width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: var(--blue-deep);
  background: linear-gradient(140deg, rgba(185,205,237,.5), rgba(255,255,255,.4));
  border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 2px rgba(255,255,255,.8);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); margin: 26px 0 12px; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.62; }
.card__tag { margin-top: 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); padding-top: 16px; border-top: 1px solid var(--line); }

/* =====================================================================
   PROGRAMS / TIERS
   ===================================================================== */
.programs { position: relative; padding: clamp(96px, 13vw, 180px) 0; background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); }
.programs .wrap { max-width: 1280px; }
.programs .section-lead { margin-inline: auto; }
.programs__promise { margin: 22px auto 0; max-width: 56ch; text-align: center; font-size: clamp(14px, 1.7vw, 16.5px); color: var(--muted); font-weight: 500; line-height: 1.5; }
.programs__promise em { font-family: var(--serif); font-style: italic; color: var(--blue-deep); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); align-items: stretch; max-width: 1040px; margin-inline: auto; }

.tier {
  position: relative; display: flex; flex-direction: column; transform-style: preserve-3d;
  padding: clamp(22px, 1.7vw, 28px);
  border-radius: 20px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 50px -34px rgba(38,64,110,.4);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tier:hover { transform: translateY(-5px); box-shadow: 0 42px 72px -38px rgba(38,64,110,.5); border-color: rgba(185,205,237,.9); }

.tier__index { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--blue-deep); letter-spacing: .04em; }
.tier__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tier__name { font-family: var(--serif); font-weight: 500; font-size: clamp(13px, 1.2vw, 15px); margin: 0; letter-spacing: 0; line-height: 1.1; }
.tier__price { display: flex; align-items: baseline; gap: 5px; margin: 0 0 14px; }
.tier__price b { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.tier__price i { font-style: normal; font-size: 13px; color: var(--muted); }
.tier--featured .tier__price b { color: var(--cream); }
.tier--featured .tier__price i { color: var(--muted-dark); }
.tier__price--quote b { font-size: clamp(26px, 2.9vw, 34px); }
.tier__badge--enterprise { background: linear-gradient(120deg, #1c1c1c, #0D0D0D); color: var(--cream); box-shadow: 0 12px 24px -10px rgba(13,13,13,.55); }
.tier__badge--enterprise svg { color: var(--blue); }
.tier__tagline { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.tier__for { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

.tier__inherits { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--blue-deep); }

.tier > .ticks { margin-top: 20px; }
.tier__inherits + .ticks { margin-top: 12px; }
.tier__groups { margin-top: 16px; display: flex; flex-direction: column; gap: 18px; }
.tier__label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: .5; margin-bottom: 11px; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px;
  background-color: var(--blue-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tier__builds { display: flex; flex-wrap: wrap; gap: 7px; }
.tier__builds span { font-size: 12px; color: var(--ink-soft); background: rgba(185,205,237,.22); border: 1px solid rgba(185,205,237,.5); padding: 5px 11px; border-radius: 100px; }

.tier__builtfor { margin: auto 0 20px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.tier__builtfor span { display: block; font-family: var(--sans); font-style: normal; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 6px; }

.tier__cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500; padding: 13px 18px; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.5); border: 1px solid var(--line); color: var(--ink);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.tier__cta:hover { transform: translateY(-2px); border-color: var(--blue-deep); color: var(--blue-deep); }
.tier__cta--primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tier__cta--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--cream); }
/* when a "Built for" line is present it already pushes the group down — don't double up */
.tier__builtfor + .tier__cta { margin-top: 0; }

/* featured (dark) card */
.tier--featured { background: linear-gradient(180deg, #161616, #0D0D0D); border-color: rgba(185,205,237,.4); box-shadow: 0 44px 84px -36px rgba(13,13,13,.7); }
.tier--featured .tier__name, .tier--featured .tier__tagline { color: var(--cream); }
.tier--featured .tier__index { color: var(--blue); }
.tier--featured .tier__for { color: var(--muted-dark); border-color: var(--line-light); }
.tier--featured .tier__inherits { color: var(--blue); }
.tier--featured .tier__label { color: var(--cream); opacity: .55; }
.tier--featured .ticks li { color: var(--muted-dark); }
.tier--featured .ticks li::before { background-color: var(--blue); }
.tier--featured .tier__builtfor { color: var(--cream); border-color: var(--line-light); }
.tier--featured .tier__builtfor span { color: var(--blue); }
.tier--featured:hover { border-color: rgba(185,205,237,.75); }

.tier__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: linear-gradient(120deg, #fff, var(--blue));
  padding: 7px 14px; border-radius: 100px; box-shadow: 0 12px 24px -10px rgba(185,205,237,.85);
}
.tier__badge svg { color: var(--blue-deep); }

/* custom (Atelier) accent */
.tier--custom { background: linear-gradient(180deg, rgba(185,205,237,.18), var(--glass-bg)); border-color: rgba(185,205,237,.55); }
/* enterprise (Atelier) — permanent blue border to draw the eye */
.tier--enterprise { border: 2px solid var(--blue); box-shadow: 0 0 0 4px rgba(185,205,237,.18), 0 28px 56px -30px rgba(124,160,222,.42); }
.tier--enterprise:hover { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(185,205,237,.28), 0 44px 74px -34px rgba(124,160,222,.55); }

@media (max-width: 920px) { .tiers { grid-template-columns: 1fr; max-width: 440px; gap: 20px; } .tier__badge { top: -12px; } }

/* =====================================================================
   CLIENTS MARQUEE
   ===================================================================== */
.clients { padding: clamp(50px, 8vw, 90px) 0; background: var(--paper); overflow: hidden; }
.clients__label { text-align: center; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 34px; }
.marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; align-items: center; gap: 38px; white-space: nowrap; animation: marquee 32s linear infinite; }
.marquee__track span { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(26px, 4vw, 48px); color: var(--ink); opacity: .82; }
.marquee__track i { color: var(--blue-deep); font-size: 18px; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   PROCESS  (dark, vertical water rail)
   ===================================================================== */
.process { background: var(--ink); color: var(--cream); padding: clamp(100px, 14vw, 190px) 0; }
.process .eyebrow, .process .eyebrow span { color: var(--blue); }
.process .section-title { color: var(--cream); }
.steps { list-style: none; max-width: 760px; margin: clamp(40px,6vw,72px) auto 0; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: clamp(20px, 4vw, 40px); }
.step__rail { position: relative; display: flex; justify-content: center; }
.step__rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(185,205,237,.16); }
.step:last-child .step__rail::before { bottom: auto; height: 40px; }
.step__node {
  position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 8px; border-radius: 50%;
  background: var(--ink); border: 2px solid rgba(185,205,237,.4); transition: all .5s var(--ease);
}
.step.is-in .step__node { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 6px rgba(185,205,237,.12), 0 0 22px rgba(185,205,237,.6); }
.step__body { padding-bottom: clamp(44px, 7vw, 80px); }
.step__num { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--blue); letter-spacing: .05em; }
.step__body h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3.4vw, 38px); margin: 6px 0 14px; letter-spacing: -.01em; }
.step__body p { color: var(--muted-dark); font-size: 16px; line-height: 1.62; max-width: 52ch; }

/* =====================================================================
   PROOF
   ===================================================================== */
.proof { padding: clamp(90px, 13vw, 170px) 0; background: var(--cream); }
.proof__feature { text-align: center; max-width: 920px; margin: 0 auto clamp(50px, 7vw, 88px); }
.proof__feature .eyebrow { color: var(--blue-deep); margin-bottom: 20px; }
.proof__feature-num { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 7vw, 88px); line-height: .96; letter-spacing: -.03em;
  background: linear-gradient(155deg, var(--ink) 28%, var(--blue-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof__feature-label { margin: 22px auto 0; max-width: 24ch; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 27px); color: var(--ink); line-height: 1.4; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(56px, 8vw, 96px); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--line); }
.stat { text-align: center; padding: 14px 8px; }
.stat__num { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(160deg, var(--ink), var(--blue-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { display: block; margin-top: 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.quote { max-width: 920px; margin: 0 auto; text-align: center; }
.quote blockquote { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(22px, 3.4vw, 38px); line-height: 1.34; letter-spacing: -.01em; color: var(--ink); }
.quote figcaption { display: inline-flex; align-items: center; gap: 16px; margin-top: 34px; }
.quote__avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--blue-deep);
  background: linear-gradient(140deg, rgba(185,205,237,.7), rgba(255,255,255,.5)); border: 1px solid rgba(255,255,255,.8); }
.quote__who { text-align: left; font-size: 14px; color: var(--muted); line-height: 1.4; }
.quote__who strong { display: block; color: var(--ink); font-weight: 600; }

/* scrolling testimonials (auto-drift left, 5 quotes) */
.testimonials {
  position: relative; overflow: hidden; padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonials__track { display: flex; width: max-content; animation: tmarquee 40s linear infinite; }
.testimonials:hover .testimonials__track { animation-play-state: paused; }
/* shift = exact pixel width of one set (set by JS); falls back to 50% if JS is off */
@keyframes tmarquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tm-shift, 50%))); } }

.tcard {
  flex: 0 0 clamp(290px, 31vw, 392px); margin-right: clamp(16px, 1.6vw, 24px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  padding: clamp(26px, 2.6vw, 34px); border-radius: 22px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 50px -34px rgba(38,64,110,.4);
  transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tcard blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.65vw, 19px); line-height: 1.5; letter-spacing: -.005em; color: var(--ink); }
.tcard figcaption { display: flex; align-items: center; gap: 14px; }
.tcard__avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--blue-deep);
  background: linear-gradient(140deg, rgba(185,205,237,.7), rgba(255,255,255,.5)); border: 1px solid rgba(255,255,255,.8); }
.tcard__who { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.tcard__who strong { display: block; color: var(--ink); font-weight: 600; }

/* ---- analytics / results charts ---- */
.results { margin-top: clamp(56px, 8vw, 100px); }
.results__head { text-align: center; margin-bottom: clamp(32px, 5vw, 58px); }
.results__head .eyebrow { color: var(--blue-deep); justify-content: center; }
.results__title { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 4vw, 44px); letter-spacing: -.015em; margin-top: 16px; }
.results__title em { color: var(--blue-deep); font-style: italic; }
.results__grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(18px, 2vw, 26px); align-items: stretch; }
.results__card { padding: clamp(26px, 3vw, 38px); border-radius: 24px; display: flex; flex-direction: column; transform-style: preserve-3d;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.results__card:hover { box-shadow: 0 42px 72px -34px rgba(38,64,110,.5); border-color: rgba(185,205,237,.85); }
.results__cap { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.results__cap span { display: block; font-family: var(--serif); font-style: normal; font-size: clamp(18px, 2.2vw, 23px); letter-spacing: -.01em; text-transform: none; color: var(--ink); margin-bottom: 5px; }
.results__big { margin: 22px 0 6px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.results__big b { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6vw, 74px); line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(158deg, var(--ink), var(--blue-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.results__big i { font-style: normal; font-size: 14px; color: var(--muted); }

.chart { width: 100%; margin-top: auto; }
.chart--area { aspect-ratio: 480 / 240; margin-top: 18px; }
.chart--radar { aspect-ratio: 1 / 1; width: 100%; max-width: 340px; margin: 6px auto 0; padding: 26px 10px; }
.chart__svg { width: 100%; height: 100%; display: block; }
.chart--radar .chart__svg { overflow: visible; }

.chart__grid { stroke: rgba(13,13,13,.09); stroke-width: 1; }
.chart__line { filter: drop-shadow(0 6px 12px rgba(44,84,136,.28)); }
.chart__dot--start { fill: #9DB6DD; stroke: #fff; stroke-width: 2; }
.chart__dot--end { fill: var(--blue-deep); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 9px rgba(44,84,136,.65)); }
.chart__xlabel { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }

.radar__ring { fill: none; stroke: rgba(13,13,13,.09); stroke-width: 1; }
.radar__spoke { stroke: rgba(13,13,13,.07); stroke-width: 1; }
.radar__label { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; fill: var(--muted); text-transform: uppercase; }
.radar__before { fill: rgba(13,13,13,.06); stroke: rgba(13,13,13,.30); stroke-width: 1.5; }
.radar__after { stroke: var(--blue-deep); stroke-width: 2; stroke-linejoin: round; }
.radar__vtx { fill: var(--blue-deep); stroke: #fff; stroke-width: 1.5; }

.results__legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; }
.lg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.lg i { width: 12px; height: 12px; border-radius: 3px; }
.lg--before i { background: rgba(13,13,13,.16); border: 1px solid rgba(13,13,13,.3); }
.lg--after i { background: var(--blue); border: 1px solid var(--blue-deep); }

/* chart draw-in animations (triggered by .is-drawn) */
.chart__area { opacity: 0; transition: opacity 1.2s var(--ease) .3s; }
.chart__dot { opacity: 0; transition: opacity .5s var(--ease); }
.chart__dot--start { transition-delay: .25s; }
.chart__dot--end { transition-delay: 1.5s; }
.radar__before { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s; }
.radar__after { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity 1s var(--ease) .4s, transform 1.1s cubic-bezier(.34,1.56,.64,1) .4s; }
.radar__vtx { opacity: 0; transition: opacity .5s var(--ease) 1.2s; }
.results.is-drawn .chart__area { opacity: 1; }
.results.is-drawn .chart__dot { opacity: 1; }
.results.is-drawn .radar__before { opacity: 1; transform: scale(1); }
.results.is-drawn .radar__after { opacity: 1; transform: scale(1); }
.results.is-drawn .radar__vtx { opacity: 1; }

@media (max-width: 760px) { .results__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FLOATING CARDS — gentle continuous idle bob on every card.
   Uses the `translate` property so it composes with the .tilt `transform`
   (hover bend) instead of conflicting. Off under reduced-motion.
   ===================================================================== */
@keyframes cardFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: no-preference) {
  .card, .tier, .results__card, .about__panel, .tcard {
    animation: cardFloat 6s ease-in-out infinite;
    will-change: translate;
  }
  /* de-sync the bob so cards drift independently, not in lockstep */
  .card:nth-child(2n), .tier:nth-child(2n), .tcard:nth-child(2n) { animation-duration: 7s;   animation-delay: -3s; }
  .card:nth-child(3n), .tier:nth-child(3n), .tcard:nth-child(3n) { animation-duration: 6.4s; animation-delay: -1.6s; }
  .card:nth-child(4n), .tier:nth-child(4n), .tcard:nth-child(4n) { animation-duration: 7.6s; animation-delay: -4.4s; }
  .tcard:nth-child(5n) { animation-duration: 6.8s; animation-delay: -2.3s; }
  .results__card:nth-child(2n) { animation-duration: 7.2s; animation-delay: -3.4s; }
  /* settle the card while you interact with it */
  .card:hover, .tier:hover, .results__card:hover, .about__panel:hover, .tcard:hover { animation-play-state: paused; }
}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about { position: relative; padding: clamp(90px, 13vw, 170px) 0; background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%); overflow: hidden; }
.about__bg { position: absolute; inset: 0; z-index: 0; }
.orb--soft { width: 50vw; height: 50vw; right: -12vw; top: 10%; background: radial-gradient(circle, rgba(185,205,237,.55), transparent 68%); filter: blur(50px); animation: breathe 13s var(--ease-soft) infinite; }
.about__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.about__copy p { color: var(--muted); font-size: clamp(16px, 1.9vw, 18.5px); line-height: 1.7; margin-top: 22px; max-width: 52ch; }
.about__copy .section-title { margin-top: 18px; }
.about__signature { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.4vw, 24px) !important; color: var(--ink) !important; margin-top: 30px !important; }

.about__panel { position: relative; padding: clamp(30px, 4vw, 48px); border-radius: 26px; overflow: hidden; transform-style: preserve-3d; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.about__panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(185,205,237,.4), transparent 60%); transition: opacity .4s; pointer-events: none; }
.about__panel:hover::before { opacity: 1; }
.about__mark { position: absolute; right: -4px; top: -10px; width: 156px; height: auto; opacity: .06; pointer-events: none; }
.about__list { list-style: none; position: relative; z-index: 1; }
.about__list li { padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.about__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.about__list li span { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 5px; }

/* =====================================================================
   SERVICES DIFFERENTIATOR · FAQ · NEXT STEPS
   ===================================================================== */
.svc-diff {
  margin: clamp(34px, 5vw, 58px) auto 0;
  padding: clamp(26px, 3.6vw, 46px) clamp(24px, 4vw, 56px);
  border-radius: 24px;
  max-width: 880px;
  text-align: center;
}
.svc-diff h3 {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(21px, 2.6vw, 30px); letter-spacing: -.01em; line-height: 1.22;
}
.svc-diff p {
  margin: 14px auto 0; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.7;
  color: var(--muted); max-width: 64ch;
}

.faq { padding: clamp(80px, 11vw, 150px) 0; }
.faq__list { max-width: 760px; margin: clamp(36px, 5vw, 56px) auto 0; display: grid; gap: 14px; }
.faq__item {
  background: linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,255,255,.36));
  border: 1px solid rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(38,64,110,.35);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.faq__item:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -28px rgba(38,64,110,.45); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 56px 18px 22px;
  font-weight: 600; font-size: clamp(15px, 1.8vw, 17px); letter-spacing: -.01em;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 12px; height: 12px; translate: 0 -50%;
  background:
    linear-gradient(var(--blue-deep), var(--blue-deep)) center / 12px 1.6px no-repeat,
    linear-gradient(var(--blue-deep), var(--blue-deep)) center / 1.6px 12px no-repeat;
  transition: rotate .3s var(--ease);
}
.faq__item[open] summary::after { rotate: 45deg; }
.faq__item > p {
  padding: 0 56px 20px 22px; margin: -2px 0 0;
  font-size: 14.5px; line-height: 1.7; color: var(--muted); max-width: 62ch;
}

.next-steps { margin-top: 30px; }
.next-steps__label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue); font-weight: 600;
}
.next-steps ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.next-steps li { display: flex; gap: 14px; align-items: baseline; }
.next-steps li span { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--blue); flex: 0 0 24px; }
.next-steps li div { font-size: 14px; line-height: 1.6; color: var(--muted-dark); max-width: 46ch; }
.next-steps li b { color: var(--cream); font-weight: 600; }

/* =====================================================================
   FREE RESOURCES (guide + letter) · FOUNDER BLOCK · TIERS ALT LINK
   ===================================================================== */
.resources { padding: clamp(80px, 11vw, 150px) 0; }
.res-grid {
  max-width: 940px; margin: clamp(36px, 5vw, 56px) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.res-card { padding: clamp(24px, 3vw, 38px); border-radius: 22px; display: flex; flex-direction: column; }
.res-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.01em; line-height: 1.18; }
.res-card > p { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.res-form { margin-top: auto; padding-top: 20px; }
.res-row { display: flex; gap: 10px; }
.res-row input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: rgba(255,255,255,.65); border: 1px solid var(--line); border-radius: 100px; padding: 12px 18px;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.res-row input::placeholder { color: var(--muted); opacity: .7; }
.res-row input:focus { outline: none; border-color: var(--blue-deep); background: #fff; box-shadow: 0 0 0 4px rgba(185,205,237,.25); }
.res-row .btn { padding: 12px 20px; font-size: 13.5px; white-space: nowrap; }
.res-status { margin: 10px 4px 0; font-size: 12.5px; color: var(--muted); min-height: 1em; transition: color .3s; }
.res-status.is-ok { color: var(--blue-deep); }
.res-status.is-error { color: #A04545; }
.res-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.about .founder { margin-top: clamp(28px, 4vw, 48px); }
.founder {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 34px);
  padding: clamp(22px, 3vw, 36px); border-radius: 22px; max-width: 880px; margin-inline: auto;
}
.founder__photo {
  flex: 0 0 auto; width: 120px; height: 144px; border-radius: 20px;
  object-fit: cover; object-position: center top;
  border: 1px solid rgba(185,205,237,.8);
  box-shadow: 0 16px 32px -16px rgba(38,64,110,.45);
}
.founder__label { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-deep); }
.founder__name { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.01em; margin-top: 6px; }
.founder__role { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.founder__facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.founder__facts li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.founder__facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 1.6px; background: var(--blue-deep); }

.tiers__alt { margin-top: clamp(24px, 3vw, 34px); text-align: center; font-size: 14px; color: var(--muted); }
.tiers__alt a { color: var(--blue-deep); font-weight: 500; transition: color .3s; }
.tiers__alt a:hover { color: var(--blue-ink); }

@media (max-width: 720px) {
  .res-grid { grid-template-columns: 1fr; max-width: 480px; }
  .res-row { flex-direction: column; }
  .res-row .btn { width: 100%; }
  .founder { flex-direction: column; text-align: center; align-items: center; }
  .founder__facts li { text-align: left; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact { position: relative; padding: clamp(90px, 13vw, 180px) 0; background: var(--ink); color: var(--cream); overflow: hidden; }
.contact__bg { position: absolute; inset: 0; z-index: 0; opacity: .5; }
.contact__bg .orb--1 { width: 40vw; height: 40vw; left: -10vw; bottom: -10vw; top: auto; background: radial-gradient(circle, rgba(124,160,222,.5), transparent 70%); }
.contact__bg .orb--2 { width: 34vw; height: 34vw; right: -8vw; top: -8vw; background: radial-gradient(circle, rgba(185,205,237,.35), transparent 70%); }
.contact__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.contact .eyebrow, .contact .eyebrow span { color: var(--blue); }
.contact__title { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 9vw, 104px); line-height: 1; letter-spacing: -.03em; margin-top: 18px; }
.contact__title em { color: var(--blue); font-style: italic; }
.contact__lead { margin-top: 26px; font-size: clamp(16px, 2vw, 19px); color: var(--muted-dark); max-width: 44ch; line-height: 1.6; }
.contact__mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 15px; color: var(--blue); transition: gap .3s var(--ease), color .3s; }
.contact__mail:hover { gap: 14px; color: var(--cream); }

.contact__form { padding: clamp(26px, 3.4vw, 42px); border-radius: 24px; --glass-bg: var(--glass-bg-dark); --glass-border: var(--glass-border-dk); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 9px; }
.field input, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--cream);
  background: rgba(247,243,232,.05); border: 1px solid rgba(185,205,237,.2); border-radius: 12px; padding: 14px 16px;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(247,243,232,.34); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: rgba(247,243,232,.08); box-shadow: 0 0 0 4px rgba(185,205,237,.12); }
.contact__form .btn { margin-top: 8px; }
.contact__note { margin-top: 16px; font-size: 13px; color: var(--muted-dark); text-align: center; transition: color .3s; }
.contact__note.is-error { color: #F2B8B8; }
.contact__note.is-ok { color: var(--blue); }

/* Book-the-call panel (replaces the redundant intake form) */
.book-panel {
  padding: clamp(28px, 3.6vw, 46px); border-radius: 24px;
  --glass-bg: var(--glass-bg-dark); --glass-border: var(--glass-border-dk);
  display: flex; flex-direction: column;
}
.book-panel__eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.book-panel__title { font-family: var(--serif); font-weight: 500; line-height: 1.04; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.02em; margin-top: 12px; }
.book-panel__title em { font-style: italic; color: var(--blue); }
.book-panel__lead { margin-top: 16px; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.62; color: var(--muted-dark); max-width: 42ch; }
.book-panel__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.book-panel__list li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.5; color: var(--cream); }
.book-panel__list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(185,205,237,.16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9CDED' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / 11px;
}
.book-panel .btn { margin-top: 28px; }
.book-panel__note { margin-top: 14px; font-size: 13px; color: var(--muted-dark); text-align: center; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: #080808; color: var(--cream); padding: clamp(56px, 8vw, 90px) 0 36px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-light); }
.footer__r { width: 74px; height: auto; display: block; filter: drop-shadow(0 8px 22px rgba(124,160,222,.28)); }
.footer__word { font-family: var(--serif); font-size: 19px; letter-spacing: .04em; margin-top: 14px; }
.footer__word b { font-weight: 600; }
.footer__tag { color: var(--muted-dark); font-size: 14px; margin-top: 8px; }
.footer__nav, .footer__connect { display: flex; flex-direction: column; gap: 12px; }
.footer__nav span, .footer__connect span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.footer__nav a, .footer__connect a { color: var(--muted-dark); font-size: 15px; transition: color .25s var(--ease); width: fit-content; }
.footer__nav a:hover, .footer__connect a:hover { color: var(--cream); }
.footer__social { display: flex; gap: 12px; margin-top: 12px; }
.footer__social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-light); color: var(--muted-dark); transition: all .3s var(--ease); }
.footer__social a:hover { color: var(--ink); background: var(--blue); border-color: var(--blue); transform: translateY(-3px); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; font-size: 13px; color: var(--muted-dark); }

/* =====================================================================
   SCROLL MODEL — natural document scroll.
   Sections flow normally; their content reveals on enter via [data-reveal]
   (opacity + gentle rise) and the manifesto lines / process nodes light up as
   they cross the viewport. No pinning, no cross-dissolve.
   ===================================================================== */

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 940px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px;
    background: rgba(255,255,255,.5); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; z-index: 81; position: relative;
    backdrop-filter: blur(8px);
  }
  .nav__toggle span { display: block; width: 20px; height: 1.7px; margin: 0 auto; background: var(--ink); transition: transform .35s var(--ease), opacity .25s; }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(3.85px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { transform: translateY(-3.85px) rotate(-45deg); }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .contact__form, .book-panel { order: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --gut: 18px; }
  .cards { grid-template-columns: 1fr; }
  .hero { padding-top: 92px; }
  .hero__title { font-size: clamp(34px, 9.2vw, 46px); }
  .hero__sub { font-size: 16.5px; margin-top: 22px; }
  .hero__meta { gap: 9px; font-size: 10.5px; margin-top: 32px; }
  .hero__actions { gap: 11px; margin-top: 30px; }
  .section-head { margin-bottom: clamp(26px, 7vw, 40px); }
  .section-title { font-size: clamp(28px, 8vw, 40px); }
  .step { grid-template-columns: 22px 1fr; gap: 16px; }
  .step__body { padding-bottom: clamp(38px, 9vw, 60px); }
  /* analytics fit small screens */
  .results__grid { gap: 22px; }
  .chart--radar { max-width: 280px; padding: 18px 4px; }
  .radar__label { font-size: 9px; }
  .results__big b { font-size: clamp(40px, 14vw, 56px); }
  .proof__feature-num { font-size: clamp(34px, 12.5vw, 56px); }
  .stats { gap: 26px 14px; }
  /* footer */
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 6px; }
  .quote figcaption { flex-direction: column; gap: 10px; text-align: center; }
  .quote__who { text-align: center; }
  /* avoid hairline horizontal scroll from big display type */
  .hero, .manifesto, .about, .contact { overflow-x: clip; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .mline { opacity: 1 !important; color: var(--cream) !important; transform: none !important; }
  .orb, .caustics, .depth-light, .marquee__track { animation: none !important; }
  .testimonials { overflow-x: auto; }
  .testimonials__track { animation: none !important; }
  .cursor-glow { display: none !important; }
}

/* =====================================================================
   FOUNDER CONTENT SYSTEMS — new-section styling
   Reuses tokens, .glass, .btn, .ticks, .section-head throughout.
   ===================================================================== */

/* PROBLEM */
.problem { padding: clamp(80px, 11vw, 150px) 0; }
.problem__body { max-width: 720px; margin: clamp(6px,2vw,18px) auto 0; text-align: center; }
.problem__body p { font-size: clamp(16px, 1.9vw, 19px); color: var(--muted); line-height: 1.65; margin-top: 16px; }
.problem__punch { color: var(--ink) !important; font-family: var(--serif); font-style: italic; font-size: clamp(18px,2.2vw,23px) !important; line-height: 1.4; }

/* CORE MECHANISM — knowledge map */
.mechanism { padding: clamp(80px, 12vw, 160px) 0; background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); }
.kmap { border-radius: 26px; padding: clamp(26px, 3.4vw, 46px); max-width: 960px; margin-inline: auto; }
.kmap__label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-deep); }
.kmap__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.kmap__grid li { font-size: 13.5px; color: var(--ink-soft); background: rgba(185,205,237,.14); border: 1px solid rgba(185,205,237,.4); border-radius: 12px; padding: 12px 15px; line-height: 1.35; }
.kmap__close { font-family: var(--serif); font-size: clamp(16px,2vw,20px); color: var(--ink); line-height: 1.5; }
.kmap__close em { color: var(--blue-deep); font-style: italic; }

/* SERVICES — two systems */
.systems { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 28px); max-width: 1000px; margin-inline: auto; align-items: stretch; }
.system-card { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 42px); border-radius: 24px; }
.system-card__label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); }
.system-card__title { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.18; margin-top: 12px; letter-spacing: -.01em; }
.system-card__desc { margin-top: 14px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.system-card__for { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); font-style: italic; padding-bottom: 20px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.system-card .ticks { margin-top: 20px; }
.system-card .btn { margin-top: 26px; }

/* COMPETITIVE POSITIONING */
.compare { padding: clamp(66px, 9vw, 130px) 0; }
.compare__inner { max-width: 940px; margin-inline: auto; border-radius: 26px; padding: clamp(30px, 4vw, 56px); text-align: center; }
.compare__title { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 3.3vw, 40px); line-height: 1.12; letter-spacing: -.015em; }
.compare__title em { color: var(--blue-deep); font-style: italic; }
.compare__lead { max-width: 640px; margin: 20px auto 0; font-size: clamp(15px,1.8vw,17px); color: var(--muted); line-height: 1.62; }
.compare__caps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 28px; }
.compare__caps li { font-size: 13px; font-weight: 500; color: var(--blue-ink); background: rgba(185,205,237,.2); border: 1px solid rgba(185,205,237,.5); border-radius: 100px; padding: 8px 15px; }

/* PRICING — packages (extends .tier / .tiers) */
.pricing-group { max-width: 900px; margin: 0 auto clamp(30px, 4vw, 52px); }
.pricing-group__label { text-align: center; font-size: 13px; letter-spacing: .03em; color: var(--muted); margin-bottom: clamp(24px, 3vw, 34px); }
.pricing-group__label span { font-family: var(--serif); font-style: italic; color: var(--blue-deep); font-size: 16px; }
.tiers--pair { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.tier__kind { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 10px; }
.tier--featured .tier__kind { color: var(--blue); }
.programs .tier { padding-top: clamp(26px, 2.2vw, 34px); }
.programs .tier--badged, .programs .tier--featured { padding-top: clamp(34px, 3vw, 46px); }
.programs .tier__name { font-size: clamp(19px, 2.2vw, 24px); }
.programs .tier__tagline { margin-top: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tier--featured .tier__tagline { border-color: var(--line-light); }
.programs .tier .ticks { margin-top: 18px; }
.programs .tier__cta { margin-top: 24px; }
.tier--badged { border-color: rgba(185,205,237,.75); box-shadow: 0 30px 60px -34px rgba(38,64,110,.5); }
.programs .tier__badge { white-space: normal; text-align: center; max-width: 88%; line-height: 1.3; }

/* INITIAL ENGAGEMENT */
.engagement { max-width: 900px; margin: 0 auto; border-radius: 22px; padding: clamp(24px, 3vw, 38px); }
.engagement__label { font-family: var(--serif); font-size: clamp(16px,2vw,20px); color: var(--ink); margin-bottom: 16px; }
.engagement__list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.engagement__list li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.engagement__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 1.6px; background: var(--blue-deep); }

/* PRODUCTION — fixed deliverables, flexible production */
.production { padding: clamp(80px, 11vw, 150px) 0; background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); }
.production__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 70px); max-width: 1040px; margin-inline: auto; align-items: start; }
.production__intro .eyebrow { margin-bottom: 16px; }
.production__intro .section-title { font-size: clamp(28px, 3.6vw, 46px); }
.production__punch { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: clamp(18px,2.2vw,24px); color: var(--blue-deep); line-height: 1.35; }
.production__body > p { font-size: 15.5px; color: var(--muted); line-height: 1.65; }
.production__sub { margin-top: 22px; font-weight: 600; color: var(--ink); font-size: 14px; }
.production__list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.production__list li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.production__list li::before { content:""; position:absolute; left:0; top:.5em; width:10px; height:1.6px; background: var(--blue-deep); }
.production__list--wrap { flex-flow: row wrap; gap: 8px 10px; margin-top: 14px; }
.production__list--wrap li { padding: 7px 15px; display: inline-flex; align-items: center; gap: 8px; background: rgba(185,205,237,.16); border: 1px solid rgba(185,205,237,.4); border-radius: 100px; }
.production__list--wrap li::before { content: none; }
.prod-ic { display: inline-flex; flex: none; color: var(--blue-deep); }
.prod-ic svg { width: 15px; height: 15px; }

/* DESTINATION */
.destination { max-width: 1040px; margin: clamp(40px,5vw,64px) auto 0; border-radius: 26px; padding: clamp(28px, 3.4vw, 46px); }
.destination__head { margin-bottom: 16px; }
.destination__title { font-family: var(--serif); font-weight: 500; font-size: clamp(20px,2.4vw,26px); margin-top: 8px; }
.destination__lead { font-size: 15px; color: var(--muted); line-height: 1.6; }
.destination__list { list-style: none; margin: 18px 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px 24px; }
.destination__list li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.destination__list li::before { content:""; position:absolute; left:0; top:.55em; width:10px; height:1.6px; background: var(--blue-deep); }
.destination__note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }

/* RESULTS — outcomes (no fabricated numbers) */
.outcomes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 940px; margin: clamp(8px,2vw,20px) auto 0; }
.outcomes li { font-family: var(--serif); font-size: clamp(15px,1.7vw,18px); color: var(--ink); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 22px 22px; line-height: 1.3; }
.outcome__icon { display: block; color: var(--blue-deep); margin-bottom: 12px; }
.outcome__icon svg { width: 25px; height: 25px; }

/* FIT — who it's for */
.fit { padding-bottom: clamp(90px, 13vw, 170px); }
.fit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px,2vw,28px); max-width: 960px; margin-inline: auto; align-items: start; }
.fit__card { border-radius: 22px; padding: clamp(26px, 3vw, 40px); }
.fit__card--bad { background: rgba(255,255,255,.4); }
.fit__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.fit__card--good .fit__label { color: var(--blue-deep); }
.fit__card--bad .fit__label { color: var(--muted); }
.fit__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fit__list li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.fit__list--good li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--blue-deep); font-weight: 700; }
.fit__list--bad li::before { content: "✕"; position: absolute; left: 0; top: -1px; color: #B3AC9C; font-weight: 600; }
.fit__card--bad .fit__list li { color: var(--muted); }

/* new-section responsive */
@media (max-width: 920px) {
  .systems { grid-template-columns: 1fr; max-width: 520px; }
  .tiers--pair { grid-template-columns: 1fr; max-width: 440px; }
  .production__grid { grid-template-columns: 1fr; gap: 26px; }
  .fit__grid { grid-template-columns: 1fr; max-width: 500px; }
}
@media (max-width: 760px) {
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .kmap__grid { grid-template-columns: repeat(2, 1fr); }
  .engagement__list, .destination__list { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .outcomes, .kmap__grid { grid-template-columns: 1fr; }
}

/* section icons — thin-line, matches the card/nav icon language */
.system-card__icon {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px;
  color: var(--blue-deep); margin-bottom: 18px;
  background: linear-gradient(140deg, rgba(185,205,237,.5), rgba(255,255,255,.4));
  border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 2px rgba(255,255,255,.8);
}
.system-card__icon svg { width: 24px; height: 24px; }
/* process is dark — light-blue icon on a soft glass tile */
.step__icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  color: var(--blue); margin-bottom: 15px;
  background: linear-gradient(140deg, rgba(185,205,237,.16), rgba(185,205,237,.05));
  border: 1px solid rgba(185,205,237,.22);
}
.step__icon svg { width: 23px; height: 23px; }
.mechanism__icon { color: var(--blue-deep); margin-bottom: 4px; }
.mechanism__icon svg { width: 30px; height: 30px; }