/* ============================================================
   Knox & Sons Dumpster Rental Topeka — Topeka, KS / Shawnee County
   "Sunflower Capital" identity. Single stylesheet. Brand colors in :root.
   Technical/responsive foundation ported from the Tate & Sons Dumpster
   Rental Rockford build (breakpoints, grid mechanics, burger/off-canvas
   nav, FAQ accordion, table-scroll, callbar) — visual identity built fresh.
   ============================================================ */
:root{
  /* Navy (#14558C) sampled straight from the supplied Knox & Sons logo's
     solid fill; blue (#276BA4) is a brighter tint derived from that navy,
     used for secondary accents/hover states. The CTA is a fresh third
     color — FLINT HILLS EMBER #C1442E — tied to the real springtime
     controlled burns across the Flint Hills tallgrass prairie east of
     Topeka, a defining, widely-documented Kansas landscape event.
     CONTRAST (computed via the standard WCAG relative-luminance function,
     never eyeballed): red #C1442E against WHITE text clears 5.08:1 (AA,
     past the 4.5:1 floor) — every CTA-colored button/pill/badge in this
     file uses WHITE text on the red fill, no navy-text swap needed. The
     hover shade --red-600 (#9A3624, darker) holds 7.17:1 with white text.
     Red used as small TEXT directly on white (eyebrow labels, card-link
     labels, FAQ arrow, tr.hl highlighted-row link) uses a dedicated
     darker text-safe shade --red-700 (#6A2519) instead — 11.1:1 on white,
     comfortably past AAA — full-strength red stays for decorative
     icon/border/focus-ring use where it isn't held to text-contrast
     rules. --gold (#E3A527, "Capitol Dome Gold" — the real gilded bronze
     dome atop the Kansas State Capitol in downtown Topeka, doubling as a
     nod to the sunflower, Kansas's official state flower) 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 (#886317) is used
     instead — 5.46:1 on white. Full-strength --gold on navy clears only
     3.57:1 — fine for the (non-text) decorative tick/icon fills it's
     mostly used for, but short of the 4.5:1 small-text floor — so
     eyebrow LABEL TEXT sitting on a dark panel (hero, page-hero,
     cta-band, sec-navy, call-card, .eyebrow.light) uses a lighter
     --gold-300 (#ECC472) instead, which clears 4.69:1 against navy. Navy
     on white clears 7.76:1 and blue on white clears 5.64:1 — both pass AA
     on their own, no workaround needed.
     Topeka's civic/prairie identity drives the signature motifs: a
     CAPITOL-ARCH eyebrow tick — a short shallow dome-curve underline (CSS
     mask + SVG arch path, recolorable via currentColor-adjacent
     background-color) evoking the Kansas State Capitol dome, a
     WHEAT-ROW icon tile built from a clip-path polygon zigzag cut into
     just the top ~22% of the tile — evoking a row of wheat heads or a
     grain-elevator roofline, a light nod to Kansas's real "Wheat State"
     identity (kept shallow on purpose, matching the sibling build's
     lesson about not over-cutting this notch), and a repeating KAW 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 Kansas River (the Kaw) that runs
     along Topeka's north edge. */
  --navy:#14558C; --navy-800:#0D395F; --navy-600:#477AA5;
  --blue:#276BA4; --blue-600:#1F5786; --blue-100:#E5EDF4;
  --red:#C1442E; --red-600:#9A3624; --red-700:#6A2519; --red-100:#F8ECEA;
  --gold:#E3A527; --gold-700:#886317; --gold-300:#ECC472;
  --ink:#182430; --ink-2:#48565f; --ink-3:#71818b;
  --bg:#fff; --bg-soft:#f1f4f7; --bg-deep:var(--navy);
  --line:#dce3ea; --line-2:#eaeef3;
  --head:'Barlow Condensed',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(20,85,140,.06),0 8px 24px -12px rgba(20,85,140,.18);
  --sh-l:0 2px 4px rgba(20,85,140,.05),0 22px 48px -20px rgba(20,85,140,.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}
/* Barlow Condensed loads real 500/600/700/800 weight cuts (see
   common.py FONTS), so every heading-font element gets an explicit,
   deliberately-chosen weight rather than an inherited/default 400 —
   h1 goes heaviest (800) for hero impact, h2 drops to 700, h3/h4 settle
   at 600 for a still-sturdy but less shouty subhead weight. Anywhere a
   heading-styled element might otherwise inherit the base `strong{
   font-weight:700}` rule (hero-badge strong, size-badge strong, quote
   figcaption strong, author-box strong, info-list strong, map-fallback
   strong) gets its own explicit weight so the whole condensed-caps
   family reads at one consistent, intentional weight per role instead
   of drifting to whatever the wrapping tag happened to set. FAQ summary
   text uses weight 500 (the lightest loaded cut) rather than 400 (NOT
   loaded — would silently fall back to a faux-bold browser synthesis on
   a condensed display face) since it reads a full question sentence,
   not a heavy display heading. */
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.13;letter-spacing:-.018em;color:var(--navy);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.35rem + 2.7vw,3.35rem);font-weight:800}
h2{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.4rem);font-weight:700}
h3{font-size:clamp(1.13rem,1.02rem + .45vw,1.35rem);font-weight:600}
h4{font-weight:600}
p{margin:0 0 1.05em}
a{color:var(--blue-600);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--gold-700)}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin:0 0 .4em}
strong{font-weight:700;color:var(--navy)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}
.ic{width:1.15em;height:1.15em;flex:none}

/* -------------------------------------------------- HEADER */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(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}
/* WHEAT-ROW tile — a `clip-path: polygon(...)` zigzag cut into just the
   TOP ~22% of an otherwise solid square, evoking a row of wheat heads or
   a grain-elevator roofline — a light nod to Kansas's real, widely-known
   identity as "The Wheat State," 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: kaw-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 Kansas River (the Kaw) running along Topeka's north edge. 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}