/* BJ's Septic Tank Cleaning — Theme B (Classic Trade)
   Levers: oxblood accent + double-rule divider + warm-white header bar
   (per design-system §6 — the flip of sibling br-barnum-plumbing, which
   uses brick-red + bolt divider + solid navy header). See README.md for
   the full sibling-proof rationale. */
:root{
  --font-display:"Archivo",system-ui,sans-serif;
  --display-transform:none; --display-weight:800; --display-tracking:-.005em; --display-lh:1.05;
  --paper:#f6f4ef; --surface:#ffffff; --surface-2:#eae6dd;
  --ink:#1a2230; --ink-soft:#3b4658; --ink-faint:#6a7385;
  --line:#d8d2c6; --line-strong:#b7ad9c;
  --brand:#16263f; --on-brand:#f6f4ef;            /* trade navy */
  --accent:#8f2f28; --on-accent:#ffffff;          /* oxblood — a touch more serious than plumbing's brick-red */
  --accent-2:#16263f;
  --radius:3px; --radius-lg:5px; --border-w:2px; --rule-w:1px;
  --shadow:none; --lift:0px;
  --divider-color:#b7ad9c; --divider-accent:var(--accent);
  --slot-bg:#f1ede4; --slot-line:#b7ad9c; --slot-tag-bg:#16263f;

  /* photo hero — Theme B navy tint (per design-system Amendment table) */
  --hero-tint-a:#0c1826;   /* content side — navy near-black */
  --hero-tint-b:#16263f;   /* photo side  — trade navy       */
  --hero-bar:3px;
}

/* lever: warm-white header bar with navy wordmark (no background override —
   header stays on --paper). This is the deliberate flip of Barnum's solid
   navy bar. A thin navy underbar (via the double-rule divider placed right
   under the header) keeps the header from feeling unfinished next to it. */
.wordmark__name{color:var(--ink);}
.wordmark__sub{color:var(--ink-faint);}

/* centerpiece: call-first layout */
.call-panel{
  background:var(--brand);color:var(--on-brand);
  border-radius:var(--radius-lg);
  padding:clamp(18px,4vw,26px);
  text-align:center;
}
.call-panel__label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:color-mix(in srgb,var(--on-brand) 72%,transparent);
  margin:0 0 .7em;
}
.call-panel .btn{font-size:1.25rem;padding:1em 1.2em}
.call-panel__note{
  margin:.9em 0 0;font-family:var(--font-mono);font-size:.72rem;
  color:color-mix(in srgb,var(--on-brand) 78%,transparent);
}
.area-note{
  margin-top:18px;padding-top:16px;border-top:var(--rule-w) solid var(--line);
  color:var(--ink-soft);
}
.area-note h3{font-size:1.05rem;margin-bottom:.4em}

/* commercially-risky placeholder (emergency / after-hours) — same silhouette
   as a review slot: dashed keyline + hatch + corner tab + mono label, so it
   can never be mistaken for a live claim. */
.aside-slot{position:relative;margin-top:16px;
  background:var(--slot-bg);background-image:var(--hatch);
  border:2px dashed var(--slot-line);border-radius:var(--radius);
  padding:18px 14px 14px}
.aside-slot__tab{position:absolute;top:-1px;left:14px;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:var(--slot-tag-bg);color:var(--slot-tag-ink);
  padding:.35em .6em;border-radius:2px}
.aside-slot__body{margin:0;font-family:var(--font-mono);font-size:.82rem;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;color:var(--slot-ink)}

/* address VERIFY slot (matches Barnum's addr-slot pattern) */
.addr-slot{
  display:block;
  background:var(--slot-bg);background-image:var(--hatch);
  border:2px dashed var(--slot-line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;
}
.addr-slot__note{
  display:block;font-family:var(--font-mono);font-size:.78rem;
  color:var(--slot-ink);margin-top:.5em;
}

@media(min-width:600px){
  .call-panel{text-align:left}
}