/* =====================================================================
   VARIANT: Anderson — "Warm Civic"
   ---------------------------------------------------------------------
   Direction: warm, reassuring, neighborly. Deep teal-green brand with a
   sand paper tone, generous rounding, soft elevation, and a humanist
   serif display with an airy, calm rhythm.

   Load AFTER tokens.css, BEFORE base.css.
   ===================================================================== */

:root {
  /* Brand: deep teal-green */
  --brand-050: #eaf3f0;
  --brand-100: #cfe4dd;
  --brand-300: #85b5a7;
  --brand-500: #2f6f5e;
  --brand-700: #1d4c40;
  --brand-900: #12302a;

  /* Urgent: warm amber-red for clear action cues */
  --urgent-100: #fbe6cf;
  --urgent-500: #b8531b;
  --urgent-600: #9c4314;
  --urgent-700: #77330f;

  /* Warm neutrals on a sand paper */
  --ink-900: #1b1a17;
  --ink-700: #3b3833;
  --ink-500: #67615a;
  --ink-300: #a6a099;
  --ink-150: #ded8d0;
  --ink-075: #f0ece6;
  --paper: #fdfbf7;
  --paper-alt: #f5f1ea;

  /* Type: humanist serif display, warm sans body */
  --font-display: "Source Serif 4", "Charter", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body: "Optima", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-body);
  --fw-display: 600;
  --tracking-display: -0.015em;
  --lh-body: 1.7;
  --measure: 66ch;

  /* Form: generous rounding, soft shadow */
  --radius-sm: 5px;
  --radius: 9px;
  --radius-lg: 16px;
  --btn-radius: var(--radius-pill);
  --btn-transform: none;
  --btn-tracking: 0.01em;
  --brand-mark-radius: 50%;
  --card-radius: 16px;
  --card-border: 1px solid var(--ink-150);
  --card-shadow: 0 2px 10px -6px rgba(27,26,23,0.22);

  /* Roomier rhythm */
  --section-y: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  --wrap: 1160px;

  /* Hero: warm diagonal wash */
  --hero-overlay: linear-gradient(160deg, rgba(18,48,42,0.58) 0%, rgba(18,48,42,0.86) 75%);
  --callpanel-bg: var(--brand-050);

  /* Very soft paper grain */
  --surface-texture:
    radial-gradient(circle at 18% 12%, rgba(47,111,94,0.045), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(184,83,27,0.035), transparent 46%);
}

/* Anderson hook: headings carry a small leading dot instead of a rule. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--c-action);
  vertical-align: middle;
}

/* Anderson hook: cards lift a little more and round their media slot. */
.card--link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(27,26,23,0.5); }
.ph { border-radius: 16px; }

/* Anderson hook: soft-filled step markers rather than bare numerals. */
.steps li { border-top-color: var(--brand-100); }
.steps li::before {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--brand-050);
  font-size: var(--t-h4);
}

/* Anderson hook: pull-quote treatment for lead paragraphs on service pages. */
.lead--quote {
  border-left: 3px solid var(--brand-300);
  padding-left: var(--s-4);
  font-style: italic;
}

/* Confirmed business details are content, never placeholders. Keep them legible in the warm civic palette across desktop and mobile. */
.business-name {
  color: var(--brand-900);
  font-family: var(--font-display);
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.25;
}
.rail__box .business-name { font-size: 1.1rem; }
.site-footer h3 .business-name {
  color: #ffffff;
  font-size: clamp(1.25rem, 1.05rem + .45vw, 1.55rem);
  font-weight: 700;
}
.site-footer__bar .business-name { color: #ffffff; font-size: 1rem; font-weight: 700; }
.site-header .brand--logo-only {
  background: #ffffff;
  border: 1px solid var(--brand-300);
  border-radius: var(--radius);
  padding: 3px;
}
@media (max-width: 619px) {
  .rail__box .business-name { font-size: 1.05rem; }
  .site-footer h3 .business-name { font-size: 1.25rem; }
}