/* ============================================================================
   Stain Erasers — design system  ·  SINGLE SOURCE OF TRUTH for styling
   (one canonical stylesheet, the way pricing_engine.py is the one source for
   money). Every page links ONLY this file. The look is the quote tool's
   layout/structure — white rounded cards, green section-number badges, pill tab
   bar, polished forms — rendered in the real brand (from the live Wix Studio
   theme, Phase 0 token reconciliation):
     Brand:  green #4CAB4F, ink #242424, cream #E7DCA5.  NO yellow.
     Type:   Fira Sans (display, Black 900 for headings) + Fira Sans Condensed
             (body, 400/700). Self-hosted woff2 in /assets/fonts — no external
             font requests. Tabular figures use the body face with
             font-variant-numeric:tabular-nums.

   ---- CLASS DICTIONARY (collisions resolved — ONE meaning per class) ---------
   Two stylesheets were merged (the dashboards' styles.css + the quote tool's
   inline <style>). Where a name meant two things, the canonical meaning is:

     .card     CONTENT CONTAINER — white, bordered, rounded, soft shadow, padded.
               `.card > h2` is the green uppercase section header; `.card h2 .n`
               is the numbered badge (the signature quote-tool look).
               `.card.lift` adds the marketing hover-elevation (home page).
               (Quote tool's .card = this. Old dashboards' marketing-only
               hover-card is now `.card.lift`.)
     .panel    CARD CONTAINER too — DEPRECATED alias of .card, retained while
               owner.html/dashboard.html still emit it. Do NOT use for new work;
               do NOT use for tab panes.   (Was "card" in styles.css, "tab pane"
               in the quote tool — the tab-pane meaning is RETIRED here.)
     .tabpane  TAB PANE — display:none until .active. The one pane class.
     tabs      Container for the tab bar (flex). Two button styles during the
               migration:
                 `nav.tabs button`  = CANONICAL pill tab (green active pill).
                 `.tab`             = TRANSITIONAL underline tab, still used by
                                      owner/dashboard until they migrate; removed
                                      at the end of Step 2.
     .btn-primary  GREEN pill (brand). The quote tool's charcoal/ink primary is
                   converted to green. `.btn-block` = full-width variant.
     .seg      Pill segmented toggle, GREEN active (brand). The quote tool's
               square ink-active filter is unified to this.
     .clay     The only non-green/charcoal accent: a danger/"lost" red, used for
               errors, delete affordances, and the "lost" status — never yellow.
   ---------------------------------------------------------------------------- */

/* Self-hosted brand fonts (SIL OFL — see /assets/fonts/OFL-Fira.txt).
   Lean set: Fira Sans 700/900 (display; 900 = heading Black), Fira Sans
   Condensed 400/700 (body; 500/600 requests resolve to the nearest face). */
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/fira-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/assets/fonts/fira-sans-latin-900-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/fira-sans-condensed-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/fira-sans-condensed-latin-700-normal.woff2") format("woff2");
}

:root {
  --green: #4CAB4F;
  --green-700: #3C873E;          /* darker shade of --green (links/hover) — derived, not a new accent */
  --green-50: #EDF7ED;           /* 10% tint of --green */
  --green-bright: #55C058;       /* progress/chart fills — lightened --green */
  --green-dim: var(--green-50);  /* alias: quote tool token -> brand green-50 */
  --charcoal: #242424;
  --ink: #242424;
  --cream: #E7DCA5;              /* logo band tan (Wix theme) — reserved for the shared shell */
  --ink-soft: #5d6460;           /* alias of --muted (quote tool token name) */
  --muted: #5d6460;
  --paper: #ffffff;
  --mist: #f6f8f6;
  --paper-2: #eef1ee;            /* subtle filled surface (inputs, tracks, chips) */
  --line: #e4e8e4;
  --line-strong: #d3dad3;        /* stronger hairline (input borders, dividers) */
  --clay: #c0392b;               /* danger / "lost" accent (NOT yellow) */
  --clay-dim: #f7e3e0;

  --maxw: 1140px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(36,36,36,.08);
  --shadow-lg: 0 24px 60px rgba(36,36,36,.14);

  --display: "Fira Sans", system-ui, sans-serif;
  --body: "Fira Sans Condensed", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--display); font-weight: 900; color: var(--charcoal); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .4em; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
a { color: var(--green-700); text-decoration: none; }

.eyebrow { font-family: var(--body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .78rem; color: var(--green-700); margin-bottom: .8rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
  font-family: var(--body); padding: .85rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; font-size: 1rem; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(76,171,79,.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(76,171,79,.36); }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-700); }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--charcoal); }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); display: inline-block; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--charcoal); font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--green-700); }
@media (max-width: 820px){ .nav-links { display: none; } }

/* hero */
.hero { position: relative; padding: clamp(64px,9vw,120px) 0; background:
  radial-gradient(1200px 500px at 78% -10%, var(--green-50), transparent 60%), var(--paper); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
@media (max-width: 900px){ .hero-grid { grid-template-columns: 1fr; } }
.hero p.lead { font-size: 1.2rem; color: var(--muted); max-width: 46ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-card { background: var(--charcoal); color: #fff; border-radius: 20px; padding: 32px; box-shadow: var(--shadow-lg); }
.hero-card h3 { color: #fff; }
.hero-card .stat { font-family: var(--display); font-size: 2.6rem; color: var(--green); line-height: 1; }
.badge { display:inline-block; background: var(--green-50); color: var(--green-700); font-weight:700;
  font-size:.8rem; padding:.35rem .75rem; border-radius:999px; margin-bottom:1rem; }

/* sections */
.section { padding: clamp(56px,8vw,96px) 0; }
.section.mist { background: var(--mist); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 820px){ .grid-3 { grid-template-columns: 1fr; } }
/* .card — the canonical content container (see CLASS DICTIONARY). */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow); margin-bottom: 18px; }
/* signature quote-tool section header: green uppercase title + numbered badge */
.card > h2 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em;
  color: var(--green-700); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.card > h2 .n { font-family: var(--body); font-weight: 700; font-size: .72rem; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 7px; }
/* marketing hover-elevation (opt-in) */
.card.lift { transition: transform .18s ease, box-shadow .18s ease; }
.card.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--green-50);
  display: grid; place-items: center; margin-bottom: 16px; color: var(--green-700); font-size: 1.4rem; }

.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; counter-reset: s; }
@media (max-width: 820px){ .steps { grid-template-columns: 1fr; } }
.step { padding: 24px; border-left: 3px solid var(--green); background:#fff; }
.step::before { counter-increment: s; content: counter(s); font-family: var(--display);
  font-size: 1.6rem; color: var(--green); font-weight:600; }

/* footer */
.site-footer { background: var(--charcoal); color: #cfd3d0; padding: 56px 0 28px; }
.site-footer a { color: #cfd3d0; }
.site-footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px){ .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand { font-family: var(--display); color:#fff; font-size:1.3rem; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 18px;
  font-size: .85rem; color: #9aa09c; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* forms / app */
.field { margin-bottom: 16px; }
.field label { display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; color: var(--charcoal); }
.field input, .field select, .field textarea { width:100%; padding:.7rem .85rem; border:1px solid var(--line-strong);
  border-radius:10px; font-family:var(--body); font-size:1rem; background:var(--mist); color:var(--ink); transition:.12s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-50); background:#fff; }
.auth-wrap { max-width: 420px; margin: 8vh auto; background:#fff; border:1px solid var(--line);
  border-radius: 18px; padding: 36px; box-shadow: var(--shadow); }
.note { font-size:.85rem; color: var(--muted); }
.reveal { opacity:0; transform: translateY(16px); animation: rise .7s ease forwards; }
@keyframes rise { to { opacity:1; transform:none; } }

/* ============================================================================
   Portal app shell (dashboards)
   ============================================================================ */
.app-top { position: sticky; top: 0; z-index: 50; background: var(--charcoal); color:#fff; }
.app-top .nav { max-width: var(--maxw); }
.app-top .brand { color:#fff; }
.app-top .brand .dot { background: var(--green); }
/* real Stain Erasers logo (decoded from quote-tool.html) on a white chip so the
   charcoal "Stain" wordmark stays legible against the dark topbar */
.brand-logo { display:block; height:26px; background:#fff; padding:6px 11px; border-radius:9px; }
/* light public/login header (home.html, auth.html) — show the logo at a confident
   brand-mark size with no white chip (the header is already light); the chip above
   is only for the charcoal .app-top dashboard bar. max-width is raised so height
   drives the size (object-fit:contain prevents distortion / clipping). */
.site-header .nav { padding: 18px 24px; }     /* extra vertical room for the taller mark */
.site-header .brand-logo { height:56px; width:auto; max-width:380px; object-fit:contain;
  background:none; padding:0; border-radius:0; }
.app-user { display:flex; align-items:center; gap:14px; font-size:.92rem; color:#e7eae8; }
.app-user .who { font-weight:700; }
.app-main { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 80px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h1 { font-size: clamp(1.8rem,3vw,2.4rem); margin:0; }
.page-head .sub { color:var(--muted); margin:.2rem 0 0; }

/* tabs */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; flex-wrap:wrap; }
.tab { appearance:none; background:none; border:none; font-family:var(--body); font-weight:700; font-size:.98rem;
  color:var(--muted); padding:12px 16px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--charcoal); }
.tab.active { color:var(--green-700); border-bottom-color:var(--green); }
.tabpane { display:none; } .tabpane.active { display:block; animation: rise .4s ease forwards; }

/* stat cards */
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:18px; margin-bottom:26px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.stat-card .label { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.stat-card .value { font-family:var(--display); font-size:2.1rem; color:var(--charcoal); line-height:1.1; margin-top:6px; }
.stat-card .value.green { color:var(--green-700); }

/* panels + tables */
.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:22px; }
.panel > h3 { margin-top:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.table { width:100%; border-collapse:collapse; font-size:.95rem; }
.table th { text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  border-bottom:1px solid var(--line); padding:10px 12px; }
.table td { padding:12px; border-bottom:1px solid var(--mist); vertical-align:middle; }
.table tr:hover td { background: var(--mist); }
.table .right { text-align:right; }
.empty { color:var(--muted); padding:18px 0; text-align:center; }

/* pill badges */
.badge-pill { display:inline-block; font-weight:700; font-size:.74rem; padding:.25rem .6rem; border-radius:999px; text-transform:capitalize; }
.badge-green { background:var(--green-50); color:var(--green-700); }
.badge-info  { background:#eef2f7; color:#33506e; }
.badge-warn  { background:#f7eeee; color:#8a3b33; }
.badge-muted { background:#eef0ee; color:var(--muted); }

/* small buttons */
.btn-sm { padding:.45rem .9rem; font-size:.85rem; }
.btn-line { background:#fff; border:1.5px solid var(--line); color:var(--charcoal); border-radius:999px; font-weight:700;
  padding:.45rem .9rem; font-size:.85rem; cursor:pointer; font-family:var(--body); }
.btn-line:hover { border-color:var(--green); color:var(--green-700); }
.btn-danger { color:#8a3b33; border-color:#e7d4d2; }
.btn-danger:hover { border-color:#c0392b; color:#c0392b; }
.row-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* disabled / coming-soon placeholder */
.placeholder { border:1.5px dashed var(--line); border-radius:var(--radius); padding:20px; color:var(--muted);
  background: repeating-linear-gradient(45deg, var(--mist), var(--mist) 10px, #fff 10px, #fff 20px); }
.placeholder .tag { display:inline-block; background:var(--charcoal); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.2rem .6rem; border-radius:999px; margin-bottom:8px; }

/* modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(36,36,36,.5); display:none; place-items:center; z-index:100; padding:20px; }
.modal-backdrop.open { display:grid; }
.modal { background:#fff; border-radius:18px; max-width:680px; width:100%; max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; }
.modal-body { padding:24px; }
.modal-x { border:none; background:none; font-size:1.4rem; cursor:pointer; color:var(--muted); line-height:1; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--charcoal);
  color:#fff; padding:.8rem 1.2rem; border-radius:999px; opacity:0; transition:.3s; z-index:200; font-weight:600; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* photo gallery */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.photo-grid img { width:100%; height:110px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.lines { width:100%; border-collapse:collapse; margin:10px 0; }
.lines td { padding:8px 0; border-bottom:1px solid var(--mist); }
.lines td.right { text-align:right; font-variant-numeric:tabular-nums; }

/* win/loss chart */
.chart-wrap { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:760px){ .chart-wrap { grid-template-columns:1fr; } .chart-wrap-3 { grid-template-columns:1fr !important; } }
.chart-wrap-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.donut-num { font-family:var(--display); font-size:1.6rem; fill:var(--charcoal); }
.bar-label { font-size:11px; fill:var(--muted); }

/* ---- Stage B: scheduling calendar (hand-rolled, no calendar lib) ---- */
.sched-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.sched-toolbar .spacer { flex:1; }
.sched-range { font-family:var(--display); font-size:1.15rem; color:var(--charcoal); }
.seg { display:inline-flex; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button { appearance:none; background:#fff; border:none; padding:.4rem .9rem; font-weight:700; font-size:.85rem;
  color:var(--muted); cursor:pointer; }
.seg button.active { background:var(--green); color:#fff; }
.sched-layout { display:grid; grid-template-columns:230px 1fr; gap:18px; align-items:start; }
@media (max-width:860px){ .sched-layout { grid-template-columns:1fr; } }

.rail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rail-list { display:flex; flex-direction:column; gap:8px; max-height:620px; overflow:auto; }
.rail-job { border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:10px; padding:8px 10px;
  background:#fff; cursor:grab; }
.rail-job:active { cursor:grabbing; }
.rail-job .rj-cust { font-weight:700; color:var(--charcoal); font-size:.9rem; }
.rail-job .rj-meta { font-size:.78rem; color:var(--muted); margin-top:2px; }

.cal-warn { background:#f7eeee; color:#8a3b33; border:1px solid #e8cfca; border-radius:10px; padding:10px 12px;
  font-size:.86rem; margin-bottom:12px; display:flex; gap:10px; align-items:flex-start; }
.cal-warn button { margin-left:auto; background:none; border:none; color:#8a3b33; font-weight:700; cursor:pointer; }

.cal { --hourpx:46px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.cal-head { display:grid; }
.cal-head .ch { padding:8px 6px; text-align:center; border-left:1px solid var(--line); }
.cal-head .ch:first-child { border-left:none; }
.cal-head .ch .dow { font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.cal-head .ch .dnum { font-family:var(--display); font-size:1.15rem; color:var(--charcoal); }
.cal-head .ch.today .dnum { color:var(--green-700); }
.cal-body { position:relative; display:grid; }
.cal-gutter { position:relative; }
.cal-gutter .hr { position:absolute; right:6px; font-size:.7rem; color:var(--muted); transform:translateY(-6px); }
.cal-col { position:relative; border-left:1px solid var(--line);
  background-image:repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--hourpx)); }
.cal-col.dropping { background-color:var(--green-50); }
.cal-col.today { background-color:rgba(76,171,79,.03); }

.cal-block { position:absolute; left:4px; right:4px; border-radius:8px; padding:4px 7px; overflow:hidden;
  background:var(--green-50); border:1px solid var(--green); border-left:4px solid var(--green); color:var(--charcoal);
  font-size:.78rem; cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.cal-block:active { cursor:grabbing; }
.cal-block.s-dispatched { background:#eef2f7; border-color:#33506e; border-left-color:#33506e; }
.cal-block.s-in_progress { background:#fff7e8; border-color:#b07d00; border-left-color:#b07d00; }
.cal-block.conflict { box-shadow:0 0 0 2px #d9534f; }
.cal-block .cb-time { font-weight:700; font-size:.72rem; }
.cal-block .cb-cust { font-weight:700; }
.cal-block .cb-asg { color:var(--muted); font-size:.72rem; }
.cal-resize { position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; }

/* ============================================================================
   UNIFIED APP COMPONENTS — the quote tool's layout/structure, in the brand.
   (Yellow -> green; Bricolage -> the display face for numbers/wordmark; IBM Plex
   -> the body face with tabular-nums for figures. Tab labels & buttons use the
   body face bold, not the display face.) These power the unified staff shell (Step 2); legacy dashboards
   are untouched because the colliding meanings are scoped per the CLASS DICTIONARY.
   ============================================================================ */

/* app canvas — opt-in via <body class="portal"> so legacy pages are unaffected */
body.portal { background: var(--mist);
  background-image: radial-gradient(circle at 1px 1px, rgba(36,36,36,.045) 1px, transparent 0);
  background-size: 22px 22px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }

/* app header (light, quote-tool style) — distinct from the charcoal .app-top */
.top { border-bottom: 2px solid var(--charcoal); margin: 0 0 22px; padding: 22px 0 16px; }
.top .brand { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.top .brand h1 { font-family:var(--display); font-weight:600; font-size:30px; letter-spacing:-.01em; margin:0; line-height:1; color:var(--charcoal); }
.top .brand .dot { color:var(--green); }                 /* was yellow */
.top .brand .tag { font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-strong); border-radius:100px; padding:4px 11px; }
.top .brand-logo { height:44px; width:auto; max-width:300px; object-fit:contain; display:block;
  background:none; padding:0; border-radius:0; }   /* no white chip on the light shell header */
/* top header bar row (brand left, user/sign-out right) on the light .top header */
.top .top-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.top .app-user { color:var(--muted); }            /* override the charcoal-bar light text for the light header */
.top .app-user .who { color:var(--charcoal); }

/* CANONICAL pill tab bar (green active). Distinct selector from legacy .tab. */
nav.tabs { display:flex; gap:4px; margin-top:18px; flex-wrap:wrap; border-bottom:none; }
nav.tabs button { font-family:var(--body); font-weight:700; font-size:14px; background:transparent; border:1px solid transparent;
  border-radius:100px; padding:8px 18px; cursor:pointer; color:var(--muted); transition:.15s; }
nav.tabs button:hover { color:var(--ink); background:var(--paper-2); }
nav.tabs button.active { background:var(--green); color:#fff; }   /* was yellow */

/* Task-grouped nav dropdowns (nav reorg). Triggers are spans (not buttons) so the
   existing `nav.tabs button` wiring ignores them. Menus reveal on hover AND
   focus-within, so keyboard-tabbing to a trigger (tabindex=0) opens the group. */
.nav-group { position:relative; }
.nav-trigger { display:inline-flex; align-items:center; gap:6px; font-family:var(--body);
  font-weight:700; font-size:14px; color:var(--muted); background:transparent;
  border:1px solid transparent; border-radius:100px; padding:8px 18px; cursor:pointer;
  user-select:none; transition:.15s; }
.nav-trigger::after { content:"\25BE"; font-size:.7em; opacity:.65; }   /* ▾ */
.nav-trigger:hover, .nav-group:focus-within > .nav-trigger { color:var(--ink); background:var(--paper-2); }
/* highlight the trigger whose group holds the active tab */
.nav-group:has(button.active) > .nav-trigger { background:var(--green); color:#fff; }
.nav-group:has(button.active) > .nav-trigger::after { opacity:.9; }
.nav-menu { position:absolute; top:100%; left:0; margin-top:6px; min-width:210px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:6px; display:none; flex-direction:column; gap:2px; z-index:60; }
.nav-group:hover > .nav-menu, .nav-group:focus-within > .nav-menu { display:flex; }
/* menu rows: reuse the pill button colors (hover/active inherited from nav.tabs button
   above) but full-width, left-aligned, squarer for a list. */
.nav-menu button { width:100%; text-align:left; border-radius:8px; padding:9px 14px; white-space:nowrap; }
@media (max-width:640px){
  .nav-menu { position:static; box-shadow:none; border:none; padding:2px 0 2px 10px; min-width:0; margin-top:2px; }
  .nav-group { width:100%; }
}

/* Role-aware Home landing (launchpad). Built on the existing card/kpi/brand tokens —
   no new visual language. Cards mirror the nav buckets; 2 stats each; page-item pills
   reuse the green-50 -> green hover. */
.lp-hero { margin:2px 0 22px; }
.lp-title { font-family:var(--display); font-weight:600; font-size:1.7rem; letter-spacing:-.01em; color:var(--charcoal); margin:0; }
.lp-sub { color:var(--muted); font-size:14px; margin:6px 0 0; }
.lp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.lp-card { display:flex; flex-direction:column; gap:16px; }
.lp-card > h2 { margin:0; }
.lp-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lp-stats .kpi { background:var(--mist); box-shadow:none; padding:12px 14px; }
.lp-stats .k-val { font-size:24px; }
.lp-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.lp-link { font-family:var(--body); font-weight:700; font-size:13px; background:var(--green-50); color:var(--green-700);
  border:1px solid transparent; border-radius:999px; padding:7px 14px; cursor:pointer; transition:.15s; }
.lp-link:hover { background:var(--green); color:#fff; }
@media (max-width:900px){ .lp-grid { grid-template-columns:1fr; } }

/* form scaffolding used by the quote builder */
.row { display:grid; gap:14px; margin-bottom:14px; }
.row.c2 { grid-template-columns:1fr 1fr; } .row.c3 { grid-template-columns:1fr 1fr 1fr; } .row.c4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:560px){ .row.c2,.row.c3{grid-template-columns:1fr} .row.c4{grid-template-columns:1fr 1fr} }
label.fld { display:block; }
label.fld .lbl { display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.card input[type=text], .card input[type=number], .card input[type=date], .card input[type=email], .card input[type=tel],
.card select, .card textarea { width:100%; font-family:var(--body); font-size:14px; color:var(--ink); background:var(--mist);
  border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px; transition:.12s; }
.card input:focus, .card select:focus, .card textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-50); background:#fff; }
.card textarea { resize:vertical; min-height:62px; }
.inline-prefix { position:relative; } .inline-prefix span { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; }
.card .inline-prefix input { padding-left:24px; }
.addr-line { display:flex; gap:8px; align-items:flex-end; } .addr-line .fld { flex:1; }
.chk-row { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; color:var(--ink); font-weight:500; }
.chk-row input { width:17px; height:17px; accent-color:var(--green); cursor:pointer; margin:0; }
.btn-block { width:100%; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }

/* estimate sidebar + line items */
.quote-grid { display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; }
@media(max-width:880px){ .quote-grid{grid-template-columns:1fr} }
.est { position:sticky; top:18px; }
.est .total { font-family:var(--body); font-weight:400; font-size:42px; letter-spacing:normal; line-height:1; margin:2px 0 4px; color:var(--ink); font-variant-numeric:tabular-nums; }
.est .sub { font-size:12px; color:var(--muted); margin-bottom:16px; }
/* estimate line list — scoped to .est so it never collides with the quote-view
   `<table class="lines">` used by the dashboards' quote view */
.est .lines { font-size:12.5px; margin:0 0 8px; font-variant-numeric:tabular-nums; }
.est .lines .li { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--line); gap:10px; }
.est .lines .li.muted { color:var(--muted); }
.est .lines .li .v { white-space:nowrap; }
.est .lines .li.neg .v { color:var(--clay); }
.est .lines .li.tot { border-bottom:none; font-weight:700; font-size:13.5px; padding-top:9px; }
.margin-bar { height:8px; border-radius:6px; background:var(--paper-2); overflow:hidden; margin:6px 0 4px; }
.margin-bar i { display:block; height:100%; background:var(--green-bright); }

/* service accordions (New Quote) */
.svc { border:1px solid var(--line); border-radius:11px; margin-bottom:10px; overflow:hidden; background:var(--mist); }
.svc-head { display:flex; align-items:center; gap:11px; padding:12px 14px; cursor:pointer; user-select:none; }
.svc-head:hover { background:var(--paper-2); }
.svc.on .svc-head { background:var(--green-50); }
.svc-check { width:20px; height:20px; border:2px solid var(--line-strong); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.12s; font-size:13px; color:#fff; }
.svc.on .svc-check { background:var(--green); border-color:var(--green); }
.svc-name { font-weight:600; flex:1; } .svc-name small { display:block; font-weight:400; font-size:11px; color:var(--muted); }
.svc-amt { font-weight:700; color:var(--green-700); font-variant-numeric:tabular-nums; }
.svc-body { display:none; padding:4px 14px 16px; border-top:1px dashed var(--line); } .svc.on .svc-body { display:block; }
.svc.commercial-only { display:none; } body.is-commercial .svc.commercial-only { display:block; }
.res-only { display:block; } body.is-commercial .res-only { display:none; }

/* repeating builder rows (buildings / crew / labor / add-ons / tax counties) */
.bld-head,.bld-row { display:grid; grid-template-columns:1fr .7fr .7fr .6fr 34px; gap:10px; align-items:center; }
.wkr-head,.wkr-row { display:grid; grid-template-columns:1fr 84px 84px 34px; gap:10px; align-items:center; }
.lab-head,.lab-row { display:grid; grid-template-columns:110px 1fr 1fr 120px 34px; gap:10px; align-items:center; }
.addon-head,.addon-row { display:grid; grid-template-columns:1fr 110px 120px 34px; gap:10px; align-items:center; }
.taxc-head,.taxc-row { display:grid; grid-template-columns:1fr 120px 34px; gap:10px; align-items:center; }
.bld-head,.wkr-head,.lab-head,.addon-head,.taxc-head { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:6px; padding:0 2px; }
.bld-row,.wkr-row,.lab-row,.addon-row,.taxc-row { margin-bottom:9px; }
.crew-wrap { margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
.w-who { font-size:13px; font-weight:600; line-height:1.2; } .w-who .w-meta { display:block; font-weight:400; font-size:11px; color:var(--muted); }
.w-cost { font-size:13px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
.combo { display:flex; gap:6px; } .combo input { flex:1; min-width:0; } .combo select { flex:0 0 52px; width:52px; }
.b-del,.w-del,.lab-del { background:var(--paper-2); border:1px solid var(--line-strong); border-radius:8px; cursor:pointer; font-size:18px;
  line-height:1; color:var(--clay); height:38px; width:34px; display:flex; align-items:center; justify-content:center; padding:0; }
.b-del:hover,.w-del:hover,.lab-del:hover { background:var(--clay-dim); }
@media(max-width:680px){ .bld-head,.lab-head,.addon-head,.taxc-head{display:none} }
@media(max-width:560px){ .wkr-head{display:none} }
.bld-row .b-drone-wrap.hide { visibility:hidden; }     /* drone-days input hidden unless a building is 4-story */
@media(max-width:680px){ .bld-row .b-drone-wrap.hide { display:none; } }

/* tooltip */
.tip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:5px; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--muted); font-size:9px; font-weight:700; cursor:help; vertical-align:middle; }
.tip:hover { border-color:var(--green); color:var(--green); }
.tip .tip-box { position:absolute; bottom:150%; left:50%; transform:translateX(-50%); width:190px; background:var(--charcoal); color:#fff;
  font-size:11px; font-weight:400; line-height:1.45; padding:8px 10px; border-radius:8px; opacity:0; visibility:hidden; transition:.12s; z-index:40;
  pointer-events:none; box-shadow:var(--shadow); }
.tip .tip-box::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--charcoal); }
.tip:hover .tip-box { opacity:1; visibility:visible; }

/* Quote Log cards + status pills (won=green, lost=clay, pending=muted — NO yellow) */
.qfilters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; } .qfilters .grow { flex:1; }
.qcard { background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 16px; margin-bottom:11px; box-shadow:var(--shadow); }
.qcard .qtop { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.qcard .who { font-weight:600; font-size:15px; } .qcard .meta { font-size:12px; color:var(--muted); margin-top:2px; }
.qcard .price { font-weight:700; font-size:18px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.chip { font-size:11px; font-weight:500; padding:3px 9px; border-radius:100px; background:var(--paper-2); color:var(--muted); border:1px solid var(--line); }
.status { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 10px; border-radius:100px; }
.status.pending { background:var(--paper-2); color:var(--muted); border:1px solid var(--line-strong); }
.status.won { background:var(--green-50); color:var(--green-700); border:1px solid var(--green-bright); }
.status.lost { background:var(--clay-dim); color:var(--clay); border:1px solid var(--clay); }
.qactions { display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; padding-top:12px; border-top:1px dashed var(--line); }
.empty .big { font-family:var(--display); font-size:18px; color:var(--ink); margin-bottom:6px; }

/* KPI tiles + bar charts (Win/Loss) */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media(max-width:760px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); }
.kpi .k-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
/* KPI numbers use the Pricing tab's number type style (var(--body), weight 400,
   ink, normal tracking) rather than the display face — applied to all .kpi
   tiles (Overview + Win/Loss KPI grid + market-rate cards). KPI display size kept.
   Only app.html consumes .kpi .k-val on this stylesheet (owner/dashboard use .stat-card;
   quote-tool.html has its own inline styles), so this global rule is safe. */
.kpi .k-val { font-family:var(--body); font-weight:400; font-size:30px; letter-spacing:normal; margin-top:6px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.kpi .k-sub { font-size:11.5px; color:var(--muted); margin-top:4px; }
.bars { margin-top:6px; }
.bar-row { display:grid; grid-template-columns:130px 1fr 76px; gap:12px; align-items:center; margin-bottom:9px; font-size:12.5px; }
@media(max-width:560px){ .bar-row{grid-template-columns:96px 1fr 64px} }
.bar-row .bl { color:var(--muted); }
.bar-track { height:22px; background:var(--paper-2); border-radius:6px; overflow:hidden; position:relative; }
.bar-fill { height:100%; background:var(--green-bright); border-radius:6px; transition:width .4s; }
.bar-row .bv { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

/* info hint + pricing grid + photo cells */
.hint { font-size:12px; color:var(--ink); background:var(--green-50); border:1px solid var(--green-bright); border-radius:10px; padding:11px 14px; margin-bottom:18px; line-height:1.5; }
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:680px){ .price-grid{grid-template-columns:1fr} }
.price-grid .fld { display:flex; flex-direction:column; } .price-grid .fld input,.price-grid .fld select { margin-top:auto; }
.photo-cell { position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper-2); }
.photo-cell img { width:100%; height:92px; object-fit:cover; display:block; }
.photo-cell .ph-bar { display:flex; gap:5px; padding:6px; align-items:center; }
.photo-cell .ph-tag { flex:1; min-width:0; font-size:11px; padding:3px 4px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.photo-cell .ph-del { flex:0 0 24px; width:24px; height:24px; border:none; background:var(--clay-dim); color:var(--clay); border-radius:6px; cursor:pointer; font-size:15px; line-height:1; }
.foot { font-size:11px; color:var(--muted); text-align:center; margin-top:28px; }

/* ============================================================================
   PUBLIC SHELL — global header (charcoal top bar + cream nav band with
   dropdowns) and the 4-column footer. Canonical markup lives in
   frontend/partials/header.html + footer.html and is copied into each public
   page by scripts/sync_shell.py between SHELL markers; drift fails
   backend/tests/test_shell_drift.py. Colors/fonts come from the :root tokens
   only (rgba() forms below use the token RGB values for alpha variants).
   ============================================================================ */
.shell-header { position: sticky; top: 0; z-index: 60; }
.shell-topbar { background: var(--charcoal); color: var(--paper); font-family: var(--body); }
.shell-topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 7px 24px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shell-tagline { font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.shell-topbar a.shell-phone { color: var(--paper); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.shell-topbar a.shell-phone:hover { color: var(--cream); }
.shell-topbar-right { display: flex; align-items: center; gap: 14px; }
/* subordinate staff entry — quieter than the phone, subtle pill */
.shell-topbar a.shell-staff-login { color: var(--paper); opacity: .72; font-weight: 600; font-size: .76rem;
  white-space: nowrap; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 2px 11px; }
.shell-topbar a.shell-staff-login:hover { opacity: 1; color: var(--cream); border-color: var(--cream); }
/* below 560px the tagline hides but the phone + Staff Login group must remain */
@media (max-width: 560px){ .shell-tagline { display: none; } .shell-topbar-in { justify-content: center; } }

.shell-navband { background: var(--cream); border-bottom: 1px solid rgba(36,36,36,.14); position: relative; }
.shell-nav { max-width: var(--maxw); margin: 0 auto; padding: 10px 24px; display: flex;
  align-items: center; justify-content: space-between; gap: 18px; }
.shell-brand img { display: block; height: 54px; width: auto; max-width: 300px; object-fit: contain; }

.shell-menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.shell-menu li { position: relative; }
.shell-link, .shell-drop-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body);
  font-weight: 700; font-size: .97rem; color: var(--charcoal); background: none; border: none;
  padding: 10px 14px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.shell-link:hover, .shell-drop-btn:hover, .shell-drop.open > .shell-drop-btn { background: var(--paper); color: var(--green-700); }
/* dropdown parent = real link + separate caret toggle button beside it */
.shell-drop { display: flex; align-items: center; }
.shell-drop > .shell-drop-btn { padding-right: 7px; }
.shell-drop-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: -3px; background: none; border: none; border-radius: 50%;
  color: var(--charcoal); font-size: .72rem; opacity: .75; cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease; }
.shell-drop-toggle:hover, .shell-drop.open > .shell-drop-toggle { background: var(--paper); color: var(--green-700); opacity: 1; }

.shell-sub { position: absolute; top: 100%; left: 0; margin: 4px 0 0; padding: 6px; min-width: 240px;
  list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); display: none; flex-direction: column; gap: 2px; z-index: 70; }
.shell-drop.open > .shell-sub { display: flex; }
.shell-sub a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--charcoal);
  font-weight: 600; font-size: .94rem; white-space: nowrap; }
.shell-sub a:hover, .shell-sub a:focus-visible { background: var(--green-50); color: var(--green-700); }
.shell-sub .shell-sub-child a { padding-left: 32px; font-size: .88rem; }  /* nested child (TPO under Commercial) */
.shell-cta { margin-left: 8px; }
.shell-cta .btn { padding: .6rem 1.25rem; font-size: .95rem; }

.shell-burger { display: none; background: none; border: 1.5px solid var(--charcoal); border-radius: 10px;
  color: var(--charcoal); padding: 7px 9px; cursor: pointer; line-height: 0; }
.shell-burger:hover { border-color: var(--green-700); color: var(--green-700); }

@media (max-width: 920px){
  .shell-burger { display: inline-flex; }
  .shell-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream);
    border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow); padding: 10px 18px 18px; }
  .shell-menu.open { display: block; }
  .shell-menu > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .shell-link { width: 100%; justify-content: space-between; border-radius: 10px; }
  /* accordion row: label-link fills the row, caret is a full-height touch target */
  .shell-drop { flex-wrap: wrap; }
  .shell-drop > .shell-drop-btn { flex: 1; border-radius: 10px; }
  .shell-drop-toggle { width: 42px; height: 42px; font-size: .95rem; }
  .shell-sub { position: static; width: 100%; min-width: 0; margin: 2px 0 6px; padding: 0 0 0 14px;
    background: transparent; border: none; box-shadow: none; }
  .shell-sub a { white-space: normal; }
  .shell-cta { margin: 10px 0 0; }
  .shell-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   HOME — live-faithful photo-led layout (re-skin Phase 1a). Section structure
   mirrors stainerasers.com home; imagery from /assets/img per MANIFEST.md.
   Tokens only.
   ============================================================================ */
.hm-hero { position: relative; }
.hm-hero-img { display: block; width: 100%; height: auto; min-height: 230px; object-fit: cover; object-position: 28% center; }
/* Hero carousel: slide 1 stays in normal flow — it alone sets the hero height, so the
   crossfade can never shift layout. Slide 2 is stacked on top and fades in/out on the
   live site's cadence (~3s hold + ~1s crossfade per slide). Auto-rotation runs ONLY
   when the visitor allows motion; otherwise slide 2 stays at opacity 0 (slide 1 static). */
.hm-hero-slide2 { position: absolute; inset: 0; height: 100%; object-position: 20% center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hm-hero-slide2 { animation: hm-hero-fade 8s linear infinite; }
}
@keyframes hm-hero-fade {
  0%, 37.5% { opacity: 0; }
  50%, 87.5% { opacity: 1; }
  100% { opacity: 0; }
}
.hm-hero-cta { position: absolute; top: 50%; right: 7%; transform: translateY(-50%); text-align: center; z-index: 1; }
.hm-hero-cta p { color: var(--paper); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.7rem); margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(36,36,36,.55); }
.hm-hero-cta .btn { font-size: clamp(.95rem, 1.6vw, 1.15rem); }

.hm-center { text-align: center; }
.hm-narrow { max-width: 30ch; margin-left: auto; margin-right: auto; }
.hm-tight { padding: clamp(36px, 5vw, 64px) 0; }
.hm-rave { padding-bottom: 0; }
.hm-rave-band { display: block; width: 100%; height: auto; margin-top: 10px; }
.hm-cream { background: var(--cream); }
.hm-photo { width: 100%; height: auto; border-radius: var(--radius); display: block; }

.hm-2col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hm-3col { display: grid; grid-template-columns: .55fr 1.2fr .9fr; gap: 36px; align-items: center; }
@media (max-width: 860px){ .hm-2col, .hm-3col { grid-template-columns: 1fr; gap: 24px; } }

/* stand-in Clean Guarantee seal (ASSET GAP: live 3d-Logo-WallMockup.png) */
.hm-badge { width: 175px; height: 175px; border-radius: 50%; background: var(--charcoal); color: var(--paper);
  border: 5px solid var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; margin: 0 auto; box-shadow: var(--shadow); }
.hm-badge strong { font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1.02; color: var(--cream); }
.hm-badge-top, .hm-badge-bot { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hm-badge-bot { color: var(--green); }

.hm-learn { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--green-700); }
.hm-learn:hover { color: var(--green); }

.hm-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 34px; text-align: center; }
@media (max-width: 760px){ .hm-trio { grid-template-columns: 1fr; } }
.hm-trio-item img { display: inline-block; }
.hm-trio-item h3 { margin: 12px 0 6px; font-size: 1.1rem; }
.hm-trio-item p { font-size: .96rem; color: var(--ink-soft); max-width: 34ch; margin: 0 auto; }

.hm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 48px; justify-content: center; margin-top: 30px; }
@media (max-width: 720px){ .hm-tiles { grid-template-columns: minmax(0, 340px); } }
.hm-tile { text-align: center; }
.hm-tile h3 { font-size: 1.05rem; margin-bottom: 12px; }
.hm-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; box-shadow: var(--shadow); }
.hm-learn-btn { display: inline-block; margin-top: 16px; background: var(--charcoal); color: var(--paper);
  font-weight: 700; font-size: .92rem; padding: .6rem 1.4rem; border-radius: 8px; transition: background .15s ease; }
.hm-learn-btn:hover { background: var(--green-700); color: var(--paper); }

/* Live: a distinct textured tan band. The texture image is an ASSET GAP — the
   left cell approximates it with token-derived color-mix shades of --cream
   (darkened toward --charcoal; no new hexes) + soft radial mottling, so the
   band reads separate from the .hm-cream section above and the footer below.
   Swap the background for the real texture asset when sourced. */
.hm-cta-strip { display: grid; grid-template-columns: 1fr 1.4fr; align-items: stretch;
  border-top: 1px solid var(--line-strong); }
@media (max-width: 720px){ .hm-cta-strip { grid-template-columns: 1fr; } }
.hm-cta-tag { display: flex; align-items: center; justify-content: center; padding: 26px 22px;
  border-right: 1px solid color-mix(in srgb, var(--cream) 55%, var(--charcoal));
  background:
    radial-gradient(120% 170% at 16% 25%, color-mix(in srgb, var(--cream) 88%, var(--charcoal)) 0%, transparent 55%),
    radial-gradient(150% 190% at 85% 80%, color-mix(in srgb, var(--cream) 66%, var(--charcoal)) 0%, transparent 58%),
    color-mix(in srgb, var(--cream) 76%, var(--charcoal)); }
.hm-cta-tag em { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--charcoal); text-shadow: 0 1px 0 color-mix(in srgb, var(--cream) 60%, var(--paper)); }
.hm-cta-tag em span { color: var(--green-700); }
.hm-cta-act { background: color-mix(in srgb, var(--cream) 55%, var(--paper));
  display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 22px; flex-wrap: wrap; }
.hm-cta-act p { margin: 0; text-align: center; line-height: 1.35; color: var(--charcoal); }
.hm-cta-act p strong { font-family: var(--display); font-size: 1.12rem; }
.hm-cta-act a[href^="tel"] { font-weight: 700; color: var(--charcoal); }
.hm-cta-act a[href^="tel"]:hover { color: var(--green-700); }
@media (max-width: 720px){ .hm-cta-tag { border-right: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 55%, var(--charcoal)); } }

/* ============================================================================
   ABOUT — live-faithful "Our Values" tiles (the live About page's entire visible
   body). Same centered-tile pattern as home's .hm-trio; tokens only.
   ============================================================================ */
.ab-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px) clamp(24px, 3.5vw, 48px);
  margin-top: clamp(28px, 4vw, 48px); text-align: center; }
@media (max-width: 880px){ .ab-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ab-values { grid-template-columns: 1fr; } }
.ab-value img { display: inline-block; width: 92px; height: 92px; }
.ab-value h3 { margin: 14px 0 8px; font-size: 1.08rem; }
.ab-value p { font-size: .96rem; color: var(--ink-soft); max-width: 38ch; margin: 0 auto; }

/* ============================================================================
   FAQ — live-faithful interactive widget: search + category tabs + one-at-a-time
   accordion. Every hiding rule is gated on .fq-js (added by the page script), so
   with JS off all 24 Q&As render as a plain two-category list. Tokens only.
   ============================================================================ */
.fq-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fq-search input { width: 100%; padding: 13px 18px; font: inherit; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 10px; }
.fq-search input:focus { outline: 2px solid var(--green); outline-offset: 1px; background: var(--paper); }
.fq-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin: 22px 0 6px; }
.fq-tab { background: none; border: none; font: inherit; font-weight: 700; color: var(--ink-soft);
  padding: 10px 2px 12px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease; }
.fq-tab:hover { color: var(--green-700); }
.fq-tab[aria-selected="true"] { color: var(--charcoal); border-bottom-color: var(--green); }
.fq-cat { font-size: 1.3rem; margin: 26px 0 4px; }
.fq-js .fq-cat { display: none; }                 /* tabs replace the headings when JS runs */
.fq-item { border-bottom: 1px solid var(--line); }
.fq-q { margin: 0; }
.fq-qbtn { display: block; width: 100%; text-align: left; background: none; border: none;
  font-family: var(--display); font-weight: 700; font-size: 1.06rem; color: var(--charcoal);
  padding: 16px 40px 16px 0; cursor: pointer; position: relative; line-height: 1.35; }
.fq-qbtn::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 400; color: var(--green-700); }
.fq-qbtn[aria-expanded="true"]::after { content: "\2212"; }   /* − */
.fq-qbtn:hover, .fq-qbtn:focus-visible { color: var(--green-700); }
.fq-a { padding: 0 0 18px; }
.fq-a p { margin: 0; color: var(--ink-soft); }
.fq-js .fq-item:not(.open) .fq-a { display: none; }
.fq-js .fq-item.fq-hidden { display: none; }
.fq-none { text-align: center; color: var(--ink-soft); padding: 34px 0 8px; }

/* ============================================================================
   FREE QUOTE — live-faithful charcoal title band + form additions (radio /
   checkbox groups and the City/State/Zipcode row). Inputs reuse the shared
   .field styles. Tokens only.
   ============================================================================ */
.qt-band { background: var(--charcoal); padding: clamp(40px, 6vw, 72px) 24px; text-align: center; }
.qt-band h1 { color: var(--paper); margin: 0; font-size: clamp(2rem, 4.5vw, 3rem); }
.qt-intro { text-align: center; max-width: 62ch; margin: 0 auto; padding: clamp(28px, 4vw, 44px) 24px; }
.qt-intro .lead { color: var(--muted); }
.qt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .qt-grid-3 { grid-template-columns: 1fr; } }
.qt-fieldset { border: none; padding: 0; margin: 0 0 16px; }
.qt-fieldset legend { font-weight: 700; font-size: .9rem; color: var(--charcoal); padding: 0; margin-bottom: 6px; }
.qt-choice { display: flex; align-items: center; gap: 9px; margin: 5px 0; font-size: .98rem; color: var(--ink); cursor: pointer; }
.qt-choice input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }

/* ============================================================================
   SERVICES hub — live-faithful: intro + 2×2 photo tile buttons + charcoal CTA
   band. Hero reuses home's .hm-hero pattern. Tokens only.
   ============================================================================ */
.sv-intro { text-align: center; max-width: 70ch; }
.sv-intro h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.sv-intro .lead { color: var(--muted); max-width: 60ch; margin: 0 auto; }
.sv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 22px; justify-content: center; }
@media (max-width: 720px){ .sv-tiles { grid-template-columns: minmax(0, 380px); } }
.sv-tile { position: relative; display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease; }
.sv-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sv-tile img { display: block; width: 100%; aspect-ratio: 700 / 645; object-fit: cover; }
/* overlay label for stand-in tiles whose image lacks the baked-in title
   (mimics the baked text on the real tile buttons) */
.sv-tile-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.1;
  color: var(--paper); text-shadow: 0 2px 14px rgba(36,36,36,.65); }
.sv-cta { background: var(--charcoal); display: flex; align-items: center; justify-content: center;
  gap: 30px; padding: 26px 24px; flex-wrap: wrap; }
.sv-cta p { margin: 0; text-align: center; line-height: 1.35; color: var(--paper); }
.sv-cta p strong { font-family: var(--display); font-size: 1.12rem; }
.sv-cta a[href^="tel"] { font-weight: 700; color: var(--paper); }
.sv-cta a[href^="tel"]:hover { color: var(--green-bright); }

/* ============================================================================
   ORGANIC STAIN REMOVAL — live-faithful: video + values band, lasting-results
   2-col, comparison table, before/after gallery. Tokens only.
   ============================================================================ */
.os-accent { color: var(--green-700); }
.os-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.os-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.os-values { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap; margin-top: 34px; text-align: center; }
.os-value img { display: block; margin: 0 auto 8px; }
.os-value p { margin: 0; font-weight: 700; font-size: .9rem; line-height: 1.3; }
.os-bullets { list-style: none; margin: 18px 0; padding: 0; }
.os-bullets li { position: relative; padding-left: 22px; margin: 8px 0; font-weight: 700; color: var(--green-700); }
.os-bullets li::before { content: "\2022"; position: absolute; left: 4px; }
.os-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 720px){ .os-lists { grid-template-columns: 1fr; } }
.os-list { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.os-list h3 { font-size: .95rem; margin: 0 0 8px; color: var(--green-700); }
.os-list ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.os-list li { padding-left: 18px; position: relative; margin: 4px 0; }
.os-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.os-once { text-align: center; color: var(--green-700); margin-bottom: 14px; }
.os-table { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: .95rem; }
.os-table thead th { text-align: center; font-family: var(--display); font-size: 1.05rem; color: var(--charcoal);
  padding: 10px 12px; border-bottom: 2px solid var(--line-strong); }
.os-table-sub { display: block; font-family: var(--body); font-weight: 400; font-size: .78rem; color: var(--ink-soft); }
.os-table tbody th { text-align: left; font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.os-table tbody td { text-align: center; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.os-table .os-yes { font-weight: 700; color: var(--green-700); }
.os-table-cat th { font-family: var(--display); font-weight: 900; font-size: 1.15rem; padding-top: 26px;
  border-bottom: 2px solid var(--line-strong); }
.os-table-note td { text-align: left !important; font-size: .88rem; color: var(--ink-soft); background: var(--mist); }
.os-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
@media (max-width: 720px){ .os-gallery { grid-template-columns: 1fr; } }
.os-gallery img { width: 100%; border-radius: 10px; box-shadow: var(--shadow); display: block; }

/* ============================================================================
   COMMERCIAL CLEANING — anchor button stack, photo/copy step rows, benefit
   rows, three-column surfaces lists. Tokens only.
   ============================================================================ */
.cm-anchors { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 34px; }
.cm-anchors .btn { min-width: min(360px, 100%); justify-content: center; }
.cm-steps { max-width: 760px; display: flex; flex-direction: column; gap: 26px; margin-top: 30px; }
.cm-step { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; }
@media (max-width: 640px){ .cm-step { grid-template-columns: 1fr; } }
.cm-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); }
.cm-step h3 { margin-bottom: 6px; }
.cm-step p { margin: 0; color: var(--ink-soft); }
.cm-benefits { max-width: 760px; display: flex; flex-direction: column; gap: 24px; margin-top: 30px; }
.cm-benefit { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.cm-benefit h3 { margin-bottom: 6px; }
.cm-benefit p { margin: 0; color: var(--ink-soft); }
.cm-list { list-style: none; margin: 14px 0 0; padding: 0; }
.cm-list > li { position: relative; padding-left: 20px; margin: 7px 0; font-size: .95rem; }
.cm-list > li::before { content: "\2022"; position: absolute; left: 4px; color: var(--green); font-weight: 700; }
.cm-list ul { list-style: none; margin: 4px 0 4px 14px; padding: 0; }
.cm-list ul li { position: relative; padding-left: 16px; margin: 4px 0; font-size: .9rem; color: var(--ink-soft); }
.cm-list ul li::before { content: "\25E6"; position: absolute; left: 0; color: var(--green-700); }
.cm-surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px; margin-top: 10px; }
@media (max-width: 720px){ .cm-surfaces { grid-template-columns: 1fr; } }
.cm-gallery { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px){ .cm-gallery { grid-template-columns: 1fr; } }
.cm-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }

/* footer additions on top of the existing .site-footer/.foot-grid/.foot-bottom.
   Live-reconciled layout: Locations · Quick Links · Policies columns + a
   vertical social rail at the right; single centered copyright line. */
.shell-footer strong { color: var(--paper); display: block; margin-bottom: 12px; }
.shell-foot-wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 32px; }
@media (max-width: 820px){ .shell-foot-wrap { grid-template-columns: 1fr 1fr; } }
.shell-foot-sub { display: block; font-weight: 700; color: var(--paper); font-size: .92rem; margin-bottom: 6px; }
.shell-foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shell-socials { display: flex; gap: 10px; }
.shell-socials-rail { flex-direction: column; justify-self: end; }
@media (max-width: 820px){ .shell-socials-rail { flex-direction: row; justify-self: start; } }
.shell-foot-bottom { justify-content: center; text-align: center; }
.shell-socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); transition: border-color .15s ease, color .15s ease; }
.shell-socials a:hover { border-color: var(--green); color: var(--paper); }
.shell-address { font-style: normal; line-height: 1.9; }

/* ============================================================================
   RESIDENTIAL CLEANING — labeled portrait before/after service tiles and the
   two-column homeowner-concerns grid. Tokens only.
   ============================================================================ */
.rz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: clamp(24px, 6vw, 90px);
  justify-content: center; margin-top: 30px; }
@media (max-width: 640px){ .rz-tiles { grid-template-columns: minmax(0, 300px); } }
.rz-tile { text-align: center; }
.rz-tile h3 { font-size: 1rem; margin: 0 0 12px; }
.rz-tile img { width: 100%; aspect-ratio: 474 / 600; object-fit: cover; border-radius: 10px;
  box-shadow: var(--shadow); display: block; }
.rz-tile .hm-learn-btn { margin-top: 16px; }
.rz-concerns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 56px;
  max-width: 880px; margin: 30px auto 0; }
@media (max-width: 720px){ .rz-concerns { grid-template-columns: 1fr; } }
.rz-concern h3 { font-size: 1rem; margin: 0 0 6px; }
.rz-concern p { margin: 0; padding-left: 16px; color: var(--ink-soft); }

/* ============================================================================
   TPO ROOFS — three-column centered problem blurbs. Tokens only.
   ============================================================================ */
.tp-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px;
  max-width: 1000px; margin: 26px auto 0; text-align: center; }
@media (max-width: 720px){ .tp-problems { grid-template-columns: 1fr; } }
.tp-problem h3 { font-size: 1.05rem; margin: 0 0 10px; }
.tp-problem p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ============================================================================
   CONTACT US — live-faithful: reach-us info column (hours, HQ, map, FAQ
   button) beside the contact form. Form internals reuse the free-quote
   classes (.card/.field/.form-grid-2). Tokens only.
   ============================================================================ */
.ct-cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px){ .ct-cols { grid-template-columns: 1fr; } }
.ct-info h2 { font-size: 1.05rem; margin: 26px 0 6px; }
.ct-info p, .ct-info address { margin: 0 0 4px; font-style: normal; color: var(--ink-soft); }
.ct-info address a { font-weight: 600; }
.ct-map { margin-top: 24px; }
.ct-map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow); }
.ct-faq-btn { margin-top: 22px; }

/* ============================================================================
   FRANCHISE — hero token band (live's banner photo is an ASSET GAP), CSS step
   numerals (live's Step-N.png graphics likewise), closing band + form wrap.
   Section internals reuse hm-2col/os-bullets/cm-anchors/sv-cta/tp-problems
   and the shared form classes. Tokens only.
   ============================================================================ */
.fr-hero { background: linear-gradient(115deg, var(--charcoal) 0%, var(--green-700) 78%, var(--green) 100%);
  padding: clamp(44px, 7vw, 88px) 24px; }
.fr-hero-in { max-width: 720px; }
.fr-hero h1 { color: var(--paper); font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 14px; }
.fr-hero p { color: var(--paper); margin: 0 0 10px; font-size: clamp(.98rem, 1.6vw, 1.1rem); }
.fr-sub { color: var(--green-700); }
.fr-questions { font-size: 1.25rem; line-height: 1.35; text-align: center; margin: 0; }
.fr-photo-stack { display: flex; flex-direction: column; gap: 16px; }
.tp-problem .fr-step-num { display: block; font-family: var(--display); font-weight: 900;
  font-size: 3.2rem; line-height: 1; color: var(--green); margin-bottom: 10px; }
.fr-close { background: var(--charcoal); padding: clamp(36px, 5vw, 64px) 0; }
.fr-close .sv-intro h2 { color: var(--paper); }
.fr-close-sub { color: var(--green-bright); font-weight: 700; margin-top: 8px; }
.fr-form-wrap { max-width: 640px; margin: 30px auto 0; }
.fr-form-title { margin: 0 0 6px; }
.fr-form-section { font-weight: 700; color: var(--green-700); margin: 22px 0 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; }