/* ============================================================
   SHANTI PERFORMANCE — design system
   Palette: "Measured Trust" — warm off-white paper · royal-indigo
   trust blue · near-black ink · navy dark bands · amber spark
   ============================================================ */

:root {
  --paper: #f7f7f3;
  --panel: #ffffff;
  --panel-2: #eeede7;
  --ink: #0e1116;
  --ink-dim: #59606c;
  --line: rgba(14, 17, 22, 0.10);
  --line-strong: rgba(14, 17, 22, 0.18);
  --blue: #ED0C32;
  --blue-deep: #87071C;
  --blue-soft: rgba(224, 30, 30, 0.07);
  --navy: #0b1533;
  --navy-2: #0f1d42;
  --on-navy: #eaeefb;
  --on-navy-dim: #93a0c8;
  --azure: #6e8bff;
  --amber: #f5a524;
  --display: "Bricolage Grotesque", Georgia, serif;
  --serif: "Instrument Serif", Georgia, serif;
  --body: "Instrument Sans", -apple-system, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --radius: 16px;
  --container: 1180px;

  /* type scale — benchmarked to GetX: huge headings, small body, 5:1 contrast */
  --fs-display-xl: clamp(44px, 7.4vw, 96px);   /* hero  (GetX 96) */
  --fs-display-l:  clamp(34px, 5vw, 62px);     /* section titles (GetX 62.4) */
  --fs-display-m:  clamp(24px, 2.6vw, 34px);   /* sub-section */
  --fs-display-s:  22px;                        /* card titles */
  --fs-display-xs: 16px;                        /* small headings */
  --fs-stat:       clamp(38px, 4.4vw, 56px);   /* big numbers (GetX 55.7 @680) */
  --fs-body-l:     17px;
  --fs-body:       15px;                        /* base — small, for contrast */
  --fs-body-s:     13.5px;
  --fs-mono:       13px;
  --fs-mono-s:     10.5px;                      /* eyebrows (GetX 9.6–11.5) */
  --fw-display:    560;                         /* GetX display weight */
  --fw-num:        680;                         /* GetX number weight */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container--narrow { max-width: 820px; }
.section { padding: 110px 0; position: relative; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: var(--fw-display); letter-spacing: -0.03em; color: var(--ink); }

.hero__title em, .audit__title em, .section__title em,
.gallery__title em, .pod__title em, .newsletter__copy h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--blue);
}
/* GetX does this: emphasis half is BLUE at the SAME size, never grey */
.section__title em { color: var(--blue); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-mono-s);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}

.section__title {
  font-size: var(--fs-display-l);
  line-height: 1.02; letter-spacing: -0.035em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.section__sub { color: var(--ink-dim); max-width: 660px; margin-bottom: 48px; }

/* ---------- placeholder flags ---------- */
[data-todo] { position: relative; }
[data-todo]::before {
  content: "⚑ " attr(data-todo);
  position: absolute;
  top: -11px; left: 14px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a4d00;
  background: #ffe9bf;
  border: 1px solid rgba(245, 165, 36, 0.6);
  border-radius: 5px;
  padding: 2px 7px;
  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
span[data-todo]::before, a[data-todo]::before { display: none; }
span[data-todo] { color: var(--amber); font-style: italic; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary {
  background-image: linear-gradient(90deg, #ed0c32 45.62%, #87071c 110.66%);
  color: #fff;
}
.btn--primary:hover { transform: translateY(-2px); background-image: linear-gradient(90deg, #ed0c32 45.62%, #87071c 110.66%); }
.btn--ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--sm { padding: 10px 20px; font-size: var(--fs-mono); }
.btn--lg { padding: 17px 34px; font-size: var(--fs-body); }
.btn:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled {
  background: rgba(247,247,243,.9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px -12px rgba(14,17,22,.4);
}
.nav__inner { display: flex; align-items: center; gap: 36px; height: 74px; }
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.nav__logo-mark {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  color: #fff; background: var(--blue);
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: -.05em; flex-shrink: 0;
}
.nav__logo-mark em { font-style: italic; font-family: var(--serif); font-weight: 400; }
.nav__logo-text { font-size: var(--fs-display-xs); letter-spacing: -.01em; white-space: nowrap; }
.nav__logo-text strong { font-weight: 600; }
.nav__links { display: flex; gap: 26px; }
.nav__links a { color: var(--ink-dim); text-decoration: none; font-size: var(--fs-body); transition: color .15s; }
.nav__links a:hover { color: var(--ink); }
.nav__burger { display: none; }
.nav__mobile { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 190px 0 90px; overflow: hidden; }
.hero__glow {
  position: absolute; top: -240px; right: -160px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(30,58,224,.10) 0%, transparent 62%);
  pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 8%, transparent 70%);
  pointer-events: none; opacity: .7;
}
.hero .container { position: relative; }
.hero__copy { max-width: 780px; }
.hero__title {
  font-size: var(--fs-display-xl);
  line-height: .99; letter-spacing: -.038em;
  max-width: 15ch; margin-bottom: 28px;
}
.hero__title-strike { color: var(--ink-dim); }
.hero__sub { font-size: var(--fs-body-l); color: var(--ink-dim); max-width: 640px; margin-bottom: 34px; }
.hero__sub strong { color: var(--ink); font-weight: 600; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__microcopy { font-family: var(--mono); font-size: var(--fs-mono-s); color: var(--ink-dim); margin-top: 16px; }
.hero__stats {
  margin-top: 76px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.stat { padding: 26px 18px 0 18px; border-right: 1px solid var(--line); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; }
.stat__num {
  display: block; font-family: var(--mono);
  font-size: clamp(26px, 3vw, 40px); font-weight: 600;
  color: var(--blue); letter-spacing: -.03em; margin-bottom: 6px;
}
.stat__label { font-size: var(--fs-body-s); color: var(--ink-dim); line-height: 1.45; }
.hero__stats-caption { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-dim); margin-top: 22px; }

/* ---------- trust bar ---------- */
.trustbar { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.trustbar__kicker {
  text-align: center; font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 24px;
}
.trustbar__badges { list-style: none; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-mono-s); font-weight: 500;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 18px;
}
.badge svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }

/* ---------- hero rating badge ---------- */
.hero__rating {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px; padding: 8px 16px 8px 12px;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 999px; box-shadow: 0 4px 18px -10px rgba(14,17,22,.3);
}
.hero__rating .stars { display: inline-flex; gap: 2px; color: var(--amber); }
.hero__rating .stars svg { width: 15px; height: 15px; }
.hero__rating strong { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); }
.hero__rating-src { font-size: var(--fs-mono); color: var(--ink-dim); }

/* ---------- problem: report comparison ---------- */
.problem__head { max-width: 780px; margin-bottom: 54px; }
.problem__lede { font-size: 19px; color: var(--ink-dim); }
.problem__lede strong { color: var(--ink); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.report { position: relative; }
.report__label {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 14px;
}
.report__dot { width: 8px; height: 8px; border-radius: 50%; }
.report__dot--bad { background: var(--amber); }
.report__dot--good { background: var(--blue); }

.report__win {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px -34px rgba(14,17,22,.4);
}
.report--bad .report__win { background: var(--panel); }
.report--good .report__win { background: var(--navy); border-color: var(--navy); }

.report__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.report--good .report__bar { background: rgba(255,255,255,.05); border-bottom-color: rgba(255,255,255,.1); }
.report__bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(14,17,22,.18); }
.report--good .report__bar span { background: rgba(255,255,255,.2); }
.report__bar em {
  font-family: var(--mono); font-style: normal; font-size: var(--fs-mono-s);
  color: var(--ink-dim); margin-left: 8px;
}
.report--good .report__bar em { color: var(--on-navy-dim); }

.report__body { padding: 8px 20px 20px; }
.metric {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
}
.report--good .metric { border-bottom-color: rgba(255,255,255,.08); }
.metric__k { color: var(--ink-dim); }
.report--good .metric__k { color: var(--on-navy-dim); }
.metric__v { font-family: var(--mono); font-size: var(--fs-body); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.metric__v .up { font-style: normal; font-size: var(--fs-mono-s); color: #1a9c5b; }
.metric__v .live {
  font-style: normal; font-size: var(--fs-mono-s); letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--azure); border-radius: 4px; padding: 2px 6px;
}
.metric--vanity .metric__k, .metric--vanity .metric__v { opacity: .55; }
.metric--missing .metric__k { color: var(--ink); }
.metric--missing .metric__v {
  color: var(--amber); font-size: var(--fs-mono-s); letter-spacing: .06em; text-transform: uppercase;
}
.metric--missing { background: rgba(245,165,36,.07); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.report--good .metric__v { color: var(--on-navy); }

.report__verdict {
  margin-top: 18px; padding: 14px 16px; border-radius: 10px;
  font-family: var(--serif); font-style: italic; font-size: var(--fs-body-l); text-align: center;
}
.report__verdict--bad { background: rgba(245,165,36,.12); color: #7a4d00; }
.report__verdict--good { background: rgba(110,139,255,.14); color: var(--azure); }

.problem__leaks { margin-top: 70px; }
.problem__leaks h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 26px; }
.problem__leaks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.leak {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 12px; padding: 24px 22px;
}
.leak__pct {
  display: block; font-family: var(--mono); font-size: var(--fs-display-m); font-weight: var(--fw-num);
  color: var(--amber); margin-bottom: 8px; letter-spacing: -.02em;
}
.leak p { font-size: var(--fs-body); color: var(--ink-dim); line-height: 1.55; }

.problem__answer { margin-top: 54px; }
.problem__answer {
  background: var(--blue-soft);
  border: 1px solid rgba(30,58,224,.22);
  border-radius: var(--radius);
  padding: 34px 38px;
}
.problem__answer > p { font-size: 19px; margin-bottom: 24px; }
.problem__answer strong { color: var(--blue); }
.problem__answer-note { font-family: var(--mono); font-size: var(--fs-mono-s); color: var(--ink-dim); margin-top: 14px; }

/* ---------- objections ---------- */
.objections { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.objections__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.objection {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 30px 30px;
  display: flex; flex-direction: column;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.objection:hover {
  transform: translateY(-4px); border-color: rgba(30,58,224,.35);
  box-shadow: 0 22px 48px -26px rgba(14,17,22,.3);
}
.objection__num {
  position: absolute; top: 18px; right: 24px;
  font-family: var(--mono); font-size: 42px; font-weight: 600;
  color: var(--ink); opacity: .07; letter-spacing: -.04em;
}
.objection__ring {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-soft); border: 1px solid rgba(30,58,224,.2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.objection__ring svg { width: 24px; height: 24px; color: var(--blue); }
.objection h3 { font-size: var(--fs-display-s); margin-bottom: 10px; letter-spacing: -.015em; }
.objection p { font-size: var(--fs-body-s); color: var(--ink-dim); line-height: 1.6; flex: 1; }
.objection__stamp {
  align-self: flex-start; margin-top: 20px;
  font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px dashed var(--line-strong);
  border-radius: 6px; padding: 5px 10px;
}
.objection__stamp--accent { color: var(--navy); background: var(--amber); border-color: transparent; border-style: solid; }
.objection--promise {
  grid-column: span 2;
  background: linear-gradient(150deg, rgba(30,58,224,.07), var(--paper) 62%);
  border-color: rgba(30,58,224,.28);
}
.objection--promise h3 { font-size: var(--fs-display-m); }

/* ---------- services ---------- */
.services__core { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: 0 1px 3px rgba(14,17,22,.03);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-4px); border-color: rgba(30,58,224,.35); box-shadow: 0 18px 40px -22px rgba(14,17,22,.25); }
.service-card--featured { background: linear-gradient(165deg, rgba(30,58,224,.06), var(--panel) 60%); }
.service-card__index {
  font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.service-card h3 { font-size: var(--fs-display-s); margin: 14px 0 12px; }
.service-card__outcome { color: var(--ink-dim); font-size: var(--fs-body-s); margin-bottom: 20px; flex: 1; }
.service-card__outcome em { font-style: italic; color: var(--ink); }
.service-card__best {
  font-size: var(--fs-body-s); color: var(--ink-dim);
  border-top: 1px solid var(--line); padding-top: 16px;
}
.service-card__best span { font-family: var(--mono); font-size: var(--fs-mono-s); text-transform: uppercase; letter-spacing: .1em; color: var(--blue); display: block; margin-bottom: 4px; }

.services__divider { display: flex; align-items: center; gap: 18px; margin: 52px 0 26px; }
.services__divider::before, .services__divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.services__divider span { font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }

.services__support { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.support-card {
  background: transparent; border: 1px dashed var(--line-strong);
  border-radius: 12px; padding: 22px 20px; transition: border-color .2s, background .2s;
}
.support-card:hover { border-color: var(--blue); background: var(--blue-soft); }
.support-card h4 { font-size: var(--fs-display-xs); margin-bottom: 7px; }
.support-card p { font-size: var(--fs-body-s); color: var(--ink-dim); line-height: 1.5; }

.services__cta { margin-top: 40px; font-size: var(--fs-body); color: var(--ink-dim); }
.services__cta a { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: #ed0c32; }
.services__cta a:hover { border-bottom-color: var(--blue); }

/* ---------- method / LeadEngine ---------- */
.method { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method__steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.method-step { border-top: 2px solid var(--line-strong); padding-top: 24px; position: relative; }
.method-step::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 40px; height: 2px; background: var(--blue);
}
.method-step__num { font-family: var(--mono); font-size: var(--fs-mono); color: var(--blue); letter-spacing: .1em; }
.method-step h3 { font-size: var(--fs-display-s); margin: 8px 0 10px; }
.method-step p { font-size: var(--fs-body-s); color: var(--ink-dim); margin-bottom: 14px; }
.method-step__note {
  display: block; font-family: var(--mono); font-size: var(--fs-mono-s); line-height: 1.5;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
}
.method__footer {
  margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.method__footer p { color: var(--ink-dim); }
.method__footer strong { color: var(--ink); }

/* ---------- engineering (dark navy band) ---------- */
.engineering { background: var(--navy); }
.engineering .eyebrow { color: var(--azure); }
.engineering .section__title { color: var(--on-navy); }
.engineering .section__title em { color: var(--azure); }
.engineering__layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.engineering__lede { color: var(--on-navy-dim); font-size: var(--fs-body-l); margin-bottom: 32px; }
.engineering__lede strong { color: var(--on-navy); }
.engineering__points { list-style: none; }
.engineering__points li {
  padding: 18px 0 18px 32px; border-top: 1px solid var(--line);
  position: relative; color: var(--ink-dim); font-size: var(--fs-body-s);
}
.engineering__points li strong { color: var(--ink); display: block; margin-bottom: 3px; font-family: var(--display); font-size: var(--fs-display-xs); }
.engineering__points li em { font-style: italic; color: var(--blue); }
.engineering__points li::before {
  content: "◆"; position: absolute; left: 2px; top: 22px;
  color: var(--blue); font-size: 9px;
}

.mockwin { background: var(--navy-2); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; }
.mockwin__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.mockwin__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mockwin__bar em {
  font-family: var(--mono); font-style: normal; font-size: var(--fs-mono-s);
  color: var(--on-navy-dim); margin-left: 10px;
}
.mockwin__body { padding: 20px; }
.mockrow { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.mockrow__k { font-size: var(--fs-body-s); color: var(--on-navy-dim); }
.mockrow__v { font-family: var(--mono); font-size: var(--fs-body); color: var(--azure); }
.mockchart { display: flex; align-items: flex-end; gap: 7px; height: 96px; margin: 22px 0 14px; }
.mockchart span { flex: 1; background: linear-gradient(180deg, var(--azure), rgba(110,139,255,.25)); border-radius: 3px 3px 0 0; }
.mockwin__caption { font-family: var(--mono); font-size: var(--fs-mono-s); color: var(--on-navy-dim); line-height: 1.5; }

.engineering__record {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 44px; padding: 22px 26px;
  background: var(--blue-soft);
  border: 1px solid #ed0c32;
  border-radius: var(--radius);
}
.engineering__record svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; margin-top: 3px; }
.engineering__record p { color: var(--ink-dim); font-size: var(--fs-body-s); }
.engineering__record strong { color: var(--ink); }
.engineering__record span[data-demo] { color: var(--blue); font-style: normal; font-weight: 600; }

/* ---------- proof ---------- */
.proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.proof-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px;
}
.proof-card--accent { background: var(--blue-soft); border-color: rgba(30,58,224,.28); }
.proof-card__num {
  display: block; font-family: var(--mono); font-size: 32px; font-weight: var(--fw-num);
  color: var(--blue); letter-spacing: -.03em; margin-bottom: 12px;
}
.proof-card p { font-size: var(--fs-body-s); color: var(--ink-dim); line-height: 1.55; }
.proof-card a { color: var(--blue); text-decoration: none; font-weight: 600; }
.proof-card a:hover { text-decoration: underline; }

/* creative gallery */
.gallery { margin-top: 84px; }
.gallery__title { font-size: var(--fs-display-m); line-height: 1.15; margin-bottom: 12px; }
.gallery__sub { color: var(--ink-dim); max-width: 620px; margin-bottom: 34px; }
.gallery__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.gallery__item {
  margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px -22px rgba(14,17,22,.5);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.gallery__item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 30px 60px -24px rgba(14,17,22,.55); }
.gallery__item:nth-child(even) { transform: translateY(18px); }
.gallery__item:nth-child(even):hover { transform: translateY(10px) scale(1.02); }

/* ---------- pricing ---------- */
.pricing { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 30px;
  display: flex; flex-direction: column;
}
.plan--featured {
  background: var(--navy); border-color: var(--navy);
  padding-top: 44px; position: relative;
  box-shadow: 0 24px 60px -30px rgba(11,21,51,.6);
}
.plan__flag {
  position: absolute; top: 18px; right: 24px;
  font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); background: var(--amber);
  border-radius: 999px; padding: 4px 11px;
}
.plan__name { font-size: var(--fs-display-s); margin-bottom: 14px; }
.plan--featured .plan__name { color: var(--on-navy); }
.plan__fee { margin-bottom: 10px; }
.plan__amount {
  font-family: var(--mono); font-size: var(--fs-stat); font-weight: var(--fw-num);
  color: var(--blue); letter-spacing: -.04em; display: block;
}
.plan--featured .plan__amount { color: var(--azure); }
.plan__per { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-dim); }
.plan--featured .plan__per { color: var(--on-navy-dim); }
.plan__budget { font-size: var(--fs-body-s); color: var(--ink-dim); padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.plan__budget strong { color: var(--ink); }
.plan--featured .plan__budget { color: var(--on-navy-dim); border-color: rgba(255,255,255,.12); }
.plan--featured .plan__budget strong { color: var(--on-navy); }
.plan__features { list-style: none; margin-bottom: 28px; flex: 1; }
.plan__features li { font-size: var(--fs-body-s); color: var(--ink-dim); padding: 8px 0 8px 24px; position: relative; }
.plan__features li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  font-family: var(--mono); font-size: var(--fs-mono); color: var(--blue);
}
.plan__features strong { color: var(--ink); }
.plan--featured .plan__features li { color: var(--on-navy-dim); }
.plan--featured .plan__features li::before { color: var(--azure); }
.plan--featured .plan__features strong { color: var(--on-navy); }
.plan--featured .btn--primary { background: var(--azure); color: var(--navy); }
.plan--featured .btn--primary:hover { background: #8ba3ff; }

.pricing__promise {
  margin-top: 34px; padding: 26px 30px;
  background: var(--blue-soft); border: 1px solid rgba(30,58,224,.22);
  border-radius: var(--radius);
}
.pricing__promise p { color: var(--ink-dim); font-size: var(--fs-body); }
.pricing__promise strong { color: var(--blue); }
.pricing__inr { font-family: var(--mono); font-size: var(--fs-mono-s); margin-top: 10px; }

/* ---------- founder + pod ---------- */
.founder__layout { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.founder__photo { margin: 0; position: relative; }
.founder__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px -34px rgba(14,17,22,.6);
  filter: saturate(1.02) contrast(1.02);
}
.founder__photo::after {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(180deg, transparent 58%, rgba(11,21,51,.30));
  pointer-events: none;
}
.founder__fig {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.founder__fig span:first-child { color: var(--blue); }
.founder__quote { border-left: 2px solid var(--blue); padding-left: 32px; }
.founder__quote p {
  font-family: var(--body); font-size: var(--fs-body-l);
  line-height: 1.6; color: var(--ink); margin-bottom: 14px;
}
.founder__quote footer { font-size: var(--fs-body); color: var(--ink-dim); margin-top: 22px; }
.founder__quote footer strong { color: var(--ink); }
.founder__timezone {
  margin-top: 32px; padding: 18px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  font-size: var(--fs-body); color: var(--ink-dim);
}

.pod { margin-top: 76px; }
.pod__title { font-size: var(--fs-display-m); margin-bottom: 12px; }
.pod__body { color: var(--ink-dim); max-width: 640px; margin-bottom: 34px; }
.pod__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pod__member { text-align: center; }
.pod__avatar {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 14px;
  border: 1px solid var(--line); margin-bottom: 12px;
  transition: transform .22s ease;
}
.pod__member:hover .pod__avatar { transform: translateY(-4px); }
.pod__member figcaption { font-size: var(--fs-body-s); color: var(--ink-dim); line-height: 1.5; }
.pod__member figcaption strong { display: block; color: var(--ink); font-family: var(--display); font-size: var(--fs-body); }

/* ---------- testimonials ---------- */
.testimonials { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 30px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.testimonial p { font-family: var(--serif); font-size: var(--fs-display-s); line-height: 1.42; color: var(--ink); }
.testimonial footer { font-size: var(--fs-body-s); color: var(--ink-dim); }
.testimonial footer strong { display: block; color: var(--ink); }
.testimonials__note { margin-top: 26px; font-family: var(--mono); font-size: var(--fs-mono-s); color: var(--ink-dim); }

/* ---------- FAQ ---------- */
.faq__list { margin-top: 40px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  font-family: var(--display); font-size: var(--fs-display-s); font-weight: 500;
  padding: 24px 44px 24px 0; cursor: pointer; list-style: none;
  position: relative; color: var(--ink); transition: color .15s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-family: var(--mono);
  font-size: var(--fs-display-m); color: var(--blue); transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item summary:hover { color: var(--blue); }
.faq__item p { padding: 0 0 26px; color: var(--ink-dim); max-width: 720px; }

/* ---------- newsletter ---------- */
.newsletter { padding: 70px 0; background: var(--paper); border-top: 1px solid var(--line); }
.newsletter__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 20px; padding: 44px 46px;
}
.newsletter__copy h3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; margin-bottom: 10px; }
.newsletter__copy p { font-size: var(--fs-body); color: var(--ink-dim); }
.newsletter__form { display: flex; flex-direction: column; gap: 12px; }
.newsletter__form input {
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 14px 18px;
  font-family: var(--body); font-size: var(--fs-body); color: var(--ink);
}
.newsletter__form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.newsletter__form input.is-invalid { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,165,36,.18); }

/* ---------- final CTA (royal blue band) ---------- */
.audit { position: relative; padding: 110px 0; overflow: hidden; background: var(--blue); }
.audit__glow {
  position: absolute; bottom: -320px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 620px;
  background: radial-gradient(ellipse, rgba(255,255,255,.16) 0%, transparent 62%);
  pointer-events: none;
}
.audit .container { position: relative; }
.audit__layout { display: grid; grid-template-columns: 1fr .95fr; gap: 60px; align-items: start; }
.audit__title { font-size: var(--fs-display-l); line-height: 1.06; margin-bottom: 18px; color: #fff; }
.audit__title em { color: #fff; }
.audit__sub { color: rgba(255,255,255,.86); margin-bottom: 30px; }
.audit__promises { list-style: none; margin-bottom: 34px; }
.audit__promises li {
  color: rgba(255,255,255,.9); font-size: var(--fs-body);
  padding: 9px 0 9px 28px; position: relative;
  border-top: 1px solid rgba(255,255,255,.16);
}
.audit__promises li::before {
  content: "✓"; position: absolute; left: 2px; top: 9px;
  font-family: var(--mono); color: #fff;
}
.audit__alt { display: flex; gap: 10px; flex-wrap: wrap; }
.audit__alt-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-mono); color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 9px 16px;
  transition: background .18s;
}
.audit__alt-item:hover { background: rgba(255,255,255,.14); }
.audit__alt-item svg { width: 14px; height: 14px; }

.audit__form {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px; padding: 32px 30px;
  display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(6px);
}
.audit__field { display: flex; flex-direction: column; gap: 6px; }
.audit__field label { font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.audit__field label span { text-transform: none; letter-spacing: 0; opacity: .7; }
.audit__form input, .audit__form select {
  width: 100%; background: #fff; border: 1px solid transparent;
  border-radius: 10px; padding: 13px 16px;
  color: var(--ink); font-family: var(--body); font-size: var(--fs-body);
}
.audit__form select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.audit__form input::placeholder { color: #8b93a3; }
.audit__form input:focus, .audit__form select:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.audit__form input.is-invalid, .audit__form select.is-invalid { box-shadow: 0 0 0 3px var(--amber); }
.audit__form .btn--primary { background: var(--ink); color: #fff; margin-top: 6px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); }
.audit__form .btn--primary:hover { background: #000; }
.audit__note { font-family: var(--mono); font-size: var(--fs-mono-s); color: rgba(255,255,255,.8); line-height: 1.5; }
.audit__success, .newsletter__success {
  font-family: var(--mono); font-size: var(--fs-body); color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.42);
  border-radius: 12px; padding: 16px 20px;
}
.newsletter__success { color: var(--blue); background: var(--blue-soft); border-color: rgba(30,58,224,.3); }

/* ---------- mission ---------- */
.mission {
  position: relative; overflow: hidden;
  background: var(--navy); padding: 120px 0;
  text-align: center;
}
.mission__glow {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 800px; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 50% at 30% 40%, rgba(30,58,224,.5), transparent 60%),
    radial-gradient(ellipse 45% 45% at 70% 55%, rgba(110,139,255,.35), transparent 62%);
  filter: blur(30px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translateX(-52%) scale(1); }
  to   { transform: translateX(-48%) scale(1.12); }
}
.mission .container { position: relative; }
.mission .eyebrow { color: var(--azure); }
.mission__statement {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 4.2vw, 52px); line-height: 1.14;
  letter-spacing: -.025em; color: var(--on-navy);
  max-width: 16ch; margin: 0 auto; text-wrap: balance;
}
.mission__statement em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--azure); letter-spacing: 0;
}
.mission__meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-top: 40px;
  font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-dim);
}

/* ---------- footer ---------- */
.footer { background: var(--navy); }
.footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding: 70px 28px 50px; }
.footer .nav__logo { color: var(--on-navy); margin-right: 0; }
.footer__brand p { font-size: var(--fs-body); color: var(--on-navy-dim); margin-top: 16px; line-height: 1.6; }
.footer__brand strong { color: var(--on-navy); }
.footer__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.footer__badges li {
  font-family: var(--mono); font-size: var(--fs-mono-s); color: var(--on-navy-dim);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 4px 10px;
}
.footer__col h4 {
  font-family: var(--mono); font-size: var(--fs-mono-s); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-navy-dim); margin-bottom: 18px;
}
.footer__col a, .footer__col p {
  display: block; color: var(--on-navy-dim); text-decoration: none;
  font-size: var(--fs-body); margin-bottom: 10px; line-height: 1.6;
}
.footer__col a:hover { color: var(--azure); }
.footer__legal {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 26px; padding-bottom: 34px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono); font-size: var(--fs-mono-s); color: var(--on-navy-dim);
}
.footer__legal a { color: var(--on-navy-dim); text-decoration: none; }
.footer__legal a:hover { color: var(--azure); }
.footer__tag { color: var(--azure); }

/* ---------- reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ---------- conversion pass (Hormozi) ---------- */
.stat__num--todo { color: var(--amber); -webkit-text-fill-color: var(--amber); background: none; }

.hero__alt-link {
  align-self: center;
  font-family: var(--mono); font-size: var(--fs-body-s);
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.hero__alt-link:hover { color: var(--blue); border-bottom-color: var(--blue); }

.hero__microcopy strong { color: var(--ink); font-weight: 600; }
.hero__urgency {
  display: block; margin-top: 8px;
  color: var(--blue); font-weight: 500;
}

/* restored cost-of-inaction line */
.problem__cost {
  margin-top: 34px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4;
  color: var(--ink); max-width: 30ch;
}
.leak p strong { color: var(--amber); font-weight: 600; }

/* effort-reduction block */
.method__needs {
  margin-top: 44px; padding: 26px 30px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: 12px;
}
.method__needs h3 { font-size: var(--fs-display-xs); margin-bottom: 6px; }
.method__needs p { color: var(--ink-dim); font-size: var(--fs-body-s); }
.method__needs strong { color: var(--blue); }

.audit__note strong { color: #fff; font-weight: 600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .founder__layout { grid-template-columns: 280px 1fr; gap: 40px; }
  .method__steps { grid-template-columns: repeat(3, 1fr); gap: 32px 18px; }
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .engineering__layout { grid-template-columns: 1fr; gap: 44px; }
  .audit__layout { grid-template-columns: 1fr; gap: 44px; }
  .services__support { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .nav__links, .nav__inner > .btn--sm { display: none; }
  .nav__burger {
    display: flex; flex-direction: column; gap: 6px;
    background: none; border: none; padding: 8px; cursor: pointer;
  }
  .nav__burger span { width: 24px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__mobile {
    display: none; flex-direction: column; gap: 4px;
    padding: 10px 28px 26px;
    background: rgba(247,247,243,.98); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav__mobile.is-open { display: flex; }
  .nav__mobile a { color: var(--ink); text-decoration: none; font-size: var(--fs-body-l); padding: 12px 0; }
  .nav__mobile .btn { text-align: center; margin-top: 10px; }

  .services__core { grid-template-columns: 1fr; }
  .objections__grid { grid-template-columns: 1fr 1fr; }
  .objection--promise { grid-column: span 2; }
  .compare { grid-template-columns: 1fr; gap: 34px; }
  .problem__leaks-grid { grid-template-columns: 1fr; }
  .pricing__grid { grid-template-columns: 1fr; }
  .plan--featured { order: -1; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .founder__layout { grid-template-columns: 1fr; gap: 32px; }
  .founder__photo { max-width: 260px; }
  .newsletter__inner { grid-template-columns: 1fr; gap: 26px; padding: 34px 28px; }
  .method__footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .section { padding: 76px 0; }
  .hero { padding: 140px 0 70px; }
  .hero__stats { grid-template-columns: 1fr 1fr; border-top: none; }
  .stat:last-child { grid-column: 1 / -1; border-right: none; }
  .stat { border-top: 1px solid var(--line); padding-left: 0; padding-right: 16px; }
  .stat:nth-child(odd) { border-right: 1px solid var(--line); }
  .stat:nth-child(even) { border-right: none; padding-left: 20px; }

  .objections__grid { grid-template-columns: 1fr; }
  .objection--promise { grid-column: span 1; }
  .method__steps { grid-template-columns: 1fr; }
  .proof__grid { grid-template-columns: 1fr; }
  .services__support { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:nth-child(even) { transform: none; }
  .gallery__item:nth-child(even):hover { transform: translateY(-8px) scale(1.02); }
  .pod__grid { grid-template-columns: repeat(2, 1fr); }
  .founder__photo { max-width: 280px; }
  .hero__rating { flex-wrap: wrap; }
  .metric { flex-wrap: wrap; gap: 4px; }
  .footer__inner { grid-template-columns: 1fr; gap: 34px; }
  .problem__answer { padding: 26px 22px; }
  .audit__form { padding: 24px 20px; }
  .newsletter__inner { padding: 28px 22px; }
  [data-todo]::before { white-space: normal; max-width: calc(100% - 20px); }
}

/* ============================================================
   V2 REVAMP — new components
   ============================================================ */

/* ---------- nav chat ---------- */
.nav__chat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 16px; transition: border-color .18s, color .18s, background .18s;
}
.nav__chat svg { width: 15px; height: 15px; color: #25d366; }
.nav__chat:hover { border-color: #25d366; background: rgba(37,211,102,.06); }
.btn--chat { display: inline-flex; align-items: center; gap: 9px; }
.btn--chat svg { width: 17px; height: 17px; color: #25d366; }

/* ---------- hero trust line (Adymize pattern) ---------- */
.hero__trustline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 26px; font-family: var(--mono); font-size: var(--fs-body);
  color: var(--ink-dim);
}
.hero__trustline strong {
  font-weight: 600; color: var(--blue); font-size: var(--fs-body-l); letter-spacing: -.02em;
}
.hero__trustline i { color: var(--line-strong); font-style: normal; }

/* ---------- trust band: logos + certs ---------- */
.trustband { padding: 54px 0; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trustband__kicker {
  text-align: center; font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 28px;
}
.logowall {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; align-items: center;
}
.logowall__slot {
  display: flex; align-items: center; justify-content: center;
  height: 62px; border: 1px dashed var(--line-strong); border-radius: 10px;
  font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .14em;
  color: var(--ink-dim); opacity: .5; background: var(--paper);
}
.trustband__note {
  text-align: center; font-size: var(--fs-mono); color: var(--ink-dim);
  margin-top: 18px; font-style: italic;
}
.certrow { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.certrow__kicker {
  text-align: center; font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px;
}
.certrow__list { list-style: none; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.badge--strong { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.badge--strong svg { color: var(--blue); }
.badge--empty { border-style: dashed; opacity: .55; }

/* ---------- creative strip (folded into services) ---------- */
.creativestrip { margin-top: 64px; }
.creativestrip__label { font-family: var(--display); font-size: var(--fs-display-m); font-weight: 600; margin-bottom: 18px; }
.creativestrip__label em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue); }
.creativestrip__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 10px;
  scrollbar-width: thin;
}
.creativestrip__row img {
  width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 12px 30px -20px rgba(14,17,22,.5);
  transition: transform .25s ease;
}
.creativestrip__row img:hover { transform: translateY(-5px); }

/* ---------- proof: case studies ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case {
  background: var(--navy); color: var(--on-navy);
  border: 1px solid var(--navy); border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 24px 60px -34px rgba(11,21,51,.6);
}
.case__num {
  display: block; font-family: var(--mono); font-size: var(--fs-stat); font-weight: var(--fw-num);
  color: var(--azure); letter-spacing: -.04em; line-height: 1.1; margin-bottom: 10px;
}
.case__what { font-family: var(--display); font-size: var(--fs-display-xs); color: var(--on-navy); margin-bottom: 14px; }
.case__client {
  font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .12em;
  text-transform: uppercase; color: var(--azure);
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 14px;
}
.case__story { font-size: var(--fs-body-s); color: var(--on-navy-dim); line-height: 1.55; }
.proof__honest {
  margin-top: 26px; font-size: var(--fs-body); color: var(--ink-dim);
  padding: 18px 22px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 10px;
}
.proof__honest strong { color: var(--ink); }
.proof__extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }

/* ---------- price anchor ---------- */
.anchor {
  background: linear-gradient(150deg, rgba(245,165,36,.10), var(--panel) 62%);
  border: 1px solid rgba(245,165,36,.35);
  border-radius: var(--radius); padding: 24px 28px; margin-bottom: 28px;
}
.anchor p { font-size: var(--fs-body-l); color: var(--ink-dim); }
.anchor strong { color: var(--ink); }
.anchor__bad { color: #a3620a; }
.anchor__good { color: var(--blue); }

/* ---------- method grid ---------- */
.method__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; margin-top: 52px; align-items: start; }

/* ---------- offer stack ---------- */
.audit__stacklabel {
  font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 10px;
}
.audit__stackfoot { font-size: var(--fs-body); color: rgba(255,255,255,.9); margin-top: 14px; }
.audit__stackfoot strong { color: #fff; }

/* ---------- consent ---------- */
.audit__consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-mono); color: rgba(255,255,255,.85); line-height: 1.5;
  cursor: pointer; margin-top: 4px;
}
.audit__consent input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; cursor: pointer; accent-color: var(--ink); }
.audit__consent a { color: #fff; }
.audit__consent.is-invalid span { color: var(--amber); }

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.7);
  transition: transform .2s ease;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float:hover { transform: scale(1.08); }
.wa-float[data-todo]::before { display: none; }

/* ---------- v2 responsive ---------- */
@media (max-width: 1080px) {
  .logowall { grid-template-columns: repeat(4, 1fr); }
  .cases { grid-template-columns: 1fr 1fr; }
  .proof__extras { grid-template-columns: 1fr 1fr; }
  .method__grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 720px) {
  .hero__trustline { gap: 8px; font-size: var(--fs-mono); }
  .hero__trustline strong { font-size: var(--fs-body); }
  .logowall { grid-template-columns: repeat(3, 1fr); }
  .cases { grid-template-columns: 1fr; }
  .proof__extras { grid-template-columns: 1fr; }
  .creativestrip__row { grid-auto-columns: minmax(128px, 1fr); }
  .anchor { padding: 20px 18px; }
  .anchor p { font-size: var(--fs-body); }
  .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}

/* ---------- simplification pass ---------- */
.section { padding: 88px 0; }
.services__also {
  margin-top: 34px; padding: 18px 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  font-size: var(--fs-body); color: var(--ink-dim);
}
.services__also span {
  display: block; font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px;
}
.proof__samplelink {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600;
  color: var(--blue); text-decoration: none;
  border-bottom: #ed0c32;
}
.proof__samplelink:hover { border-bottom-color: var(--blue); }

/* ============================================================
   DEMO MARKERS — quiet dot instead of a loud banner.
   Hover to read. Toggle body.hide-demo to hide entirely.
   Every dot = content that MUST be replaced before launch.
   ============================================================ */
[data-todo]::before { content: none !important; }   /* retire the old loud flags */

[data-demo] { position: relative; }
[data-demo]::after {
  content: ""; position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--paper);
  pointer-events: none;
}
[data-demo]:hover::before {
  content: "⚑ " attr(data-demo);
  position: absolute; top: -10px; left: 12px; z-index: 6;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: #1a1204; background: var(--amber);
  border-radius: 5px; padding: 3px 8px; max-width: 320px;
  pointer-events: none; box-shadow: 0 4px 14px -4px rgba(0,0,0,.4);
}
span[data-demo]::after, a[data-demo]::after, li[data-demo]::after { display: none; }
body.hide-demo [data-demo]::after, body.hide-demo [data-demo]:hover::before { display: none; }

/* demo-mode pill — unmissable to the team, invisible to the layout */
.demo-pill {
  position: fixed; left: 14px; bottom: 14px; z-index: 95;
  font-family: var(--mono); font-size: var(--fs-mono-s); letter-spacing: .1em;
  text-transform: uppercase; color: #1a1204; background: var(--amber);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; border: none;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.4);
}
body.hide-demo .demo-pill { opacity: .35; }

/* ---------- logo wall: real images now ---------- */
.logowall { grid-template-columns: repeat(4, 1fr); gap: 10px 28px; }
.logowall img {
  width: 100%; height: 40px; object-fit: contain;
  opacity: .42; filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease;
}
.logowall img:hover { opacity: 1; filter: none; }

/* ---------- consistency polish ---------- */
h1, h2, h3, h4 { line-height: 1.15; }
.section__sub { font-size: var(--fs-body); }
.hero__trustline { font-size: var(--fs-body-s); }
.hero__trustline strong { font-size: var(--fs-display-s); font-weight: var(--fw-num); font-family: var(--mono); }
.method__needs h3 { font-family: var(--display); }
.trustband__kicker, .certrow__kicker { font-size: var(--fs-mono-s); }
.trustband__note { font-size: var(--fs-mono-s); font-family: var(--mono); font-style: normal; letter-spacing: .02em; }
.case__client { font-size: var(--fs-mono-s); }
.method-step__note { font-size: var(--fs-mono-s); }
.proof__honest { font-size: var(--fs-body-s); }
.audit__sub, .pod__body, .method__footer p { font-size: var(--fs-body); }
.footer__col a, .footer__col p, .footer__brand p { font-size: var(--fs-body-s); }
.audit__promises li { font-size: var(--fs-body-s); }
.audit__field label, .audit__stacklabel { font-size: var(--fs-mono-s); }
.audit__note, .audit__consent { font-size: var(--fs-mono-s); }
.services__also { font-size: var(--fs-body-s); }

/* "from" prefix stays small so the number keeps its punch */
.plan__from {
  display: block; font-family: var(--body); font-style: normal;
  font-size: var(--fs-body); font-weight: 500; color: var(--ink-dim);
  letter-spacing: 0; margin-bottom: -4px;
}
.plan--featured .plan__from { color: var(--on-navy-dim); }
.plan__amount { line-height: 1; white-space: nowrap; }
/* keep all three plan headers on the same baseline */
.plan__fee { min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; }

/* nav chat: desktop only — mobile already has the WhatsApp float + hero button */
@media (max-width: 920px) {
  .nav__chat { display: none; }
}
.nav__chat { white-space: nowrap; }

/* ---------- creative showcase: fewer, bigger ---------- */
.creativestrip { margin-top: 72px; }
.creativestrip__label { margin-bottom: 8px; }
.creativestrip__sub { color: var(--ink-dim); font-size: var(--fs-body); max-width: 560px; margin-bottom: 36px; }
.creativestrip__row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  grid-auto-flow: row; overflow: visible; padding-bottom: 0;
}
.creative { margin: 0; }
.creative img, video {
  width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 26px 60px -28px rgba(14,17,22,.55);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.creative:hover img { transform: translateY(-10px); box-shadow: 0 44px 80px -30px rgba(14,17,22,.6); }
.creative figcaption {
  margin-top: 12px; font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
}
.creative:nth-child(even) img { transform: translateY(22px); }
.creative:nth-child(even):hover img { transform: translateY(12px); }
.creative:nth-child(even) figcaption { transform: translateY(22px); }

@media (max-width: 1080px) { .creativestrip__row { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 620px) {
  .creativestrip__row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .creative:nth-child(even) img, .creative:nth-child(even) figcaption { transform: none; }
  .creative:nth-child(even):hover img { transform: translateY(-10px); }
}

/* ============================================================
   HERO VIDEO + COLOUR LOGO WALL
   ============================================================ */

/* ---------- hero two-column ---------- */
.hero__layout {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.hero__copy { max-width: 640px; }
.hero .hero__title { max-width: 12ch; }

/* ---------- video ---------- */
.hero__video { margin: 0; position: relative; }
.vid {
  position: relative; border-radius: 20px; overflow: hidden;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 90px -36px rgba(11,21,51,.7), 0 0 0 1px rgba(30,58,224,.1);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.hero__video:hover .vid { transform: translateY(-6px); box-shadow: 0 54px 110px -34px rgba(30,58,224,.5); }
.vid__el {
  display: block; width: 100%; height: auto; aspect-ratio: 8/5;
  object-fit: cover; background: var(--navy);
}
/* hide native chrome until there's a real source */
.vid__el::-webkit-media-controls { display: none !important; }

.vid__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 40px -8px rgba(30,58,224,.9);
  transition: transform .22s ease, background .22s ease;
}
.vid__play svg { width: 32px; height: 32px; margin-left: 3px; }
.vid__play::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.9); opacity: .8; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
.hero__video:hover .vid__play { transform: translate(-50%,-50%) scale(1.08); background: var(--blue-deep); }

.vid__time {
  position: absolute; right: 14px; bottom: 14px;
  font-family: var(--mono); font-size: var(--fs-mono-s); color: #fff;
  background: rgba(7,8,11,.72); backdrop-filter: blur(6px);
  border-radius: 6px; padding: 4px 9px;
}
.vid__live {
  position: absolute; left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--fs-mono-s); color: #fff;
  background: rgba(7,8,11,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 5px 11px;
}
.vid__live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime, #C6F24E);
  box-shadow: 0 0 0 0 rgba(198,242,78,.7); animation: blip 2s ease-out infinite;
}
@keyframes blip {
  0%   { box-shadow: 0 0 0 0 rgba(198,242,78,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(198,242,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,242,78,0); }
}
.vid__cap {
  margin-top: 14px; font-size: var(--fs-body-s); color: var(--ink-dim); line-height: 1.5;
}
.vid__cap strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .vid__play::after, .vid__live i { animation: none; }
}

/* ---------- colour logo wall ---------- */
.logowall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.logowall__cell {
  display: flex; align-items: center; justify-content: center;
  height: 84px; padding: 0 18px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.logowall__cell:hover {
  transform: translateY(-4px); border-color: #ed0c32;
  box-shadow: 0 16px 34px -18px rgba(14,17,22,.3);
}
.logowall__cell img {
  max-width: 100%; height: 80px; width: auto; object-fit: contain;
  opacity: 1; filter: none;                    /* full colour — no greyscale */
}
.trustband { background: var(--paper); }

@media (max-width: 1080px) {
  .hero__layout { grid-template-columns: 1fr; gap: 44px; }
  .hero__copy { max-width: 100%; }
  .hero .hero__title { max-width: 14ch; }
  .hero__video { max-width: 620px; }
}
@media (max-width: 720px) {
  .logowall { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .logowall__cell { height: 70px; }
  .logowall__cell img { height: 28px; }
  .vid__play { width: 60px; height: 60px; }
  .vid__play svg { width: 24px; height: 24px; }
}

/* ---------- hero balance: 96px was sized for a full-width column ---------- */
.hero { padding: 150px 0 80px; }
.hero__layout { grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; }
.hero__copy { max-width: none; }
/* with a video beside it the column is ~half — retune the clamp to match */
.hero .hero__title {
  font-size: clamp(40px, 5.4vw, 74px);
  max-width: 14ch;
  margin-bottom: 22px;
}
.hero__trustline { gap: 10px; row-gap: 6px; margin-bottom: 22px; }
.hero__trustline strong { font-size: 19px; }
.hero__sub { margin-bottom: 26px; max-width: 520px; }
.hero__video { align-self: center; }
.vid__el { aspect-ratio: 4/3; }

@media (max-width: 1080px) {
  .hero .hero__title { font-size: clamp(40px, 7.4vw, 82px); max-width: 13ch; }
}

/* poster is 800×500 (8:5) — frame must match or it crops the metrics */
.vid__el { aspect-ratio: 8/5; object-fit: cover; object-position: center; }

/* ---------- responsive overrides — MUST stay last in the file ----------
   The retuned .hero__layout rule above is unmediated, so it beat the earlier
   max-width:1080px stack. These re-assert it. Keep at the bottom. */
@media (max-width: 1080px) {
  .hero__layout { grid-template-columns: 1fr !important; gap: 40px; }
  .hero__copy { max-width: 100%; }
  .hero__video { max-width: 640px; }
}
@media (max-width: 720px) {
  .hero { padding: 130px 0 64px; }
  .hero .hero__title { font-size: clamp(38px, 10.4vw, 52px); max-width: 100%; }
  .hero__trustline { font-size: 12px; gap: 8px; }
  .hero__trustline strong { font-size: 16px; }
  .hero__video { max-width: 100%; }
  .vid__cap { font-size: var(--fs-mono-s); }
}

/* ============================================================
   SERVICE CARDS — visual-led, platform marks as identifiers
   (NOT endorsement badges — see footer trademark note)
   ============================================================ */
.services__core { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 3px rgba(14,17,22,.03);
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}
.service-card:hover {
  transform: translateY(-6px); border-color: #ed0c32;
  box-shadow: 0 30px 60px -30px rgba(14,17,22,.32);
}
.service-card--featured { background: var(--panel); }

.service-card__viz {
  margin: 0; overflow: hidden; border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.service-card__viz img {
  display: block; width: 100%; height: auto; aspect-ratio: 8/5; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.service-card:hover .service-card__viz img { transform: scale(1.04); }

.service-card__body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.service-card h3 { margin: 12px 0 10px; }
.service-card__outcome { margin-bottom: 20px; flex: 1; }

/* platform chips */
.platforms {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.platforms li {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--fs-mono-s);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}
.platforms li img { width: 14px; height: 14px; display: block; }
.platforms__more {
  color: var(--ink-dim) !important; background: transparent !important;
  border-color: transparent !important; padding-left: 2px !important;
}
.footer__tm {
  display: block; margin-top: 8px; max-width: 46ch;
  font-size: 9.5px; line-height: 1.5; color: var(--on-navy-dim); opacity: .75;
}

@media (max-width: 1080px) { .services__core { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .services__core { grid-template-columns: 1fr; } }

/* ============================================================
   PROOF CARDS — GetX anatomy: logo · tags · number · story ·
   secondary metrics · ROI window · how it was measured
   ============================================================ */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.case {
  background: var(--navy); color: var(--on-navy);
  border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  padding: 24px 24px 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 26px 60px -34px rgba(11,21,51,.7);
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease;
}
.case:hover { transform: translateY(-6px); border-color: rgba(110,139,255,.45); }

/* 1. client identity */
.case__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.case__logo {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 11px;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  padding: 7px; overflow: hidden;
}
.case__logo img { width: 100%; height: auto; object-fit: contain; }
.case__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.case__id strong {
  font-family: var(--display); font-size: var(--fs-display-xs);
  font-weight: 600; color: var(--on-navy); letter-spacing: -.01em;
}
.case__id span {
  font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-dim);
}

/* 2. what we did */
.case__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azure); border: 1px solid rgba(110,139,255,.4);
  border-radius: 999px; padding: 4px 9px;
}
.tag--lead { background: var(--azure); border-color: var(--azure); color: var(--navy); font-weight: 600; }

/* 3. the number */
.case__num {
  font-family: var(--mono); font-size: var(--fs-stat); font-weight: var(--fw-num);
  color: var(--azure); letter-spacing: -.045em; line-height: 1; margin-bottom: 6px;
}
.case__what { font-size: var(--fs-body-s); color: var(--on-navy-dim); margin-bottom: 14px; }
.case__what strong { color: var(--on-navy); font-weight: 600; }

/* 4. story */
.case__story {
  font-size: var(--fs-body-s); color: var(--on-navy-dim); line-height: 1.55;
  padding-bottom: 18px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex: 1;
}

/* 5. secondary metrics */
.case__sec { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.case__sec li { display: flex; flex-direction: column; gap: 2px; }
.case__sec strong {
  font-family: var(--mono); font-size: 20px; font-weight: 650;
  color: var(--on-navy); letter-spacing: -.03em;
}
.case__sec span { font-size: 11.5px; color: var(--on-navy-dim); line-height: 1.35; }

/* 6. ROI window */
.case__roi {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--fs-mono-s);
  letter-spacing: .1em; text-transform: uppercase; color: var(--lime, #C6F24E);
  margin-bottom: 10px;
}
.case__roi svg { width: 13px; height: 13px; }

/* 7. how it was measured — the engineering-grade detail */
.case__method {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-navy-dim); opacity: .6; line-height: 1.5;
}

@media (max-width: 1080px) { .cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .cases { grid-template-columns: 1fr; } }
/* mark-only chip — the brand name sits beside it, so the wordmark is redundant */
.case__logo { width: 44px; height: 44px; padding: 8px; border-radius: 12px; }
.case__logo img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   PRICING — built to convert. Every card closes on the guarantee.
   ============================================================ */
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 26px 24px;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.plan:hover { transform: translateY(-6px); border-color: rgba(30,58,224,.3); box-shadow: 0 30px 60px -30px rgba(14,17,22,.3); }

/* featured: navy, lifted, glowing */
.plan--featured {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(110,139,255,.22), transparent 65%),
    var(--navy);
  border-color: var(--navy); color: var(--on-navy);
  padding-top: 42px; transform: scale(1.03);
  box-shadow: 0 40px 90px -34px rgba(11,21,51,.75), 0 0 0 1px rgba(110,139,255,.2);
  z-index: 2;
}
.plan--featured:hover { transform: scale(1.03) translateY(-6px); box-shadow: 0 54px 110px -34px rgba(30,58,224,.6); }
.plan__flag {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); background: var(--lime, #C6F24E);
  border-radius: 999px; padding: 5px 13px; white-space: nowrap;
  box-shadow: 0 6px 18px -4px rgba(198,242,78,.6);
}

/* 1. plan name = small blue eyebrow */
.plan__name {
  font-family: var(--mono); font-size: var(--fs-mono-s); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.plan--featured .plan__name { color: var(--azure); }

/* 2. price */
.plan__fee { min-height: auto; display: block; margin-bottom: 14px; }
.plan__amount {
  display: block; font-family: var(--mono); font-size: var(--fs-stat); font-weight: var(--fw-num);
  color: var(--ink); letter-spacing: -.045em; line-height: 1; white-space: nowrap;
}
.plan--featured .plan__amount { color: #fff; }
.plan__from {
  display: block; font-family: var(--body); font-style: normal;
  font-size: 13px; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; margin-bottom: -2px;
}
.plan--featured .plan__from { color: var(--on-navy-dim); }
.plan__per { font-family: var(--mono); font-size: var(--fs-mono-s); color: var(--ink-dim); }
.plan--featured .plan__per { color: var(--on-navy-dim); }

/* 3. who it's for */
.plan__who {
  font-size: var(--fs-body-s); color: var(--ink); font-weight: 500;
  line-height: 1.5; margin-bottom: 14px; min-height: 3.1em;
}
.plan--featured .plan__who { color: var(--on-navy); }

/* 4. qualifier — helps people self-select */
.plan__qual { list-style: none; margin-bottom: 18px; }
.plan__qual li {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); opacity: .8; line-height: 1.9;
}
.plan--featured .plan__qual li { color: var(--on-navy-dim); }

/* 5. ROI pace — the upgrade nudge */
.plan__pace {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--fs-mono-s); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue);
  background: var(--blue-soft); border: 1px solid rgba(30,58,224,.16);
  border-radius: 999px; padding: 8px 14px; margin-bottom: 22px; align-self: flex-start;
}
.plan--featured .plan__pace {
  color: var(--lime, #C6F24E); background: rgba(198,242,78,.1); border-color: rgba(198,242,78,.28);
}
.plan__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.plan__bars i { width: 3px; border-radius: 1px; background: currentColor; opacity: .22; }
.plan__bars i:nth-child(1) { height: 5px; }
.plan__bars i:nth-child(2) { height: 8px; }
.plan__bars i:nth-child(3) { height: 11px; }
.plan__bars i.on { opacity: 1; }

/* 6. inherits + features */
.plan__inherits {
  font-size: 12px; color: var(--ink-dim); margin-bottom: 10px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.plan__inherits strong { color: var(--ink); }
.plan--featured .plan__inherits { color: var(--on-navy-dim); border-color: rgba(255,255,255,.12); }
.plan--featured .plan__inherits strong { color: var(--on-navy); }

.plan__features { list-style: none; margin-bottom: 24px; flex: 1; }
.plan__features li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--fs-body-s); color: var(--ink-dim);
  padding: 7px 0; line-height: 1.45;
}
.plan__features li::before { content: none; }
.plan__features li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--blue); }
.plan__features strong { color: var(--ink); font-weight: 600; }
.plan--featured .plan__features li { color: var(--on-navy-dim); }
.plan--featured .plan__features li svg { color: var(--lime, #C6F24E); }
.plan--featured .plan__features strong { color: var(--on-navy); }

.plan__cta { width: 100%; margin-bottom: 14px; }
.plan--featured .plan__cta { background: var(--lime, #C6F24E); color: var(--navy); box-shadow: 0 10px 30px -8px rgba(198,242,78,.5); }
.plan--featured .plan__cta:hover { background: #d4f96b; box-shadow: 0 16px 40px -8px rgba(198,242,78,.7); }

/* 7. the closer — guarantee on EVERY card */
.plan__guarantee {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-align: center; line-height: 1.4;
  color: #fff; background: var(--blue);
  border-radius: 10px; padding: 10px 12px; margin: 0 -4px;
}
.plan__guarantee svg { width: 13px; height: 13px; flex-shrink: 0; }
.plan--featured .plan__guarantee { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }

@media (max-width: 1080px) {
  .pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan--featured { transform: none; order: -1; }
  .plan--featured:hover { transform: translateY(-6px); }
  .plan__who { min-height: 0; }
}


/* ============================================================
   COMPARISON TABLE — single source of truth.
   Do NOT append overrides below this block. Edit it in place.
   Every selector is `.cmp <x>` (0-1-1) so nothing out-specifies
   its siblings — that bug misaligned the header from the body.
   Semantics stay <table>; layout is grid.
   ============================================================ */
.compare-table { overflow-x: auto; padding: 10px 0 4px; margin-bottom: 0; }

.cmp { display: block; width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; }
.cmp thead { display: block; }
.cmp tbody { display: block; }

/* ONE grid definition — thead and tbody share it */
.cmp tr { display: grid; grid-template-columns: 20% 40% 40%; width: 100%; }
.cmp thead tr { align-items: end; }
.cmp tbody tr { align-items: stretch; }

/* ---- header ---- */
.cmp thead th { display: flex; align-items: center; gap: 9px; padding: 0 0 14px 18px; border: none; background: transparent; }
.cmp thead th:first-child { padding-left: 0; }
.cmp__head { font-family: var(--display); font-size: var(--fs-display-xs); font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.cmp__head--them { color: var(--ink-dim); }
.cmp__head--us { color: var(--ink); }
.cmp__avatar { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: -.04em; }
.cmp__avatar--them { background: var(--panel-2); color: var(--ink-dim); border: 1px dashed var(--line-strong); }
.cmp__avatar--us { background: var(--blue); color: #fff; }
.cmp__avatar--us i { font-style: italic; font-family: var(--serif); font-weight: 400; }
.cmp__badge { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(30,58,224,.2); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }

/* ---- row label ---- */
.cmp tbody th { display: flex; align-items: center; text-align: left; border: none; background: transparent; padding: 16px 16px 16px 0; font-family: var(--mono); font-size: var(--fs-mono-s); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

/* ---- cells ---- */
.cmp td { display: flex; align-items: flex-start; gap: 10px; border: none; padding: 16px 18px; font-size: var(--fs-body-s); }
.cmp td > span { flex: 1; min-width: 0; }
.cmp__ico { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* THEM — penalised */
.cmp__them { color: var(--ink-dim); border-top: 1px solid var(--line); }
.cmp__them .cmp__ico { color: #c0392b; opacity: .7; }
.cmp__them > span { opacity: .75; line-height: 1.45; }
.cmp tbody tr:last-child .cmp__them { border-bottom: 1px solid var(--line); }

/* US — the winner column, one continuous raised card */
.cmp__us { background: var(--panel); border-left: 1px solid rgba(30,58,224,.18); border-right: 1px solid rgba(30,58,224,.18); position: relative; }
.cmp__us .cmp__ico { color: var(--blue); }
.cmp__us strong { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-body); line-height: 1.35; }
.cmp__us em { display: block; font-style: normal; margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-dim); line-height: 1.45; }
.cmp tbody tr:first-child .cmp__us { border-top: 2px solid var(--blue); border-radius: 14px 14px 0 0; }
.cmp tbody tr:last-child .cmp__us { border-bottom: 1px solid rgba(30,58,224,.18); border-radius: 0 0 14px 14px; box-shadow: 0 30px 60px -34px rgba(30,58,224,.4); }
.cmp tbody tr + tr .cmp__us::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: var(--line); }

@media (max-width: 900px) {
  .cmp { min-width: 640px; }
  .cmp tr { grid-template-columns: 24% 38% 38%; }
  .cmp__us em { display: none; }
}

/* ============================================================
   GOOGLE REVIEWS
   ============================================================ */
.reviews { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* summary bar */
.reviews__summary {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 20px 26px; margin-bottom: 34px;
}
.reviews__glogo { width: 30px; height: 30px; flex-shrink: 0; }
.reviews__score { display: flex; align-items: center; gap: 10px; }
.reviews__score strong {
  font-family: var(--mono); font-size: var(--fs-stat); font-weight: var(--fw-num);
  color: var(--ink); letter-spacing: -.04em; line-height: 1;
}
.reviews__count { font-size: var(--fs-body); color: var(--ink-dim); flex: 1; min-width: 180px; }
.reviews__count strong { color: var(--ink); font-weight: 600; }
.reviews__link {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600;
  color: var(--blue); text-decoration: none; white-space: nowrap;
  border-bottom: #ed0c32;
}
.reviews__link:hover { border-bottom-color: var(--blue); }

/* shared star styling */
.stars { display: inline-flex; gap: 2px; color: #FBBC05; }
.stars svg { width: 16px; height: 16px; }
.reviews__score .stars svg { width: 18px; height: 18px; }

/* masonry-ish grid via columns — natural varied heights, very "reviews wall" */
.reviews__grid { columns: 3; column-gap: 20px; }
.review {
  break-inside: avoid; margin: 0 0 20px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px 24px 20px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  min-height: 255px;
}
.review:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 40px -24px rgba(14,17,22,.28); }
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review__avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.review__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.review__who strong { font-family: var(--display); font-size: var(--fs-display-xs); font-weight: 600; color: var(--ink); }
.review__who span { font-size: 12px; color: var(--ink-dim); }
.review__g { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
.review__stars { margin-bottom: 12px; }
.review__text { font-size: var(--fs-body-s); color: var(--ink); line-height: 1.6; margin-bottom: 14px; }
.review__when { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }

@media (max-width: 1080px) { .reviews__grid { columns: 2; } }
@media (max-width: 700px)  {
  .reviews__grid { columns: 1; }
  .reviews__summary { gap: 12px; }
  .reviews__count { min-width: 100%; order: 3; }
}

/* ---------- quick-fix pass: minimal footer + logo-only nav ---------- */
.footer--minimal {
  background: var(--navy);
  text-align: center;
  padding: 28px 0;
}
.footer--minimal span {
  font-family: var(--mono);
  font-size: var(--fs-mono-s);
  letter-spacing: .04em;
  color: var(--on-navy-dim);
}
/* logo is no longer a link — remove the pointer affordance */
.nav__logo { cursor: default; }