/* ============================================================
   TCS Dumpster Rental — Stuart, FL / Martin County (Treasure Coast).
   Single stylesheet. Brand colors in :root. Technical/responsive
   foundation ported from the JK/SCA/Emerald Gulf/Staten Island/Hoult
   Bros build lineage (breakpoints, grid mechanics, burger/off-canvas
   nav, FAQ accordion, table-scroll, callbar) — visual identity built
   fresh for this build's own logo and Stuart's Treasure Coast /
   St. Lucie River / Sailfish Capital setting.
   ============================================================ */
:root{
  /* Navy (#0A2C5C) and blue (#0F5AA8) sampled directly from the supplied
     logo via a Python pixel-histogram survey of the source webp (dominant
     dark-navy inner-circle fill and lighter blue outer-ring accent
     respectively) — NOT eyeballed. --blue-600 (#0B4683) is a darker
     derived shade for hover/accent states.
     The CTA is a fresh third color — a warm sunset-coral tone, drawing on
     Stuart's Treasure Coast sunsets over the St. Lucie River — not drawn
     from the logo's own navy/blue/white palette, chosen for AA contrast
     and deliberately a different hue family from this portfolio's other
     Florida builds' CTA colors. CONTRAST (computed via the standard WCAG
     relative-luminance function, never eyeballed): coral #C4471F against
     WHITE text clears 4.92:1 (AA, past the 4.5:1 floor) — every
     CTA-colored button/pill/badge in this file uses WHITE text on the
     coral fill, no navy-text swap needed. The hover shade --red-600
     (#93350F, darker) holds 7.62:1 with white text. The CTA color 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 (#6B2710) instead — 10.92:1 on white, comfortably
     past AAA — full-strength coral stays for decorative icon/border/
     focus-ring use where it isn't held to text-contrast rules. --gold
     (repurposed here as a lagoon/estuary TEAL accent, #167A78, drawing on
     the real St. Lucie River / Indian River Lagoon waters that run
     through downtown Stuart — NOT sampled from the logo's own navy/blue/
     white palette, chosen fresh) is reserved for eyebrow-tick decoration,
     decorative icon fills on dark panels, and small accents — NEVER as a
     large background fill or as small body text directly on white where
     it would sit below the 4.5:1 floor at full strength (full-strength
     teal on white is 5.14:1, fine for larger text/icons, but the
     dedicated text-safe shade is used for small text regardless). Where
     it needs to read as small TEXT on a light background (link hover), a
     darker text-safe shade --gold-700 (#0D4A48) is used instead — 10.05:1
     on white. Full-strength --gold used decoratively on navy sits at
     2.68:1 (fine for large icon fills, not for body text there), 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 (#BFDAD9) instead — 9.32:1 against navy. Navy on white
     clears 13.75:1 and the sampled blue on white clears 6.89:1 — both
     pass on their own, no workaround needed.
     Stuart's identity drives the signature motifs: a gentle WAVE eyebrow
     tick — a short repeating tidal-wave underline (CSS mask + SVG path,
     recolorable via currentColor-adjacent background-color) echoing the
     St. Lucie River/Indian River Lagoon and the logo's own arrow-and-
     dumpster motif (genuinely appropriate here, not a borrowed motif); a
     coral icon tile echoing the CTA tone; and the layered waterline
     divider below the hero (see the .gable comment further down this
     file) recolored to this build's own navy/blue, rather than a
     mountain-ridge, brick-coursing or palm-frond motif (all already used
     by sibling builds elsewhere in this portfolio). Card components use a
     plain solid-color top border (var(--blue)) — no additional border
     texture is implemented in this file; do not describe one here that
     the CSS does not actually render. */
  --navy:#0A2C5C; --navy-800:#071E40; --navy-600:#4C6690;
  --blue:#0F5AA8; --blue-600:#0B4683; --blue-100:#DDE7F2;
  --red:#C4471F; --red-600:#93350F; --red-700:#6B2710; --red-100:#F6E3DD;
  --gold:#167A78; --gold-700:#0D4A48; --gold-300:#BFDAD9;
  --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(10,44,92,.06),0 8px 24px -12px rgba(10,44,92,.18);
  --sh-l:0 2px 4px rgba(10,44,92,.05),0 22px 48px -20px rgba(10,44,92,.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(11,61,110,.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(11,61,110,.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
   WAVE-LINE tick: a short wavy underline sitting beneath the
   eyebrow label, evoking Stuart's real St. Lucie River / Indian River
   Lagoon waterfront setting — 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(24,140,224,.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(24,140,224,.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(24,140,224,.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}
/* ROLL-OFF RIB ZIGZAG tile — a `clip-path: polygon(...)` zigzag cut into
   just the TOP ~22% of an otherwise solid square, evoking a row of
   diagonal container-lip ribbing — a nod to the real corrugated,
   ribbed steel side panels visible on every supplied dumpster photo, 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='%230F5AA8'%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(24,140,224,.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: waterline divider
   Two layered, independently-tiling SVG wave bands stand in for a flat
   rail/tick divider — a softer, semi-transparent BLUE band riding along
   the top, a crisper solid NAVY band along the bottom, evoking Stuart's
   real St. Lucie River / Indian River Lagoon waterline (this build's own
   navy/blue, recolored from this file's shared inherited base — see the
   :root comment above and the fill hex values just below). 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='%230F5AA8'%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='%230A2C5C'%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='%230A2C5C'%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='%230F5AA8'%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}