/* ============================================================
   Briggs Brothers Dumpster Rental Appleton — Appleton, WI / Outagamie
   County / Fox Cities. Single stylesheet. Brand colors in :root.
   Technical/responsive foundation ported from the LCR Dumpster Rental
   Lancaster build (breakpoints, grid mechanics, burger/off-canvas
   nav, FAQ accordion, table-scroll, callbar) — visual identity built fresh.
   ============================================================ */
:root{
  /* Navy (#184884) sampled straight from the supplied Briggs Brothers
     logo's solid fill; blue (#2E6099) is a brighter tint derived from that
     navy, used for secondary accents/hover states. The CTA is a fresh
     third color — a deepened SAFETY ORANGE #B44614 — tied to the real
     hi-vis orange work vests visible in the supplied "Team onsite" crew
     photo, a genuine detail from this business's own jobsite photography
     rather than an invented theme.
     CONTRAST (computed via the standard WCAG relative-luminance function,
     never eyeballed): orange #B44614 against WHITE text clears 5.49:1 (AA,
     past the 4.5:1 floor) — every CTA-colored button/pill/badge in this
     file uses WHITE text on the orange fill, no navy-text swap needed. The
     hover shade --red-600 (#8C3610, darker) holds 7.93:1 with white text.
     Orange 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 (#78300D) instead — 9.57:1 on white,
     comfortably past AAA — full-strength orange stays for decorative
     icon/border/focus-ring use where it isn't held to text-contrast
     rules. --gold (#E0864A, a lighter decorative amber tint of the same
     safety-orange family) 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 (fails AA badly at full strength). Where gold needs to read as
     small TEXT on a light background (link hover), a darker text-safe
     shade --gold-700 (#96521A) is used instead — 6.08:1 on white.
     Full-strength --gold on navy clears only 3.5:1 or so — 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 (#F0AF73) instead, which
     clears 4.82:1 against navy. Navy on white clears 9.13:1 and blue on
     white clears well past AA — both pass on their own, no workaround
     needed.
     The Fox Valley's river/industrial identity drives the signature
     motifs: a ROLL-OFF SILHOUETTE eyebrow tick — a short container-outline
     underline (CSS mask + SVG path, recolorable via currentColor-adjacent
     background-color) evoking the dumpster silhouette in the Briggs
     Brothers logo mark, a HI-VIS STRIPE icon tile built from a repeating
     diagonal two-tone clip-path — evoking the reflective safety-vest
     striping visible in the crew photos, and a repeating FOX 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 real Fox River that runs through
     Appleton and every Fox Cities town this site serves. */
  --navy:#184884; --navy-800:#0F3160; --navy-600:#3B6FB0;
  --blue:#2E6099; --blue-600:#234B79; --blue-100:#E8EEF6;
  --red:#B44614; --red-600:#8C3610; --red-700:#78300D; --red-100:#FBEEE7;
  --gold:#E0864A; --gold-700:#96521A; --gold-300:#F0AF73;
  --ink:#182430; --ink-2:#48565f; --ink-3:#71818b;
  --bg:#fff; --bg-soft:#f1f4f7; --bg-deep:var(--navy);
  --line:#dce3ea; --line-2:#eaeef3;
  --head:'Poppins',Impact,'Arial Narrow',sans-serif;
  --sans:'Inter',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(24,72,132,.06),0 8px 24px -12px rgba(24,72,132,.18);
  --sh-l:0 2px 4px rgba(24,72,132,.05),0 22px 48px -20px rgba(24,72,132,.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}
/* Poppins loads real 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(20,85,140,.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(20,85,140,.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
   KAW RIVER RIPPLE tick: a short wavy underline sitting beneath the eyebrow
   label, evoking the Kaw 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}
/* HI-VIS STRIPE tile — a `clip-path: polygon(...)` zigzag cut into just the
   TOP ~22% of an otherwise solid square, evoking a row of diagonal safety
   striping or a container-lip roofline — a light nod to the real hi-vis
   orange work vests visible in the supplied crew photos, a natural fit
   for the shape itself since the clip-path is a literal repeating
   zigzag. 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='%23276BA4'%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 wheat-row 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: fox-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 real Fox River running through Appleton and every Fox
   Cities town this site serves. 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='%23276BA4'%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='%2314558C'%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='%2314558C'%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='%23276BA4'%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}