/* ============================================================
   CGS Dumpster Rental Columbus — Columbus, GA / Muscogee County /
   Chattahoochee Valley. Single stylesheet. Brand colors in :root.
   Technical/responsive foundation ported from the Briggs Brothers
   Dumpster Rental Appleton build, itself descended 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 (#0B3D6E) and blue (#1269BB) sampled straight from the supplied
     CGS logo's shield fill (the deep navy body and the brighter blue
     inner panel). The CTA is a fresh third color — a deepened TERRACOTTA
     / GEORGIA RED-CLAY tone #A8481E — evoking the region's namesake red
     clay soil (a defining, literal feature of the Chattahoochee Valley /
     Piedmont clay belt this business serves), not drawn from the supplied
     photography since the crew's navy polos carry no accent color of
     their own to sample from.
     CONTRAST (computed via the standard WCAG relative-luminance function,
     never eyeballed): red-clay #A8481E against WHITE text clears 5.82:1
     (AA, past the 4.5:1 floor) — every CTA-colored button/pill/badge in
     this file uses WHITE text on the clay fill, no navy-text swap needed.
     The hover shade --red-600 (#843815, darker) holds 8.21:1 with white
     text. Clay 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 (#6B2D10) instead — 10.46:1
     on white, comfortably past AAA — full-strength clay stays for
     decorative icon/border/focus-ring use where it isn't held to
     text-contrast rules. --gold (#D98A3D, a lighter decorative amber tint
     of the same clay 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 (#8F5620) is used instead — 5.97:1 on white.
     Full-strength --gold on navy clears only 4.0: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 (#EBAF6E) instead, which
     clears 5.71:1 against navy. Navy on white clears 11.01:1 and blue on
     white clears 5.58:1 — both pass on their own, no workaround needed.
     The Chattahoochee Valley 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 CGS logo
     mark; a ROLL-OFF RIB ZIGZAG icon tile built from a repeating diagonal
     two-tone clip-path — evoking the corrugated ribbed steel side panels
     visible on every supplied dumpster photo, a genuine detail from this
     business's own equipment photography rather than an invented theme;
     and a repeating CHATTAHOOCHEE 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
     Chattahoochee River that runs along Columbus's western edge and past
     Fort Benning, Cusseta, and Upatoi. */
  --navy:#0B3D6E; --navy-800:#082A4D; --navy-600:#1C5A99;
  --blue:#1269BB; --blue-600:#0E5292; --blue-100:#E7F0F9;
  --red:#A8481E; --red-600:#843815; --red-700:#6B2D10; --red-100:#FBEDE5;
  --gold:#D98A3D; --gold-700:#8F5620; --gold-300:#EBAF6E;
  --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(11,61,110,.06),0 8px 24px -12px rgba(11,61,110,.18);
  --sh-l:0 2px 4px rgba(11,61,110,.05),0 22px 48px -20px rgba(11,61,110,.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
   CHATTAHOOCHEE RIPPLE tick: a short wavy underline sitting beneath the
   eyebrow label, evoking the Chattahoochee 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(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='%232E86C7'%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: chattahoochee-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 Chattahoochee River running along Columbus's western
   edge and past Fort Benning, Cusseta, and Upatoi. 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='%232E86C7'%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='%230E4E86'%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='%230E4E86'%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='%232E86C7'%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}