/* Same Page Search website, styled to the Same Page Search brand guidelines (Version 1, October 2026).
   Charcoal and Cream do most of the work; Sunrise (orange to pink, 60deg) is the
   spark: the main button, the wordmark's full stop and the rising bars.
   Rule of thumb: about 60% Cream, 30% Charcoal, 10% Sunrise.
   Text on Sunrise is always Charcoal. */

:root {
  --charcoal: #141414;     /* text, dark sections, the wordmark */
  --graphite: #2a2a2a;     /* raised surfaces on dark */
  --cream: #fff6f0;        /* page background */
  --peach: #ffe0d2;        /* soft panels and cards */
  --white: #ffffff;
  --stone: #5c5c5c;        /* secondary text on Cream */
  --mist: #a3a3a3;         /* secondary text on Charcoal */
  --orange: #ff6b2c;       /* Sunrise Orange: highlights on Charcoal, never text on Cream */
  --pink: #ee3e74;         /* Sunrise Pink */
  --ember: #b84300;        /* orange links on Cream */
  --berry: #b8264f;        /* pink links on Cream */
  --line: #ecdcd2;         /* rules on Cream */
  --line-dark: #3a3a3a;    /* rules on Charcoal */
  --sunrise: linear-gradient(60deg, #ff6b2c, #ee3e74);

  /* Report colours: only for scores, always with a word */
  --good: #1f7a4d;
  --warn: #9a6700;
  --poor: #b42318;

  --font-display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --font-body: "Figtree", Arial, "Helvetica Neue", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* audit figures only */

  --step--1: 0.875rem;
  --step-0: 1.0625rem;     /* 17px body */
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 4.5vw, 2.5rem);    /* section headings 32 to 40px */
  --step-4: clamp(2.6rem, 6.5vw, 4rem);    /* main heading 48 to 64px */

  --radius: 12px;
  --wrap: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--ember); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(56px, 9vw, 104px); }
.band--dark { background: var(--charcoal); color: var(--cream); }
.band--dark a:not(.btn) { color: var(--orange); }
.band--dark :focus-visible { outline-color: var(--orange); }
.band--peach { background: var(--peach); }
.band--flush { padding-top: 0; }

.eyebrow {
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ember);
}
.band--dark .eyebrow { color: var(--orange); }
.section-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: 44px; }
.section-head p:not(.eyebrow) { color: var(--stone); font-size: var(--step-1); line-height: 1.45; }
.band--dark .section-head p:not(.eyebrow) { color: var(--mist); }

/* Placeholders still to fill in (see README) */
.todo {
  background: #fff1b8;
  color: var(--charcoal);
  outline: 1.5px dashed #9a6700;
  border-radius: 4px;
  padding: 0 4px;
}

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--charcoal); color: var(--cream); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { left: max(16px, env(safe-area-inset-left, 0px)); }

/* Wordmark: the name in Bricolage ExtraBold with a Sunrise full stop */
.wordmark {
  font: 800 1.55rem/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .dot {
  background: var(--sunrise);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.band--dark .wordmark, .wordmark--reversed { color: var(--cream); }

/* Buttons: pills. One Sunrise button per screen; everything else is Charcoal or outline. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--sunrise { background: var(--sunrise); color: var(--charcoal); }
.btn--sunrise:hover { box-shadow: 0 10px 24px -12px var(--pink); }
.btn--dark { background: var(--charcoal); color: var(--cream); }
.btn--outline { border-color: var(--charcoal); color: var(--charcoal); background: transparent; }

/* Header */
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--cream);
}
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--charcoal); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.nav a:hover { color: var(--ember); }
.nav .btn { min-height: 40px; padding: 8px 18px; font-size: 0.95rem; color: var(--cream); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; align-items: center;
    background: none; border: 1.5px solid var(--charcoal); border-radius: 999px;
    padding: 8px 16px; font: 600 0.95rem var(--font-body); color: var(--charcoal); cursor: pointer;
  }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px));
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 14px; border-bottom: 0; }
}

/* Hero */
.hero { padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; }
.hero .lede { font-size: var(--step-1); color: var(--stone); line-height: 1.45; max-width: 32rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-note { font-size: var(--step--1); color: var(--stone); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Illustrated map results: what a customer sees when they search nearby */
.mappack {
  margin: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 28px 60px -34px rgba(20, 20, 20, .45);
  overflow: hidden; min-width: 0;
}
.mappack-search {
  display: flex; align-items: center; gap: 10px;
  margin: 14px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 0.95rem;
}
.mappack-search svg { width: 16px; height: 16px; flex: none; color: var(--stone); }
.mappack-map {
  height: 120px; position: relative;
  background:
    linear-gradient(90deg, transparent 47%, #f1e4da 47% 53%, transparent 53%) 0 0 / 90px 100%,
    linear-gradient(0deg, transparent 45%, #f1e4da 45% 55%, transparent 55%) 0 0 / 100% 60px,
    #fbefe7;
}
.pin { position: absolute; width: 22px; height: 22px; color: var(--mist); }
.pin--you { width: 30px; height: 30px; color: var(--orange); }
.mappack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.listing {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--line);
}
.listing strong { font-size: 1rem; }
.listing small { color: var(--stone); font-size: 0.86rem; grid-column: 1; }
.listing .stars { font-family: var(--font-data); font-size: 0.82rem; color: var(--stone); grid-column: 1; }
.listing .acts { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; }
.listing .acts span { font-size: 0.78rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.listing--you { background: var(--peach); order: -1; animation: rise .9s cubic-bezier(.2,.8,.2,1) .4s both; }
.listing--you .acts span { background: var(--charcoal); color: var(--cream); border-color: transparent; }
.mappack-caption { padding: 10px 18px 14px; font-size: 0.78rem; color: var(--stone); border-top: 1px solid var(--line); }
@keyframes rise { from { transform: translateY(150px); } to { transform: none; } }
@media (max-width: 420px) { .listing .acts span:last-child { display: none; } }

/* The problem: the five-step message */
.problem { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.problem > * { min-width: 0; }
.problem-copy { display: grid; gap: 18px; font-size: 1.12rem; }
.problem-copy p { color: var(--stone); }
.problem-copy p strong { color: var(--charcoal); font-weight: 600; }
.gap-card { background: var(--peach); border-radius: 20px; padding: clamp(22px, 4vw, 32px); display: grid; gap: 18px; }
.gap-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.gap-row > div { display: grid; gap: 2px; }
.gap-label { font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--stone); }
.gap-num { font: 700 clamp(2.4rem, 6vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gap-sub { font-family: var(--font-data); font-size: 0.8rem; color: var(--stone); }
.gap-arrow { font: 700 1.8rem/1 var(--font-display); padding-bottom: 18px; }
.gap-card > p { font-weight: 600; }
.gap-card small { color: var(--stone); font-size: 0.8rem; }
@media (max-width: 860px) { .problem { grid-template-columns: 1fr; } }

/* Found, chosen, booked: the rising bars motif on a Charcoal band with a 60deg edge */
.band--angled { clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(56px, 9vw, 104px) + 32px); }
.rise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: end; }
.rise li { display: grid; gap: 14px; min-width: 0; }
.rise .bar { background: var(--sunrise); border-radius: 10px 10px 0 0; position: relative; }
.rise li:nth-child(1) .bar { height: 70px; }
.rise li:nth-child(2) .bar { height: 120px; }
.rise li:nth-child(3) .bar { height: 180px; }
.rise .bar svg { position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; color: var(--charcoal); }
.rise h3 { font-size: var(--step-2); display: flex; gap: 10px; align-items: baseline; }
.rise h3 span { font-size: var(--step-0); color: var(--orange); font-family: var(--font-body); font-weight: 600; }
.rise p { color: var(--mist); }
.rise-arrow { display: block; margin: 28px 0 0 auto; width: min(340px, 60%); height: auto; }
@media (max-width: 700px) {
  .rise { grid-template-columns: 1fr; }
  .rise li { grid-template-columns: 96px 1fr; align-items: end; gap: 6px 18px; }
  .rise .bar { grid-row: 1 / span 2; border-radius: 10px; }
  .rise li:nth-child(1) .bar { height: 64px; }
  .rise li:nth-child(2) .bar { height: 88px; }
  .rise li:nth-child(3) .bar { height: 112px; }
}

/* What we do */
.service { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.service-intro { display: grid; gap: 16px; min-width: 0; }
.service-intro p:not(.eyebrow) { color: var(--stone); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.checklist li:first-child { border-top: 1px solid var(--line); }
.checklist svg { width: 22px; height: 22px; color: var(--charcoal); margin-top: 3px; }
.checklist strong { display: block; font-size: 1.05rem; }
.checklist span { color: var(--stone); }
@media (max-width: 860px) { .service { grid-template-columns: 1fr; } }

/* Services */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-card {
  display: grid; gap: 10px; align-content: start; min-width: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  color: var(--charcoal); text-decoration: none; transition: transform .15s ease, border-color .15s ease;
}
.service-card:hover { transform: translateY(-2px); border-color: var(--charcoal); }
.service-card--soon:hover { transform: none; border-color: var(--line); }
.service-card p { color: var(--stone); font-size: 0.98rem; }
.service-card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ember); margin-top: 4px; }
.service-card-link svg { width: 18px; height: 18px; }
.badge { justify-self: start; display: inline-block; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--stone); }
.badge--live { background: var(--peach); border-color: transparent; color: var(--charcoal); }
@media (max-width: 960px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .service-grid { grid-template-columns: 1fr; } }

/* Service pages */
.hero--service .wrap { grid-template-columns: 1fr; }
.hero--service .hero-copy { max-width: 46rem; }
.breadcrumb { font-size: var(--step--1); color: var(--stone); }
.breadcrumb a { color: var(--stone); }
.facts { display: grid; gap: 14px; margin: 8px 0 0; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--ember); }
.facts dd { margin: 0; }
.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.cta-band > div { display: grid; gap: 8px; min-width: 0; }
.cta-band p { color: var(--mist); }
.other-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.other-links a { color: var(--charcoal); text-decoration: none; font-weight: 600; border: 1.5px solid var(--charcoal); border-radius: 999px; padding: 8px 16px; }
.other-links a:hover { background: var(--charcoal); color: var(--cream); }

/* How it works (a real sequence, so it's numbered) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--charcoal); min-width: 0; }
.step::before { counter-increment: step; content: counter(step); font: 800 2.4rem/1 var(--font-display); color: var(--charcoal); }
.step p { color: var(--graphite); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* Sample report: one score, then the fixes in order */
.report { background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.report-banner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  background: var(--charcoal); color: var(--cream);
  font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em;
  padding: 12px 24px;
}
.report-banner .wordmark { font-size: 1.05rem; color: var(--cream); }
.report-top { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 28px 28px 24px; border-bottom: 1px solid var(--line); }
.report-top > div { min-width: 0; display: grid; gap: 6px; }
.report-top h3 { font-size: var(--step-2); }
.report-top p { color: var(--stone); }
.report-top .verdict { color: var(--charcoal); font-weight: 600; }
.score-ring { width: 108px; height: 108px; }
.score-ring text { font-family: var(--font-display); font-weight: 800; fill: var(--charcoal); }
.report-body { display: grid; grid-template-columns: 1.4fr 1fr; }
.report-body > * { min-width: 0; }
.checks-wrap { overflow-x: auto; border-right: 1px solid var(--line); }
.checks { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.checks th, .checks td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.checks th { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--stone); }
.checks td:first-child { font-weight: 600; white-space: nowrap; }
.checks td:last-child { color: var(--stone); }
.checks .fig { font-family: var(--font-data); font-size: 0.86rem; color: var(--charcoal); }
.checks tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.status::before { font-weight: 700; }
.status--good { color: var(--good); }
.status--good::before { content: "✓"; }
.status--warn { color: var(--warn); }
.status--warn::before { content: "!"; }
.status--poor { color: var(--poor); }
.status--poor::before { content: "✕"; }
.report-side { padding: 24px 28px; display: grid; gap: 24px; align-content: start; }
.report-side h4 { margin: 0 0 10px; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--stone); }
.fixes { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.fixes li::marker { font-family: var(--font-display); font-weight: 800; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.compare th, .compare td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: right; }
.compare td:not(:first-child) { font-family: var(--font-data); font-size: 0.86rem; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare th { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--stone); }
.compare .you td { font-weight: 700; }
.report-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--peach); }
.report-foot p { font-weight: 600; }
.report-foot small { color: var(--stone); }
@media (max-width: 900px) {
  .report-body { grid-template-columns: 1fr; }
  .checks-wrap { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .report-top { grid-template-columns: 1fr; padding: 22px 18px; }
  .report-side, .report-foot { padding-left: 18px; padding-right: 18px; }
  .checks thead { position: absolute; left: -9999px; }
  .checks, .checks tbody { display: block; }
  .checks tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .checks tr:last-child { border-bottom: 0; }
  .checks td { padding: 0; border: 0; white-space: normal; }
  .checks td:last-child { grid-column: 1 / -1; }
}

/* About */
.about { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.portrait {
  aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius);
  background: var(--peach); border: 1.5px dashed var(--mist);
  display: grid; place-items: center; text-align: center; padding: 16px;
  color: var(--stone); font-size: var(--step--1);
}
.about-copy { display: grid; gap: 18px; max-width: 40rem; min-width: 0; }
.about-copy p { font-size: 1.1rem; }
.about-copy .pull { font: 700 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.02em; }
@media (max-width: 700px) { .about { grid-template-columns: 1fr; } .portrait { max-width: 200px; } }

/* Contact */
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-copy { display: grid; gap: 18px; min-width: 0; }
.contact-copy p { color: var(--mist); }
.contact-details { display: grid; gap: 12px; margin: 8px 0 0; }
.contact-details div { display: grid; gap: 2px; }
.contact-details dt { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--orange); }
.contact-details dd { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.form {
  background: var(--cream); color: var(--charcoal); border-radius: 20px; padding: clamp(20px, 4vw, 32px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0;
}
.form :focus-visible { outline-color: var(--charcoal); }
.form a { color: var(--ember); }
.field { display: grid; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.form-group { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border: 0; margin: 0; padding: 0 0 20px; border-bottom: 1px solid var(--line); min-width: 0; }
.form-group legend { font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.01em; padding: 0; margin-bottom: 14px; }
.form-group legend small { font: 400 0.9rem var(--font-body); color: var(--stone); letter-spacing: 0; }
.field .hint { font-size: 0.82rem; color: var(--stone); }
.choice { border: 0; margin: 0; padding: 0; }
.choice legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font-size: 0.95rem; transition: border-color .15s ease, background-color .15s ease; }
.chip:hover span { border-color: var(--charcoal); }
.chip input:checked + span { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); font-weight: 600; }
.chip input:focus-visible + span { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: var(--mist); }
.field label { font-weight: 600; font-size: 0.95rem; }
.field label small { font-weight: 400; color: var(--stone); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--charcoal);
  background: var(--white); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(20, 20, 20, .15); }
.field textarea { min-height: 110px; resize: vertical; }
.field .error { color: var(--poor); font-size: 0.85rem; }
.form-more { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; animation: reveal .35s ease both; }
.form-more[hidden], .form-step-actions[hidden] { display: none; }
@keyframes reveal { from { opacity: .4; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.form-step-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-step-actions p { font-size: var(--step--1); color: var(--stone); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-foot p { font-size: var(--step--1); color: var(--stone); flex: 1 1 220px; }
.form-status { grid-column: 1 / -1; padding: 12px 14px; border-radius: 10px; font-size: 0.95rem; }
.form-status.is-ok { background: #dcefe4; }
.form-status.is-error { background: var(--peach); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .form, .form-group, .form-more { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { padding-block: 36px; background: var(--charcoal); color: var(--mist); font-size: var(--step--1); border-top: 1px solid var(--line-dark); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
.site-footer .wordmark { font-size: 1.3rem; color: var(--cream); }
.site-footer a { color: var(--mist); }
.site-footer .todo { font-size: var(--step--1); }

/* Privacy page */
.legal { max-width: 44rem; display: grid; gap: 18px; }
.legal h1 { font-size: var(--step-3); font-weight: 800; }
.legal h2 { font-size: var(--step-1); margin-top: 12px; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Websites page: previous work */
.band--work { background: var(--peach); }
.work-card { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; background: var(--white); border-radius: 24px; padding: clamp(16px, 3vw, 28px); box-shadow: 0 30px 60px -40px rgba(20,20,20,.35); min-width: 0; }
.work-shot { display: block; text-decoration: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); transition: transform .2s ease; min-width: 0; }
.work-shot:hover { transform: translateY(-3px); }
.work-shot img { display: block; width: 100%; height: auto; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--cream); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--charcoal); opacity: .2; }
.browser-bar span { margin-left: 8px; flex: 1; min-width: 0; background: var(--white); border-radius: 999px; padding: 4px 12px; font: 500 0.8rem var(--font-body); color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-copy { display: grid; gap: 12px; justify-items: start; min-width: 0; padding-right: clamp(0px, 2vw, 16px); }
.work-copy h3 { font-size: var(--step-2, 1.8rem); }
.work-copy p:not(.work-tags) { color: var(--stone); }
.work-tags { font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--ember); }
@media (max-width: 860px) { .work-card { grid-template-columns: 1fr; } }

/* Local search page */
.hero .breadcrumb + .eyebrow { margin-top: 6px; }
.stat-card { background: var(--charcoal); color: var(--cream); border-radius: 20px; padding: clamp(22px, 4vw, 32px); display: grid; gap: 22px; }
.stat { display: grid; gap: 4px; }
.stat-num { font: 800 clamp(2.6rem, 6vw, 3.4rem)/1 var(--font-display); background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat p { color: var(--mist); }
.stat-card small { color: var(--mist); font-size: 0.8rem; opacity: .8; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: grid; gap: 14px; align-content: start; grid-template-rows: auto auto auto 1fr auto; background: var(--graphite); border: 1px solid #3a3a3a; border-radius: 20px; padding: 28px 24px; min-width: 0; }
.plan h3 { font-size: var(--step-2); color: var(--cream); }
.plan-price { font: 800 2.4rem/1 var(--font-display); color: var(--cream); }
.plan-price small { font: 500 1rem var(--font-body); color: var(--mist); margin-left: 4px; }
.plan-for { color: var(--mist); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.plan li { padding-left: 26px; position: relative; color: var(--cream); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.plan .btn { justify-self: stretch; }
.plan--featured { background: var(--cream); border-color: transparent; }
.plan--featured h3, .plan--featured .plan-price, .plan--featured li { color: var(--charcoal); }
.plan--featured .plan-for, .plan--featured .plan-price small { color: var(--stone); }
.plan-badge { position: absolute; top: -12px; left: 24px; background: var(--sunrise); color: var(--charcoal); font-weight: 700; font-size: 0.78rem; padding: 5px 12px; border-radius: 999px; }
.btn--outline-light { border: 2px solid var(--cream); color: var(--cream); background: transparent; }
.btn--outline-light:hover { background: var(--cream); color: var(--charcoal); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 30rem; } }
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.08rem; padding: 18px 36px 18px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 600 1.5rem/1 var(--font-body); color: var(--ember); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--stone); padding: 0 0 18px; max-width: 40rem; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } }

/* Homepage hero: rotating service word and matching examples */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero--home h1 > span { display: block; }
.hero--home .rotator { display: grid; }
.rotator span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(0.3em);
  transition: opacity .45s ease, transform .45s ease;
  background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em;
}
.rotator span.is-active { opacity: 1; transform: none; }

.showcase {
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 28px 60px -34px rgba(20, 20, 20, .45);
  overflow: hidden; min-width: 0; display: grid;
}
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; min-width: 0; }
.slide.is-active { opacity: 1; visibility: visible; }
.showcase-foot, .showcase .mappack-caption { grid-column: 1; }
.showcase-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.showcase-label { font: 600 0.8rem var(--font-data); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); }
.dots { display: flex; gap: 4px; }
.dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background-color .2s ease, transform .2s ease; }
.dots button.is-active::before { background: var(--orange); transform: scale(1.2); }
.dots button:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 1px; border-radius: 50%; }

.mock { height: 100%; }
.listing.static { animation: none; }
.mock--ai { display: grid; align-content: center; gap: 14px; padding: 22px; }
.bubble { margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.45; }
.bubble--q { justify-self: end; background: var(--charcoal); color: var(--cream); border-bottom-right-radius: 6px; max-width: 85%; }
.bubble--a { background: var(--cream); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble--a p { margin: 0 0 8px; }
.bubble--a ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.bubble--a li:first-child { background: var(--peach); border-radius: 8px; padding: 4px 8px; margin-left: -8px; }

/* Hero example: website */
.mock--web { display: grid; place-items: center; padding: 22px; background: var(--peach); }
.browser { width: 100%; border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 20px 40px -24px rgba(20,20,20,.5); }
.browser img { display: block; width: 100%; height: auto; }

/* Hero example: social post, styled like an Instagram post from a client */
.mock--social { display: grid; place-items: center; padding: 10px 22px; background: var(--cream); }
.ig { width: 100%; max-width: 300px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 0.82rem; line-height: 1.35; }
.ig p { margin: 0; padding: 0 12px; }
.ig-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.ig-head strong { display: block; font-size: 0.82rem; }
.ig-head small { display: block; font-size: 0.72rem; color: var(--stone); }
.ig-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #2f4a3a; color: #f3e7d3; font: 700 0.68rem var(--font-display); box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px #e1306c; }
.ig-more { margin-left: auto; color: var(--charcoal); font-size: 0.7rem; letter-spacing: 1px; }
.ig-post { aspect-ratio: 5 / 4; background: #f3e7d3; color: #2f4a3a; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 16px 26px; text-align: center; position: relative;
  background-image: radial-gradient(circle at 12% 18%, rgba(47,74,58,.08) 0 34px, transparent 35px), radial-gradient(circle at 92% 88%, rgba(47,74,58,.08) 0 48px, transparent 49px); }
.ig-stars { color: #d9902f; letter-spacing: 3px; font-size: 0.95rem; }
.ig-quote { font: 700 clamp(1rem, 2.2vw, 1.15rem)/1.18 var(--font-display); letter-spacing: -0.02em; padding: 0 !important; }
.ig-by { font-size: 0.74rem; opacity: .75; }
.ig-brand { position: absolute; bottom: 10px; font: 700 0.62rem var(--font-data); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.ig-actions { display: flex; gap: 12px; padding: 9px 12px 6px; }
.ig-actions svg { width: 21px; height: 21px; fill: none; stroke: var(--charcoal); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ig-actions .ig-liked { fill: #ed4956; stroke: #ed4956; }
.ig-actions .ig-save { margin-left: auto; }
.ig-likes { margin-bottom: 3px !important; }
.ig-comments { color: var(--stone); padding-top: 3px !important; padding-bottom: 11px !important; }

/* Homepage: How it works teaser */
.how-teaser { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.how-teaser > div { display: grid; gap: 10px; max-width: 38rem; }
.how-teaser h2 { font-size: var(--step-3); }
.how-teaser p:not(.eyebrow) { color: var(--graphite); }
.choice legend small { font-weight: 400; color: var(--stone); margin-left: 4px; }
.link-light { color: var(--cream); text-decoration-color: var(--orange); text-underline-offset: 3px; font-weight: 600; }

/* Services dropdown in the header */
.nav-drop { position: relative; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font: 500 0.98rem var(--font-body); color: var(--charcoal); }
.nav-drop-toggle:hover { color: var(--ember); }
.nav-drop-toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }
.nav-drop-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: -18px; width: 290px; z-index: 6;
  display: grid; gap: 2px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 48px -28px rgba(20, 20, 20, .45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-menu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; } /* keeps hover alive across the gap */
.nav-drop-toggle[aria-expanded="true"] + .nav-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 861px) {
  .nav-drop:hover .nav-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-drop:hover .nav-drop-toggle svg { transform: rotate(180deg); }
}
.nav-menu a, .nav-menu .is-soon { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--peach); color: var(--charcoal); }
.nav-menu a[aria-current="page"] { background: var(--cream); }
.nav-menu strong { font-size: 0.95rem; font-weight: 600; }
.nav-menu small { font-size: 0.82rem; color: var(--stone); font-weight: 400; }
.nav-menu .is-soon { opacity: .55; cursor: default; }
.nav-menu .nav-menu-all { display: block; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-weight: 600; font-size: 0.9rem; color: var(--ember); }
@media (max-width: 860px) {
  .nav-drop { border-bottom: 1px solid var(--line); }
  .nav-drop-toggle { width: 100%; justify-content: space-between; padding: 12px 0; font-size: 0.98rem; }
  .nav-menu { position: static; width: auto; display: none; padding: 0 0 10px 12px; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-menu::before { content: none; }
  .nav-drop-toggle[aria-expanded="true"] + .nav-menu { display: grid; }
  .nav .nav-menu a, .nav-menu .is-soon { padding: 8px 0; border-bottom: 0; }
  .nav-menu a:hover, .nav-menu a[aria-current="page"] { background: none; }
  .nav-menu .nav-menu-all { border-top: 0; }
}
.mock-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.mock-points li { position: relative; padding-left: 28px; color: var(--cream); }
.mock-points li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Local search: sample report tile linking to the PDF */
.report-tile { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; padding: clamp(18px, 3vw, 28px); background: var(--white); border: 1px solid var(--line); border-radius: 24px; text-decoration: none; color: var(--charcoal); box-shadow: 0 30px 60px -44px rgba(20,20,20,.35); transition: transform .2s ease, box-shadow .2s ease; }
.report-tile:hover { transform: translateY(-3px); box-shadow: 0 34px 60px -38px rgba(20,20,20,.45); }
.report-tile:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.report-tile-copy { display: grid; gap: 12px; justify-items: start; }
.report-tile-title { font: 800 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.02em; }
.report-tile-text { color: var(--stone); max-width: 36rem; }
.report-thumb { display: grid; gap: 8px; padding: 0 0 14px; aspect-ratio: 210 / 230; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 16px 30px -22px rgba(20,20,20,.5); align-content: start; }
.report-thumb-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--charcoal); color: var(--cream); font: 600 0.62rem var(--font-data); letter-spacing: .1em; text-transform: uppercase; }
.report-thumb-bar b { font: 800 0.8rem var(--font-display); letter-spacing: -0.02em; text-transform: none; }
.report-thumb .report-thumb-bar i { display: inline; height: auto; background: none; color: var(--orange); font-style: normal; }
.report-thumb-score { display: flex; align-items: center; gap: 12px; padding: 6px 12px 4px; }
.report-thumb .ring { width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#ff6b2c, #ee3e74 54%, #ecdcd2 0); }
.report-thumb .ring span { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font: 800 1rem var(--font-display); }
.report-thumb .lines { flex: 1; display: grid; gap: 6px; }
.report-thumb i { display: block; height: 7px; border-radius: 4px; background: #ead9cd; font-style: normal; }
.report-thumb .lines i:last-child { width: 65%; }
.report-thumb-row { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 7px 8px; background: var(--white); border-radius: 6px; }
.report-thumb-row i { flex: 1; }
.report-thumb-row em { width: 30px; height: 9px; border-radius: 5px; flex: none; }
.report-thumb-row em.good { background: #8fd0a9; }
.report-thumb-row em.warn { background: #f5c26b; }
.report-thumb-row em.poor { background: #f08a7e; }
@media (max-width: 640px) { .report-tile { grid-template-columns: 1fr; } .report-thumb { max-width: 220px; } }

/* Local search pricing: one-off audit */
.one-off { margin-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center; background: var(--graphite); border: 1px solid #3a3a3a; border-radius: 20px; padding: 28px clamp(24px, 3vw, 36px); }
.one-off-copy { display: grid; gap: 10px; max-width: 46rem; }
.one-off h3 { font-size: var(--step-2); color: var(--cream); }
.one-off p:not(.eyebrow):not(.plan-price) { color: var(--mist); }
.one-off a:not(.btn) { color: var(--cream); text-decoration-color: var(--orange); }
.one-off-buy { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 700px) { .one-off { grid-template-columns: 1fr; } }
.contact-copy .mock-points strong { color: var(--cream); }

/* How it works hero: customer journey */
.hero--how h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.grad { background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; min-width: 0; }
.journey::before { content: ""; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(to bottom, var(--orange) 0 6px, transparent 6px 12px); opacity: .5; }
.journey-step { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 36px -30px rgba(20,20,20,.5); opacity: 0; animation: step-in .6s cubic-bezier(.2,.8,.2,1) forwards; }
.journey-step:nth-child(2) { animation-delay: .25s; margin-left: 14px; }
.journey-step:nth-child(3) { animation-delay: .5s; margin-left: 28px; }
.journey-step:nth-child(4) { animation-delay: .75s; margin-left: 42px; }
.journey-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--peach); color: var(--ember); }
.journey-icon svg { width: 18px; height: 18px; }
.journey-text { display: grid; gap: 2px; min-width: 0; }
.journey-text small { font: 600 0.72rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.journey-text strong { font-size: 0.98rem; font-weight: 600; }
.journey-tag { font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--stone); white-space: nowrap; }
.journey-step--win { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.journey-step--win .journey-icon { background: var(--sunrise); color: var(--white); }
.journey-step--win .journey-text small { color: var(--mist); }
.journey-step--win .journey-tag { background: var(--sunrise); color: var(--white); border-color: transparent; }
@keyframes step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .journey-step:nth-child(n) { margin-left: 0; } }
@media (max-width: 420px) { .journey-tag { display: none; } .journey-step { grid-template-columns: auto 1fr; } }

/* Common worries: objections as visible cards (all text stays in the HTML for search engines) */
.worries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.worry { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; position: relative; }
.worry::before { content: "\201C"; display: block; font: 700 3.4rem/0.7 Georgia, "Times New Roman", serif; background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 8px 0 6px; }
.worry h3 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 10px; }
.worry p { color: var(--stone); margin: 0; font-size: var(--step--1); line-height: 1.55; }
.worries-note { margin-top: 24px; color: var(--stone); }
@media (max-width: 900px) { .worries { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  /* Swipeable row on phones so the section stays short; every card is still in the page for search engines */
  .worries { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 0 16px 12px; scroll-padding-inline: 16px; }
  .worry { flex: 0 0 82%; scroll-snap-align: start; }
}
.worries-swipe { display: none; color: var(--stone); font-size: var(--step--1); margin: 0 0 12px; }
@media (max-width: 560px) { .worries-swipe { display: block; } }

/* Homepage: customer journey section (moved from the How it works hero) */
.journey-band { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.journey-copy { display: grid; gap: 18px; min-width: 0; }
.journey-copy h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
.journey-copy p:not(.eyebrow) { color: var(--graphite); font-size: var(--step-1); }
@media (max-width: 860px) { .journey-band { grid-template-columns: 1fr; } }
/* Below the fold, only play the card animation once it scrolls into view */
.js .journey-band .journey-step { animation-play-state: paused; }
.js .journey-band .journey.is-in .journey-step { animation-play-state: running; }

/* How it works hero: pick your service */
.pick { display: grid; gap: 14px; min-width: 0; }
.pick-label { font: 600 0.72rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin: 0; }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pick-list li { opacity: 0; animation: step-in .6s cubic-bezier(.2,.8,.2,1) forwards; }
.pick-list li:nth-child(2) { animation-delay: .12s; }
.pick-list li:nth-child(3) { animation-delay: .24s; }
.pick-list li:nth-child(4) { animation-delay: .36s; }
.pick-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; color: var(--charcoal); text-decoration: none; box-shadow: 0 18px 36px -30px rgba(20,20,20,.5); transition: transform .2s, border-color .2s, box-shadow .2s; }
a.pick-card:hover, a.pick-card:focus-visible { transform: translateX(4px); border-color: var(--ember); box-shadow: 0 22px 40px -28px rgba(184,67,0,.45); }
a.pick-card:hover .journey-icon, a.pick-card:focus-visible .journey-icon { background: var(--sunrise); color: var(--white); }
.pick-text { display: grid; gap: 2px; min-width: 0; }
.pick-text strong { font-size: 1.05rem; font-weight: 700; }
.pick-text small { color: var(--stone); font-size: 0.9rem; }
.pick-arrow { width: 20px; height: 20px; color: var(--ember); transition: transform .2s; }
a.pick-card:hover .pick-arrow { transform: translateX(3px); }
.pick-card--soon { opacity: .6; box-shadow: none; }
.pick-help { margin: 4px 0 0; color: var(--stone); font-size: var(--step--1); }
@media (prefers-reduced-motion: reduce) { .pick-list li { animation: none; opacity: 1; } .pick-card, .pick-arrow { transition: none; } }
@media (max-width: 420px) { .pick-card--soon .journey-tag { display: none; } }
@media (prefers-reduced-motion: reduce) { .journey-step { opacity: 1; } }

/* Get Found on Google: how it works, alternating steps with a small illustration each */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.flow-step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.flow-step:nth-child(even) .flow-copy { order: 2; }
.flow-copy { display: grid; gap: 12px; max-width: 30rem; }
.flow-num { font: 700 0.85rem var(--font-data); letter-spacing: .08em; background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flow-copy h3 { font-size: var(--step-2); line-height: 1.15; }
.flow-copy p { color: var(--graphite); font-size: 1.05rem; }
.flow-visual { display: grid; place-items: center; padding: clamp(20px, 4vw, 40px); background: var(--cream); border-radius: 24px; min-height: 260px; }
.fv-card { width: min(100%, 340px); background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: 0 24px 48px -32px rgba(20,20,20,.45); display: grid; gap: 12px; }
.fv-label { margin: 0; font: 600 0.7rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.fv-score-top { display: flex; align-items: center; gap: 14px; }
.fv-ring { width: 72px; height: 72px; flex: none; }
.fv-ring text { font: 800 22px var(--font-display); fill: var(--charcoal); }
.fv-score-top small, .fv-update small, .fv-notify small { display: block; font: 600 0.7rem var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.fv-score-top strong { color: var(--warn); }
.fv-fixes { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.92rem; }
.fv-fixes li::marker { color: var(--ember); font-weight: 700; }
.fv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fv-checks li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 0.92rem; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.fv-checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.fv-checks svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--good); color: var(--white); }
.fv-checks em { font-style: normal; font-family: var(--font-data); font-size: 0.78rem; color: var(--stone); }
.fv-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; height: 84px; }
.fv-photos span { border-radius: 10px; background: linear-gradient(135deg, #ffd3bd, #f7a8a0); }
.fv-photos span:nth-child(2) { background: linear-gradient(135deg, #2a2a2a, #5c5c5c); }
.fv-photos span:nth-child(3) { background: var(--sunrise); }
.fv-update { padding: 10px 12px; border-radius: 12px; background: var(--peach); }
.fv-update strong { font-size: 0.92rem; }
.fv-review { display: grid; gap: 4px; font-size: 0.88rem; }
.fv-review p { margin: 0; }
.fv-stars { color: #f5a623; letter-spacing: 1px; }
.fv-review em { font-style: normal; font-size: 0.78rem; color: var(--good); font-weight: 600; }
.fv-notify { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--charcoal); color: var(--cream); }
.fv-notify small { color: var(--mist); }
.fv-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sunrise); box-shadow: 0 0 0 6px rgba(255,107,44,.2); flex: none; }
.fv-bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; padding-top: 4px; }
.fv-bars span { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: var(--line); }
.fv-bars span:last-child { background: var(--sunrise); }
.fv-note { margin: 0; font-size: 0.72rem; color: var(--stone); }
@media (max-width: 820px) {
  .flow-step { grid-template-columns: 1fr; }
  .flow-step:nth-child(even) .flow-copy { order: 0; }
  .flow-visual { min-height: 0; }
}
.flow-cta { margin: 6px 0 0; }

/* Get Found on Google: quick answers to the first questions people have */
.answers { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.answer { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.answer dt { font: 700 1.15rem/1.3 var(--font-display); margin-bottom: 8px; }
.answer dd { margin: 0; color: var(--graphite); }
@media (max-width: 760px) { .answers { grid-template-columns: 1fr; } }

/* Get Found on Google: local vs organic search */
.search-types { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.search-type { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.search-type--local { border-color: var(--ember); box-shadow: 0 24px 48px -36px rgba(184,67,0,.5); }
.search-type h3 { font-size: var(--step-2); }
.st-tag { margin: 0; font: 600 0.72rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.search-type dl { margin: 0; display: grid; gap: 12px; }
.search-type dt { font-weight: 700; font-size: 0.92rem; }
.search-type dd { margin: 2px 0 0; color: var(--graphite); }
.st-us { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.st-why { margin: 24px 0 0; max-width: 46rem; color: var(--graphite); }
.st-mock { background: var(--cream); border-radius: 12px; padding: 12px; display: grid; gap: 8px; height: 150px; align-content: start; overflow: hidden; }
.st-map { height: 52px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 38px, #f1e4da 38px 41px), repeating-linear-gradient(0deg, #fbf1ea 0 20px, #f1e4da 20px 22px); position: relative; }
.st-map i { position: absolute; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mist); top: 18px; left: 20%; }
.st-map i:nth-child(2) { left: 70%; top: 26px; }
.st-map i.you { left: 46%; top: 10px; background: var(--orange); }
.st-row { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; background: var(--white); }
.st-row.you { background: var(--peach); }
.st-row b, .st-link b { height: 8px; width: 34%; border-radius: 4px; background: var(--charcoal); opacity: .8; }
.st-row span, .st-link span { height: 6px; flex: 1; border-radius: 4px; background: var(--line); }
.st-link { display: grid; gap: 5px; padding: 6px 2px; }
.st-link b { width: 55%; background: #1a4fb8; opacity: .7; }
.st-link span { height: 6px; }
.st-link span.short { width: 60%; }
@media (max-width: 760px) { .search-types { grid-template-columns: 1fr; } }
.search-type { grid-template-rows: auto auto auto auto 1fr; }
.st-us { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; align-self: end; }
.st-us p { margin: 0; font-weight: 600; }

/* Local vs organic: mini results page, highlighting one zone each */
.sx { position: relative; background: var(--cream); border-radius: 14px; padding: 12px; display: grid; gap: 8px; font-size: 0.72rem; line-height: 1.25; }
.sx-search { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--charcoal); font-weight: 600; }
.sx-zone { border-radius: 10px; padding: 8px; display: grid; gap: 6px; transition: opacity .2s; }
.sx-zone.is-dim { opacity: .35; filter: grayscale(.6); }
.sx-zone.is-hl { background: var(--white); box-shadow: 0 0 0 2px var(--ember), 0 16px 30px -22px rgba(184,67,0,.6); }
.sx-map { height: 46px; border-radius: 6px; position: relative; background: repeating-linear-gradient(90deg, transparent 0 34px, #f1e4da 34px 37px), repeating-linear-gradient(0deg, #fbf1ea 0 16px, #f1e4da 16px 18px); }
.sx-map i { position: absolute; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mist); top: 18px; left: 22%; }
.sx-map i:nth-child(2) { left: 72%; top: 24px; }
.sx-map i.you { left: 47%; top: 9px; background: var(--orange); }
.sx-biz { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; background: var(--cream); }
.sx-biz.you { background: var(--peach); }
.sx-biz span { display: grid; }
.sx-biz b { font-weight: 700; }
.sx-biz em { font-style: normal; font-family: var(--font-data); font-size: 0.64rem; color: var(--stone); }
.sx-biz u { text-decoration: none; font-weight: 600; font-size: 0.64rem; padding: 3px 8px; border-radius: 999px; background: var(--charcoal); color: var(--cream); }
.sx-link { display: grid; gap: 1px; padding: 2px 4px; }
.sx-link small { font-size: 0.62rem; color: var(--stone); }
.sx-link b { color: #1a4fb8; font-weight: 600; font-size: 0.78rem; }
.sx-note { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--charcoal); color: var(--cream); font-size: 0.74rem; }
.sx-note b { font: 600 0.66rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.sx { width: 100%; box-sizing: border-box; }

/* Illustrated street map behind the search mock-ups (made-up town) */
.mappack-map { height: 170px; background: url("../img/map.svg") center / cover no-repeat, #f6f1ea; }
.mappack-map .pin { filter: drop-shadow(0 2px 2px rgba(20,20,20,.25)); }
.pin-label { position: absolute; transform: translate(-50%, -100%); padding: 3px 8px; border-radius: 999px; background: var(--charcoal); color: var(--cream); font-size: 0.7rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(20,20,20,.5); }
.sx-map { height: 96px; background: url("../img/map.svg") center / cover no-repeat, #f6f1ea; }
.sx-map i { filter: drop-shadow(0 1px 1px rgba(20,20,20,.25)); }

/* Condensed: the four steps sit in one row of compact cards */
.flow { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flow-step { grid-template-columns: 1fr; gap: 14px; align-items: start; align-content: start; background: var(--white); border-radius: 18px; padding: 14px 14px 20px; }
.flow-step:nth-child(even) .flow-copy { order: 2; }
.flow-step .flow-copy { order: 2; gap: 6px; padding: 0 6px; }
.flow-visual { order: 1; min-height: 0; height: 190px; padding: 0; overflow: hidden; border-radius: 12px; }
.flow-visual .fv-card { transform: scale(.72); transform-origin: center; width: 300px; flex: none; }
.flow-copy h3 { font-size: 1.15rem; }
.flow-copy p { font-size: 0.95rem; }
.flow-link { font-weight: 600; color: var(--ember); }
@media (max-width: 1000px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .flow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 12px; gap: 12px; }
  .flow-step { flex: 0 0 80%; scroll-snap-align: start; }
}
.flow-visual { display: flex; justify-content: center; align-items: center; }
.flow-visual .fv-card { transform: scale(.66); }
@media (max-width: 560px) { .flow { margin-inline: 0; padding: 0 0 12px; } }
.flow-visual .fv-post { transform: scale(.58); }

/* Get Found on Google: why it's ongoing work */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why { background: var(--graphite); border: 1px solid var(--line-dark); border-radius: 16px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.why h3 { font-size: 1.15rem; color: var(--cream); }
.why p { margin: 0; color: var(--mist); }
.cycle { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: cyc; }
.cycle li { position: relative; display: grid; gap: 4px; padding: 16px 28px 16px 0; border-top: 2px solid var(--line-dark); }
.cycle li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--sunrise); }
.cycle li:not(:last-child)::after { content: "→"; position: absolute; top: -14px; right: 12px; color: var(--orange); font-weight: 700; }
.cycle strong { color: var(--cream); font: 700 1.05rem var(--font-display); padding-top: 6px; }
.cycle span { color: var(--mist); font-size: 0.92rem; }
.cycle-repeat strong { background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } .cycle { grid-template-columns: 1fr 1fr; row-gap: 20px; } }
@media (max-width: 480px) { .cycle { grid-template-columns: 1fr; } .cycle li::after { display: none; } }

/* Homepage: one baseline headline, services tagged to it */
.hero--home h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.service-role { margin: 6px 0 -4px; font: 600 0.72rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.service-card .service-role { color: var(--ember); font-size: 0.78rem; }

/* Sample report folded into the one-off audit card */
.one-off { grid-template-columns: auto 1fr auto; }
.one-off-sample { display: grid; gap: 10px; justify-items: center; width: 132px; text-decoration: none; color: var(--cream); font-size: 0.8rem; font-weight: 600; }
.one-off-sample .report-thumb { width: 210px; zoom: .58; transform: rotate(-3deg); transition: transform .2s; }
.one-off-sample:hover .report-thumb { transform: rotate(0) scale(1.04); }
.one-off-sample > span:last-child { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
@media (max-width: 860px) { .one-off { grid-template-columns: auto 1fr; } .one-off-buy { grid-column: 1 / -1; } }
@media (max-width: 520px) { .one-off { grid-template-columns: 1fr; } }
.one-off-sample .report-thumb { color: var(--charcoal); }

/* Homepage: local vs organic link under the services */
.service-card strong { color: var(--charcoal); font-weight: 600; }
.services-diff { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; }
.services-diff p { margin: 0; color: var(--graphite); }
#local-vs-organic { scroll-margin-top: 40px; }

/* Homepage intro: make it stand out */
.hero .lede--home { position: relative; padding: 4px 0 4px 22px; color: var(--graphite); max-width: 34rem; }
.hero .lede--home::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--sunrise); }
.hero .lede--home strong { display: block; margin-bottom: 6px; color: var(--charcoal); font-family: var(--font-display); font-weight: 700; font-size: 1.15em; line-height: 1.25; }
.hero .lede--home strong { text-wrap: balance; }

/* Get Found on Google hero: free check panel */
.fc-panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 28px); box-shadow: 0 30px 60px -30px rgba(20,20,20,.25); max-width: 30rem; width: 100%; justify-self: end; }
.fc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fc-eyebrow { margin: 0; font-family: var(--font-data); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); font-weight: 700; }
.fc-free { font-size: .75rem; padding: 4px 10px; border-radius: 99px; background: var(--peach); color: var(--charcoal); }
.fc-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.15; margin: 0 0 8px; }
.fc-intro { margin: 0 0 16px; color: var(--stone); font-size: .95rem; line-height: 1.45; }
.fc-rank { background: var(--cream); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.fc-query { margin: 0 0 10px; font-size: .85rem; color: var(--graphite); }
.fc-query span { font-family: var(--font-data); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--stone); margin-right: 6px; }
.fc-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fc-ladder li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: .88rem; }
.fc-ladder b { font-family: var(--font-data); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); font-size: .78rem; flex: none; }
.fc-ladder .is-map { border-left: 3px solid var(--good); }
.fc-ladder .fc-gap { background: none; border: 0; justify-content: center; padding: 0; color: var(--stone); letter-spacing: .2em; }
.fc-ladder .is-you { background: var(--peach); border-color: transparent; font-weight: 600; }
.fc-ladder .is-you b { background: var(--sunrise); color: #fff; }
.fc-ladder em { margin-left: auto; font-style: normal; font-weight: 400; font-size: .75rem; color: var(--ember); }
.fc-mapnote { margin: 8px 0 0; font-size: .75rem; color: var(--stone); display: flex; align-items: center; gap: 6px; }
.fc-mapnote::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--good); }
.fc-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: .92rem; color: var(--graphite); }
.fc-list li { padding-left: 24px; position: relative; line-height: 1.4; }
.fc-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ember); font-weight: 700; }
.fc-list strong { color: var(--charcoal); }
.fc-btn { width: 100%; justify-content: center; }
@media (max-width: 960px) { .fc-panel { justify-self: stretch; max-width: none; } }
.fc-ladder--kw li { gap: 10px; }
.fc-ladder--kw .kw { flex: 1; min-width: 0; }
.fc-ladder--kw b { order: 2; }
.fc-ladder--kw em { margin-left: 0; order: 3; width: 92px; text-align: right; }
.fc-ladder--kw .is-top { border-left: 3px solid var(--good); }
.fc-ladder--kw .is-top b { background: var(--good); color: #fff; }
.fc-ladder--kw .is-top em { color: var(--good); }
.fc-ladder--kw li:not(.is-top):not(.is-none) b { background: var(--sunrise); color: #fff; }
.fc-ladder--kw .is-none { color: var(--stone); }
.fc-ladder--kw .is-none em { color: var(--stone); }
@media (max-width: 480px) { .fc-ladder--kw li { font-size: .82rem; } .fc-ladder--kw em { width: 78px; font-size: .7rem; } }
/* Condensed free check panel */
.fc-panel { padding: 20px 22px; max-width: 27rem; }
.fc-top { margin-bottom: 6px; }
.fc-title { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-bottom: 4px; }
.fc-intro { font-size: .88rem; margin-bottom: 12px; }
.fc-rank { padding: 10px; margin-bottom: 12px; border-radius: 12px; }
.fc-query { margin-bottom: 8px; font-size: .8rem; }
.fc-ladder { gap: 5px; }
.fc-ladder li { padding: 5px 9px; font-size: .82rem; }
.fc-ladder b { width: 21px; height: 21px; font-size: .72rem; }
.fc-mapnote { margin-top: 6px; font-size: .7rem; }
.fc-incl { margin: 0 0 12px; font-size: .8rem; color: var(--graphite); line-height: 1.5; }
.fc-incl span { font-family: var(--font-data); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ember); font-weight: 700; margin-right: 4px; }
.fc-btn { padding-top: 10px; padding-bottom: 10px; }
.fc-incl { margin-bottom: 0; }
.fc-ladder--kw em { white-space: nowrap; width: auto; }

/* Google page: short points + learn more */
.st-points { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 8px; }
.st-points li { position: relative; padding-left: 24px; line-height: 1.4; color: var(--graphite); }
.st-points li::before { content: "✓"; position: absolute; left: 0; color: var(--ember); font-weight: 700; }
.st-more { margin-bottom: 16px; border-top: 1px solid var(--line); }
.st-more summary { cursor: pointer; list-style: none; padding: 12px 0 4px; font-weight: 600; color: var(--ember); font-size: .95rem; }
.st-more summary::-webkit-details-marker { display: none; }
.st-more summary::after { content: " +"; }
.st-more[open] summary::after { content: " −"; }
.st-more dl { margin-top: 8px; }

/* FAQ: how it works flow */
.faq-flow { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 0; }
.faq-flow li { display: flex; gap: 14px; position: relative; padding-bottom: 16px; }
.faq-flow li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.faq-flow b { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sunrise); color: #fff; font-family: var(--font-data); font-size: .85rem; position: relative; }
.faq-flow strong { display: block; color: var(--charcoal); margin: 4px 0 2px; }
.faq-flow span { color: var(--stone); line-height: 1.45; display: block; }
.faq-flow a { color: var(--ember); font-weight: 600; text-decoration: none; }
#how-it-works { scroll-margin-top: 80px; }

/* FAQ side card: nudge to the free check */
.faq-wrap { grid-template-areas: "head faq" "cta faq"; grid-template-rows: auto 1fr; }
.faq-wrap > .section-head { grid-area: head; }
.faq-wrap > .faq { grid-area: faq; }
.faq-cta { grid-area: cta; align-self: start; position: sticky; top: 96px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 24px 48px -28px rgba(20,20,20,.22); }
.faq-cta h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; margin: 6px 0 16px; }
.fq-path { list-style: none; margin: 0 0 16px; padding: 0; display: grid; }
.fq-path li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.fq-path li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; border-left: 2px dashed var(--line); }
.fq-path i { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--peach); color: var(--ember); }
.fq-path li:last-child i { background: var(--sunrise); color: #fff; }
.fq-path svg { width: 18px; height: 18px; }
.fq-path b { display: block; font-size: .95rem; color: var(--charcoal); margin-top: 2px; }
.fq-path span { display: block; font-size: .85rem; color: var(--stone); line-height: 1.35; }
.fq-path b .todo { display: inline; font-size: inherit; color: inherit; }
.fq-notify { display: flex; gap: 12px; align-items: center; background: var(--charcoal); color: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; transform-origin: center bottom; }
.fq-bell { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sunrise); }
.fq-bell svg { width: 18px; height: 18px; }
.fq-notify small { display: block; font-family: var(--font-data); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; opacity: .65; }
.fq-notify strong { display: block; font-size: .92rem; }
.fq-notify em { display: block; font-style: normal; font-size: .78rem; opacity: .75; }
.fq-btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .fq-notify { animation: fq-pop 4s ease-in-out infinite; }
  .fq-bell svg { animation: fq-ring 4s ease-in-out infinite; transform-origin: 50% 10%; }
}
@keyframes fq-pop { 0%, 70%, 100% { transform: translateY(0) scale(1); } 76% { transform: translateY(-4px) scale(1.02); } 84% { transform: translateY(0) scale(1); } }
@keyframes fq-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 78% { transform: rotate(-12deg); } 82% { transform: rotate(8deg); } 86% { transform: rotate(0); } }
@media (max-width: 860px) {
  .faq-wrap { grid-template-areas: "head" "faq" "cta"; grid-template-rows: auto; }
  .faq-cta { position: static; }
}
@media (min-width: 861px) { .faq-wrap { row-gap: 28px; } .faq-wrap > .section-head { margin-bottom: 0; } }

/* Google hero: free check snapshot (mirrors the real one-page summary) */
.snap { width: 100%; max-width: 27rem; justify-self: end; border-radius: 20px; overflow: hidden; background: var(--cream); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(20,20,20,.3); font-size: 14px; }
.snap-head { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 18px 18px 20px; background: linear-gradient(115deg, var(--charcoal) 0 58%, transparent 58%), var(--sunrise); color: #fff; }
.snap-head p { margin: 0; }
.snap-logo { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.snap-logo i { font-style: normal; color: var(--orange); }
.snap-kicker { margin-top: 8px !important; font-family: var(--font-data); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
.snap-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
.snap-meta { font-size: .72rem; opacity: .7; }
.snap-score { display: flex; align-items: center; gap: 8px; background: #fff; color: var(--charcoal); border-radius: 12px; padding: 8px 10px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); }
.snap-score svg { width: 50px; height: 50px; flex: none; }
.snap-score text { font: 700 17px var(--font-display); fill: var(--charcoal); }
.snap-score strong { display: block; font-size: .78rem; }
.snap-score small { display: block; font-size: .64rem; color: var(--stone); }
.snap-chip { display: inline-block; margin-top: 3px; font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #fdf0c8; color: #7a5a00; }
.snap-body { padding: 14px 16px 16px; }
.snap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.snap-stats div { background: #fff; border-radius: 10px; padding: 8px 10px; }
.snap-stats b { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; }
.snap-stats b i { font-style: normal; color: var(--orange); font-size: .8em; margin-left: 1px; }
.snap-stats small { font-size: .64rem; color: var(--stone); }
.snap-h { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: .88rem; }
.snap-fixes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.snap-fixes li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 8px; padding: 6px 10px; font-size: .8rem; font-weight: 600; }
.snap-fixes b { font-family: var(--font-display); color: #b3264f; font-size: .95rem; width: 10px; }
.snap-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.snap-compare > div { background: #fff; border-radius: 10px; padding: 7px 10px; }
.snap-compare small { display: block; font-family: var(--font-data); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.snap-compare b { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; }
.snap-compare span { font-size: .64rem; color: var(--stone); }
.snap-compare .snap-above { background: var(--sunrise); color: var(--charcoal); }
.snap-compare .snap-above span { color: var(--charcoal); opacity: .8; }
.snap-arrow { color: var(--pink); font-weight: 700; }
@media (max-width: 960px) { .snap { justify-self: stretch; max-width: none; } }
@media (max-width: 400px) { .snap-head { flex-direction: column; align-items: flex-start; background: var(--charcoal); } }
.snap-head { padding: 13px 14px 13px 18px; }
.snap-kicker { margin-top: 5px !important; }
.snap-score svg { width: 44px; height: 44px; }
.snap-body { padding: 11px 14px 13px; }
.snap-stats { margin-bottom: 9px; }
.snap-stats div { padding: 6px 9px; }
.snap-stats b, .snap-compare b { font-size: 1.05rem; }
.snap-h { margin-bottom: 4px; font-size: .82rem; }
.snap-fixes { gap: 3px; margin-bottom: 9px; }
.snap-fixes li { padding: 4px 10px; font-size: .78rem; }
.snap-compare > div { padding: 5px 10px; }
.snap-compare b i { font-style: normal; font-size: .75em; margin-left: 2px; color: var(--orange); }
.snap-compare .snap-above b i { color: var(--charcoal); }
.snap-fixes li { align-items: flex-start; line-height: 1.25; }
.snap-fixes li small { display: block; font-weight: 400; font-size: .68rem; color: var(--stone); margin-top: 1px; }
.snap-fixes b { line-height: 1.2; }
.st-points strong { color: var(--charcoal); }
.st-why { max-width: none; }

/* Why start with local search: three quick wins */
.st-why2 { margin-top: 24px; display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; }
.st-why2-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.st-why2 ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; min-width: 0; }
.st-why2 li { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.st-why2 i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sunrise); color: #fff; }
.st-why2 svg { width: 18px; height: 18px; }
.st-why2 strong { display: block; font-size: .92rem; color: var(--charcoal); }
.st-why2 span { display: block; font-size: .8rem; color: var(--stone); line-height: 1.3; }
@media (max-width: 860px) { .st-why2 { display: block; } .st-why2-h { margin-bottom: 10px; } .st-why2 ul { grid-template-columns: 1fr; } }

/* Section head that spans the full width: heading left, intro right */
@media (min-width: 861px) {
  .section-head--split { max-width: none; grid-template-columns: 1.15fr 1fr; column-gap: clamp(32px, 5vw, 72px); align-items: end; }
  .section-head--split .eyebrow { grid-column: 1 / -1; }
  .section-head--split p:not(.eyebrow) { margin: 0; padding-bottom: 6px; }
}
@media (min-width: 861px) { .section-head--split h2 { max-width: none; } .section-head--split { grid-template-columns: 1.3fr 1fr; } }
.section-head--split h2 { text-wrap: pretty; }
@media (min-width: 861px) { .section-head--split h2 span { display: block; } .section-head--split { grid-template-columns: 1.4fr 1fr; } }
@media (min-width: 861px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } .section-head--split p:not(.eyebrow) { padding-bottom: 0; max-width: none; } }
.lede-link { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lede-link:hover { color: var(--ember); }
.snap-col { display: grid; gap: 14px; justify-items: stretch; width: 100%; max-width: 27rem; justify-self: end; }
.snap-col .snap { max-width: none; justify-self: stretch; }
.snap-cta { justify-content: center; }
@media (max-width: 960px) { .snap-col { justify-self: stretch; max-width: none; } }
.h1-2line .l1 { display: block; white-space: nowrap; }
.h1-2line { font-size: clamp(2rem, 4.2vw, 3.5rem); text-wrap: wrap; }
@media (max-width: 560px) { .h1-2line .l1 { white-space: normal; display: inline; } }
@media (min-width: 961px) { .h1-2line { font-size: min(3.4rem, 4.1vw); } }
.hero h1.h1-2line { font-size: clamp(2rem, 7vw, 3.5rem); }
@media (min-width: 961px) { .hero h1.h1-2line { font-size: min(3.4rem, 4.1vw); } }

/* Google hero: what the free check is */
.hero-check { margin-top: 24px; max-width: 32rem; }
.hero-check-h { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--charcoal); display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.hero-check-h span { font-family: var(--font-body); font-weight: 400; font-size: .75rem; padding: 3px 10px; border-radius: 99px; background: var(--peach); color: var(--charcoal); }
.hero-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hero-check li { position: relative; padding-left: 26px; color: var(--graphite); }
.hero-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--sunrise); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; margin-top: 3px; }
.hero-check-btn { display: none; margin-top: 18px; }
@media (max-width: 960px) {
  .hero-check-btn { display: inline-flex; }
  .snap-cta { display: none; }
}

/* Homepage: how the channels connect */
.joined { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 22px; margin-bottom: 24px; }
.joined-label { margin: 0 0 8px; font-family: var(--font-data); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); font-weight: 700; }
.joined-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.joined-chips li { padding: 7px 14px; border-radius: 99px; background: var(--charcoal); color: #fff; font-size: .88rem; font-weight: 600; }
.joined-chips--out li { background: var(--peach); color: var(--charcoal); }
.joined-mid { position: relative; display: grid; place-items: center; min-width: 170px; }
.joined-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; border-radius: 3px; background: var(--sunrise); }
.joined-mid::after { content: ""; position: absolute; right: -2px; top: 50%; width: 10px; height: 10px; border-top: 3px solid #ee3e74; border-right: 3px solid #ee3e74; transform: translateY(-50%) rotate(45deg); }
.joined-mid span { position: relative; background: #fff; padding: 4px 12px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; line-height: 1.2; text-align: center; color: var(--charcoal); }
@media (max-width: 860px) {
  .joined { grid-template-columns: 1fr; }
  .joined-mid { min-width: 0; height: 64px; }
  .joined-mid::before { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .joined-mid::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
}
@media (min-width: 1100px) { .joined { grid-template-columns: auto minmax(150px, 1fr) auto; } .joined-chips { flex-wrap: nowrap; } .joined-chips li { white-space: nowrap; } }

/* Hero example: Google Ads */
.mock--ads { display: grid; align-content: center; gap: 12px; padding: 22px; background: var(--cream); }
.ad { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 0.85rem; line-height: 1.4; }
.ad p { margin: 0; }
.ad-top { font-size: 0.72rem; color: var(--charcoal); margin-bottom: 6px !important; }
.ad-site { display: flex; align-items: center; gap: 9px; margin-bottom: 6px !important; font-size: 0.8rem; }
.ad-site small { display: block; color: var(--stone); font-size: 0.72rem; }
.ad-fav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--charcoal); color: var(--cream); font: 700 0.62rem var(--font-display); flex: none; }
.ad-title { color: #1a0dab; font-size: 1rem; line-height: 1.3; margin-bottom: 4px !important; }
.ad-desc { color: var(--graphite); }
.ad-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.ad-links span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; color: #1a0dab; }
.ad--dim { opacity: .45; }

/* Homepage: problem stats */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats li { display: grid; align-content: start; gap: 8px; padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.04); }
.stats b { font: 700 clamp(2.4rem, 5vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.03em; background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { color: var(--cream); line-height: 1.45; }
.stats small { color: var(--mist); font: 0.72rem var(--font-data); letter-spacing: .04em; }
.stats-foot { margin: 28px 0 0; font: 600 clamp(1.15rem, 2.4vw, 1.5rem)/1.3 var(--font-display); color: var(--cream); }
.stats-foot strong { color: var(--orange); }

/* Homepage: method + scorecard */
.method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
.method li { position: relative; padding: 24px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.method li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 26px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--white); font-size: .8rem; z-index: 1; }
.method-num { font: 700 0.8rem var(--font-data); letter-spacing: .08em; color: var(--ember); }
.method h3 { margin: 6px 0 8px; font-size: 1.45rem; }
.method p { margin: 0; color: var(--graphite); line-height: 1.5; }
.scorecard { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 22px; border-radius: 18px; background: var(--charcoal); color: var(--cream); }
.scorecard-h { margin: 0; font: 700 0.8rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.scorecard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.scorecard li { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; }
.scorecard i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--orange); }
.scorecard svg { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .stats, .method { grid-template-columns: 1fr; }
  .method li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -14px; }
}
@media (min-width: 961px) { .hero--home h1 { font-size: min(3.7rem, 4.3vw); } }
@media (max-width: 960px) { .hero--home h1 { font-size: clamp(2.1rem, 8.6vw, 3.6rem); } }
.footer-brand { display: grid; gap: 4px; }
.footer-brand p.footer-tagline { margin: 0; color: var(--cream); font-weight: 500; }
.stats-foot strong { display: block; }
.hero .lede--home strong.lede-punch { margin: 10px 0 0; font-size: 1.05em; }
@media (min-width: 961px) { .service-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.service-card--cta { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); align-content: center; }
.service-card--cta h3 { color: var(--cream); }
.service-card--cta p { color: var(--mist); }
.service-card--cta .btn { justify-self: start; margin-top: 4px; }
.service-card--cta:hover { border-color: var(--orange); }

/* Homepage: problem cards */
.pains { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pains li { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 16px; background: rgba(255,255,255,.06); border-left: 3px solid var(--orange); }
.pains b { color: var(--cream); font: 700 1.08rem/1.25 var(--font-display); }
.pains span { color: var(--mist); line-height: 1.5; font-size: .95rem; }
@media (max-width: 1000px) { .pains { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pains { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .method--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 861px) and (max-width: 1100px) { .method--4 { grid-template-columns: 1fr 1fr; } .method--4 li:nth-child(2)::after { display: none; } }
.method--4 h3 { font-size: 1.2rem; }
@media (min-width: 961px) { .hero--home h1 { font-size: min(4.3rem, 5vw); } }
@media (max-width: 960px) { .hero--home h1 { font-size: clamp(2.3rem, 9.6vw, 3.8rem); } }
@media (min-width: 961px) { .hero--home h1 { font-size: min(4rem, 4.6vw); } }
@media (min-width: 380px) { .hero--home h1 > span { white-space: nowrap; } }

/* Homepage hero: rotating channel orbit */
.orbit-wrap { min-width: 0; display: grid; gap: 10px; justify-items: center; }
.orbit { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 0.86; }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.orbit-track--glow { stroke: url(#orbitGrad); stroke-width: 2; stroke-dasharray: 4 10; animation: orbit-dash 6s linear infinite; opacity: .7; }
.orbit-link { fill: none; stroke: url(#orbitGrad); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 8; animation: orbit-dash 1.6s linear infinite; }
.orbit-pulse { fill: var(--orange); }
@keyframes orbit-dash { to { stroke-dashoffset: -28; } }
.orbit-hub { position: absolute; left: 50%; top: 56%; width: 30%; min-width: 104px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sunrise); display: grid; place-items: center; box-shadow: 0 24px 50px -18px rgba(240, 80, 60, .55); z-index: 50; }
.orbit-hub::before, .orbit-hub::after { content: ""; position: absolute; inset: -10%; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: orbit-ring 3s ease-out infinite; }
.orbit-hub::after { animation-delay: 1.5s; }
@keyframes orbit-ring { 0% { transform: scale(.85); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.orbit-hub-in { width: 86%; aspect-ratio: 1; border-radius: 50%; background: var(--charcoal); color: var(--cream); display: grid; place-content: center; text-align: center; gap: 4px; padding: 8px; }
.orbit-hub-in b { font: 700 clamp(.85rem, 1.6vw, 1.05rem)/1.1 var(--font-display); }
.orbit-hub-in small { font: 500 clamp(.58rem, .9vw, .66rem)/1.3 var(--font-data); color: var(--orange); letter-spacing: .04em; text-transform: uppercase; }
.orbit-node { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 14px 28px -18px rgba(20,20,20,.45); font: 600 .84rem/1 var(--font-body); color: var(--charcoal); white-space: nowrap; will-change: transform; }
.orbit-node svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--peach); color: var(--ember); flex: none; }
.orbit-pops { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 60; width: 0; }
.orbit-pops span { position: absolute; left: 0; top: 0; transform: translate(-50%, 10px) scale(.9); opacity: 0; padding: 7px 12px; border-radius: 999px; background: var(--charcoal); color: var(--cream); font: 600 .78rem/1 var(--font-body); white-space: nowrap; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.orbit-pops span::before { content: "✓ "; color: var(--good, #3ccf7a); }
.orbit-pops span.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.orbit-caption { margin: 0; font-size: .85rem; color: var(--stone); text-align: center; }
@media (max-width: 860px) { .orbit { max-width: 440px; } .orbit-node { font-size: .76rem; padding: 6px 10px 6px 6px; } .orbit-node svg { width: 22px; height: 22px; padding: 4px; } }
@media (prefers-reduced-motion: reduce) { .orbit-link, .orbit-track--glow, .orbit-hub::before, .orbit-hub::after { animation: none; } }
@media (max-width: 500px) { .orbit { aspect-ratio: 1 / 1.05; } .orbit-hub-in small { display: none; } }
.orbit { isolation: isolate; z-index: 0; }
@media (min-width: 961px) { .hero--home h1 { font-size: min(3.25rem, 3.9vw); } }
@media (max-width: 960px) { .hero--home h1 { font-size: clamp(1.8rem, 8vw, 3.2rem); } }
.section-head--split h2.problem-trio { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px 24px; font-size: clamp(1.4rem, 2.35vw, 2.1rem); text-wrap: nowrap; }
.section-head--split h2.problem-trio span { display: block; white-space: nowrap; }
@media (max-width: 860px) { .section-head--split h2.problem-trio { grid-template-columns: 1fr; font-size: clamp(1.6rem, 6.6vw, 2.2rem); } }

/* Problem: connected "how search checks you" chain */
.chain { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; align-items: stretch; counter-reset: chain; }
.chain li { counter-increment: chain; display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); position: relative; }
.chain li:nth-child(1) { grid-column: 1; } .chain li:nth-child(2) { grid-column: 3; } .chain li:nth-child(3) { grid-column: 5; }
.chain li::before { content: "0" counter(chain); font: 600 .72rem var(--font-data); letter-spacing: .08em; color: var(--orange); }
.chain li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 56px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.15)) , radial-gradient(circle, var(--orange) 0 3px, transparent 4px) 0 50% / 12px 12px no-repeat; background-image: radial-gradient(circle at center, var(--orange) 0 4px, transparent 5px), linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)); background-size: 10px 10px, 100% 2px; background-repeat: no-repeat; background-position: 0 50%, 0 50%; height: 10px; transform: translateY(-50%); animation: chain-flow 2.4s linear infinite; }
.chain li:nth-child(2)::after { animation-delay: 1.2s; }
@keyframes chain-flow { from { background-position: 0 50%, 0 50%; } to { background-position: 100% 50%, 0 50%; } }
.chain b { color: var(--cream); font: 700 1.12rem/1.25 var(--font-display); }
.chain span { color: var(--mist); line-height: 1.5; font-size: .95rem; }
.chain small { color: var(--mist); opacity: .75; font: 0.7rem var(--font-data); letter-spacing: .04em; }
.chain li:last-child { border-color: rgba(255,122,61,.55); background: rgba(255,122,61,.08); }
@media (max-width: 860px) {
  .chain { grid-template-columns: 1fr; row-gap: 40px; }
  .chain li:nth-child(n) { grid-column: 1; }
  .chain li:not(:last-child)::after { top: 100%; left: 50%; width: 10px; height: 40px; transform: translateX(-50%); background-size: 10px 10px, 2px 100%; background-position: 50% 0, 50% 0; animation-name: chain-flow-v; }
  @keyframes chain-flow-v { from { background-position: 50% 0, 50% 0; } to { background-position: 50% 100%, 50% 0; } }
}
@media (prefers-reduced-motion: reduce) { .chain li::after { animation: none !important; } }

/* Problem trio: one line only where it fits, stacked otherwise */
.section-head--split h2.problem-trio { font-size: min(2rem, 2.05vw); gap: 10px 20px; }
@media (max-width: 1099px) { .section-head--split h2.problem-trio { grid-template-columns: 1fr; font-size: clamp(1.6rem, 5.4vw, 2.3rem); } }
.stats li { padding: 18px 20px; }
.stats b { font-size: clamp(2rem, 4vw, 2.8rem); }

/* Stats moved into the light "Why it matters" band */
.journey-band > .stats--light { grid-column: 1 / -1; margin-top: 8px; }
.stats--light li { border-color: var(--line); background: var(--white); }
.stats--light span { color: var(--charcoal); }
.stats--light small { color: var(--stone); }
#problem .chain { margin-bottom: 0; }
#problem .stats-foot { margin-top: 32px; }

/* Hero h1: longer first line, so let it wrap naturally (balanced) instead of nowrap */
.hero--home h1 > span { white-space: normal !important; display: block; text-wrap: balance; }
@media (min-width: 961px) { .hero--home h1 { font-size: min(2.6rem, 3.3vw); } }
.hero--home h1 > span.grad { white-space: nowrap !important; text-wrap: nowrap; }
/* Tagline line always fits on one line: shrinks with the column only when needed */
.hero--home .hero-copy { container-type: inline-size; }
.hero--home h1 > span.grad { font-size: min(1em, 6.3cqw); }

/* Homepage hero: one search typed into each channel, you as the top result */
.search-demo { max-width: 480px; width: 100%; margin-inline: auto; display: grid; gap: 14px; min-width: 0; }
.sd-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 40px -18px rgba(20,20,20,.25); }
.sd-tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sd-tab { font: 600 .74rem var(--font-body); padding: 5px 9px; white-space: nowrap; border-radius: 99px; border: 1px solid var(--line); background: var(--white); color: var(--stone); transition: .3s; }
.sd-tab.is-on { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.sd-box { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 99px; }
.sd-box svg { width: 20px; height: 20px; color: var(--stone); flex: none; }
.sd-typed { font: 500 1.05rem var(--font-body); min-height: 1.4em; }
.sd-typed::after { content: ""; display: inline-block; width: 2px; height: 1.1em; background: var(--charcoal); margin-left: 2px; vertical-align: -3px; animation: sd-blink 1s steps(1) infinite; }
@keyframes sd-blink { 50% { opacity: 0; } }
.sd-results { display: grid; gap: 10px; min-height: 236px; align-content: start; }
.sd-res { padding: 14px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; opacity: .45; transition: .4s; }
.sd-res b { display: block; font: 600 .95rem var(--font-body); }
.sd-res span span { font-size: .82rem; color: var(--stone); }
.sd-res em { font: 500 .7rem var(--font-data); font-style: normal; color: var(--ember); }
.sd-res.is-you { opacity: 1; border: 2px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--sunrise) border-box; transform: scale(1.02); }
.sd-res.is-you b { background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--peach); color: var(--ember); flex: none; }
.sd-ico svg { width: 18px; height: 18px; }
.sd-results.is-swap .sd-res { opacity: 0; transform: translateY(6px); }
.sd-foot { display: flex; justify-content: center; min-height: 34px; }
.sd-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--charcoal); color: var(--cream); border-radius: 99px; padding: 6px 12px; font: 600 .85rem var(--font-body); opacity: 0; transform: translateY(6px); transition: .4s; }
.sd-pill i { color: #4ade80; font-style: normal; }
.sd-foot.is-on .sd-pill { opacity: 1; transform: none; }

/* Homepage hero: two-step details box (website or business, then email) */
.quick-check { display: flex; gap: 8px; max-width: 32rem; padding: 6px; border-radius: 99px; background: var(--white); border: 1px solid var(--line); }
.quick-check input:not([type=hidden]) { flex: 1; min-width: 0; border: 0; background: none; padding: 0 14px; font: 1rem var(--font-body); color: var(--charcoal); }
.quick-check input:focus { outline: none; }
.quick-check:focus-within { outline: 2px solid var(--ember); outline-offset: 2px; }
.quick-check .quick-check-trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.quick-check-note { font-size: .85rem; color: var(--stone); margin: -10px 0 0; }
.quick-check-note.is-error { color: var(--poor); }
.quick-check-note.is-ok { color: var(--good); font-weight: 600; }
@media (max-width: 500px) { .quick-check { flex-direction: column; border-radius: 18px; } .quick-check input:not([type=hidden]) { padding: 12px; } .quick-check .btn { justify-content: center; } }

/* Homepage: the customer's path (what happens before they call) */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.path::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.12), var(--orange), rgba(255,255,255,.12)); background-size: 200% 100%; animation: path-flow 4s linear infinite; }
@keyframes path-flow { to { background-position: -200% 0; } }
.path li { position: relative; display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: 16px; background: var(--graphite); border: 1px solid var(--line-dark); }
.path-num { justify-self: start; font: 600 .75rem var(--font-data); color: var(--charcoal); background: var(--orange); border-radius: 99px; padding: 4px 9px; position: relative; z-index: 1; }
.path b { color: var(--cream); font: 700 1.1rem/1.2 var(--font-display); }
.path q { color: var(--orange); font-size: .9rem; font-style: italic; }
.path p { margin: 0; color: var(--mist); font-size: .9rem; line-height: 1.5; }
.path p span { display: block; font: 500 .66rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); opacity: .6; margin-bottom: 4px; }
.path small { color: var(--mist); opacity: .7; font: .68rem var(--font-data); }
.path-win { background: linear-gradient(var(--graphite), var(--graphite)) padding-box, var(--sunrise) border-box !important; border: 1px solid transparent !important; }
.path-win q { color: var(--cream); }
@media (max-width: 1000px) {
  .path { grid-template-columns: 1fr; padding-left: 26px; }
  .path::before { left: 10px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(rgba(255,255,255,.12), var(--orange), rgba(255,255,255,.12)); }
}
@media (prefers-reduced-motion: reduce) { .path::before { animation: none; } }

/* Homepage: where most businesses lose them */
.gaps-track { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 20px; }
.gaps-track span { font: 600 .82rem var(--font-body); padding: 6px 12px; border-radius: 99px; background: var(--white); border: 1px solid var(--line); }
.gaps-track i { font-style: normal; color: var(--stone); }
.gaps-track .lost { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.gaps-track .ok { color: var(--good); }
.gaps-track .x { color: var(--poor); border-color: #f3b4b4; }
.gaps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gaps li { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--poor); }
.gaps-step { font: 500 .7rem var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--poor); }
.gaps b { font: 700 1.08rem/1.25 var(--font-display); }
.gaps p { margin: 0; color: var(--stone); font-size: .93rem; line-height: 1.5; }
.gaps-stat { display: block; font: 800 2.2rem/1 var(--font-display); color: var(--charcoal); margin-bottom: 4px; }
.gaps small { color: var(--stone); font: .68rem var(--font-data); }
.gaps-foot { margin: 28px 0 0; font: 600 clamp(1.1rem, 2.2vw, 1.4rem)/1.35 var(--font-display); }
.gaps-foot strong { display: block; color: var(--ember); }
@media (max-width: 1000px) { .gaps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gaps { grid-template-columns: 1fr; } }

/* Homepage: which step each service fixes */
.service-card .fixes { justify-self: start; font: 500 .68rem var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ember); background: var(--peach); padding: 4px 8px; border-radius: 99px; }

/* Homepage: customers check several places, in any order */
.checks-band { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.checks-band .section-head { margin: 0; }
.checks-out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.checks-out span { font: 600 .9rem var(--font-body); padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line-dark); color: var(--cream); }
.checks-out i { font-style: normal; color: #4ade80; }
.checks-out .win { background: var(--sunrise); border-color: transparent; color: var(--charcoal); }
.checks { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, auto); gap: 14px; }
.checks-c { grid-area: 2 / 3 / 3 / 5; justify-self: center; width: min(100%, 170px); display: grid; place-items: center; text-align: center; aspect-ratio: 1; border-radius: 50%; background: var(--sunrise); color: var(--charcoal); font: 700 1rem/1.15 var(--font-display); margin: 6px; }
.checks-n { display: grid; gap: 4px; align-content: center; padding: 14px; border-radius: 14px; background: var(--graphite); border: 1px solid var(--line-dark); transition: border-color .35s, transform .35s, background .35s; min-height: 84px; }
.checks-n b { color: var(--cream); font: 700 .98rem var(--font-display); }
.checks-n span { color: var(--mist); font-size: .82rem; opacity: .55; transition: opacity .35s, color .35s; }
.checks-n.is-on { border-color: var(--orange); background: #2f2420; transform: scale(1.04); }
.checks-n.is-on span { opacity: 1; color: var(--orange); }
.checks-n:nth-of-type(2) { grid-area: 1 / 1 / 2 / 3; } .checks-n:nth-of-type(3) { grid-area: 1 / 3 / 2 / 5; } .checks-n:nth-of-type(4) { grid-area: 1 / 5 / 2 / 7; }
.checks-n:nth-of-type(5) { grid-area: 3 / 1 / 4 / 4; } .checks-n:nth-of-type(6) { grid-area: 3 / 4 / 4 / 7; }
.checks::before, .checks::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--line-dark); z-index: -1; }
.checks { isolation: isolate; }
.checks::after { inset: 0 auto 0 50%; width: 1px; height: auto; }
.checks-facts { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checks-facts li { color: var(--cream); font-size: .95rem; line-height: 1.5; padding: 16px 18px; border-left: 3px solid var(--orange); background: rgba(255,255,255,.04); border-radius: 0 12px 12px 0; }
.checks-facts small { display: block; margin-top: 6px; color: var(--mist); font: .68rem var(--font-data); }
@media (max-width: 900px) { .checks-band { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .checks-facts { grid-template-columns: 1fr; } .checks { gap: 8px; } .checks-n { padding: 10px; min-height: 76px; } .checks-n b { font-size: .86rem; } .checks-n span { font-size: .74rem; } .checks-c { font-size: .85rem; } }
.service-card .ft { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: .93rem; line-height: 1.45; }
.service-card .ft dt { font: 500 .66rem/1.9 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.service-card .ft dd { margin: 0; color: var(--charcoal); }
.faq-cta--simple { display: grid; gap: 10px; justify-items: start; }
.faq-cta--simple h3 { margin: 0; }
.faq-cta--simple p { margin: 0; color: var(--stone); }

/* Homepage v2 (draft): hero with free check form, stat row, priced service list, steps, sticky bar */
.hero--v2 .wrap { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.hero--v2 h1 { font-size: min(2.6rem, 3.3vw); }
.hero--v2 h1 > span { display: block; text-wrap: balance; }
.hero--v2 .hero-copy { container-type: inline-size; }
.hero--v2 h1 > span.grad { white-space: nowrap; font-size: min(1em, 6.3cqw); }
@media (max-width: 860px) { .hero--v2 .wrap { grid-template-columns: 1fr; } .hero--v2 h1 { font-size: clamp(1.8rem, 8vw, 3.2rem); } }
.v2-stats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 34rem; }
.v2-stats li { display: grid; gap: 2px; padding-top: 12px; border-top: 2px solid var(--line); }
.v2-stats b { font: 800 1.6rem/1 var(--font-display); }
.v2-stats span { font-size: .85rem; color: var(--stone); line-height: 1.35; }
.v2-form { display: grid; gap: 12px; padding: 26px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 48px -28px rgba(20,20,20,.3); }
.v2-form h2 { font: 700 1.5rem/1.15 var(--font-display); margin: 0; }
.v2-form-eyebrow { margin: 0; font: 600 .78rem var(--font-body); color: var(--ember); }
.v2-form-step { margin: 0; font: 500 .7rem var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.v2-fields { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.v2-fields label { display: grid; gap: 4px; font: 600 .85rem var(--font-body); }
.v2-fields small { font-weight: 400; color: var(--stone); }
.v2-fields input { font: 1rem var(--font-body); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); width: 100%; box-sizing: border-box; min-width: 0; }
.v2-fields input:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.v2-form .btn { justify-content: center; width: 100%; }
.v2-form-note { margin: 0; font-size: .8rem; color: var(--stone); text-align: center; }
.v2-form-note.is-error { color: var(--poor); }
.v2-form-note.is-ok { color: var(--good); font-weight: 600; font-size: .95rem; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.section-head--row > div { display: grid; gap: 14px; }
.v2-services { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid rgba(20,20,20,.12); }
.v2-services a { display: grid; grid-template-columns: 1.1fr 2fr auto auto; gap: 8px 24px; align-items: center; padding: 20px 4px; border-bottom: 1px solid rgba(20,20,20,.12); color: inherit; text-decoration: none; transition: background .2s; }
.v2-services a:hover { background: rgba(255,255,255,.5); }
.v2-services b { font: 700 1.1rem/1.25 var(--font-display); }
.v2-services span { color: var(--stone); font-size: .95rem; line-height: 1.45; }
.v2-services em { font-style: normal; font-weight: 600; white-space: nowrap; }
.v2-services i { font-style: normal; color: var(--ember); font-weight: 700; }
@media (max-width: 760px) { .v2-services a { grid-template-columns: 1fr auto; } .v2-services span { grid-column: 1 / -1; grid-row: 2; } .v2-services em { grid-row: 3; } .v2-services i { grid-row: 1; grid-column: 2; } }
.v2-services-foot { margin: 24px 0 0; font: 600 1.15rem/1.35 var(--font-display); }
.v2-services-foot strong { color: var(--ember); }
.v2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v2-steps li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.v2-steps b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sunrise); color: var(--charcoal); font: 800 1rem var(--font-display); }
.v2-steps strong { font: 700 1.15rem var(--font-display); }
.v2-steps span { color: var(--stone); line-height: 1.5; }
@media (max-width: 760px) { .v2-steps { grid-template-columns: 1fr; } }
.v2-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-sticky { display: none; }
@media (max-width: 760px) {
  .v2-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,246,240,.96); border-top: 1px solid var(--line); }
  .v2-sticky .btn { width: 100%; justify-content: center; }
  body:has(.v2-sticky) { padding-bottom: 72px; }
}
.v2-fields[hidden], .v2-form [hidden] { display: none; }
.v2-form .quick-check-trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.v2-services a { grid-template-columns: 1.1fr 2fr 9.5rem 1rem; }
.v2-services em { text-align: left; }
@media (max-width: 760px) { .v2-services a { grid-template-columns: 1fr auto; } .v2-services em { text-align: left; } }
.v2-sticky { transition: transform .3s; }
.v2-sticky.is-away { transform: translateY(110%); }

/* Homepage: found (keywords) + trusted (one message) = chosen */
.checks-how { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.checks-how li { display: grid; gap: 8px; align-content: start; }
.checks-how b { justify-self: start; font: 600 .9rem var(--font-body); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-dark); color: var(--cream); white-space: nowrap; }
.checks-how b::after { content: " \2713"; color: #4ade80; }
.checks-how span { color: var(--mist); line-height: 1.45; font-size: .92rem; }
.checks-how .win b { background: var(--sunrise); border-color: transparent; color: var(--charcoal); }
.checks-how .win b::after { content: ""; }
.checks-how .win span { color: var(--cream); font-weight: 600; }
@media (max-width: 560px) { .checks-how { grid-template-columns: 1fr; } .checks-how li { grid-template-columns: 6.5rem 1fr; align-items: center; } }

/* v2 services: icon tiles and a lift on hover */
.v2-services { gap: 10px; border-top: 0; }
.v2-services a, .v2-services a:hover { grid-template-columns: 3rem 1.1fr 2fr 9.5rem 1.5rem; padding: 18px 20px; border: 1px solid rgba(20,20,20,.08); border-radius: 18px; background: rgba(255,255,255,.45); transition: background .25s, transform .25s, box-shadow .25s, border-color .25s; }
.v2-services a:hover, .v2-services a:focus-visible { background: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(120,50,20,.35); }
.v2-services .v2-ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--sunrise); color: #fff; box-shadow: 0 6px 16px -8px rgba(230,80,40,.6); transition: transform .25s; }
.v2-services .v2-ico svg { width: 1.4rem; height: 1.4rem; }
.v2-services a:hover .v2-ico, .v2-services a:focus-visible .v2-ico { transform: rotate(-6deg) scale(1.06); }
.v2-services i { justify-self: end; transition: transform .25s; }
.v2-services a:hover i { transform: translateX(4px); }
@media (max-width: 760px) {
  .v2-services a, .v2-services a:hover { grid-template-columns: 2.75rem 1fr auto; gap: 6px 14px; padding: 16px; }
  .v2-services .v2-ico { width: 2.75rem; height: 2.75rem; grid-row: 1 / span 3; align-self: start; }
  .v2-services b { grid-column: 2; grid-row: 1; }
  .v2-services i { grid-column: 3; grid-row: 1; }
  .v2-services span:not(.v2-ico):not(.todo) { grid-column: 2 / -1; grid-row: 2; }
  .v2-services em { grid-column: 2 / -1; grid-row: 3; }
}

/* v2 how we work: editorial rows with a real example of what each step gives you */
.v2-how { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--charcoal); }
.v2-how > li { display: grid; grid-template-columns: 6rem 1fr 1.1fr; gap: 28px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); }
.v2-how-n { font: 800 6.5rem/.8 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--charcoal); letter-spacing: -.04em; }
.v2-how > li:hover .v2-how-n { color: var(--charcoal); }
.v2-how-n { transition: color .3s; }
.v2-how-txt h3 { margin: 0 0 8px; font: 700 1.45rem/1.2 var(--font-display); }
.v2-how-txt p { margin: 0; color: var(--stone); line-height: 1.55; max-width: 34ch; }
.v2-how-art { justify-self: end; width: min(100%, 390px); font: .85rem/1.5 var(--font-data); }
.v2-how-art small { display: block; font: 600 .7rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin-bottom: 10px; }
.art-note { background: #fffbe8; padding: 18px 20px; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 28px -18px rgba(80,40,0,.45); background-image: repeating-linear-gradient(transparent 0 27px, rgba(184,67,0,.12) 27px 28px); background-position: 0 38px; }
.art-note p { margin: 0; line-height: 28px; }
.art-note i { font-style: normal; font-weight: 700; display: inline-block; width: 1.4em; }
.art-note .x { color: var(--poor); } .art-note .ok { color: var(--good); }
.art-ticket { background: var(--charcoal); color: var(--cream); padding: 18px 20px; border-radius: 14px; position: relative; -webkit-mask: radial-gradient(circle 9px at 0 62%, transparent 98%, #000) , radial-gradient(circle 9px at 100% 62%, transparent 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }
.art-ticket small { color: var(--mist); }
.art-ticket dl { margin: 0; display: grid; gap: 8px; }
.art-ticket dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line-dark); padding-bottom: 8px; }
.art-ticket dl div:last-child { border: 0; padding: 0; }
.art-ticket dt { color: var(--mist); } .art-ticket dd { margin: 0; text-align: right; }
.art-board ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.art-board li { font: 600 .85rem var(--font-body); padding: 8px 14px 8px 12px; border-radius: 99px; background: var(--white); border: 1px solid var(--line); }
.art-board li::before { content: "✓"; color: var(--good); font-weight: 800; margin-right: 6px; }
.art-board li:nth-child(odd) { transform: rotate(-2deg); } .art-board li:nth-child(3n) { transform: rotate(1.5deg); }
@media (max-width: 860px) {
  .v2-how > li { grid-template-columns: 4rem 1fr; gap: 14px 18px; padding: 28px 0; align-items: start; }
  .v2-how-n { font-size: 4.2rem; }
  .v2-how-art { grid-column: 1 / -1; justify-self: stretch; width: auto; }
  .art-note { transform: rotate(-1deg); }
}

/* v2 how we work: a chat, with the customer's first problem rotating */
.v2-chat { display: grid; gap: 6px; max-width: 760px; }
.v2-chat .them + .us, .v2-chat .us + .them { margin-top: 6px; }
.v2-chat p { margin: 0; padding: 11px 16px; border-radius: 20px; line-height: 1.5; max-width: 82%; }
.v2-chat .them { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; justify-self: start; }
.v2-chat .us { background: var(--charcoal); color: var(--cream); border-bottom-right-radius: 6px; justify-self: end; }
.v2-chat .us strong { color: var(--orange); }
.v2-chat small { font: 600 .7rem var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-top: 6px; }
.v2-chat small.r { justify-self: end; }
.v2-chat-rotate span { display: inline-block; transition: opacity .3s; }
.v2-chat-rotate.is-typing span { opacity: 0; }
.v2-chat-rotate { position: relative; min-width: 5.5rem; }
.v2-chat-rotate::after { content: ""; position: absolute; left: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--stone); opacity: 0; box-shadow: 12px 0 var(--stone), 24px 0 var(--stone); transition: opacity .2s; }
.v2-chat-rotate.is-typing::after { opacity: .6; animation: v2dots 1s infinite; }
@keyframes v2dots { 50% { opacity: .2; } }
@media (max-width: 560px) { .v2-chat p { max-width: 92%; } }

/* v2 how we work: chat on a phone, problems to pick on the left */
.v2-how2 { display: grid; grid-template-columns: 1fr minmax(300px, 390px); gap: clamp(32px, 7vw, 96px); align-items: center; }
.v2-how2-side h2 { margin: 0 0 14px; font: 800 var(--step-3)/1.1 var(--font-display); }
.v2-how2-lede { color: var(--stone); font-size: 1.1rem; line-height: 1.55; max-width: 38ch; margin: 0 0 28px; }
.v2-how2-ask { font: 700 .78rem var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); margin: 0 0 12px; }
.v2-probs { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; }
.v2-probs button { font: 600 .95rem var(--font-body); color: var(--charcoal); background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 10px 16px; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.v2-probs button:hover { border-color: var(--orange); }
.v2-probs button.is-on { background: var(--sunrise); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(230,80,40,.7); }
.v2-phone { background: var(--white); border-radius: 38px; padding: 14px; box-shadow: 0 30px 60px -30px rgba(120,50,20,.45), inset 0 0 0 1px var(--line); }
.v2-phone-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; font: 700 .9rem var(--font-display); }
.v2-av { width: 30px; height: 30px; border-radius: 50%; background: var(--sunrise); color: #fff; display: grid; place-items: center; font: 800 .68rem var(--font-display); }
.v2-chat--phone { gap: 6px; max-width: none; }
.v2-chat--phone p { font-size: .92rem; max-width: 88%; padding: 9px 13px; }
.v2-chat--phone .them { background: #f3ece7; border: 0; }
.v2-chat--phone .us { background: var(--sunrise); color: #fff; }
.v2-chat--phone .us strong { color: #fff; }
@media (max-width: 860px) { .v2-how2 { grid-template-columns: 1fr; } .v2-probs { margin-bottom: 22px; } }
.anchor-contact { display: block; scroll-margin-top: 120px; }