/* PTT Dumpster Rental Pasadena — brand palette sampled directly from the supplied logo,
   a circular navy/light-blue badge with two real hues (confirmed via pixel-cluster grid
   sampling on the flood-filled, cropped logo): a deep navy (~#044477) and a lighter sky
   blue (~#50A1CD). --navy and --sky are those two sampled colors; --navy-900, --navy-700
   and --sky-light are colorsys-HLS lightness-adjusted derivatives (not independent
   samples), giving a full range for header/footer panels, hover states and body
   text-on-white use. navy clears WCAG AAA on white (10.01:1); --navy-900 clears AAA
   (15.06:1); --navy-700 (derived, lighten) clears AA (5.47:1) and is safe for body
   text/links; --sky-light (derived, lighten further) is decorative-only, not for text.
   --navy-050/--sky-050 are near-white tint backgrounds derived by setting HLS lightness
   to ~0.965 directly (a simple lightness delta left them too saturated/mid-tone on first
   attempt — fixed by setting lightness and saturation explicitly instead). CTA is a fresh
   "Tournament Rose" #B23A48 — tied to Pasadena's real Tournament of Roses / Rose Bowl local
   heritage (genuine local color, not a sports-team color) rather than to the logo's blue —
   a genuinely new color family for this build series, distinct from every prior sibling
   build's CTA. CONTRAST (WCAG relative-luminance function, not eyeballed): #B23A48 against
   WHITE text clears 5.85:1 (AA) — every CTA-colored button/pill in this file uses white
   text on this fill, no navy-text-on-CTA workaround needed. Fonts: Space Grotesk for
   headings, paired with Source Sans 3 for body text — a tested pairing reused from earlier
   builds in this series, chosen here for its clean geometric letterforms rather than for
   any local wordplay. The circular badge in the real logo is the visual seed for the
   eyebrow tick and card treatment throughout this file. */
:root{
  --navy:#044477; --navy-900:#022846; --navy-700:#066BBC; --navy-050:#F3F6F9;
  --sky:#50A1CD; --sky-light:#78B6D8; --sky-050:#F3F7F9;
  --red:#B23A48; --red-700:#8C2D38; --red-050:#FAF3F3;   /* CTA accent — Tournament Rose, DARK enough for white text */
  --ink:#0e1620; --body:#3d4a58; --muted:#68758a;
  --bg:#ffffff; --bg-soft:#f4f7fb; --bg-deep:#0A2E4D;
  --line:#dfe7f0; --line-soft:#eef2f7;
  --head:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:12px; --r-lg:18px; --r-sm:8px;
  --sh:0 1px 2px rgba(19,56,84,.06),0 4px 14px rgba(19,56,84,.07);
  --sh-lg:0 12px 40px rgba(19,56,84,.14);
  --wrap:1200px; --gut:clamp(16px,4vw,32px);
  --hdr:112px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.68;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,iframe{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.14;margin:0 0 .5em;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.05rem,1.35rem + 2.9vw,3.5rem);letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.5rem)}
h3{font-size:clamp(1.12rem,1rem + .5vw,1.35rem);font-weight:700}
p{margin:0 0 1.05em}
a{color:var(--navy-700);text-decoration-color:rgba(129,173,205,.45);text-underline-offset:3px}
a:hover{color:var(--red-700)}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:.35em 0}
strong{color:var(--ink);font-weight:700}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}
.brk{overflow-wrap:anywhere}

/* ---------- eyebrow (signature: accent slash tick) ---------- */
.eyebrow{font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-700);margin:0 0 .7em;display:flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:16px;height:9px;flex:none;
  background:linear-gradient(var(--red),var(--red)) top left/16px 3px no-repeat,
             linear-gradient(var(--red),var(--red)) bottom left/10px 3px no-repeat}
.center .eyebrow{justify-content:center}
.eyebrow.light{color:var(--sky-light)}
.eyebrow.light::before{background:linear-gradient(var(--sky),var(--sky)) top left/16px 3px no-repeat,linear-gradient(var(--sky),var(--sky)) bottom left/10px 3px no-repeat}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--head);font-weight:700;
  font-size:1.02rem;padding:15px 26px;border-radius:var(--r);text-decoration:none;border:2px solid transparent;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s;cursor:pointer;line-height:1.2;text-align:center}
.btn svg{width:20px;height:20px;flex:none}
.btn-cta{background:var(--red);color:#fff;box-shadow:0 4px 16px rgba(140,47,12,.34)}
.btn-cta:hover{background:var(--red-700);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(140,47,12,.42)}
.btn-lg{font-size:1.14rem;padding:18px 32px}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-900);color:#fff;transform:translateY(-2px)}
.btn-out{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-out:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 0 var(--line)}
.topbar{background:var(--navy-900);color:#d0deeb;font-size:.82rem}
.topbar-in{display:flex;gap:26px;align-items:center;justify-content:center;padding:8px 0;flex-wrap:wrap}
.topbar-item{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.topbar-item svg{width:15px;height:15px;color:var(--sky);flex:none}
.header-in{display:flex;align-items:center;gap:20px;padding:12px var(--gut);min-height:78px}
/* The real PTT Dumpster Rental Pasadena logo is a fully self-contained circular badge,
   navy and sky-blue (~#044477 / ~#50A1CD) throughout, on a near-pure-white background
   (flood-filled away via connected-component labeling on a near-white mask, corner-anchored,
   cropped to 500x502). Verified via alpha-channel bbox and corner/center alpha checks — it
   reads cleanly with no plate or background treatment needed. No navy plate behind the mark
   here. */
.brand{flex:none;display:flex;align-items:center;line-height:0}
.brand img{width:auto;height:52px}
.nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative}
.nav-list>li>a{display:block;padding:10px 12px;font-family:var(--head);font-weight:700;font-size:.94rem;color:var(--ink);text-decoration:none;border-radius:var(--r-sm);white-space:nowrap}
.nav-list>li>a:hover,.nav-list>li>a[aria-current]{color:var(--navy-700);background:var(--navy-050)}
.nav-list>li>a[aria-current]{box-shadow:inset 0 -3px 0 var(--red)}
.hero-sizes a:hover{background:var(--red);border-color:var(--red);color:#fff}
.hero-sizes a:hover strong{color:#fff}
.hero-sizes a:hover span{color:#fff}
.sub-toggle{display:none}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:7px;opacity:.55}
.sub{position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-lg);padding:8px;list-style:none;margin:0;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.16s;z-index:70;border-top:3px solid var(--red)}
.sub-wide{min-width:400px;columns:2;column-gap:6px}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub li{margin:0;break-inside:avoid}
.sub a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;color:var(--body);text-decoration:none}
.sub a:hover{background:var(--navy-050);color:var(--navy-700)}
.sub-all a{font-weight:700;font-family:var(--head);color:var(--navy-700);display:flex;align-items:center;gap:.4em;border-top:1px solid var(--line-soft);margin-top:4px;padding-top:11px;border-radius:0}
.sub-all svg{width:15px;height:15px}
.header-call{display:flex;align-items:center;gap:10px;background:var(--red);color:#fff;padding:10px 18px;border-radius:var(--r);text-decoration:none;flex:none;transition:.15s;box-shadow:0 3px 12px rgba(140,47,12,.3)}
.header-call:hover{background:var(--red-700);color:#fff;transform:translateY(-1px)}
.header-call svg{width:22px;height:22px;flex:none}
.hc-txt{display:flex;flex-direction:column;line-height:1.15}
.hc-txt small{font-size:.68rem;opacity:.92;letter-spacing:.03em}
.hc-txt strong{font-family:var(--head);font-size:1.05rem;color:var(--navy);white-space:nowrap}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;background:var(--navy-050);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;flex:none;padding:0 11px;position:relative;z-index:59}
.burger span{display:block;height:2.5px;background:var(--navy);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;background:rgba(19,56,84,.5);z-index:58}
.nav-close{display:none;position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:var(--r-sm);
  background:var(--navy-050);border:1px solid var(--line);cursor:pointer;z-index:3}
.nav-close span{position:absolute;left:11px;top:21px;width:22px;height:2.5px;background:var(--navy);border-radius:2px}
.nav-close span:first-child{transform:rotate(45deg)}
.nav-close span:last-child{transform:rotate(-45deg)}

@media (max-width:1180px){
  .nav-list>li>a{padding:10px 9px;font-size:.88rem}
  .hc-txt small{display:none}
}
@media (max-width:1100px){
  .burger{display:flex}
  .nav{position:fixed;top:0;right:0;width:min(360px,88vw);height:100dvh;background:#fff;box-shadow:var(--sh-lg);
    transform:translateX(100%);transition:transform .22s;z-index:62;overflow-y:auto;padding:84px 18px 120px;margin:0}
  .nav.open{transform:translateX(0)}
  .nav-close{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-list>li{border-bottom:1px solid var(--line-soft)}
  .nav-list>li>a{padding:14px 10px;font-size:1.02rem}
  .nav-list>li>a[aria-current]{box-shadow:none;background:var(--navy-050)}
  .has-sub>a::after{display:none}
  .sub-toggle{display:flex;align-items:center;justify-content:center;position:absolute;right:2px;top:5px;width:44px;height:44px;
    background:var(--navy-050);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;color:var(--navy)}
  .sub-toggle svg{width:18px;height:18px;transform:rotate(90deg);transition:.2s}
  .sub-toggle[aria-expanded="true"] svg{transform:rotate(-90deg)}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:0;
    display:none;padding:0 0 10px 10px;min-width:0;columns:1}
  .sub.open{display:block}
  .sub-wide{columns:1}
  .header-call .hc-txt{display:none}
  .header-call{padding:12px}
}
@media (max-width:560px){ .topbar-in{gap:14px;font-size:.74rem} .topbar-item:nth-child(3){display:none} }
@media (max-width:560px){.prose table{min-width:440px}.tbl-compare{min-width:600px}}
@media (max-width:430px){ .brand img{height:44px} .header-in{gap:10px;padding-inline:14px} }
@media (max-width:400px){ .topbar-item:nth-child(2){display:none} }

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(115deg,rgba(19,56,84,.96) 0%,rgba(38,113,169,.9) 46%,rgba(25,73,110,.78) 100%);z-index:2}
.hero::after{content:"";position:absolute;bottom:-30%;left:-10%;width:660px;height:660px;border-radius:50%;
  background:radial-gradient(circle,rgba(129,173,205,.38),transparent 68%);z-index:1;pointer-events:none}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:clamp(34px,4.5vw,64px);z-index:4;background:#fff;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V38c120 26 240 39 360 39s240-13 360-39 240-39 360-26 240 39 360 52v26Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V38c120 26 240 39 360 39s240-13 360-39 240-39 360-26 240 39 360 52v26Z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-in{position:relative;z-index:3;padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{color:#fff;margin-bottom:.42em}
.hero h1 em{font-style:normal;color:var(--sky-light)}
.hero .lede{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:#d5e2ed;max-width:60ch;margin-bottom:1.5em}
.hero-rule{width:150px;height:16px;margin:0 0 1.5em;
  background:linear-gradient(90deg,var(--red),rgba(140,47,12,0)) top left/150px 4px no-repeat,
             linear-gradient(90deg,var(--sky),rgba(129,173,205,0)) center left/110px 4px no-repeat,
             linear-gradient(90deg,var(--sky-light),rgba(164,195,219,0)) bottom left/70px 4px no-repeat}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:2em}
.hero-points{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.hero-points li{display:flex;align-items:flex-start;gap:.7em;color:#e0e9f2;font-size:.98rem;margin:0}
.hero-points strong,.hero-card strong,.phero strong,.sec-navy strong,.cta-band strong,.side-cta strong{color:#fff}
.sec-navy .checklist li::before{background:rgba(129,173,205,.22)}
.hero-points svg{width:19px;height:19px;color:var(--sky);flex:none;margin-top:3px}
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,30px);backdrop-filter:blur(6px)}
.hero-card h2{color:#fff;font-size:1.28rem;margin-bottom:.55em}
.hero-card p{color:#d5e2ed;font-size:.96rem}
.hero-sizes{list-style:none;padding:0;margin:0 0 1.2em;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media (max-width:430px){.hero-sizes{grid-template-columns:repeat(3,1fr)}}
.hero-sizes a{display:block;text-align:center;padding:13px 6px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm);color:#fff;text-decoration:none;transition:.15s}
.hero-sizes a:hover{background:var(--sky);border-color:var(--sky);color:#fff;transform:translateY(-2px)}
.hero-sizes strong{display:block;font-family:var(--head);font-size:1.22rem;font-weight:700;color:#fff}
.hero-sizes span{font-size:.72rem;color:#c4d5e6;letter-spacing:.05em;text-transform:uppercase}
.hero-sizes a:hover span{color:#f3f7fa}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;gap:34px}}

/* page hero (interior) */
.phero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.phero::after{content:"";position:absolute;bottom:-45%;left:-6%;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(129,173,205,.30),transparent 70%);z-index:0}
.phero-in{position:relative;z-index:2;padding:clamp(40px,5vw,72px) 0}
.phero-split .phero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.5vw,52px);align-items:center}
.phero h1{color:#fff;font-size:clamp(1.85rem,1.3rem + 2.2vw,2.95rem)}
.phero .lede{color:#d5e2ed;font-size:clamp(1rem,.97rem + .3vw,1.14rem);max-width:64ch}
.phero-img img{border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%}
.phero-stats{list-style:none;padding:0;margin:1.6em 0 0;display:flex;flex-wrap:wrap;gap:12px}
.phero-stats li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  padding:11px 18px;margin:0;display:flex;flex-direction:column}
.phero-stats strong{font-family:var(--head);font-size:1.3rem;color:#fff;line-height:1.1}
.phero-stats span{font-size:.79rem;color:#c4d5e6;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:820px){.phero-split .phero-in{grid-template-columns:1fr}.phero-img{order:-1}}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:11px 0;font-size:.84rem;color:var(--muted)}
.crumbs li{margin:0;display:flex;align-items:center;gap:.4em}
.crumbs li+li::before{content:"/";color:var(--line);font-weight:700}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--navy-700);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- sections ---------- */
.sec{padding:clamp(48px,5.5vw,86px) 0}
.sec-soft{background:var(--bg-soft)}
.sec-navy{background:var(--navy-900);color:#d5e2ed}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-head{margin:0 auto clamp(28px,3.5vw,48px);max-width:760px}
.sec-head.center{text-align:center}
.sec-head h2{margin-bottom:.35em}
.sec-sub{font-size:1.05rem;color:var(--muted);margin:0}
.sec-navy .sec-sub{color:#a9c2da}
.mt{margin-top:1.6em}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:clamp(14px,1.8vw,24px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,286px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.grid>*{min-width:0}
.card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px);text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .16s,box-shadow .16s,border-color .16s;box-shadow:var(--sh);min-width:0}
a.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-left-color:var(--navy-700)}
.card-ico{width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff;
  display:grid;place-items:center;margin-bottom:16px;flex:none}
.card-ico svg{width:26px;height:26px}
a.card:hover .card-ico{background:var(--navy-700);color:#fff}
.card h3{margin-bottom:.4em}
.card p{color:var(--body);font-size:.96rem;margin-bottom:0}
.card-more{margin-top:auto;padding-top:14px;font-family:var(--head);font-weight:700;font-size:.9rem;color:var(--navy-700);display:inline-flex;align-items:center;gap:.4em}
.card-more svg{width:16px;height:16px;transition:transform .16s}
a.card:hover .card-more{color:var(--red-700)}
a.card:hover .card-more svg{transform:translateX(4px)}

/* ---------- trust row ---------- */
.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(14px,2vw,26px)}
.trust-item{display:flex;gap:14px;align-items:flex-start;min-width:0}
.trust-item>div{min-width:0}
.trust-ico{width:52px;height:52px;border-radius:14px;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.trust-ico svg{width:25px;height:25px}
.trust-item strong{display:block;font-family:var(--head);font-size:1.05rem;color:var(--ink);margin-bottom:3px}
.trust-item span{font-size:.92rem;color:var(--muted);display:block}
.sec-navy .trust-ico{background:var(--red);color:#fff}
.sec-navy .trust-item strong{color:#fff}
.sec-navy .trust-item span{color:#a9c2da}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:clamp(14px,2vw,22px);counter-reset:s}
.steps li>div{min-width:0}
.steps li{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:var(--r);padding:clamp(18px,2vw,24px);margin:0;min-width:0}
.step-n{width:46px;height:46px;border-radius:13px;background:var(--navy);color:#fff;font-family:var(--head);
  font-weight:700;font-size:1.18rem;display:grid;place-items:center;flex:none}
.steps h3{margin-bottom:.25em}
.steps p{margin:0;font-size:.96rem}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin:0 0 1.4em}
table{border-collapse:collapse;width:100%;font-size:.94rem}
.table-scroll table{margin:0;border:0}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;font-size:.85rem;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border-bottom:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--bg-soft)}
tbody th{font-family:var(--head);color:var(--ink);white-space:nowrap}
.tbl-compare{min-width:720px}

/* ---------- FAQ ---------- */
.faqs{max-width:880px;margin-inline:auto;display:grid;gap:12px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .16s}
.faq[open]{box-shadow:var(--sh);border-color:var(--sky)}
.faq summary{cursor:pointer;padding:17px 54px 17px 20px;font-family:var(--head);font-weight:700;font-size:1.03rem;
  color:var(--ink);position:relative;list-style:none;display:block}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;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:.2s}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{background:var(--bg-soft)}
.faq-a{padding:0 20px 18px;border-top:1px solid var(--line-soft);padding-top:16px}
.faq-a p:last-child,.faq-a ul:last-child{margin-bottom:0}
.sec-faq{background:var(--bg-soft)}

/* ---------- reviews ---------- */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:0;
  display:flex;flex-direction:column;box-shadow:var(--sh);min-width:0}
.stars{display:flex;gap:2px;margin-bottom:12px}
.stars svg{width:17px;height:17px;color:#967636}
.review blockquote{margin:0 0 16px;flex:1}
.review blockquote p{font-size:.95rem;color:var(--body);margin:0}
.review figcaption{border-top:1px solid var(--line-soft);padding-top:12px}
.review figcaption strong{display:block;font-family:var(--head);color:var(--ink)}
.review figcaption span{font-size:.82rem;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--navy-900),var(--navy-700));color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;top:-45%;right:-5%;width:470px;height:470px;border-radius:50%;
  background:radial-gradient(circle,rgba(140,47,12,.24),transparent 70%)}
.cta-in{position:relative;z-index:2;padding:clamp(38px,4.5vw,64px) 0;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,auto);gap:clamp(22px,3vw,44px);align-items:center}
.cta-band h2{color:#fff;margin-bottom:.4em}
.cta-band p{color:#d5e2ed;margin:0;max-width:62ch}
.cta-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-note{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;color:#a9c2da}
.cta-note svg{width:16px;height:16px;color:var(--sky)}
@media (max-width:820px){.cta-in{grid-template-columns:1fr}}

/* ---------- prose / articles ---------- */
.prose{max-width:76ch;font-size:1.045rem;min-width:0}
.prose>*{max-width:100%}
.table-scroll{max-width:100%}
.prose table{min-width:520px}
.split>div{min-width:0}
.local-box{min-width:0}
.sec>.wrap>*{min-width:0}
.prose h2{margin-top:1.9em;font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem);scroll-margin-top:130px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em;color:var(--navy)}
.prose ul,.prose ol{margin-bottom:1.3em}
.prose li{margin:.45em 0}
.prose img{border-radius:var(--r);margin:1.6em 0}
.prose blockquote{border-left:4px solid var(--sky);background:var(--bg-soft);margin:1.6em 0;padding:18px 22px;border-radius:0 var(--r) var(--r) 0}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{margin-bottom:0}
.prose a{font-weight:600;overflow-wrap:anywhere}
.local-box a,.foot-res-p a,.faq-a a{overflow-wrap:anywhere}
.prose p,.prose li{overflow-wrap:break-word}
.figure{margin:1.8em 0}
.figure figcaption{font-size:.85rem;color:var(--muted);margin-top:.7em;text-align:center}
.callout{background:var(--sky-050);border:1px solid #d9e4ef;border-left:4px solid var(--sky);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:1.7em 0}
.callout h3,.callout .callout-h{margin-top:0;color:var(--navy);font-size:clamp(1.12rem,1rem + .5vw,1.35rem);font-weight:700;letter-spacing:-.02em}
.prose .callout-h{margin-top:0}
.local-box .box-h{color:var(--navy);display:flex;align-items:center;gap:.5em;font-size:clamp(1.12rem,1rem + .5vw,1.35rem);font-weight:700;margin-bottom:.5em}
.local-box .box-h svg{width:22px;height:22px;color:var(--sky);flex:none}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout-warn{background:var(--red-050);border-color:#e3d8c0;border-left-color:var(--red)}
.article-layout>*{min-width:0}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);align-items:start}
.sidebar{position:sticky;top:calc(var(--hdr) + 12px);display:grid;gap:20px}
.side-card{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r-lg);padding:22px}
.side-card h3{font-size:1.08rem;margin-bottom:.6em}
.side-card ul{list-style:none;padding:0;margin:0}
.side-card li{margin:.1em 0;border-bottom:1px solid var(--line-soft)}
.side-card li:last-child{border-bottom:0}
.side-card li a{display:block;padding:9px 0;font-size:.93rem;text-decoration:none;color:var(--body);font-weight:500}
.side-card li a:hover{color:var(--navy-700)}
.side-cta{background:var(--navy-900);border-color:var(--navy-900);color:#d5e2ed;text-align:center}
.side-cta h3{color:#fff}
.side-cta p{font-size:.92rem}
.side-cta .btn{width:100%}
@media (max-width:980px){.article-layout{grid-template-columns:1fr}.sidebar{position:static}}
.meta-row{display:flex;flex-wrap:wrap;gap:16px;font-size:.86rem;color:#c4d5e6;margin-top:1.2em}
.meta-row span{display:inline-flex;align-items:center;gap:.45em}
.meta-row svg{width:15px;height:15px;color:var(--sky)}

/* ---------- blog cards ---------- */
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;
  flex-direction:column;text-decoration:none;color:inherit;transition:.16s;box-shadow:var(--sh);min-width:0}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.post-img{aspect-ratio:16/9;overflow:hidden;background:var(--navy-050)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.post:hover .post-img img{transform:scale(1.05)}
.post-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-body h3{margin-bottom:.4em;font-size:1.12rem}
.post-body p{font-size:.93rem;color:var(--muted);margin-bottom:1em}
.post-meta{margin-top:auto;font-size:.8rem;color:var(--muted);display:flex;gap:12px;align-items:center;
  border-top:1px solid var(--line-soft);padding-top:12px}
.post-meta .rd{display:inline-flex;align-items:center;gap:.4em}
.post-meta svg{width:14px;height:14px;color:var(--sky)}

/* ---------- misc blocks ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,56px);align-items:center}
.split img{border-radius:var(--r-lg);box-shadow:var(--sh)}
.split>*{min-width:0}
.checklist{list-style:none;padding:0;display:grid;gap:11px}
.checklist li{display:block;position:relative;padding-left:33px;margin:0}
.checklist li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--sky-050);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23204b71' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 6 6L20 6'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}
.pill-links{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.pill-links li{margin:0}
.pill-links a{display:inline-block;padding:8px 15px;background:#fff;border:1px solid var(--line);border-radius:100px;
  font-size:.88rem;font-weight:600;text-decoration:none;color:var(--body);transition:.15s}
.pill-links a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.sec-navy .pill-links a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#e0e9f2}
.sec-navy .pill-links a:hover{background:var(--sky);border-color:var(--sky);color:#fff}
.size-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r-lg);
  padding:26px;text-decoration:none;color:inherit;transition:.16s;box-shadow:var(--sh);display:flex;flex-direction:column;min-width:0}
.size-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-left-color:var(--navy-700)}
.size-yd{font-family:var(--head);font-size:2.6rem;font-weight:700;color:var(--navy);line-height:1}
.size-yd small{font-size:.9rem;font-weight:700;color:var(--muted);display:block;letter-spacing:.08em;text-transform:uppercase}
.size-specs{list-style:none;padding:0;margin:14px 0;font-size:.9rem;display:grid;gap:7px}
.size-specs li{display:flex;justify-content:space-between;gap:12px;margin:0;border-bottom:1px dashed var(--line);padding-bottom:6px}
.size-specs strong{text-align:right}
.local-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);box-shadow:var(--sh)}
.local-box h3{color:var(--navy);display:flex;align-items:center;gap:.5em}
.local-box h3 svg{width:22px;height:22px;color:var(--sky);flex:none}
.local-box ul{margin-bottom:0}
.res-links{list-style:none;padding:0;display:grid;gap:9px}
.res-links li{margin:0;display:flex;gap:.6em;align-items:flex-start}
.res-links li svg{width:17px;height:17px;color:var(--sky);flex:none;margin-top:5px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-900);color:#a9c2da;font-size:.93rem;margin-bottom:64px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(24px,3vw,44px);
  padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(28px,3vw,44px)}
.foot-col{min-width:0}
.site-footer h3{color:#fff;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1em;
  padding-bottom:.6em;border-bottom:1px solid rgba(255,255,255,.13);position:relative}
.site-footer h3::after{content:"";position:absolute;bottom:-1px;left:0;width:38px;height:3px;background:var(--red)}
/* No white plate here — the real logo's ring/wordmark are white/sky/navy line art and the
   footer background is already dark navy (--navy-900 below), so it reads fine directly,
   unlike the header. */
.foot-logo{margin-bottom:16px;height:auto;width:150px}
.foot-brand p{font-size:.92rem;line-height:1.62}
.foot-nap{display:grid;gap:9px;margin:16px 0}
.foot-line{display:flex;gap:.65em;align-items:flex-start;color:#d5e2ed;text-decoration:none;font-size:.92rem}
a.foot-line:hover{color:var(--sky-light)}
.foot-line svg{width:17px;height:17px;color:var(--sky);flex:none;margin-top:4px}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;color:#d5e2ed;transition:.15s}
.foot-social a:hover{background:var(--red);color:#fff}
.foot-social svg{width:18px;height:18px}
.foot-list{list-style:none;padding:0;margin:0;display:grid;gap:1px}
.foot-list li{margin:0}
.foot-list a{color:#a9c2da;text-decoration:none;font-size:.9rem;display:block;padding:4px 0}
.foot-list a:hover{color:var(--sky-light);text-decoration:underline}
.foot-locs{grid-template-columns:1fr 1fr;display:grid;column-gap:12px}
.foot-more a{color:var(--sky-light);font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4em;margin-top:10px}
.foot-more svg{width:15px;height:15px}
.map-embed{border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.15);line-height:0}
.hours{display:grid;gap:5px;font-size:.87rem}
.hrow{display:flex;justify-content:space-between;gap:10px;padding-bottom:4px;border-bottom:1px dashed rgba(255,255,255,.1)}
.hrow span:last-child{color:#d5e2ed;white-space:nowrap}
.foot-note{font-size:.83rem;color:#85a9ca;margin-top:12px}
.foot-res{padding-bottom:26px}
.foot-res h3{display:inline-block}
.foot-res-p{font-size:.86rem;line-height:2;color:#85a9ca}
.foot-res-p a{color:#a9c2da;text-decoration:underline;text-decoration-color:rgba(129,173,205,.5)}
.foot-res-p a:hover{color:var(--sky-light)}
.foot-bottom{background:rgba(0,0,0,.28);padding:16px 0;font-size:.84rem}
.foot-bottom-in{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.foot-bottom p{margin:0}
.foot-legal{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0}
.foot-legal li{margin:0}
.foot-legal a{color:#a9c2da;text-decoration:none}
.foot-legal a:hover{color:var(--sky-light);text-decoration:underline}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot-grid{grid-template-columns:1fr}.foot-locs{grid-template-columns:1fr 1fr}}

/* ---------- sticky call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:56;background:var(--navy-900);
  box-shadow:0 -4px 20px rgba(19,56,84,.3);padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.6em;background:var(--red);color:#fff;
  font-family:var(--head);font-weight:700;font-size:1.06rem;padding:14px;border-radius:var(--r);text-decoration:none}
.callbar a:hover{background:var(--red-700);color:#fff}
.callbar svg{width:21px;height:21px;flex:none}
@media (min-width:1101px){.callbar{display:none}.site-footer{margin-bottom:0}}

/* ---------- utility ---------- */
.lede{font-size:1.1rem}
.text-center{text-align:center}
.mb0{margin-bottom:0}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
