/* =========================================================================
   Limerock Systems — site styles
   Layout idea: pale limestone ground, charcoal bands, and "courses" of
   content laid like stone. One accent (ochre) is reserved for actions.
   To change a color or font site-wide, edit the tokens below.
   ========================================================================= */

:root {
  /* Color */
  --ground: #E7E5DF;      /* limestone page background */
  --surface: #F4F3EF;     /* cards and form panels */
  --ink: #1F2226;         /* charcoal text */
  --ink-2: #4A4F55;       /* secondary text */
  --rule: #CBC7BD;        /* lines and borders */
  --char: #24272B;        /* dark bands */
  --char-2: #31353A;      /* raised surfaces on dark bands */
  --char-deep: #1A1C1F;   /* footer */
  --on-char: #ECEAE4;     /* text on dark bands */
  --on-char-2: #AEB1B4;   /* secondary text on dark bands */
  --ochre: #C9973A;       /* buttons and the accent block */
  --ochre-hover: #D7A64A;
  --ochre-text: #7A5414;  /* accent text on the light ground */
  --focus: #2B5C8A;
  --error: #A3321F;

  /* Type */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Spacing and shape */
  --wrap: 1120px;
  --radius: 4px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--on-char); padding: 10px 14px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -0.015em; }
h3 { font-size: 1.3rem; font-stretch: 106%; font-weight: 700; line-height: 1.2; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochre-text);
}
.band-dark .eyebrow { color: var(--ochre); }

.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 60ch; }
.band-dark .lede { color: var(--on-char-2); }

.measure { max-width: 65ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--ochre); color: var(--ink); }
.btn-primary:hover { background: var(--ochre-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--on-char); }
.band-dark .btn-ghost { color: var(--on-char); border-color: var(--on-char-2); }
.band-dark .btn-ghost:hover { background: var(--on-char); color: var(--ink); border-color: var(--on-char); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link { font-weight: 600; text-underline-offset: 3px; }
.text-link:hover { color: var(--ochre-text); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand svg { height: 38px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; font-weight: 600; font-size: 0.98rem; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--ochre); }
.header-phone { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav .btn { min-height: 42px; padding: 9px 16px; font-size: 0.95rem; }

.nav-toggle {
  display: none; align-items: center; gap: 8px;
  background: none; border: 2px solid var(--ink); border-radius: var(--radius);
  min-height: 44px; padding: 8px 12px; font: 600 0.95rem var(--font-body); color: var(--ink); cursor: pointer;
}
.nav-toggle-bars { width: 18px; height: 12px; position: relative; display: inline-block;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--rule);
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px));
  }
  .nav.is-open { display: flex; box-shadow: 0 18px 30px rgba(31, 34, 38, .18); }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--ochre-text); }
  .header-phone { padding: 14px 0; }
  .nav .btn { min-height: 48px; }
}

/* ---------- Bands (page sections) ---------- */
.band { padding-block: clamp(56px, 8vw, 96px); }
.band-tight { padding-block: clamp(40px, 6vw, 64px); }
.band-dark { background: var(--char); color: var(--on-char); }
.band-surface { background: var(--surface); border-block: 1px solid var(--rule); }

/* Stone-course divider: a row of blocks laid in running bond */
.course {
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--rule) 0 118px, transparent 118px 122px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 59px, var(--rule) 59px 177px, transparent 177px 181px) 0 8px / 100% 6px no-repeat;
  opacity: .9;
}
.band-dark .course, .course-dark {
  background:
    repeating-linear-gradient(90deg, var(--char-2) 0 118px, transparent 118px 122px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 59px, var(--char-2) 59px 177px, transparent 177px 181px) 0 8px / 100% 6px no-repeat;
}

.section-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }

/* ---------- Hero ---------- */
.hero { background: var(--char); color: var(--on-char); position: relative; overflow: hidden; }
.hero::before {
  /* faint limestone speckle */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(236,234,228,.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(236,234,228,.04) 0 1px, transparent 1.5px);
  background-size: 23px 23px, 37px 37px;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
  padding-block: clamp(48px, 7vw, 88px);
}
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-copy .lede { font-size: 1.22rem; }
.hero-note { font-size: 0.95rem; color: var(--on-char-2); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero-note span::before { content: "■ "; color: var(--ochre); font-size: .7em; vertical-align: 2px; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Example text-message thread */
.thread {
  margin: 0;
  background: var(--char-2); border: 1px solid #3E4248; border-radius: 10px;
  padding: 18px; display: grid; gap: 12px; min-width: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.thread-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: .8125rem; color: var(--on-char-2); letter-spacing: .04em; }
.thread-tag { color: var(--ochre); text-transform: uppercase; letter-spacing: .12em; }
.thread-event { font-family: var(--font-mono); font-size: .8rem; color: var(--on-char-2); text-align: center;
  border-top: 1px dashed #4A4F55; border-bottom: 1px dashed #4A4F55; padding: 6px 0; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: .97rem; line-height: 1.45; }
.bubble small { display: block; font-family: var(--font-mono); font-size: .75rem; opacity: .7; margin-top: 4px; }
.bubble-out { justify-self: end; background: var(--on-char); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble-in { justify-self: start; background: #454A50; color: var(--on-char); border-bottom-left-radius: 4px; }
.thread-foot { font-size: .82rem; color: var(--on-char-2); }

/* ---------- Problem list ---------- */
.problems { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.problem { padding: 22px 22px 6px 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.problem + .problem { padding-left: 22px; border-left: 1px solid var(--rule); }
.problem-time { font-family: var(--font-mono); font-size: .8125rem; color: var(--ochre-text); letter-spacing: .06em; }
.problem p { color: var(--ink-2); }
@media (max-width: 900px) {
  .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem:nth-child(3) { padding-left: 0; border-left: 0; }
  .problem:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .problems { grid-template-columns: minmax(0, 1fr); }
  .problem, .problem + .problem { padding-left: 0; border-left: 0; }
  .problem + .problem { border-top: 1px solid var(--rule); }
}

/* ---------- Service cards ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-card {
  background: var(--surface); border: 1px solid var(--rule); border-top: 6px solid var(--ink);
  border-radius: var(--radius); padding: 26px; display: grid; gap: 14px; align-content: start; min-width: 0;
}
.service-card .eyebrow { color: var(--ink-2); }
.service-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.service-card li { padding-left: 22px; position: relative; }
.service-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 6px; background: var(--ochre); }
.service-card .text-link { margin-top: auto; }

.addons { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.addon {
  border: 1px dashed var(--ink-2); border-radius: var(--radius); padding: 22px 24px;
  display: grid; gap: 8px; align-content: start; min-width: 0;
}
.addon .eyebrow { color: var(--ink-2); }
@media (max-width: 900px) {
  .services-grid, .addons { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; padding: 0 24px 0 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.1rem;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--ochre); color: var(--ink); border-radius: var(--radius);
}
.step::after { content: ""; position: absolute; left: 52px; right: 8px; top: 22px; border-top: 2px dotted var(--on-char-2); opacity: .5; }
.step:last-child::after { display: none; }
.step p { color: var(--on-char-2); }
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .step::after { display: none; }
}

/* ---------- Two-column feature ---------- */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.check-list li { padding: 16px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.check-list strong { font-family: var(--font-display); font-stretch: 106%; font-size: 1.08rem; }
.check-list span { color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--font-display); font-stretch: 106%; font-weight: 700; font-size: 1.12rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 14px;
  font-family: var(--font-mono); font-size: 1.4rem; color: var(--ochre-text);
}
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; display: grid; gap: 10px; }

/* ---------- CTA band ---------- */
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.cta-band h2 { max-width: 22ch; }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page header (inner pages) ---------- */
.page-head { background: var(--char); color: var(--on-char); }
.page-head .wrap { padding-block: clamp(44px, 6vw, 72px); display: grid; gap: 16px; }

/* ---------- Service detail (services page) ---------- */
.service-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.service-detail + .service-detail { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(48px, 7vw, 80px); border-top: 1px solid var(--rule); }
.service-detail .copy { display: grid; gap: 16px; min-width: 0; }
.service-detail .copy p { color: var(--ink-2); }
.service-detail .includes {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; min-width: 0;
}
.service-detail .includes h3 { font-size: 1rem; font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.service-detail .includes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.service-detail .includes li { padding: 12px 0; border-top: 1px solid var(--rule); display: grid; gap: 2px; }
.service-detail .includes li:first-child { border-top: 0; padding-top: 0; }
.service-detail .includes li strong { font-weight: 700; }
.service-detail .includes li span { color: var(--ink-2); font-size: .97rem; }
.service-tag { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre-text); }
@media (max-width: 880px) { .service-detail { grid-template-columns: minmax(0, 1fr); } }

.jump-links { display: flex; flex-wrap: wrap; gap: 10px; }
.jump-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .92rem; font-weight: 600; text-decoration: none; padding: 7px 12px;
  border: 1px solid #4A4F55; border-radius: var(--radius); color: var(--on-char);
}
.jump-links a:hover { border-color: var(--ochre); }

/* ---------- Lead check form ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: minmax(0, 1fr); } }
.form-aside { display: grid; gap: 22px; min-width: 0; }
.form-aside p { color: var(--ink-2); }

.form-panel { background: var(--surface); border: 1px solid var(--rule); border-top: 6px solid var(--ink); border-radius: var(--radius); padding: clamp(20px, 4vw, 34px); min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field label { font-weight: 600; font-size: .97rem; }
.field .req { color: var(--error); }
.field .opt { font-weight: 400; color: var(--ink-2); font-size: .9rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #FFFFFF; border: 1px solid #9B978D; border-radius: var(--radius);
  padding: 11px 12px; min-height: 48px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: .9rem; font-weight: 600; }

.consent { grid-column: 1 / -1; display: grid; gap: 12px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; background: var(--ground); }
.consent legend { font-weight: 700; padding: 0 6px; }
.consent-intro { font-size: .93rem; color: var(--ink-2); }
.consent-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .93rem; line-height: 1.5; }
.consent-item input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.form-legal { grid-column: 1 / -1; font-size: .9rem; color: var(--ink-2); }
.form-legal a { font-weight: 600; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { grid-column: 1 / -1; border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 6px; }
.form-status.is-preview { background: #F3E6C8; border: 1px solid var(--ochre); }
.form-status.is-error { background: #F6DCD6; border: 1px solid var(--error); }
.form-status strong { font-weight: 700; }

/* ---------- Contact block ---------- */
.contact-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; display: grid; gap: 0; min-width: 0; }
.contact-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.contact-row:last-of-type { border-bottom: 0; }
.contact-row dt { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.contact-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 420px) { .contact-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- Legal pages ---------- */
.legal { max-width: 72ch; display: grid; gap: 16px; }
.legal h2 { font-size: 1.45rem; margin-top: 18px; }
.legal h3 { font-size: 1.1rem; margin-top: 6px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal .updated { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--char-deep); color: var(--on-char-2); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; padding-block: 56px 32px; }
.footer-grid h2 { font-family: var(--font-mono); font-stretch: 100%; font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--on-char); margin-bottom: 8px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-grid li { padding-block: 6px; }
.footer-grid li a { display: inline-block; padding-block: 4px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--on-char); text-decoration: underline; }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand svg { height: 40px; width: auto; }
.footer-base { border-top: 1px solid #3E4248; padding-block: 18px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .88rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mobile call button (header) ---------- */
.mobile-call {
  display: none; margin-left: auto; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--ink); color: var(--on-char); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.mobile-call:hover { background: var(--char-2); }
@media (max-width: 1100px) { .mobile-call { display: inline-flex; } }
@media (max-width: 480px) {
  .brand svg { height: 30px; }
  .header-inner { gap: 10px; }
  .nav-toggle { padding: 8px 10px; }
}

/* ---------- Calculator teaser (home) ---------- */
.calc-teaser {
  margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  border: 1px solid var(--rule); border-left: 6px solid var(--ochre); border-radius: var(--radius);
  background: var(--surface); padding: 20px 24px;
}
.calc-teaser p { flex: 1 1 320px; min-width: 0; }

/* ---------- Calculator ---------- */
.calc-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .calc-layout { grid-template-columns: minmax(0, 1fr); } }
.calc-panel { display: grid; gap: 22px; }
.calc-note { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em; color: var(--ochre-text); }
.calc-input { display: flex; align-items: stretch; max-width: 260px; }
.calc-input input { font-family: var(--font-display); font-stretch: 106%; font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.calc-affix {
  display: grid; place-items: center; min-width: 44px; padding: 0 10px;
  background: var(--ground); border: 1px solid #9B978D; font-weight: 700; color: var(--ink-2);
}
.calc-input .calc-affix:first-child { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.calc-input .calc-affix:last-child { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.calc-input .calc-affix:first-child + input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calc-input input:has(+ .calc-affix) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.calc-hint { font-size: .9rem; color: var(--ink-2); max-width: 52ch; }

.calc-results {
  border-radius: var(--radius); padding: clamp(22px, 4vw, 32px); display: grid; gap: 18px; min-width: 0;
  position: sticky; top: 96px;
}
@media (max-width: 900px) { .calc-results { position: static; } }
.calc-figure { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid #3E4248; }
.calc-label { font-size: .95rem; color: var(--on-char-2); }
.calc-big {
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; line-height: 1.05;
  font-size: clamp(2rem, 4.4vw, 2.75rem); font-variant-numeric: tabular-nums; color: var(--on-char);
  overflow-wrap: anywhere;
}
.calc-big-accent { color: var(--ochre); }
.calc-math { font-family: var(--font-mono); font-size: .82rem; color: var(--on-char-2); line-height: 1.55; }
.calc-disclaimer { font-size: .88rem; color: var(--on-char-2); }
.calc-results .btn { justify-self: start; }

/* ---------- Small-screen and layout refinements ---------- */
.nowrap { white-space: nowrap; }

/* Hide the header phone number where the full menu would get crowded */
@media (min-width: 1101px) and (max-width: 1240px) { .header-phone { display: none; } }

/* Full-width buttons on phones: easier to tap */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn, .calc-results .btn, .calc-teaser .btn { width: 100%; }
  .calc-results .btn { justify-self: stretch; }
}

/* Lead Check form: a short intro, and the form comes first on phones */
.form-intro { display: grid; gap: 6px; margin-bottom: 24px; }
.form-intro h2 { font-size: 1.5rem; }
.form-intro p { color: var(--ink-2); }
@media (max-width: 900px) { .form-layout .form-panel { order: -1; } }

/* Calculator: running total pinned to the bottom of phone screens while editing */
.calc-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--char); color: var(--on-char); border-top: 3px solid var(--ochre);
  padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.calc-sticky span { color: var(--on-char-2); font-size: .95rem; }
.calc-sticky strong { display: block; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.4rem; color: var(--ochre); font-variant-numeric: tabular-nums; }
.calc-sticky a { color: var(--on-char); font-weight: 700; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 901px) { .calc-sticky { display: none !important; } }
@media (max-width: 900px) { .calc-panel { margin-bottom: 8px; } }

/* ---------- Home: animated text conversation ---------- */
.chat {
  margin: 0; width: 100%; max-width: 420px; justify-self: center; min-width: 0;
  background: var(--char-2); border: 1px solid #3E4248; border-radius: 18px;
  padding: 22px 20px; display: grid; gap: 12px; align-content: start;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.chat-event {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: .8125rem; color: var(--on-char-2);
}
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #E0705A; flex-shrink: 0; }
.chat-msg { max-width: 86%; padding: 12px 15px; border-radius: 16px; font-size: 1.02rem; line-height: 1.4; margin: 0; }
.chat-msg small { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: .75rem; opacity: .75; }
.chat-out { justify-self: end; background: var(--on-char); color: var(--ink); border-bottom-right-radius: 5px; }
.chat-in { justify-self: start; background: #454A50; color: var(--on-char); border-bottom-left-radius: 5px; }

/* Animation states (added by js/site.js; without the script the full conversation simply shows) */
.chat.is-animated .chat-event:not(.is-shown),
.chat.is-animated .chat-msg:not(.is-shown) { display: none; }
.chat.is-animated .is-shown { animation: chat-in .4s cubic-bezier(.2, .8, .3, 1.2) both; }
.chat.is-animated .chat-out.is-shown { animation-name: chat-in-right; }
.chat.is-animated .chat-in.is-shown { animation-name: chat-in-left; }
.chat > * { transition: opacity .4s ease; }
.chat.is-fading > * { opacity: 0; }
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes chat-in-right { from { opacity: 0; transform: translate(24px, 6px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes chat-in-left { from { opacity: 0; transform: translate(-24px, 6px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
.chat-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; border-radius: 16px; margin: 0; animation: chat-in .25s ease both; }
.chat-typing.chat-out { justify-self: end; background: var(--on-char); }
.chat-typing.chat-in { justify-self: start; background: #454A50; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: chat-dots 1s infinite ease-in-out; }
.chat-typing.chat-out span { color: var(--ink-2); }
.chat-typing.chat-in span { color: var(--on-char); }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dots { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: .9; } }
/* Reduced motion: messages still appear one by one, but fade in without sliding or bouncing */
@media (prefers-reduced-motion: reduce) {
  .chat.is-animated .is-shown, .chat.is-animated .chat-out.is-shown, .chat.is-animated .chat-in.is-shown,
  .chat-typing { animation: chat-fade .5s ease both; }
  .chat-typing span { animation: none; opacity: .6; }
}

/* ---------- Home: service tiles ---------- */
.home-services .section-head { margin-bottom: 24px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile {
  display: grid; gap: 8px; align-content: start; min-width: 0;
  padding: 22px; background: var(--surface); color: inherit; text-decoration: none;
  border: 1px solid var(--rule); border-top: 5px solid var(--ink); border-radius: var(--radius);
  transition: border-color .15s ease, transform .15s ease;
}
.tile:hover { border-top-color: var(--ochre); transform: translateY(-2px); }
.tile p { color: var(--ink-2); }
.tile-more { font-weight: 700; color: var(--ochre-text); margin-top: 2px; }
.also { margin-top: 20px; color: var(--ink-2); }
@media (max-width: 860px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }

.band-dark .text-link { color: var(--on-char); }
.band-dark .text-link:hover { color: var(--ochre); }
.cta-sub { font-size: 1rem; }

/* ---------- Services: single closing call to action ---------- */
.closing { border-top: 1px solid var(--rule); }
.closing-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; }
.closing-copy { display: grid; gap: 10px; flex: 1 1 420px; min-width: 0; }
@media (max-width: 560px) { .closing-inner .btn { width: 100%; } }

/* ---------- Slide-up Lead Check banner ----------
   Timing rules live in js/site.js (search for "Lead Check banner"). */
.cta-banner {
  position: fixed; z-index: 30; left: 0; right: 0;
  bottom: 0;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.cta-banner-inner {
  pointer-events: auto; position: relative;
  max-width: 880px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  background: var(--char); color: var(--on-char);
  border-top: 4px solid var(--ochre); border-radius: 8px;
  padding: 18px 56px 18px 22px;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .28);
}
.cta-banner.is-open .cta-banner-inner { animation: banner-up .45s cubic-bezier(.2, .8, .3, 1) both; }
.cta-banner.is-closing .cta-banner-inner { animation: banner-down .3s ease both; }
@keyframes banner-up { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes banner-down { from { transform: none; opacity: 1; } to { transform: translateY(120%); opacity: 0; } }
.cta-banner-copy { display: grid; gap: 4px; flex: 1 1 300px; min-width: 0; }
.cta-banner-title { font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 1.15rem; line-height: 1.25; }
.cta-banner-text { color: var(--on-char-2); font-size: .97rem; }
.cta-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cta-banner-later {
  background: none; border: 0; color: var(--on-char-2); font: 600 .95rem var(--font-body);
  min-height: 44px; padding: 0 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.cta-banner-later:hover { color: var(--on-char); }
.cta-banner-x {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  background: none; border: 0; border-radius: var(--radius); color: var(--on-char-2);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.cta-banner-x:hover { color: var(--on-char); background: var(--char-2); }
@media (max-width: 560px) {
  .cta-banner-inner { padding: 16px 48px 16px 18px; }
  .cta-banner-actions { width: 100%; }
  .cta-banner-actions .btn { flex: 1 1 100%; }
  .cta-banner-later { margin-inline: auto; }
}
/* Keep the calculator's running-total bar out of the banner's way */
body.has-cta-banner .calc-sticky { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cta-banner.is-open .cta-banner-inner { animation: chat-fade .3s ease both; }
  .cta-banner.is-closing .cta-banner-inner { animation: none; opacity: 0; }
}

/* ---------- Bolder look ---------- */
.hl { color: var(--ochre); }

/* Trust strip: the four plain facts, in a bold yellow band */
.trust-strip { background: var(--ochre); color: var(--ink); }
.trust-list {
  list-style: none; margin-block: 0; padding-block: 18px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px;
}
.trust-list li {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 1.02rem; line-height: 1.2;
}
.trust-list li::before { content: ""; flex: 0 0 12px; height: 12px; background: var(--ink); }
@media (max-width: 900px) { .trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .trust-list li { font-size: .95rem; } }

/* Before-and-after story */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .compare { grid-template-columns: minmax(0, 1fr); } }
.compare-card { border-radius: var(--radius); padding: clamp(20px, 3.5vw, 30px); display: grid; gap: 18px; align-content: start; min-width: 0; }
.compare-without { background: var(--ground); border: 2px dashed #A9A498; }
.compare-without h3 { color: var(--ink-2); }
.compare-with { background: var(--char); color: var(--on-char); border-top: 6px solid var(--ochre); box-shadow: 0 16px 34px rgba(31, 34, 38, .18); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.compare-with .timeline li { border-top-color: #3E4248; }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.t-time { font-family: var(--font-mono); font-size: .85rem; font-weight: 500; padding-top: 2px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.compare-with .t-time { color: var(--ochre); }
.compare-without .timeline span:last-child { color: var(--ink-2); }
.outcome {
  justify-self: start; font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 1.05rem;
  padding: 8px 14px; border-radius: var(--radius);
}
.outcome-lost { background: #EAD3CC; color: var(--error); }
.outcome-won { background: var(--ochre); color: var(--ink); }
.compare-note { margin-top: 16px; font-size: .9rem; color: var(--ink-2); }

/* Slow-scrolling slogan strip */
.ticker { background: var(--char); color: var(--on-char); overflow: hidden; border-block: 1px solid #3E4248; }
.ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { list-style: none; margin: 0; padding: 16px 0; display: flex; flex-shrink: 0; }
.ticker-list li {
  display: flex; align-items: center; gap: 18px; padding-right: 18px; white-space: nowrap;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 1.1rem; letter-spacing: .01em; text-transform: uppercase;
}
.ticker-list li::after { content: ""; width: 10px; height: 10px; background: var(--ochre); flex-shrink: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: auto; }
  .ticker-list { flex-wrap: wrap; row-gap: 8px; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
  .ticker-list[aria-hidden="true"] { display: none; }
}

/* "Best place to start" label */
.start-badge {
  display: inline-block; justify-self: start; vertical-align: middle;
  background: var(--ochre); color: var(--ink);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px;
}
.service-tag .start-badge { display: table; margin: 8px 0 0; }
.tile-start { border-top-color: var(--ochre); }
.limited { margin-top: 8px; font-size: .95rem; color: var(--ink-2); }

/* ---------- Slogan strip pause button ---------- */
.ticker { position: relative; }
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-toggle {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  right: max(8px, env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--char); color: var(--on-char); border: 1px solid #4A4F55; border-radius: var(--radius);
  box-shadow: -16px 0 16px var(--char); cursor: pointer;
}
.ticker-toggle:hover { border-color: var(--ochre); }
.ticker-toggle .i-play { display: none; }
.ticker.is-paused .ticker-toggle .i-pause { display: none; }
.ticker.is-paused .ticker-toggle .i-play { display: block; }
@media (prefers-reduced-motion: reduce) { .ticker-toggle { display: none; } }

/* Keep phone numbers on one line */
a[href^="tel:"] { white-space: nowrap; }
.calc-math-label { color: var(--on-char); }

/* =====================================================================
   COLOR SCHEME: white background with metallic blue type (overrides the tokens above)
   ===================================================================== */
:root {
  --ground: #FFFFFF;
  --surface: #F5F8FC;
  --ink: #14223B;
  --ink-2: #4A5568;
  --rule: #D9E0EA;
  --char: #F0F4FA;
  --char-2: #FFFFFF;
  --char-deep: #F0F4FA;
  --on-char: #14223B;
  --on-char-2: #4A5568;
  --ochre: #1F5BB5;
  --ochre-hover: #2D6CC8;
  --ochre-text: #1A4E9E;
  --focus: #1F5BB5;
  --blue-solid: #1C4E9C;
  /* brushed-metal blue: highlight, deep band, reflected light */
  --metal: linear-gradient(180deg, #5A8FD8 0%, #2C62B2 28%, #0F3A7A 50%, #1B4E9C 63%, #6A9CE0 86%, #2A5EAD 100%);
  --metal-bright: linear-gradient(180deg, #7EB0F0 0%, #3F7BD0 30%, #1A4E9C 52%, #2E66B8 66%, #8AB8F2 88%, #3C74C6 100%);
  --metal-fill: linear-gradient(180deg, #3F72BE 0%, #2558A8 45%, #133F82 55%, #2A62B4 100%);
  --metal-brushed: linear-gradient(100deg, #12387A 0%, #2D63B3 22%, #3F72BE 38%, #2A5EAD 52%, #143F84 72%, #3A70C2 90%, #1A4A94 100%);
}

/* Metallic headline text: the gradient repeats on every line */
h1, h2, .calc-big, .ticker-list li {
  background: var(--metal) 0 0 / 100% 1lh repeat-y;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hl, .calc-big-accent {
  background: var(--metal-bright) 0 0 / 100% 1lh repeat-y;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
h3 { color: var(--blue-solid); }

/* Logo in metallic blue (gradient defined in each page) */
.brand svg rect, .brand svg path,
.footer-brand svg rect, .footer-brand svg path { fill: url(#lr-metal); }
.brand svg rect:nth-of-type(7), .footer-brand svg rect:nth-of-type(7) { fill: #8DB6EE; }

/* Light bands */
.hero, .page-head { border-bottom: 1px solid var(--rule); }
.hero::before { opacity: 0; }
.site-header { background: rgba(255, 255, 255, .96); }
.site-footer { background: var(--char-deep); border-top: 1px solid var(--rule); }
.footer-base { border-top-color: var(--rule); }

/* Buttons */
.btn-primary { background: var(--metal-fill); color: #FFFFFF; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(20, 50, 100, .25); }
.btn-primary:hover { background: var(--metal-fill); filter: brightness(1.12); }
.btn-ghost, .band-dark .btn-ghost { color: var(--blue-solid); border-color: var(--blue-solid); }
.btn-ghost:hover, .band-dark .btn-ghost:hover { background: var(--blue-solid); color: #FFFFFF; border-color: var(--blue-solid); }
.mobile-call { background: var(--metal-fill); color: #FFFFFF; }
.nav-toggle { color: var(--blue-solid); border-color: var(--blue-solid); }

/* Text conversation */
.chat { background: #FFFFFF; border-color: var(--rule); box-shadow: 0 18px 40px rgba(20, 50, 100, .14); }
.chat-out, .chat-typing.chat-out { background: var(--metal-fill); color: #FFFFFF; }
.chat-in, .chat-typing.chat-in { background: #E8EEF6; color: var(--ink); }
.chat-typing.chat-out span { color: #FFFFFF; }
.chat-typing.chat-in span { color: var(--ink-2); }

/* Trust strip: brushed blue metal */
.trust-strip { background: var(--metal-brushed); color: #FFFFFF; }
.trust-list li { text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.trust-list li::before { background: #FFFFFF; }

/* Before-and-after story */
.compare-without { background: #F7F8FA; border-color: #B9C3D1; }
.compare-with { background: #FFFFFF; color: var(--ink); border: 1px solid var(--rule); border-top: 6px solid var(--blue-solid); box-shadow: 0 16px 34px rgba(20, 50, 100, .12); }
.compare-with .timeline li { border-top-color: var(--rule); }
.compare-with .t-time { color: var(--blue-solid); }
.outcome-won { background: var(--metal-fill); color: #FFFFFF; }

/* Slogan strip */
.ticker { border-color: var(--rule); }
.ticker-list li::after { background: var(--blue-solid); }
.ticker-toggle { border-color: var(--rule); color: var(--blue-solid); }

/* Labels, cards, steps */
.start-badge { background: var(--metal-fill); color: #FFFFFF; }
.tile, .service-card, .form-panel { border-top-color: var(--blue-solid); }
.tile:hover { border-top-color: #5A8FD8; }
.step::before { background: var(--metal-fill); color: #FFFFFF; }
.step::after { border-top-color: #9DB2CF; }
.jump-links a { border-color: var(--rule); color: var(--blue-solid); background: #FFFFFF; }
.jump-links a:hover { border-color: var(--blue-solid); }

/* Calculator */
.calc-results { border: 1px solid var(--rule); box-shadow: 0 16px 34px rgba(20, 50, 100, .10); }
.calc-figure { border-bottom-color: var(--rule); }
.calc-sticky { background: #FFFFFF; box-shadow: 0 -6px 20px rgba(20, 50, 100, .15); }
.calc-sticky strong { color: var(--blue-solid); }

/* Pop-up banner */
.cta-banner-inner { background: #FFFFFF; border: 1px solid var(--rule); border-top: 4px solid var(--blue-solid); box-shadow: 0 -6px 30px rgba(20, 50, 100, .22); }
.cta-banner-x:hover { background: var(--surface); }

/* Form messages */
.form-status.is-preview { background: #E8F0FB; border-color: var(--blue-solid); }

.skip-link { color: #FFFFFF; }

/* ---------- Phones and tablets: Call / Text bar pinned to the bottom ---------- */
.call-bar { display: none; }
@media (max-width: 1100px) {
  :root { --callbar-h: 68px; }
  .call-bar {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: #FFFFFF; border-top: 1px solid var(--rule); box-shadow: 0 -4px 16px rgba(20, 50, 100, .12);
  }
  .call-bar-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
    border-radius: var(--radius); font-weight: 700; font-size: 1.05rem; text-decoration: none;
  }
  .call-bar-call { background: var(--metal-fill); color: #FFFFFF; }
  .call-bar-text { background: #FFFFFF; color: var(--blue-solid); border: 2px solid var(--blue-solid); }
  body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px)); }
  body.has-cta-banner .call-bar { display: none; }
  .calc-sticky { bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
}
@media print { .call-bar { display: none; } }

/* ---------- Form hints ---------- */
.field-hint { font-size: .88rem; color: var(--ink-2); }

/* ---------- About: meet the owner ---------- */
.owner-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: center; }
.owner-photo {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--rule); box-shadow: 0 16px 34px rgba(20, 50, 100, .14);
}
.owner-copy { display: grid; gap: 14px; min-width: 0; }
.cert {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
  font-weight: 700; color: var(--blue-solid);
}
.cert-mark { width: 14px; height: 14px; background: var(--metal-fill); border-radius: 2px; flex-shrink: 0; }
@media (max-width: 760px) {
  .owner-grid { grid-template-columns: minmax(0, 1fr); }
  .owner-photo { max-width: 320px; }
}

/* ---------- Home: owner strip ---------- */
.owner-strip-inner { display: flex; align-items: center; gap: 20px; }
.owner-thumb { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #FFFFFF; box-shadow: 0 4px 14px rgba(20, 50, 100, .2); }
.owner-strip-copy { display: grid; gap: 4px; min-width: 0; color: var(--ink-2); }
.owner-name { font-family: var(--font-display); font-stretch: 106%; font-weight: 800; font-size: 1.1rem; color: var(--blue-solid); }
@media (max-width: 480px) { .owner-thumb { width: 72px; height: 72px; } .owner-strip-inner { align-items: flex-start; } }

/* Form fields keep their natural height when a neighbor has a hint */
.form-grid .field { align-content: start; align-self: start; }

.consent-fine { font-size: .85rem; color: var(--ink-2); }

/* ---------- Four service tiles on the homepage ---------- */
.tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1060px) { .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles-4 { grid-template-columns: minmax(0, 1fr); } }
.price-line { margin-top: 20px; color: var(--ink-2); }
.price-line strong { color: var(--blue-solid); }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.price-card {
  background: #FFFFFF; border: 1px solid var(--rule); border-top: 5px solid var(--blue-solid);
  border-radius: var(--radius); padding: 22px; display: grid; gap: 6px; align-content: start; min-width: 0;
}
.price-card-best { box-shadow: 0 14px 30px rgba(20, 50, 100, .14); border-top-color: #5A8FD8; }
.price-card .start-badge { margin-bottom: 4px; }
.price-count { font-weight: 700; color: var(--ink); }
.price-amount { display: flex; align-items: baseline; gap: 4px; }
.price-big {
  font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: 2.6rem; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: var(--metal) 0 0 / 100% 1lh repeat-y; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.price-per { color: var(--ink-2); font-weight: 600; }
.price-year { color: var(--ink-2); font-size: .95rem; }
.save { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 3px; background: #E3ECF8; color: var(--blue-solid); font-weight: 700; font-size: .8rem; }
.price-notes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 75ch; color: var(--ink-2); }
.price-notes strong { color: var(--ink); }
.price-year { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.price-year .save { margin-left: 0; }

/* ---------- HighLevel embeds ---------- */
.hl-slot iframe { width: 100%; border: 0; display: block; }
/* HighLevel chat widget: on phones and tablets the Call / Text bar already sits
   at the bottom of the screen, so the chat bubble is hidden there to avoid
   overlapping. To show it on phones too, delete the next three lines. */
@media (max-width: 1100px) {
  chat-widget { display: none !important; }
}