/* Sewer Studs design tokens — lifted from the FINAL homepage-demo (Oct 9, 2026).
   Single source of truth for the static build. Do not fork values per page. */
:root {
  color-scheme: light dark;
  --ink: #10231d;
  --muted: #53635d;
  --paper: #f6f8f4;
  --surface: #ffffff;
  --surface-2: #e9efe9;
  --line: #ced9d1;
  --green: #1daf52;
  --green-dark: #0f7037;
  --brand: #104020;        /* deep brand green: headings, primary buttons */
  --brand-mid: #2f7d32;
  --brand-deep: #0b2f18;   /* button hover */
  --lime: #a9f058;
  --navy: #0c1c18;         /* dark section background (near-black green) */
  --gold: #d9a53a;         /* sparing accent: stars, badge details */
  --error: #b3402e;
  --body-text: #1e2a24;
  --sage-on-dark: #a9bbb1;
  --shadow: 0 24px 70px rgba(12, 28, 24, .14);
  --shadow-card: 0 10px 30px rgba(16, 64, 32, .10);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 16px;
  --maxw: 1200px;
}

/* Dark scheme (Nov 6, 2026 — Ricky's order): automatic, on the visitor's
   own system preference; no toggle, no script. The grounds and text flip;
   the brand greens, gold, and navy keep their values (buttons and dark
   sections are the same objects in both schemes). Text that wears the
   deep brand green in the light scheme lightens in site.css's dark block
   — a background green and a text green are different jobs. Every text
   pair in this palette was computed at build time: the weakest is
   muted-on-surface at 7.08:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edf3ec;
    --muted: #9cb3a1;
    --paper: #0b1913;
    --surface: #122620;
    --surface-2: #1b3328;
    --line: #30503d;
    --body-text: #c7d5c8;
    --shadow: 0 24px 70px rgba(0, 0, 0, .5);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, .4);
  }
}

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); }
/* Manrope ships as one variable file (wght axis); one face, full range. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/manrope-variable.woff2') format('woff2-variations'); }

/* Sewer Studs — design system. Source: the FINAL approved homepage demo
   (Oct 9, 2026). Build order step 1. Speed law: this file + tokens + font
   faces must stay <= 30 KB total; every byte ships on every page.
   tokens.css is bundled by build.py (the @import below is stripped there
   and only exists so this file also renders standalone in an editor). */


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--body); color: var(--body-text);
  background: var(--paper); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--display); color: var(--brand);
  line-height: 1.08; letter-spacing: .01em; margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; }
h3 { font-size: 1.45rem; font-weight: 600; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-mid); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 76px 0; }
.section--dark { background: var(--navy); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: #bfe6cc; }
.section--tint { background: var(--surface-2); }
/* A11y pass (Nov 6, 2026, Ricky's PageSpeed run): brand-mid links on the
   tint measure 4.39:1 — under the 4.5 floor; green-dark measures 5.30:1. */
.section--tint a:not(.btn) { color: var(--green-dark); }
/* In-text links carry a non-color cue (underline), per the same audit. */
p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
/* Quote-form consent small print: the frozen component's own #7a8781
   measures 3.74:1 on the white card; this override (higher specificity +
   !important, component file untouched) brings it to #4d5c54 = 7.06:1. */
body .ss-quote.ss-quote .ss-tcpa { color: #4d5c54 !important; }

/* ---------- Recent Jobs strip (homepage; spec Nov 6, 2026) ---------- */
.jobs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.job-tile { display: block; text-decoration: none; color: var(--ink); }
.job-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.job-tile__cap { display: block; font-weight: 700; margin-top: 9px; line-height: 1.3; }
.job-tile__date { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.job-tile:hover .job-tile__cap, .job-tile:focus-visible .job-tile__cap { text-decoration: underline; text-underline-offset: 2px; }
.jobs-more { margin-top: 22px; font-weight: 700; }
@media (max-width: 700px) {
  .jobs-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .job-tile { flex: 0 0 72%; scroll-snap-align: start; }
}
.lead { font-size: 1.14rem; }
.eyebrow {
  font-family: var(--display); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; font-size: .95rem; color: var(--brand-mid); margin: 0 0 .6em;
}
.section--dark .eyebrow { color: var(--gold); }
.section-head { max-width: 46rem; }
.section-head--center { margin: 0 auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 28px; border-radius: 12px;
  font-weight: 700; text-decoration: none; line-height: 1.3; font-size: 1.02rem;
}
.btn--primary { background: var(--green-dark); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-deep); }
.btn--outline { border: 1.5px solid #fff; color: #fff; background: transparent; }
.btn--outline:hover { background: rgba(255,255,255,.12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ---------- Header ---------- */
.site-header { background: var(--navy); position: relative; z-index: 50; }
body.page-home .site-header {
  position: absolute; top: 0; left: 0; right: 0; background: transparent;
}
.site-header__in {
  display: flex; align-items: center; gap: 28px; min-height: 84px;
}
.site-logo img { width: 178px; display: block; }
/* The nav toggle IS the checkbox (Nov 6, 2026 restructure): a native
   control with native checked state — no label, no assigned role, so the
   accessibility tree is well-formed for people and agents alike. It is
   keyboard-focusable and Space-toggles natively; the global :focus-visible
   outline is its focus state. The bars are background gradients (an input
   has no children). JS-free, as the pattern has always been. */
.nav-checkbox {
  appearance: none; -webkit-appearance: none; display: none; flex: none;
  margin: 0 0 0 auto; width: 46px; height: 44px; border: 0; border-radius: 8px;
  background-color: transparent; cursor: pointer;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 26px 3px, 26px 3px, 26px 3px;
  background-position: 50% calc(50% - 8px), 50% 50%, 50% calc(50% + 8px);
  background-repeat: no-repeat;
}
.site-nav { margin-left: auto; }
.site-nav > ul {
  display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.site-nav a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: .98rem;
}
.site-nav a:hover { color: var(--gold); }
.nav-item { position: relative; }
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: -14px; min-width: 280px;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px; list-style: none; margin: 0;
}
.nav-dropdown a { color: var(--ink); display: block; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.nav-dropdown a:hover { background: var(--surface-2); color: var(--brand); }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: block; }
.btn--call { background: var(--green-dark); color: #fff !important; padding: 11px 20px; border-radius: 10px; white-space: nowrap; flex: none; }
.btn--call:hover { background: var(--brand-deep); }
@media (max-width: 960px) {
  .site-header__in { gap: 14px; }
  .site-logo img { width: 148px; }
  .btn--call { padding: 10px 14px; font-size: .95rem; }
  .nav-checkbox { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); padding: 10px 20px 22px;
  }
  .nav-checkbox:checked ~ .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .site-nav a { display: block; padding: 10px 6px; }
  .nav-dropdown {
    display: block; position: static; background: transparent; box-shadow: none;
    padding: 0 0 6px 16px; min-width: 0;
  }
  .nav-dropdown a { color: #d7e4da; padding: 7px 6px; }
}

/* ---------- Hero (homepage) ---------- */
.hero {
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(29,175,82,.22), transparent 60%),
    var(--navy);
  color: #fff; padding: 172px 0 92px;
}
.hero h1 { color: #fff; max-width: 13.5ch; }
.hero .lead { max-width: 36rem; color: #dcebe0; }
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none;
  margin: 30px 0 0; padding: 0;
}
.hero-badges li {
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: 7px 15px; font-size: .92rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06);
}
.hero-badges li.badge-img { border: 0; background: none; padding: 0; }
.hero-badges li.badge-img img { height: 56px; width: auto; display: block; }
@media (max-width: 860px) {
  .hero h1 { max-width: none; margin-inline: 0; text-align: left; text-wrap: balance; }
  .hero .lead { margin-inline: 0; text-align: left; }
}

/* ---------- Check list ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 36px; font-weight: 600; }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: .85rem;
  display: grid; place-items: center;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 18px; margin-top: 34px;
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; text-decoration: none; color: var(--body-text);
  display: block; transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; font-size: .98rem; }
.card .card-link { color: var(--brand-mid); font-weight: 700; display: inline-block; margin-top: 12px; }

/* ---------- Detail groups ---------- */
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px; margin-top: 30px; }
.groups ul { margin: 0; padding-left: 1.15em; }
.groups li { margin-bottom: .45em; }

/* ---------- Feature band ---------- */
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.feature img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.feature-panel {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: 52px 38px; text-align: center; box-shadow: var(--shadow);
}
.feature-panel .feature-panel__big {
  font-family: var(--display); font-weight: 700; line-height: 1.02;
  font-size: clamp(2.6rem, 5vw, 3.8rem); color: #fff; margin: 0 0 .3em;
}
.feature-panel p { color: #dcebe0; margin: 0; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* ---------- Service areas ---------- */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 34px; list-style: none; margin: 26px 0 0; padding: 0; }
.areas a { font-weight: 600; text-decoration: none; }
.areas a:hover { text-decoration: underline; }

/* ---------- Reviews ---------- */
.review-summary { font-size: 1.15rem; font-weight: 700; }
.stars { color: var(--gold); letter-spacing: .18em; font-size: 1.05rem; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 30px; }
.review-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; color: var(--body-text);
}
.review-card blockquote { margin: 10px 0 14px; font-size: 1rem; }
.review-card .reviewer { font-weight: 800; color: var(--brand); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 52px; align-items: start; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 1.28rem; color: var(--brand);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: 12px;
  font-size: 1.6rem; color: var(--brand-mid); font-family: var(--body);
}
.faq-item[open ] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 0 20px; max-width: 44rem; }

/* ---------- CTA band + form ---------- */
.cta-band { background: var(--navy); color: #fff; padding: 84px 0; }
.cta-band h2 { color: #fff; }
.cta-form { max-width: 720px; margin: 34px auto 0; scroll-margin-top: 24px; }
#quote-form { scroll-margin-top: 24px; }

/* ---------- Blog cards ---------- */
.post-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; }
.post-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--body-text); display: block;
}
.post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.post-card__body { padding: 20px 22px 24px; }
.post-card h3 { margin-bottom: .3em; }
.post-card p { margin: 0; font-size: .97rem; }

/* ---------- Utility prose ---------- */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.2em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #d9e6dc; padding: 64px 0 0; font-size: .97rem; }
.site-footer h3 { color: #fff; font-size: 1.3rem; }
.site-footer a { color: #bfe6cc; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-logo img { width: 190px; margin-bottom: 14px; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 48px;
  padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: .88rem; color: #a9beb0;
}
.footer-legal a { color: #a9beb0; }

/* ---------- Pricing table ---------- */
.table-wrap { overflow-x: auto; margin: 26px 0 8px; }
.price-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  font-size: .99rem;
}
.price-table th, .price-table td {
  text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.price-table thead th {
  background: var(--brand); color: #fff; font-family: var(--display);
  font-weight: 600; font-size: 1.12rem; letter-spacing: .02em;
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:nth-child(even) { background: var(--surface-2); }
.price-table td.n { white-space: nowrap; font-weight: 700; color: var(--brand); }
.price-table tr.sub td { padding-left: 34px; font-size: .95rem; }
.price-table tr.sub td.n { font-weight: 600; }

/* ---------- Video embed (blog posts) ---------- */
.video-wrap { aspect-ratio: 16 / 9; margin: 28px 0; }
.video-wrap iframe {
  width: 100%; height: 100%; border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow); display: block;
}
.byline { color: #5a6f61; font-size: .95rem; margin-top: -6px; }

/* ---------- Interior page head ---------- */
.page-head { padding: 58px 0 0; }
.page-head h1 { max-width: 22ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
}
.faq-cat { margin-top: 46px; }
.faq-cat:first-child { margin-top: 0; }

/* ---------- Dark mode (Nov 6, 2026 — pairs with the tokens.css scheme) ----------
   Only what the token flip cannot say lives here: text that wears the deep
   brand green on light grounds lightens (its background uses keep the deep
   value — white on it computes 11.8:1); the mid brand green (base links,
   card links, the FAQ marker) lightens with it — it computed 3.5:1 on the
   dark ground; the one light-ground literal (.byline) joins the muted
   token; the card family (.card, .review-card, .post-card, .price-table)
   wears the surface token instead of a literal white — in the light
   scheme the token IS white, so the light rendering never changed; the
   desktop dropdown flips with the scheme instead of staying a white
   panel; and the quote band — already a
   navy section in the light scheme — gets a softened surround so the white
   form card floats on a pool of lifted green instead of glaring. */
@media (prefers-color-scheme: dark) {
  h1, h2, h3 { color: #96d3a3; }
  .eyebrow { color: #96d3a3; }
  .faq-item summary { color: #96d3a3; }
  .review-card .reviewer { color: #96d3a3; }
  .price-table td.n { color: #96d3a3; }
  .section--tint a:not(.btn) { color: #96d3a3; }
  .byline { color: var(--muted); }
  a { color: #96d3a3; }
  .card .card-link { color: #96d3a3; }
  .faq-item summary::after { color: #96d3a3; }
  .nav-dropdown { background: var(--surface); border: 1px solid var(--line); }
  .nav-dropdown a:hover { background: var(--surface-2); color: #96d3a3; }
  .cta-band {
    background: radial-gradient(58% 110% at 50% 0%, #1a3a2a 0%, var(--navy) 62%, var(--paper) 135%);
  }
  .cta-form { filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .55)); }
}