/* NYC Street Lights — light-theme design system
   Inspired by Noomo + MA Money. Accent: keep our teal #00b4d8.
   Typography: Inter (UI) + Fraunces (editorial display). */

:root{
  --bg:#fafaf7;
  --bg-alt:#f1efe9;
  --surface:#ffffff;
  --ink:#0a1f3d;
  --ink-soft:#3a4a63;
  --ink-mute:#6b7a8f;
  --line:#e6e3da;
  --line-soft:#efece5;

  --teal:#00b4d8;
  --teal-deep:#0077b6;
  --teal-soft:#e6f7fb;

  --amber:#ffb703;
  --amber-soft:#fff5d9;
  --red:#e63946;
  --red-soft:#fde6e8;
  --green:#2ec4b6;
  --green-soft:#e3f7f4;

  --shadow-sm:0 1px 2px rgba(10,31,61,.04), 0 4px 12px rgba(10,31,61,.04);
  --shadow:0 1px 2px rgba(10,31,61,.04), 0 8px 24px rgba(10,31,61,.06);
  --shadow-lg:0 12px 32px rgba(10,31,61,.10);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:32px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:18px;line-height:1.55}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.kicker{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);font-weight:600;margin-bottom:16px}
h2{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.02em;margin:0 0 24px;max-width:18ch}
h2 em{font-style:italic;color:var(--teal-deep)}
h3{font-family:Inter,sans-serif;font-size:18px;font-weight:700;margin:0 0 12px;letter-spacing:-.01em}
.lede{font-size:21px;color:var(--ink-soft);max-width:60ch;margin:0 0 40px}

/* NAV */
nav.topnav{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
nav.topnav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-weight:800;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
nav.topnav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--ink-soft)}
nav.topnav a{color:inherit;text-decoration:none;transition:color .15s}
nav.topnav a:hover{color:var(--ink)}

/* PILLS / CTA */
.pill{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:none;cursor:pointer;transition:transform .15s, background .15s, color .15s, box-shadow .15s;font-family:inherit}
.pill.primary{background:var(--ink);color:#fff}
.pill.primary:hover{background:var(--teal-deep);transform:translateY(-1px);box-shadow:var(--shadow)}
.pill.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pill.ghost:hover{border-color:var(--ink)}
.pill.teal{background:var(--teal);color:var(--ink)}
.pill.teal:hover{background:#fff;box-shadow:var(--shadow)}
.pill.approve{background:var(--green);color:#fff}
.pill.approve:hover{background:#26a89c}
.pill.reject{background:transparent;color:var(--red);border:1px solid var(--red)}
.pill.reject:hover{background:var(--red-soft)}
.pill .arrow{transition:transform .15s}
.pill:hover .arrow{transform:translateX(3px)}

/* HERO */
header.hero{padding:120px 0 80px;position:relative;overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);font-weight:600;background:var(--teal-soft);padding:8px 14px;border-radius:999px}
h1.display{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(48px,7vw,96px);line-height:1.02;letter-spacing:-.02em;margin:24px 0 24px;max-width:14ch}
h1.display em{font-style:italic;color:var(--teal-deep)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:96px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-stat{padding:32px 0;border-right:1px solid var(--line)}
.hero-stat:last-child{border-right:none}
.hero-stat .num{font-family:Fraunces,Georgia,serif;font-size:54px;font-weight:600;letter-spacing:-.02em;line-height:1}
.hero-stat .num.bad{color:var(--red)}
.hero-stat .lbl{margin-top:8px;color:var(--ink-mute);font-size:14px}

/* SECTION */
section{padding:120px 0}
section.alt{background:var(--bg-alt)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}
.two-col p{color:var(--ink-soft);max-width:58ch;font-size:19px}

/* GRAPHIC GRID (About) */
/* Use a 2-column grid on common widths so each graphic gets ~50% of page width.
   The 3rd graphic spans both columns. SVGs render at natural aspect — no forced height. */
.graphics{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:80px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gcard:nth-child(3){grid-column:1 / -1}  /* third graphic spans both columns */
.gcard .tag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.gcard h3{margin:10px 0 16px;font-size:24px;line-height:1.2;letter-spacing:-.01em}
.gthumb{border-radius:var(--radius-sm);background:#ffffff;overflow:hidden;padding:8px;min-height:280px;display:flex;align-items:center;justify-content:center}
.gthumb img{display:block;width:100%;height:auto}
.gthumb svg{display:block;width:100%;height:auto;max-width:100%}
@media (max-width:768px){
  .graphics{grid-template-columns:1fr}
  .gcard:nth-child(3){grid-column:auto}
}

/* INTAKE */
.intake{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:80px;position:relative;overflow:hidden}
.intake .kicker{color:var(--teal)}
.intake h2{color:#fff}
.intake .lede{color:rgba(255,255,255,.7)}
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}

/* "Use my location" button — sits next to the address label */
.use-location-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,180,216,.15);
  border:1px solid rgba(0,180,216,.4);
  color:var(--teal);
  font:600 11px/1 Inter,system-ui,sans-serif;
  letter-spacing:.04em;text-transform:none;
  padding:7px 12px;border-radius:999px;
  cursor:pointer;transition:all .15s;
}
.use-location-btn:hover{background:rgba(0,180,216,.25);border-color:var(--teal);color:#fff}
.use-location-btn:disabled{opacity:.6;cursor:wait}
.use-location-btn .loc-icon{font-size:14px;line-height:1}
.use-location-btn.locating .loc-icon{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Inline status hint under the address input */
.field-hint{font-size:12px;color:rgba(255,255,255,.55);margin-top:6px;font-weight:500;text-transform:none;letter-spacing:0;min-height:16px}
.field-hint.ok{color:var(--green)}
.field-hint.err{color:#ff8a93}
.field input,.field select,.field textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:16px 18px;color:#fff;font:inherit;outline:none;transition:border .15s, background .15s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);background:rgba(255,255,255,.10)}
/* Native option menu can't use dark-on-dark; force readable dark-on-white */
.field select option{background:#ffffff;color:var(--ink)}
.field select option:checked{background:var(--teal-soft);color:var(--ink)}
.field.full{grid-column:1/-1}
.submit-row{margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.submit-row .meta{color:rgba(255,255,255,.5);font-size:14px}

/* RESULT TABS */
.result-header{padding:80px 0 24px}
/* Left-side rail — replaces the top nav.
   Full viewport height, fixed to the left edge of the page.
   The body gets left-padding so main content stops at the rail. */
:root{ --rail-width: 260px; }
body{ padding-left: var(--rail-width); }
nav.topnav{ display:none; }   /* legacy top nav, hidden if any HTML still includes it */

.side-rail{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--rail-width);
  z-index:40;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  padding:28px 22px 24px;
  box-shadow:8px 0 24px rgba(10,31,61,.04);
}
.side-rail-brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
}
.side-rail-brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 4px var(--teal-soft);
  flex-shrink:0;
}
.side-rail-brand .brand-name{
  font-weight:800; font-size:15px;
  letter-spacing:-.01em; color:var(--ink);
  line-height:1.2;
}

.side-rail-toc{ flex:1; overflow-y:auto; }
.side-toc-label{
  font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute);
  font-weight:700; margin-bottom:10px;
  padding-left:10px;
}
.side-rail-toc ul{
  list-style:none; margin:0 0 4px; padding:0;
  display:flex; flex-direction:column; gap:2px;
}
.side-rail-toc a{
  display:block; padding:8px 12px;
  font-size:14px; color:var(--ink-soft);
  text-decoration:none;
  border-left:2px solid transparent;
  border-radius:0 6px 6px 0;
  transition:all .15s; font-weight:500;
}
.side-rail-toc a:hover{ color:var(--ink); background:var(--bg-alt); }
.side-rail-toc a.active{
  color:var(--teal-deep); font-weight:700;
  border-left-color:var(--teal);
  background:var(--teal-soft);
}

.side-rail-cta{
  padding-top:20px;
  border-top:1px solid var(--line);
}
.side-rail-cta .pill{ width:100%; justify-content:center; }

/* Below this width the rail collapses and the page reclaims full width */
@media (max-width:1100px){
  body{ padding-left:0; }
  .side-rail{ display:none; }
  .hourglass-bg{ left:0; }   /* hourglass spans full viewport when rail is hidden */
}

/* Result header stat strip — estimated time to fix, borough closure, current step */
.result-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 32px;padding:20px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.result-stat-block{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);padding-right:16px}
.result-stat-block:last-child{border-right:none}
.result-stat-lbl{font-size:11px;color:var(--ink-mute);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.result-stat-val{font-family:Fraunces,Georgia,serif;font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
@media (max-width:768px){
  .result-stat{grid-template-columns:1fr;gap:8px;padding:16px}
  .result-stat-block{border-right:none;border-bottom:1px solid var(--line);padding:12px 0;padding-right:0}
  .result-stat-block:last-child{border-bottom:none}
}

/* Tab strip + Next-step CTA on the same row */
.tabs-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:48px;position:sticky;top:72px;background:var(--bg);z-index:10;border-bottom:1px solid var(--line)}
.tabs-row .tabs{margin-bottom:0;border-bottom:none;position:static;background:transparent;flex:1;min-width:0;overflow-x:auto}
.next-step{flex-shrink:0;margin:8px 0}
.next-step:disabled{opacity:.5;cursor:not-allowed;background:var(--ink-mute)}
.next-step:disabled:hover{transform:none;background:var(--ink-mute)}
@media (max-width:768px){
  .tabs-row{flex-wrap:wrap;align-items:stretch}
  .next-step{width:100%;justify-content:center;margin:8px 0 12px}
}

.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:48px;position:sticky;top:72px;background:var(--bg);z-index:10}
.tab{padding:20px 28px;font-weight:600;color:var(--ink-mute);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-size:15px;letter-spacing:.02em;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tab.active{color:var(--ink);border-bottom-color:var(--teal)}
.tab:hover{color:var(--ink)}
.tab .num{display:inline-block;background:var(--bg-alt);padding:2px 8px;border-radius:6px;font-size:12px;margin-right:8px;color:var(--ink-soft)}
.tab.active .num{background:var(--teal-soft);color:var(--teal-deep)}

.tab-panel{display:none;padding-bottom:120px}
.tab-panel.active{display:block}

/* ANALYTICS GRID */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between}
.kpi .lbl{font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:600;line-height:1.3}
.kpi .val{font-family:Fraunces,Georgia,serif;font-size:42px;font-weight:600;letter-spacing:-.02em;margin:8px 0 4px;line-height:1}
.kpi .val.small{font-size:32px}
.kpi .delta{font-size:13px;font-weight:600;color:var(--ink-mute)}
.kpi .delta.up-bad{color:var(--red)}
.kpi .delta.down-good{color:var(--green)}
.kpi .delta.up-good{color:var(--green)}
.kpi .delta.down-bad{color:var(--red)}

.chart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px}
.chart-grid.three{grid-template-columns:repeat(3,1fr)}
.chart-grid.wide{grid-template-columns:2fr 1fr}
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;min-height:280px;display:flex;flex-direction:column}
.chart-card h3{margin:0 0 4px;font-size:16px}
.chart-card .sub{font-size:13px;color:var(--ink-mute);margin-bottom:20px}
.chart-card .body{flex:1;min-height:180px;position:relative}
.chart-card svg{display:block;width:100%;height:100%;max-height:240px}
.chart-card .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;margin-bottom:16px;font-size:12px;color:var(--ink-soft)}
.chart-card .legend .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* Card header w/ badge + source link */
.chart-card .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.chart-card .head h3{margin:0}
.chart-card .badge{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:4px;white-space:nowrap}
.chart-card .badge.verified{background:var(--green-soft);color:#1a7d75}
.chart-card .badge.estimate{background:var(--amber-soft);color:#a07f00}
.chart-card .badge.forecast{background:var(--teal-soft);color:var(--teal-deep)}
.chart-card .badge.heuristic{background:var(--bg-alt);color:var(--ink-soft)}
.chart-card .badge.lookup{background:#f0e7f7;color:#6a3aa1}
.chart-card .src{font-size:11px;color:var(--ink-mute);margin-top:auto;padding-top:12px;text-decoration:none}
.chart-card .src:hover{color:var(--teal-deep)}
.chart-card .src .ico{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid currentColor;text-align:center;line-height:11px;font-size:9px;font-weight:700;margin-right:4px}

/* Loading shimmer */
.chart-card .loading,.kpi .loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink-mute);font-size:12px;letter-spacing:.04em}
.chart-card .loading::before,.kpi .loading::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--teal);animation:spin .8s linear infinite;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

.chart-card .err{color:var(--red);font-size:12px;padding:16px;background:var(--red-soft);border-radius:8px;margin-top:8px}

/* Health pill in nav */
.health-pill{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--bg-alt);color:var(--ink-mute);display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.health-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-mute)}
.health-pill.ok{background:var(--green-soft);color:#1a7d75}
.health-pill.ok .dot{background:var(--green)}
.health-pill.bad{background:var(--red-soft);color:#a32b36}
.health-pill.bad .dot{background:var(--red)}

/* WORK ORDER PAGE */
.wo{display:grid;grid-template-columns:1.4fr .8fr;gap:32px;align-items:start}
.wo-doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:48px;box-shadow:var(--shadow);font-family:'Times New Roman',Georgia,serif;color:#000}
.wo-doc .doc-header{border-bottom:2px solid #000;padding-bottom:16px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.wo-doc .doc-title{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.wo-doc .doc-num{font-family:Inter,sans-serif;font-size:20px;font-weight:800;color:#000;letter-spacing:-.01em}
.wo-doc .doc-agency{font-family:Inter,sans-serif;font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.wo-doc h4{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:24px 0 8px;font-weight:700}
.wo-doc p,.wo-doc li{margin:0 0 10px;font-size:15px;line-height:1.65}
.wo-doc ol{padding-left:20px;margin:0 0 16px}
.wo-doc .priority-banner{display:inline-block;padding:8px 14px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.wo-doc .priority-banner.p1{background:var(--red);color:#fff}
.wo-doc .priority-banner.p2{background:var(--amber);color:#000}
.wo-doc .priority-banner.p3{background:var(--green);color:#fff}
.wo-doc .response-banner{font-family:Inter,sans-serif;font-size:13px;font-weight:600;color:var(--ink-soft);margin-left:12px}
.wo-doc .safety-callout{background:var(--amber-soft);border-left:4px solid var(--amber);padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:8px 0 16px;font-family:Inter,sans-serif;font-size:14px;color:#000}
.wo-doc .safety-callout strong{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.wo-doc .checks{display:flex;gap:24px;flex-wrap:wrap;font-family:Inter,sans-serif;font-size:13px;color:var(--ink-soft)}
.wo-doc .checks .check{display:flex;align-items:center;gap:8px}
.wo-doc .checks .box{width:14px;height:14px;border:1.5px solid var(--ink-soft);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink)}
.wo-doc .checks .box.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wo-doc .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.wo-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:144px}
.wo-side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.wo-side-card .pill{width:100%;justify-content:center;margin-bottom:10px}
.wo-side-card .pill:last-child{margin-bottom:0}
.wo-side-card .lbl{font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:8px}
.wo-side-card .meta-line{font-size:14px;color:var(--ink-soft);margin:4px 0}
.wo-side-card .meta-line strong{color:var(--ink)}

/* MAP PAGE */
.map-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.map-shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:580px}
.map-shell > *{height:580px}
.map-placeholder{display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-size:14px;background:linear-gradient(135deg,var(--teal-soft),#fff);border-radius:var(--radius)}
.map-side{display:flex;flex-direction:column;gap:16px}
.map-legend,.map-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.map-legend .legend-item{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:var(--ink-soft)}
.map-legend .legend-item:last-child{margin-bottom:0}
.pin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--ink-mute)}
.pin-complaint{background:var(--red)}
.pin-vendor{background:var(--green)}
.pin-similar{background:var(--ink-mute)}     /* gray, matches the on-map similar-complaint dot */
/* Vendor-bolt legend icon: render the SVG instead of a colored circle */
.pin-vendor-bolt{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}
.pin-vendor-bolt svg{display:block}

/* Days-to-close color legend strip */
.legend-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-soft);font-size:12px;color:var(--ink-soft)}
.legend-sub-label{font-size:11px;color:var(--ink-mute);letter-spacing:.04em;margin-right:2px}
.day-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.04em}
.map-list .lbl{font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:12px}
.map-list-item{padding:10px 0;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px}
.map-list-item:first-of-type{border-top:none}
.map-list-item strong{color:var(--ink);font-weight:600}
.map-list-item .meta{color:var(--ink-mute);white-space:nowrap;font-size:12px}

/* Vendor selection cards */
.vendor-prompt{font-size:13px;color:var(--ink-soft);background:var(--teal-soft);border-left:3px solid var(--teal);padding:10px 14px;border-radius:6px;margin-bottom:12px}
.vendor-prompt strong{color:var(--ink)}
.vendor-prompt .inline-link{color:var(--teal-deep);text-decoration:none;font-weight:600;margin-left:4px}
.vendor-prompt .inline-link:hover{text-decoration:underline}
.vendor-card{cursor:pointer;transition:background .15s, border-color .15s;padding:12px 8px;border-radius:8px;align-items:center;gap:12px}
.vendor-rank{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--amber);color:var(--ink);font-family:Inter,sans-serif;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--amber)}
.vendor-card.selected .vendor-rank{background:#a07f00;color:#fff;box-shadow:0 0 0 1.5px #a07f00}
.vendor-card:hover{background:var(--bg-alt)}
.vendor-card.selected{background:#fff7df;border-left:3px solid var(--amber);padding-left:8px}
.vendor-card.selected .vendor-name strong{color:#0a1f3d}
.vendor-info{flex:1;min-width:0}
.vendor-name{display:flex;align-items:center;gap:6px}
.vendor-name strong{font-size:13px}
.vendor-link{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--bg-alt);color:var(--ink-soft);text-decoration:none;font-size:11px;font-weight:700;transition:background .15s, color .15s}
.vendor-link:hover{background:var(--teal);color:#fff}
.vendor-sub{font-size:11px;color:var(--ink-mute);margin-top:2px}
.vendor-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.vendor-actions .meta{font-size:11px}
.pill.small{padding:5px 12px;font-size:11px;letter-spacing:.04em}
.vendor-card.selected .pill.small.teal{background:var(--amber);color:#0a1f3d}
.vendor-card.selected .pill.small.teal::after{content:" ✓"}

/* Day-to-close tags on similar complaints */
.days-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.04em;white-space:nowrap}
.days-tag.days-fast{background:var(--teal-soft);color:var(--teal-deep)}
.days-tag.days-med{background:var(--amber-soft);color:#7a5800}
.days-tag.days-slow{background:var(--red-soft);color:#a32b36}
.days-tag.days-open{background:var(--bg-alt);color:var(--ink-mute)}

/* Similar complaints legend */
.similar-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--ink-mute);margin:6px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.similar-legend span{display:inline-flex;align-items:center;gap:5px}
.similar-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%}

/* Vendor row — clickable button with external-link for the name */
.vendor-row{padding:12px 0;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:10px;align-items:center;transition:background .15s;border-radius:6px;margin:0 -8px;padding-left:8px;padding-right:8px}
.vendor-row:first-of-type{border-top:none}
.vendor-row:hover{background:var(--bg-alt)}
.vendor-row.selected{background:var(--amber-soft);border-left:3px solid var(--amber);padding-left:5px}
.vendor-row .vendor-info{flex:1;min-width:0}
.vendor-row .vendor-name{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:600;font-size:13px;text-decoration:none;line-height:1.2}
.vendor-row .vendor-name:hover{color:var(--teal-deep);text-decoration:underline}
.vendor-row .vendor-name .ext{font-size:11px;opacity:.55}
.vendor-row .vendor-meta{color:var(--ink-mute);font-size:11px;margin-top:3px}
.vendor-select{font-size:11px;padding:6px 12px;letter-spacing:.04em;background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:999px;font-weight:600;font-family:inherit;flex-shrink:0;transition:all .15s}
.vendor-select:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.vendor-row.selected .vendor-select{background:var(--amber);color:#000;border-color:var(--amber)}
.vendor-row.selected .vendor-select::before{content:'✓ '}

/* Generate-WO CTA card */
.wo-cta-card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:20px;animation:fadeIn .25s ease}
.wo-cta-card .lbl{font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:10px}
.wo-cta-card .vendor-name-line{color:#fff;font-weight:700;font-size:14px;margin-bottom:4px}
.wo-cta-card .vendor-detail{color:rgba(255,255,255,.6);font-size:12px;margin-bottom:14px}
.wo-cta-card .pill.primary{background:var(--teal);color:var(--ink);width:100%;justify-content:center}
.wo-cta-card .pill.primary:hover{background:#fff}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Map labels (custom OverlayView) */
.gm-label{position:absolute;font:600 11px/1.2 Inter,sans-serif;background:rgba(255,255,255,.95);padding:3px 8px;border-radius:6px;border:1px solid var(--line);transform:translate(-50%,14px);white-space:nowrap;pointer-events:none;box-shadow:0 1px 2px rgba(10,31,61,.06);color:var(--ink)}
.gm-label.vendor{border-color:var(--amber);color:#8c5e00}
.gm-label.similar{border-color:var(--teal);color:var(--teal-deep);font-size:10px;padding:2px 6px}
.gm-label.complaint{border-color:var(--red);color:var(--red);font-weight:700}

/* Work-order tab placeholder when no vendor is selected yet */
.wo-empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:48px;text-align:center;color:var(--ink-soft);font-size:15px}
.wo-empty .big{font-family:Fraunces,Georgia,serif;font-size:24px;color:var(--ink);margin-bottom:8px}
.wo-empty .pill{margin-top:20px}

/* Google Maps InfoWindow override — match light theme */
.gm-style .gm-style-iw-c{padding:0!important;border-radius:12px!important;box-shadow:var(--shadow)!important;border:1px solid var(--line)}
.gm-style .gm-style-iw-d{overflow:auto!important;padding:16px 20px}
.gm-style .gm-style-iw-tc::after{background:var(--surface)!important}
.gm-popup{font-family:Inter,system-ui,sans-serif;color:var(--ink);min-width:220px}
.gm-popup .ttl{font-weight:700;font-size:14px;margin-bottom:4px;color:var(--ink)}
.gm-popup .meta{font-size:12px;color:var(--ink-mute);margin-bottom:6px}
.gm-popup .row{font-size:13px;color:var(--ink-soft);margin:2px 0}
.gm-popup .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--teal-soft);color:var(--teal-deep);margin-top:6px}

@media (max-width:1024px){
  .map-grid{grid-template-columns:1fr}
}

/* FOOTER */
footer{padding:80px 0 60px;border-top:1px solid var(--line);color:var(--ink-mute);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--ink)}

/* RESPONSIVE */
@media (max-width:1024px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .chart-grid,.chart-grid.three,.chart-grid.wide{grid-template-columns:1fr}
  .wo{grid-template-columns:1fr}
  .wo-side{position:static}
}
@media (max-width:768px){
  .wrap{padding:0 20px}
  section,header.hero{padding:80px 0}
  .two-col,.form{grid-template-columns:1fr;gap:32px}
  .graphics{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr}
  .hero-stat{border-right:none;border-bottom:1px solid var(--line)}
  .hero-stat:last-child{border-bottom:none}
  .intake{padding:48px 28px;border-radius:20px}
  nav.topnav ul{display:none}
  .tabs{overflow-x:auto;flex-wrap:nowrap}
  .tab{padding:16px 18px;white-space:nowrap}
  .wo-doc{padding:32px 24px}
}

/* ╔════════════════════════════════════════════════════════════════╗
   ║  HOURGLASS-FLOW LAYOUT — narrative-arc redesign                 ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* SVG hourglass background fills entire body height.
   IMPORTANT: body must have position:relative so the absolute-positioned
   .hourglass-bg gets sized relative to the body (full content height),
   not the viewport (100vh). Without this, the hourglass collapses to
   one screen height and looks like it's "stuck" to the hero section.

   The hourglass is offset to the right by --rail-width so it centers
   on the CONTENT AREA (right of the side TOC), not the full viewport.
   Below the mobile breakpoint where the side rail is hidden, the
   hourglass spans the full width. */
html{background:var(--bg)}
body{background:transparent;position:relative;min-height:100vh}
.hourglass-bg{
  position:absolute;
  top:0; bottom:0;
  left:var(--rail-width);
  right:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hourglass-bg svg{display:block;width:100%;height:100%}

/* All sections sit on top of the SVG */
section{position:relative;z-index:1;padding:120px 0}

/* Light text on the wide-blue zones */
.on-blue{color:#fff}
.on-blue h1, .on-blue h2, .on-blue h3, .on-blue strong{color:#fff}
.on-blue .lede{color:rgba(255,255,255,.82);font-size:21px;max-width:62ch;margin-bottom:16px}
.on-blue .kicker{color:#9bdcef}
.on-blue em{color:rgba(255,255,255,.65)}
.on-blue a{color:#9bdcef}

/* Dark text on white zones */
.on-white{color:var(--ink)}

/* Megastat — the giant number callouts in funnel sections */
.megastat{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:.95;
  font-size:clamp(96px,14vw,200px);letter-spacing:-.04em}
.megastat .unit{font-family:Inter,sans-serif;font-size:.18em;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;display:block;margin-top:14px;
  color:rgba(255,255,255,.7)}

/* Display headlines in zones */
h2.display{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(40px,6vw,80px);line-height:1.02;letter-spacing:-.02em;margin-bottom:24px}

/* Text panel — used in neck sections that have prose without a card */
.text-panel{background:var(--bg);border:1px solid var(--line);border-radius:24px;
  padding:56px 64px;margin:0 auto;max-width:880px;
  box-shadow:0 1px 2px rgba(10,31,61,.04), 0 12px 40px rgba(10,31,61,.08);
  text-align:center}
.text-panel h2{margin-left:auto;margin-right:auto;max-width:18ch}
.text-panel .lede{margin-left:auto;margin-right:auto;font-size:20px;color:var(--ink-soft);max-width:62ch}

/* Dark panel — same idea as .text-panel but for the on-blue zones.
   The hourglass curves slice diagonally across the wide-blue area at
   funnel transitions; without an opaque navy box behind text, the
   first letters of headlines and copy bleed past the curve onto white.
   .dark-panel guarantees the text always has solid navy underneath. */
.dark-panel{
  background:var(--ink);
  color:#fff;
  padding:56px 64px;
  border-radius:24px;
  margin:0 auto;
  max-width:920px;
  position:relative;
  z-index:2;
  box-shadow:0 12px 40px rgba(10,31,61,.35);
}
.dark-panel .megastat,
.dark-panel h2,
.dark-panel h2.display,
.dark-panel strong{color:#fff}
.dark-panel .lede{color:rgba(255,255,255,.82);max-width:62ch}
.dark-panel .kicker{color:#9bdcef}
.dark-panel em{color:rgba(255,255,255,.65)}
.dark-panel ul{color:rgba(255,255,255,.82)}
@media (max-width:768px){
  .dark-panel{padding:32px 24px}
}

/* Why-section blocks (paragraph + visual chart pair).
   Each block keeps the prose lede on top and the supporting chart
   tucked beneath, with a faint top-border separator on subsequent
   blocks for rhythm. */
.why-block{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.why-block:first-of-type{border-top:none;padding-top:0;margin-top:24px}
.why-chart{margin-top:18px;padding:16px 0}
.why-chart svg{display:block;width:100%;height:auto;max-height:none}

/* Card-form — bigger, more presentation-grade than the original .intake */
.card-form{background:var(--ink);color:#fff;border-radius:32px;padding:64px;
  box-shadow:0 12px 40px rgba(10,31,61,.20);position:relative;z-index:2}
.card-form .kicker{color:var(--teal)}
.card-form h2.display{color:#fff}
.card-form .lede{color:rgba(255,255,255,.7);font-size:19px;max-width:64ch}
.card-form .form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.card-form .submit-row{margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.card-form .submit-row .meta{color:rgba(255,255,255,.5);font-size:14px}

/* Big "Use my current location" button — primary CTA above the address.
   Sits on its own row, full-width, prominent gradient + GPS icon. */
.big-location-btn{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:22px 28px;
  font:700 17px/1 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 6px 24px rgba(0,180,216,.35);
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
.big-location-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 32px rgba(0,180,216,.45);
}
.big-location-btn:disabled{opacity:.6;cursor:wait;transform:none}
.big-location-btn .loc-icon{font-size:24px;line-height:1}
.big-location-btn.locating .loc-icon{animation:pulse 1s ease-in-out infinite}

/* "or" divider between the big button and the manual address input */
.or-divider{
  display:flex;align-items:center;gap:14px;
  margin:18px 0 14px;
  color:rgba(255,255,255,.5);
  font-size:13px;font-weight:500;letter-spacing:.04em;
  text-transform:none;
}
.or-divider::before, .or-divider::after{
  content:''; flex:1; height:1px; background:rgba(255,255,255,.12);
}
.or-divider span{font-size:13px;color:rgba(255,255,255,.55)}

/* Dropzone for photo upload */
.dropzone{border:2px dashed rgba(255,255,255,.22);border-radius:14px;padding:24px;
  background:rgba(255,255,255,.04);transition:all .15s;text-align:center}
.dropzone.dragover{border-color:var(--teal);background:rgba(0,180,216,.12)}
.dropzone-prompt{color:rgba(255,255,255,.7);font-size:14px;padding:14px 0}
.dropzone-prompt strong{color:#fff}
.link-btn{background:none;border:none;color:var(--teal);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.link-btn:hover{color:#fff}
.dropzone-thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.dropzone-thumbs:empty{margin:0}
.thumb{position:relative;width:120px;height:90px;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.2)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(10,31,61,.85);color:#fff;font-size:14px;font-weight:700;
  cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.thumb-remove:hover{background:var(--red)}

/* Map area + work-order + analysis section header (lives directly under cards) */
.map-area{margin-top:48px;background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:40px 32px;box-shadow:0 1px 2px rgba(10,31,61,.04), 0 12px 40px rgba(10,31,61,.06)}
.map-area-header{margin-bottom:24px}
.map-area-title{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(28px,3.5vw,44px);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:8px 0}
.map-area-sub{font-size:16px;color:var(--ink-soft);max-width:60ch}

.wo-area{background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:40px 32px;box-shadow:0 1px 2px rgba(10,31,61,.04), 0 12px 40px rgba(10,31,61,.06)}
.wo-area-header{margin-bottom:24px}
.wo-placeholder{padding:60px 40px;text-align:center;color:var(--ink-mute);font-size:15px;
  background:var(--bg);border:1px dashed var(--line);border-radius:16px}

/* Analysis section — wraps the entire analytics report in a single
   white panel so the dark navy hourglass column doesn't bleed through
   the title or subheading text. */
.analysis-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:24px;
  padding:48px 52px;
  position:relative;
  z-index:2;
  box-shadow:0 1px 2px rgba(10,31,61,.04), 0 12px 40px rgba(10,31,61,.06);
}
.analysis-header{margin-bottom:24px}
.analysis-title{
  font-family:Fraunces,Georgia,serif;
  font-weight:600;
  font-size:clamp(32px,4vw,52px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:8px 0 0;
}
.analysis-sub{
  font-size:17px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0;
}
.analysis-intro-row{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:32px;
  align-items:start;
  margin:8px 0 32px;
}

/* Compact repeat-at-address KPI — smaller than the .kpi tile so it
   doesn't dominate the intro row */
.kpi-compact{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.kpi-compact .lbl{
  font-size:11px;
  color:var(--ink-mute);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  margin:0;
}
.kpi-compact .val{
  font-family:Fraunces,Georgia,serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.05;
}
.kpi-compact .delta{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.4;
  margin:0;
}
.kpi-compact .delta.up-bad{color:var(--red)}

/* Wide boxplot card sits below the intro row, full width within the
   analysis card. */
.chart-card-wide{
  margin-bottom:24px;
}
.chart-card-wide .body{min-height:260px}
.chart-card-wide svg{max-height:none;height:auto}

@media (max-width:880px){
  .analysis-card{padding:28px 22px}
  .analysis-intro-row{grid-template-columns:1fr;gap:16px}
}

/* Photos in work-order document */
.wo-photos{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 16px}
.wo-photos img{width:160px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

/* Workflow diagram */
.workflow-diagram{margin-top:32px;display:flex;flex-direction:column;gap:0;position:relative}
.workflow-step{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:stretch;position:relative;padding:14px 0}
.workflow-step::before{content:"";position:absolute;left:31px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12);z-index:0}
.workflow-step:first-child::before{top:50%}
.workflow-step:last-child::before{bottom:50%}
.ws-marker{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Fraunces,serif;font-weight:600;font-size:24px;color:#fff;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);align-self:center}
.workflow-step.ws-compressed .ws-marker{background:var(--teal);border-color:var(--teal);color:#0a1f3d;box-shadow:0 0 0 6px rgba(0,180,216,.18)}
.ws-content{display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 22px}
.workflow-step.ws-compressed .ws-content{background:rgba(0,180,216,.08);border-color:rgba(0,180,216,.28)}
.ws-name{font-size:17px;font-weight:600;color:#fff;margin-bottom:6px}
.ws-times{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.ws-time-today{color:rgba(255,255,255,.55);text-decoration:line-through;font-variant-numeric:tabular-nums}
.ws-time-arrow{color:rgba(255,255,255,.45);font-weight:600}
.ws-time-tool{color:var(--teal);font-weight:700;font-variant-numeric:tabular-nums;background:rgba(0,180,216,.12);padding:3px 10px;border-radius:999px}
.workflow-step.ws-same .ws-time-tool{color:rgba(255,255,255,.7);background:rgba(255,255,255,.08)}

@media (max-width:880px){
  .workflow-step{grid-template-columns:48px 1fr;gap:14px}
  .workflow-step::before{left:23px}
  .ws-marker{width:48px;height:48px;font-size:18px}
  .ws-content{padding:14px 16px}
}

/* Source-line at the very bottom (within blue) */
.source-line{font-size:14px;color:rgba(255,255,255,.7);text-align:center;padding:60px 0 90px;position:relative;z-index:1}
.source-line a{color:#fff;font-weight:600;text-decoration:underline}

/* Mobile: collapse the form grid */
@media (max-width:768px){
  section{padding:80px 0}
  .megastat{font-size:64px}
  h2.display{font-size:36px}
  .card-form{padding:32px 24px;border-radius:20px}
  .card-form .form{grid-template-columns:1fr}
  .text-panel{padding:32px 24px}
  .map-area, .wo-area{padding:24px 16px}
  .wo-photos img{width:100px;height:75px}
}