/* =========================================================
   SYNAPTIC — Design System
   Monochrome + one signal accent. Geist type. Hairline motif.
   Shared across index.html, about.html, portfolio.html
   ========================================================= */

/* ---------- Fonts (Geist + Geist Mono, self-served via Google) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root {
  --ink:    #0e0e10;   /* near-black text */
  --ink-2:  #55555b;   /* muted text */
  --paper:  #ffffff;   /* base background */
  --mist:   #f5f5f4;   /* alt section background */
  --line:   rgba(14,14,16,0.10);  /* hairlines */
  --line-2: rgba(14,14,16,0.16);
  --signal: #ff4d1c;   /* THE accent — used sparingly */
  --signal-soft: rgba(255,77,28,0.08);

  --maxw: 1160px;
  --pad-x: 40px;
  --r: 14px;           /* card / video radius */
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Geist', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--ink); color: var(--paper); }

/* Package pages use the same white/mist palette as the rest of the site.
   Only the hero keeps a distinct warm near-black so it stands apart. */
.pkg-page .page-hero { background: #171310; }
.pkg-page .page-hero::before {
  background: radial-gradient(closest-side, rgba(255,77,28,0.24), transparent 70%);
}
/* package hero: an animated "synapse" signal network (on-brand, no imagery) */
.page-hero--media { position: relative; overflow: hidden; }
.pkg-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* the network sits on the right half and fades toward the headline on the left */
.synapse {
  position: absolute; top: 50%; right: -6%; transform: translateY(-50%);
  width: 62%; height: 130%; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
}
.synapse-lines line {
  opacity: .18;
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: synapseDraw 2.4s ease forwards;
}
.synapse-lines line:nth-child(2)  { animation-delay: .15s; }
.synapse-lines line:nth-child(3)  { animation-delay: .3s;  }
.synapse-lines line:nth-child(4)  { animation-delay: .45s; }
.synapse-lines line:nth-child(5)  { animation-delay: .3s;  }
.synapse-lines line:nth-child(6)  { animation-delay: .55s; }
.synapse-lines line:nth-child(7)  { animation-delay: .7s;  }
.synapse-lines line:nth-child(8)  { animation-delay: .6s;  }
.synapse-lines line:nth-child(9)  { animation-delay: .5s;  }
.synapse-lines line:nth-child(10) { animation-delay: .4s;  }
@keyframes synapseDraw { to { stroke-dashoffset: 0; } }
/* nodes glow and pulse gently */
.synapse-nodes circle {
  filter: drop-shadow(0 0 6px rgba(255,77,28,0.8));
  animation: synapsePulse 3.2s ease-in-out infinite;
}
.synapse-nodes circle:nth-child(2n)  { animation-delay: .6s; }
.synapse-nodes circle:nth-child(3n)  { animation-delay: 1.2s; }
.synapse-nodes circle:nth-child(5n)  { animation-delay: 1.8s; }
@keyframes synapsePulse {
  0%, 100% { opacity: .4; transform: scale(1);   transform-box: fill-box; transform-origin: center; }
  50%      { opacity: .85; transform: scale(1.3); transform-box: fill-box; transform-origin: center; }
}
.page-hero--media .wrap { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .synapse-lines line { animation: none; stroke-dashoffset: 0; }
  .synapse-nodes circle { animation: none; opacity: .8; }
}
@media (max-width: 900px) { .pkg-hero-bg { display: none; } }

/* ---------- Utility / shared type ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 10px;
}
/* the "signal node" — a small live dot that marks the synaptic path */
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); flex: none;
  box-shadow: 0 0 0 4px var(--signal-soft);
}
/* pain-hook eyebrow: a sharper, non-uppercase kicker that names the wound */
.eyebrow--pain {
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600;
  color: var(--signal); margin-bottom: 18px;
}

.section { padding: 120px 0; }
.section--mist { background: var(--mist); }
.hair { height: 1px; background: var(--line); border: 0; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.h-xl { font-size: clamp(40px, 6vw, 74px); font-weight: 800; letter-spacing: -0.035em; }
.h-lg { font-size: clamp(30px, 4vw, 50px); }
.h-md { font-size: clamp(22px, 2.6vw, 32px); }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); line-height: 1.65; }
.signal-word { color: var(--signal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
  padding: 15px 28px; border-radius: 100px;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-2px); }
/* the live signal node inside the primary CTA */
.btn-primary .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 4px rgba(255,77,28,0.25);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--mist); transform: translateY(-2px); }
.btn-lg { padding: 18px 34px; font-size: 16px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad-x);
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 9px;
}
/* on pages with a dark hero, the nav sits on dark until it scrolls:
   make the wordmark + links light, then restore on the scrolled (light) bar */
body:has(.page-hero) .nav:not(.scrolled) .brand { color: var(--paper); }
/* only the top-level nav links go light on a dark hero, NOT the dropdown items
   (those sit on a white panel and must keep their dark text) */
body:has(.page-hero) .nav:not(.scrolled) .nav-links > a,
body:has(.page-hero) .nav:not(.scrolled) .has-dropdown > a { color: rgba(255,255,255,0.72); }
body:has(.page-hero) .nav:not(.scrolled) .nav-links > a:hover,
body:has(.page-hero) .nav:not(.scrolled) .has-dropdown > a:hover { color: var(--paper); }
body:has(.page-hero) .nav:not(.scrolled) .burger span { background: var(--paper); }
body:has(.page-hero) .nav:not(.scrolled) .nav-links .btn-primary { background: var(--paper); color: var(--ink); }
.brand .node { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 15px; color: var(--ink-2); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links .btn { padding: 11px 22px; font-size: 14px; }
.nav-links .btn-primary { color: var(--paper); }

/* Services dropdown submenu (desktop hover) */
.has-dropdown { position: relative; }
.has-dropdown > a { display: inline-flex; align-items: center; gap: 6px; }
.has-dropdown > a::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px);
  transition: transform .2s; opacity: .6;
}
.has-dropdown:hover > a::after { transform: rotate(225deg) translateY(2px); }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px; box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
  display: grid; gap: 2px; z-index: 120;
  /* never taller than the viewport under the nav; scroll inside if it is */
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
}
/* invisible bridge so the menu doesn't close in the gap */
.has-dropdown::before {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px;
  font-size: 14px; color: var(--ink); transition: background .15s;
}
.dropdown a:hover { background: var(--mist); color: var(--ink); }
.dropdown a b { font-weight: 600; }
.dropdown a span { font-size: 12px; color: var(--ink-2); }
.dropdown .dropdown-all {
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal); flex-direction: row;
}
/* grouped dropdown: package headers with services indented under each */
.dropdown--grouped { min-width: 320px; }
.dropdown--grouped .dropdown-pkg {
  flex-direction: row; font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--signal);
  font-weight: 700; padding: 12px 12px 6px; margin-top: 4px;
}
.dropdown--grouped .dropdown-pkg:first-child { margin-top: 0; }
.dropdown--grouped .dropdown-pkg:hover { background: none; }
.dropdown--grouped a:not(.dropdown-pkg):not(.dropdown-all) { padding-left: 22px; }

.burger {
  display: none; width: 30px; height: 20px; position: relative;
  background: none; border: 0; cursor: pointer; z-index: 200;
}
.burger span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  transition: transform .3s, opacity .3s, top .3s;
}
.burger span:nth-child(1){ top: 2px; }
.burger span:nth-child(2){ top: 9px; }
.burger span:nth-child(3){ top: 16px; }
.burger.open span:nth-child(1){ top: 9px; transform: rotate(45deg); }
.burger.open span:nth-child(2){ opacity: 0; }
.burger.open span:nth-child(3){ top: 9px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 150; background: var(--paper);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 26px; font-weight: 600; padding: 10px; }
.mobile-menu .btn { margin-top: 16px; color: var(--paper); }

/* =========================================================
   HERO BACKGROUND — scrolling website mockups ("proof wall")
   Sits behind everything, dimmed + blurred, with a scrim that
   keeps the headline fully readable.
   ========================================================= */
.hero-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none;                 /* never blocks clicks/text */
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
}
.hero-bg-cols {
  position: absolute; top: -8%; right: -4%;
  width: 62%; height: 116%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  filter: saturate(0.96);
  transform: rotate(-5deg);             /* slight tilt = dynamic, less "grid-y" */
  transform-origin: top right;
}
.hero-col { display: flex; flex-direction: column; gap: 20px; }
/* the moving track — duplicated content inside makes the loop seamless */
.hero-col-track { display: flex; flex-direction: column; gap: 20px; will-change: transform; }
.hero-col:nth-child(1) .hero-col-track { animation: scrollUp 34s linear infinite; }
.hero-col:nth-child(2) .hero-col-track { animation: scrollDown 40s linear infinite; }
.hero-col:nth-child(3) .hero-col-track { animation: scrollUp 46s linear infinite; }
@keyframes scrollUp   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes scrollDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* readability scrim: strong on the left (under the headline), clear on the right */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper) 30%, rgba(255,255,255,0.86) 48%, rgba(255,255,255,0) 76%);
}

/* ---------- A real website screenshot in a browser frame ---------- */
.mock {
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}
.mock-bar {
  height: 26px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; background: #ececec; border-bottom: 1px solid var(--line);
}
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c4c4c4; }
.mock-bar i:nth-child(1){ background:#ff5f57; }
.mock-bar i:nth-child(2){ background:#febc2e; }
.mock-bar i:nth-child(3){ background:#28c840; }
.mock img { width: 100%; height: auto; display: block; }

/* ---------- Hero (split: text left, VSL right) ---------- */
.hero { padding: 150px 0 90px; position: relative; }
.hero .wrap { position: relative; z-index: 2; }  /* content above the bg + scrim */
.hero-grid {
  display: grid; grid-template-columns: 0.92fr 1.15fr; gap: 56px; align-items: center;
}
.hero h1 { margin: 22px 0 24px; }
.hero .lead { max-width: 500px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- Centered, VSL-first hero ---------- */
.hero-center { text-align: center; max-width: 1120px; margin: 0 auto; }
.hero-center .eyebrow { justify-content: center; }
.hero-center h1 { margin: 20px 0 22px; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.1; }
.hero-center h1 br { display: none; }
.hero-center h1 .signal-word { display: block; }
.hero-center .lead { max-width: 720px; margin: 0 auto; }
.hero-center .hero-vsl {
  max-width: 820px; margin: 40px auto 8px; aspect-ratio: 16 / 9;
  box-shadow: 0 30px 80px rgba(0,0,0,0.22);
}
.hero-center .hero-cta { margin-top: 30px; }
.hero-center .hero-reassure { margin-top: 16px; text-align: center; }
.hero-trust {
  margin-top: 40px; display: flex; gap: 28px; flex-wrap: wrap;
  font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--ink-2);
}
.hero-trust b { color: var(--ink); font-weight: 500; }

/* ---------- Video placeholder (rounded, click-to-play) ---------- */
.video-ph {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  background:
    radial-gradient(120% 120% at 70% 20%, #1a1a1e 0%, #0e0e10 60%);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.video-ph.small { aspect-ratio: 16 / 11; }
.video-ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-ph .play {
  position: relative; z-index: 2;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  transition: transform .25s; box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.video-ph:hover .play { transform: scale(1.08); }
.video-ph .play::after {
  content: ""; margin-left: 4px;
  border-left: 20px solid var(--ink);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.video-ph .vlabel {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: rgba(255,255,255,0.7); letter-spacing: .5px;
}
.video-ph .vtop {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 10px; border-radius: 100px;
}

/* ---------- Section heading block ---------- */
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head h2 { margin: 18px 0 16px; }
/* centered section header variant */
.sec-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head--center .eyebrow { justify-content: center; }
/* let these two section subheads sit on one line (override the 720px cap) */
#compare .sec-head, #guarantee .sec-head { max-width: 900px; }
#compare .sec-head .lead, #guarantee .sec-head .lead { max-width: none; }

/* ---------- Services grid ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* 3 outcome package cards (homepage) */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pkg-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 34px 30px; position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.pkg-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--signal); opacity: .85;
}
.pkg-card:hover { transform: translateY(-8px); box-shadow: 0 28px 55px rgba(0,0,0,0.12); border-color: var(--signal); }
.pkg-num {
  font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--signal); letter-spacing: 1px;
}
.pkg-card h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; margin: 14px 0 8px; letter-spacing: -0.01em; }
.pkg-card > p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-bottom: 22px; }
.pkg-list { list-style: none; display: grid; gap: 12px; margin: 0 0 24px; }
.pkg-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); line-height: 1.4; }
.pkg-list li::before {
  content: '\2713'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 700;
}
.pkg-cta { margin-top: auto; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; color: var(--signal); }
.pkg-cta em { font-style: normal; display: inline-block; transition: transform .2s; }
.pkg-card:hover .pkg-cta em { transform: translateX(4px); }
/* featured middle package: dark, high contrast */
.pkg-card--feature { background: var(--ink); border-color: var(--ink); }
.pkg-card--feature h3 { color: var(--paper); }
.pkg-card--feature > p { color: rgba(255,255,255,0.7); }
.pkg-card--feature .pkg-list li { color: rgba(255,255,255,0.9); }
.pkg-card--feature:hover { border-color: var(--signal); }
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } }

/* ---------- Package page: "one system, three parts" ---------- */
.pkg-system {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px;
  margin-top: 8px;
}
.pkg-part {
  display: flex; gap: 16px; padding: 24px 22px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.pkg-part:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0,0,0,0.08); border-color: var(--signal); }
.pkg-part-num {
  flex: none; font-family: 'Geist Mono', monospace; font-size: 26px; font-weight: 800;
  line-height: 1; color: var(--signal); opacity: .85;
}
.pkg-part-copy { display: flex; flex-direction: column; }
.pkg-part-copy b { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pkg-part-copy span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.pkg-part-copy em {
  margin-top: 12px; font-family: 'Geist Mono', monospace; font-size: 11px; font-style: normal;
  color: var(--signal); transition: transform .2s;
}
.pkg-part:hover .pkg-part-copy em { transform: translateX(3px); }
.pkg-flow { align-self: center; font-size: 22px; color: var(--signal); font-weight: 700; }

/* customer-journey: follow one stranger through the 3-part machine.
   Each step expands to reveal its "with / without" on tap. */
.journey { max-width: 760px; margin: 0 auto; display: grid; gap: 0; }
.journey-step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .24s ease, box-shadow .24s ease;
}
.journey-step.is-open { border-color: var(--signal); box-shadow: 0 18px 40px rgba(255,77,28,0.12); }
.journey-head {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 18px; padding: 22px 24px;
}
.journey-num {
  flex: none; font-family: 'Geist Mono', monospace; font-size: 26px; font-weight: 800;
  line-height: 1; color: var(--signal); opacity: .85;
}
.journey-lead { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.journey-stage {
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-2);
}
.journey-lead b { font-size: clamp(17px, 2vw, 21px); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.journey-lead b em { font-style: normal; color: var(--signal); }
/* the +/- toggle */
.journey-toggle { flex: none; position: relative; width: 20px; height: 20px; }
.journey-toggle::before, .journey-toggle::after {
  content: ''; position: absolute; background: var(--ink-2); border-radius: 2px; transition: transform .28s ease, opacity .28s ease;
}
.journey-toggle::before { top: 9px; left: 2px; right: 2px; height: 2px; }
.journey-toggle::after { left: 9px; top: 2px; bottom: 2px; width: 2px; }
.journey-step.is-open .journey-toggle::after { transform: scaleY(0); opacity: 0; }
.journey-step.is-open .journey-toggle::before { background: var(--signal); }
/* collapsible body */
.journey-body {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  padding: 0 24px;
  transition: grid-template-rows .3s ease, opacity .25s ease, padding .3s ease;
}
.journey-inner { min-height: 0; overflow: hidden; }
.journey-step.is-open .journey-body { grid-template-rows: 1fr; opacity: 1; padding-bottom: 24px; }
.journey-with { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; }
.journey-svc { color: var(--ink); font-weight: 600; }
.journey-leak {
  font-size: 14px; line-height: 1.5; color: #b23514; margin: 0 0 14px;
  padding: 12px 14px; background: rgba(255,77,28,0.07); border-left: 3px solid var(--signal); border-radius: 8px;
}
.journey-x { font-weight: 800; color: var(--signal); margin-right: 4px; }
.journey-link { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal); }
.journey-link:hover { text-decoration: underline; }
/* the connecting flow arrows + final result */
.journey-flow { display: block; text-align: center; font-size: 20px; color: var(--signal); opacity: .6; padding: 8px 0; }
.journey-result { text-align: center; margin-top: 10px; }
.journey-result-arrow { display: block; font-size: 20px; color: var(--signal); opacity: .6; margin-bottom: 12px; }
.journey-result b { display: block; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.journey-result span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }

/* outcome promise + everything-included checklist */
.pkg-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.pkg-outcome {
  background: var(--ink); color: var(--paper); border-radius: var(--r);
  padding: 30px 30px; display: flex; flex-direction: column; justify-content: center;
}
.pkg-outcome-tag {
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--signal); margin-bottom: 14px;
}
.pkg-outcome p { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--paper); margin: 0; font-weight: 500; }
.pkg-outcome p b { color: var(--paper); font-weight: 700; }
.pkg-checklist {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 28px;
}
.pkg-checklist-head {
  display: block; font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px;
}
.pkg-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pkg-checklist li {
  position: relative; padding-left: 28px; font-size: 15px; color: var(--ink); line-height: 1.4;
}
.pkg-checklist li::before {
  content: '\2713'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 700;
}
@media (max-width: 860px) {
  .pkg-system { grid-template-columns: 1fr; }
  .pkg-flow { transform: rotate(90deg); justify-self: center; margin: -4px 0; }
  .pkg-includes { grid-template-columns: 1fr; }
}

/* bundle price framing on package price box (dark box) */
.price-compare {
  display: block; margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5;
}
.price-compare s { color: rgba(255,255,255,0.85); font-weight: 600; }
.svc-price-box--pkg p b { color: var(--paper); font-weight: 700; }
/* ROI justification line inside the dark price box */
.price-roi {
  margin: 16px 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,77,28,0.12); border: 1px solid rgba(255,77,28,0.28);
  font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.82);
}
.price-roi b { color: var(--paper); font-weight: 700; }
/* soft scarcity line under the CTA */
.price-scarcity {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.4;
}
.price-scarcity-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: livePulse 2s infinite;
}

/* lead magnet: soft "not ready to book" checklist capture */
.lead-magnet {
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: center;
  background: var(--ink); color: var(--paper); border-radius: 22px;
  padding: clamp(34px, 5vw, 52px); position: relative; overflow: hidden;
}
.lead-magnet::before {
  content: ''; position: absolute; top: -40%; right: -10%; width: 60%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,77,28,0.16), transparent 70%);
}
.lead-magnet-copy { position: relative; }
.lead-magnet-copy .eyebrow { color: var(--signal); }
.lead-magnet-copy h2 { color: var(--paper); margin: 12px 0 12px; }
.lead-magnet-copy > p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 480px; margin-bottom: 22px; }
.lead-magnet-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.lead-magnet-fields input {
  flex: 1; min-width: 220px; padding: 14px 16px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color: var(--paper); font-size: 15px; font-family: inherit;
}
.lead-magnet-fields input::placeholder { color: rgba(255,255,255,0.4); }
.lead-magnet-fields input:focus { outline: none; border-color: var(--signal); }
.lead-magnet-fields .btn-primary { background: var(--paper); color: var(--ink); flex: none; }
.lead-magnet-done { font-size: 15px; color: #7fe3a4; line-height: 1.5; margin: 0; }
.lead-magnet-done b { color: rgba(255,255,255,0.6); font-weight: 400; font-size: 13px; }
.lead-magnet-note { display: block; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.45); }
/* the little document mockup */
.lead-magnet-visual { position: relative; display: grid; place-items: center; }
.lead-magnet-doc {
  background: var(--paper); color: var(--ink); border-radius: 12px; padding: 22px 22px;
  width: 100%; max-width: 240px; transform: rotate(3deg); box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.lead-magnet-doc-tag { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); }
.lead-magnet-doc b { display: block; font-size: 17px; font-weight: 700; margin: 8px 0 14px; }
.lead-magnet-doc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lead-magnet-doc li { position: relative; padding-left: 22px; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.lead-magnet-doc li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 700; }
@media (max-width: 760px) {
  .lead-magnet { grid-template-columns: 1fr; gap: 30px; }
  .lead-magnet-visual { display: none; }
}

/* =========================================================
   INTERACTIVE OUTCOMES (tabs + colored bands + icon cards)
   ========================================================= */
.outcomes { margin-top: 44px; }

/* the 3 path tabs */
.outcome-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 38px; }
.outcome-tab {
  display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  font-family: inherit; transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s, background .22s;
}
.outcome-tab:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
.outcome-tab-ico {
  flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 24px; background: var(--signal-soft); transition: transform .25s;
}
.outcome-tab:hover .outcome-tab-ico { transform: scale(1.08) rotate(-4deg); }
.outcome-tab-txt b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.outcome-tab-txt small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.outcome-tab.is-active {
  background: var(--ink); border-color: var(--ink);
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}
.outcome-tab.is-active .outcome-tab-txt b { color: #fff; }
.outcome-tab.is-active .outcome-tab-txt small { color: rgba(255,255,255,0.6); }
.outcome-tab.is-active .outcome-tab-ico { background: var(--signal); }

/* panels: only the active one shows */
.outcome-panel { display: none; animation: outcomeIn .35s ease; }
.outcome-panel.is-active { display: block; }
@keyframes outcomeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* colored band per outcome (each path a distinct tint) */
.outcome-band {
  display: flex; align-items: center; gap: 22px; margin-bottom: 24px;
  border-radius: var(--r); padding: 24px 28px; overflow: hidden; position: relative;
}
.outcome-band-num {
  flex: none; font-family: 'Geist Mono', monospace; font-size: clamp(40px, 5vw, 64px);
  font-weight: 800; line-height: 1; letter-spacing: -0.04em; opacity: .9;
}
.outcome-band-copy h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.01em; }
.outcome-band-copy p { font-size: 16px; margin-top: 4px; }
.outcome-band .outcome-link { margin-left: auto; flex: none; text-decoration: none;
  font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600;
  border-radius: 100px; padding: 10px 20px; transition: background .2s, color .2s, border-color .2s; }
/* per-path tints */
.outcome-panel--win  .outcome-band { background: linear-gradient(120deg, #fff4ef, #ffe9e0); }
.outcome-panel--win  .outcome-band-num { color: var(--signal); }
.outcome-panel--win  .outcome-band-copy p { color: #8a5a48; }
.outcome-panel--less .outcome-band { background: var(--ink); }
.outcome-panel--less .outcome-band-num { color: var(--signal); }
.outcome-panel--less .outcome-band-copy h3 { color: #fff; }
.outcome-panel--less .outcome-band-copy p { color: rgba(255,255,255,0.66); }
.outcome-panel--edge .outcome-band { background: linear-gradient(120deg, #eef2f6, #e6edf3); }
.outcome-panel--edge .outcome-band-num { color: #3a4a5a; }
.outcome-panel--edge .outcome-band-copy p { color: #5a6a78; }
.outcome-band .outcome-link { border: 1px solid currentColor; color: var(--signal); }
.outcome-panel--less .outcome-band .outcome-link { color: #fff; border-color: rgba(255,255,255,0.4); }
.outcome-band .outcome-link:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

/* icon service cards: bolder, with icon + strong hover */
.icard { position: relative; }
.icard-ico {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--signal-soft); font-size: 24px; margin-bottom: 14px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.icard:hover .icard-ico { transform: scale(1.12) rotate(-5deg); }
.icard .num { text-transform: none; }
/* "View package" CTA at the bottom of each outcome panel */
.outcome-cta { display: flex; justify-content: center; margin-top: 32px; }
.svc-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 28px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
/* on a white section (e.g. services.html), use off-white so cards still separate */
.section:not(.section--mist) .svc-card { background: #faf9f7; }
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(0,0,0,0.12); border-color: var(--signal); }
.svc-card .num {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal); letter-spacing: 1px;
}
.svc-card h3 { font-size: 20px; margin: 14px 0 10px; font-weight: 600; }
.svc-card p { font-size: 15px; color: var(--ink-2); }
/* clickable overview cards that jump to the detail section below */
a.svc-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
/* "Read more" button on each card */
.svc-readmore {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 18px; padding: 9px 18px; border-radius: 100px;
  border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.svc-readmore em { font-style: normal; transition: transform .2s; }
a.svc-card:hover .svc-readmore { background: var(--signal); border-color: var(--signal); color: var(--paper); }
a.svc-card:hover .svc-readmore em { transform: translateX(3px); }
a.svc-card .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal);
  opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s;
}
a.svc-card:hover .more { opacity: 1; transform: translateX(0); }
@media (hover: none) { a.svc-card .more { opacity: 1; transform: none; } }

/* overview cards — title leads, pain point is secondary underneath */
.svc-card.pain-card { display: flex; flex-direction: column; }
.svc-card .num {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal); letter-spacing: 1px;
}
.svc-card .svc-title {
  font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink); margin: 12px 0 12px;
}
/* the pain point: secondary, quieter, sits under the title */
.svc-card .pain {
  font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.45;
  margin: 0 0 8px; padding-left: 14px; position: relative;
}
.svc-card .pain::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 2px; background: var(--signal); opacity: .8;
}
.svc-card .fix { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.svc-card.pain-card .more { margin-top: auto; padding-top: 18px; }
/* price + CTA on overview cards */
.svc-card .svc-price {
  margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--ink-2);
  font-family: 'Geist Mono', monospace;
}
.svc-card .svc-price b { color: var(--ink); font-size: 17px; font-weight: 700; }
.svc-card .svc-price small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-2); opacity: .85; }
.svc-card .svc-card-cta {
  display: inline-block; margin-top: 12px;
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal);
}

/* ---------- Package pages: "what it's costing you" pain strip ---------- */
.leak-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.leak {
  text-align: left; cursor: pointer; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.leak:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0,0,0,0.07); }
.leak-ico { font-size: 30px; line-height: 1; display: block; margin-bottom: 16px; filter: grayscale(.15); }
.leak b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink); }
.leak p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }
/* when tapped, the pain "bleeds": alarm-red state + a costing-you stamp + a jolt */
.leak { position: relative; overflow: hidden; }
.leak.is-on {
  border-color: var(--signal); background: var(--signal-soft);
  box-shadow: 0 14px 34px rgba(255,77,28,0.2);
  animation: leakJolt .34s cubic-bezier(.36,.07,.19,.97);
}
.leak.is-on b { color: var(--signal); }
/* a small "costing you" corner stamp that snaps in when acknowledged */
.leak::after {
  content: '\2717 costing you'; position: absolute; top: 12px; right: 12px;
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .5px;
  text-transform: uppercase; color: #fff; background: var(--signal);
  padding: 4px 9px; border-radius: 100px; font-weight: 700;
  opacity: 0; transform: scale(.7) rotate(-6deg); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.leak.is-on::after { opacity: 1; transform: scale(1) rotate(-4deg); }
@keyframes leakJolt {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.leak-tally {
  text-align: center; margin-top: 34px; font-size: clamp(18px, 2.1vw, 22px);
  color: var(--ink); font-weight: 600;
}
.leak-tally[hidden] { display: none; }
.leak-tally.pop { animation: counterPop .32s ease; }
.leak-tally b { color: var(--signal); font-weight: 800; font-variant-numeric: tabular-nums; }
.leak-tally .leak-tally-fix { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); font-weight: 500; }
@media (max-width: 720px) { .leak-grid { grid-template-columns: 1fr; } }

/* a punchy headline sized to sit on one line (scales down instead of wrapping) */
.sec-head:has(.h-oneline) { max-width: 960px; }
.h-oneline { font-size: clamp(24px, 3.6vw, 40px); white-space: nowrap; line-height: 1.1; }
@media (max-width: 720px) { .h-oneline { white-space: normal; font-size: clamp(26px, 6.5vw, 34px); } }
a.svc-card:hover .svc-card-cta { text-decoration: underline; }

/* ---------- How it works: interactive step accordion ---------- */
.path { max-width: 820px; margin: 8px auto 0; position: relative; }
.path-step { position: relative; border-bottom: 1px solid var(--line); }
.path-step:first-child { border-top: 1px solid var(--line); }
/* vertical connector line running down the number column */
.path-step:not(:last-child)::after {
  content: ''; position: absolute; left: 24px; top: 62px; bottom: -1px; width: 2px;
  background: var(--line-2); z-index: 0;
}
.path-head {
  width: 100%; display: flex; align-items: center; gap: 18px; cursor: pointer;
  background: none; border: 0; text-align: left; font-family: inherit;
  padding: 22px 4px; position: relative; z-index: 1;
}
.path-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: 'Geist Mono', monospace;
  font-size: 15px; font-weight: 700; color: var(--ink-2);
  background: var(--mist); border: 1px solid var(--line-2); transition: background .25s, color .25s, border-color .25s;
}
.path-step.is-open .path-num {
  background: var(--signal); color: #fff; border-color: var(--signal);
}
.path-title { font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: var(--ink); flex: 1; }
.path-meta { display: flex; gap: 8px; flex: none; }
.path-time, .path-effort {
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .3px;
  padding: 5px 11px; border-radius: 100px; white-space: nowrap;
}
.path-time { background: var(--signal-soft); color: var(--signal); }
.path-effort { background: var(--mist); color: var(--ink-2); border: 1px solid var(--line); }
.path-plus {
  flex: none; width: 20px; height: 20px; position: relative; margin-left: 4px;
}
.path-plus::before, .path-plus::after {
  content: ''; position: absolute; background: var(--ink-2); transition: transform .3s, opacity .3s;
}
.path-plus::before { top: 9px; left: 2px; right: 2px; height: 2px; }
.path-plus::after { left: 9px; top: 2px; bottom: 2px; width: 2px; }
.path-step.is-open .path-plus::after { transform: scaleY(0); opacity: 0; }
.path-step.is-open .path-plus::before { background: var(--signal); }
/* collapsible body */
.path-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .35s ease, opacity .25s ease;
}
.path-body > * { overflow: hidden; min-height: 0; }
.path-step.is-open .path-body { grid-template-rows: 1fr; opacity: 1; }
.path-body p {
  font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0;
  padding: 0 0 26px 52px; max-width: 640px;
}
@media (max-width: 640px) {
  .path-meta { display: none; }
  .path-body p { padding-left: 0; }
  .path-step:not(:last-child)::after { display: none; }
}

/* honest scarcity line under the final CTA */
.cta-scarcity { font-size: 13px; color: rgba(255,255,255,0.55); max-width: 520px; margin: 22px auto 0; line-height: 1.5; }
/* honest scarcity badge on the final CTA */
.cta-spots {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .3px;
  color: var(--paper); background: rgba(255,77,28,0.16);
  border: 1px solid rgba(255,77,28,0.4); border-radius: 100px; padding: 8px 16px;
}
.cta-spots-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 4px rgba(255,77,28,0.25); animation: pulse 1.8s ease-in-out infinite;
}

/* =========================================================
   SERVICE PAGE (individual)
   ========================================================= */
.hero-reassure { margin-top: 16px; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-2); }
.svc-page-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: start; }
.svc-page-grid .kk { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--signal); }
.svc-page-grid h2 { font-size: clamp(24px, 3vw, 36px); margin: 12px 0 0; }
.svc-page-meta { display: grid; gap: 24px; }
.svc-page-meta .row .label { display: block; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 8px; }
.svc-page-meta .row p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.svc-page-meta .includes { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-page-meta .includes span { font-size: 13px; color: var(--ink); background: var(--mist); border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px; }

/* "Is this you?" mirror: tick the symptoms that match, self-identification */
.mirror-intro { font-size: 15px; color: var(--ink-2); margin: 14px 0 20px; }
.mirror { display: grid; gap: 10px; }
.mirror-item {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px;
  font-size: 16px; line-height: 1.45; color: var(--ink);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mirror-item:hover { border-color: var(--line-2); transform: translateX(2px); }
.mirror-box {
  flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  border: 2px solid var(--line-2); position: relative; transition: background .18s ease, border-color .18s ease;
}
.mirror-box::after {
  content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .18s ease, transform .18s ease;
}
.mirror-item.is-ticked { border-color: var(--signal); background: var(--signal-soft); }
.mirror-item.is-ticked .mirror-box { background: var(--signal); border-color: var(--signal); }
.mirror-item.is-ticked .mirror-box::after { opacity: 1; transform: scale(1); }
/* the reactive payoff: muted until they tick at least one, then it lights up */
/* reactive result: a live score + escalating verdict + dynamic CTA */
.mirror-result {
  margin-top: 22px; padding: 22px 24px; border-radius: var(--r);
  background: var(--ink); color: var(--paper);
  display: grid; gap: 14px; animation: planIn .34s cubic-bezier(.2,.8,.2,1);
}
.mirror-result[hidden] { display: none; }
.mirror-score { display: inline-flex; align-items: baseline; gap: 10px; }
.mirror-score-num {
  font-size: clamp(38px, 5vw, 52px); font-weight: 800; line-height: 1; color: var(--signal);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; display: inline-block;
}
.mirror-score-num.pop { animation: counterPop .32s ease; }
.mirror-score-label { font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.mirror-verdict { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0; }
.mirror-result .btn-primary { background: var(--paper); color: var(--ink); justify-self: start; }

/* sticky price box */
.svc-price-box {
  position: sticky; top: 100px;
  background: var(--ink); color: var(--paper); border-radius: var(--r); padding: 32px 30px;
}
.svc-price-box .price-cat { color: var(--signal); }
.svc-price-box .price-from { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 16px; }
.svc-price-box .price-from span { font-size: 14px; color: rgba(255,255,255,0.6); }
.svc-price-box .price-from b { font-size: clamp(34px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
/* the "/mo CAD" (or "CAD") currency/period suffix inside a big price number */
.price-from b small { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; margin-left: 4px; }
.svc-price-box .price-from b small { color: rgba(255,255,255,0.55); }
.svc-price-box p { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.55; margin-bottom: 22px; }
.svc-price-box p b { color: var(--paper); font-weight: 700; }
.svc-price-box .btn-primary { background: var(--paper); color: var(--ink); }
.price-box-note { display: block; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.5); text-align: center; }
/* related services */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.07); border-color: var(--line-2); }
.rel-card b { font-size: 17px; font-weight: 600; }
.rel-card span { font-size: 14px; color: var(--ink-2); }
.rel-card--all { background: var(--mist); border-style: dashed; }
.rel-card--all span { color: var(--signal); font-family: 'Geist Mono', monospace; font-size: 13px; }
@media (max-width: 900px) {
  .svc-page-grid { grid-template-columns: 1fr; gap: 32px; }
  .svc-price-box { position: static; }
}
@media (max-width: 560px) { .rel-grid { grid-template-columns: 1fr; } }

/* richer "where to go next" cross-sell cards (package family) */
.next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.next-card {
  position: relative; display: flex; gap: 20px; padding: 30px 30px;
  background: #faf9f7; border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease;
}
.next-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(0,0,0,0.1); border-color: var(--signal); }
.next-ico { font-size: 34px; line-height: 1; flex: none; }
.next-copy { flex: 1; }
.next-tag { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); }
.next-copy b { display: block; font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 10px; }
.next-copy > p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0 0 16px; }
.next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.next-list li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.next-list li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 700; }
.next-arrow {
  position: absolute; top: 26px; right: 26px; font-size: 20px; color: var(--signal);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.next-card:hover .next-arrow { transform: translateX(5px); }
@media (max-width: 720px) { .next-grid { grid-template-columns: 1fr; } .next-card { padding: 26px 24px; } }

/* =========================================================
   PRICING (transparent starting points)
   ========================================================= */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 32px 30px; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.07); border-color: var(--line-2); }
.price-card--feature { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.price-cat { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal); }
.price-from { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 14px; }
.price-from span { font-size: 14px; color: var(--ink-2); }
.price-card--feature .price-from span { color: rgba(255,255,255,0.6); }
.price-from b { font-size: clamp(34px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.price-card p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 18px; }
.price-card--feature p { color: rgba(255,255,255,0.72); }
.price-points { list-style: none; display: grid; gap: 8px; margin-top: auto; }
.price-points li { position: relative; padding-left: 20px; font-size: 14px; }
.price-points li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.price-note { text-align: center; margin-top: 44px; }
.price-note p { font-size: 17px; color: var(--ink-2); margin-bottom: 22px; }

/* =========================================================
   COST OF INACTION (the stakes)
   ========================================================= */
.cost-section { background: var(--ink); color: var(--paper); }
.cost-section .sec-head { margin-left: auto; margin-right: auto; text-align: center; max-width: 760px; }
.cost-section h2 { color: var(--paper); }
.cost-section .lead { color: rgba(255,255,255,0.66); }
.cost-section .eyebrow--pain { color: var(--signal); justify-content: center; }
.cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.cost-stat {
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r);
  padding: 32px 28px; background: rgba(255,255,255,0.03);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cost-stat:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,0.06); border-color: var(--signal);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,77,28,0.3);
}
.cost-stat b {
  display: block; font-size: clamp(40px, 5vw, 56px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--signal); margin-bottom: 16px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.cost-stat:hover b { transform: scale(1.06); transform-origin: left center; }
.cost-stat span { display: block; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.cost-stat cite {
  display: block; margin-top: 16px; font-style: normal;
  font-family: 'Geist Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.4);
}
/* the orange "hero" cost card: solid orange, black text, max contrast */
.cost-stat--hero { background: var(--signal); border-color: var(--signal); }
.cost-stat--hero b { color: var(--ink); }
.cost-stat--hero span { color: rgba(14,14,16,0.86); }
.cost-stat--hero cite { color: rgba(14,14,16,0.5); }
.cost-stat--hero:hover {
  background: var(--signal); border-color: var(--signal);
  box-shadow: 0 24px 50px rgba(255,77,28,0.35), 0 0 0 1px rgba(255,255,255,0.15);
}
.cost-flip { text-align: center; margin-top: 50px; }
.cost-flip-note { font-size: 14px; color: rgba(255,255,255,0.55); margin-top: 16px; }
/* keep the cost headline on two clean lines (phrase + orange payoff on one line each) */
.cost-h2 { font-size: clamp(28px, 3.6vw, 44px); }
.cost-h2 .signal-word { white-space: nowrap; }
.cost-flip .btn-primary { background: var(--paper); color: var(--ink); }

/* light variant: same layout, light background + dark text (used when it
   sits right under a dark hero and needs to separate from it) */
.cost-section--light { background: var(--mist); color: var(--ink); }
.cost-section--light h2 { color: var(--ink); }
.cost-section--light .lead { color: var(--ink-2); }
/* clean outlined cards: a light border + soft shadow, on-brand */
.cost-section--light .cost-stat {
  background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 10px 26px rgba(14,14,16,0.05);
}
.cost-section--light .cost-stat:hover {
  background: #fff; border-color: var(--signal);
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.08);
}
.cost-section--light .cost-stat b { color: var(--ink); }
.cost-section--light .cost-stat span { color: var(--ink-2); }
.cost-section--light .cost-stat cite { color: rgba(14,14,16,0.4); }
/* orange hero card: solid orange, clean (no heavy offset shadow) */
.cost-section--light .cost-stat--hero { background: var(--signal); border-color: var(--signal); }
.cost-section--light .cost-stat--hero b { color: var(--ink); }
.cost-section--light .cost-stat--hero span { color: rgba(14,14,16,0.86); }
.cost-section--light .cost-stat--hero cite { color: rgba(14,14,16,0.5); }
.cost-section--light .cost-stat--hero:hover { box-shadow: 0 22px 44px rgba(255,77,28,0.25); }
.cost-section--light .cost-flip-note { color: var(--ink-2); }
.cost-section--light .cost-flip .btn-primary { background: var(--ink); color: var(--paper); }

/* =========================================================
   STICKY CTA (appears on scroll, mobile-friendly)
   ========================================================= */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; transform: translateY(110%); transition: transform .3s ease;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta p { font-size: 15px; margin: 0; }
.sticky-cta-text { display: flex; flex-direction: column; gap: 2px; }
.sticky-cta-note { font-size: 12px; color: rgba(255,255,255,0.55); }
.sticky-cta .btn { padding: 11px 22px; font-size: 15px; }
.sticky-cta .btn-primary { background: var(--paper); color: var(--ink); }
@media (max-width: 560px) {
  .sticky-cta { gap: 10px; padding: 12px 16px; }
  .sticky-cta p { font-size: 13px; flex: 1 1 100%; text-align: center; }
  .sticky-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* =========================================================
   GUARANTEE / RISK REVERSAL
   ========================================================= */
/* ironclad "our promise" panel, styled like a written guarantee */
.promise {
  position: relative; max-width: 800px; margin: 8px auto 0;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 20px;
  padding: 46px 48px 40px; box-shadow: 0 30px 70px rgba(0,0,0,0.1);
}
/* the seal, top-right */
.promise-seal {
  position: absolute; top: -34px; right: 40px; width: 108px; height: 108px;
  border-radius: 50%; background: var(--signal); color: #fff;
  display: grid; place-items: center; text-align: center; gap: 0;
  box-shadow: 0 12px 30px rgba(255,77,28,0.35);
  transform: rotate(-8deg);
}
.promise-seal-top, .promise-seal-bottom {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; line-height: 1;
}
.promise-seal-check { font-size: 30px; font-weight: 700; line-height: 1; margin: 3px 0; }
.promise-tag {
  display: inline-block; font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 28px;
}
.promise-list { list-style: none; display: grid; gap: 22px; margin: 0 0 34px; max-width: 620px; }
.promise-list li { display: flex; gap: 16px; align-items: flex-start; }
.promise-check {
  flex: none; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
  background: var(--signal); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.promise-list li div { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.promise-list li b { color: var(--ink); font-weight: 600; }
.promise-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.promise-sign { font-family: 'Geist Mono', monospace; font-size: 14px; color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .promise { padding: 40px 26px 32px; }
  .promise-seal { width: 84px; height: 84px; top: -28px; right: 20px; }
  .promise-foot { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   TEXT TESTIMONIALS (quote cards)
   ========================================================= */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 28px; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.quote-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.07); border-color: var(--line-2); }
.quote-stars { color: var(--signal); font-size: 15px; letter-spacing: 2px; margin-bottom: 16px; }
.quote-card blockquote { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.quote-card figcaption { margin-top: auto; }
.quote-card figcaption b { display: block; font-size: 15px; font-weight: 600; }
.quote-card figcaption span { font-size: 13px; color: var(--ink-2); font-family: 'Geist Mono', monospace; }

/* =========================================================
   BLOG
   ========================================================= */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0,0,0,0.09); border-color: var(--line-2); }
.blog-thumb {
  aspect-ratio: 16 / 9; position: relative;
  background: linear-gradient(135deg, var(--mist), #ececeb);
  display: flex; align-items: flex-end; padding: 16px;
}
.blog-tag {
  font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--paper);
  background: var(--ink); border-radius: 100px; padding: 5px 12px; text-transform: lowercase;
}
.blog-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); }
.blog-card h3 { font-size: 19px; font-weight: 600; line-height: 1.3; margin: 12px 0 10px; }
.blog-card p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 18px; }
.blog-more { margin-top: auto; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal); }

/* =========================================================
   TRUST STRIP (client names row)
   ========================================================= */
.trust-strip { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mist); }
.trust-strip .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.trust-label { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); }
.trust-names { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: center; }
.trust-names span { font-size: 16px; font-weight: 600; color: var(--ink); opacity: .55; transition: opacity .2s; }
.trust-names span:hover { opacity: 1; }
/* client logo row: force every logo to one dark ink silhouette so light &
   dark logos read identically on the light strip; full color on hover. */
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; }
.trust-logos img {
  height: 38px; width: auto; max-width: 150px; object-fit: contain;
  filter: brightness(0) opacity(0.5);
  transition: transform .3s ease, filter .3s ease;
}
/* keep monochrome on hover, just levitate slightly and firm up */
.trust-logos img:hover { transform: translateY(-5px); filter: brightness(0) opacity(0.8); }
/* circular badge logos: soft greyscale keeps their detail instead of flattening to a disc */
.trust-logos img.logo-badge { height: 46px; filter: grayscale(1) opacity(0.6); }
.trust-logos img.logo-badge:hover { filter: grayscale(1) opacity(0.9); transform: translateY(-5px); }
@media (max-width: 560px) {
  .trust-logos { gap: 18px 26px; }
  .trust-logos img { height: 30px; max-width: 110px; }
}

/* =========================================================
   QUIZ / PAIN PICKER (two-panel interactive lead magnet)
   ========================================================= */
.quiz-section { background: var(--ink); color: var(--paper); }
.quiz-section .sec-head { text-align: center; margin-left: auto; margin-right: auto; }
.quiz-section h2 { color: var(--paper); }
.quiz-section .lead { color: rgba(255,255,255,0.66); }
.quiz-section .eyebrow--pain { color: var(--signal); justify-content: center; }

.quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

/* LEFT: icon chips grid + running cost below */
.quiz-left { display: flex; flex-direction: column; gap: 18px; }
.quiz-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-chip {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; text-align: left; color: var(--paper);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px; padding: 16px 18px;
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
.quiz-chip:hover { transform: translateY(-3px); background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); }
.quiz-chip-ico { font-size: 20px; line-height: 1; flex: none; filter: grayscale(0.2); }
.quiz-chip-txt { flex: 1; }
.quiz-chip-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3); display: grid; place-items: center;
  font-size: 12px; color: transparent; transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.quiz-chip[aria-pressed="true"] {
  background: var(--signal-soft); border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal), 0 10px 30px rgba(255,77,28,0.2);
}
.quiz-chip[aria-pressed="true"] .quiz-chip-check {
  background: var(--signal); border-color: var(--signal); color: #fff; transform: scale(1.05);
}

/* RIGHT: the live-building plan panel */
/* the plan reads like an actual document: a white "sheet" on the dark section */
.quiz-plan {
  background: var(--paper); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px; padding: 26px 26px 28px; min-height: 100%;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.quiz-plan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.quiz-plan-kicker { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); }
.quiz-counter {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2);
  background: var(--mist); border-radius: 100px; padding: 6px 14px;
  transition: background .2s;
}
.quiz-counter b { font-size: 16px; font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums; }
.quiz-counter.pop { animation: counterPop .3s ease; }
@keyframes counterPop { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }

.quiz-empty { text-align: center; color: var(--ink-2); padding: 34px 10px; margin: auto 0; }
.quiz-empty-ico { font-size: 34px; display: block; margin-bottom: 14px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.quiz-empty p { font-size: 15px; line-height: 1.55; max-width: 300px; margin: 0 auto; color: var(--ink); }
.quiz-empty p b { color: var(--ink); }

/* running "cost of doing nothing" strip — the bleeding, tallied live */
.quiz-toll {
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,77,28,0.09); border: 1px solid rgba(255,77,28,0.3);
  display: grid; gap: 4px;
}
.quiz-toll[hidden] { display: none; }
.quiz-toll.pop { animation: counterPop .3s ease; }
.quiz-toll-label { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); }
.quiz-toll-bar { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.quiz-toll-bar b { color: var(--paper); font-weight: 700; }

.quiz-plan-list { list-style: none; display: grid; gap: 12px; margin: 0; }
.quiz-plan-list li {
  display: grid; gap: 5px; padding: 15px 16px;
  background: var(--mist); border: 1px solid var(--line);
  border-left: 3px solid var(--signal); border-radius: 10px;
  animation: planIn .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes planIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.quiz-plan-list li b { font-size: 15px; font-weight: 600; color: var(--ink); }
/* what we build */
.plan-fix { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
/* the payoff (dream), green-lit with a check */
.plan-payoff {
  font-size: 13px; line-height: 1.45; color: #157347; font-weight: 600;
  padding-left: 16px; position: relative;
}
.plan-payoff::before { content: '\2713'; position: absolute; left: 0; top: 0; color: #1a9e5f; font-weight: 700; }

.quiz-plan-cta { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; justify-items: start; }
.quiz-plan-cta[hidden] { display: none; }
/* the value anchor: plan "worth", struck through, yours free */
.quiz-plan-value { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.quiz-plan-value s { color: rgba(0,0,0,0.35); }
.quiz-plan-value b { color: var(--ink); font-weight: 700; }
.quiz-plan-note { font-size: 12px; color: var(--ink-2); }

@media (max-width: 800px) {
  .quiz { grid-template-columns: 1fr; }
  .quiz-chips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .quiz-chips { grid-template-columns: 1fr; } }

/* friendly banner shown on the form when arriving from the pain picker */
.form-prefill {
  background: var(--signal-soft); border: 1px solid rgba(255,77,28,0.25);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 22px;
  font-size: 14px; color: var(--ink); line-height: 1.5;
}
.form-prefill b { color: var(--signal); }

/* ---------- Our Work grids ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work-item .cap { margin-top: 14px; }
.work-item .cap b { font-size: 15px; font-weight: 600; }
.work-item .cap span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* website showcase card (real screenshots) */
.shot-card {
  display: block; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.shot-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0,0,0,0.12); border-color: var(--line-2); }
.shot-frame {
  height: 24px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; background: #ececec; border-bottom: 1px solid var(--line);
}
.shot-frame i { width: 8px; height: 8px; border-radius: 50%; }
.shot-frame i:nth-child(1){ background:#ff5f57; }
.shot-frame i:nth-child(2){ background:#febc2e; }
.shot-frame i:nth-child(3){ background:#28c840; }
.shot-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot-meta { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.shot-meta b { font-size: 15px; font-weight: 600; }
.shot-meta .tag { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 4px 10px; }
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* horizontal auto-scrolling marquee of showcase cards (homepage).
   Auto-scroll + infinite loop are JS-driven (js/main.js) via scrollLeft,
   so the arrow buttons can nudge it and it stays seamless. */
.shot-marquee { position: relative; width: 100%; }
.shot-marquee-viewport {
  overflow-x: auto; overflow-y: hidden; width: 100%;
  scrollbar-width: none; -ms-overflow-style: none;
}
.shot-marquee-viewport::-webkit-scrollbar { display: none; }
.shot-marquee-track { display: flex; gap: 20px; width: max-content; padding: 6px 0; }
.shot-marquee .shot-card { width: 380px; flex: none; }

/* minimalist arrow controls */
.shot-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.shot-arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shot-arrow svg { width: 18px; height: 18px; }
.shot-arrow.prev { left: -8px; }
.shot-arrow.next { right: -8px; }

@media (max-width: 560px) {
  .shot-marquee .shot-card { width: 300px; }
  .shot-arrow { width: 38px; height: 38px; }
  .shot-arrow.prev { left: 2px; }
  .shot-arrow.next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .shot-marquee-track { animation: none; }
  .shot-marquee-viewport { overflow-x: auto; }
}

/* ---------- Duo strip (about preview) ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.duo-photos { position: relative; }
.duo-photos img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top;
  border-radius: var(--r); border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.duo h2 { margin: 16px 0 20px; }
.duo p { color: var(--ink-2); font-size: 16px; }
.duo p + p { margin-top: 16px; }
.duo .roles { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.duo .role {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 8px 16px;
}
/* two-half skill groups with icon chips */
.duo-skills { display: grid; gap: 22px; margin-top: 28px; }
.duo-skill-label {
  display: block; font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: .3px; text-transform: uppercase; color: var(--signal); margin-bottom: 12px;
}
.duo-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.duo-chips span {
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: #faf9f7; border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px;
  transition: transform .2s, border-color .2s;
}
.duo-chips span:hover { transform: translateY(-2px); border-color: var(--line-2); }

/* ---------- Final CTA band ---------- */
.cta-band { background: var(--ink); color: var(--paper); border-radius: 0; }
.cta-band .wrap { text-align: center; padding-top: 110px; padding-bottom: 110px; }
.cta-band h2 { color: var(--paper); }
.cta-band .lead { color: rgba(255,255,255,0.66); max-width: 560px; margin: 20px auto 0; }
.cta-band .btn-primary { background: var(--paper); color: var(--ink); margin-top: 38px; }
.cta-band .eyebrow { color: rgba(255,255,255,0.6); }
/* compact mid-page CTA band (used partway down long package pages) */
.section.cta-band--mini { padding: 0; }
.cta-band--mini .wrap { padding-top: 56px; padding-bottom: 56px; }
.cta-band--mini h2 { margin: 0; }
.cta-band--mini .lead { margin: 12px auto 0; }
.cta-band--mini .btn-primary { margin-top: 26px; }

/* single featured testimonial (centered, larger) */
.quote-card--feature {
  max-width: 780px; margin: 0 auto; text-align: center;
  padding: 40px clamp(28px, 5vw, 56px);
}
.quote-card--feature .quote-stars { font-size: 18px; letter-spacing: 3px; }
.quote-card--feature blockquote {
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.5; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); margin: 18px 0 24px;
}
.quote-card--feature figcaption b { font-size: 16px; }
.quote-card--feature figcaption span { font-size: 13px; color: var(--ink-2); }
/* testimonial attribution with an avatar */
.quote-attrib { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.quote-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 22px;
  background: var(--mist); border: 1px solid var(--line);
  object-fit: cover;
}
/* empty photo placeholder until a real client photo is dropped in */
.quote-avatar--placeholder {
  font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink-2);
  border: 1px dashed var(--line-2); background: var(--mist);
}
.quote-who { display: flex; flex-direction: column; align-items: center; }
.quote-who b { display: block; }
.quote-who span { display: block; }
/* founders photo beside the guarantee signature */
.promise-sign--photo { display: inline-flex; align-items: center; gap: 12px; }
/* wider rounded avatar so both founders' faces fit (a circle crops one out) */
.promise-avatar { width: 72px; height: 48px; border-radius: 10px; object-fit: cover; object-position: 50% 22%; border: 1px solid var(--line-2); flex: none; }
.promise-sign--photo > span { display: flex; flex-direction: column; line-height: 1.3; }
.promise-sign--photo small { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 12px; color: var(--ink-2); letter-spacing: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,0.55); padding: 40px var(--pad-x); }
.footer.top-line { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer .brand { color: var(--paper); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: rgba(255,255,255,0.5); font-size: 14px; transition: color .2s; }
.footer-links a:hover { color: var(--paper); }

/* ---------- Scroll reveal ----------
   Only hide-then-animate when JS is active (html.js). Without JS, or if it
   fails to load, content stays fully visible — never a blank section. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.vis { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .hero-grid, .duo { grid-template-columns: 1fr; gap: 40px; }
  /* on mobile the split collapses, so keep the bg but fade it far back
     and let it sit across the full width, very quiet */
  .hero-bg { opacity: 0.22; }
  .hero-bg-cols { width: 130%; right: -15%; grid-template-columns: repeat(2, 1fr); }
  .hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,0.4), var(--paper) 55%); }
  .svc-grid, .work-grid, .quote-grid, .guarantees, .cost-grid, .price-grid { grid-template-columns: 1fr 1fr; }
  .outcome-tabs { grid-template-columns: 1fr; }
  .outcome-band { flex-wrap: wrap; }
  .outcome-band .outcome-link { margin-left: 0; }
}
@media (max-width: 560px) {
  :root { --pad-x: 22px; }
  .section { padding: 84px 0; }
  .hero { padding: 120px 0 70px; }
  .svc-grid, .work-grid, .quote-grid, .guarantees, .cost-grid, .price-grid { grid-template-columns: 1fr; }
  .pain-result-cta { flex-direction: column; align-items: flex-start; }
  .sticky-cta ~ .footer, body:has(.sticky-cta) { padding-bottom: 0; }
  .duo-photos img { width: 62%; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
/* dark page hero: a banner that clearly separates from the sections below */
.page-hero {
  padding: 150px 0 76px; background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
}
/* soft signal glow so it's not a flat slab */
.page-hero::before {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; max-width: 130%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,77,28,0.14), transparent 70%);
}
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { margin-bottom: 20px; color: var(--signal); }
.page-hero .eyebrow a { color: rgba(255,255,255,0.6) !important; }
.page-hero .eyebrow a:hover { color: var(--paper) !important; }
.page-hero h1 { max-width: 900px; color: var(--paper); }
.page-hero .lead { max-width: 620px; margin-top: 24px; color: rgba(255,255,255,0.66); }
.page-hero .lead b { color: var(--paper); }
.page-hero .hero-reassure { color: rgba(255,255,255,0.5); }
/* white primary button so it reads on the dark hero */
.page-hero .btn-primary { background: var(--paper); color: var(--ink); }

/* Founders: paired photos + story */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.founders-photos { position: relative; }
.founders-photos img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top;
  border-radius: var(--r); border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.founders h2 { margin: 16px 0 20px; }
.founders p { color: var(--ink-2); font-size: 16px; }
.founders p + p { margin-top: 16px; }
.founders p b { color: var(--ink); font-weight: 600; }

/* Two-person split cards */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.person {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 34px 32px;
}
.person .who { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.person .who img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); }
.person .who b { font-size: 18px; font-weight: 600; display: block; }
.person .who span { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-2); }
.person > p { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 13px;
}
/* outcome-led capabilities: what it gets them, with the tech as a subtitle */
.chips-out { display: grid; gap: 10px; margin-top: 4px; }
.chip-out {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; position: relative; padding-left: 30px;
}
.chip-out::before {
  content: '\2713'; position: absolute; left: 13px; top: 12px;
  color: var(--signal); font-weight: 700; font-size: 13px;
}
.chip-out b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.chip-out span { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--ink-2); }

/* Stats / results row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { border-left: 2px solid var(--signal); padding-left: 18px; }
.stat b { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; display: block; line-height: 1; }
.stat span { font-size: 14px; color: var(--ink-2); margin-top: 8px; display: block; }

/* results proof band (real numbers): dark "results moment" */
.results-band { background: var(--ink); color: var(--paper); }
.results-band .sec-head h2 { color: var(--paper); }
.results-band .lead { color: rgba(255,255,255,0.62); }
.eyebrow--on-dark { color: var(--signal); }
.results-band .stats { margin-top: 12px; }

/* bigger, bolder numbers on the dark band */
.stats--big { gap: 28px; }
.stats--big .stat { border-left: none; padding-left: 0; text-align: center; }
.stats--big .stat b {
  font-size: clamp(48px, 6vw, 76px); line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #ffb59f 140%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stats--big .stat span { color: rgba(255,255,255,0.6); font-size: 14px; max-width: 220px; margin: 14px auto 0; line-height: 1.45; }

.stats--three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
  .stats--big { grid-template-columns: 1fr 1fr; }
  .stats--three { grid-template-columns: 1fr; }
}

/* Values / how-we-think list */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.value .k { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal); }
.value h3 { font-size: 19px; font-weight: 600; margin: 12px 0 10px; }
.value p { font-size: 15px; color: var(--ink-2); }

/* ---------- About: client proof story (before -> after) ---------- */
.proof-story {
  margin: 44px auto 0; max-width: 900px;
  border: 1px solid var(--line); border-radius: 18px; background: #fff;
  padding: 30px clamp(22px, 4vw, 40px); box-shadow: 0 18px 44px rgba(0,0,0,0.05);
}
.proof-story-tag {
  display: inline-block; font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 18px;
}
.proof-story-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; }
.proof-story-side { }
.proof-story-label {
  display: block; font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px;
}
.proof-story-side--before .proof-story-label { color: var(--ink-2); }
.proof-story-side--after .proof-story-label { color: var(--signal); }
.proof-story-side p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.proof-story-side--after p { color: var(--ink); }
.proof-story-side p b { color: var(--signal); font-weight: 700; }
.proof-story-arrow { font-size: 26px; color: var(--signal); font-weight: 700; }
@media (max-width: 680px) {
  .proof-story-grid { grid-template-columns: 1fr; gap: 14px; }
  .proof-story-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---------- About: milestone / journey strip ---------- */
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.milestone {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px; transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
}
.milestone:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.milestone-ico { font-size: 26px; line-height: 1; display: block; margin-bottom: 14px; }
.milestone b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink); }
.milestone p { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0; }
@media (max-width: 860px) { .milestones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .milestones { grid-template-columns: 1fr; } }

/* ---------- Founders' signed promise ---------- */
.pledge {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: var(--ink); color: var(--paper); border-radius: 22px;
  padding: clamp(38px, 5vw, 56px) clamp(28px, 5vw, 64px);
  position: relative; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.22);
}
.pledge::before {
  content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
  width: 120%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,77,28,0.16), transparent 70%);
}
.pledge > * { position: relative; }
.pledge-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--signal);
  background: rgba(255,77,28,0.12); border: 1px solid rgba(255,77,28,0.3);
  border-radius: 100px; padding: 7px 16px; margin-bottom: 26px;
}
.pledge-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.pledge-body {
  font-size: clamp(18px, 2.1vw, 22px); line-height: 1.6; color: var(--paper);
  font-weight: 500; max-width: 620px; margin: 0 auto;
}
.pledge-body + .pledge-body { margin-top: 16px; font-size: clamp(15px, 1.7vw, 17px); color: rgba(255,255,255,0.62); font-weight: 400; }
.pledge-body b { font-weight: 700; }
.pledge-sign {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 34px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14);
}
.pledge-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.2); }
.pledge-sign > div { text-align: left; }
.pledge-names { display: block; font-weight: 700; font-size: 17px; color: var(--paper); }
.pledge-role { display: block; font-family: 'Geist Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }

/* ---------- Straight talk: standalone pre-qualifying callout ---------- */
.straight {
  max-width: 920px; margin: 0 auto; text-align: center;
  background: var(--ink); color: var(--paper); border-radius: 22px;
  padding: clamp(40px, 6vw, 60px) clamp(28px, 5vw, 60px);
  position: relative; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.22);
}
/* a soft signal glow bleeding in from the top */
.straight::before {
  content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
  width: 120%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,77,28,0.16), transparent 70%);
}
.straight > * { position: relative; }
.straight-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--signal);
  background: rgba(255,77,28,0.12); border: 1px solid rgba(255,77,28,0.3);
  border-radius: 100px; padding: 7px 16px; margin-bottom: 26px;
}
.straight-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.straight-h {
  font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.05; margin-bottom: 14px; color: var(--paper);
}
.straight-sub {
  font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.6);
  max-width: 560px; margin: 0 auto 38px;
}
/* the NOT-for-you / FOR-you self-sorting columns */
.straight-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.straight-col {
  border-radius: 16px; padding: 26px 26px 28px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03);
}
.straight-col--yes {
  border-color: rgba(255,77,28,0.4); background: rgba(255,77,28,0.07);
  box-shadow: 0 14px 34px rgba(255,77,28,0.12);
}
.straight-col-head {
  display: block; font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 18px;
  color: rgba(255,255,255,0.5);
}
.straight-col--yes .straight-col-head { color: var(--signal); }
.straight-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.straight-col li {
  position: relative; padding-left: 30px;
  font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.72);
}
.straight-col li b { color: var(--paper); font-weight: 600; }
.straight-col li::before {
  position: absolute; left: 0; top: -1px; font-weight: 700; font-size: 15px;
}
.straight-col--no li::before { content: '\2717'; color: rgba(255,255,255,0.4); }
.straight-col--yes li::before { content: '\2713'; color: #4ade80; }
/* self-qualifying CTA at the bottom, caught at peak agreement */
.straight-cta {
  margin-top: 38px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.straight-cta p { font-size: clamp(18px, 2vw, 22px); font-weight: 600; color: var(--paper); margin: 0; }
.straight-cta .btn-primary { background: var(--paper); color: var(--ink); }
@media (max-width: 680px) { .straight-cols { grid-template-columns: 1fr; } }

/* ---------- Us vs agency: interactive flip toggle ---------- */
.flip { max-width: 760px; margin: 44px auto 0; }
/* the toggle switch */
.flip-toggle {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 100px;
  padding: 5px; max-width: 460px; margin: 0 auto 32px;
}
.flip-btn {
  position: relative; z-index: 2; cursor: pointer; border: 0; background: none;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink-2);
  padding: 12px 18px; border-radius: 100px; transition: color .25s;
}
.flip-btn.is-active { color: #fff; }
.flip-btn[data-side="them"].is-active { color: var(--paper); }
.flip-thumb {
  position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 100px; background: var(--signal);
  transition: transform .3s cubic-bezier(.4,1.3,.5,1), background .25s;
}
/* when "them" active, thumb slides left & goes dark */
.flip.is-them .flip-thumb { transform: translateX(0); background: var(--ink); }
.flip.is-us   .flip-thumb { transform: translateX(100%); background: var(--signal); }

/* the transforming card */
.flip-card {
  position: relative; border-radius: var(--r); overflow: hidden;
  transition: background .35s ease, box-shadow .35s ease;
}
.flip-face { padding: 40px 40px 36px; }
.flip-face--them { display: none; }
.flip-face--us { display: none; }
.flip.is-them .flip-face--them { display: block; animation: flipIn .35s ease; }
.flip.is-us   .flip-face--us   { display: block; animation: flipIn .35s ease; }
@keyframes flipIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* them = dark & grim */
.flip.is-them .flip-card { background: var(--ink); box-shadow: 0 26px 60px rgba(0,0,0,0.25); }
/* us = bright & winning */
.flip.is-us .flip-card { background: #fff; border: 1px solid var(--line); box-shadow: 0 26px 60px rgba(255,77,28,0.12); }

.flip-tag {
  display: inline-block; font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 22px;
}
.flip-face--them .flip-tag { color: rgba(255,255,255,0.5); }
.flip-face--us .flip-tag { color: var(--signal); }
.flip-list { list-style: none; display: grid; gap: 16px; margin: 0 0 24px; }
.flip-list li { display: flex; align-items: center; gap: 14px; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.4; }
.flip-face--them .flip-list li { color: rgba(255,255,255,0.82); }
.flip-face--us .flip-list li { color: var(--ink); font-weight: 500; }
.flip-mark {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.flip-mark--x { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.1); }
.flip-mark--check { color: #fff; background: var(--signal); }
.flip-foot { font-size: 15px; padding-top: 20px; border-top: 1px solid; }
.flip-face--them .flip-foot { color: rgba(255,255,255,0.6); border-top-color: rgba(255,255,255,0.12); }
.flip-face--us .flip-foot { color: var(--ink-2); border-top-color: var(--line); }

@media (max-width: 560px) {
  .vs-head, .vs-row { grid-template-columns: 1fr; }
  .vs-col--us, .vs-us { border-left: 0; border-top: 1px solid var(--line); }
  .vs-col--us::before { display: none; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-copy h2 { margin: 16px 0 18px; }
.contact-copy p { color: var(--ink-2); font-size: 16px; }
.contact-copy p + p { margin-top: 14px; }
.contact-points { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
.contact-points li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.contact-points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }

.contact-form {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 34px 32px;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.field-opt { font-weight: 400; color: var(--ink-2); font-size: 12px; }
/* multi-select "what do you need" as tappable checkbox chips */
.check-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.check-chip {
  display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 100px; padding: 9px 15px;
  font-size: 14px; color: var(--ink-2); background: #fff;
  transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
  user-select: none;
}
.check-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.check-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-chip span { display: inline-flex; align-items: center; gap: 7px; }
.check-chip span::before {
  content: '+'; font-size: 15px; line-height: 1; color: var(--ink-2);
  transition: transform .18s, color .18s;
}
.check-chip:has(input:checked) {
  background: var(--signal); border-color: var(--signal); color: #fff;
  box-shadow: 0 6px 16px rgba(255,77,28,0.28);
}
.check-chip:has(input:checked) span::before { content: '\2713'; color: #fff; }
.check-chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: 'Geist', sans-serif; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 13px 15px; transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--signal); }
.field textarea { resize: vertical; min-height: 110px; }
.contact-form .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { font-size: 13px; color: var(--ink-2); margin-top: 14px; text-align: center; }
/* contact form success state (shown after submit) */
.form-success { text-align: center; padding: 20px 0; display: grid; gap: 12px; justify-items: center; }
.form-success[hidden] { display: none; }
.form-success-ico {
  width: 52px; height: 52px; border-radius: 50%; background: var(--signal); color: #fff;
  display: grid; place-items: center; font-size: 26px; font-weight: 800;
}
.form-success b { font-size: 20px; color: var(--ink); }
.form-success p { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 440px; margin: 0; }

/* stylish contact page: info panel + full form */
/* full-width single-column layout: form first, info below */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.contact-block .label { display: block; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 8px; }
.contact-block a { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; word-break: break-word; }
.contact-block a:hover { color: var(--signal); }
.contact-block p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* the info cards in a row below the form */
.contact-info-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.contact-count { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.contact-count li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.contact-count li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--signal); font-weight: 700; }

/* "how the free audit works" as a full-width 3-step strip */
.contact-next-row { border-top: 1px solid var(--line); padding-top: 30px; }
.contact-next-row > .label { display: block; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 18px; }
.next-steps--row { grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 760px) {
  .contact-info-row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .next-steps--row { grid-template-columns: 1fr; }
}
@media (max-width: 460px) { .contact-info-row { grid-template-columns: 1fr; } }
/* "what happens after you hit send" step list in the sidebar */
.contact-next { border-top: 1px solid var(--line); padding-top: 26px; }
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; }
.next-step-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--signal); color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center; margin-top: 1px;
}
.next-steps li div { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.next-steps li b { color: var(--ink); font-weight: 600; }

.contact-form-title { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 6px; }
.contact-form-sub { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-row .field { margin-bottom: 18px; }

/* two-path booking: "pick a time" (calendar) OR "tell us more" (form) */
.book-paths {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.05); overflow: hidden;
}
/* single booking card (calendar-only contact page) */
.book-card {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.05); padding: 30px clamp(22px, 3vw, 34px) 30px;
}
.book-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.book-tab {
  background: var(--mist); border: 0; cursor: pointer; text-align: left;
  padding: 18px 24px; display: flex; flex-direction: column; gap: 2px;
  border-bottom: 3px solid transparent; transition: background .2s, border-color .2s;
}
.book-tab + .book-tab { border-left: 1px solid var(--line); }
.book-tab b { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.book-tab span { font-size: 12.5px; color: var(--ink-2); }
.book-tab.is-active { background: #fff; border-bottom-color: var(--signal); }
.book-tab.is-active b { color: var(--ink); }
.book-tab:not(.is-active):hover { background: #efefee; }
/* panels */
.book-panel { display: none; padding: 30px clamp(22px, 3vw, 34px) 34px; }
.book-panel.is-active { display: block; }
.contact-form.book-panel { border: 0; box-shadow: none; border-radius: 0; }
/* calendar embed */
.cal-embed { margin-top: 4px; }
.cal-embed iframe { width: 100%; min-height: 620px; border: 0; border-radius: 10px; }
.cal-embed-placeholder {
  border: 1px dashed var(--line-2); border-radius: 12px; background: var(--mist);
  padding: 44px 30px; text-align: center; display: grid; gap: 12px; justify-items: center;
}
.cal-embed-ico { font-size: 38px; }
.cal-embed-placeholder b { font-size: 18px; color: var(--ink); }
.cal-embed-placeholder p { font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 380px; margin: 0; }
.cal-embed-placeholder .btn-primary { margin-top: 8px; }
/* a button that looks like an inline text link */
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--signal); font-weight: 600; font-family: inherit; font-size: inherit;
}
.linklike:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .book-tab { padding: 14px 16px; }
  .book-tab b { font-size: 14px; }
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================
   FAQ PAGE
   ========================================================= */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 0; font-family: 'Geist', sans-serif; font-size: 18px; font-weight: 600; color: var(--ink);
}
.faq-q .pm { position: relative; width: 16px; height: 16px; flex: none; }
.faq-q .pm::before, .faq-q .pm::after {
  content: ""; position: absolute; background: var(--signal); transition: transform .25s, opacity .25s;
}
.faq-q .pm::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-q .pm::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item.open .faq-q .pm::after { transform: scaleY(0); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 0 26px; color: var(--ink-2); font-size: 16px; line-height: 1.7; max-width: 720px; }
.faq-item.open .faq-a { max-height: 400px; }

/* 2-column card FAQ with icons + reassurance tags */
.faq-list--grid { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.faq-list--grid .faq-item {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 0 24px; transition: border-color .25s, box-shadow .25s;
}
.faq-list--grid .faq-item:hover { border-color: var(--line-2); box-shadow: 0 12px 30px rgba(0,0,0,0.05); }
.faq-list--grid .faq-item.open { border-color: var(--signal); }
.faq-list--grid .faq-q { padding: 20px 0; align-items: flex-start; gap: 14px; }
.faq-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 20px; background: var(--signal-soft); margin-top: 1px;
}
.faq-qtext { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 1.3; }
.faq-qtext small { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500; color: var(--signal); letter-spacing: .2px; }
.faq-list--grid .faq-q .pm { margin-top: 6px; }
.faq-list--grid .faq-a p { padding: 0 0 22px 54px; }
.faq-list--grid .faq-item.open .faq-a { max-height: 320px; }
@media (max-width: 800px) {
  .faq-list--grid { grid-template-columns: 1fr; }
}

/* objection crusher: each item is a doubt (in quotes) knocked down */
.objections { max-width: 820px; }
.objections .objection {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  margin-bottom: 12px; padding: 0 22px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.objections .objection:hover { border-color: var(--line-2); }
.objections .objection.open { border-color: var(--signal); box-shadow: 0 14px 34px rgba(255,77,28,0.08); }
.objections .faq-q { padding: 20px 0; }
.objections .obj-worry {
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 600; color: var(--ink-2);
  font-style: italic; letter-spacing: -0.01em;
}
.objections .objection.open .obj-worry { color: var(--ink); }
.objections .faq-a p { padding: 0 0 22px; font-size: 16px; color: var(--ink-2); }
.objections .obj-truth {
  display: inline; font-weight: 700; color: var(--signal);
}
/* closing nudge to CTA after the objections are cleared */
.objections-cta {
  max-width: 820px; margin: 30px auto 0; text-align: center;
  padding: 26px 28px; border-radius: var(--r); background: var(--mist); border: 1px solid var(--line);
  display: grid; gap: 16px; justify-items: center;
}
.objections-cta p { font-size: 16px; color: var(--ink-2); line-height: 1.5; margin: 0; max-width: 560px; }
.objections-cta p b { color: var(--ink); }

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.svc-detail { padding: 76px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.svc-detail:first-of-type { border-top: 0; }
.svc-detail-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.svc-detail .kk { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--signal); }
.svc-detail h2 { font-size: clamp(26px, 3vw, 40px); margin: 14px 0 16px; }
.svc-detail .intro { color: var(--ink-2); font-size: 16px; }
.svc-detail .intro b { display: block; color: var(--ink); font-size: 18px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; }
.svc-detail.featured .intro b { color: var(--ink); }
.svc-list { list-style: none; display: grid; gap: 14px; }
.svc-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
}
.svc-list li b { font-weight: 600; }
.svc-list li span { color: var(--ink-2); }
.svc-detail .stack, .svc-page-grid .stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-detail .stack span, .svc-page-grid .stack span {
  font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2);
  background: var(--mist); border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px;
}

/* "For who / What it includes" panel — collapsed, reveals on hover (desktop) */
.svc-meta {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease, opacity .3s ease, margin-top .35s ease;
  opacity: 0; margin-top: 0;
}
.svc-meta > .svc-meta-inner { overflow: hidden; min-height: 0; }
.svc-detail:hover .svc-meta,
.svc-detail:focus-within .svc-meta { grid-template-rows: 1fr; opacity: 1; margin-top: 24px; }
.svc-meta-inner { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 16px; }
.svc-meta .row .label {
  display: block; font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 6px;
}
.svc-meta .row p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.svc-meta .row .includes { display: flex; flex-wrap: wrap; gap: 7px; }
.svc-meta .row .includes span {
  font-size: 13px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 4px 12px;
}
/* a small hint that there's more on hover */
.svc-hint {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2);
  transition: opacity .3s ease;
}
.svc-hint::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.svc-detail:hover .svc-hint, .svc-detail:focus-within .svc-hint { opacity: 0; }
/* on touch devices, no hover: show the panel always, hide the hint */
@media (hover: none) {
  .svc-meta { grid-template-rows: 1fr; opacity: 1; margin-top: 24px; }
  .svc-hint { display: none; }
}

/* ---- variant: everything grouped into one panel on the right ---- */
/* one bordered card: feature bullets on top, divider, then For who / Includes */
.svc-detail--v2 .svc-panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 34px 32px; align-self: start;
}
.svc-detail--v2 .svc-panel .svc-list { gap: 16px; }
.svc-detail--v2 .svc-panel .svc-list li { font-size: 15px; }
/* divider + meta block below the bullets */
.svc-panel-meta {
  margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line);
  display: grid; gap: 22px;
}
/* when the meta block is the only content (bullets removed), no top divider */
.svc-panel-meta--top { margin-top: 0; padding-top: 0; border-top: 0; }

/* small "For who?" line under the tags on featured cards (which keep the dark box) */
.svc-forwho { margin-top: 24px; }
.svc-forwho .label {
  display: block; font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 8px;
}
.svc-forwho p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.svc-panel-meta .row .label {
  display: block; font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 8px;
}
.svc-panel-meta .row p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.svc-panel-meta .row .includes { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-panel-meta .row .includes span {
  font-size: 13px; color: var(--ink); background: var(--mist);
  border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px;
}
.svc-detail.featured .card-hi {
  background: var(--ink); color: var(--paper); border-radius: var(--r); padding: 34px 32px;
}
.svc-detail.featured .card-hi h3 { color: var(--paper); font-size: 20px; margin-bottom: 8px; }
.svc-detail.featured .card-hi p { color: rgba(255,255,255,0.72); font-size: 15px; }
.svc-detail.featured .card-hi .svc-list li { color: var(--paper); }
.svc-detail.featured .card-hi .svc-list li span { color: rgba(255,255,255,0.66); }

/* =========================================================
   PORTFOLIO PAGE
   ========================================================= */
.cat { padding: 80px 0; border-top: 1px solid var(--line); }
.cat:first-of-type { border-top: 0; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.cat-head h2 { font-size: clamp(26px, 3vw, 40px); }
.cat-head .kk { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--ink-2); }
.cat-head p { color: var(--ink-2); font-size: 16px; max-width: 560px; margin-top: 10px; }

/* project cards (template placeholders) */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.proj {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 26px 24px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.proj:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.07); border-color: var(--line-2); }
.proj .tagrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.proj .type { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--signal); letter-spacing: .5px; }
.proj .status { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 3px 9px; }
.proj h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.proj p { font-size: 14px; color: var(--ink-2); }
.proj .stack { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.proj .stack span { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); background: var(--mist); border-radius: 5px; padding: 4px 9px; }

/* case-study cards — title-led portfolio entries */
.case {
  display: flex; flex-direction: column; position: relative;
  padding-top: 28px; overflow: hidden;
}
/* accent top strip */
.case::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--signal); opacity: .85;
}
/* project label row: glyph + client/project name */
.case .plabel {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.case .plabel .glyph {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--signal-soft); color: var(--signal);
  font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 600;
}
.case .plabel .client {
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-2); letter-spacing: .3px;
}
/* title leads, larger than default .proj h3 */
.case h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
.case > p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
/* small result badge — the outcome, compact and scannable */
.case .result {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin: 16px 0 2px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--line-2); border-radius: 100px;
  font-size: 13px; color: var(--ink); background: var(--paper);
}
.case .result::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); flex: none;
}
.case .result b { font-weight: 600; }
.case .stack { margin-top: auto; padding-top: 18px; }
.case .proof {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--signal);
  text-decoration: none; letter-spacing: .3px;
}
.case .proof::after { content: '\2197'; font-size: 13px; }
.case a.proof:hover { text-decoration: underline; }
/* status badge tweaks for case cards */
.case .status[data-s="live"], .case .status[data-s="shipped"] { color: var(--signal); border-color: var(--signal); }

@media (max-width: 900px) {
  .founders, .people, .stats, .values, .proj-grid, .shot-grid { grid-template-columns: 1fr 1fr; }
  .founders { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 32px; }
  .svc-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .people, .stats, .values, .proj-grid, .shot-grid { grid-template-columns: 1fr; }
  .founders-photos img { width: 62%; }
}

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   LEGAL PAGES (privacy / terms)
   ========================================================= */
.legal { max-width: 780px; margin: 0 auto; }
.legal-updated { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-2); margin-bottom: 40px; }
.legal h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 40px 0 14px; letter-spacing: -0.01em; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.legal p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
.legal p b { color: var(--ink); }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin-bottom: 8px; }
.legal a { color: var(--signal); font-weight: 600; }
.legal .legal-note { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; margin: 24px 0; }
.legal .legal-note p { margin: 0; font-size: 14px; }

/* =========================================================
   LEAK AUDIT TOOL (audit.html)
   ========================================================= */
.audit { max-width: 760px; margin: 0 auto; }
/* sticky progress bar */
.audit-bar {
  position: sticky; top: 76px; z-index: 5; background: var(--paper);
  display: flex; align-items: center; gap: 16px; padding: 14px 0; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.audit-progress { flex: 1; height: 8px; background: var(--mist); border-radius: 100px; overflow: hidden; }
.audit-progress-fill { display: block; height: 100%; width: 0; background: var(--signal); border-radius: 100px; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.audit-count { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.audit-count b { color: var(--signal); font-weight: 700; }
/* question cards */
.audit-questions { display: grid; gap: 14px; }
.audit-q {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: start;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.audit-q.is-answered { border-color: var(--line-2); }
.audit-q-num {
  grid-row: 1 / 3; font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 800;
  color: var(--signal); opacity: .85; line-height: 1;
}
.audit-q-text { font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.45; margin: 0; }
.audit-q-opts { display: flex; gap: 10px; margin-top: 6px; }
.audit-opt {
  cursor: pointer; border: 1px solid var(--line-2); background: #fff; border-radius: 100px;
  padding: 8px 24px; font-size: 15px; font-weight: 600; color: var(--ink-2); font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.audit-opt:hover { border-color: var(--ink-2); color: var(--ink); }
.audit-opt.is-picked { background: var(--signal); border-color: var(--signal); color: #fff; }
/* result */
.audit-result { margin-top: 30px; animation: planIn .4s cubic-bezier(.2,.8,.2,1); }
.audit-result[hidden] { display: none; }
.audit-result-tag { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); }
.audit-score-big { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 12px; }
.audit-score-big b { font-size: clamp(48px, 7vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--signal); }
.audit-score-big span { font-size: 16px; color: var(--ink-2); }
.audit-verdict { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--ink); font-weight: 500; margin: 0 0 26px; }
/* per-area breakdown */
.audit-areas { display: grid; gap: 16px; margin-bottom: 30px; }
.audit-area-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.audit-area-top b { font-size: 16px; font-weight: 600; color: var(--ink); }
.audit-area-top span { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-2); }
.audit-area.is-weak .audit-area-top span { color: var(--signal); font-weight: 700; }
.audit-area-bar { height: 8px; background: var(--mist); border-radius: 100px; overflow: hidden; }
.audit-area-bar span { display: block; height: 100%; background: var(--signal); border-radius: 100px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
/* recommendation */
.audit-rec {
  background: var(--ink); color: var(--paper); border-radius: var(--r); padding: 30px 30px;
  margin-bottom: 26px;
}
.audit-rec-tag { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); }
.audit-rec b { display: block; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 10px; color: var(--paper); }
.audit-rec p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0 0 20px; }
.audit-rec .btn-primary { background: var(--paper); color: var(--ink); }
/* email capture */
.audit-email { border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; margin-bottom: 22px; background: var(--mist); }
.audit-email > p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0 0 16px; }
.audit-email > p b { color: var(--ink); }
.audit-email-form { display: flex; gap: 10px; flex-wrap: wrap; }
.audit-email-form input {
  flex: 1; min-width: 220px; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line-2); background: #fff; font-size: 15px; font-family: inherit;
}
.audit-email-form input:focus { outline: none; border-color: var(--signal); }
.audit-email-form .btn-primary { flex: none; }
.audit-email-done { font-size: 14px; color: #157347; margin: 0; }
.audit-email-done b { color: var(--ink-2); font-weight: 400; font-size: 13px; }
/* final cta */
.audit-cta-final { text-align: center; display: grid; gap: 14px; justify-items: center; }
.audit-cta-final p { font-size: 15px; color: var(--ink-2); margin: 0; }
.audit-restart { margin-top: 4px; }
@media (max-width: 560px) {
  .audit-bar { top: 64px; }
  .audit-q { padding: 18px 18px; }
}

/* featured free-tool banner (blog page) */
.tool-banner {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  background: var(--ink); color: var(--paper); border-radius: 22px;
  padding: clamp(30px, 4vw, 44px); position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.tool-banner::before {
  content: ''; position: absolute; top: -40%; right: -5%; width: 55%; height: 130%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,77,28,0.2), transparent 70%);
}
.tool-banner:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0,0,0,0.25); }
.tool-banner-copy { position: relative; }
.tool-banner-copy .eyebrow { color: var(--signal); }
.tool-banner-copy h2 { color: var(--paper); margin: 12px 0 10px; }
.tool-banner-copy p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 0 18px; }
.tool-banner-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--signal); }
.tool-banner-visual { position: relative; }
.tool-banner-score {
  width: 130px; height: 130px; border-radius: 50%; border: 2px dashed rgba(255,77,28,0.5);
  display: grid; place-items: center; text-align: center;
}
.tool-banner-score b { font-size: 44px; font-weight: 800; color: var(--signal); line-height: 1; }
.tool-banner-score span { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
@media (max-width: 640px) { .tool-banner { grid-template-columns: 1fr; } .tool-banner-visual { display: none; } }

/* audit context step (business type + size, before the questions) */
.audit-context[hidden] { display: none; }
.audit-context-intro { font-size: 16px; color: var(--ink-2); line-height: 1.55; margin: 0 0 26px; }
.audit-ctx-group { margin-bottom: 26px; }
.audit-ctx-label { display: block; font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal); margin-bottom: 12px; }
.audit-ctx-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.audit-chip {
  cursor: pointer; border: 1px solid var(--line-2); background: #fff; border-radius: 100px;
  padding: 10px 20px; font-size: 15px; font-weight: 600; color: var(--ink-2); font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.audit-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.audit-chip.is-picked { background: var(--signal); border-color: var(--signal); color: #fff; }
[data-audit-start] { margin-top: 6px; }
[data-audit-start][disabled] { opacity: .45; cursor: not-allowed; }
[data-audit-bar][hidden], [data-audit-questions][hidden] { display: none; }