/* ============================================================
   Rise Local — styles
   Sections in order: tokens · base · layout · header · buttons ·
   hero · marquee · services · how · work · pricing · why ·
   testimonials · faq · cta · footer · reveal · responsive
   ============================================================ */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
/* Grain / paper texture for depth — sits above bg, below content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .site-header, .site-footer { position: relative; z-index: 1; }

/* Scroll-progress bar at top of viewport */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  z-index: 100;
  transition: width 0.12s ease-out;
  pointer-events: none;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Tokens ---------- */
:root {
  --bg: #f4f1e8;
  --bg-soft: #e2dcc6;
  --bg-card: #ffffff;
  --ink: #1c2e1f;
  --ink-soft: #3a4d3d;
  --muted: #6a7a6c;
  --accent: #6b8e23;
  --accent-dark: #4a6618;
  --accent-soft: rgba(107, 142, 35, 0.12);
  --line: #d4ceb8;
  --line-soft: #ddd6c0;
  --shadow-sm: 0 1px 2px rgba(28, 46, 31, 0.05), 0 2px 6px rgba(28, 46, 31, 0.05);
  --shadow-md: 0 4px 12px rgba(28, 46, 31, 0.07), 0 12px 32px rgba(28, 46, 31, 0.07);
  --shadow-lg: 0 8px 24px rgba(28, 46, 31, 0.09), 0 24px 64px rgba(28, 46, 31, 0.09);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --max: 1180px;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .section-eyebrow { margin-bottom: 12px; }
.section-head .section-title  { margin-bottom: 14px; }
.section-sub {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(244, 241, 232, 0.85);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo-mark {
  color: var(--accent);
  width: 26px;
  height: 26px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav > a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav > a:hover { color: var(--ink); }
/* ---------- Services dropdown ----------
   Desktop: hover/focus-within reveals. Mobile: expands in place inside the stacked nav.
   Deliberately SHORT — the position is narrow-on-outcome, broad-on-how, so this lists a
   few outcomes, never a full service menu. A long dropdown makes breadth the lead. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  transition: color .15s ease;
}
.nav-drop > a:hover { color: var(--ink); }
.nav-drop__chev { width: 11px; height: 11px; transition: transform .18s ease; }
.nav-drop:hover .nav-drop__chev, .nav-drop:focus-within .nav-drop__chev { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute; top: calc(100% + 14px); left: -18px;
  min-width: 244px; padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(28,46,31,.08), 0 18px 44px rgba(28,46,31,.12);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* keeps the pointer from falling through the gap between trigger and menu */
.nav-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nav-drop__menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  transition: background .13s ease, color .13s ease;
}
.nav-drop__menu a:hover { background: var(--bg); color: var(--ink); }
.nav-drop__menu .nav-drop__all {
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--accent-dark); font-weight: 600;
}

.nav-phone {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.nav-phone svg { color: var(--accent); }
.nav-cta {
  background: var(--ink);
  color: var(--bg) !important;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.nav-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  max-width: 100%;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--accent-dark);
  color: var(--bg);
  box-shadow: var(--shadow-md);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink); }
.btn-full { width: 100%; }
/* Phones: long-text buttons wrap inside their box instead of forcing horizontal scroll */
@media (max-width: 600px) {
  .btn { white-space: normal; }
}

/* ---------- Typography helpers ---------- */
.eyebrow,
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: pulse 2s ease-in-out infinite;
}
.eyebrow-light { color: var(--accent); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
  50% { box-shadow: 0 0 0 8px rgba(107, 142, 35, 0.05); }
}
.section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  padding: 116px 0 80px;
  margin-top: -72px;
  position: relative;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(16, 24, 16, 0.38) 0%, rgba(13, 21, 14, 0.80) 100%),
    radial-gradient(circle at 84% 14%, rgba(107, 142, 35, 0.30) 0%, rgba(107, 142, 35, 0) 55%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(28,46,31,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,46,31,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  opacity: 0.5;
}
.hero-inner { position: relative; z-index: 2; }
.hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(44px, 7vw, 86px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.hero-title .accent { color: var(--accent); }
.hero-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: heroLineReveal 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero-line:nth-child(1) { animation-delay: 0.15s; }
.hero-line:nth-child(2) { animation-delay: 0.3s; }
.hero-line:nth-child(3) { animation-delay: 0.45s; }
@keyframes heroLineReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Logo mark SVG draw-in on load */
.logo-mark path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: logoDraw 1.2s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
.logo-mark path:nth-child(2) { animation-delay: 0.3s; }
@keyframes logoDraw {
  to { stroke-dashoffset: 0; }
}

/* Cursor spotlight on dark sections */
.testimonials, .cta-band {
  position: relative;
}
.testimonials::after, .cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(107, 142, 35, 0.18),
                              transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
.testimonials.spotlight-on::after,
.cta-band.spotlight-on::after { opacity: 1; }
.testimonials > .container, .cta-band > .container { position: relative; z-index: 2; }

/* Magnetic CTA — JS sets --mag-x / --mag-y as deltas */
.btn-primary {
  position: relative;
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.18s ease;
}
.hero-motto {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: -6px 0 26px;
}
.hero-sub {
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 0 36px;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  max-width: 640px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.hero-trust li {
  font-size: 14px;
  color: var(--ink-soft);
}
.hero-trust li { text-wrap: pretty; }
.hero-trust strong {
  display: block;
  text-wrap: nowrap;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--ink);
  color: var(--bg);
  padding: 18px 0;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.marquee-track .sep {
  color: var(--accent);
  font-size: 10px;
  opacity: 0.9;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 22px)); }   /* 22px = half the 44px gap */
}

/* ---------- Work: FEATURED + 2x2 ----------
   The horizontal rail is retired. At 1,140px only 2.33 cards fit, so a card was always
   sliced mid-word at the container edge — it read as broken rather than scrollable, and
   five equal-weight cards gave the eye no focal point.
   5 items map to 1 + 4 with no orphan BY CONSTRUCTION, which is the actual fix.
   The featured client reads its story inline (no flip) — that asymmetry IS the hierarchy. */
/* The featured card is the SAME component as the 2x2, just full width.
   Nothing is cropped because the box aspect equals the source aspect (both 16:10),
   so at 1140px the shot renders 1140x712 — the whole site, centred, at size. */
.proof-card--lg { margin-bottom: 22px; }
.proof-card--lg .proof-cap { padding: 20px 26px; }
.proof-card--lg .proof-cap h3 { font-size: 26px; }
.proof-card--lg .proof-tag { font-size: 12px; }
.proof-card--lg .proof-story { font-size: 16.5px; line-height: 1.65; }
.proof-card--lg .proof-card__back { padding: 34px 38px 28px; }

.work-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

/* Card defect fixes (independent of layout):
   the location tag wrapped to 2 lines on the longest name, which knocked every title
   off its baseline; and the flip-back face could overflow into an inner scrollbar. */
.proof-cap .proof-tag {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.proof-back-scroll { overflow: hidden; }

@media (max-width: 900px) {
  .work-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Service grid (PPL-Labs-style 6-up) ----------
   Uniform 3-across cards, each led by a tinted icon tile and exactly three check bullets.
   No paragraphs by design — the whole point is that it's scannable in one pass.
   Hues are drawn from the site's own earth palette (olive / clay / slate / gold / sage / plum)
   so the cards read colourful without leaving the brand. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Icon tile — bumped 46->54px with a 28px duotone glyph. The first pass used 2px
   line icons at 23px and read thin and generic next to a template-pack illustration.
   Duotone (a filled shape at low alpha + a solid foreground) carries weight at small
   sizes without needing external image assets, so it stays CSP-safe and inline. */
.svc-ico {
  width: 62px; height: 62px;
  border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.svc-ico svg { width: 28px; height: 28px; }
.svc-ico .duo-bg { fill: currentColor; opacity: .22; }
.svc-ico .duo-fg { fill: currentColor; }
.svc-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; line-height: 1.2; font-weight: 600;
  letter-spacing: -.3px; color: var(--ink);
  margin: 0 0 16px;
}
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.svc-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink-soft);
}
.svc-list li::before {
  content: "";
  flex: 0 0 16px; height: 16px; margin-top: 2px;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/11px no-repeat,
           linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/11px no-repeat,
               linear-gradient(#000,#000);
          mask-composite: exclude;
}
/* per-card hue: tints the icon tile and the check ring together */
.svc-card--olive  { --svc: #6b8e23; } .svc-card--olive  .svc-list li::before { color: #6b8e23; }
.svc-card--clay   { --svc: #b5541f; } .svc-card--clay   .svc-list li::before { color: #b5541f; }
.svc-card--slate  { --svc: #3f6478; } .svc-card--slate  .svc-list li::before { color: #3f6478; }
.svc-card--gold   { --svc: #a4791b; } .svc-card--gold   .svc-list li::before { color: #a4791b; }
.svc-card--sage   { --svc: #4a7c59; } .svc-card--sage   .svc-list li::before { color: #4a7c59; }
.svc-card--plum   { --svc: #75405e; } .svc-card--plum   .svc-list li::before { color: #75405e; }
.svc-ico { background: color-mix(in srgb, var(--svc) 13%, #fff); color: var(--svc); }
.svc-foot { text-align: center; margin-top: 34px; }
.svc-foot .svc-foot-note { font-size: 15px; color: var(--muted); margin: 14px 0 0; }

@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- SEAMLESS PAGE (2026-08-04) ----------
   Steve's diagnosis, and he was right where I wasn't: the page reads as separate slabs
   rather than one continuous page. MEASURED — ppllabs: 3 backgrounds across 8 bands,
   ZERO borders. Ours: 5 backgrounds across 11 sections plus FOUR 1px hairlines
   (marquee, trust strip, scorecard, about) literally drawing lines between them.

   The fix is subtraction: kill every seam line, and let the light sections share ONE
   background so they flow. Dark bands stay, but only as deliberate punctuation
   (hero, the word strip, exclusivity, contact) — the same way ppllabs uses its single
   dark CTA. Nothing here changes layout or copy; it only removes the dividing lines. */
main > section { border-top: none !important; border-bottom: none !important; }

/* one shared light ground — no more cream/soft/cream stepping.
   .trust-marquee had its own near-cream (#fbf9f3) which still read as a separate slab
   against the page's #f4f1e8; both are now literally the same value. */
#services, #work, #how, #pricing, #about, #resources,
.trust-marquee, .services, .how, .work, .resources { background: var(--bg) !important; }

/* the scorecard band kept its own tint AND two borders; softened to a whisper */
#scorecard { background: linear-gradient(180deg, #f1f4ea, var(--bg)) !important; }

/* The TIGHT-ATOMS trial (colour/radius/shadow collapse) was removed 2026-08-04.
   Steve compared it against an untouched page and preferred untouched. The real issue
   turned out to be section SEAMS, not atom consistency — see the seamless block above. */

/* ---------- PAGE FURNITURE ----------
   Built in CSS rather than bought as an illustration pack (Steve's call 2026-08-04).
   The reference site fills its pages with 94px multi-colour template SVGs; these do the
   same visual job at the same scale, stay in the olive/cream palette, and can't end up
   looking like anyone else's Webflow theme. */

/* XL icon tile — matches the reference's 94px footprint (ours was 54px and read thin). */
.svc-card--xl .svc-ico { width: 94px; height: 94px; border-radius: 24px; margin-bottom: 24px; }
.svc-card--xl .svc-ico svg { width: 48px; height: 48px; }
.svc-card--xl { padding: 34px 30px 32px; border-radius: 24px; }
.svc-card--xl h3 { font-size: 22px; margin-bottom: 14px; }

/* Brand-logo tile — for cards that name an actual platform (Google, Meta). A generic
   duotone glyph on a card headed "Google Search" is weaker than the mark everyone
   already recognises. The logo carries its own colours, so the tile stays neutral.
   NOTE: these are inline SVG (CSP blocks external images) and are used descriptively
   to name the platforms the work runs on — never as a partner or certification badge. */
.svc-ico--brand { background: #fff; border: 1px solid var(--line); }
.svc-ico--brand svg { width: 42px; height: 42px; }
.svc-ico--brand.pair { gap: 8px; }
.svc-ico--brand.pair svg { width: 30px; height: 30px; }

/* Alternating tinted bands so sections have rhythm instead of one flat cream run. */
.band-soft { background: var(--bg-soft); }
.band-cream { background: #faf8f1; }
.band-ink { background: var(--ink); color: #eef0e6; }
.band-ink .section-title, .band-ink h2, .band-ink h3 { color: #f6f3e8; }
.band-ink .section-sub, .band-ink p { color: rgba(246,243,232,.78); }
.band-ink .section-eyebrow { color: var(--accent); }

/* Stat strip. Deliberately NOT the reference's "Hundreds / Thousands / Millions" —
   every figure here is a real, checkable term of the deal. */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stat-strip > div {
  padding: 30px 22px; text-align: center;
  border-right: 1px solid var(--line-soft);
}
.stat-strip > div:last-child { border-right: none; }
.stat-strip .stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 4vw, 40px); font-weight: 700; line-height: 1;
  letter-spacing: -1px; color: var(--accent-dark);
}
.stat-strip .stat-lbl {
  margin-top: 9px; font-size: 13.5px; line-height: 1.4; color: var(--muted);
}

/* Before / after — a real comparison panel, using the two captures we already hold. */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ba-panel {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.ba-panel img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top left; }
.ba-tag {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.ba-tag--before { color: #a2482c; }
.ba-tag--after  { color: var(--accent-dark); }
.ba-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

@media (max-width: 860px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip > div:nth-child(2) { border-right: none; }
  .stat-strip > div:nth-child(1), .stat-strip > div:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
  .ba-grid { grid-template-columns: 1fr; }
}

/* ---------- Trust strip (client names, scrolling) ----------
   Light-background sibling of .marquee, used for the "businesses I've built for" row.
   Same keyframe, slower (names need longer to read than two-word phrases).
   Only used by the homepage trust strip; adding it here is inert for any page without it. */
.trust-marquee {
  background: #fbf9f3;
  border-bottom: 1px solid #e4dcc9;
  padding: 26px 0;
  overflow: hidden;
}
.trust-marquee__label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #8a8570;
  text-align: center;
  margin: 0 0 16px;
}
/* Two identical sets side by side. Total = 2*set + gap, so a shift of exactly
   (set + gap) = calc(-50% - halfGap) lands set 2 where set 1 began. Exact at any content
   width — unlike translateX(-50%) on a single list, where flex puts 15 gaps between 16
   items, making half the track one copy plus only HALF a gap (a 1px stutter every cycle),
   and where 2 copies of 1413px ran dry on any viewport wider than ~1412px. */
.trust-marquee__track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: marquee 70s linear infinite;
  will-change: transform;
}
.trust-marquee__set {
  display: flex;
  align-items: center;
  gap: 44px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  list-style: none;
}
.trust-marquee__track li {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: #4a5b4d;
  list-style: none;
}
.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .trust-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 14px 30px; }
  .trust-marquee__set { flex-wrap: wrap; justify-content: center; gap: 14px 30px; }
  .trust-marquee__set:nth-child(2), .trust-marquee__set [aria-hidden="true"] { display: none; }
}

/* ---------- Services ---------- */
.services { padding: 96px 0; }
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.card p {
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.card-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--ink-soft);
}
.card-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- How it works ---------- */
.how {
  background: var(--bg-soft);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.how::before {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -160px;
  width: 600px;
  height: 600px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%231c2e1f' stroke-width='1.2'%3E%3Cpath d='M-50 60 Q150 30 300 80 T650 60'/%3E%3Cpath d='M-50 110 Q150 80 300 130 T650 110'/%3E%3Cpath d='M-50 160 Q150 130 300 180 T650 160'/%3E%3Cpath d='M-50 210 Q150 180 300 230 T650 210'/%3E%3Cpath d='M-50 260 Q150 230 300 280 T650 260'/%3E%3Cpath d='M-50 310 Q150 280 300 330 T650 310'/%3E%3Cpath d='M-50 360 Q150 330 300 380 T650 360'/%3E%3Cpath d='M-50 410 Q150 380 300 430 T650 410'/%3E%3Cpath d='M-50 460 Q150 430 300 480 T650 460'/%3E%3Cpath d='M-50 510 Q150 480 300 530 T650 510'/%3E%3Cpath d='M-50 560 Q150 530 300 580 T650 560'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  transform: rotate(180deg);
}
.how > .container { position: relative; z-index: 1; }
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
}
.step {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(28, 46, 31, 0.2);
}
.step h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.step p {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------- Featured work ---------- */
.work { padding: 96px 0; }
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* See more button */
.work-more-wrap {
  text-align: center;
  margin-top: 32px;
}

/* Gallery grid */
.work-gallery { margin-top: 32px; }
.work-gallery-note {
  text-align: center;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}
.work-gallery.hidden { display: none; }
.work-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-card {
  border-radius: var(--radius-sm);
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.gc-icon { font-size: 2rem; display: block; margin-bottom: 10px; line-height: 1; }
.gallery-card h4 { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.gallery-card p { font-size: 0.82rem; line-height: 1.5; }

.gc-restaurant { background: #faf3e0; color: #5a3a18; }
.gc-restaurant p { color: #8a7050; }
.gc-tattoo { background: #1a1a1a; color: #f0f0f0; }
.gc-tattoo p { color: #999; }
.gc-butcher { background: #f5ece4; color: #4a2a18; }
.gc-butcher p { color: #8a6a50; }
.gc-landscape { background: #eaf2e8; color: #2a4a2e; }
.gc-landscape p { color: #5a7a5e; }
.gc-cafe { background: #f8f0e0; color: #3b2314; }
.gc-cafe p { color: #8a7058; }
.gc-massage { background: #f0ede6; color: #3d5a4a; }
.gc-massage p { color: #7a9a88; }

@media (max-width: 720px) {
  .work-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .work-gallery-grid { grid-template-columns: 1fr; }
}
.work-grid:has(.work-card:only-child) {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
}
.work-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.work-thumb {
  aspect-ratio: 16 / 10;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 18px;
  background: var(--bg-soft);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.mockup {
  position: absolute;
  top: 22%;
  left: 6%;
  right: 6%;
  width: 88%;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(28, 46, 31, 0.2));
  border-radius: 10px;
  transition: transform 0.3s ease;
}
.work-card:hover .mockup {
  transform: translateY(-3px) scale(1.02);
}
.site-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.site-preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform-origin: 0 0;
  border: none;
  pointer-events: none;
}
.site-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.work-card:hover .site-preview img {
  transform: scale(1.02);
  transition: transform 0.4s ease;
}
.work-tag {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.work-body { padding: 24px; }
.work-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.work-body p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 15px;
}
.work-stat {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.work-stat strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  margin-right: 6px;
}
.work-location {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.work-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.work-link:hover { border-bottom-color: var(--accent); }
.work-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 12px; }
.work-links .work-link { margin-top: 0; }
.work-link-sep { color: var(--ink-soft); opacity: 0.5; font-size: 13px; }

/* ---------- Case studies (proof) ---------- */
.case-studies { padding: 96px 0; background: var(--bg-soft); }
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1020px;
  margin: 0 auto;
}
@media (min-width: 880px) { .case-grid { grid-template-columns: 1fr 1fr; } }
.case-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 12px;
}
.case-card p { margin-bottom: 0; }
.case-card .case-tag { margin-bottom: 12px; }
.case-outcome {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.case-outcome strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
  margin-right: 6px;
}

/* ---------- Exclusivity (the moat) ---------- */
.exclusivity {
  padding: 110px 0;
  background: var(--ink);
  color: #f0ede4;
  position: relative;
  overflow: hidden;
}
.exclusivity::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(107, 142, 35, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(107, 142, 35, 0.10) 0%, transparent 55%);
  pointer-events: none;
}
.exclusivity-inner { position: relative; z-index: 1; }

.exclusivity-head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.excl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 28px;
}
.excl-shield { width: 16px; height: 16px; color: var(--accent); }
.excl-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: #f6f3e8;
}
.excl-accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 600;
}
.excl-lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(240, 237, 228, 0.78);
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.excl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 auto 56px;
  max-width: 1080px;
}
.excl-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.excl-card:hover {
  border-color: rgba(107, 142, 35, 0.55);
  background: rgba(107, 142, 35, 0.07);
  transform: translateY(-3px);
}
.excl-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.excl-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 12px;
  color: #f6f3e8;
  letter-spacing: -0.01em;
}
.excl-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(240, 237, 228, 0.72);
}

.excl-why {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 28px 32px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.excl-why p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(240, 237, 228, 0.85);
}
.excl-why strong { color: #f6f3e8; }
.excl-why em { color: var(--accent); font-style: italic; }

/* The compounding / network block */
.excl-flywheel {
  max-width: 920px;
  margin: 48px auto 48px;
  padding: 44px 44px 40px;
  background: linear-gradient(135deg, rgba(107, 142, 35, 0.13) 0%, rgba(107, 142, 35, 0.05) 60%, transparent 100%);
  border: 1px solid rgba(107, 142, 35, 0.32);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.excl-flywheel::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(107, 142, 35, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.excl-flywheel-head {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
}
.excl-flywheel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 16px;
}
.excl-flywheel-eyebrow svg { color: var(--accent); }
.excl-flywheel h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: #f6f3e8;
}
.excl-flywheel h3 em {
  color: var(--accent);
  font-style: italic;
  font-weight: 600;
}
.excl-flywheel-body {
  position: relative;
  z-index: 1;
}
.excl-flywheel-body p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(240, 237, 228, 0.82);
  margin: 0 0 18px;
}
.excl-flywheel-kicker {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 17px !important;
  color: #f0ede4 !important;
}
.excl-flywheel-kicker em {
  color: var(--accent);
  font-style: italic;
  font-weight: 600;
}

.excl-cta {
  text-align: center;
}
.excl-cta .btn-primary {
  font-size: 16px;
  padding: 16px 32px;
}
.excl-cta-sub {
  margin: 16px 0 0;
  font-size: 14px;
  color: rgba(240, 237, 228, 0.55);
}

/* Pricing card exclusivity badge */
.price-list li.price-excl {
  list-style: none;
  margin: 0 -4px 14px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(107, 142, 35, 0.28);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-list li.price-excl::before { content: none; }
.price-excl .excl-mark {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.price-excl strong { color: var(--ink); font-weight: 700; }

/* ---------- Pricing ---------- */
.pricing {
  padding: 96px 0;
  background: var(--bg-soft);
}
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.price-card-featured {
  border-color: var(--accent);
  border-width: 2px;
  background:
    linear-gradient(180deg, rgba(107,142,35,0.06) 0%, rgba(107,142,35,0) 30%),
    var(--bg-card);
}
.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;                 /* sit above the .price-card::after highlight overlay */
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.price-from {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.price-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 4px;
}
.price-range {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 6px;
}
.price-plus {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
}
.price-meta {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--muted);
}
.price-list {
  list-style: none;
  padding: 0 0 24px;
  margin: 0;
  flex: 1;
}
.price-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 15px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.price-list li:last-child { border-bottom: 0; }
.price-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--accent);
  font-weight: 700;
}

.price-reassurance {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.price-reassurance h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.price-nevers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  text-align: left;
}
.price-nevers li {
  font-size: 15px;
  color: var(--ink-soft);
}
.never-x {
  display: inline-block;
  width: 22px;
  color: #a83a2a;
  font-weight: 700;
}
@media (min-width: 720px) {
  .price-nevers { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
}

/* Startup band — same look as the reassurance card, accent border to stand apart */
.price-startup {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #e8632e);
  border-radius: var(--radius);
  text-align: left;
}
.price-startup h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.price-startup p {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  line-height: 1.6;
}

/* ---------- Estimator (quote tool) ---------- */
.estimator { padding: 96px 0; background: var(--bg); }
.estimator-tool {
  max-width: 760px;
  margin: 0 auto;
}
.estimator-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}
.est-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  transition: all 0.25s ease;
}
.est-step.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.est-step.done {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.est-line {
  width: 36px;
  height: 1.5px;
  background: var(--line);
  transition: background 0.25s ease;
}
.est-line.done { background: var(--accent); }

.estimator-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: 0 4px 18px rgba(28,46,31,0.05);
  position: relative;
  overflow: hidden;
}
.est-panel { display: block; }
.est-panel.hidden { display: none; }
.est-question {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.est-hint {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 14px;
}
.est-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.est-option {
  text-align: left;
  padding: 14px 18px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.est-option:hover {
  border-color: var(--accent);
  background: var(--bg-card);
  transform: translateY(-1px);
}
.est-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.est-option.selected::after {
  content: '✓';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-dark);
  font-weight: 700;
}
.est-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.est-actions .btn { min-width: 0; }

/* Result */
.est-result {
  text-align: center;
}
.est-result-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 6px;
}
.est-result-tier {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}
.est-result-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.est-result-onetime {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.1;
}
.est-result-plus {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink-soft);
}
.est-result-timeline {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.est-result-timeline strong {
  color: var(--ink);
  font-weight: 700;
}
.est-result-breakdown {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.est-result-breakdown h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
}
.est-breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.est-breakdown-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}
.est-breakdown-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.est-result-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.est-disclaimer {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0.85;
}

.est-footer-note {
  text-align: center;
  margin: 24px auto 0;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 520px;
}
.est-footer-icon {
  display: inline-block;
  margin-right: 4px;
}

@media (min-width: 720px) {
  .est-options { grid-template-columns: 1fr 1fr; }
}

/* ---------- Quote modal (post-estimator) ---------- */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.quote-modal[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.quote-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 46, 31, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.quote-modal-card {
  position: relative;
  background: var(--bg-card);
  border-radius: 16px;
  padding: 36px 32px 28px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 25px 70px rgba(28, 46, 31, 0.35);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.quote-modal[data-state="open"] .quote-modal-card {
  transform: translateY(0) scale(1);
}
.quote-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.quote-modal-close:hover {
  background: var(--bg);
  color: var(--ink);
}
.quote-modal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px;
}
.quote-modal-card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.quote-modal-sub {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.quote-modal-summary {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.quote-modal-summary strong {
  color: var(--ink);
  font-weight: 700;
}
.quote-modal-summary .qm-tier {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.quote-modal-form .field {
  margin-bottom: 14px;
}
.quote-modal-form .field:last-of-type {
  margin-bottom: 18px;
}
.quote-modal-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
.quote-modal-form .field-opt {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 12px;
}
.quote-modal-form input,
.quote-modal-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.quote-modal-form input:focus,
.quote-modal-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.quote-modal-form textarea {
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
}
.quote-modal-form .form-status {
  margin: 10px 0 0;
  font-size: 13px;
  min-height: 18px;
}
.quote-modal-form .form-status.success { color: #4a6618; }
.quote-modal-form .form-status.error { color: #b3261e; }

@media (max-width: 480px) {
  .quote-modal { padding: 0; align-items: flex-end; }
  .quote-modal-card {
    border-radius: 16px 16px 0 0;
    padding: 28px 22px 22px;
    max-height: 92vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quote-modal, .quote-modal-card { transition: none !important; }
}

/* ---------- Why ---------- */
.why {
  padding: 96px 0;
}
.why-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.why-copy .section-title { max-width: 520px; }
.why-lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 0 28px;
}
.why-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.why-points li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.why-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  width: 36px;
}
.why-points h4 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
}
.why-points p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.why-points-inline {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
.why-points-inline .why-num {
  font-family: inherit;
  font-size: 16px;
  width: auto;
}

/* ---------- About ---------- */
.about {
  padding: 96px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
}
/* Topographic contour pattern — sits behind container, decorative */
.about::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -160px;
  width: 700px;
  height: 700px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%231c2e1f' stroke-width='1.2'%3E%3Cpath d='M-50 60 Q150 30 300 80 T650 60'/%3E%3Cpath d='M-50 110 Q150 80 300 130 T650 110'/%3E%3Cpath d='M-50 160 Q150 130 300 180 T650 160'/%3E%3Cpath d='M-50 210 Q150 180 300 230 T650 210'/%3E%3Cpath d='M-50 260 Q150 230 300 280 T650 260'/%3E%3Cpath d='M-50 310 Q150 280 300 330 T650 310'/%3E%3Cpath d='M-50 360 Q150 330 300 380 T650 360'/%3E%3Cpath d='M-50 410 Q150 380 300 430 T650 410'/%3E%3Cpath d='M-50 460 Q150 430 300 480 T650 460'/%3E%3Cpath d='M-50 510 Q150 480 300 530 T650 510'/%3E%3Cpath d='M-50 560 Q150 530 300 580 T650 560'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
}
.about > .container { position: relative; z-index: 1; }
.about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
.about-photo {
  text-align: center;
}
.photo-frame {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-md);
  max-width: 320px;
  margin: 0 auto;
  position: relative;
}
.photo-frame::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  pointer-events: none;
}
.photo-frame svg,
.photo-frame img {
  border-radius: 8px;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.photo-caption {
  margin-top: 18px;
}
.photo-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0;
  letter-spacing: -0.01em;
}
.photo-role {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.about-copy .section-eyebrow { margin-bottom: 12px; }
.about-copy .section-title { max-width: 420px; }
.about-lede {
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 20px;
  max-width: 540px;
  line-height: 1.4;
}
.about-lede em {
  color: var(--accent);
  font-style: italic;
}
.about-copy p {
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 540px;
}
.about-promise {
  margin-top: 24px !important;
  padding: 20px 22px;
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
}
.about-promise strong { color: var(--ink); }

.about-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 10px;
}

.about-personal {
  margin-top: 20px !important;
  font-size: 14px;
  color: var(--muted);
}
.about-personal em { font-style: italic; }

.about-signoff {
  margin-top: 28px !important;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Tilt cards — set up the 3D context */
.card, .work-card, .price-card, .post {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Resources / Blog ---------- */
.resources { padding: 96px 0; }
.posts-more-wrap { text-align: center; margin-top: 28px; }
.posts-extra { margin-top: 28px; }
.posts-extra .posts { justify-items: center; }
.posts-extra .post { width: 100%; }
.posts-extra.hidden { display: none; }
.posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.post {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.post:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.post-tag {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.post-time {
  font-size: 13px;
  color: var(--muted);
}
.post h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.post p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15px;
  flex: 1;
}
.post-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 1px;
  transition: gap 0.15s ease;
}
.post-link:hover {
  color: var(--accent-dark);
}

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--ink);
  color: var(--bg);
  padding: 96px 0;
}
.testimonials .section-title { color: var(--bg); }
.testimonials .section-eyebrow { color: var(--accent); }
.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.quote {
  margin: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
}
.quote::before {
  content: '"';
  position: absolute;
  top: 8px;
  left: 20px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
}
.quote blockquote {
  margin: 16px 0 22px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--bg);
  position: relative;
}
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quote-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--bg);
}
.quote-role {
  font-size: 14px;
  color: rgba(250, 248, 243, 0.6);
}

/* ---------- FAQ ---------- */
.faq {
  padding: 96px 0;
}
.faq-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.faq-copy .section-title { max-width: 380px; }
.faq-copy p {
  color: var(--ink-soft);
  margin-top: 0;
}
.faq-copy a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  padding: 18px 32px 18px 0;
  list-style: none;
  position: relative;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- CTA + Contact ---------- */
.cta-band {
  background: var(--ink);
  color: var(--bg);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -240px;
  right: -180px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(107, 142, 35, 0.3) 0%, rgba(107, 142, 35, 0) 60%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.cta-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--bg);
}
.cta-sub {
  font-size: 18px;
  color: rgba(250, 248, 243, 0.75);
  max-width: 460px;
  margin: 0 0 24px;
}
.cta-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cta-bullets li {
  font-size: 16px;
  color: var(--bg);
}
.cta-bullets li::first-letter { color: var(--accent); font-weight: 700; }
.contact-direct {
  font-size: 15px;
  color: rgba(250, 248, 243, 0.75);
  margin: 0;
  line-height: 1.9;
}
.contact-direct a {
  color: var(--bg);
  border-bottom: 1px solid var(--accent);
}
.contact-form {
  background: var(--bg-card);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-lg);
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ink);
}
.field-opt {
  color: var(--muted);
  font-weight: 400;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.18);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-status {
  margin: 14px 0 0;
  font-size: 14px;
  min-height: 1em;
}
.form-status.success { color: #2d6a31; }
.form-status.error { color: #a83a2a; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
  background: var(--bg);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.footer-brand .logo { margin-bottom: 12px; }
.footer-tag {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 320px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.footer-nav a:hover { color: var(--ink); }
.footer-portal {
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.footer-portal:hover { color: var(--accent-dark) !important; }
.footer-admin { opacity: 0.3; font-size: 12px !important; }
.footer-admin:hover { opacity: 0.7; }
.footer-meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.footer-address {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.footer-address strong { color: var(--ink); font-weight: 700; }
.footer-address a {
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--line);
}
.footer-address a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.footer-areas {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer-areas-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.footer-areas-list {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- Chatbot ---------- */
.chatbot {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  font-family: 'Inter', system-ui, sans-serif;
}
.chatbot-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(28,46,31,0.25), 0 2px 6px rgba(28,46,31,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease;
}
.chatbot-bubble:hover {
  transform: translateY(-3px) scale(1.05);
  background: var(--accent-dark);
}
.chatbot-bubble svg { width: 26px; height: 26px; transition: opacity 0.2s ease, transform 0.2s ease; }
.chatbot-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.chatbot[data-state="open"] .chatbot-icon-chat { opacity: 0; transform: rotate(90deg); }
.chatbot[data-state="open"] .chatbot-icon-close { opacity: 1; transform: rotate(0); }
.chatbot-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #d4827e;
  color: #fff;
  border: 2px solid var(--bg);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chatbot[data-state="open"] .chatbot-badge,
.chatbot[data-engaged="true"] .chatbot-badge { opacity: 0; transform: scale(0); }

.chatbot-panel {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(28,46,31,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.chatbot[data-state="open"] .chatbot-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chatbot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--ink);
  color: #f0ede4;
}
.chatbot-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.chatbot-avatar svg { width: 22px; height: 22px; }
.chatbot-titles { flex: 1; min-width: 0; }
.chatbot-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  letter-spacing: -0.01em;
}
.chatbot-status {
  font-size: 11px;
  margin: 2px 0 0;
  color: rgba(240,237,228,0.7);
  display: flex;
  align-items: center;
  gap: 5px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6bcf7f;
  display: inline-block;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,207,127,0.6); }
  50% { box-shadow: 0 0 0 4px rgba(107,207,127,0); }
}
.chatbot-close {
  background: transparent;
  border: none;
  color: rgba(240,237,228,0.7);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.chatbot-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.chatbot-body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  animation: chatMsgIn 0.28s ease;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.bot {
  align-self: flex-start;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg a { color: inherit; text-decoration: underline; }
.chat-msg.bot a { color: var(--accent-dark); }
.chat-msg strong { font-weight: 700; }
.chat-typing {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 12px 16px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 4px;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: var(--ink-soft);
  border-radius: 50%;
  animation: typingDot 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.chatbot-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 4px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.chat-quick-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-quick-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.chatbot-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.chatbot-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}
.chatbot-form input:focus {
  outline: none;
  border-color: var(--accent);
}
.chatbot-form button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.chatbot-form button:hover { background: var(--accent-dark); }
.chatbot-disclaimer {
  margin: 0;
  padding: 0 14px 10px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  background: var(--bg);
}

/* Teaser — the value-first nudge above the closed bubble */
.chatbot-teaser {
  position: absolute;
  bottom: 74px;
  right: 0;
  width: 290px;
  max-width: calc(100vw - 40px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  padding: 14px 34px 14px 16px;
  box-shadow: 0 14px 36px rgba(28,46,31,0.18);
  cursor: pointer;
  animation: chatMsgIn 0.35s ease;
}
.chatbot-teaser:hover { border-color: var(--accent); }
.chatbot-teaser-title {
  margin: 0 0 3px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.chatbot-teaser-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.chatbot-teaser-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}
.chatbot-teaser-close:hover { color: var(--ink); }
.chatbot[data-state="open"] .chatbot-teaser { display: none; }

/* Lead card — in-chat capture rendered on [[LEAD_FORM]] */
.chat-lead-card {
  align-self: flex-start;
  width: 100%;
  max-width: 96%;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 14px;
  animation: chatMsgIn 0.28s ease;
}
.chat-lead-card p {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.chat-lead-card input {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.chat-lead-card input:focus { outline: none; border-color: var(--accent); }
.chat-lead-card button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.chat-lead-card button:hover { background: var(--accent-dark); }
.chat-lead-card button:disabled { opacity: 0.6; cursor: default; }
.chat-lead-card .chat-lead-note {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  text-align: center;
}
.chat-lead-card .chat-lead-error {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: #b0524d;
}

@media (max-width: 480px) {
  .chatbot-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 100px);
    bottom: 76px;
  }
  .chatbot { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg, .chatbot-panel, .chatbot-icon-chat, .chatbot-icon-close, .chatbot-teaser { transition: none !important; animation: none !important; }
  .status-dot { animation: none !important; }
}

/* ---------- Blog post article ---------- */
.post-article {
  max-width: 740px;
  margin: 80px auto 72px;
  padding: 0 24px;
  position: relative;
}
.post-header {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.post-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}
.post-eyebrow a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 14px;
  padding-bottom: 1px;
}
.post-eyebrow a:hover { color: var(--accent); border-color: var(--accent); }
.post-eyebrow .post-tag {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 4px 10px;
  border-radius: 999px;
}

.post-tag-local {
  background: var(--ink) !important;
  color: #f0ede4 !important;
}
.post-featured {
  border-color: var(--accent);
  position: relative;
}
.post-featured::before {
  content: 'KF';
  position: absolute;
  top: -10px;
  right: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}
.post-header h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.post-deck {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.post-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.post-body p { margin: 0 0 22px; }
.post-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 48px 0 16px;
  color: var(--ink);
}
.post-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 32px 0 10px;
}
.post-body ul, .post-body ol {
  margin: 0 0 24px;
  padding-left: 20px;
}
.post-body li { margin-bottom: 8px; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { font-style: italic; }
.post-body a {
  color: var(--accent-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.post-body a:hover { color: var(--ink); }
.post-body blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.post-body code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}
.post-body .callout {
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 16px;
}
.post-body .callout strong { color: var(--accent-dark); }
.post-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

.post-footer {
  margin-top: 64px;
  padding: 36px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  text-align: center;
}
.post-related {
  margin: 56px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}
.post-related-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.post-related ul { list-style: none; padding: 0; margin: 0; }
.post-related li { margin-bottom: 10px; }
.post-related a {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.post-related a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.post-footer h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.post-footer p {
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .excl-grid { grid-template-columns: repeat(3, 1fr); }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .why-points { grid-template-columns: 1fr 1fr; }
  .why-points-inline { grid-template-columns: repeat(4, 1fr); }
  .hero-trust { grid-template-columns: repeat(3, 1fr); max-width: 720px; }   /* 6 items = a clean 3x2 */
  .posts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .why-inner { grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
  .faq-inner { grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
  .about-inner { grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
  .posts { grid-template-columns: repeat(3, 1fr); }
  .cta-inner { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .footer-inner { grid-template-columns: 1.2fr 1fr auto; gap: 48px; align-items: center; }
  .footer-meta { text-align: right; }
}
@media (max-width: 880px) {
  .nav-phone { display: none !important; }
}
@media (max-width: 720px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
  .nav.open { display: flex; }
  .nav > a { padding: 14px 24px; }
  /* Dropdown flattens into the stacked mobile nav — no hover on touch, so the menu
     is simply always open and indented under its label. */
  .nav-drop { flex-direction: column; align-items: stretch; }
  .nav-drop > a { padding: 14px 24px; }
  .nav-drop__chev { display: none; }
  .nav-drop::after { display: none; }
  .nav-drop__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; background: transparent;
    min-width: 0; padding: 0 0 6px; border-radius: 0;
  }
  .nav-drop__menu a { padding: 11px 24px 11px 38px; border-radius: 0; }
  .nav-drop__menu .nav-drop__all { margin: 0; padding-top: 11px; border-top: none; }
  .nav-phone { display: flex !important; padding: 14px 24px; }
  .nav-cta { margin: 8px 24px; text-align: center; }
  .nav-toggle { display: block; }

  .hero { padding: 56px 0 48px; }
  /* PHONE VERTICAL BUDGET (2026-08-06). Measured first: the homepage was 17,033px at 390×844
     — 20.2 screens — with nothing overflowing sideways. It was never a layout break; it's a
     desktop page that merely stacks. Two sections were missing from this rule entirely and
     carried their FULL desktop padding on a phone: .exclusivity at 110px top AND bottom (a
     quarter-screen of nothing, twice) and .trades at 84px. */
  .services, .how, .work, .pricing, .why, .testimonials, .faq, .cta-band, .about, .resources,
  .exclusivity, .trades, .guarantee, .explain, .lever, .case-studies, .estimator { padding: 52px 0; }
  /* two sections set padding INLINE, which beats any media query — override explicitly */
  section[style*="padding:80px 0"], section[style*="padding: 80px 0"] { padding: 52px 0 !important; }
  .hero-cta { margin-bottom: 40px; }
  .hero-trust { padding-top: 24px; grid-template-columns: 1fr 1fr; }

  .marquee-track { font-size: 16px; gap: 24px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .hero-video { display: none; }
}

/* ---------- Film grain on dark sections ----------
   The global body::before grain uses mix-blend-mode:multiply, which is
   invisible over the dark forest panels. This layers a soft-light noise
   into the dark sections' own background so they read as textured, not flat. */
.marquee, .exclusivity, .testimonials, .cta-band {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='dn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dn)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
}

/* ===== Committed video hero (Direction A) — approved 2026-06-09 ===== */
.hero-bg::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  opacity: 0.5;
}
.hero-video { filter: saturate(1.06) contrast(1.03); }
.hero .eyebrow { color: #c3da7e; }
.hero .eyebrow .dot { background: #c3da7e; box-shadow: 0 0 0 4px rgba(195, 218, 126, 0.18); }
.hero .hero-title { color: #f6f3e8; text-shadow: 0 1px 30px rgba(0, 0, 0, 0.25); }
.hero .hero-title .accent { color: #a6cc4e; }
.hero .hero-motto { color: #c3da7e; }
.hero .hero-sub { color: rgba(246, 243, 232, 0.85); }
.hero .hero-trust { border-top-color: rgba(255, 255, 255, 0.18); }
.hero .hero-trust li { color: rgba(246, 243, 232, 0.80); }
.hero .hero-trust strong { color: #fff; }
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.30); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: #fff; }

/* Header floats transparent over the hero, turns solid once scrolled past it */
.site-header.over-hero {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.over-hero .logo { color: #f6f3e8; }
.site-header.over-hero .logo-mark { color: #a6cc4e; }
.site-header.over-hero .nav > a { color: rgba(246, 243, 232, 0.82); }
.site-header.over-hero .nav > a:hover { color: #fff; }
/* The dropdown trigger is a child of .nav-drop, not a direct .nav > a, so the light-on-hero
   override above skipped it and "Services" rendered dark against the video hero while every
   other nav item was cream. The MENU stays dark-on-white — it sits on its own panel. */
.site-header.over-hero .nav-drop > a { color: rgba(246, 243, 232, 0.82); }
.site-header.over-hero .nav-drop > a:hover,
.site-header.over-hero .nav-drop:hover > a { color: #fff; }
.site-header.over-hero .nav-phone { color: #f6f3e8 !important; }
.site-header.over-hero .nav-phone svg { color: #a6cc4e; }
.site-header.over-hero .nav-cta { background: var(--accent); color: #10220f !important; }
.site-header.over-hero .nav-cta:hover { background: #7da82a; }

@media (max-width: 720px) {
  .hero { padding-top: 100px; }
}

/* ============================================================
   DEPTH PASS — 2026-06-19  (revertible: delete from here down)
   Dimension for a flat layout — layered cards, section
   atmosphere, glow in the dark bands. Warm/editorial, not neon.
   ============================================================ */
body {
  background:
    radial-gradient(1100px 700px at 10% -5%, rgba(107,142,35,0.07), transparent 60%),
    radial-gradient(1000px 800px at 100% 8%, rgba(201,168,92,0.09), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
.card, .price-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8ef 100%);
  border: 1px solid var(--line-soft);
  box-shadow: 0 2px 6px rgba(28,46,31,0.06), 0 16px 38px rgba(28,46,31,0.12);
  position: relative;
}
.card::after, .price-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.card:hover, .price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 22px rgba(28,46,31,0.12), 0 34px 74px rgba(28,46,31,0.18);
  border-color: var(--line);
}
.price-card-featured {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6ea 100%);
  border-color: rgba(107,142,35,0.45);
  box-shadow: 0 10px 26px rgba(74,102,24,0.16), 0 34px 74px rgba(28,46,31,0.18);
}
.case-card { background: linear-gradient(180deg, #ffffff 0%, #fbf7ed 100%); }
.services, .work, .faq, .about, .estimator { position: relative; isolation: isolate; }
.services::before, .work::before, .faq::before, .about::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 82% 0%, rgba(107,142,35,0.06), transparent 60%);
}
.services, .how, .work, .case-studies, .pricing, .faq {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(28,46,31,0.05);
}
.testimonials {
  background:
    radial-gradient(820px 440px at 16% 0%, rgba(107,142,35,0.20), transparent 60%),
    radial-gradient(720px 520px at 100% 100%, rgba(13,26,18,0.55), transparent 55%),
    linear-gradient(160deg, #213620 0%, var(--ink) 55%, #14241a 100%);
}
/* Local imagery — real Klamath Falls / Upper Klamath Lake behind a forest-green wash */
.exclusivity {
  background:
    linear-gradient(180deg, rgba(11,20,14,0.86) 0%, rgba(17,30,21,0.72) 38%, rgba(20,35,24,0.66) 66%, rgba(9,17,12,0.84) 100%),
    url('/img/local/kf-skyline.jpg');
  background-size: cover;
  background-position: center 62%;
  background-blend-mode: normal;
}
.cta-band {
  background:
    linear-gradient(180deg, rgba(10,18,13,0.84) 0%, rgba(16,28,20,0.72) 45%, rgba(9,16,12,0.88) 100%),
    url('/img/local/upper-klamath-lake.jpg');
  background-size: cover;
  background-position: center 50%;
  background-blend-mode: normal;
}

/* ============================================================
   PROOF FLIP CARDS — 2026-06-19  (work + case study, merged)
   Front = the live-site screenshot; click flips to the story.
   ============================================================ */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.proof-card {
  cursor: pointer;
  touch-action: manipulation;
  border-radius: var(--radius);
  outline: none;
  box-shadow: 0 2px 6px rgba(28,46,31,0.06), 0 18px 42px rgba(28,46,31,0.13);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.proof-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(28,46,31,0.12), 0 34px 70px rgba(28,46,31,0.18);
}
.proof-card:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 2px var(--accent); border-radius: var(--radius); }
.proof-card__inner {
  position: relative;
}
.proof-card__face {
  border-radius: var(--radius);
  overflow: hidden;
}
.proof-card__front {
  background: #fff;
  border: 1px solid var(--line-soft);
}
.proof-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--line-soft);
}
.proof-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
}
.proof-tag {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.proof-cap h3, .proof-card__back h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 23px;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.proof-hint {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease;
}
.proof-hint__ic { font-size: 16px; line-height: 1; }
.proof-card:hover .proof-hint { color: var(--accent); }
.proof-card__back {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f9f6ec 100%);
  border: 1px solid var(--line-soft);
  padding: 24px 26px 20px;
  display: flex;
  flex-direction: column;
}
.proof-card.is-flipped .proof-card__front { visibility: hidden; }
.proof-card.is-flipped .proof-card__back { visibility: visible; }
.proof-back-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.proof-card__back .proof-tag { margin-bottom: 5px; }
.proof-story {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 10px 0 0;
}
.proof-foot { margin-top: auto; padding-top: 16px; }
.proof-outcome {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--accent-dark);
  margin-bottom: 12px;
  line-height: 1.35;
}
.proof-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.proof-back-hint { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 800px) {
  .proof-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Testimonials (real Google reviews) ----------
   Verbatim from the Rise Local GBP, 5.0 / 3 reviews, captured 2026-08-04.
   Public reviews of Steve's own business — quotable as written. NEVER edit the words;
   trim only at a sentence boundary and keep the reviewer's name as it appears. */
/* Two across, not three: the fourth review (David Pratt, 2026-08-20) would otherwise sit
   alone on a second row. 2x2 keeps every row full, and the wider card suits quotes this long. */
.tmn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tmn {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.tmn__stars { color: #e8a33d; font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.tmn__quote {
  font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 20px;
}
.tmn__who { margin-top: auto; display: flex; align-items: center; gap: 11px; }
.tmn__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex: 0 0 38px;
}
.tmn__name { font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.tmn__meta { font-size: 12.5px; color: var(--muted); }
.tmn-foot { text-align: center; margin-top: 28px; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .tmn-grid { grid-template-columns: 1fr; } }

/* ---------- Split section (breaks the repeated skeleton) ----------
   The other half of "looks templated": four-plus sections all ran the same shape —
   eyebrow, CENTRED headline, centred subhead, 3-across grid. A template is one layout
   repeated with different words, so repeating our own layout read as template even
   though every page is hand-built.
   The reference site varies constantly: hero split one way, About split the other,
   stats as a strip, CTA as a dark panel. This is that variation — heading anchored
   LEFT with the content beside it, so the eye gets a different shape mid-page. */
.section--split > .container {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 56px;
  align-items: start;
}
.section--split .section-head {
  text-align: left;
  margin: 0;
  max-width: none;
  position: sticky;
  top: 96px;
}
.section--split .section-head .section-title { font-size: clamp(28px, 3.4vw, 38px); }
.section--split .steps { grid-template-columns: 1fr; gap: 16px; }
/* The step has THREE children (number, h3, p). In a 2-col grid they land
   num/h3 on row 1 and p wrapping under the NUMBER, with the h3 stretched and
   right-aligned. Place them explicitly: number spans both rows in col 1,
   heading and copy both sit in col 2. */
.section--split .step { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; align-items: start; text-align: left; }
.section--split .step-num { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.section--split .step h3 { grid-column: 2; grid-row: 1; margin: 0; text-align: left; }
.section--split .step p  { grid-column: 2; grid-row: 2; margin: 0; text-align: left; }
@media (max-width: 900px) {
  .section--split > .container { grid-template-columns: 1fr; gap: 30px; }
  .section--split .section-head { position: static; text-align: center; }
  .section--split .step { grid-template-columns: auto 1fr; }
}

/* ---------- Explainer + diagram ----------
   The slot the reference site gets right: one substantial paragraph saying what the
   thing IS and what the goal actually is, sitting beside a diagram of the mechanism.
   The diagram is a DIAGRAM — never a mocked-up UI pretending to be a real screenshot. */
.explain > .container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.explain__copy .section-eyebrow { margin-bottom: 10px; }
.explain__copy h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.6px;
  color: var(--ink); margin: 0 0 18px;
}
.explain__copy p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; }
.explain__copy p:last-child { margin-bottom: 0; }
.explain__copy strong { color: var(--ink); }

.dgm {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 34px 30px;
  box-shadow: 0 1px 2px rgba(28,46,31,.05), 0 12px 34px rgba(28,46,31,.08);
}
.dgm__row {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
  padding: 13px 0; position: relative;
}
.dgm__row:first-of-type { padding-top: 0; }
.dgm__row:last-of-type  { padding-bottom: 0; }

/* The node. Solid, not a pale tint — and ringed in the card colour so the rail behind it
   appears to pass underneath rather than butt into it. That ring is the whole trick. */
.dgm__badge {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: -.02em;
  background: var(--accent-dark); color: #fff;
  box-shadow: 0 0 0 5px var(--bg-card), 0 2px 6px rgba(28,46,31,.22);
  position: relative; z-index: 2;
}
.dgm__badge svg { width: 19px; height: 19px; }
.dgm__t { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.3; padding-top: 9px; }
.dgm__d { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.dgm__note {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
}

/* FLOW VARIANT — a continuous rail through the nodes instead of dotted stubs between rows.
   The rail runs from this node centre to exactly the next node centre: with align-items:start
   and a constant 13px row padding, a node centre always sits 13+19=32px below the row top, so
   top:32px / bottom:-32px joins segment to segment no matter how tall a description runs.
   It fades toward the last step and the payoff row is tinted, so the eye lands where the
   money does rather than reading four equal bullets. */
.dgm--flow .dgm__row::after {
  content: ""; position: absolute; left: 18px; width: 2px;
  top: 32px; bottom: -32px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  z-index: 1;
}
.dgm--flow .dgm__row:first-of-type::after { top: 19px; }
.dgm--flow .dgm__row:last-of-type::after  { display: none; }

/* The payoff step — the last one is the only one that counts, so it reads that way. */
.dgm--flow .dgm__row:last-of-type {
  margin-top: 6px; padding: 14px 14px 14px 0;
  border-radius: 14px;
}
.dgm--flow .dgm__row:last-of-type::before {
  content: ""; position: absolute; inset: 0 -14px 0 -14px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 14px; z-index: 0;
}
.dgm--flow .dgm__row:last-of-type .dgm__badge,
.dgm--flow .dgm__row:last-of-type .dgm__t,
.dgm--flow .dgm__row:last-of-type .dgm__d { position: relative; z-index: 2; }
.dgm--flow .dgm__row:last-of-type .dgm__t { color: var(--accent-dark); }
.dgm--flow .dgm__row:last-of-type .dgm__badge {
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--bg-card), 0 3px 10px rgba(28,46,31,.3);
}

/* NON-FLOW VARIANT (three surfaces, A/B, before/after) — no rail, because there is no
   sequence. The badges carry letters or symbols, so they stay square and tinted. */
.dgm:not(.dgm--flow) .dgm__badge {
  border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-dark);
  box-shadow: none;
}
.dgm:not(.dgm--flow) .dgm__row + .dgm__row { border-top: 1px solid var(--line-soft); padding-top: 15px; }
@media (max-width: 900px) {
  .explain > .container { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- Hero with a mechanism diagram beside it ----------
   Steve: "the picture in each section should depict exactly what that section does."
   So the hero visual is that page's own mechanism diagram — not decoration, and not a
   stock illustration. Text left, the thing itself right (the reference site's hero shape). */
.hero--split .hero-inner {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
  max-width: var(--max);
  text-align: left;                 /* the centred-hero rule does not apply to a split one */
}
.hero--split .hero-copy { min-width: 0; }
.hero--split .eyebrow,
.hero--split .hero-title,
.hero--split .hero-motto,
.hero--split .hero-sub,
.hero--split .hero-cta { margin-left: 0; margin-right: 0; justify-content: flex-start; }
.hero--split .hero-title { font-size: clamp(38px, 4.4vw, 58px); }
.hero--split .hero-motto { margin-bottom: 14px; }
.hero--split .hero-title { margin-right: 0; }
.hero--split .hero-sub { max-width: none; }
.hero--split .dgm {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(2px);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 8px 24px rgba(10,22,12,.18), 0 30px 70px rgba(10,22,12,.22);
}
@media (max-width: 980px) {
  .hero--split .hero-inner { grid-template-columns: 1fr; gap: 30px; }
  /* The diagram stays on mobile — it IS the picture of what the page does, and most
     visitors are on a phone. It just stacks under the copy and tightens up. */
  .hero--split .dgm { padding: 24px 20px; }
  .hero--split .dgm__row { padding: 13px 0; grid-template-columns: 38px 1fr; gap: 13px; }
  .hero--split .dgm--flow .dgm__row:not(:last-child)::after { left: 18px; top: 48px; height: 14px; }
}

/* Explainer with no diagram beside it (the diagram moved into the hero) — one wide,
   larger-type statement block. Reads as a considered point of view, not a leftover column. */
.explain--solo > .container { display: block; max-width: 860px; }
.explain--solo .explain__copy { text-align: left; }
.explain--solo h2 { font-size: clamp(30px, 3.6vw, 42px); }
.explain--solo p:not(.section-eyebrow) { font-size: 18.5px; line-height: 1.72; }

/* The split hero column is narrower than a full-width one, so let the browser even out
   the line lengths instead of orphaning a word on line two. */
.hero--split .hero-title .hero-line { text-wrap: balance; }

/* ---------- ICON TILES v2 (2026-08-05) ----------
   Steve: "the icons look so cheap." He was right, and the measurement says why.

   MEASURED against the reference site's offering row: their tile is a soft rounded
   square carrying a glyph in TWO OR THREE REAL COLOURS plus a small corner badge
   (a red play dot on the analytics tile, a gold $ on the ecommerce tile). Ours was a
   single hue at two opacities on a flat tint — one colour, one plane, no focal point.
   That flatness is the whole "cheap" feeling; it is not a size or a line-weight problem.

   What changed: the tile gets real depth (a gradient, an inset top highlight, a soft
   coloured shadow), the glyph gets a second and third colour drawn from our own palette,
   and each icon gets one small badge that says what the thing DOES.

   Palette is Rise Local's, never theirs — their look is a bought Webflow template
   ("Growth Webflow Template"), so copying its blue/purple would make a stock kit our
   identity. Inline SVG only: our CSP is img-src 'self' data:, so a CDN icon can't load. */
.svc-ico {
  position: relative;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--svc) 20%, #fff),
      color-mix(in srgb, var(--svc)  9%, #fff));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px color-mix(in srgb, var(--svc) 16%, transparent),
    0 4px 10px -4px color-mix(in srgb, var(--svc) 42%, transparent);
}
.svc-ico .ic-glyph { width: 36px; height: 36px; }

/* Glyph layers — three planes instead of one hue at two alphas. */
.svc-ico .ic-bg   { fill: var(--svc); opacity: .20; }   /* the mass behind      */
.svc-ico .ic-fg   { fill: var(--svc); }                 /* the shape itself     */
.svc-ico .ic-line { fill: none; stroke: var(--svc); stroke-width: 2.1;
                    stroke-linecap: round; stroke-linejoin: round; }
.svc-ico .ic-paper{ fill: #fff; }                       /* knocked-out detail   */

/* The corner badge is its OWN layer, pinned to the tile corner by CSS rather than drawn
   inside the glyph's viewBox. v3 drew it inline and on the busier tiles (the browser
   window, the bar chart) it landed on top of the artwork and buried it. Pinned, it sits
   in the same spot on every tile and can never collide. It is not decoration: each mark
   names what happens to that thing — ranked, booked, custom, new, kept, handled. */
.svc-ico .ic-badge {
  position: absolute; top: -7px; right: -7px;
  width: 24px; height: 24px;
  fill: var(--badge, #b5541f);
  filter: drop-shadow(0 2px 4px rgba(28,46,31,.28));
}
.svc-ico .ic-badge > circle:first-child { stroke: var(--bg); stroke-width: 1.6; }
.svc-ico .ic-badge-mark { fill: #fff; }

.svc-card--olive { --badge: #b5541f; }
.svc-card--clay  { --badge: #4a7c59; }
.svc-card--slate { --badge: #a4791b; }
.svc-card--gold  { --badge: #6b8e23; }
.svc-card--sage  { --badge: #a4791b; }
.svc-card--plum  { --badge: #4a7c59; }

/* Hover: the tile lifts with the card rather than sitting flat on a moving surface. */
.svc-card:hover .svc-ico {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px color-mix(in srgb, var(--svc) 22%, transparent),
    0 8px 18px -6px color-mix(in srgb, var(--svc) 52%, transparent);
}
.svc-ico, .svc-card:hover .svc-ico { transition: box-shadow .25s ease; }

/* The XL tile (service-page grids) scales the same system rather than redefining it. */
.svc-card--xl .svc-ico .ic-glyph { width: 52px; height: 52px; }
.svc-card--xl .svc-ico .ic-badge { width: 30px; height: 30px; top: -9px; right: -9px; }

/* ---------- EXPLAINER WITH A PHOTO (2026-08-05) ----------
   The diagram moved into the hero, which left the explainer as a lone column of text.
   A real photograph fills it far better than more type: it shows the MOMENT the page is
   about (someone checking a map on a street, a phone lighting up on a workbench) while
   the hero diagram keeps explaining the mechanism. Picture and diagram, not one or other.

   Image LEFT, copy RIGHT — the hero above runs diagram-right, so alternating stops both
   visuals stacking down the same edge of the page. */
.explain--img > .container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  max-width: var(--max);
}
.explain--img .explain__media { margin: 0; }
.explain--img .explain__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(28,46,31,.08), 0 22px 48px -18px rgba(28,46,31,.34);
}
.explain--img h2 { font-size: clamp(28px, 3.2vw, 38px); }
.explain--img p:not(.section-eyebrow) { font-size: 17.5px; line-height: 1.7; }

@media (max-width: 900px) {
  .explain--img > .container { grid-template-columns: 1fr; gap: 30px; }
  .explain--img .explain__media { order: -1; }   /* picture first on a phone */
}

/* ---------- CTA band: centre the copy when the band IS centred (2026-08-05) ----------
   MEASURED bug: .cta-sub is max-width:460px with `margin: 0 0 24px` — margin-left 0. Inside
   the subpages' centred 720px container the TEXT centred (inherited) but the BLOCK sat flush
   left: 24px of gap on one side, 236px on the other. It read as "not centered correctly"
   because it genuinely wasn't.

   Scoped to the single-column band only. The homepage uses the two-column .cta-inner, where
   the copy is meant to sit hard left against the form — so that one must NOT be centred. */
.cta-band .container:not(.cta-inner) .cta-sub { margin-left: auto; margin-right: auto; }
.cta-band .container:not(.cta-inner) .cta-title { margin-left: auto; margin-right: auto; }

/* ---------- THE GUARANTEE (2026-08-05) ----------
   Risk reversal at the buy decision. Weighted heavier than a card on purpose — it is the
   single strongest thing on the pricing block, and "Happy or it doesn't go live" (which it
   replaced in the hero strip) was doing none of that work. */
.guarantee {
  /* Vertical padding as a variable so the divider can bleed to the card's edges by
     cancelling it exactly, at every breakpoint. (2026-08-21) */
  --g-pad-y: 38px;
  /* The brand olive is 3.8:1 on this dark card — it squeaks past AA for the 31px promise
     and FAILS it for the 12px label. One step lighter clears 5.7:1 for both, and makes the
     promise the loudest thing in the block, which is its whole job. (2026-08-21) */
  --accent-on-dark: #8fb03a;
  position: relative;
  background: var(--ink);
  border-radius: var(--radius);
  padding: var(--g-pad-y) 42px;
  margin: 0 0 34px;
  overflow: hidden;
  /* Two columns: the promise on the left, how it gets checked on the right (2026-08-20).
     Before this the card was one narrow text column inside a very wide box — measured at
     1132px of card holding a 527px promise on /pricing/ (46% of it empty) and 728/527 on
     the homepage. A reading measure can't grow to fill a wide card, so the card had to stop
     being one column. The split also matches what the copy already does: promise, then test.

     ⚠️ THE SPLIT NEEDS A CARD ≥ 980px WIDE, and that is a CARD measurement, not a viewport
     one (2026-08-21). It shipped gated on the viewport, which held only where the two agree.
     The homepage capped this container at 860px, so its card was 812px at EVERY viewport —
     panes of 382/346, the 31px promise broken into three ragged lines ("...you pay / me, you
     don't pay") with a dead gutter beside it, while the media query happily kept two columns
     because the window was 1512px. Measured across card widths: 1132/1048/980 wrap the
     promise to two lines; 900 and below go to three. So the homepage now runs the same
     standard container as /pricing/, and the stack breakpoint sits at 1039px (card = the
     1180 container − 48px of gutter, so 1040px of viewport is the first that clears 980).
     Don't put this card in a narrower slot without re-checking the wrap. */
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
/* When the card is the last thing in its section, its trailing margin just stacks on top of
   the section padding and throws the block off-centre. (2026-08-21) */
.guarantee:last-child { margin-bottom: 0; }
.guarantee::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 130% at 88% 0%, rgba(107,142,35,.30), transparent 60%);
  pointer-events: none;
}
.guarantee > * { position: relative; }
.guarantee__label {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-on-dark); margin: 0 0 14px;
}
.guarantee__lead {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.28; font-weight: 600;
  letter-spacing: -.01em; color: var(--bg); margin: 0 0 16px; max-width: 30ch;
}
.guarantee__body {
  font-size: 16.5px; line-height: 1.65; color: rgba(250,248,243,.78);
  margin: 0; max-width: none; /* the grid column sets the measure now */
  margin-left: clamp(26px, 3vw, 44px);
  padding-left: clamp(26px, 3vw, 44px);
  border-left: 1px solid rgba(250,248,243,.16);
  text-wrap: pretty;
  /* Stretch so the rule spans the full height of the taller column instead of floating at
     the height of this paragraph; the text still sits centred against it. */
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  /* ...and then cancel the card's own vertical padding so the rule reaches the card's top
     and bottom EDGES. Stretching only got it to the grid row: 149px of rule inside a 225px
     card, floating 38px clear of both ends, which read as a stray tick mark rather than a
     divider. The card's overflow:hidden clips it to the rounded corners. (2026-08-21) */
  margin-block: calc(var(--g-pad-y) * -1);
  padding-block: var(--g-pad-y);
}
/* The promise itself — set apart, because this is the sentence that does the work. */
.guarantee__promise {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.35; font-weight: 700;
  color: var(--accent-on-dark);
  margin: 0 0 16px; padding-left: 20px;
  border-left: 3px solid var(--accent-on-dark);
  max-width: 46ch;
  /* Even lines instead of a stub — without this the column width left "pay." alone on a
     third line at ~1024px. Ignored by browsers that don't support it, which just get the
     old ragged wrap. */
  text-wrap: balance;
}
.guarantee__foot { font-size: 15px; line-height: 1.6; color: rgba(250,248,243,.62); margin: 0; max-width: 56ch; }

/* Below the two-column threshold the card is narrow enough that one column fills it again,
   so stack and drop the vertical divider rather than squeeze two columns into ~300px each.
   860 -> 1039 on 2026-08-21: 860px of viewport is a 812px card, and 812 is inside the band
   where the split mangles the promise (see the note on .guarantee above). */
@media (max-width: 1039px) {
  .guarantee { grid-template-columns: 1fr; row-gap: 20px; }
  .guarantee__body {
    margin: 0; padding: 0;
    border-left: 0;
    /* The promise/test separation is the point of the block, so keep a separator when the
       panes stack — just turn it on its side. */
    border-top: 1px solid rgba(250, 248, 243, .16);
    padding-top: 20px;
  }
}

@media (max-width: 700px) {
  .guarantee { --g-pad-y: 30px; padding: var(--g-pad-y) 24px; }
  .guarantee__promise { padding-left: 16px; }
}

/* The homepage's pointer to /pricing/ — the terms live on their own page now, so this is
   the one line that has to carry them and get out of the way. */
.price-pointer {
  text-align: center;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 34px;
  line-height: 1.6;
}
.price-pointer a {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.price-pointer a:hover { border-bottom-color: var(--accent-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   THE MECHANISM SYSTEM (2026-08-05)

   Seven service pages each explain a 3-4 step mechanism. They used to share ONE
   component, which Steve read correctly as repetitive — same shape seven times.
   So each page now gets its OWN form, and what makes them one brand is this
   token layer rather than a shared silhouette. One method, seven looks.

   THE RULES EVERY FORM INHERITS
   1. Cream ground. The page colour, not a panel colour.
   2. OLIVE HAS EXACTLY ONE JOB: marking the thing that CHANGES in this step.
      Never decoration, never a second accent. This single rule is what makes
      seven different shapes read as one system.
   3. Hairline connectors — 1px, never heavier.
   4. A grey rounded bar means "body copy lives here". It is never text.
   5. The caption goes UNDER the picture. Never above.

   HONESTY: every form is a stylised diagram. Nothing here imitates a screenshot
   of a real customer's account, and any machine-sent step is captioned as such
   so the boundary of the automation is marked rather than implied.

   No scroll-driven behaviour anywhere — these sit above the fold, where there is
   no scroll yet to drive anything.
   ══════════════════════════════════════════════════════════════════════════ */
.mech {
  --m-line: var(--line-soft);
  --m-hair: color-mix(in srgb, var(--ink) 13%, transparent);
  --m-paper: #fff;
  --m-ground: color-mix(in srgb, var(--accent) 5%, #fff);
  --m-change: var(--accent-dark);          /* rule 2 — the ONE job olive does */
  --m-quiet: color-mix(in srgb, var(--ink) 10%, transparent);
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}

/* rule 4 — a grey bar stands in for body copy, and is never real text */
.m-bar { display: block; height: 8px; border-radius: 5px; background: var(--m-quiet); }
.m-bar--80 { width: 80%; } .m-bar--62 { width: 62%; }
.m-bar--45 { width: 45%; } .m-bar--30 { width: 30%; }

/* rule 5 — captions sit under the picture */
.m-cap {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}

/* the token chip — a variable in a sentence. Reused by rule / manifold / stack. */
.m-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-dark); font-weight: 700;
  white-space: nowrap;
}
.m-chip--quiet {
  background: #fff; border-color: var(--m-line);
  color: var(--ink-soft); font-weight: 600;
}

/* a small square note that marks a machine-sent step — the honesty marker */
.m-auto {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-dark);
}
.m-auto::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--m-change);
}

/* ---------- FORM 1 · THE TRANSCRIPT → /online-booking/ ----------
   Source: Podium Home Services. The move worth stealing is the TIMESTAMP BETWEEN
   the bubbles — 11:04pm then 11:04pm again — because the gap (or the absence of
   one) makes the claim so no headline has to. And it ends on the ARTIFACT, a
   calendar tile, not on another message: a conversation becoming a booking.

   Chosen for this page because a real screenshot of a customer's calendar would
   be both less legible AND dishonest, so a stylised thread is genuinely the
   better artifact, not a compromise. */
.mech--transcript { display: flex; flex-direction: column; gap: 0; }
.tx { position: relative; padding-left: 76px; }
.tx__time {
  position: absolute; left: 0; top: 2px; width: 62px; text-align: right;
  font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--muted);
}
.tx__time em { display: block; font-style: normal; font-weight: 600; opacity: .75; }
/* the rail runs BEHIND the dots and past the last one, so the thread feels live */
.tx::before {
  content: ""; position: absolute; left: 68px; top: 0; bottom: -18px; width: 1px;
  background: var(--m-hair);
}
.tx:last-of-type::before { bottom: 50%; }
.tx__dot {
  position: absolute; left: 64px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--m-quiet); box-shadow: 0 0 0 4px var(--bg); z-index: 2;
}
.tx--auto .tx__dot { background: var(--m-change); }   /* rule 2 — olive marks the change */

.tx__bub {
  background: var(--m-paper); border: 1px solid var(--m-line);
  border-radius: 16px 16px 16px 5px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(28,46,31,.05);
}
.tx--auto .tx__bub {
  background: var(--m-ground);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 16px 16px 5px 16px;
}
.tx__bub > * + * { margin-top: 7px; }
.tx + .tx { margin-top: 18px; }

/* the artifact the thread lands on — a booked day, not another message */
.tx__cal {
  background: var(--m-paper); border: 1px solid var(--m-line);
  border-radius: 14px; overflow: hidden;
}
.tx__cal-h {
  padding: 8px 13px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-bottom: 1px solid var(--m-line);
}
.tx__cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 11px; }
.tx__cal-g i { aspect-ratio: 1; border-radius: 5px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tx__cal-g i.on { background: var(--m-change); }
.tx__slot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; border-top: 1px solid var(--m-line);
  font-size: 13px; font-weight: 700; color: var(--ink);
}

/* ---------- MECHANISM ON A DARK HERO ----------
   The token layer assumes a cream ground, but these forms sit inside the dark hero.
   The cards carry their own light surface, so only the ANCILLARY text needs lifting:
   timestamps, captions and hairlines. Fixing it here rather than per-form keeps the
   rule in one place for all seven. */
.hero .mech { --m-hair: rgba(255,255,255,.22); }
.hero .mech .m-cap {
  color: rgba(246,243,232,.72);
  border-top-color: rgba(255,255,255,.2);
}
.hero .tx__time { color: rgba(246,243,232,.78); }
.hero .tx__time em { color: rgba(246,243,232,.55); }
.hero .tx__dot { box-shadow: 0 0 0 4px rgba(28,46,31,.55); }
.hero .m-bar { background: color-mix(in srgb, var(--ink) 12%, transparent); }

/* ---------- FORM 2 · THE READABLE RULE → /crm/ ----------
   Source: Ramp. Four steps become ONE sentence you'd say out loud, with the
   variables as chips. People trust a rule they can read more than a step they're
   told about — and it is honest by construction: it is a RULE, not a mocked-up
   account with invented data in it.

   It is also the biggest single break from a numbered list on the whole board,
   which is why it goes early. And the chip component it establishes gets reused
   by the manifold and the stack, so this page pays for the next three. */
.mech--rule .rule {
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: 20px;
  padding: 30px 32px;
  box-shadow: 0 2px 6px rgba(28,46,31,.06), 0 24px 54px -26px rgba(28,46,31,.4);
  /* faint dotted ground so it reads as a rule-builder surface, not a text box */
  background-image: radial-gradient(var(--m-quiet) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -1px -1px;
}
.rule__label {
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-dark); margin: 0 0 16px;
}
.rule__body {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.75; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
/* the chips sit ON the sentence line, so it still reads as one sentence */
.rule__body .m-chip {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .66em; font-weight: 700;
  vertical-align: 2px; margin: 0 2px;
}
.rule__else {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed var(--line);
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.rule__else .m-chip { font-size: 13px; vertical-align: 1px; }
.rule__foot {
  display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px;
}

/* ---------- FORM 3 · THE MANIFOLD → /pos-integration/ ----------
   Source: Zapier. Sources collapse into one wire, through one box, then fan back
   out. This page's whole value proposition IS a shape — menu, orders and till
   converging on one place — so drawing it does work no paragraph can.

   Deliberately different geometry from the Orbit on /local-seo/: a WIRE means
   sequential flow, a RING means simultaneous presence. Two pages that could
   otherwise blur are now impossible to confuse. */
.mech--manifold .mf {
  display: flex; align-items: center; gap: 0;
  background: var(--m-paper); border: 1px solid var(--m-line);
  border-radius: 20px; padding: 24px 18px;
  box-shadow: 0 2px 6px rgba(28,46,31,.06), 0 24px 54px -26px rgba(28,46,31,.4);
}
.mf__side { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-width: 0; }
.mf__node {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--m-line); border-radius: 11px;
  padding: 9px 11px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.mf__node i {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
/* the wires — hairlines only, per the token rules */
.mf__wire { position: relative; flex: 0 0 40px; align-self: stretch; min-height: 132px; }
.mf__wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* fixed dark hairline: these wires are always on the white card, so they must NOT
   inherit the dark-hero --m-hair (white on white = invisible) */
.mf__wire path { fill: none; stroke: color-mix(in srgb, var(--ink) 20%, transparent); stroke-width: 1; }
.mf__hub { text-align: center; padding: 0 4px; flex: 0 0 auto; }
.mf__box {
  background: var(--m-change); color: #fff;
  border-radius: 15px; padding: 16px 18px;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.mf__box b { display: block; font: 800 14px/1.25 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
.mf__box span { display: block; margin-top: 4px; font-size: 11.5px; opacity: .82; line-height: 1.4; }
.mf__more {
  margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--muted);
}
@media (max-width: 640px) {
  .mech--manifold .mf { flex-direction: column; gap: 14px; }
  .mf__wire { flex: 0 0 26px; min-height: 26px; width: 100%; }
}

/* ---------- FORM 4 · THE ORBIT → /local-seo/ ----------
   Source: Cal.com. Concentric hairline rings with the business at the centre and
   the surfaces parked on the rings.

   GEOMETRY IS THE ARGUMENT, and it is chosen against the Manifold on purpose:
   a WIRE says sequential flow (this, then that), a RING says SIMULTANEOUS
   PRESENCE (all of these, at once). "Get found everywhere" is not a sequence —
   you are on the map and in the results and in the AI answer at the same time —
   so a ring is the only honest figure for it. Two pages that could otherwise
   blur into each other are now impossible to confuse. */
.mech--orbit .orb {
  position: relative; aspect-ratio: 1/1; max-width: 400px; margin: 0 auto;
  display: grid; place-items: center;
}
.orb__ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--m-hair);
}
.orb__ring--1 { inset: 22%; }
.orb__ring--2 { inset: 4%; }
/* the centre — the one thing olive is allowed to mark */
.orb__core {
  position: relative; z-index: 3;
  background: var(--m-change); color: #fff;
  border-radius: 999px; padding: 13px 22px; text-align: center;
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 78%, transparent);
}
.orb__core b { display: block; font: 800 14.5px/1.2 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
.orb__core span { display: block; margin-top: 3px; font-size: 11px; opacity: .85; }
/* surfaces parked on the rings */
.orb__node {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  background: #fff; border: 1px solid var(--m-line); border-radius: 999px;
  padding: 7px 13px; font: 700 12.5px 'Inter', system-ui, sans-serif; color: var(--ink-soft);
  white-space: nowrap; box-shadow: 0 2px 8px rgba(28,46,31,.09);
}
.orb__node em { font-style: normal; display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); }
/* placed by hand — irregular positions read as orbit, a perfect grid reads as a chart */
.orb__node--a { left: 50%;  top: 5%; }
.orb__node--b { left: 86%;  top: 74%; }
.orb__node--c { left: 15%;  top: 74%; }
@media (max-width: 520px) {
  .orb__node { font-size: 11px; padding: 6px 10px; }
  .orb__node em { display: none; }
}

/* ---------- FORM 5 · THE ANNOTATED ANATOMY → /websites/ ----------
   Source: Toast. Callout chips ringed around ONE object at irregular positions —
   irregular on purpose, because a neat grid reads as a chart, not an anatomy.
   Chosen for this page because the website IS the object, so the figure annotates
   the object rather than listing its parts beside it.

   ENRICHED 2026-08-06: v1 was a near-empty window (a band, two bars, a button) and
   read as unfinished next to the other six. Everything in the frame now is a real
   reason a local site gets the call — the number in the header, proof before they
   have to ask, the service named the way they'd say it, hours at a glance, and a
   tap-to-call bar pinned to the bottom. The callouts point at those, so the diagram
   teaches rather than decorates. Still zero motion. */
.mech--anatomy .an { position: relative; padding: 30px 58px 34px; }
.an__win {
  background: #fff; border: 1px solid var(--m-line); border-radius: 15px;
  overflow: hidden; box-shadow: 0 2px 6px rgba(28,46,31,.07), 0 24px 52px -22px rgba(28,46,31,.45);
}
/* browser chrome */
.an__bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 7%, #fff); border-bottom: 1px solid var(--m-line);
}
.an__bar i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.an__url { flex: 1; margin-left: 6px; height: 16px; border-radius: 999px; background: #fff; border: 1px solid var(--m-line); }

/* the site's own header — where a local business must put its phone number */
.an__nav {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-bottom: 1px solid var(--m-line);
}
.an__logo { display: flex; align-items: center; gap: 6px; }
.an__logo i { width: 15px; height: 15px; border-radius: 4px; background: var(--m-change); }
.an__logo span { display: block; width: 40px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.an__navl { display: flex; gap: 8px; margin-left: 4px; }
.an__navl i { width: 22px; height: 5px; border-radius: 3px; background: var(--m-quiet); }
.an__tel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font: 800 9.5px 'Inter', system-ui, sans-serif; color: var(--accent-dark); white-space: nowrap;
}
.an__tel svg { width: 9px; height: 9px; }

.an__body { padding: 13px 13px 0; display: flex; flex-direction: column; gap: 9px; }
.an__hero { height: 40px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 13%, #fff); }
.an__cta { display: flex; gap: 7px; }
.an__cta b {
  padding: 6px 13px; border-radius: 999px; background: var(--m-change); color: #fff;
  font: 700 10.5px 'Inter', system-ui, sans-serif;
}
.an__cta span {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--m-line);
  font: 700 10.5px 'Inter', system-ui, sans-serif; color: var(--ink-soft);
}
/* proof, before they have to go looking for it */
.an__rev {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 6%, #fff); border: 1px solid var(--m-line);
}
.an__stars { display: flex; gap: 1.5px; }
.an__stars svg { width: 10px; height: 10px; fill: #d9a33a; }
.an__rev b { font: 800 10px 'Inter', system-ui, sans-serif; color: var(--ink); }
.an__rev span { font: 600 9.5px 'Inter', system-ui, sans-serif; color: var(--muted); }
/* the services, named the way a customer would say them */
.an__svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.an__svc div {
  border: 1px solid var(--m-line); border-radius: 9px; padding: 8px 7px;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.an__svc i { width: 16px; height: 16px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 20%, #fff); }
.an__svc u { display: block; width: 78%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.an__svc em { display: block; width: 54%; height: 4px; border-radius: 3px; background: var(--m-quiet); }
/* open now — the question every local visitor is really asking */
.an__hrs {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  font: 700 9.5px 'Inter', system-ui, sans-serif; color: var(--accent-dark);
}
.an__hrs::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-change); }
/* the tap-to-call bar, pinned like it is on a phone */
.an__stick {
  margin-top: 4px; padding: 9px 12px;
  background: var(--m-change); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font: 800 11px 'Inter', system-ui, sans-serif;
}
.an__stick svg { width: 12px; height: 12px; }

/* the callouts */
.an__tag {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--m-line); border-radius: 999px;
  padding: 6px 12px; font: 700 11.5px 'Inter', system-ui, sans-serif; color: var(--ink);
  box-shadow: 0 3px 12px rgba(28,46,31,.18); white-space: nowrap;
}
.an__tag::after {
  content: ""; position: absolute; width: 30px; height: 1px;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.an__tag--a { left: -30px; top: 11%; }
.an__tag--a::after { right: -30px; top: 50%; }
.an__tag--b { right: -30px; top: 38%; }
.an__tag--b::after { left: -30px; top: 50%; }
.an__tag--c { left: -34px; top: 61%; }
.an__tag--c::after { right: -30px; top: 50%; }
.an__tag--d { right: -30px; bottom: 11%; }
.an__tag--d::after { left: -30px; top: 50%; }

@media (max-width: 760px) {
  .mech--anatomy .an { padding: 20px 6px 22px; }
  .an__tag { position: static; display: inline-block; margin: 7px 6px 0 0; box-shadow: none; }
  .an__tag::after { display: none; }
}

/* ---------- FORM 6 · THE TANGLE → THE RAIL → /ads/ ----------
   Source: Ramp's chaos map. Dashed paths that loop and backtrack on the left; one
   clean rail on the right. The argument lands before a word is read.

   This is the ONLY family that leads with the LOSS as a picture, which is exactly
   Principle 17 executed as a drawing rather than a headline — so it belongs on the
   page where the money is being burned. */
.mech--tangle .tg {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0;
  background: var(--m-paper); border: 1px solid var(--m-line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(28,46,31,.06), 0 24px 54px -26px rgba(28,46,31,.4);
}
.tg__half { padding: 22px 20px 24px; display: flex; flex-direction: column; }
.tg__half--bad { background: color-mix(in srgb, #b5541f 4%, #fff); }
.tg__lab {
  font: 800 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase;
  margin: 0 0 14px;
}
.tg__half--bad .tg__lab { color: #b5541f; }
.tg__half--good .tg__lab { color: var(--accent-dark); }
.tg__art { flex: 1; min-height: 128px; position: relative; }
.tg__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tg__art path { fill: none; stroke-width: 1.2; }
.tg__art .bad { stroke: color-mix(in srgb, #b5541f 55%, transparent); stroke-dasharray: 4 4; }
.tg__art .good { stroke: var(--m-change); }
.tg__art circle { fill: #fff; stroke-width: 1.2; }
.tg__art .bad-n { stroke: color-mix(in srgb, #b5541f 55%, transparent); }
.tg__art .good-n { stroke: var(--m-change); fill: var(--m-change); }
.tg__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tg__div {
  width: 1px; background: var(--m-line);
}
@media (max-width: 640px) {
  .mech--tangle .tg { grid-template-columns: 1fr; }
  .tg__div { width: auto; height: 1px; }
}

/* ---------- FORM 7 · THE STACK → /online-ordering/ ----------
   Source: Owner.com's order rows + Bellroy's side-by-side comparison.

   The wedge on this page is a NUMBER the owner already feels, so the figure is
   the same ticket routed two ways with the outcome already drawn — one route
   loses a slice, the other keeps the lot. No commission percentage is printed:
   it varies by platform and deal, and the honest line is on the caption telling
   him to check his own statement. The figure shows the SHAPE of the loss, and
   his own statement supplies the number. */
.mech--stack .st { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st__col {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 16px;
  padding: 16px 15px 17px; display: flex; flex-direction: column;
  box-shadow: 0 2px 6px rgba(28,46,31,.06), 0 20px 44px -24px rgba(28,46,31,.36);
}
.st__col--win { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.st__lab { font: 800 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; color: var(--muted); }
.st__col--win .st__lab { color: var(--accent-dark); }
/* the ticket */
.st__tkt { border: 1px solid var(--m-line); border-radius: 11px; overflow: hidden; }
.st__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; font-size: 12.5px; color: var(--ink-soft);
}
.st__row + .st__row { border-top: 1px solid var(--m-line); }
.st__row b { font-weight: 700; color: var(--ink); }
.st__tot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.st__tot span { font-size: 12px; font-weight: 700; color: var(--muted); }
.st__tot b { font: 800 21px/1 'Fraunces', Georgia, serif; color: var(--ink); }
.st__col--win .st__tot b { color: var(--accent-dark); }
/* the slice the app takes — drawn, never numbered */
.st__cut { margin-top: 12px; }
.st__cut-bar { height: 12px; border-radius: 7px; overflow: hidden; display: flex; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.st__cut-bar i { display: block; height: 100%; }
.st__cut-bar .keep { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.st__cut-bar .gone { background: repeating-linear-gradient(135deg, #b5541f 0 5px, color-mix(in srgb,#b5541f 62%,#fff) 5px 10px); }
.st__col--win .st__cut-bar .keep { background: var(--m-change); }
.st__cut-l { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; font-weight: 700; }
.st__cut-l .a { color: #b5541f; }
.st__cut-l .b { color: var(--muted); }
.st__col--win .st__cut-l .b { color: var(--accent-dark); }
.st__who { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) { .mech--stack .st { grid-template-columns: 1fr; } }

/* ---------- FORM 8 · THE WALL → /builds/ ----------
   Steve 2026-08-15, three corrections deep: "show them how much I build, not discount my
   work" · "stop letting them know it's not a business I work with" · "there is no hero
   design like the rest of my service pages. it's plain as fuck. it needs something cool."

   The last one was the fairest of the three. v1 of this form was twenty-five identical grey
   rectangles — a DIAGRAM, not a design — sitting under a headline that says NO TWO THE SAME.
   The picture was arguing against its own caption. Every other form on this board earns its
   place by having something to look at: the anatomy has a real window with callouts pinned
   to it, the transcript has timestamps, the manifold has wired curves.

   So the wall is now what the headline claims: three columns of genuinely different sites
   drifting past, each with its own brand colour and its own LAYOUT (four archetypes — hero,
   gallery, split, list), masked top and bottom so the run reads as endless rather than as a
   grid that happens to stop. Volume becomes something you watch instead of something you
   count.

   ⛔ NOTHING here is ever marked or annotated. No legend, no highlighted tile, no "the rest
   are…". The hero counts BUILDS; which became clients is the marquee's job and the stories'
   job, further down. The colour variety carries ONE meaning only — these are all different —
   and it must never be recruited to sort the work into real and not-real.

   HONESTY: a tile is a stylised page. It is not a screenshot, it is not any named business's
   site, and no tile is a claim about a specific build. */
.mech--wall .wl {
  position: relative;
  background: var(--m-paper); border: 1px solid var(--m-line);
  border-radius: 20px; padding: 20px 20px 18px;
  box-shadow: 0 2px 6px rgba(28,46,31,.06), 0 24px 54px -26px rgba(28,46,31,.4);
}
.wl__head {
  display: flex; align-items: baseline; gap: 11px;
  padding-bottom: 15px; margin-bottom: 4px;
  border-bottom: 1px solid var(--m-line);
}
.wl__n {
  font: 800 34px/1 'Fraunces', Georgia, serif;
  color: var(--ink); letter-spacing: -.02em;
}
.wl__l {
  font: 800 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- the drifting wall ----
   Two copies of each column's tiles sit in one run, and the run travels exactly -50%, so
   the second copy lands where the first began and the loop is seamless at any height.
   Columns move at different speeds and one moves the other way, so the eye never locks
   onto a repeating row. */
.wl__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  height: 384px; overflow: hidden;
  /* the run has no start and no end — it fades into the card at both edges */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
}
.wl__col { overflow: hidden; }
.wl__run { display: flex; flex-direction: column; gap: 8px; will-change: transform; }
.wl__col:nth-child(1) .wl__run { animation: wlDrift 46s linear infinite; }
.wl__col:nth-child(2) .wl__run { animation: wlDrift 36s linear infinite reverse; }
.wl__col:nth-child(3) .wl__run { animation: wlDrift 58s linear infinite; }
.wl__col:nth-child(4) .wl__run { animation: wlDrift 41s linear infinite reverse; }
@keyframes wlDrift { to { transform: translateY(-50%); } }

/* ---- a tile is a page ----
   --h is the tile's own brand hue. Kept low-saturation and mid-light so twenty-four of them
   read as a considered portfolio wall rather than a bag of sweets. */
.wl__t {
  --h: 82; --s: 22%; --l: 46%;
  flex: none; aspect-ratio: 4 / 3.1;
  border: 1px solid var(--m-line); border-radius: 5px;
  background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(28,46,31,.05);
}
.wl__t i, .wl__t u, .wl__t b, .wl__t em { display: block; }
/* the band — the site's hero area, in its own colour */
.wl__t > i {
  height: 34%; flex: none;
  background: hsl(var(--h) var(--s) var(--l));
  border-bottom: 1px solid rgba(28,46,31,.08);
}
/* the body */
.wl__t > u { flex: 1; padding: 13% 12% 0; }
.wl__t > u > em { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.wl__t > u > em + em { margin-top: 4px; width: 62%; }
/* the call button, in the tile's own colour */
.wl__t > b {
  margin: auto 12% 13%; height: 12%; width: 38%;
  border-radius: 3px; background: hsl(var(--h) var(--s) var(--l));
}

/* archetype 2 — a gallery site: small band, then a photo grid */
.wl__t--gal > i { height: 22%; }
.wl__t--gal > u {
  flex: 1; padding: 11% 12%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start;
}
.wl__t--gal > u > em {
  height: auto; aspect-ratio: 1; border-radius: 3px; width: auto;
  background: hsl(var(--h) var(--s) calc(var(--l) + 34%));
}
.wl__t--gal > u > em + em { margin-top: 0; width: auto; }

/* archetype 3 — a split site: colour block left, copy right, no band */
.wl__t--split > i { display: none; }
.wl__t--split > u {
  flex: 1; padding: 12%; display: grid; grid-template-columns: 38% 1fr; gap: 8%;
  align-content: center; align-items: center;
}
.wl__t--split > u::before {
  content: ""; align-self: stretch; border-radius: 4px;
  background: hsl(var(--h) var(--s) var(--l));
}
.wl__t--split > u > em { width: 100%; }
.wl__t--split > u > em + em { width: 70%; margin-top: 4px; grid-column: 2; }

/* archetype 4 — a list site: band, then stacked rows */
.wl__t--list > i { height: 26%; }
.wl__t--list > u { padding: 10% 12% 0; }
.wl__t--list > u > em {
  height: 6px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border-left: 3px solid hsl(var(--h) var(--s) var(--l));
}
.wl__t--list > u > em + em { width: 100%; margin-top: 5px; }
.wl__t--list > b { display: none; }

/* the hues — one meaning only: these are all different */
.wl__t--h1  { --h: 82;  --s: 26%; --l: 42%; }   /* olive     */
.wl__t--h2  { --h: 190; --s: 24%; --l: 44%; }   /* teal      */
.wl__t--h3  { --h: 18;  --s: 34%; --l: 52%; }   /* terracotta*/
.wl__t--h4  { --h: 220; --s: 22%; --l: 48%; }   /* slate blue*/
.wl__t--h5  { --h: 340; --s: 18%; --l: 50%; }   /* plum      */
.wl__t--h6  { --h: 38;  --s: 38%; --l: 52%; }   /* amber     */
.wl__t--h7  { --h: 150; --s: 20%; --l: 40%; }   /* forest    */
.wl__t--h8  { --h: 258; --s: 16%; --l: 52%; }   /* iris      */

/* ---- the floating callouts — the same device the anatomy uses, so this form
        reads as part of the board rather than a stranger on it ---- */
.wl__tag {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--m-line); border-radius: 999px;
  padding: 6px 12px; font: 700 11.5px 'Inter', system-ui, sans-serif; color: var(--ink);
  box-shadow: 0 3px 12px rgba(28,46,31,.18); white-space: nowrap;
}
.wl__tag--a { left: -38px; top: 31%; }
.wl__tag--b { right: -34px; top: 62%; }

.wl__more {
  margin: 0; padding-top: 13px; text-align: center;
  border-top: 1px dashed var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.wl__more b { color: var(--ink); font-weight: 800; }

/* Motion is decoration here — the wall says the same thing standing still, so it simply
   stops. Nothing is hidden and no information lives in the movement. */
@media (prefers-reduced-motion: reduce) {
  .wl__cols .wl__run { animation: none; }
}

@media (max-width: 980px) {
  .wl__cols { height: 300px; }
}
@media (max-width: 560px) {
  .wl__tag { display: none; }          /* no gutter to hang them in once stacked */
}
@media (max-width: 420px) {
  .mech--wall .wl { padding: 16px 15px 15px; }
  .wl__n { font-size: 29px; }
  .wl__cols { height: 260px; gap: 7px; }
  .wl__run { gap: 7px; }
}

/* ---------- FORM 5b · UNDER THE HOOD (the /websites/ anatomy, part two) ----------
   Steve: "combine everything that makes a good website… what else am I missing?"

   Split in two rather than piling twenty callouts onto one window, because the things
   divide cleanly and the division IS the insight: the window is what a customer sees
   and decides on; this is what they never see but which decides whether they arrive.

   REGROUPED 2026-08-06 (Steve: "that's a lot of bullet points"). Twelve equal chips in
   a row read as a wall — no hierarchy, so no impact. Now three named groups on one
   continuous strip. Kept as a SPEC STRIP rather than three cards on purpose: the SEO
   page already uses a three-card trio, and repeating it here would rebuild the sameness
   the seven forms exist to prevent. */
.an__hood { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.an__hood-l {
  font: 800 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-dark); margin: 0 0 14px;
}
.an__hood-g { display: flex; flex-direction: column; gap: 13px; }
.an__grp { padding: 0 0 0 13px; border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.an__grp--key { border-left-color: var(--accent); }
.an__grp h5 {
  margin: 0 0 5px; font: 800 11px 'Inter', system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
.an__grp ul { margin: 0; padding: 0; list-style: none; }
.an__grp li { position: relative; padding-left: 13px; font-size: 12.6px; line-height: 1.5; color: var(--ink-soft); }
.an__grp li + li { margin-top: 3px; }
.an__grp li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 70%, transparent); }


/* the measurement group is the one nearly every builder skips */
.an__grp--key h5 { color: var(--accent-dark); }
.an__grp--key li { color: var(--accent-dark); font-weight: 600; }
.an__grp--key li::before { background: var(--accent-dark); }
.hero .an__hood { border-top-color: rgba(255,255,255,.22); }
.hero .an__hood-l { color: var(--accent); }
.hero .an__grp h5 { color: var(--bg); }
.hero .an__grp li { color: rgba(246,243,232,.82); }


.hero .an__grp--key h5 { color: var(--accent); }
.hero .an__grp--key li { color: var(--accent); font-weight: 600; }
.hero .an__grp--key li::before { background: var(--accent); }


/* ---------- FORM 5c · MORE OF THE PAGE (2026-08-06) ----------
   Steve: "add more detail to that design we made in the hero."
   Added density rather than height wherever possible — a favicon and a domain
   shape in the URL bar, a work-photo strip, the map-and-address block (the single
   most-used element on a local site after the phone number), and a footer NAP line.
   Everything stays shapes: no invented business name, no invented address text. */
.an__fav { width: 10px; height: 10px; border-radius: 3px; background: var(--m-change); flex: 0 0 auto; margin-left: 4px; }
.an__url { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.an__url u { display: block; width: 46%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.an__lock { width: 7px; height: 7px; border-radius: 2px; border: 1.2px solid color-mix(in srgb, var(--accent) 55%, transparent); flex: 0 0 auto; }

/* a strip of real work — the thing that separates a local site from a template */
.an__gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.an__gal i {
  aspect-ratio: 1; border-radius: 6px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, #fff), color-mix(in srgb, var(--ink) 9%, #fff));
}
.an__gal i:nth-child(2) { background: linear-gradient(150deg, color-mix(in srgb, #b5541f 16%, #fff), color-mix(in srgb, var(--ink) 8%, #fff)); }
.an__gal i:nth-child(4) { background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 16%, #fff), color-mix(in srgb, var(--accent) 12%, #fff)); }

/* where you are — after the phone number, the most-used thing on a local site */
.an__loc { display: grid; grid-template-columns: 74px 1fr; gap: 9px; align-items: stretch; }
.an__map {
  border-radius: 8px; border: 1px solid var(--m-line); position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 47%, color-mix(in srgb, var(--ink) 9%, transparent) 47% 53%, transparent 53%),
    linear-gradient(0deg,  transparent 58%, color-mix(in srgb, var(--ink) 9%, transparent) 58% 64%, transparent 64%),
    #fbfaf4;
}
.an__map::after {
  content: ""; position: absolute; left: 50%; top: 44%;
  width: 11px; height: 11px; border-radius: 50% 50% 50% 0;
  transform: translate(-50%,-50%) rotate(-45deg); background: var(--m-change);
}
.an__addr { display: flex; flex-direction: column; justify-content: center; gap: 6px; }

/* the footer line where name, address and phone must match the listings */
.an__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-top: 1px solid var(--m-line);
  background: color-mix(in srgb, var(--ink) 3%, #fff);
}
.an__foot i { width: 11px; height: 11px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 30%, transparent); flex: 0 0 auto; }

/* ══════ EXPANSIONS (2026-08-06) ══════
   Steve: "we help with sales in many ways… we optimize ads in many ways… same with SEO."
   Each page showed ONE mechanism where he works several levers. Each expansion is written
   in ITS OWN form's language rather than bolting the same strip onto three pages — which
   would rebuild the sameness the seven forms exist to prevent. */

/* ---------- CRM · THE RULE STACK ----------
   The form is a sentence, so breadth = MORE SENTENCES. Five rules, not a feature list. */
.rule + .rule { margin-top: 10px; }
.rule--sm { padding: 16px 20px; }
.rule--sm .rule__body { font-size: 15.5px; line-height: 1.6; font-weight: 600; }
.rule--sm .rule__body .m-chip { font-size: .78em; }
.rule__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-right: 9px; vertical-align: 1px;
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font: 800 10px 'Inter', system-ui, sans-serif; color: var(--accent-dark);
}

/* ---------- ADS · THE DIALS ----------
   The form is a journey, so breadth = what gets ADJUSTED along it, month to month. */
.tg__dials { margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--line); }
.tg__dials p {
  margin: 0 0 10px; font: 800 10.5px 'Inter', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark);
}
.tg__dials div { display: flex; flex-wrap: wrap; gap: 6px; }
.tg__dials span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; background: #fff;
  border: 1px solid var(--m-line); font: 600 11.5px 'Inter', system-ui, sans-serif; color: var(--ink-soft);
}
.tg__dials span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--m-change); }
.hero .tg__dials { border-top-color: rgba(255,255,255,.22); }
.hero .tg__dials p { color: var(--accent); }

/* ---------- SEO · WHAT FEEDS EACH SURFACE ----------
   The form is a ring, which is a poor container for a list — so the breadth sits
   UNDER it as one column per surface, keeping the three-surface model intact. */
.orb__feeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.orb__feed {
  background: #fff; border: 1px solid var(--m-line); border-radius: 13px; padding: 13px 14px;
}
.orb__feed h4 {
  margin: 0 0 9px; font: 800 11px 'Inter', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark);
}
.orb__feed ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.orb__feed li {
  position: relative; padding-left: 13px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
}
.orb__feed li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--m-change);
}
.orb__feed li em { font-style: normal; color: var(--muted); }
.orb__stat {
  margin: 14px 0 0; padding: 11px 14px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: 13px; line-height: 1.55; color: var(--ink);
}
.orb__stat b { color: var(--accent-dark); }
@media (max-width: 700px) { .orb__feeds { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   THE HANDOVER — the "how it works" section on all seven service pages.

   Read all seven before designing, and they are not seven different things the
   way the hero mechanisms are. Every one is the SAME shape:

     websites   call        → your number    → live
     local-seo  find leaks  → build          → show movement
     ads        start small → watch          → scale
     crm        find leak   → plug it        → it runs itself
     booking    availability→ wired in       → it just runs
     ordering   your menu   → wired to POS   → told to regulars
     pos        find what   → wire it up     → watch it run

   Diagnose → build → it runs without you. Since they genuinely share one shape,
   ONE form is correct here, and correctness beats variety — seven shapes for one
   idea would be decoration. This is also why it must differ from all seven hero
   forms, and it does: those draw a MECHANISM, this draws a HANDOVER.

   The figure IS the promise: a band showing whose hands the work is in, tapering
   from mine to almost nothing by phase three. That's the thing the copy keeps
   saying — "you get on with the job, the plumbing keeps working without you" —
   drawn instead of asserted. Static CSS, no motion.
   ══════════════════════════════════════════════════════════════════════════ */
.hand { margin-top: 6px; }
.hand__track {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-bottom: 26px;
}
/* the load bar — my hands, thinning out */
.hand__load { position: relative; height: 46px; }
.hand__load i {
  position: absolute; inset: 0;
  border-right: 1px solid var(--line);
}
.hand__load b {
  position: absolute; left: 0; right: 1px; bottom: 0; display: block;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 42%, transparent),
    color-mix(in srgb, var(--accent) 62%, transparent));
  border-radius: 4px 4px 0 0;
}
.hand__load--1 b { height: 100%; }
.hand__load--2 b { height: 62%; }
.hand__load--3 b { height: 14%; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.hand__load--3 i { border-right: 0; }
/* the label under each phase */
.hand__when {
  padding: 10px 14px 0 0;
  font: 800 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-dark);
}
.hand__who {
  padding: 3px 14px 0 0; font-size: 12px; color: var(--muted);
}
.hand__who--you { color: var(--accent-dark); font-weight: 700; }

/* the three phases themselves */
.hand__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hand__step h3 {
  margin: 0 0 7px; font: 700 17px/1.25 'Fraunces', Georgia, serif;
  letter-spacing: -.01em; color: var(--ink);
}
.hand__step p { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--ink-soft); }
.hand__step--last h3 { color: var(--accent-dark); }

.hand__cap {
  margin: 24px 0 0; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); line-height: 1.55;
}
@media (max-width: 720px) {
  .hand__track { margin-bottom: 20px; }
  .hand__load { height: 34px; }
  .hand__steps { grid-template-columns: 1fr; gap: 20px; }
  .hand__when { font-size: 9.5px; }
}

/* ---------- THE TOOL ROW on each service card (2026-08-06) ----------
   Steve had 21 tools and nowhere to put them. They must NOT become a nav item or a
   menu page — THE POSITION is narrow on WHO and OUTCOME, broad on HOW, with breadth
   revealed as reassurance and never as the lead. A list of 21 tools IS a menu.

   They already had a home: the six cards he'd written are exactly the right six
   groups, and all 21 map on with nothing left over. So the card headline stays the
   OUTCOME, the three bullets stay the argument, and the tools sit underneath as the
   reason to believe it. Someone scanning reads six outcomes; someone evaluating
   reads the capability. Neither gets a menu. */
.svc-tools {
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 5px;
}
.svc-tools span {
  font: 600 11px 'Inter', system-ui, sans-serif;
  padding: 3px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--svc) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--svc) 22%, transparent);
  color: color-mix(in srgb, var(--svc) 75%, var(--ink));
  white-space: nowrap;
}

/* the quote card that now leads /pricing/ — the form IS the page's lead, per Steve */
.quote-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: 20px;
  padding: 26px 26px 24px;
  box-shadow: 0 2px 6px rgba(28,46,31,.08), 0 30px 64px -26px rgba(28,46,31,.5);
}
.quote-card__l {
  margin: 0 0 16px; font: 800 11px 'Inter', system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent-dark);
}
.quote-card .contact-form { display: flex; flex-direction: column; gap: 12px; }
.quote-card__f {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 12.8px; line-height: 1.55; color: var(--muted);
}

/* ---------- THE GOOGLE RATING CHIP ----------
   Steve's own RATING-TRAP rule (Hero-Standard): lead the term you WIN, never one a
   rival beats. He wins the RATING (a clean 5.0) and loses on VOLUME (3 reviews), so
   the stars go up and the count stays off — printing "3" would summon exactly the
   comparison he loses. Live-verified on Maps 2026-08-06 before shipping. */
.g-rate {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(3px);
}
.g-rate__s { display: flex; gap: 2px; }
.g-rate__s svg { width: 14px; height: 14px; fill: #e8b33d; }
.g-rate__t {
  font: 700 13px 'Inter', system-ui, sans-serif; color: var(--bg); white-space: nowrap;
}
.g-rate__t b { font-weight: 800; }
/* on a cream ground (the testimonials band) */
.g-rate--light {
  background: #fff; border-color: var(--line);
}
.g-rate--light .g-rate__t { color: var(--ink); }

/* ══════ BY TRADE — the industry block (2026-08-06) ══════
   Steve: online-booking / online-ordering / pos-integration were "just sitting there",
   linked from the footer only. And he named the real organising idea himself: a gym owner
   doesn't want "tools", he wants the thing that works for gyms.

   So the three orphaned pages get a home inside a block organised by TRADE, each naming
   the ONE lever that moves that trade. Order is his actual pipeline mix (restaurants 25,
   auto 22, trades 18, medical 12, salon 12, retail 12, pet 7, professional 7, gyms 5),
   not invented verticals — the site should lead with what he actually sells to.

   Principle 10, narrower -> bigger: specificity is a multiplier. "Ordering straight to the
   kitchen" beats "we do tools" for a restaurant owner, every time. */
.trades { padding: 84px 0; }
.trade-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.trade {
  display: block; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 21px 19px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.trade:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 10px 26px -14px rgba(28,46,31,.45);
}
.trade__who {
  font: 700 16px/1.25 'Fraunces', Georgia, serif; color: var(--ink);
  letter-spacing: -.01em; margin: 0 0 9px;
}
.trade__lever {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
}
.trade__lever::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-dark); transform: translateY(-2px);
}
.trade__go {
  display: inline-block; margin-top: 12px;
  font: 700 12.5px 'Inter', system-ui, sans-serif; color: var(--accent-dark);
}
.trade:hover .trade__go { text-decoration: underline; }
.trades__foot { text-align: center; margin-top: 26px; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .trade-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .trade-grid { grid-template-columns: 1fr; } }

/* the guarantee, cut to one promise (2026-08-06) — the promise now LEADS the block
   instead of arriving after three paragraphs of setup */
.guarantee__promise--lead {
  font-size: clamp(23px, 2.6vw, 31px); line-height: 1.25;
  border-left: 0; padding-left: 0;
  /* It is the last thing in its own column now, and the column sets the measure — the old
     24ch cap is what left the wide card two-thirds empty. */
  margin-bottom: 0; max-width: none;
}

/* ══════ THE TERMS TABLE — /pricing/ (2026-08-06) ══════
   Steve: "the pricing section in /pricing is poorly done in general." Three faults, all real:

   1. THE DUPLICATION. Three of the five "what you'll never get" lines were just the card
      bullets inverted — "the build's included in the monthly" appeared as a feature AND as
      a never-get. The same fact twice reads as padding.
   2. It used the same .svc-card grid as the homepage, so the page that should feel most
      like a contract felt like another features section.
   3. A pricing page's job is to answer questions, and a features grid answers none of them
      directly.

   So: a plain terms table. Question on the left, answer on the right, the way a summary of
   an agreement actually reads. Distinct from every other block on the site, and it is the
   shape someone on a pricing page actually wants. */
.terms { border-top: 1px solid var(--line); }
.terms__row {
  display: grid; grid-template-columns: minmax(200px, 1fr) 1.5fr;
  gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.terms__q {
  margin: 0; font: 700 15.5px/1.4 'Inter', system-ui, sans-serif; color: var(--muted);
}
.terms__a {
  margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink);
}
.terms__a b { font-weight: 700; color: var(--accent-dark); }
.terms__a em { font-style: normal; display: block; margin-top: 5px; font-size: 14.5px; color: var(--muted); }
.terms__row--key .terms__a { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600; }
@media (max-width: 640px) {
  .terms__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .terms__q { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
}

/* ---------- INDUSTRY PAGES (/for/<trade>/) — 2026-08-06 ----------
   Steve: "maybe we can even expand and making dedicate pages for each industry block
   and the things that move the needle the most."

   Two new blocks. Deliberately NOT another card grid: the page already ends on the
   .trade cards, and two card grids on one page is the templated look we keep killing.

   THE MOMENT (hero figure). Principle 17 drawn: the page opens on the LOSS, not on what
   I'd build. Three beats of how it usually goes, the third one marked. Every beat is a
   described behaviour — never a statistic — because nothing here is measured and an
   invented number would be a lie with better rhythm. */
.moment {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 24px 24px 20px;
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 30px rgba(10, 22, 12, 0.24), 0 34px 74px rgba(10, 22, 12, 0.2);
}
.moment__label {
  margin: 0 0 16px;
  font: 700 11.5px 'Inter', system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(246, 243, 232, 0.5);
}
.moment__row {
  display: grid; grid-template-columns: 106px 1fr; gap: 16px;
  padding: 13px 0; align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}
.moment__row:first-of-type { border-top: 0; padding-top: 0; }
.moment__t {
  margin: 0; font: 600 12.5px/1.5 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em; color: rgba(246, 243, 232, 0.46);
}
.moment__p {
  margin: 0; font-size: 15.5px; line-height: 1.5;
  color: rgba(246, 243, 232, 0.86);
}
/* the beat where the money leaves */
.moment__row--loss { position: relative; }
.moment__row--loss .moment__t { color: #c3da7e; }
.moment__row--loss .moment__p { color: #f6f3e8; font-weight: 500; }
.moment__row--loss::before {
  content: ""; position: absolute; left: -24px; top: 10px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.moment__cost {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font: italic 500 14.5px/1.5 'Fraunces', Georgia, serif;
  color: rgba(246, 243, 232, 0.62);
}
@media (max-width: 640px) {
  .moment { padding: 20px 18px 17px; }
  .moment__row { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
  .moment__row--loss::before { left: -18px; }
}

/* THE LEAKS. Four things I see again and again in this trade — read as a diagnosis list,
   not as features. Big serif number, the leak named, the explanation beside it. */
.leaks { border-top: 1px solid var(--line); margin-top: 6px; }
.leak {
  display: grid; grid-template-columns: 62px minmax(180px, 1fr) 1.55fr;
  gap: 4px 22px; padding: 22px 0; align-items: baseline;
  border-bottom: 1px solid var(--line);
}
/* Placed EXPLICITLY, never by auto-flow. The row has three children and two of them are
   <p> — a bare `.leak p` rule catches the NUMBER as well as the explanation, which is
   exactly how the first pass landed the heading in column 1 and the number beside it. */
.leak .leak__n {
  grid-column: 1; grid-row: 1;
  margin: 0; font: 600 30px/1 'Fraunces', Georgia, serif;
  color: color-mix(in srgb, var(--accent) 42%, transparent);
  letter-spacing: -0.02em;
}
.leak h3 {
  grid-column: 2; grid-row: 1;
  margin: 0; font: 700 19px/1.3 'Fraunces', Georgia, serif;
  color: var(--ink); letter-spacing: -0.01em;
}
.leak > p:last-of-type {
  grid-column: 3; grid-row: 1;
  margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft);
}
@media (max-width: 860px) {
  .leak { grid-template-columns: 40px 1fr; gap: 5px 14px; padding: 18px 0; }
  .leak .leak__n { grid-column: 1; grid-row: 1 / span 2; font-size: 23px; }
  .leak h3 { grid-column: 2; grid-row: 1; font-size: 18px; }
  .leak > p:last-of-type { grid-column: 2; grid-row: 2; font-size: 15.5px; }
}

/* THE LEVER — the one place I'd start on this trade. A dark panel mid-page so the industry
   pages get the same shape variation the service pages got (section--split's comment says
   why: a template is one layout repeated, so repeating our own layout reads as template). */
.lever { background: #17251a; color: #f6f3e8; padding: 76px 0; position: relative; overflow: hidden; }
.lever::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgba(107,142,35,.28) 0%, rgba(107,142,35,0) 58%);
}
.lever > .container {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 54px; align-items: center;
}
.lever__eyebrow {
  margin: 0 0 12px; font: 700 11.5px 'Inter', system-ui, sans-serif;
  letter-spacing: 0.11em; text-transform: uppercase; color: #c3da7e;
}
.lever__title {
  margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 800;
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.06; letter-spacing: -0.025em;
}
.lever__body { margin: 0 0 24px; font-size: 17px; line-height: 1.65; color: rgba(246,243,232,.84); }
@media (max-width: 900px) {
  .lever { padding: 58px 0; }
  .lever > .container { grid-template-columns: 1fr; gap: 26px; }
}
.trades__foot--siblings {
  margin-top: 10px; font-size: 14px; line-height: 1.9; color: var(--muted);
  max-width: 780px; margin-left: auto; margin-right: auto;
}
.trades__foot--siblings a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.trades__foot--siblings a:hover { color: var(--accent-dark); border-color: var(--accent); }

/* The Handover's axis caption (2026-08-06). Steve read "my hands / my hands / runs without
   you" and said it didn't make sense — correctly. Two faults: phases 1 and 2 carried the
   same label while the bar stepped 100% -> 62%, so the middle segment said nothing; and on
   the two ONGOING services the bar cannot mean "my hands leaving", because ads and SEO are
   never handed over. Each page now states what its bar measures. An unlabelled quantity in
   a diagram is a guess the reader has to make. */
.hand__axis {
  margin: 0 0 9px;
  font: 700 10.5px 'Inter', system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ══════ THE MACHINE'S VIEW — /websites/ (2026-08-06, third attempt) ══════
   Steve, on the twelve-line spec list under the browser figure: "that doesn't show well.
   Remove it or just put the most important tags underneath the design picture. Put some
   more detail in the design picture."

   Third attempt at this content, and the first two are why this one is shaped differently:
   twelve flat chips (rejected), then three named groups of four (rejected). When the format
   keeps changing and the reaction doesn't, the format was never the problem — LISTING was.
   A spec list reads as effort, and nobody was ever sold by a spec sheet.

   So the window above stays WHAT A CUSTOMER SEES, and the half nobody sees stops being
   listed and starts being DRAWN: five small artifacts, each one the thing itself rather
   than a sentence about it. Same information, no bullets, and it looks like more work
   because it is. (Ramp's product pages contain no bullet list anywhere — that's the model.)

   The other eight lines aren't deleted so much as absorbed: a page per service, real
   photos, NAP matching, one-thumb and forms-that-arrive are all visible IN the window. */
.an__mach { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.an__m {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 11px; padding: 12px 11px 11px;
}
.an__m-art { height: 26px; display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.an__m-l {
  margin: 0; font: 700 10.5px/1.35 'Inter', system-ui, sans-serif;
  color: rgba(246, 243, 232, .92);
}
.an__m-s { display: block; font-weight: 500; color: rgba(246, 243, 232, .5); margin-top: 2px; }
.an__m svg { fill: none; stroke: #c3da7e; stroke-width: 1.8; }

/* 1 · the load meter — filled well short of the limit mark */
.an__m-bar { position: relative; flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); }
.an__m-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 4px; background: #c3da7e; }
.an__m-bar u { position: absolute; left: 72%; top: -4px; bottom: -4px; width: 1.5px; background: rgba(255,255,255,.45); }

/* 3 · a result line, ticked */
.an__m-res { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.an__m-res i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.34); }
.an__m-res i:first-child { width: 82%; background: #c3da7e; height: 5px; }
.an__m-res i:last-child { width: 56%; }

/* 4 · what a machine actually reads off the page */
.an__m-code {
  flex: 1; font: 600 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #c3da7e; background: rgba(0,0,0,.24); border-radius: 5px;
  padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 5 · calls, counted rather than guessed at */
.an__m-tally { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.an__m-tally i { width: 4px; border-radius: 2px 2px 0 0; background: #c3da7e; opacity: .55; }
.an__m-tally i:nth-child(1) { height: 40%; }
.an__m-tally i:nth-child(2) { height: 66%; }
.an__m-tally i:nth-child(3) { height: 100%; opacity: 1; }

@media (max-width: 900px) { .an__mach { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .an__mach { grid-template-columns: repeat(2, 1fr); gap: 7px; } }

/* the quote form inside the window — "forms that reach your inbox" was a claim with no
   picture, and after the phone number a form is the most-used element on a local site */
.an__form {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 9px 10px; border-radius: 9px;
  border: 1px solid var(--m-line); background: color-mix(in srgb, var(--accent) 4%, #fff);
}
.an__form-l { display: block; width: 44px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 26%, transparent); flex: 0 0 100%; margin-bottom: 2px; }
.an__form-i { display: block; flex: 1 1 100%; height: 13px; border-radius: 5px; background: #fff; border: 1px solid var(--m-line); }
.an__form-i--half { flex: 1 1 40%; }
.an__form-b {
  padding: 4px 11px; border-radius: 999px; background: var(--m-change); color: #fff;
  font: 700 9.5px 'Inter', system-ui, sans-serif; margin-left: auto;
}

/* ══════ THE OTHER HALF — /crm/ (2026-08-06) ══════
   Steve: "we talk about plugging leaks but we also generate leads as well… it doesn't even
   scratch the surface on CRM & sales."

   He's right, and the fix is NOT to widen the hero. THE POSITION is narrow on WHO and
   OUTCOME, broad on HOW, with breadth revealed as reassurance and never as the lead — and
   he said himself the focused hero reads well. So the hero stays on instant-reply and the
   BODY widens.

   What was actually missing: the page only covered NOT LOSING leads. Reactivating a list of
   people who already paid you once is the fastest money in a local business, and it appeared
   nowhere on the site except as a single bullet ("win-backs"). Every row here sells to an
   asset the owner ALREADY OWNS — which is why it belongs on this page and not on /ads/.

   Deliberately not a bullet list. Same lesson as /websites/: the site kept answering
   "what do you do?" with an inventory. Asset on the left, what it produces on the right —
   a ledger, which is the shape this argument actually is. */
.assets { border-top: 1px solid var(--line); margin-top: 8px; }
.asset {
  display: grid; grid-template-columns: minmax(190px, 1fr) 1.7fr;
  gap: 6px 30px; padding: 22px 0; align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.asset__have {
  margin: 0; font: 700 18px/1.3 'Fraunces', Georgia, serif;
  color: var(--ink); letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 10px;
}
.asset__have::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: translateY(-3px);
}
.asset__gets { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.asset__gets b { color: var(--accent-dark); font-weight: 600; }
@media (max-width: 780px) {
  .asset { grid-template-columns: 1fr; gap: 7px; padding: 18px 0; }
  .asset__have { font-size: 17px; }
  .asset__gets { font-size: 15.5px; }
}

/* ══════ THE SPLIT — /local-seo/ (2026-08-06) ══════
   Steve pasted the whole three-surface block — fifteen bullets and a closing paragraph —
   and said: "I feel like we can make this more impactful without the word vomit."

   The diagnosis: the sharpest fact on the page was in the worst position on it. "About 60%
   of what an AI cites for a local answer sits on sites you don't own" is the whole argument
   for why this work is different from what everyone else sells — and it was prose, at the
   bottom, after fifteen bullets nobody finishes.

   So the finding becomes the PICTURE, and the fifteen bullets become its contents: the
   sources are named INSIDE the bar they belong to instead of listed above it. Same
   information, one image, and the point lands before a word is read.

   Third instance of the same fix tonight (after /websites/ and /crm/): stop answering
   "what do you do?" with an inventory. */
.split {
  background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 24px 26px 22px;
  box-shadow: 0 2px 6px rgba(28,46,31,.06), 0 22px 50px -28px rgba(28,46,31,.4);
}
.split__l {
  margin: 0 0 16px; font: 700 11px 'Inter', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.split__bar { display: flex; gap: 4px; }
.split__seg {
  /* border-box matters here: without it the 32px of horizontal padding sits OUTSIDE the
     flex basis, so a 60/40 grow ratio renders 58/42. A figure that prints a number has to
     measure that number — measured at 1440px and at 390px, not eyeballed. */
  box-sizing: border-box;
  border-radius: 10px; padding: 15px 16px 14px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
/* the 60 — the half almost nobody works, so it gets the weight.
   Explicit percentage bases, NOT grow factors: `flex: 60 1 0` vs `40 1 0` measured 58.4/41.6
   because content min-widths nudge the free-space split. A figure that prints "~60%" has to
   BE 60%, so the widths are stated outright and verified at both breakpoints. The 2px is
   this segment's share of the 4px gap. */
.split__seg--theirs {
  flex: 0 0 calc(60% - 2px); background: var(--accent-dark); color: #f6f3e8;
}
.split__seg--yours {
  flex: 0 0 calc(40% - 2px); background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.split__pct {
  font: 800 26px/1 'Fraunces', Georgia, serif; letter-spacing: -.02em;
}
.split__seg--yours .split__pct { color: var(--accent-dark); }
.split__who { font: 700 12.5px 'Inter', system-ui, sans-serif; }
.split__seg--theirs .split__who { color: rgba(246,243,232,.72); }
.split__seg--yours .split__who { color: var(--ink-soft); }
/* the fifteen bullets, relocated into the half they actually belong to */
.split__src {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.55;
}
.split__seg--theirs .split__src { color: rgba(246,243,232,.8); }
.split__seg--yours .split__src { color: var(--muted); }
.split__pt {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font: 600 15.5px/1.5 'Fraunces', Georgia, serif; color: var(--ink);
}
.split__pt b { color: var(--accent-dark); }

/* the three surfaces, one sentence each instead of five bullets each */
.surf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.surf__one h4 {
  margin: 0 0 7px; font: 700 16px/1.25 'Fraunces', Georgia, serif;
  color: var(--ink); letter-spacing: -.01em;
  padding-left: 13px; border-left: 2px solid var(--accent);
}
.surf__one p { margin: 0 0 0 13px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.surf__one em { font-style: normal; color: var(--muted); }

/* This whole block sits inside the DARK hero on /local-seo/ — the .split is a white card so
   it reads fine, but the three surface columns were built in body colours and landed as dark
   green on dark green, effectively invisible. Same class of miss as the manifold wires: a
   component styled for one context, dropped into another. Look at the rendered page. */
.hero .surf__one h4 { color: var(--bg); border-left-color: var(--accent); }
.hero .surf__one p { color: rgba(246, 243, 232, .82); }
.hero .surf__one em { color: rgba(246, 243, 232, .55); }

@media (max-width: 780px) {
  /* stacked, so the 60/40 can't be read off the widths any more — the numbers carry it */
  .split__bar { flex-direction: column; }
  .split__seg--theirs, .split__seg--yours { flex: 0 0 auto; }
  .surf { grid-template-columns: 1fr; gap: 18px; }
}

/* ══════ THE HANDOVER, v2 — the rail (2026-08-06) ══════
   Steve: "approach that how-it-works section like we did the hero for the new pages — we
   went and found a bunch of examples and used the ones that made sense. We can probably
   make it look more in-depth without all the word vomit just by making a clean design."

   References gathered at /__lab/wordvomit. The one that fits is Fruitful's: a step rail
   where the eye is on ONE beat at a time, and the structure does the explaining. Ramp's
   rule applies underneath it — an artifact per point, never a bullet.

   What was actually wrong with v1: it was THREE separate objects stacked — an abstract
   load bar, a row of phase labels, and a row of step cards — and the reader had to join
   them up themselves. The bar was the weakest part: an unlabelled quantity that needed a
   caption to mean anything.

   v2 is ONE object. A spine runs down the left with a node per phase; the phase label, who
   is holding the work, the heading and the copy all hang off that node. Same words, no new
   ones — but the sequence is now visible instead of implied, and the taper the bar used to
   carry is carried by the spine fading out toward the last node.

   No JS: the scroll-sync in the reference is what makes it feel alive, but it also makes
   the section useless without script. A rail is legible on the first paint. */
.hand--rail { margin-top: 4px; }
.hand__rail { position: relative; padding-left: 34px; }
.hand__node { position: relative; padding-bottom: 30px; }
.hand__node:last-child { padding-bottom: 0; }
/* the node — ring and centre drawn on ONE pseudo, which frees ::after for the connector */
.hand__node::before {
  content: ""; position: absolute; left: -34px; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: #fff radial-gradient(circle at 50% 50%, var(--accent) 0 4px, transparent 4px);
}
/* the connector lives BETWEEN nodes, so nothing dangles past the last one — a single
   spine on the container overshoots by whatever the last node's copy happens to be tall */
.hand__node:not(:last-child)::after {
  content: ""; position: absolute; left: -25px; top: 26px; bottom: 2px; width: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 70%, transparent),
    color-mix(in srgb, var(--accent) 30%, transparent));
}
/* the payoff node — the one where it stops being mine */
.hand__node--last::before {
  border-color: var(--accent-dark);
  background: var(--accent-dark) radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 4px);
}

.hand__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-bottom: 6px;
}
.hand__when {
  padding: 0; font: 800 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-dark);
}
.hand__who {
  padding: 0; font-size: 12px; color: var(--muted);
  padding-left: 9px; border-left: 1px solid var(--line);
}
.hand__who--you { color: var(--accent-dark); font-weight: 700; border-left-color: var(--accent); }
.hand__node h3 {
  margin: 0 0 6px; font: 700 20px/1.25 'Fraunces', Georgia, serif;
  letter-spacing: -.01em; color: var(--ink);
}
.hand__node--last h3 { color: var(--accent-dark); }
.hand__node p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); max-width: 62ch; }

@media (max-width: 720px) {
  .hand__rail { padding-left: 28px; }
  .hand__node::before {
    left: -28px; width: 16px; height: 16px;
    background: #fff radial-gradient(circle at 50% 50%, var(--accent) 0 3px, transparent 3px);
  }
  .hand__node--last::before {
    background: var(--accent-dark) radial-gradient(circle at 50% 50%, #fff 0 3px, transparent 3px);
  }
  .hand__node:not(:last-child)::after { left: -21px; top: 22px; }
  .hand__node { padding-bottom: 24px; }
  .hand__node h3 { font-size: 18px; }
}

/* ══════ /new-business/ — the assurance strip (2026-08-06) ══════
   Steve: "my new business page the middle section is off center and looks way off."

   He was right and the cause was structural, not cosmetic. `.section--split > .container`
   is a TWO-column grid and that section had THREE children, so `.why-points` auto-placed
   into the narrow 340px left column, underneath the sticky heading. Measured before the
   fix: head x147 w340 · steps x543 w736 · why-points x147 w340.

   Same auto-flow class as the .leak bug: a child nobody explicitly placed lands wherever
   the grid has room, and it looks broken rather than erroring.

   The four points are reassurance, not process, so they don't belong inside the how-it-works
   grid at all. They get their own full-width strip under it. */
.section--split > .container--flat {
  display: block; grid-template-columns: none; margin-top: 44px;
}
.nb-assure {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.nb-assure__one h4 {
  margin: 0 0 5px; font: 700 15px/1.3 'Fraunces', Georgia, serif;
  color: var(--ink); letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.nb-assure__one h4::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); transform: translateY(-2px);
}
.nb-assure__one p { margin: 0 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) { .nb-assure { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px) { .nb-assure { grid-template-columns: 1fr; } }

/* ══════ PHONE PASS (2026-08-06) — Steve: "it's not phone optimized" ══════
   Measured before touching anything: homepage 17,033px at 390×844 = 20.2 screens, zero
   horizontal overflow, 19 tap targets under 40px, text down to 10px. So the faults are
   REACH and DENSITY, not breakage. */
@media (max-width: 720px) {

  /* ---- TAP TARGETS. Apple's floor is 44×44pt, Google's 48dp. The footer nav links measured
     22px tall and the footer phone number 96×17. A phone number nobody can reliably hit is
     the worst thing to get wrong on a local-business site — it's the whole point of the page. */
  .footer-nav a {
    display: block; padding: 11px 0; min-height: 44px;
    line-height: 22px; box-sizing: border-box;
  }
  .footer-address a, .footer-brand a[href^="tel:"] {
    display: inline-block; padding: 10px 0; min-height: 44px; line-height: 24px;
  }
  .tmn-foot a, .trades__foot a, .section-sub a { display: inline-block; padding: 8px 0; min-height: 40px; }

  /* ---- TEXT FLOOR. Nothing readable should sit below 12px on a phone. */
  .trust-marquee__label, .footer-areas-label, .footer-areas-list,
  .chatbot-status, .chatbot-disclaimer { font-size: 12px; }

  /* ---- TRADES: nine cards in one column was 1,512px of the section's 2,229px. They are short
     cards — a trade name, one line, a link — so two across reads fine and halves the block. */
  .trade-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trade { padding: 15px 14px 14px; }
  .trade__who { font-size: 14.5px; margin-bottom: 7px; }
  .trade__lever { font-size: 13px; line-height: 1.45; }
  .trade__go { font-size: 11.5px; margin-top: 9px; }
}

/* Below ~430px two trade columns get too tight for the longer trade names, so they go back
   to one. Measured at 390px: two columns give 158px of card width, which clips
   "CPAs, agents & attorneys" — the narrower breakpoint is where that starts to bite. */
@media (max-width: 380px) {
  .trade-grid { grid-template-columns: 1fr; }
}

/* The five tap targets the first pass missed, found by walking the DOM rather than guessing
   selectors. `.contact-direct` is the one that matters: it holds the email AND the phone
   number, both 20px tall — the two things a customer on a phone is most likely to reach for. */
@media (max-width: 720px) {
  .contact-direct a {
    display: inline-block; padding: 12px 0; min-height: 44px;
    line-height: 20px; box-sizing: border-box;
  }
  .site-header .logo, .footer-brand .logo { min-height: 44px; align-items: center; }
  .g-rate { min-height: 44px; box-sizing: border-box; }
  .trade__go { font-size: 12px; }
}

/* Standalone card CTAs ("See the build →", "View live site →") measured 96×22. Links sitting
   INSIDE a sentence are deliberately left alone — padding them to 44px would wreck the line
   spacing of the paragraph, and Google's own guidance exempts inline text links. */
@media (max-width: 720px) {
  .work-link, .build-link, .card-link {
    display: inline-block; padding: 11px 0; min-height: 44px;
    line-height: 22px; box-sizing: border-box;
  }
}

/* The proof-card caption row. `.proof-cap` is flex-wrap:nowrap with a nowrap `.proof-tag`
   inside it, so the LONGEST tag ("Window tint & auto glass · Klamath Falls", 336px) can't
   shrink and shoves the "Read the story ↻" hint to x=401 — completely off a 390px screen.
   The card clips it rather than scrolling, so there's no horizontal scrollbar to notice:
   the flip affordance is simply invisible, and it happens on the FIRST and most prominent
   card. Found by walking every element's rect, not by looking at the page. */
@media (max-width: 720px) {
  .proof-cap { flex-wrap: wrap; gap: 6px 12px; }
  .proof-tag { white-space: normal; }

  /* Real reading text below 12px. The `an__*` labels are deliberately excluded — they are
     elements INSIDE a drawn miniature of a website, so they are picture, not copy; scaling
     them up would break the drawing they belong to. */
  .hand__axis, .proof-tag, .proof-back-hint, .proof-hint { font-size: 12px; }
}

/* The line between "picture" and "copy" inside the /websites/ figure, on a phone.
   INSIDE the drawn browser window — an__tel, an__cta, an__form-b, an__hrs — is a scaled-down
   simulation of a website. Small type is what makes it read as a miniature; enlarging it
   breaks the illusion. Those stay.
   But an__tag (the callouts pointing AT the figure) and an__m-l / an__m-s (the labels on the
   five machine-view tiles) are things a PERSON READS. They were 10.5–11.5px. */
@media (max-width: 720px) {
  .an__tag { font-size: 12px; }
  .an__m-l { font-size: 12px; }
  .an__m-s { font-size: 12px; }
}

/* An odd number of build cards would leave a hole in the 2-up grid; a lone
   last card spans instead of sitting beside empty space. Single-column
   breakpoints are unaffected. */
@media (min-width: 861px) {
  .work-grid-4 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}