/* ============================================================================
   MSM Home Remodeling landing page — MOCKUP

   RE-SKIN INSTRUCTIONS
   Everything visual is controlled by the :root block below. When the
   inspiration references land, the change is: edit these tokens, swap the two
   font stacks, reorder sections in index.html. No rewrite.

   Rule kept deliberately: no colour literal appears below the token block.
   ============================================================================ */

:root {
  /* --- colour --------------------------------------------------------- */
  /* Ocean blue and white. Every colour in the file is here -- this block IS
     the theme. Swapping it re-skins the whole page. */
  --ink:          #0a2230;   /* headings, primary text */
  --ink-soft:     #38505d;   /* body text */
  --ink-faint:    #4b6371;   /* captions, meta -- AA 4.5:1 on paper, surface AND surface-2 */
  --paper:        #ffffff;   /* page background */
  --surface:      #f0f6fa;   /* cards, alternating bands */
  --surface-2:    #d8e7f0;   /* empty photo slots */
  --line:         #c6dae6;   /* hairlines */

  --brand:        #0a2f47;   /* deep ocean -- dark sections, footer */
  --brand-ink:    #ffffff;
  --brand-ink-soft: #9fb8c7;   /* muted ON brand -- AA 6.72:1. NOT opacity: group
                                  opacity cannot be undone by a child, which made
                                  `.legal-line strong { opacity: 1 }` a silent no-op */
  --accent:       #0a6e9b;   /* ocean blue -- every call to action */
  --accent-hot:   #074f70;  /* accent, pressed */
  --accent-ink:   #ffffff;
  --accent-lift:  #7cc9ea;   /* accent, legible ON the dark brand colour */

  --warn-bg:      #fff4e0;   /* placeholder chips -- deliberately NOT on-theme */
  --warn-line:    #d99a3f;   /* a missing fact should clash, not blend in */
  --warn-ink:     #71430a;
  --mock-bg:      #08202e;   /* the mockup banner */
  --mock-ink:     #a5daf0;
  --line-on-dark:        rgb(255 255 255 / 15%);
  --line-on-dark-strong: rgb(255 255 255 / 35%);

  --score-hot:    #0a6e9b;   /* internal lead grades -- staff-facing only */
  --score-warm:   #356f85;
  --score-cool:   #4f6875;

  /* --- type -------------------------------------------------------------- */
  --font-display: "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.5vw, 3.4rem);
  --step-5:  clamp(2.5rem, 1.7rem + 4vw, 4.5rem);

  --tracking-tight: -0.02em;
  --tracking-caps:  0.09em;

  /* --- space / shape ----------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4.5rem;
  --s-9: 6.5rem;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --maxw:      1140px;
  --maxw-text: 62ch;

  --shadow-1: 0 1px 2px rgb(20 23 26 / 6%), 0 2px 8px rgb(20 23 26 / 5%);
  --shadow-2: 0 4px 12px rgb(20 23 26 / 8%), 0 12px 32px rgb(20 23 26 / 8%);

  --tap: 44px;   /* minimum touch target */
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* room for the sticky mobile call bar */
  /* Clears the sticky .callbar. The bar is --tap (44) + --s-2 (8) of padding plus
     its border and the safe-area inset; --tap + --s-5 reserved 3px less than it
     actually occupies, so the footer's last line sat under it. */
  padding-bottom: calc(var(--tap) + var(--s-6) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { text-wrap: pretty; }
a  { color: inherit; }

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

/* --- layout primitives --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--band { background: var(--surface); }
.section--dark { background: var(--brand); color: var(--brand-ink); }
.section--dark h2, .section--dark h3 { color: var(--brand-ink); }

/* A light-surfaced panel sitting inside a dark section must reset the inherited
   text colour, or its content is white-on-white. This bit the lead-score list
   and the "what the live version would do" list before it was caught. Reset at
   the container so anything added inside is covered by default. */
.section--dark .form-card,
.section--dark .anchor-note { color: var(--ink-soft); }
/* Ghost buttons INSIDE the white card must not take the dark-section treatment.
   Higher specificity (0,3,0) than `.section--dark .btn--ghost`, which is declared
   later and would otherwise win -- that is exactly how the Back button and the
   mockup reset button ended up white-on-white. */
.section--dark .form-card .btn--ghost {
  color: var(--ink); border-color: var(--line); background: var(--paper);
}
.section--dark .form-card .btn--ghost:hover { border-color: var(--ink); }
.section--dark .form-card h2, .section--dark .form-card h3,
.section--dark .anchor-note strong { color: var(--ink); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow { color: var(--accent-lift); }
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: var(--maxw-text); }
.section--dark .lede { color: var(--brand-ink); opacity: 0.82; }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* --- placeholder chips ---------------------------------------------------
   A fact we do not have renders like this. Loud on purpose: it must be
   impossible to mistake an unsupplied value for a real one. */
.ph {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px dashed var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.5em;
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
/* full opacity: at 0.65 this measured 3.31:1 and failed AA. 7.68:1 now. */
.ph::before { content: "needs: "; font-weight: 500; }

/* Inside a button there is no room for the prose form of a chip. Stay compact
   so the sticky mobile call bar remains a single thumb-sized target. */
.btn .ph { font-size: 0.78em; padding: 0.05em 0.4em; white-space: nowrap; }
.btn .ph::before { content: none; }

.ph-block {
  display: block;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 2px dashed var(--warn-line);
  border-radius: var(--radius);
  padding: var(--s-5);
  font-size: var(--step--1);
  font-weight: 600;
}
.ph-block strong { display: block; font-size: var(--step-0); margin-bottom: var(--s-2); }
.ph-block span { display: block; font-weight: 400; opacity: 0.85; margin-top: var(--s-2); }

/* --- the mockup banner --------------------------------------------------- */
.devbar {
  background: var(--mock-bg);
  color: var(--mock-ink);
  font-size: var(--step--1);
  line-height: 1.45;
  padding: var(--s-3) var(--s-5);
  text-align: center;
}
.devbar strong { color: var(--mock-ink); font-weight: 700; }
.devbar code {
  background: var(--line-on-dark);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.95em;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--call  { background: var(--accent); color: var(--accent-ink); }
.btn--call:hover { background: var(--accent-hot); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.section--dark .btn--ghost { color: var(--brand-ink); border-color: var(--line-on-dark-strong); }
.section--dark .btn--ghost:hover { border-color: var(--brand-ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- header -------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-4);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The source PNG is a square badge lockup (emblem + wordmark + tagline
   stacked), not a horizontal nav mark -- there is no smaller crop of it on
   disk. 56px keeps the tagline just barely legible; anything shorter loses it
   entirely. A cropped, header-shaped version would look better and is a
   reasonable follow-up if Saad wants one made. */
.brand--logo img { display: block; height: 56px; width: auto; }
.site-header__spacer { flex: 1 1 auto; }
.site-header__call { display: none; }
@media (min-width: 720px) { .site-header__call { display: inline-flex; } }

/* --- hero ---------------------------------------------------------------- */
.hero { padding-block: var(--s-8) var(--s-7); }
/* Single column -- no hero media column, Saad's call 2026-08-20. Capped so a
   short, punchy hero does not stretch full-width on a wide desktop viewport. */
.hero__inner { display: grid; gap: var(--s-6); max-width: 46rem; }
.hero h1 { margin-bottom: var(--s-4); }
.hero .lede { margin-bottom: var(--s-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.hero__cta .btn { flex: 1 1 14rem; }
.hero__note { font-size: var(--step--1); color: var(--ink-faint); }

/* --- trust strip --------------------------------------------------------- */
.trust {
  display: grid; gap: var(--s-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-5);
}
@media (min-width: 700px) { .trust { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
.trust__item { display: flex; flex-direction: column; gap: var(--s-1); }
.trust__k {
  font-size: var(--step--1); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-faint);
}
.trust__v { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--step-0); }

/* --- cards --------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.section--band .card { box-shadow: none; }
.card h3 { margin-bottom: var(--s-1); }
.card__anchor { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line);
                font-size: var(--step--1); color: var(--ink-faint); }

/* --- gallery ------------------------------------------------------------- */
.shot { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
        display: flex; flex-direction: column; background: var(--paper); }
.shot__pair { display: grid; grid-template-columns: 1fr 1fr; }
.shot__slot { aspect-ratio: 1 / 1; background: var(--surface-2); display: grid; place-items: center;
              font-size: var(--step--1); color: var(--ink-faint); text-align: center; padding: var(--s-3); }
/* Photos are shot on a phone and arrive portrait. The pair is squared off so a
   portrait and a landscape frame never make the row jump height. */
.shot__pair img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
                  background: var(--surface-2); }
/* A referenced photo that is not on disk. Must never be a broken-image icon on
   a page whose whole promise is that it shows nothing fake. */
.shot__slot--missing { background: var(--warn-bg); color: var(--warn-ink);
                       border: 2px dashed var(--warn-line); font-weight: 700; }
.shot__cap { padding: var(--s-3) var(--s-4); font-size: var(--step--1); color: var(--ink-faint);
             background: var(--paper); }
/* Each pair carries its own estimate CTA — the gallery is where intent peaks,
   and making them scroll back to a section CTA wastes it. */
.shot__cta { margin-top: auto; padding: var(--s-3) var(--s-4);
             border-top: 1px solid var(--line); background: var(--paper); }

/* An unshot pair must occupy the same box as a comparer. Left alone, each empty
   slot squares itself to half the figure width and the card comes out half the
   height of its neighbours, which reads as a broken card rather than a gap. */
.shot .shot__pair { aspect-ratio: 1 / 1; }
.shot .shot__slot { aspect-ratio: auto; height: 100%; }

/* One notice for the whole section rather than a badge burned across every
   photo. The load-bearing guard is check.py, which refuses to let the site go
   live while any AI stand-in is still referenced -- this line is for whoever is
   looking at the page, not the safety mechanism. */
/* --- before / after slider ------------------------------------------------
   Both frames stacked; the "after" is clipped to the handle position. The
   control is a real <input type="range"> laid over the image at zero opacity,
   so dragging, clicking anywhere on the frame, arrow keys and screen readers
   all work without writing any of that by hand. */
.ba { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2);
      touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
          display: block; user-select: none; -webkit-user-drag: none; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
              background: var(--paper); transform: translateX(-1px); pointer-events: none; }
.ba__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%;
                     transform: translate(-50%, -50%); width: 2rem; height: 2rem;
                     border-radius: 50%; background: var(--paper); color: var(--brand);
                     display: grid; place-items: center; font-size: var(--step-0);
                     font-weight: 700; border: 2px solid var(--brand); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
             opacity: 0; cursor: ew-resize; }
.ba:focus-within .ba__handle { background: var(--accent); }
.ba:focus-within { outline: 3px solid var(--accent); outline-offset: -3px; }
.ba__tag { position: absolute; bottom: var(--s-3); z-index: 1; pointer-events: none;
           background: var(--brand); color: var(--brand-ink); border-radius: var(--radius-sm);
           font-size: var(--step--1); font-weight: 700; padding: 0.15em 0.6em;
           letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ba__tag--after  { left: var(--s-3); }
.ba__tag--before { right: var(--s-3); }
@media (prefers-reduced-motion: no-preference) { .ba__after { transition: clip-path 60ms linear; } }

/* --- process ------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { list-style: none; counter-increment: step; padding-top: var(--s-4);
            border-top: 3px solid var(--accent); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: var(--tracking-caps);
  color: var(--accent); margin-bottom: var(--s-2);
}
.steps h3 { font-size: var(--step-0); margin-bottom: var(--s-2); }
.steps p { font-size: var(--step--1); }

/* --- owner --------------------------------------------------------------- */
.owner { display: grid; gap: var(--s-6); }
@media (min-width: 800px) { .owner { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.owner__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--surface-2);
                display: grid; place-items: center; padding: var(--s-5); text-align: center; }

/* --- reviews ------------------------------------------------------------- */
.quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
         padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.quote__stars { color: var(--accent); letter-spacing: 0.1em; }
.quote__who { font-size: var(--step--1); color: var(--ink-faint); margin-top: auto; }

/* --- service area -------------------------------------------------------- */
.areas { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.areas li { background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius-pill); padding: var(--s-2) var(--s-4);
            font-size: var(--step--1); }

/* --- the lead form ------------------------------------------------------- */
.lead { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .lead { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-7); } }

.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2); padding: var(--s-5); position: relative;
}
.form-progress { display: flex; gap: var(--s-1); margin-bottom: var(--s-5); }
.form-progress span { height: 4px; flex: 1; background: var(--surface-2); border-radius: var(--radius-pill); }
.form-progress span[data-on="1"] { background: var(--accent); }

.fstep { display: none; }
.fstep[data-active="1"] { display: block; }
.fstep__count { font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-caps);
                text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-2); }
.fstep h3 { font-size: var(--step-2); margin-bottom: var(--s-2); }
.fstep__help { font-size: var(--step--1); color: var(--ink-faint); margin-bottom: var(--s-5); }

.choices { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.choice {
  min-height: var(--tap); text-align: left;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: 600; color: var(--ink);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.choice:hover { border-color: var(--ink-faint); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--warn-bg); }

.field { margin-bottom: var(--s-4); }
.field label { display: block; font-weight: 600; color: var(--ink); font-size: var(--step--1);
               margin-bottom: var(--s-2); }
.field .req { color: var(--accent-hot); }
.field input, .field textarea {
  width: 100%; min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field__err { display: none; color: var(--accent-hot); font-size: var(--step--1); margin-top: var(--s-2); font-weight: 600; }
.field[data-err="1"] input { border-color: var(--accent-hot); }
.field[data-err="1"] .field__err { display: block; }

.consent { font-size: var(--step--1); color: var(--ink-faint); margin-bottom: var(--s-4); }
.fnav { display: flex; gap: var(--s-3); }
.fnav .btn { flex: 1 1 auto; }
.fnav .btn--ghost { flex: 0 0 auto; }

.anchor-note {
  background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: var(--s-4); font-size: var(--step--1);
  margin-top: var(--s-5);
}

/* the honest not-wired panel */
.mockout { display: none; }
.mockout[data-on="1"] { display: block; }
.mockout__head {
  background: var(--mock-bg); color: var(--mock-ink); border-radius: var(--radius);
  padding: var(--s-5); margin-bottom: var(--s-4);
}
.mockout__head strong { display: block; font-family: var(--font-display); font-size: var(--step-1);
                        margin-bottom: var(--s-2); }
.mockout dl { display: grid; gap: var(--s-2); font-size: var(--step--1); margin-bottom: var(--s-5); }
.mockout dt { font-weight: 700; color: var(--ink); }
.mockout dd { margin: 0 0 var(--s-3) 0; color: var(--ink-soft); }
.mockout ol { font-size: var(--step--1); padding-left: var(--s-5); display: grid; gap: var(--s-2); }

/* --- internal lead score (mockup panel only -- never customer-facing) --- */
.score { border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden;
         margin-bottom: var(--s-5); }
.score__band { padding: var(--s-4) var(--s-5); color: var(--accent-ink); }
.score__band[data-t="hot"]  { background: var(--score-hot); }
.score__band[data-t="warm"] { background: var(--score-warm); }
.score__band[data-t="cool"] { background: var(--score-cool); }
.score__t { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
            letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.score__n { font-size: var(--step--1); opacity: 0.9; }
.score__why { padding: var(--s-4) var(--s-5); font-size: var(--step--1); }
.score__why ul { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.score__why li[data-w="up"]::marker   { content: "+ "; }
.score__why li[data-w="down"]::marker { content: "- "; }
.score__why li[data-w="off"] { color: var(--ink-faint); }
.score__note { padding: 0 var(--s-5) var(--s-4); font-size: var(--step--1);
               color: var(--ink-faint); }

/* --- faq ----------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: var(--maxw-text); }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.faq summary { cursor: pointer; padding: var(--s-4); font-weight: 700; color: var(--ink);
               min-height: var(--tap); display: flex; align-items: center; }
.faq p { padding: 0 var(--s-4) var(--s-4); font-size: var(--step--1); }

/* --- footer -------------------------------------------------------------- */
.site-footer { background: var(--brand); color: var(--brand-ink); padding-block: var(--s-7) var(--s-6); }
.site-footer a { color: var(--brand-ink); }
.site-footer__grid { display: grid; gap: var(--s-6); margin-bottom: var(--s-6); }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer h3 { color: var(--brand-ink-soft); font-size: var(--step--1); text-transform: uppercase;
                  letter-spacing: var(--tracking-caps); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; display: grid; font-size: var(--step--1); }
/* footer links carry the same 44px tap floor as everything else -- this is a
   majority-mobile audience and a 16px-tall link is not tappable with a thumb */
.site-footer ul a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer ul li:not(:has(a)) { padding-block: var(--s-2); }
.legal-line {
  border-top: 1px solid var(--line-on-dark);
  padding-top: var(--s-5); font-size: var(--step--1);
  color: var(--brand-ink-soft);
}
.legal-line strong { color: var(--brand-ink); }

/* --- sticky mobile call bar ---------------------------------------------- */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.callbar .btn { flex: 1; white-space: nowrap; min-width: 0; }
@media (min-width: 720px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

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

@media print { .devbar, .callbar { display: none; } }

/* --- mid-page CTA band --------------------------------------------------- */
.midcta { background: var(--surface); border-block: 1px solid var(--line); }
.midcta__inner { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 860px) { .midcta__inner { grid-template-columns: 1.3fr 0.7fr; } }
.midcta h2 { font-size: var(--step-2); margin-bottom: var(--s-2); }
.midcta__btns { display: grid; gap: var(--s-3); }

/* service-card timeline, under the price anchor */
.card__time { color: var(--ink-faint); }

/* service-card CTA, where the price anchor used to sit */
.card__cta { font-family: var(--font-display); font-weight: 700; color: var(--accent);
             text-decoration: none; display: inline-flex; align-items: center;
             min-height: var(--tap); }
.card__cta::after { content: " \2192"; }
.card__cta:hover { color: var(--accent-hot); text-decoration: underline; }

/* "(optional)" on a field label */
.field label .opt { font-weight: 400; color: var(--ink-faint); }