/* ============================================================
   Tate & Sons Dumpster Rental Rockford — Rockford, IL / Winnebago County
   "Rockford Rivertown" identity. Single stylesheet. Brand colors in :root.
   Technical/responsive foundation ported from the QNS Dumpster Rental
   Queens build (breakpoints, grid mechanics, burger/off-canvas nav, FAQ
   accordion, table-scroll, callbar) — visual identity built fresh.
   ============================================================ */
:root{
  /* Navy (#0F4A7A) sampled straight from the supplied Tate & Sons logo's
     solid fill; blue (#1D74B8) is a brighter tint derived from that navy,
     used for secondary accents/hover states. The CTA is a fresh third
     color — ROCKFORD BRICK #C9481F — tied to the real 19th/20th-century
     brick furniture-factory buildings along the Rock River that built
     Rockford's "Furniture City" heritage (the city was the #2 furniture-
     manufacturing center in the US, behind Grand Rapids, MI).
     CONTRAST (computed via the standard WCAG relative-luminance function,
     never eyeballed): red #C9481F against WHITE text clears 4.74:1 (AA,
     past the 4.5:1 floor) — every CTA-colored button/pill/badge in this
     file uses WHITE text on the red fill, no navy-text swap needed. The
     hover shade --red-600 (#A83D1A, darker) holds 6.27:1 with white text.
     Red used as small TEXT directly on white (eyebrow labels, card-link
     labels, FAQ arrow, tr.hl highlighted-row link) uses a dedicated
     darker text-safe shade --red-700 (#8A3014) instead — 8.35:1 on white,
     comfortably past AAA — full-strength red stays for decorative
     icon/border/focus-ring use where it isn't held to text-contrast
     rules. --gold (#D9A441, "Coronado Marquee Gold" — the 1927 Coronado
     Theatre's restored Art Deco marquee lighting) is reserved for the
     eyebrow-tick wave decoration, decorative icon fills on dark panels,
     and small accents — NEVER as a large background fill or as small
     body text directly on white (2.25:1, fails AA badly). Where gold
     needs to read as small TEXT on a light background (link hover), a
     darker text-safe shade --gold-700 (#8A5C12) is used instead — 5.8:1
     on white. Full-strength --gold on navy clears only 4.09:1 — fine for
     the (non-text) decorative tick/icon fills it's mostly used for, but
     short of the 4.5:1 small-text floor — so eyebrow LABEL TEXT sitting
     on a dark panel (hero, page-hero, cta-band, sec-navy, call-card,
     .eyebrow.light) uses a lighter --gold-300 (#E3B563) instead, which
     clears 4.85:1 against navy. Navy on white clears 9.21:1 and blue on
     white clears 4.95:1 — both pass AA on their own, no workaround needed.
     Rockford's river/industrial identity drives the signature motifs: a
     RIVER-RIPPLE eyebrow tick — a short wavy underline (CSS mask + SVG
     wave path, recolorable via currentColor-adjacent background-color)
     evoking the Rock River running through downtown Rockford, a
     SAWTOOTH-FACTORY-ROOFLINE icon tile built from a clip-path polygon
     zigzag cut into just the top ~22% of the tile, evoking the real
     sawtooth-roof furniture factories built by Rockford's Swedish
     immigrant worker cooperatives (kept shallow on purpose — an earlier
     build in this portfolio over-cut this notch and had to fix it), and
     a repeating RIVER-RIPPLE divider — two layered tileable SVG wave
     bands (a softer blue wave behind, a crisper navy wave in front) in
     place of a straight rail/tick divider, evoking the Rock River itself. */
  --navy:#0F4A7A; --navy-800:#0A3255; --navy-600:#1660A0;
  --blue:#1D74B8; --blue-600:#145C90; --blue-100:#E4EEF6;
  --red:#C9481F; --red-600:#A83D1A; --red-700:#8A3014; --red-100:#F7E2D9;
  --gold:#D9A441; --gold-700:#8A5C12; --gold-300:#E3B563;
  --ink:#182430; --ink-2:#48565f; --ink-3:#71818b;
  --bg:#fff; --bg-soft:#f1f4f7; --bg-deep:var(--navy);
  --line:#dce3ea; --line-2:#eaeef3;
  --head:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --sans:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1200px; --pad:clamp(1rem,4vw,2rem);
  --r:14px; --r-s:10px;
  --sh:0 1px 2px rgba(15,74,122,.06),0 8px 24px -12px rgba(15,74,122,.18);
  --sh-l:0 2px 4px rgba(15,74,122,.05),0 22px 48px -20px rgba(15,74,122,.28);
  --hdr-h:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--hdr-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.68;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,iframe{max-width:100%}
img{height:auto;display:block}
/* Big Shoulders Display loads real 500/600/700/800 weight cuts (see
   common.py FONTS), so every heading-font element gets an explicit,
   deliberately-chosen weight rather than an inherited/default 400 —
   h1 goes heaviest (800) for hero impact, h2 drops to 700, h3/h4 settle
   at 600 for a still-sturdy but less shouty subhead weight. Anywhere a
   heading-styled element might otherwise inherit the base `strong{
   font-weight:700}` rule (hero-badge strong, size-badge strong, quote
   figcaption strong, author-box strong, info-list strong, map-fallback
   strong) gets its own explicit weight so the whole condensed-caps
   family reads at one consistent, intentional weight per role instead
   of drifting to whatever the wrapping tag happened to set. FAQ summary
   text uses weight 500 (the lightest loaded cut) rather than 400 (NOT
   loaded — would silently fall back to a faux-bold browser synthesis on
   a condensed display face) since it reads a full question sentence,
   not a heavy display heading. */
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.13;letter-spacing:-.018em;color:var(--navy);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.35rem + 2.7vw,3.35rem);font-weight:800}
h2{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.4rem);font-weight:700}
h3{font-size:clamp(1.13rem,1.02rem + .45vw,1.35rem);font-weight:600}
h4{font-weight:600}
p{margin:0 0 1.05em}
a{color:var(--blue-600);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--gold-700)}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin:0 0 .4em}
strong{font-weight:700;color:var(--navy)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}
.ic{width:1.15em;height:1.15em;flex:none}

/* -------------------------------------------------- HEADER */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(15,74,122,.05)}
.hdr{display:flex;align-items:center;gap:1.1rem;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--navy);flex:0 1 auto;min-width:0}
.brand img{width:auto;height:54px;flex:none;max-width:100%}
.nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:.05rem;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative;margin:0}
.nav-list>li>a{display:block;padding:.62rem .6rem;font-weight:600;font-size:.93rem;color:var(--navy);
  text-decoration:none;border-radius:8px;white-space:nowrap}
.nav-list>li>a:hover{background:var(--blue-100);color:var(--blue-600)}
.sub-t{display:none}
.caret{transform:rotate(90deg);width:.85em;height:.85em;opacity:.6;margin-left:.1em}
.has-sub>a::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.42em;vertical-align:.12em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.55}
.sub{position:absolute;top:calc(100% + 6px);left:0;min-width:255px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);box-shadow:var(--sh-l);list-style:none;margin:0;padding:.4rem;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;z-index:70}
.sub-wide{min-width:300px;column-count:1}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.sub li{margin:0}
.sub a{display:block;padding:.5rem .7rem;border-radius:7px;font-size:.9rem;font-weight:500;color:var(--ink);text-decoration:none}
.sub a:hover{background:var(--blue-100);color:var(--blue-600)}
.hdr-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.hdr-phone{display:inline-flex;align-items:center;gap:.45rem;background:var(--red);color:#fff;font-weight:700;
  font-size:.94rem;padding:.62rem 1.02rem;border-radius:999px;text-decoration:none;white-space:nowrap}
.hdr-phone:hover{background:var(--red-600);color:#fff}
.burger{display:none;width:46px;height:42px;border:1px solid var(--line);background:#fff;border-radius:9px;
  cursor:pointer;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:21px;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(15,36,48,.5);z-index:58;border:0}

@media (max-width:1180px){
  .burger{display:flex}
  /* Off-canvas drawer. `display:none` when closed so it never contributes to
     document scroll width; @starting-style gives the slide-in where supported. */
  .nav{position:fixed;top:0;right:0;width:min(88vw,380px);height:100dvh;background:#fff;z-index:59;
    display:none;transform:translateX(102%);overflow-y:auto;padding:calc(var(--hdr-h) + .5rem) 1rem 6rem;
    box-shadow:-20px 0 50px -20px rgba(15,36,48,.4);margin-left:0;
    transition:transform .25s ease,display .25s allow-discrete}
  .nav.open{display:block;transform:none}
  @starting-style{.nav.open{transform:translateX(102%)}}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list>li{border-bottom:1px solid var(--line-2)}
  .nav-list>li>a{padding:.9rem .4rem;font-size:1.02rem;border-radius:0}
  .has-sub{display:grid;grid-template-columns:1fr auto}
  .has-sub>a::after{display:none}
  .sub-t{display:flex;align-items:center;justify-content:center;width:46px;background:none;border:0;cursor:pointer;color:var(--navy)}
  .sub-t[aria-expanded=true] .caret{transform:rotate(-90deg)}
  .sub{position:static;grid-column:1/-1;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-left:3px solid var(--blue-100);border-radius:0;margin:0 0 .6rem .3rem;padding:0 0 0 .5rem;display:none}
  .sub-t[aria-expanded=true] + .sub{display:block}
  .hdr-phone span{display:inline}
}
@media (max-width:430px){
  .brand img{height:42px}
  .hdr-phone{padding:.6rem .7rem}
  .hdr-phone span{display:none}
  :root{--hdr-h:64px}
}
@media (max-width:359px){
  .hdr{gap:.6rem}
  .brand img{height:36px}
}

/* -------------------------------------------------- BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--head);font-weight:700;
  font-size:1rem;padding:.86rem 1.5rem;border-radius:999px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:.16s ease;line-height:1.2;text-align:center}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-600);border-color:var(--red-600);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:rgba(15,74,122,.28)}
.btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-lg{font-size:1.09rem;padding:1.02rem 1.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0}
.on-dark .btn-ghost,.hero .btn-ghost,.page-hero .btn-ghost,.cta-band .btn-ghost,.sec-navy .btn-ghost,
.call-card .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.on-dark .btn-ghost:hover,.hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.cta-band .btn-ghost:hover,
.sec-navy .btn-ghost:hover,.call-card .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
/* eyebrows sitting on a dark panel switch to a lighter marquee-gold TEXT
   shade (--gold-300, not the full-strength --gold used for the wave tick
   and decorative icon fills) so the label itself still clears 4.5:1
   against navy — see the :root contrast note above. */
.hero .eyebrow,.page-hero .eyebrow,.cta-band .eyebrow,.sec-navy .eyebrow,.call-card .eyebrow{color:var(--gold-300)}

/* -------------------------------------------------- EYEBROW / SECTION HEADS
   RIVER-RIPPLE tick: a short wavy underline sitting beneath the eyebrow
   label, evoking the Rock River's ripples — not a dot row, not a straight
   rule. Built as a single filled wave-ribbon SVG (four low bumps, flat
   base) applied as a CSS mask on a plain rectangle: `background-color`
   supplies the actual color (so it recolors cleanly with var() — red-700
   on light panels, gold on dark panels/`.light` — since data-URI SVGs
   inside background-image cannot resolve currentColor/var(), while a
   masked background-color can). The eyebrow itself becomes the
   positioning context (inline-block, padding-bottom reserves the gap)
   so the tick sits directly under the label text rather than beside it. */
.eyebrow{position:relative;display:inline-block;font-family:var(--head);font-weight:700;font-size:.78rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red-700);margin:0 0 1.05rem;padding-bottom:.7rem;line-height:1.4}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:11px;
  background-color:var(--gold);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2020'%3E%3Cpath%20d='M0,12%20C2,12%202,9%204,9%20C6,9%206,12%208,12%20C10,12%2010,9%2012,9%20C14,9%2014,12%2016,12%20C18,12%2018,9%2020,9%20C22,9%2022,12%2024,12%20L24,18%20L0,18%20Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2020'%3E%3Cpath%20d='M0,12%20C2,12%202,9%204,9%20C6,9%206,12%208,12%20C10,12%2010,9%2012,9%20C14,9%2014,12%2016,12%20C18,12%2018,9%2020,9%20C22,9%2022,12%2024,12%20L24,18%20L0,18%20Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.eyebrow.light{color:var(--gold-300)}
.sec{padding:clamp(2.9rem,6vw,5rem) 0}
.sec-head{max-width:62ch;margin-bottom:clamp(1.7rem,3.5vw,2.6rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow::after{left:50%;transform:translateX(-50%)}
.sec-sub{font-size:1.06rem;color:var(--ink-2);margin:0}
.sec-soft{background:var(--bg-soft)}
.sec-navy{background:var(--navy);color:#e8eff7}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy p{color:#c2d3e5}
.lede{font-size:clamp(1.06rem,1rem + .3vw,1.2rem);color:var(--ink-2);max-width:60ch}

/* -------------------------------------------------- HERO (home) */
.hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-600) 58%,var(--blue-600) 130%);
  color:#fff;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;right:-14%;bottom:-42%;width:min(760px,86vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(29,116,184,.24),transparent 66%);z-index:-1;pointer-events:none}
.hero::before{content:"";position:absolute;left:-10%;top:-30%;width:min(560px,70vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(29,116,184,.5),transparent 68%);z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  padding-block:clamp(2.6rem,5.5vw,4.6rem) clamp(3.2rem,6vw,5rem)}
.hero-grid>*{min-width:0}
.hero h1{color:#fff}
.hero .lede{color:#cfe0f0;max-width:56ch}
.hero-rule{width:150px;height:5px;border-radius:3px;margin:0 0 1.5rem;
  background:linear-gradient(90deg,var(--red) 0 34%,var(--gold) 34% 67%,var(--blue) 67% 100%)}
.hero-media{position:relative}
.hero-media img{border-radius:var(--r);box-shadow:0 30px 60px -26px rgba(0,0,0,.6);width:100%;
  aspect-ratio:16/10;object-fit:cover}
.hero-badge{position:absolute;left:-14px;bottom:-18px;background:#fff;color:var(--navy);border-radius:var(--r-s);
  padding:.8rem 1.05rem;box-shadow:var(--sh-l);display:flex;align-items:center;gap:.65rem;max-width:min(280px,80%)}
.hero-badge .ic{width:2rem;height:2rem;color:var(--red-700);flex:none}
.hero-badge strong{display:block;font-family:var(--head);font-weight:700;font-size:1.02rem;line-height:1.2}
.hero-badge span{font-size:.8rem;color:var(--ink-2);line-height:1.35;display:block}
.trust-strip{display:flex;flex-wrap:wrap;gap:.55rem 1.3rem;list-style:none;margin:1.5rem 0 0;padding:0}
.trust-strip li{display:flex;align-items:center;gap:.42rem;font-size:.88rem;font-weight:600;margin:0;color:var(--ink-2)}
.trust-strip .ic{color:var(--red-700);width:1.05rem;height:1.05rem}
.hero .trust-strip li{color:#d6e5f3}
.hero .trust-strip .ic{color:var(--gold)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;padding-block-end:clamp(2.6rem,7vw,3.6rem)}
  .hero-media{order:-1}
  .hero-badge{left:auto;right:10px;bottom:-14px;max-width:70%}
}

/* -------------------------------------------------- PAGE HERO (inner pages) */
.page-hero{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-600) 100%);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.page-hero::after{content:"";position:absolute;right:-16%;bottom:-46%;width:min(620px,80vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(29,116,184,.2),transparent 68%);z-index:-1}
.ph-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  padding-block:clamp(2.2rem,4.5vw,3.6rem) clamp(2.4rem,5vw,3.8rem)}
.ph-grid>*{min-width:0}
.page-hero:not(.has-media) .ph-grid{grid-template-columns:1fr}
.page-hero:not(.has-media) .ph-copy{max-width:74ch}
.page-hero h1{color:#fff;margin-bottom:.55rem}
.page-hero .lede{color:#cfe0f0}
.page-hero .trust-strip li{color:#d6e5f3}
.page-hero .trust-strip .ic{color:var(--gold)}
.ph-media img{border-radius:var(--r);box-shadow:0 26px 52px -24px rgba(0,0,0,.6);width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.ph-grid{grid-template-columns:1fr}.ph-media{order:-1}}

/* -------------------------------------------------- BREADCRUMBS */
.crumbs{background:var(--bg-soft);border-bottom:1px solid var(--line-2);font-size:.83rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.3rem .55rem;list-style:none;margin:0;padding:.7rem 0}
.crumbs li{margin:0;color:var(--ink-3);display:flex;align-items:center;gap:.55rem}
.crumbs li+li::before{content:"›";color:var(--ink-3);opacity:.7}
.crumbs a{color:var(--ink-2);text-decoration:none;font-weight:500}
.crumbs a:hover{color:var(--gold-700);text-decoration:underline}
.crumbs [aria-current]{color:var(--navy);font-weight:600}

/* -------------------------------------------------- GRIDS + CARDS */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.5rem)}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1240px){.grid-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grid-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--blue);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s ease;box-shadow:var(--sh)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-l);border-top-color:var(--red)}
.card-media{display:block;overflow:hidden;background:var(--bg-soft)}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.card:hover .card-media img{transform:scale(1.035)}
.card-body{padding:1.2rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.4rem}
.card-body h3 a{color:var(--navy);text-decoration:none}
.card-body h3 a:hover{color:var(--gold-700)}
.card-body p{font-size:.94rem;color:var(--ink-2);margin-bottom:.9rem}
.card-link{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;font-family:var(--head);font-weight:700;
  font-size:.88rem;color:var(--gold-700);text-transform:uppercase;letter-spacing:.055em}
.card:hover .card-link .ic{transform:translateX(4px)}
.card-link .ic{transition:transform .18s ease;width:1rem;height:1rem}
.size-card{border-top-color:var(--red)}
.size-badge{background:var(--navy);color:#fff;display:flex;align-items:baseline;justify-content:center;gap:.35rem;padding:1.05rem}
.size-badge strong{font-family:var(--head);font-size:2.35rem;font-weight:800;line-height:1;color:var(--gold)}
.size-badge span{font-family:var(--head);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.1em}
.spec{list-style:none;padding:0;margin:0 0 .9rem;font-size:.88rem}
.spec li{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .42rem;color:var(--ink-2)}
.spec .ic{color:var(--blue);margin-top:.16em}

/* -------------------------------------------------- FEATURE LIST */
.feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
.feats>li{min-width:0}
@media (max-width:1000px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.feats{grid-template-columns:1fr}}
.feat{display:flex;gap:.95rem;margin:0}
/* SAWTOOTH-FACTORY-ROOFLINE tile — a `clip-path: polygon(...)` zigzag cut
   into just the TOP ~22% of an otherwise solid square, evoking the real
   sawtooth-roof furniture-factory buildings that gave Rockford its
   "Furniture City" skyline (built by Swedish immigrant worker
   cooperatives, angled north-facing glazing along the ridge). The notch
   is kept deliberately shallow — max cut depth 24% of the tile height —
   so a centered icon glyph (roughly the middle 29%-71% of the box) sits
   entirely on solid fill, never in the cut-out gap; a prior build in
   this portfolio first shipped this motif with too large a notch and
   had to fix it, so this one is checked against that failure mode. */
.feat-ic{flex:none;width:54px;height:54px;background:linear-gradient(155deg,var(--navy) 0%,var(--blue) 100%);color:#fff;
  clip-path:polygon(0% 100%,0% 24%,12.5% 6%,25% 24%,37.5% 6%,50% 24%,62.5% 6%,75% 24%,87.5% 6%,100% 24%,100% 100%);
  display:grid;place-items:center}
.feat-ic .ic{width:1.5rem;height:1.5rem}
.feat h3{margin-bottom:.3rem}
.feat p{font-size:.94rem;color:var(--ink-2);margin:0}
.sec-navy .feat-ic{background:var(--gold);color:var(--navy)}
.sec-navy .feat p{color:#bccfe2}

/* -------------------------------------------------- STEPS */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.15rem;counter-reset:s}
.step{display:flex;gap:1.05rem;margin:0;background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);
  border-radius:var(--r-s);padding:1.15rem 1.3rem}
.step-n{flex:none;width:42px;height:42px;background:var(--red);color:#fff;
  border-radius:10px;
  font-family:var(--head);font-weight:700;font-size:1.15rem;display:grid;place-items:center}
.step h3{margin-bottom:.25rem}
.step p{margin:0;font-size:.95rem;color:var(--ink-2)}
@media (min-width:800px){.steps{grid-template-columns:repeat(2,1fr)}.step:last-child:nth-child(odd){grid-column:1/-1}}

/* -------------------------------------------------- SPLIT / PROSE BLOCKS */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.split>*{min-width:0}
.split.rev .split-media{order:2}
.split-media img{border-radius:var(--r);box-shadow:var(--sh-l);width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev .split-media{order:-1}}
.rich,.prose,.article{overflow-wrap:break-word}
.rich a,.prose a{overflow-wrap:anywhere}
.rich>h2{margin-top:2.2rem}
.rich>h2:first-child{margin-top:0}
.rich>h3{margin-top:1.7rem}
.rich ul li::marker{color:var(--red)}
.checks{list-style:none;padding:0}
.checks li{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .55rem;min-width:0;overflow-wrap:anywhere}
.checks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231D74B8'%3E%3Cpath d='M9.6 16.8 5 12.2l1.4-1.4 3.2 3.2 8-8L19 7.4z'/%3E%3C/svg%3E");
  background-size:16px;background-repeat:no-repeat;background-position:center;margin-top:.16em}

/* -------------------------------------------------- TABLES */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.93rem}
.tbl-compare{min-width:720px}
caption{caption-side:top;text-align:left;padding:.85rem 1rem;font-size:.85rem;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
th,td{padding:.78rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
thead th{background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;font-size:.83rem;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:0}
tbody th{font-family:var(--head);font-weight:700;color:var(--navy);white-space:nowrap}
tbody tr:nth-child(even){background:var(--bg-soft)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tr.hl{background:var(--red-100)!important}
tr.hl th a{color:var(--red-700)}

/* -------------------------------------------------- FAQ */
.faq-list{max-width:900px;margin-inline:auto;display:grid;gap:.7rem}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.faq[open]{border-color:var(--blue);box-shadow:var(--sh)}
.faq summary{cursor:pointer;list-style:none;padding:1.02rem 3.1rem 1.02rem 1.2rem;font-family:var(--head);
  font-weight:500;font-size:1.02rem;color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.15rem;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--red-700);border-bottom:2.5px solid var(--red-700);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{background:var(--bg-soft)}
.faq-a{padding:0 1.2rem 1.15rem;color:var(--ink-2)}
.faq-a p:last-child{margin:0}

/* -------------------------------------------------- QUOTES */
.quotes .quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;margin:0;
  display:flex;flex-direction:column;box-shadow:var(--sh)}
.stars{display:flex;gap:.1rem;color:var(--red);margin-bottom:.7rem}
.stars .ic{width:1.05rem;height:1.05rem}
.quote blockquote{margin:0 0 1rem;padding:0;flex:1}
.quote blockquote p{font-size:.95rem;color:var(--ink-2);margin:0;font-style:italic}
.quote figcaption{font-size:.85rem;border-top:1px solid var(--line-2);padding-top:.8rem}
.quote figcaption strong{display:block;color:var(--navy);font-family:var(--head);font-weight:700}
.quote figcaption span{color:var(--ink-3);font-size:.8rem}

/* -------------------------------------------------- AREAS */
.areas-lede{max-width:70ch;color:var(--ink-2)}
.area-list{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.area-list>li{min-width:0;margin:0}
@media (max-width:900px){.area-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.area-list{grid-template-columns:1fr}}
.area-list a,.area-cur{display:flex;align-items:center;gap:.5rem;padding:.72rem .9rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-s);font-weight:600;font-size:.93rem;
  color:var(--navy);text-decoration:none;transition:.15s}
.area-list a:hover{border-color:var(--red);background:var(--red-100);color:var(--red-700);transform:translateY(-2px)}
.area-list .ic{color:var(--blue);flex:none}
.area-cur{background:var(--navy);color:#fff;border-color:var(--navy)}

/* -------------------------------------------------- CTA BAND */
.cta-band{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-600) 100%);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta-band::after{content:"";position:absolute;left:-8%;top:-60%;width:min(560px,70vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(29,116,184,.34),transparent 66%);z-index:-1}
.cta-in{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.4rem,3.5vw,2.6rem);align-items:center}
.cta-in>*{min-width:0}
.cta-band h2{color:#fff;margin-bottom:.5rem}
.cta-band p{color:#c8daec;margin:0;max-width:60ch}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.cta-note{font-size:.85rem;color:#a9c1d8!important}
@media (max-width:800px){.cta-in{grid-template-columns:1fr}}

/* -------------------------------------------------- BLOG */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.7rem)}
.post-grid>*{min-width:0}
@media (max-width:1000px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
.post-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:var(--ink-3);margin:0 0 .55rem;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.article{max-width:820px;margin-inline:auto}
.article-hero img{width:100%;border-radius:var(--r);aspect-ratio:16/9;object-fit:cover;box-shadow:var(--sh-l);margin-bottom:1.8rem}
.prose{font-size:1.055rem}
.prose h2{margin:2.3rem 0 .7rem;padding-top:.3rem}
.prose h3{margin:1.85rem 0 .55rem}
.prose ul,.prose ol{margin-bottom:1.2rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--red)}
.prose table{margin:1.5rem 0;font-size:.92rem}
.prose blockquote{margin:1.6rem 0;padding:1rem 1.3rem;background:var(--blue-100);border-left:4px solid var(--blue);
  border-radius:0 var(--r-s) var(--r-s) 0;color:var(--navy)}
.prose blockquote p:last-child{margin:0}
.prose a{font-weight:600}
.toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.35rem;margin:0 0 2rem}
.toc h2{font-size:1rem;margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.08em}
.toc ul{margin:0;padding-left:1.1rem;font-size:.94rem;columns:2;column-gap:1.6rem}
@media (max-width:620px){.toc ul{columns:1}}
.author-box{display:flex;gap:1rem;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r);padding:1.2rem 1.35rem;margin:2.4rem 0 0}
.author-box .ic{width:2.6rem;height:2.6rem;color:var(--blue);flex:none}
.author-box p{margin:0;font-size:.92rem;color:var(--ink-2)}
.author-box strong{display:block;font-family:var(--head);font-weight:700;font-size:1.02rem;color:var(--navy)}

/* -------------------------------------------------- CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.contact-grid>*{min-width:0}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.call-card{background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(1.5rem,3.5vw,2.3rem);text-align:center}
.call-card h2{color:#fff}
.call-card p{color:#c2d3e5}
.call-num{display:inline-block;font-family:var(--head);font-weight:800;font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);
  color:#fff;text-decoration:none;letter-spacing:-.02em;margin:.4rem 0 1rem;border-bottom:3px solid var(--red)}
.call-num:hover{color:var(--red-100);border-bottom-color:#fff}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.info-list li{display:flex;gap:.85rem;margin:0;min-width:0}
.info-list li>div{min-width:0;overflow-wrap:anywhere}
/* Shares the sawtooth-tile motif with .feat-ic (same clip-path silhouette,
   scaled down) so every "icon in a colored tile" moment on the site reads
   as one family — a lighter blue-tint fill here since this sits inside a
   plain white content column rather than a hero/feature panel. */
.info-list .ic{width:2.5rem;height:2.5rem;flex:none;padding:.55rem;background:var(--blue-100);color:var(--blue);
  clip-path:polygon(0% 100%,0% 24%,12.5% 6%,25% 24%,37.5% 6%,50% 24%,62.5% 6%,75% 24%,87.5% 6%,100% 24%,100% 100%)}
.info-list strong{display:block;font-family:var(--head);font-weight:700;color:var(--navy);margin-bottom:.1rem}
.info-list a{color:var(--blue-600);font-weight:600;overflow-wrap:anywhere}
.map-embed{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);line-height:0;background:var(--bg-soft)}
.map-embed iframe{width:100%;height:360px;border:0;display:block}

/* -------------------------------------------------- FOOTER */
.site-footer{background:var(--navy);color:#b9cde1;margin-top:0;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.25fr;gap:clamp(1.6rem,3vw,2.6rem);
  padding:clamp(2.6rem,5vw,4rem) var(--pad) 2rem}
.foot-grid>*{min-width:0}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{height:auto;width:min(280px,100%);margin-bottom:1rem;display:block;background:#fff;padding:.7rem .9rem;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.foot-blurb{color:#a9c1d8;max-width:44ch}
.foot-h{font-family:var(--head);font-size:.87rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:#fff;margin:0 0 .95rem;padding-bottom:.5rem;border-bottom:2px solid var(--red);display:inline-block}
.foot-h.mt{margin-top:1.7rem}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin:0 0 .48rem}
.foot-col a,.nap a{color:#b9cde1;text-decoration:none}
.foot-col a:hover,.nap a:hover,.socials a:hover{color:var(--gold);text-decoration:underline}
.two-col{columns:2;column-gap:1.2rem}
@media (max-width:600px){.two-col{columns:1}}
.nap{font-style:normal;display:grid;gap:.6rem;margin:1.1rem 0}
.nap-line{display:flex;gap:.6rem;align-items:flex-start;overflow-wrap:anywhere}
.nap-line .ic{color:var(--gold);margin-top:.22em;flex:none}
.socials{display:flex;gap:1rem;font-weight:600}
.socials a{color:#b9cde1;text-decoration:none}
.foot-map{padding:0 var(--pad) 2.4rem}
.foot-map iframe{width:100%;height:280px;border:0;border-radius:var(--r);filter:grayscale(.25)}
.foot-bar{border-top:1px solid rgba(255,255,255,.14)}
.foot-bar-in{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;padding:1.15rem var(--pad);font-size:.83rem}
.foot-bar p{margin:0;color:#94adc6}
.foot-bar a{color:#b9cde1;text-decoration:none}
.foot-bar a:hover{color:var(--gold)}

/* -------------------------------------------------- STICKY CALL BAR */
.callbar{display:none}
@media (max-width:820px){
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:57;padding:.5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:.55rem;background:var(--red);color:#fff;
    font-family:var(--head);font-weight:700;font-size:1.02rem;padding:.82rem;border-radius:999px;text-decoration:none}
  body{padding-bottom:74px}
}

/* -------------------------------------------------- MISC */
.notice{background:var(--blue-100);border-left:4px solid var(--blue);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:1rem 1.25rem;margin:1.6rem 0;color:var(--navy)}
.notice p:last-child{margin:0}
.err-wrap{text-align:center;padding:clamp(3rem,9vw,6rem) 0}
.err-code{font-family:var(--head);font-weight:800;font-size:clamp(4.5rem,16vw,9rem);line-height:1;color:var(--blue-100);margin:0}
.pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--blue-100);color:var(--blue-600);
  font-weight:700;font-size:.78rem;padding:.3rem .75rem;border-radius:999px;text-transform:uppercase;letter-spacing:.07em}
.rel-links{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding:0;margin:1.2rem 0 0}
.rel-links li{margin:0}
.rel-links a{display:inline-block;padding:.5rem .95rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;font-size:.89rem;font-weight:600;color:var(--navy);text-decoration:none}
.rel-links a:hover{border-color:var(--red);color:var(--red-700);background:var(--red-100)}

/* -------------------------------------------------- SIGNATURE: river-ripple divider
   Two layered, independently-tiling SVG wave bands stand in for a flat
   rail/tick divider — a softer, semi-transparent BLUE wave riding along
   the top of the band, a crisper solid NAVY wave along the bottom,
   evoking the Rock River running through downtown Rockford. Each wave is
   a small, self-contained filled "ribbon" path built from smooth cubic
   beziers whose start/end points share the same baseline y — so the
   SVG's own viewBox already contains a whole number of periods and every
   tile-edge lines up with the next, no seam, at any background-size the
   two layers are scaled to. Two separate rhythms (a 4-bump navy tile and
   a 2-bump blue tile, different widths) keep the two layers from ever
   repeating in lockstep, so the divider reads as real layered water
   rather than one flat pattern doubled. */
.gable{position:absolute;left:0;right:0;bottom:0;height:24px;z-index:1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%231D74B8'%20fill-opacity='.5'%20d='M0,14%20C3,14%203,10%206,10%20C9,10%209,14%2012,14%20C15,14%2015,10%2018,10%20C21,10%2021,14%2024,14%20L24,20%20L0,20%20Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2020'%3E%3Cpath%20fill='%230F4A7A'%20d='M0,12%20C2,12%202,9%204,9%20C6,9%206,12%208,12%20C10,12%2010,9%2012,9%20C14,9%2014,12%2016,12%20C18,12%2018,9%2020,9%20C22,9%2022,12%2024,12%20L24,18%20L0,18%20Z'/%3E%3C/svg%3E");
  background-repeat:repeat-x,repeat-x;
  background-size:96px 20px,72px 16px;
  background-position:top left,bottom left}
.page-hero,.hero{padding-bottom:28px}
@media (max-width:640px){
  .gable{height:16px;background-size:64px 14px,48px 11px}
  .page-hero,.hero{padding-bottom:18px}
}

.site-header{position:relative}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2020'%3E%3Cpath%20fill='%230F4A7A'%20d='M0,12%20C2,12%202,9%204,9%20C6,9%206,12%208,12%20C10,12%2010,9%2012,9%20C14,9%2014,12%2016,12%20C18,12%2018,9%2020,9%20C22,9%2022,12%2024,12%20L24,18%20L0,18%20Z'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:36px 10px;background-position:bottom left}
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;pointer-events:none;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%231D74B8'%20d='M0,14%20C3,14%203,10%206,10%20C9,10%209,14%2012,14%20C15,14%2015,10%2018,10%20C21,10%2021,14%2024,14%20L24,20%20L0,20%20Z'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:48px 10px;background-position:top left}

/* Google's map iframe will not render from file:// — the client double-clicks
   index.html and sees a broken-image box. The fallback sits behind it and is
   invisible once the iframe actually loads online. */
.map-wrap{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px}
.map-fallback{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35rem;text-align:center;padding:1.4rem;
  background:var(--navy-600);color:#fff}
.map-fallback p{margin:0;color:#fff;opacity:.95}
.map-fallback p strong{color:#fff;font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.map-fallback a{color:#fff;text-decoration:underline;font-weight:600}
.map-wrap iframe{position:relative;z-index:2;display:block;width:100%;height:320px;border:0}