/* =========================================================================
   Forward Flow Ops — redesign ("Operations Ledger")
   Self-contained design system. Brand-locked: gold (#D4AF37) + charcoal,
   EB Garamond (serif) + Inter (sans), 8pt spacing, square photos,
   restrained warm shadows. No gradients, no glass, no AI tropes.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------- tokens */
:root {
  /* color (exact FFO design-system values) */
  --gold: #D4AF37;
  --gold-deep: #B8932A;
  --gold-soft: #E8CC6E;
  --light-gold: #F9F4E8;
  --light-gold-2: #F3EAD1;
  --charcoal-deep: #333333;
  --charcoal: #3D3D3D;
  --charcoal-soft: #5A5A5A;
  --charcoal-muted: #8A8A8A;
  --white: #FFFFFF;
  --cream: #FBF8F2;
  --border: #E6DFCC;
  --border-strong: #C9BE9A;

  /* type */
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* spacing (8pt) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* shape */
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px;

  /* shadow (warm, restrained) */
  --shadow-sm: 0 1px 2px rgba(61,61,61,.06), 0 1px 1px rgba(61,61,61,.04);
  --shadow-md: 0 4px 14px rgba(61,61,61,.08);
  --shadow-lg: 0 14px 40px rgba(61,61,61,.12);
  --shadow-gold: 0 6px 20px rgba(212,175,55,.28);

  --maxw: 1140px;
}

/* -------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--gold-soft); color: var(--charcoal-deep); }

/* keyboard focus — never remove */
:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.section { padding: var(--s9) 0; }
.section--alt { background: var(--light-gold); }
.section--dark { background: var(--charcoal); }
.section--tight { padding-top: var(--s8); padding-bottom: var(--s8); }

/* indexed section header — the "ledger" motif ------------------------- */
.ix {
  display: flex; align-items: baseline; gap: var(--s4);
  margin-bottom: var(--s6);
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
}
.ix--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: var(--s2); }
.ix--ondark { border-top-color: rgba(232,204,110,.28); }
.ix__num {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.ix--ondark .ix__num { color: var(--gold); }
.ix__label {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--charcoal-muted);
}
.ix--ondark .ix__label { color: rgba(251,248,242,.6); }

/* eyebrow */
.eyebrow {
  display: inline-block;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 var(--s4);
}
.eyebrow--ondark { color: var(--gold); }

/* -------------------------------------------------------------- type */
.display {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04;
  letter-spacing: -.015em; color: var(--charcoal-deep); margin: 0;
}
.hero-head {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 4vw, 56px); line-height: 1.08;
  letter-spacing: -.015em; color: var(--charcoal-deep); margin: 0 0 var(--s5);
}
.h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12;
  letter-spacing: -.012em; color: var(--charcoal-deep); margin: 0 0 var(--s4);
}
.h3 {
  font-family: var(--serif); font-weight: 600; font-size: 22px;
  line-height: 1.25; color: var(--charcoal-deep); margin: 0 0 var(--s3);
}
.lede {
  font-family: var(--serif); font-size: 20px; line-height: 1.6;
  color: var(--charcoal-soft); margin: 0 0 var(--s5); max-width: 62ch;
}
.body { font-size: 17px; line-height: 1.75; color: var(--charcoal); margin: 0 0 var(--s4); }
.small { font-size: 15px; line-height: 1.6; color: var(--charcoal-soft); }
.micro { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--charcoal-muted); }
.measure { max-width: 64ch; }
.on-dark { color: var(--cream); }
.on-dark .h2, .on-dark .display { color: var(--gold); }
.gold { color: var(--gold-deep); }

/* -------------------------------------------------------------- buttons */
.btn {
  --bg: var(--gold); --fg: var(--charcoal-deep);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 15px 24px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--bg); color: var(--fg);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 120ms ease;
}
.btn .arrow { font-family: var(--serif); font-size: 17px; transform: translateY(-1px); transition: transform 160ms ease; }
.btn--primary { box-shadow: var(--shadow-gold); }
.btn--primary:hover { background: var(--gold-deep); transform: translateY(-1px); }
.btn--primary:hover .arrow { transform: translate(2px, -1px); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--charcoal-deep);
  border-color: var(--border-strong); box-shadow: none;
}
.btn--ghost:hover { background: var(--light-gold); border-color: var(--gold); transform: translateY(-1px); }
.btn--lg { padding: 18px 32px; font-size: 16px; }
.btn--ondark.btn--ghost { color: var(--cream); border-color: rgba(232,204,110,.45); }
.btn--ondark.btn--ghost:hover { background: rgba(212,175,55,.12); border-color: var(--gold); }
.btn-link {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color 160ms ease, color 120ms ease;
}
.btn-link:hover { border-bottom-color: var(--gold-deep); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* -------------------------------------------------------------- top bar + header */
.topbar {
  background: var(--charcoal); color: var(--cream);
  font-family: var(--sans); font-size: 12px; letter-spacing: .04em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.topbar b { color: var(--gold); font-weight: 600; }
.topbar .t-right { opacity: .7; }

.header {
  position: sticky; top: 0; z-index: 50; background: var(--white);
  border-bottom: 1px solid transparent; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.header .container { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s4); padding-bottom: var(--s4); gap: var(--s5); }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand img { width: 38px; height: 38px; }
.brand span { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--charcoal); letter-spacing: .01em; white-space: nowrap; }
.nav { display: flex; gap: 30px; }
.nav a {
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--charcoal);
  text-decoration: none; letter-spacing: .01em; padding: 4px 0;
  border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease;
}
.nav a:hover { color: var(--gold-deep); }
.nav a.is-active { color: var(--gold-deep); border-bottom-color: var(--gold); }
.header .btn { padding: 12px 18px; font-size: 13px; white-space: nowrap; }
.nav-toggle { display: none; }

/* -------------------------------------------------------------- hero */
.hero { padding-top: var(--s8); padding-bottom: var(--s8); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center; }
.hero-note { font-family: var(--sans); font-size: 13px; color: var(--charcoal-muted); margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--border); max-width: 46ch; }
.hero-note b { color: var(--charcoal); font-weight: 600; }
.hero-rule { width: 56px; height: 2px; background: var(--gold); margin: 0 0 var(--s5); }

/* photo frame + proof chip */
.frame { position: relative; }
.photo {
  width: 100%; background: var(--light-gold-2);
  border: 1px solid var(--border-strong); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal-muted); font-family: var(--sans); font-size: 13px;
  text-align: center; padding: var(--s5); box-shadow: var(--shadow-md);
}
.photo--hero { height: clamp(380px, 42vw, 540px); }
.photo--tall { height: clamp(360px, 40vw, 480px); }
.photo--sq { height: 320px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.proof-chip {
  position: absolute; left: calc(-1 * var(--s5)); bottom: var(--s6);
  background: var(--charcoal); color: var(--cream);
  border-left: 3px solid var(--gold);
  padding: var(--s4) var(--s5); max-width: 250px; box-shadow: var(--shadow-lg);
}
.proof-chip .pc-num { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--gold); line-height: 1; }
.proof-chip .pc-txt { font-family: var(--sans); font-size: 13px; line-height: 1.45; margin-top: var(--s2); opacity: .92; }

/* -------------------------------------------------------------- checklist */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); max-width: 920px; margin: 0 auto; }
.symptom {
  display: flex; align-items: flex-start; gap: var(--s3); width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s4) var(--s5); cursor: pointer; font-family: var(--serif);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}
.symptom:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.symptom .box {
  flex: 0 0 auto; width: 24px; height: 24px; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 15px; margin-top: 2px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.symptom .txt { font-size: 17px; line-height: 1.5; color: var(--charcoal); }
.symptom[aria-pressed="true"] { border-color: var(--gold); background: var(--light-gold); }
.symptom[aria-pressed="true"] .box { background: var(--gold); border-color: var(--gold); color: var(--charcoal-deep); }

.verdict {
  max-width: 720px; margin: var(--s7) auto 0; background: var(--charcoal);
  border-left: 3px solid var(--gold); padding: var(--s6) var(--s7); text-align: center;
}
.verdict .tally { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.verdict .line { font-family: var(--serif); font-size: 22px; line-height: 1.4; color: var(--cream); margin: var(--s3) 0 var(--s5); }

/* -------------------------------------------------------------- split */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s8); align-items: center; }
.split--rev { grid-template-columns: 1.1fr .9fr; }

/* -------------------------------------------------------------- FLOW */
.flow-tagline {
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.45; color: var(--charcoal-deep); text-align: center;
  max-width: 30ch; margin: var(--s8) auto 0; padding-top: var(--s7);
  border-top: 1px solid var(--border-strong);
}
.flow-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.flow-card { padding: var(--s6) var(--s5); border-left: 1px solid var(--border); position: relative; }
.flow-card:first-child { border-left: 0; padding-left: 0; }
.flow-card:last-child { padding-right: 0; }
.flow-letter {
  font-family: var(--serif); font-weight: 700; font-size: 80px; line-height: .9;
  color: var(--gold); margin-bottom: var(--s4); letter-spacing: -.02em;
}
.flow-card h3 { margin-bottom: var(--s2); }
.flow-card p { font-size: 16px; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }

/* -------------------------------------------------------------- steps + pricing */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.step {
  background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold);
  border-radius: var(--r-md); padding: var(--s6); box-shadow: var(--shadow-sm);
}
.step .n { font-family: var(--serif); font-size: 44px; font-weight: 600; color: var(--gold); line-height: 1; margin-bottom: var(--s3); }
.step p { font-size: 16px; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }

.pricing {
  margin-top: var(--s8); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.price-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--s5); align-items: baseline; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--border); }
.price-row:last-of-type { border-bottom: 0; }
.price-row .amt { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.price-row .what { font-size: 17px; color: var(--charcoal); }
.price-row .what b { font-weight: 600; color: var(--charcoal-deep); }
.price-cta { padding: var(--s6); background: var(--light-gold); display: flex; justify-content: center; }

/* -------------------------------------------------------------- proof / testimonial */
.proof-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--s8); align-items: center; }
.pullquote {
  font-family: var(--serif); font-size: 26px; font-style: italic; line-height: 1.45;
  color: var(--charcoal-deep); border-left: 2px solid var(--gold);
  padding-left: var(--s5); margin: 0 0 var(--s5);
}
.attr { font-family: var(--serif); font-size: 17px; color: var(--charcoal); }
.attr strong { font-weight: 600; }

/* -------------------------------------------------------------- FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s8); max-width: 980px; margin: 0 auto; }
.faq h3 { margin-bottom: var(--s2); }
.faq p { font-size: 16px; line-height: 1.65; color: var(--charcoal-soft); margin: 0; }

/* accordion (snapshot) */
.accordion { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--charcoal-deep);
  padding: var(--s5) 0;
}
.acc-q:hover { color: var(--gold-deep); }
.acc-pm { font-family: var(--sans); font-size: 26px; font-weight: 400; color: var(--gold-deep); line-height: 1; transition: transform 220ms ease; flex: 0 0 auto; }
.acc-item[data-open="true"] .acc-pm { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height 220ms ease; }
.acc-a-inner { padding: 0 0 var(--s5); font-size: 17px; line-height: 1.7; color: var(--charcoal-soft); max-width: 70ch; }

/* -------------------------------------------------------------- case study */
.cs-kicker { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: var(--charcoal-muted); margin-top: var(--s5); }
.cs-kicker b { color: var(--charcoal); font-weight: 600; }
.bigquote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.35; color: var(--gold);
  max-width: 22ch; margin: 0;
}
.bigquote-attr { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: rgba(251,248,242,.7); margin-top: var(--s5); }
.narrative p { font-size: 18px; line-height: 1.75; color: var(--charcoal); margin: 0 0 var(--s4); }
.inlinequote {
  font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5;
  color: var(--charcoal-deep); border-left: 2px solid var(--gold);
  padding-left: var(--s5); margin: var(--s6) 0;
}

.systems { display: grid; gap: var(--s4); }
.system { display: grid; grid-template-columns: 56px 1fr; gap: var(--s5); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s6); box-shadow: var(--shadow-sm); }
.system .sys-n { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--gold); line-height: 1; }
.system h3 { margin-bottom: var(--s2); }
.system p { font-size: 16px; line-height: 1.65; color: var(--charcoal-soft); margin: 0; }
.sys-quote { font-style: italic; color: var(--charcoal) !important; margin-top: var(--s3) !important; border-left: 2px solid var(--border-strong); padding-left: var(--s4); }

.cs-table { width: 100%; border-collapse: collapse; font-family: var(--serif); }
.cs-table th { text-align: left; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); background: var(--gold-deep); padding: var(--s3) var(--s5); }
.cs-table td { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); font-size: 17px; vertical-align: top; }
.cs-table tr:nth-child(even) td { background: var(--light-gold); }
.cs-table .before { color: var(--charcoal-soft); }
.cs-table .after { color: var(--charcoal-deep); font-weight: 500; }
.cs-table .after::before { content: "\2192"; color: var(--gold-deep); margin-right: var(--s2); }
.cs-table td:first-child { font-weight: 600; color: var(--charcoal-deep); }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.metric { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--r-md); padding: var(--s6); box-shadow: var(--shadow-sm); }
.metric .m-val { font-family: var(--serif); font-size: 40px; font-weight: 600; color: var(--gold-deep); line-height: 1; margin-bottom: var(--s3); }
.metric .m-lbl { font-size: 15px; line-height: 1.5; color: var(--charcoal-soft); }

.cs-ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.ba { padding: var(--s6); border-radius: var(--r-md); }
.ba-before { background: var(--white); border: 1px solid var(--border); }
.ba-after { background: var(--charcoal); color: var(--cream); }
.ba .ba-tag { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: var(--s4); }
.ba-before .ba-tag { color: var(--charcoal-muted); }
.ba-after .ba-tag { color: var(--gold); }
.ba p { font-size: 16px; line-height: 1.7; margin: 0; }
.ba-after p { opacity: .92; }

/* -------------------------------------------------------------- snapshot extras */
.incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.incl { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s6); box-shadow: var(--shadow-sm); }
.incl-ic { color: var(--gold-deep); margin-bottom: var(--s4); }
.incl h3 { margin-bottom: var(--s2); }
.incl p { font-size: 16px; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }

.forlist { display: grid; gap: var(--s5); }
.for-row { display: grid; grid-template-columns: 56px 1fr; gap: var(--s5); align-items: start; padding-bottom: var(--s5); border-bottom: 1px solid var(--border); }
.for-row:last-child { border-bottom: 0; }
.for-n { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--gold); line-height: 1; }
.for-row p { font-size: 17px; line-height: 1.65; color: var(--charcoal); margin: 0; }

.practice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.practice { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r-md); padding: var(--s6); box-shadow: var(--shadow-sm); }
.pr-tag { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--s4); }
.practice p { font-size: 16px; line-height: 1.65; color: var(--charcoal-soft); margin: 0 0 var(--s3); }
.pr-win { font-family: var(--serif); font-style: italic; color: var(--charcoal-deep) !important; font-weight: 500; margin-bottom: 0 !important; }

/* -------------------------------------------------------------- ops map embed */
.opsmap-frame { max-width: 840px; margin: 0 auto; }
.opsmap-frame iframe { width: 100%; aspect-ratio: 1 / 1; border: 0; display: block; }
@media (max-width: 560px) { .opsmap-frame iframe { aspect-ratio: 1 / 1.15; } }

/* -------------------------------------------------------------- footer */
.footer { background: var(--charcoal); color: var(--cream); padding: var(--s8) 0 var(--s6); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s7); flex-wrap: wrap; padding-bottom: var(--s6); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand { max-width: 360px; }
.footer-brand img { width: 190px; margin-bottom: var(--s4); }
.footer-brand p { font-family: var(--serif); font-size: 15px; line-height: 1.6; opacity: .75; margin: 0; }
.footer-cols { display: flex; gap: var(--s8); }
.footer-col h4 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { font-family: var(--sans); font-size: 14px; color: var(--cream); text-decoration: none; opacity: .8; transition: opacity 120ms ease, color 120ms ease; }
.footer-col a:hover { opacity: 1; color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s5); font-family: var(--sans); font-size: 12px; color: rgba(251,248,242,.5); letter-spacing: .04em; }

/* -------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .btn, .symptom, .acc-pm, .acc-a { transition: none !important; }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .frame { order: -1; }
  .proof-chip { left: var(--s4); }
  .split, .split--rev, .proof-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .proof-grid .photo--sq { height: 360px; }
  .flow-row { grid-template-columns: 1fr 1fr; }
  .flow-card { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-right: 0; }
  .flow-card:nth-child(-n+2) { border-top: 0; }
  .steps, .incl-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .cs-ba, .practice-grid { grid-template-columns: 1fr; }
  .faq-grid, .checklist { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar .t-right { display: none; }
  .nav { display: none; }
  .nav.is-open { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: var(--s2) var(--s5); }
  .nav.is-open a { padding: var(--s3) 0; border-bottom: 1px solid var(--border); border-top: 0; }
  .header .container { position: relative; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; color: var(--charcoal); }
  .header > .container > .btn { display: none; }
}
@media (max-width: 560px) {
  .section { padding: var(--s8) 0; }
  .flow-row { grid-template-columns: 1fr; }
  .flow-card { border-top: 1px solid var(--border); }
  .flow-card:nth-child(2) { border-top: 1px solid var(--border); }
  .metrics { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 1fr; gap: var(--s2); }
  .proof-chip { position: static; max-width: none; margin-top: var(--s4); }
}