:root {
  --cream:        #F2EDE6;
  --white:        #FAFAF9;
  --teal:         #14797A;
  --teal-light:   #2BA5A6;
  --teal-text:    #7FD4D5;
  --teal-tint:    #E8F3F3;

  --coral:        #E8765B;
  --coral-soft:   #F0A491;

  /* golden-orange — action color */
  --gold:         #E0922E;
  --gold-hover:   #C67C20;
  --gold-light:   #F5C87A;

  /* dark periwinkle — depth anchor, replaces black */
  --periwinkle:      #3E4377;
  --periwinkle-deep: #2C2F54;
  --dark:         #3E4377;
  --dark-2:       #2C2F54;

  --text-dark:    #1A1A22;
  --text-body:    #2E2B28;
  --text-muted:   #7A7570;
  --text-light:   #F4F4F5;
  --text-dim:     #BFC2E0;

  --border:       #E4DDD5;
  --border-dark:  #4A4F85;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ─── LOGO ──────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-mark { display: block; flex-shrink: 0; }
.logo-img { height: 30px; width: auto; display: block; }
.logo-img--footer { height: 24px; }
.logo-wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.logo-wordmark--dark  { color: var(--text-dark); }
.logo-wordmark--light { color: var(--text-light); }

/* ─── NAV ───────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 249, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text-dark); }

/* ─── BUTTONS ───────────────────────────── */
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
  border: none;
  cursor: pointer;
  font-family: 'Hanken Grotesk', sans-serif;
}
.btn-gold:hover { background: var(--gold-hover); }
.btn-gold--large { font-size: 15px; padding: 14px 36px; }

/* ─── HERO ──────────────────────────────── */
.hero {
  background: var(--cream);
  padding: 0 48px;
  overflow: hidden;
  position: relative;
}
/* faint background flow line across the whole canvas */
.hero-bgline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-bgline path {
  fill: none; stroke: var(--teal); stroke-width: 1.5; opacity: 0.18;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: flowDraw 3s ease-out 0.2s forwards;
}
/* faint ambient line (pure decoration) */
.heroline2 { fill: none; stroke: #C2BCB0; stroke-width: 1.4; opacity: 0.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: flowDraw 3s ease-out 0.3s forwards; }
/* connecting thread through the process cards (draws in order) */
.connpath { fill: none; stroke: #14797A; stroke-width: 1.8; opacity: 0.32; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: flowDraw 3s cubic-bezier(0.4,0,0.3,1) 0.5s forwards; }
/* per-card hover lift */
.tilt-card { transform-box: fill-box; transform-origin: center; cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.25, 1); }
.tilt-card:hover { transform: translateY(-14px) rotate(var(--rot, 0deg)) scale(1.04); }
/* piled artifact cards */
.pile { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: pileIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes pileIn {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 56px 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}
/* feature row under hero */
.hero-features {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 0 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 1;
}
.hfeat { display: flex; gap: 14px; padding: 4px 30px; }
.hfeat:not(:first-child) { border-left: 1px solid var(--coral); }
.hfeat-ico { flex-shrink: 0; width: 36px; height: 36px; color: var(--teal); margin-top: 2px; }
.hfeat h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 7px;
}
.hfeat p { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.hero-text {
  max-width: 640px;
  position: relative;
  z-index: 2;
}
.hero-visual {
  position: relative;
  width: 100%;
  min-height: 360px;
}
.hero-rule {
  width: 48px;
  height: 3px;
  background: var(--coral);
  margin-bottom: 40px;
  border-radius: 2px;
}
.hero-eyebrow {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 22px;
}
.hero-illus { width: 100%; height: auto; max-width: 820px; display: block; overflow: visible; }
.hero h1 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  max-width: 19ch;
  margin-bottom: 28px;
}
.hero-sub {
  font-size: 16px;
  color: var(--text-body);
  max-width: 46ch;
  line-height: 1.75;
  margin-bottom: 14px;
}
.hero-tagline {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}
.hero-tagline em {
  font-style: normal;
  color: var(--teal);
}

/* ─── SYSTEM CARD ────────────────────── */
.system-card {
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  width: 296px;
  flex-shrink: 0;
  box-shadow: 0 24px 64px rgba(14,30,37,0.13), 0 4px 16px rgba(0,0,0,0.05);
  opacity: 0;
  animation: cardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes cardIn {
  from { opacity: 0; transform: rotate(-3deg) translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: rotate(-3deg) translateY(0) scale(1); }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  animation: fadeSlideIn 0.5s ease 0.9s both;
}
.card-header-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}
.card-header-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-swatches {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: swatchPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both;
}
@keyframes swatchPop {
  from { opacity: 0; transform: scale(0.8) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.card-type {
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeSlideIn 0.5s ease 1.35s both;
}
.card-type-specimen {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 54px;
  line-height: 1;
  color: var(--text-dark);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.card-type-token {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--teal);
  letter-spacing: 0.1em;
}

.card-lines {
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeSlideIn 0.5s ease 1.55s both;
}
.card-line-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 6px;
}
.card-line-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
}

.card-btn-specimen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeSlideIn 0.5s ease 1.75s both;
}

/* ─── MINI CARD ──────────────────────── */
.mini-card {
  position: absolute;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  width: 176px;
  right: 4%;
  top: 52%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
  opacity: 0;
  animation: miniCardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
@keyframes miniCardIn {
  from { opacity: 0; transform: translateY(-50%) rotate(4deg) translateX(16px); }
  to   { opacity: 0.9; transform: translateY(-50%) rotate(4deg) translateX(0); }
}
.mini-card-bar {
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: 12px;
}
.mini-card-line {
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  margin-bottom: 7px;
}
.mini-card-line--short { width: 60%; }
.mini-card-btn {
  height: 22px;
  width: 72px;
  background: var(--gold);
  border-radius: 4px;
  margin-top: 14px;
  opacity: 0.75;
}

/* ─── TOKEN PILLS & DOTS ─────────────── */
.token-pill {
  position: absolute;
  background: var(--dark);
  color: var(--text-light);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  padding: 6px 12px;
  border-radius: 100px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.pill-1 {
  top: 14%;
  left: 8%;
  animation: fadeSlideIn 0.5s ease 1.7s both;
}
.pill-2 {
  bottom: 16%;
  left: 14%;
  animation: fadeSlideIn 0.5s ease 1.9s both;
}

.float-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}
.dot-1 {
  width: 11px; height: 11px;
  background: var(--teal);
  top: 10%;
  right: 22%;
  animation: fadeIn 0.5s ease 1.9s both;
}
.dot-2 {
  width: 7px; height: 7px;
  background: var(--coral);
  bottom: 24%;
  right: 6%;
  animation: fadeIn 0.5s ease 2.1s both;
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── TRUST BAR ─────────────────────────── */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.trust-item {
  flex: 1;
  min-width: 180px;
  padding-right: 48px;
}
.trust-item:not(:last-child) {
  border-right: 1px solid var(--border);
  margin-right: 48px;
}
.trust-item .principle {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 17px;
  font-style: italic;
  color: var(--text-dark);
  display: block;
  line-height: 1.3;
  margin-bottom: 4px;
}
.trust-item .sub {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─── SHARED SECTION ────────────────────── */
.section { padding: 104px 48px; }
.section-inner { max-width: 1280px; margin: 0 auto; }

.section-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
  display: block;
}
.section h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.section-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.65;
  margin-bottom: 64px;
}

/* RULE: centered section header — add `section--centered` to a <section>
   so the eyebrow + headline + sub balance in the middle instead of
   leaving the right half of the band empty. */
.section--centered .section-label { text-align: center; }
.section--centered h2 { text-align: center; }
.section--centered .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* HEADER VARIANT — split: headline left, supporting text right (fills the
   right instead of centering). Wrap eyebrow + h2 + sub in `.section-head`. */
.section--split .section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.section--split .section-head .section-label { grid-area: 1 / 1; }
.section--split .section-head h2 { grid-area: 2 / 1; margin-bottom: 0; }
.section--split .section-head .section-sub {
  grid-area: 1 / 2 / 3 / 3;
  align-self: end;
  margin: 0;
  max-width: 46ch;
}

/* HEADER VARIANT — left header, Technical Grid fading in on the right so the
   empty space reads as intentional texture, not a void. */
.section--bg-grid { position: relative; overflow: hidden; }
.section--bg-grid > .section-inner { position: relative; z-index: 1; }
.section--bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20,121,122,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,121,122,0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: linear-gradient(75deg, transparent 38%, #000 100%);
          mask-image: linear-gradient(75deg, transparent 38%, #000 100%);
}

@media (max-width: 860px) {
  .section--split .section-head { grid-template-columns: 1fr; row-gap: 16px; margin-bottom: 40px; }
  .section--split .section-head .section-sub { grid-area: auto; }
}

/* ─── PROBLEM (TEAL) ────────────────────── */
.problem {
  background:
    radial-gradient(90% 85% at 6% -5%, rgba(43,165,166,0.28) 0%, transparent 58%),
    linear-gradient(133deg, #0E5D5E 0%, #134E58 28%, #1B3556 60%, #21244F 100%);
  padding: 116px 48px;
}
.problem .section-label { color: var(--teal-text); font-size: 13px; letter-spacing: 0.2em; text-align: center; margin-bottom: 16px; }
.problem-rule {
  width: 56px; height: 3px; background: var(--coral);
  border-radius: 2px; margin: 0 auto 56px;
}

/* Two columns: headline left (40), stacked failure rows right (60) */
.problem-grid {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.problem-lead { flex: 4; }
.problem-lead h2 {
  color: var(--white);
  font-size: clamp(2.5rem, 4vw, 3.7rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
}
.problem-h2-muted { color: rgba(255,255,255,0.46); font-weight: 700; }
.problem-lead p {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  line-height: 1.72;
  max-width: 36ch;
}

.problem-cards { flex: 6; display: flex; flex-direction: column; }
.problem-row {
  display: flex;
  gap: 28px;
  padding: 26px 0;
  align-items: center;
}
.problem-row:first-child { padding-top: 0; }
.problem-row:last-child { padding-bottom: 0; }
.problem-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.14); }

.problem-ico {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  border: 1.5px solid rgba(127,212,213,0.5);
  color: var(--teal-text);
}
.problem-ico svg { width: 30px; height: 30px; display: block; }
.problem-row-text h3 {
  font-size: 19.5px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 11px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.problem-row-text p {
  font-size: 14.5px;
  color: rgba(255,255,255,0.64);
  line-height: 1.72;
}

/* Cream CTA bar */
.problem-cta {
  margin-top: 64px;
  background: var(--cream);
  border-radius: 18px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
}
.problem-cta-quote { display: flex; align-items: center; }
.problem-cta-q {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800; font-size: 34px; line-height: 1.14; letter-spacing: -0.025em;
}
.problem-cta-q span { display: block; color: var(--text-dark); }
.problem-cta-q .accent { color: var(--teal); }
.problem-cta-sub {
  font-size: 16px; color: var(--text-muted); line-height: 1.6;
  margin-top: 16px; max-width: 44ch;
}

.problem-cta-action {
  display: flex; align-items: flex-start; gap: 22px;
  border-left: 1px solid var(--border); padding-left: 48px;
}
.problem-cta-text .problem-cta-reassure {
  font-size: 13.5px; font-weight: 400; color: var(--text-muted);
  line-height: 1.55; margin-top: 16px; margin-bottom: 0;
}
.problem-cta-ico {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--coral-soft);
  color: var(--coral);
}
.problem-cta-ico svg { width: 22px; height: 22px; display: block; }
.problem-cta-text p {
  font-size: 18px; font-weight: 700; color: var(--text-dark);
  line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 18px;
}

/* ─── OFFER (WHITE) ─────────────────────── */
.offer { background: var(--white); }

/* Top: intro + browser mockup */
.offer-top {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 88px;
}
.offer-eyebrow-rule { width: 56px; height: 3px; background: var(--coral); border-radius: 2px; margin-bottom: 22px; }
.offer-intro h2 {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  margin: 6px 0 24px;
}
.offer-h2-accent { color: var(--teal); }
.offer-intro p {
  font-size: 16.5px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 40ch;
}

/* Browser mockup with auto-scrolling site */
.browser {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 34px 70px -28px rgba(44,47,84,0.45), 0 8px 24px -12px rgba(44,47,84,0.18);
  overflow: hidden;
}
.browser-bar {
  height: 34px; background: #ECE6DE; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: 1px solid #E0D9CF;
}
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: #C9C1B5; }
.browser-bar span:first-child { background: #E8765B; }
.browser-bar span:nth-child(2) { background: #E0922E; }
.browser-bar span:nth-child(3) { background: #2BA5A6; }
.browser-scroll { height: 460px; overflow: hidden; position: relative; }
.browser-scroll img {
  width: 100%; display: block;
  animation: scrollSite 22s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes scrollSite {
  0%, 10%   { transform: translateY(0); }
  48%, 58%  { transform: translateY(calc(-100% + 460px)); }
  96%, 100% { transform: translateY(0); }
}

/* 4-phase row + animated dotted connector */
.offer-phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 72px;
}
.offer-phase-line {
  position: absolute; top: 33px; left: 12.5%; right: 12.5%; height: 2px; z-index: 0;
  background-image: linear-gradient(90deg, #C2BCB0 0 5px, transparent 5px 13px);
  background-size: 13px 2px; background-repeat: repeat-x;
}

.offer-phase {
  --accent: var(--teal);
  position: relative; z-index: 1;
  text-align: center;
  padding: 0 24px;
}
.offer-phase--coral { --accent: var(--coral); }
.offer-phase--gold  { --accent: var(--gold); }
.offer-phase:not(:first-child)::before {
  content: ''; position: absolute; left: 0; top: 92px; bottom: 6px; width: 1px;
  background: var(--border);
}
.offer-phase-ico {
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--accent); color: #fff; margin: 0 auto 20px;
}
.offer-phase-ico svg { width: 30px; height: 30px; display: block; }
.offer-phase-num {
  display: inline-block;
  font-family: 'Geist Mono', monospace; font-size: 15px; font-weight: 500;
  color: var(--accent); border-bottom: 2px solid var(--accent);
  padding-bottom: 5px; margin-bottom: 14px;
}
.offer-phase h4 {
  font-size: 18px; font-weight: 700; color: var(--text-dark);
  letter-spacing: -0.015em; margin-bottom: 10px;
}
.offer-phase p {
  font-size: 14.5px; color: var(--text-muted); line-height: 1.6; max-width: 24ch; margin: 0 auto;
}

/* Quote band */
.offer-quote {
  background: var(--cream);
  border-radius: 16px;
  padding: 44px 52px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.offer-quote-mark {
  font-family: 'Hanken Grotesk', sans-serif; font-weight: 800;
  font-size: 86px; line-height: 0.7; color: var(--teal); align-self: flex-start;
}
.offer-quote-bar { width: 2px; align-self: stretch; background: var(--teal); border-radius: 2px; flex-shrink: 0; }
.offer-quote-body { flex: 1; }
.offer-quote blockquote {
  font-size: clamp(17px, 1.9vw, 21px);
  color: var(--text-body);
  line-height: 1.55;
  margin-bottom: 16px;
}
.offer-quote blockquote strong { color: var(--text-dark); font-weight: 700; }
.offer-quote-attr {
  font-size: 17px; font-weight: 700; color: var(--teal);
}
.offer-quote-attr span {
  display: block; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .browser-scroll img { animation: none; }
}

/* ─── NOT THIS ──────────────────────────── */
.not-this {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 28px 48px;
}
.not-this-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.not-this-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.not-this-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.not-this-pill {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 14px;
}

/* ─── PROCESS (TEAL TINT + LAYERED DECOR) ───────────────── */
.process {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EDF5F4 0%, var(--teal-tint) 100%);
}
.process .section-inner { position: relative; z-index: 2; }
.process .section-label { color: var(--teal); }
.process h2 { color: var(--text-dark); }
.process .section-sub { color: var(--text-muted); }

/* short coral rule under the headline */
.process-rule {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--coral);
  margin: 22px auto 24px;
}

/* Technical Grid treatment (Design Elements §1) — assigned to process /
   strategy / proposal sections. Teal lines at ~7% opacity (within the
   5–15% rule), faded so the section stays spacious. */
.process-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20,121,122,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,121,122,0.07) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 50%, transparent 100%);
          mask-image: radial-gradient(130% 95% at 50% 0%, #000 50%, transparent 100%);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  margin-top: 64px;
}
.process-step {
  --acc: var(--teal);
  --acc-tint: var(--teal-tint);
  padding-right: 12px;
}
.process-step--teal { --acc: var(--teal);       --acc-tint: #DDEFEE; }
.process-step--peri { --acc: var(--periwinkle); --acc-tint: #E7E8F3; }
.process-step--gold { --acc: var(--gold);       --acc-tint: #FAEBD4; }

/* number + icon badge + connector row */
.step-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 26px;
}
.step-big-num {
  font-family: 'Geist Mono', monospace;
  font-size: 60px;
  font-weight: 500;
  color: var(--acc);
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.step-icon {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acc-tint);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-icon svg { width: 30px; height: 30px; }

/* connector line + node reaching toward the next step */
.step-connector { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.sc-line { height: 2px; flex: 1 1 auto; background: rgba(62,67,119,0.22); }
.sc-node {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--acc); flex-shrink: 0;
}
.step-connector--end .sc-line {
  background: linear-gradient(90deg, rgba(224,146,46,0.5), rgba(224,146,46,0));
}
.step-connector--end .sc-node { display: none; }

.step-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--acc);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.process-step h3 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.process-step p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ─── PRICING (WHITE) ───────────────────── */
.pricing { background: var(--white); }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: stretch;
  margin-bottom: 48px;
}
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(14,30,37,0.04);
}
.price-card--starter { border-top: 4px solid var(--teal); }
.price-card--growth  { border-top: 4px solid var(--periwinkle); }
.price-card-body { padding: 40px 38px 32px; display: flex; flex-direction: column; flex: 1; }

.price-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.price-card--starter .price-kicker { color: var(--teal); }
.price-card--growth  .price-kicker { color: var(--periwinkle); }

.price-amount {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-dark);
  margin-bottom: 14px;
}
.price-amount .price-from {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-right: 2px;
}
.price-for {
  font-style: italic;
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.price-list { list-style: none; margin-bottom: 28px; }
.price-list li {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  padding-left: 26px;
  margin-bottom: 12px;
}
.price-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 500;
}
.price-card--starter .price-list li::before { color: var(--teal); }
.price-card--growth  .price-list li::before { color: var(--periwinkle); }
.price-list li strong { color: var(--text-dark); font-weight: 600; }

/* scope boundaries — a feature, not fine print */
.price-scope {
  background: var(--cream);
  border: 1px dashed #D5CEC3;
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 28px;
}
.price-scope-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}
.price-scope ul { list-style: none; }
.price-scope li {
  position: relative;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  padding-left: 22px;
  margin-bottom: 7px;
}
.price-scope li:last-child { margin-bottom: 0; }
.price-scope li::before {
  content: '✕';
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--coral);
}
.price-scope p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}
.price-scope p strong { color: var(--text-dark); font-weight: 600; }

/* retainer add-on strip — full-bleed card footer */
.price-retainer {
  margin-top: auto;
  background: var(--teal-tint);
  border-top: 1px solid var(--border);
  padding: 24px 38px 28px;
}
.price-card--growth .price-retainer { background: #ECEDF5; }
.price-retainer-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}
.price-retainer h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.price-retainer h4 span { font-weight: 600; }
.price-card--starter .price-retainer h4 span { color: var(--teal); }
.price-card--growth  .price-retainer h4 span { color: var(--periwinkle); }
.price-retainer p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* promoted "which one am I" audience line */
.price-audience {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-dark);
  margin-bottom: 18px;
}
.price-amount .price-unit {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 9px;
  vertical-align: middle;
}

/* per-card CTA */
.price-cta { align-self: flex-start; margin-top: 4px; margin-bottom: 24px; }
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--teal);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8.5px 21px;
  border: 1.5px solid var(--teal);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--teal); color: var(--white); }

/* list labels + the growth "plus" group */
.price-list-label, .price-plus-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.price-plus-label { color: var(--periwinkle); }
.price-list--plus { margin-bottom: 0; }
.price-list--plus li::before { content: '+'; color: var(--periwinkle); font-weight: 700; }

/* featured (Growth) card — the recommended pick */
.price-card { position: relative; }
.price-card--featured {
  border-color: var(--periwinkle);
  box-shadow: 0 16px 44px rgba(44,47,84,0.14);
}
.price-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--periwinkle);
  padding: 5px 12px;
  border-radius: 100px;
}

/* the two-week clock rule */
.pricing-note {
  background: var(--cream);
  border-radius: 12px;
  padding: 36px 40px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.pricing-note-line {
  width: 3px;
  border-radius: 2px;
  background: var(--gold);
  align-self: stretch;
  flex-shrink: 0;
  min-height: 60px;
}
.pricing-note blockquote {
  font-family: 'Hanken Grotesk', sans-serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-body);
  line-height: 1.6;
}
.pricing-note blockquote strong {
  font-style: normal;
  color: var(--text-dark);
}

/* ─── ABOUT (CREAM) ─────────────────────── */
.about { background: var(--cream); position: relative; overflow: hidden; }
.about .section-inner { position: relative; z-index: 1; }

/* Periwinkle Halo treatment (§4C) — large, subtle, cropped gradient blobs.
   Periwinkle-led (signature) with a coral accent, all within the 5–15% rule. */
.about-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.about-gradient {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(42% 48% at 80% 22%, rgba(62,67,119,0.30) 0%, transparent 62%),
    radial-gradient(40% 46% at 13% 76%, rgba(232,118,91,0.26) 0%, transparent 64%),
    radial-gradient(36% 42% at 58% 98%, rgba(62,67,119,0.22) 0%, transparent 66%);
  filter: blur(4px);
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 520px);
  gap: 64px;
  align-items: center;
  justify-content: center;
}

/* photo + Corner Frames treatment (03) + name caption */
.about-photo-wrap { position: relative; }
.about-photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 4;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(44,47,84,0.16);
}
.about-photo-frame {
  position: absolute;
  inset: -14px;
  z-index: 2;
  pointer-events: none;
  --c: var(--teal);
  --s: 26px;
  --t: 2px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--s) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--s) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--s) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--s) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--s) no-repeat;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: rgba(250,250,249,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 11px;
  padding: 9px 15px;
  box-shadow: 0 8px 22px rgba(44,47,84,0.16);
}
.about-caption strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}
.about-caption span {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.about-rule {
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: var(--coral);
  margin: 0 0 28px;
}
.about-text h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  margin-bottom: 22px;
}
.about-text p {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 20px;
}
.about-text p em {
  font-style: normal;
  font-weight: 600;
  color: var(--teal);
}
.about-text p:last-of-type { margin-bottom: 0; }

/* ─── CONTACT (DARK) ─────────────────────── */
.contact {
  background: var(--dark);
  padding: 112px 48px;
  position: relative;
  overflow: hidden;
}
/* Token Network treatment (§2) — subtle node/line constellation */
.contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 42%, transparent 72%);
          mask-image: linear-gradient(105deg, #000 0%, #000 42%, transparent 72%);
}
.contact-net { width: 100%; height: 100%; display: block; opacity: 0.12; }
.cn-lines line { stroke: #2BA5A6; stroke-width: 1; opacity: 1; }
.cn-nodes circle { opacity: 1; }
.contact-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}
.contact-left .section-label { color: var(--teal-text); }
.contact-left h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-light);
  margin-bottom: 20px;
}
.contact-left p {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 40ch;
  line-height: 1.65;
}

/* ─── FORM ───────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.form-field input,
.form-field textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: 'Hanken Grotesk', sans-serif;
  color: var(--text-light);
  transition: border-color 0.15s, background 0.15s;
  outline: none;
  width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255,255,255,0.22); }
.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(20, 121, 122, 0.6);
  background: rgba(255,255,255,0.09);
}
.form-field textarea { resize: vertical; min-height: 108px; }

/* ─── CONTACT: trust cues + stepped form ─── */
.contact-trust {
  list-style: none;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.contact-trust li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.4;
}
.contact-trust li::before {
  content: '';
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(20,121,122,0.28);
}
.contact-trust li::after {
  content: '✓';
  position: absolute;
  left: 5px; top: 1px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-text);
  line-height: 20px;
}

/* stepped form shell — an elevated panel on the dark section */
.contact-form--stepped {
  gap: 0;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 34px 34px 30px;
  box-shadow: 0 26px 64px rgba(0,0,0,0.24);
  min-height: 430px;
}

/* progress */
.cf-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.cf-progress-bar {
  flex: 1; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.12); overflow: hidden;
}
.cf-progress-bar span {
  display: block; height: 100%; width: 33.33%; border-radius: 4px;
  background: linear-gradient(90deg, var(--teal-light), var(--gold));
  transition: width 0.35s ease;
}
.cf-progress-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--text-dim); white-space: nowrap;
}
.cf-progress-label b { color: var(--teal-text); font-weight: 500; }

/* steps */
.cf-step { display: flex; flex-direction: column; gap: 18px; }
.contact-form.cf-js .cf-step { display: none; }
.contact-form.cf-js .cf-step.is-active { display: flex; animation: cfStepIn 0.35s ease; }
@keyframes cfStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cf-step-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-text);
}
.cf-step-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em;
  color: var(--text-light);
  margin-top: -10px;
}
.contact-form--stepped .form-field input,
.contact-form--stepped .form-field textarea {
  padding: 14px 16px; font-size: 16px; border-radius: 10px;
}

/* step nav */
.cf-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.cf-nav .cf-next, .cf-nav .cf-submit { margin-left: auto; }
.btn-ghost-light {
  display: inline-block;
  background: transparent;
  color: var(--text-light);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px; font-weight: 600;
  padding: 8.5px 18px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
.cf-reassure {
  font-size: 12.5px; color: var(--text-dim);
  line-height: 1.55; margin-top: 16px;
}

/* no-JS fallback: show all steps, hide step nav buttons */
.contact-form:not(.cf-js) .cf-next,
.contact-form:not(.cf-js) .cf-back,
.contact-form:not(.cf-js) .cf-progress { display: none; }
.contact-form:not(.cf-js) .cf-step { margin-bottom: 8px; }

/* ─── FOOTER ─────────────────────────────── */
footer {
  background: var(--dark);
  border-top: 1px solid var(--border-dark);
  padding: 28px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer p {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.03em;
}

/* ─── FLOW PATH (signature) ──────────── */
.flow-svg { width: 100%; height: auto; max-width: 580px; display: block; margin: 0 auto; overflow: visible; }
.flow-frame { fill: none; stroke: var(--teal); stroke-width: 2; opacity: 0.45;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: flowDraw 0.7s ease-out 0.1s forwards; }
.flow-frame.coral { stroke: var(--coral); }
.flow-line { fill: none; stroke: url(#flowgrad); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: flowDraw 1.7s cubic-bezier(0.5,0,0.2,1) 0.4s forwards; }
.flow-conn { stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.4; }
@keyframes flowDraw { to { stroke-dashoffset: 0; } }
.flow-node { opacity: 0; animation: flowFade 0.45s ease forwards; }
.flow-label { opacity: 0; animation: flowFade 0.5s ease forwards; }
@keyframes flowFade { to { opacity: 1; } }
.fl-cap { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; }
.fl-desc { font-family: 'Hanken Grotesk', sans-serif; font-size: 12px; fill: var(--text-muted); }

/* ─── ASSEMBLY ILLUSTRATION ──────────── */
.assembly { margin: 8px auto 0; max-width: 900px; }
.asm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.asm-piece, .asm-op, .asm-site { opacity: 0; }
.asm-piece { transform-box: fill-box; transform-origin: center; }
.assembly.in .asm-piece { animation: asmPop 0.55s cubic-bezier(0.16,1,0.3,1) forwards; }
.assembly.in .asm-op   { animation: asmFade 0.4s ease forwards; }
.assembly.in .asm-site { animation: asmRise 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes asmPop  { from { opacity:0; transform: translateY(12px) scale(0.85); } to { opacity:1; transform:none; } }
@keyframes asmFade { to { opacity:1; } }
@keyframes asmRise { from { opacity:0; transform: translateX(16px); } to { opacity:1; transform:none; } }
.asm-cap  { font-family:'Geist Mono',monospace; font-size:9px; letter-spacing:0.1em; fill:var(--text-muted); }
.asm-op-t { font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:26px; fill:var(--text-muted); }

/* ─── HERO JOURNEY LINE + STAGES ─────── */
.heroline { fill:none; stroke:url(#hglg); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation: flowDraw 2.4s cubic-bezier(0.45,0,0.25,1) 0.3s forwards; }
.stage { opacity:0; transform-box:fill-box; transform-origin:center;
  animation: asmPop 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.scap { font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.12em; }
.form-fill { transform:scaleX(0); transform-origin:left; transform-box:fill-box;
  animation: formFill 0.7s ease 3.0s forwards; }
@keyframes formFill { to { transform:scaleX(1); } }
.form-arrow { animation: fadeOut 0.3s ease 3.5s forwards; }
.form-check { opacity:0; animation: fadeIn 0.4s ease 3.75s forwards; }
@keyframes fadeOut { to { opacity:0; } }

/* ─── SCROLL REVEAL ──────────────────── */
/* Purpose: editorial pacing — one idea arrives at a time, drawing focus. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
/* Stagger repeating groups so items resolve in sequence, not all at once */
.problem-item:nth-child(2).reveal { transition-delay: 0.08s; }
.problem-item:nth-child(3).reveal { transition-delay: 0.16s; }
.offer-item:nth-child(2).reveal   { transition-delay: 0.06s; }
.offer-item:nth-child(3).reveal   { transition-delay: 0.12s; }
.offer-item:nth-child(4).reveal   { transition-delay: 0.18s; }
.process-step:nth-child(2).reveal { transition-delay: 0.08s; }
.process-step:nth-child(3).reveal { transition-delay: 0.16s; }
.price-card:nth-child(2).reveal   { transition-delay: 0.1s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── RESPONSIVE ─────────────────────────── */
@media (max-width: 860px) {
  nav { padding: 0 24px; }
  .nav-links li:not(:last-child) { display: none; }
  .hero { padding: 0 24px; min-height: auto; }
  .hero-inner { padding: 44px 0 20px; grid-template-columns: 1fr; gap: 16px; }
  .hero-features { grid-template-columns: 1fr; gap: 22px; padding: 8px 0 48px; }
  .hfeat { padding: 0 4px; border-left: none !important; }
  .hero-text { max-width: 100%; }
  .hero-visual { min-height: auto; width: 100%; }
  .hero-illus { max-width: 480px; margin: 0 auto; }
  .section, .problem, .contact { padding: 72px 24px; }
  .trust-bar-inner { padding: 28px 24px; flex-direction: column; gap: 0; }
  .trust-item { border-right: none !important; margin-right: 0 !important; padding-right: 0; width: 100%; }
  .trust-item:not(:first-child) { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
  .problem-rule { margin-bottom: 40px; }
  .problem-grid { flex-direction: column; gap: 40px; }
  .problem-cta { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; margin-top: 48px; }
  .problem-cta-q { font-size: 27px; }
  .problem-cta-action { border-left: none; padding-left: 0; }
  .offer-top { grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; }
  .offer-phases { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .offer-phase-line { display: none; }
  .offer-phase:not(:first-child)::before { display: none; }
  .offer-quote { flex-direction: column; align-items: flex-start; gap: 18px; padding: 32px 24px; }
  .offer-quote-bar { display: none; }
  .browser-scroll { height: 360px; }
  .not-this { padding: 20px 24px; }
  .process-steps { grid-template-columns: 1fr; border-radius: 10px; }
  .process-step { border-right: none; border-bottom: 1px solid rgba(20, 121, 122, 0.12); }
  .process-step:last-child { border-bottom: none; }
  .pricing-grid { grid-template-columns: 1fr; gap: 28px; }
  .price-card-body { padding: 32px 26px 28px; }
  .price-retainer { padding: 22px 26px 26px; }
  .pricing-note { padding: 28px 26px; gap: 18px; }
  .about-layout { grid-template-columns: 1fr; gap: 56px; }
  .about-photo-wrap { max-width: 300px; }
  .about-photo { aspect-ratio: 3/4; }
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 16px; text-align: center; padding: 24px; }
}

/* ════════════════════════════════════════════
   SUBPAGE COMPONENTS (services / process / about / contact)
   ════════════════════════════════════════════ */

/* current page in nav */
.nav-links a.current { color: var(--text-dark); font-weight: 600; }

/* ─── PAGE HERO (compact) ───────────────── */
.page-hero {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 88px 48px 76px;
}
.page-hero-inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.page-hero h1 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  max-width: 20ch;
  margin: 0 auto 22px;
}
.page-hero .lede {
  font-size: 17px;
  color: var(--text-body);
  max-width: 54ch;
  line-height: 1.7;
  margin-left: auto;
  margin-right: auto;
}

/* ─── CTA STRIP (page footer call) ──────── */
.cta-strip { background: var(--dark); padding: 96px 48px; }
.cta-strip-inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.cta-strip h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-light);
  margin-bottom: 16px;
}
.cta-strip p {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 52ch;
  margin: 0 auto 36px;
  line-height: 1.7;
}

/* ─── DEEP LIST (deliverable rows) ──────── */
.deep-rows { display: grid; gap: 0; border-top: 1px solid var(--border); }
.deep-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.deep-row h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.deep-row h3 .tag {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.deep-row p { font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 64ch; }
.deep-row p + p { margin-top: 12px; }
.deep-row p strong { color: var(--text-dark); font-weight: 600; }

/* ─── TIMELINE (process page) ───────────── */
.tl { max-width: 880px; position: relative; }
.tl-item {
  position: relative;
  padding: 0 0 64px 52px;
  border-left: 2px solid rgba(20, 121, 122, 0.25);
  margin-left: 8px;
}
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px var(--white);
}
.tl-item--pre::before    { background: var(--coral); }
.tl-item--launch::before { background: var(--gold); }
.tl-item--after::before  { background: var(--periwinkle); }
.tl-phase {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 12px;
}
.tl-item--pre .tl-phase    { color: var(--coral); }
.tl-item--launch .tl-phase { color: var(--gold); }
.tl-item--after .tl-phase  { color: var(--periwinkle); }
.tl-item h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.3;
}
.tl-item > p { font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 60ch; }
.tl-item > p strong { color: var(--text-dark); font-weight: 600; }
.tl-list { list-style: none; margin-top: 18px; }
.tl-list li {
  position: relative;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
  padding-left: 24px;
  margin-bottom: 9px;
}
.tl-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--teal);
}
.tl-note {
  background: var(--cream);
  border-radius: 10px;
  padding: 18px 22px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 56ch;
}
.tl-note strong { color: var(--text-dark); }

/* ─── FAQ ───────────────────────────────── */
.faq-list { max-width: 860px; border-top: 1px solid var(--border); }
.faq-item { padding: 30px 0; border-bottom: 1px solid var(--border); }
.faq-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.faq-item p { font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 66ch; }
.faq-item p strong { color: var(--text-dark); font-weight: 600; }

/* ─── FIT CARDS (contact page) ──────────── */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.fit-card { border: 1px solid var(--border); border-radius: 14px; padding: 32px 32px 28px; }
.fit-card--yes { border-top: 3px solid var(--teal); }
.fit-card--no  { border-top: 3px solid var(--coral); background: var(--cream); }
.fit-card h3 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.fit-card--yes h3 { color: var(--teal); }
.fit-card--no  h3 { color: var(--coral); }
.fit-card ul { list-style: none; }
.fit-card li {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  padding-left: 24px;
  margin-bottom: 10px;
}
.fit-card li:last-child { margin-bottom: 0; }
.fit-card li::before {
  position: absolute;
  left: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
}
.fit-card--yes li::before { content: '✓'; color: var(--teal); }
.fit-card--no  li::before { content: '✕'; color: var(--coral); }

/* contact page form on light bg */
.contact--page { background: var(--dark); }

/* ─── NEXT STEPS (contact page) ─────────── */
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.next-step { padding: 36px 34px; background: var(--white); border-right: 1px solid var(--border); }
.next-step:last-child { border-right: none; }
.next-step .num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 14px;
}
.next-step h3 { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; letter-spacing: -0.01em; }
.next-step p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ─── PHILOSOPHY PULL (about page) ──────── */
.philosophy { background: var(--teal); padding: 104px 48px; }
.philosophy-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.philosophy blockquote {
  font-family: 'Hanken Grotesk', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.4;
  color: var(--white);
  letter-spacing: -0.015em;
}
.philosophy .attr {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-top: 28px;
}

/* footer nav links */
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a { font-size: 12px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: rgba(255,255,255,0.8); }

/* ─── SUBPAGE RESPONSIVE ────────────────── */
@media (max-width: 860px) {
  .page-hero { padding: 64px 24px 56px; }
  .cta-strip { padding: 72px 24px; }
  .deep-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .tl-item { padding-left: 36px; padding-bottom: 48px; }
  .fit-grid { grid-template-columns: 1fr; }
  .next-steps { grid-template-columns: 1fr; }
  .next-step { border-right: none; border-bottom: 1px solid var(--border); }
  .next-step:last-child { border-bottom: none; }
  .philosophy { padding: 72px 24px; }
  footer { gap: 14px; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* section cross-link */
.more-link {
  display: inline-block;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s;
}
.more-link:hover { color: var(--gold-hover); }
.more-link--lg {
  font-size: 17px;
  border-bottom-width: 2px;
  padding-bottom: 3px;
  margin-top: 40px;
}

/* ─── NOTES (content section) ───────────── */
.notes-list { max-width: 860px; border-top: 1px solid var(--border); }
.note-entry { display: block; padding: 38px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.note-entry-meta {
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 10px; display: block;
}
.note-entry h3 {
  font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--text-dark);
  letter-spacing: -0.01em; margin-bottom: 10px; transition: color 0.18s ease;
}
.note-entry:hover h3 { color: var(--teal); }
.note-entry p { font-size: 15.5px; color: var(--text-muted); line-height: 1.7; max-width: 64ch; }
.note-entry .note-readmore {
  font-family: 'Geist Mono', monospace; font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--gold); margin-top: 14px; display: inline-block;
}

/* article page */
.note-article { max-width: 720px; margin: 0 auto; }
.note-article .note-entry-meta { margin-bottom: 18px; }
.note-article h1 {
  font-size: clamp(34px, 4.6vw, 48px); font-weight: 800; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--text-dark); margin-bottom: 26px;
}
.note-answer {
  border-left: 3px solid var(--teal); background: var(--teal-tint);
  padding: 22px 26px; border-radius: 0 10px 10px 0; margin-bottom: 36px;
}
.note-answer-label {
  display: block; font-family: 'Geist Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 10px;
}
.note-answer p { font-size: 17.5px; line-height: 1.65; color: var(--text-dark); font-weight: 500; }
.note-body p { font-size: 16.5px; line-height: 1.8; color: var(--text-body); margin-bottom: 22px; }
.note-body h2 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-dark);
  margin: 44px 0 16px;
}
.note-body h3 { font-size: 19px; font-weight: 700; color: var(--text-dark); margin: 32px 0 12px; }
.note-body ul, .note-body ol { margin: 0 0 22px 22px; }
.note-body li { font-size: 16.5px; line-height: 1.75; margin-bottom: 10px; color: var(--text-body); }
.note-body strong { color: var(--text-dark); font-weight: 600; }
.note-body blockquote {
  border-left: 3px solid var(--coral); padding: 4px 0 4px 22px; margin: 30px 0;
  font-size: 18px; line-height: 1.6; color: var(--text-dark); font-style: italic;
}
.note-cta {
  background: var(--periwinkle); border-radius: 14px; padding: 38px 40px; margin: 52px 0 0;
}
.note-cta h3 { font-size: 22px; font-weight: 700; color: var(--text-light); margin-bottom: 8px; }
.note-cta p { font-size: 15px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; max-width: 56ch; }
.note-faq { margin-top: 56px; }
.note-faq .section-label { color: var(--teal); }

@media (max-width: 720px) {
  .note-entry h3 { font-size: 22px; }
  .note-article h1 { font-size: 30px; }
  .note-answer { padding: 18px 20px; }
  .note-cta { padding: 30px 24px; }
}

/* ─── SITE REFRESH BAND ─────────────────── */
.refresh-band {
  display: flex; align-items: center; gap: 40px; justify-content: space-between;
  background: var(--teal-tint); border: 1px solid #D2E6E6; border-radius: 14px;
  padding: 36px 40px; margin-top: 28px;
}
.refresh-band-label {
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 8px;
}
.refresh-band h3 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-dark); margin-bottom: 10px;
}
.refresh-band p { font-size: 14.5px; line-height: 1.7; color: var(--text-body); max-width: 72ch; }
.refresh-band p + p { margin-top: 10px; }
.refresh-band p strong { color: var(--text-dark); }
.refresh-band .btn-gold { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 880px) {
  .refresh-band { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}