/* ==========================================================================
   Hammond Dumpster Rental Group — styles.css
   Theme: "Tangipahoa Ironworks" — slate #0E3A63 / brand red #D51F1E /
          brand palette from the client logo on warm bone paper #FBF8F4
   Type:  Epilogue (display) + Figtree (text)
   ========================================================================== */

:root{
  /* brand — repoint these three to recolour the whole site */
  --ink:#0E3A63;          /* dark anchor (slate) */
  --red:#C1272D;          /* brand primary / CTA */
  --teal:#1466A8;         /* accent (cypress) */

  --ink-2:#164C7C;
  --ink-3:#1D5C93;
  --red-dk:#9C1F24;
  --red-lt:#FBEAEA;
  --teal-dk:#0F4E80;
  --teal-lt:#E4EFF7;
  --steel:#8F8F8F;

  --tx:#24272B;
  --tx-2:#5E6469;
  --tx-3:#8B9098;
  --line:#E5DFD4;
  --line-2:#F0EBE1;
  --bg:#F8F5EF;           /* warm bone paper, not white */
  --bg-2:#F1ECE2;
  --bg-3:#E4DDCE;
  --paper:#FFFFFF;

  --ff-d:'Gabarito',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-t:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:12px;            /* card radius — hard-edged industrial */
  --r-s:6px;          /* button radius */
  --wrap:1180px;
  --sh:0 1px 2px rgba(14,58,99,.05),0 10px 26px -16px rgba(14,58,99,.20);
  --sh-lg:0 2px 5px rgba(14,58,99,.07),0 26px 50px -22px rgba(14,58,99,.30);
  --hdr-h:66px;
}

/* ------------------------------------------------------------------ base */
*,*::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}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;font-family:var(--ff-t);font-size:17px;line-height:1.68;color:var(--tx);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,iframe,video{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4{font-family:var(--ff-d);color:var(--ink);margin:0 0 .5em;
  letter-spacing:-.028em;line-height:1.12;font-weight:700;overflow-wrap:break-word}
h1{font-size:clamp(2rem,1.3rem + 2.75vw,3.35rem);font-weight:800;letter-spacing:-.038em}
h2{font-size:clamp(1.58rem,1.16rem + 1.6vw,2.3rem);font-weight:750;letter-spacing:-.032em}
h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.3rem);font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p{margin:0 0 1.15em}
a{color:var(--red);text-decoration-color:rgba(193,39,45,.30);text-underline-offset:3px}
a:hover{color:var(--red-dk)}
ul,ol{padding-left:1.15em}
li{margin:.34em 0}
strong,b{font-weight:700;color:var(--ink)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;
  padding:.7rem 1.1rem;font-weight:700}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:820px}
.ic{width:20px;height:20px;flex:none}
.arw{display:inline-block;transition:transform .18s ease;margin-left:.35em}
a:hover .arw,.btn:hover .arw{transform:translateX(4px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------- eyebrow */
/* signature: leading diamond rather than a rule */
.eyebrow{font-family:var(--ff-d);font-size:.72rem;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--tx-3);margin:0 0 .8rem;display:flex;
  align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:8px;height:8px;background:currentColor;flex:none;
  transform:rotate(45deg)}
.eyebrow-amber{color:var(--teal-dk)}
.hero .eyebrow-amber,.sec-dark .eyebrow-amber{color:#C1272D}
.lede{font-size:1.08rem;color:var(--tx-2);max-width:66ch}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ff-d);font-weight:750;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.86rem 1.4rem;border-radius:var(--r-s);
  border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s;
  line-height:1.2;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-ic{width:18px;height:18px}
.btn-lg{padding:1.02rem 1.7rem;font-size:.92rem}
.btn-sm{padding:.64rem 1rem;font-size:.775rem}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 16px -8px rgba(193,39,45,.85)}
.btn-red:hover{background:var(--red-dk);color:#fff}
.btn-amber{background:var(--teal);color:#fff;box-shadow:0 6px 16px -8px rgba(20,102,168,.85)}
.btn-amber:hover{background:var(--teal-dk);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);color:#fff}

/* ---------------------------------------------------------------- header */
/* dark header with a red underscore rule */
.hdr{position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line)}
.hdr-top{background:#0F1920;color:#93A4AD;font-size:.78rem;
  border-bottom:1px solid rgba(255,255,255,.07)}
.hdr-top-in{display:flex;gap:1.7rem;align-items:center;justify-content:center;
  min-height:34px;flex-wrap:wrap}
.ht-item{display:inline-flex;align-items:center;gap:.42rem;font-weight:500}
.ht-ic{width:15px;height:15px;color:#C1272D}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;min-width:0}
.brand img{height:44px;width:auto;object-fit:contain}
.brand-tx{display:none}          /* the lockup already contains the name */
.nav{margin-left:auto;display:flex;align-items:center;gap:1rem;min-width:0}
.nav-l{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav-l>li{margin:0;position:relative}
.nav-l>li>a{display:block;padding:.55rem .66rem;font-family:var(--ff-d);font-weight:650;
  font-size:.855rem;color:#D4DCE1;text-decoration:none}
.nav-l>li>a:hover{color:#fff}
.nav-l>li>a[aria-current="page"]{color:#fff}
.nav-l>li>a[aria-current="page"]::after{content:"";display:block;height:3px;
  background:var(--red);margin-top:4px}
.has-sub>.sub-t::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:.45rem;opacity:.65}
.sub-b{display:none}
.sub{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--paper);
  border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:var(--sh-lg);
  list-style:none;margin:0;padding:.45rem;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.sub::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.sub li{margin:0}
.sub a{display:block;padding:.52rem .7rem;font-size:.875rem;font-weight:550;color:var(--ink-2);
  text-decoration:none}
.sub a:hover{background:var(--bg-2);color:var(--red)}
.sub-wide{display:grid;grid-template-columns:1fr 1fr;min-width:490px;gap:0 .2rem}
.sub-right{left:auto;right:0}
.sub-all{grid-column:1/-1;border-top:1px solid var(--line-2);margin-top:.3rem;padding-top:.3rem}
.sub-all a{color:var(--red);font-weight:750}
.nav-cta{display:none}
.hdr-act{display:flex;align-items:center;gap:.6rem;flex:none}
.hdr-call{display:inline-flex;align-items:center;gap:.45rem;background:var(--red);color:#fff;
  font-family:var(--ff-d);font-weight:750;font-size:.87rem;padding:.66rem 1.05rem;
  border-radius:var(--r-s);text-decoration:none;white-space:nowrap;letter-spacing:.02em}
.hdr-call:hover{background:var(--red-dk);color:#fff}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.28);
  background:transparent;border-radius:var(--r-s);cursor:pointer;padding:0;
  flex-direction:column;gap:5px;justify-content:center;align-items:center}
.burger span{display:block;width:20px;height:2px;background:#fff;transition:transform .2s,opacity .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(12,20,25,.55);z-index:58;border:0}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:var(--ink);color:#DCE3E7;
  padding:clamp(2.6rem,1.4rem + 4vw,4.4rem) 0 clamp(3rem,2rem + 4vw,4.8rem);
  overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(720px 400px at 78% 12%,rgba(20,102,168,.24),transparent 62%),
    radial-gradient(600px 420px at 2% 92%,rgba(20,102,168,.26),transparent 64%),
    linear-gradient(165deg,#1466A8 0%,#0E3A63 60%,#08243E 100%)}
/* signature: fine diagonal hatch on dark panels */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.032) 0 1px,transparent 1px 9px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:center}
.hero-tx{min-width:0}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:#C1272D}
.hero-lede{font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);color:#B4C2C9;max-width:52ch}
.hero-ul{list-style:none;padding:0;margin:1.4rem 0 1.7rem;display:grid;gap:.55rem}
.hero-ul li{display:flex;gap:.6rem;align-items:flex-start;font-size:.955rem;
  color:#CFD9DE;font-weight:500;margin:0}
.hero-ul .ic{color:#C1272D;width:19px;height:19px;margin-top:3px}
.hero-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.1rem}
.hero-fine{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:#8B9BA4;margin:0}
.hero-fine .ic{width:16px;height:16px;color:#C1272D}
.hero-md{position:relative;min-width:0}
/* hard-edged frame with a thick red top rule — no offset outline */
.hero-frame{position:relative;border-top:6px solid var(--red);background:#0B2C4A;
  box-shadow:0 26px 56px -26px rgba(0,0,0,.85)}
.hero-frame img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.hero-badge{position:absolute;left:0;bottom:-26px;z-index:2;background:var(--red);
  color:#fff;padding:.72rem 1.05rem;max-width:250px;display:flex;align-items:baseline;gap:.55rem}
.hero-badge b{font-family:var(--ff-d);font-size:1.3rem;font-weight:800;line-height:1;
  letter-spacing:-.03em}
.hero-badge span{font-size:.74rem;font-weight:600;line-height:1.25;opacity:.95}
.hero-cut{display:none}

/* -------------------------------------------------------- sub-page hero  */
.crumbs{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.82rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:.6rem 0}
.crumbs li{margin:0;display:flex;align-items:center;gap:.4rem;color:var(--tx-3);min-width:0}
.crumbs li+li::before{content:"/";color:var(--line);font-weight:600}
.crumbs a{color:var(--tx-2);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--red)}
.crumbs span{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.phero{padding:clamp(1.8rem,1.2rem + 2vw,2.9rem) 0 0;background:var(--bg)}
/* signature: left vertical red rule on sub-page headings */
.phero h1{max-width:20ch;border-left:5px solid var(--red);padding-left:1.1rem}
.phero-lede{font-size:clamp(1.02rem,.98rem + .25vw,1.13rem);color:var(--tx-2);max-width:68ch}
.phero-act{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.3rem 0 1.9rem}
.phero-md{border-top:5px solid var(--red);position:relative;background:var(--ink)}
.phero-md img{width:100%;max-height:340px;object-fit:cover;display:block}
@media (min-width:900px){.phero-md img{max-height:380px}}

/* ------------------------------------------------------------- trust bar */
/* light bone strip with thin vertical dividers and teal icons */
.tbar{background:var(--bg-2);color:var(--ink-2);border-bottom:1px solid var(--line)}
.tbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;
  padding-block:1rem}
.tbar-i{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-d);
  font-size:.84rem;font-weight:700;position:relative;padding-right:1.1rem;min-width:0}
.tbar-i .ic{width:19px;height:19px;color:var(--teal)}
.tbar-i:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:1px;height:22px;background:var(--line)}

/* -------------------------------------------------------------- sections */
.sec{padding:clamp(2.6rem,1.8rem + 3vw,4.4rem) 0}
.sec-alt{background:var(--bg-2)}
.sec-dark{background:var(--ink);color:#D6D0C4;position:relative;isolation:isolate}
.sec-dark::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lede{color:#C3BCAE}
.sec>.wrap>h2{max-width:24ch}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.9rem}
.sec-head>div{min-width:0;flex:1 1 420px}
.sec-head h2{margin-bottom:.35em}
.prose>h2{margin-top:2.1em}
.prose>h2:first-child{margin-top:0}
.prose>h3{margin-top:1.7em}
.prose ul,.prose ol{margin:0 0 1.15em}
.prose li{margin:.42em 0}

/* ----------------------------------------------------------------- cards */
/* top accent rule, hard corners */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.card{position:relative;background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--ink);border-radius:var(--r);
  padding:1.4rem 1.35rem;min-width:0;transition:box-shadow .2s,transform .2s,border-top-color .2s}
.card:hover{box-shadow:var(--sh);transform:translateY(-2px);border-top-color:var(--red)}
.card h3{margin:0 0 .4em}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card:hover h3 a{color:var(--red)}
.card p{margin:0;font-size:.94rem;color:var(--tx-2)}
.card-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--teal-lt);color:var(--teal-dk);margin-bottom:.9rem;border-radius:var(--r)}
.card-ic .ic{width:21px;height:21px}
.card-n{font-family:var(--ff-d);font-size:1.05rem;font-weight:800;line-height:1;
  color:#fff;background:var(--red);display:inline-flex;width:34px;height:34px;
  align-items:center;justify-content:center;margin-bottom:.75rem;border-radius:var(--r)}
.card-more{display:inline-block;margin-top:.9rem;font-family:var(--ff-d);font-size:.78rem;
  font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.07em}
.sec-alt .card{background:var(--paper)}
.sec-dark .card{background:var(--ink-2);border-color:#1466A8;border-top-color:var(--teal)}
.sec-dark .card p{color:#C3BCAE}
.sec-dark .card-ic{background:rgba(193,39,45,.15);color:#C1272D}

/* ----------------------------------------------------------------- steps */
/* filled circular numerals joined by a connector line */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.steps li{margin:0;min-width:0;position:relative;padding-top:3.2rem}
.steps li::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;
  background:var(--line)}
.steps li:last-child::before{right:50%}
.stp-n{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;
  background:var(--red);color:#fff;font-family:var(--ff-d);font-size:1.05rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;z-index:1;
  box-shadow:0 0 0 6px var(--bg)}
.sec-alt .stp-n{box-shadow:0 0 0 6px var(--bg-2)}
.sec-dark .stp-n{box-shadow:0 0 0 6px var(--ink)}
.sec-dark .steps li::before{background:#1466A8}
.steps h3{margin:0 0 .35em;font-size:1.03rem}
.steps p{margin:0;font-size:.92rem;color:var(--tx-2)}
.sec-dark .steps p{color:#C3BCAE}

/* --------------------------------------------------------------- feature */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(1.6rem,1rem + 2.4vw,3.2rem);align-items:center}
.split>div{min-width:0}
.split .imgwrap img,.split-md img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.split .imgwrap,.split-md .imgwrap{border-top:5px solid var(--red)}
.split-md{position:relative}
.ticks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.6rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;margin:0;font-size:.96rem}
.ticks .ic{color:var(--teal);width:19px;height:19px;margin-top:4px;flex:none}
.sec-dark .ticks .ic{color:#C1272D}

/* ------------------------------------------------------------- stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:1rem;margin:0;padding:0;list-style:none}
.stats li{margin:0;min-width:0;padding:1.2rem 1.1rem;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r)}
.stats b{display:block;font-family:var(--ff-d);font-size:1.95rem;font-weight:800;
  line-height:1;color:var(--ink);letter-spacing:-.04em}
.stats span{display:block;font-size:.85rem;color:var(--tx-2);margin-top:.4rem;font-weight:550}
.sec-dark .stats li{background:var(--ink-2);border-color:#1466A8;border-left-color:#C1272D}
.sec-dark .stats b{color:#fff}
.sec-dark .stats span{color:#C3BCAE}

/* ----------------------------------------------------------------- table */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  background:var(--paper);max-width:100%;border-radius:var(--r)}
.table-scroll:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.tbl-compare{border-collapse:collapse;width:100%;min-width:660px;font-size:.925rem}
.tbl-compare caption{text-align:left;padding:.9rem 1rem;font-family:var(--ff-d);
  font-weight:700;font-size:.86rem;color:var(--tx-2);border-bottom:1px solid var(--line)}
.tbl-compare th,.tbl-compare td{padding:.78rem 1rem;text-align:left;
  border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl-compare thead th{background:var(--ink);color:#fff;font-family:var(--ff-d);
  font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:0;white-space:nowrap}
.tbl-compare tbody th{font-family:var(--ff-d);font-weight:800;color:var(--ink);white-space:nowrap}
.tbl-compare tbody th a{color:var(--ink);text-decoration:none}
.tbl-compare tbody th a:hover{color:var(--red)}
.tbl-compare tbody tr:nth-child(even){background:var(--bg-2)}
.tbl-compare tbody tr:last-child th,.tbl-compare tbody tr:last-child td{border-bottom:0}
.tbl-plain{border-collapse:collapse;width:100%;font-size:.93rem;margin:0 0 1.3rem;
  background:var(--paper)}
.tbl-plain th,.tbl-plain td{padding:.64rem .8rem;border-bottom:1px solid var(--line-2);
  text-align:left;overflow-wrap:anywhere}
.tbl-plain thead th{font-family:var(--ff-d);font-size:.76rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--tx-2);border-bottom:2px solid var(--ink)}
.table-scroll>.tbl-plain{margin:0;border:0}
.prose .table-scroll{margin:0 0 1.3rem}

/* ------------------------------------------------------------------- faq */
.faqs{display:grid;gap:.55rem;margin-top:1.6rem}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq[open]{border-color:var(--ink);box-shadow:var(--sh)}
.faq[open] summary{background:var(--bg-2)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.15rem;position:relative;
  font-family:var(--ff-d);font-weight:700;font-size:1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.2rem;top:1.42rem;width:12px;height:2px;
  background:var(--red)}
.faq summary::before{content:"";position:absolute;right:1.2rem;top:1.42rem;width:12px;height:2px;
  background:var(--red);transform:rotate(90deg);transition:transform .2s}
.faq[open] summary::before{transform:rotate(0)}
.faq summary:hover{color:var(--red)}
.faq-a{padding:1rem 1.15rem 1.1rem;color:var(--tx-2);font-size:.955rem}
.faq-a p:last-child,.faq-a ul:last-child{margin-bottom:0}
.sec-faq{background:var(--bg-2)}

/* --------------------------------------------------------------- reviews */
.revs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  margin-top:1.9rem}
.rev{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem;min-width:0;position:relative;border-top:3px solid var(--teal)}
.stars{display:flex;gap:2px;color:var(--red);margin-bottom:.75rem}
.stars .st{width:17px;height:17px;fill:currentColor;stroke:none}
.rev blockquote{margin:0;padding:0}
.rev p{font-size:.955rem;color:var(--tx);margin:0 0 .9rem}
.rev figcaption{font-family:var(--ff-d);font-weight:800;font-size:.9rem;color:var(--ink)}
.rev figcaption span{display:block;font-family:var(--ff-t);font-weight:500;font-size:.8rem;
  color:var(--tx-3);margin-top:2px}

/* ------------------------------------------------------------ link lists */
.links{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.links li{margin:0;min-width:0}
.links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:.7rem;padding:.9rem 1rem;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r);
  text-decoration:none;transition:border-color .18s,box-shadow .18s;min-width:0}
.links a:hover{border-left-color:var(--red);box-shadow:var(--sh)}
.links b{grid-column:1;grid-row:1;min-width:0;font-family:var(--ff-d);font-size:.955rem;
  color:var(--ink);font-weight:750;overflow-wrap:anywhere}
.links span{grid-column:1;grid-row:2;min-width:0;font-size:.83rem;color:var(--tx-2);
  margin-top:1px;overflow-wrap:anywhere}
.links a>i{grid-column:2;grid-row:1/-1;justify-self:end;color:var(--red);
  font-style:normal;flex:none}
.chips{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{margin:0}
.chips a{display:inline-block;padding:.44rem .9rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);font-size:.855rem;font-weight:650;
  color:var(--ink-2);text-decoration:none}
.chips a:hover{border-color:var(--red);color:var(--red)}

/* ------------------------------------------------------------- cta strip */
.cta-strip{background:var(--red);color:#FFE6E5;position:relative;overflow:hidden;
  padding:clamp(2.4rem,1.6rem + 2.6vw,3.6rem) 0}
.cta-strip::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 1px,transparent 1px 9px)}
.cta-in{position:relative;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:1.8rem;align-items:center}
.cta-in>div{min-width:0}
.cta-in h2{color:#fff;margin-bottom:.4em}
.cta-in p{margin:0;font-size:1rem;max-width:56ch;color:#FFDFDE}
.cta-strip .eyebrow,.cta-strip .eyebrow-amber{color:#F7D5D6}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.cta-note{font-size:.85rem;color:#F7D5D6}
.cta-strip .btn-amber{background:#fff;color:var(--red);box-shadow:none}
.cta-strip .btn-amber:hover{background:var(--ink);color:#fff}
@media (min-width:820px){.cta-act{align-items:flex-end}}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--ink);color:#B4ADA0;font-size:.92rem;position:relative;isolation:isolate}
.ftr::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px)}
.ftr-in{display:grid;gap:2rem;padding-block:clamp(2.2rem,1.6rem + 2vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.ftr-col{min-width:0}
.ftr h3{color:#fff;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  margin:0 0 1.1rem;font-weight:800;position:relative;padding-bottom:.6rem}
.ftr h3::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:3px;background:var(--red)}
.ftr-brand img{width:auto;max-width:100%;height:auto;margin-bottom:.9rem}
.ftr-name{display:none}
.ftr p{margin:0 0 1rem;font-size:.885rem;line-height:1.62}
.ftr-l{list-style:none;padding:0;margin:0}
.ftr-l li{margin:0 0 .55rem}
.ftr-l a{color:#B4ADA0;text-decoration:none;font-size:.885rem}
.ftr-l a:hover{color:#fff}
.ftr-l b{color:#C1272D}
.ftr-l-2{columns:2;column-gap:1rem}
.nap{font-style:normal;display:grid;gap:.65rem;margin:0 0 1.1rem}
.nap span{display:flex;gap:.6rem;align-items:flex-start;min-width:0}
.nap .ic{color:#C1272D;width:18px;height:18px;margin-top:2px;flex:none}
.nap a{color:#BCC8CE;text-decoration:none;font-size:.885rem;min-width:0;overflow-wrap:anywhere}
.nap a:hover{color:#fff}
.ftr-mail{overflow-wrap:anywhere;word-break:break-word}
.soc{display:flex;gap:.5rem}
.soc a{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid #1466A8;color:#B4ADA0;border-radius:var(--r)}
.soc a:hover{border-color:var(--red);color:#fff;background:var(--red)}
.soc svg{width:19px;height:19px}
.hrs{list-style:none;padding:0;margin:0 0 1rem;font-size:.85rem}
.hrs li{display:flex;justify-content:space-between;gap:.7rem;padding:.32rem 0;
  border-bottom:1px dashed #123F68;margin:0;min-width:0}
.hrs b{color:#D3DCE1;font-weight:600;white-space:nowrap}
.hrs-note{font-size:.8rem!important;color:#8B9098}
.ftr-map{border:1px solid #1466A8}
.ftr-map iframe{display:block;filter:grayscale(.4) contrast(1.05)}
.ftr-bot{border-top:1px solid #123F68;font-size:.82rem}
.ftr-bot-in{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  align-items:center;padding-block:1.1rem}
.ftr-bot p{margin:0;font-size:.82rem}
.ftr-bot ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin:0;padding:0}
.ftr-bot li{margin:0}
.ftr-bot a{color:#B4ADA0;text-decoration:none}
.ftr-bot a:hover{color:#fff}

/* -------------------------------------------------------- sticky callbar */
.callbar{display:none}

/* ------------------------------------------------------------- utilities */
.imgwrap{overflow:hidden}
.fig{margin:1.8rem 0}
.fig img{width:100%;border-top:4px solid var(--red)}
.fig figcaption{font-size:.83rem;color:var(--tx-3);margin-top:.55rem;font-style:italic}
.note{background:var(--teal-lt);border-left:4px solid var(--teal);padding:1.05rem 1.2rem;
  margin:1.6rem 0;font-size:.95rem}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ink)}
.note-red{background:var(--red-lt);border-left-color:var(--red)}
.callout{background:var(--ink);color:#D6D0C4;padding:1.6rem 1.7rem;margin:2rem 0;
  border-left:5px solid var(--red)}
.callout h3{color:#fff;margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout .btn{margin-top:.6rem}
.toc{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ink);
  padding:1.2rem 1.4rem;margin:0 0 2.2rem}
.toc h2{font-size:.76rem!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-2);margin:0 0 .8rem!important}
.toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:1.6rem}
.toc li{font-size:.9rem;break-inside:avoid}
@media (max-width:620px){.toc ol{columns:1}}
.meta-row{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;font-size:.85rem;
  color:var(--tx-3);margin:0 0 1.4rem}
.meta-row span{display:inline-flex;align-items:center;gap:.4rem}
.meta-row .ic{width:16px;height:16px;color:var(--red)}
.pill{display:inline-block;background:var(--ink);color:#fff;font-family:var(--ff-d);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:var(--r)}
.post-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.post{background:var(--paper);border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;min-width:0;position:relative;
  transition:box-shadow .2s,transform .2s;border-radius:var(--r)}
.post:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-b{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.post h3{font-size:1.05rem;margin:.55rem 0 .45em}
.post h3 a{color:var(--ink);text-decoration:none}
.post h3 a::after{content:"";position:absolute;inset:0}
.post:hover h3 a{color:var(--red)}
.post p{font-size:.9rem;color:var(--tx-2);margin:0 0 .9rem}
.post-m{margin-top:auto;font-size:.8rem;color:var(--tx-3);display:flex;gap:.8rem;flex-wrap:wrap}
.two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem}
@media (min-width:1000px){.two-col{grid-template-columns:minmax(0,1fr) 305px}}
.aside{min-width:0}
.aside-box{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--red);
  padding:1.35rem;margin-bottom:1.1rem;position:sticky;top:calc(var(--hdr-h) + 46px)}
.aside-box h3{font-size:1rem;margin-top:0}
.aside-box ul{list-style:none;padding:0;margin:0}
.aside-box li{margin:0 0 .5rem;font-size:.9rem}
.aside-box a{color:var(--ink-2);text-decoration:none;font-weight:550}
.aside-box a:hover{color:var(--red)}
.big-q{font-family:var(--ff-d);font-size:clamp(1.15rem,1.05rem + .5vw,1.38rem);font-weight:700;
  color:var(--ink);line-height:1.4;border-left:5px solid var(--red);padding-left:1.2rem;margin:2rem 0}
.err{text-align:center;padding:clamp(3rem,2rem + 5vw,6rem) 0}
.err b{display:block;font-family:var(--ff-d);font-size:clamp(4rem,2rem + 12vw,8rem);
  font-weight:800;line-height:1;color:var(--red);letter-spacing:-.055em;margin-bottom:.4rem}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1100px){
  .nav-l>li>a{padding:.55rem .48rem;font-size:.82rem}
  .brand img{height:38px}
}
@media (max-width:980px){
  .sub-b{display:block}
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(365px,86vw);background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:calc(var(--hdr-h) + 12px) 0 90px;
    overflow-y:auto;transform:translateX(102%);transition:transform .26s ease;
    box-shadow:-16px 0 44px -20px rgba(0,0,0,.45);z-index:62;margin-left:0}
  .nav.open{transform:none}
  .nav-l{flex-direction:column;align-items:stretch;gap:0;padding:0 14px}
  .nav-l>li{border-bottom:1px solid var(--line-2)}
  .nav-l>li>a{padding:.9rem .5rem;font-size:1rem;color:var(--ink-2)}
  .nav-l>li>a:hover,.nav-l>li>a[aria-current="page"]{color:var(--red)}
  .nav-l>li>a[aria-current="page"]::after{display:none}
  .has-sub{display:grid;grid-template-columns:1fr 46px;align-items:center}
  .has-sub>.sub-t::after{display:none}
  .sub-b{grid-column:2;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
    position:relative;justify-self:end}
  .sub-b::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
    border-right:2px solid var(--tx-2);border-bottom:2px solid var(--tx-2);
    transform:translate(-50%,-70%) rotate(45deg);transition:transform .2s}
  .sub-b[aria-expanded="true"]::after{transform:translate(-50%,-30%) rotate(-135deg)}
  .sub{position:static;grid-column:1/-1;min-width:0!important;display:none;opacity:1;
    visibility:visible;transform:none;box-shadow:none;border:0;border-top:1px solid var(--line-2);
    padding:.3rem 0 .8rem;background:var(--bg-2);margin:0 -14px;
    grid-template-columns:1fr!important}
  .sub.open,.sub-wide.open{display:block}
  .sub a{padding:.6rem 1.2rem;font-size:.93rem}
  .sub-right{right:auto}
  .nav-cta{display:block;padding:1.1rem 20px 0}
  .nav-cta .btn{width:100%}
  .burger{display:flex}
  .hdr-in{min-height:66px}
  :root{--hdr-h:58px}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-md{order:-1;margin-bottom:2.2rem}
  .hero-badge{left:0;bottom:-20px;max-width:230px}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .aside-box{position:static}
  .steps li{padding-top:0;padding-left:3.7rem;min-height:44px}
  .steps li::before{display:none}
  .stp-n{box-shadow:none!important}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:57;
    background:var(--red);box-shadow:0 -6px 22px -10px rgba(0,0,0,.55)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:.65rem;
    padding:.74rem 1rem;color:#fff;text-decoration:none}
  .callbar .ic{width:22px;height:22px;flex:none}
  .callbar span{display:flex;flex-direction:column;line-height:1.18;min-width:0}
  .callbar b{font-family:var(--ff-d);font-size:.8rem;font-weight:700;color:#fff;
    text-transform:uppercase;letter-spacing:.06em}
  .callbar i{font-style:normal;font-family:var(--ff-d);font-size:1.04rem;font-weight:800}
  .ftr,.cta-strip{padding-bottom:0}
  .ftr-bot-in{padding-bottom:calc(1.1rem + 62px)}
  .ht-hide{display:none}
  .tbar-in{justify-content:flex-start;gap:.55rem .9rem}
  .tbar-i{font-size:.77rem;padding-right:.85rem}
  .tbar-i .ic{width:16px;height:16px}
  .stats b{font-size:1.6rem}
}
@media (max-width:520px){
  .wrap{padding-inline:16px}
  .hero-act .btn,.phero-act .btn{width:100%}
  .hero-badge{position:static;max-width:none;margin-top:1.4rem}
  .rev,.card{padding:1.15rem}
  .ftr-l-2{columns:1}
  .cta-act .btn{width:100%}
  .brand img{height:34px}
  .phero h1{padding-left:.85rem;border-left-width:4px}
}
@media (max-width:430px){
  .hdr-call-tx{display:none}
  .hdr-call{padding:.64rem .78rem}
  .brand img{height:30px}
}
@media (max-width:360px){
  .hdr-top{font-size:.72rem}
  .brand img{height:27px}
}

@media print{
  .hdr,.callbar,.cta-strip,.ftr-map,.scrim{display:none!important}
  body{font-size:11pt;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ============================================================
   ORCHARD RIDGE — theme overrides
   Light header on warm paper, deep-green hero, apple-red CTAs,
   rounded cards and pill buttons, arc divider under the hero.
   ============================================================ */

/* --- header: light, with the green utility strip above it --- */
.hdr-top{background:var(--ink);color:#CBDFD1}
.hdr-top a{color:#EDF5EF}
.hdr .nav-l>li>a{color:var(--tx)}
.hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)}
.hdr .nav-l>li>a[aria-current]::after{background:var(--red)}
.hdr .sub-b{color:var(--tx)}
.hdr .burger span{background:var(--tx)}
.hdr .logo-w b{color:var(--ink)}
.hdr .logo-w span{color:var(--tx-2)}

/* --- hero sits on the deep orchard green --- */
.hero{background:
   radial-gradient(1100px 620px at 82% 12%,rgba(20,102,168,.22),transparent 62%),
   linear-gradient(168deg,#1466A8 0%,var(--ink) 58%,#08243E 100%)}

/* signature: a soft arc scooped out of the bottom of the hero, so the paper
   colour rises into it. Distinct from the previous builds' diagonal cut and
   flat edge. */
.hero::after{
  content:"";position:absolute;left:-4%;right:-4%;bottom:-1px;height:74px;
  background:var(--bg);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  z-index:2}
@media(max-width:760px){.hero::after{height:44px}}

/* --- buttons: pills --- */
.btn{border-radius:var(--r-s)}
.btn-amber{background:var(--teal);color:#FFFFFF;border-color:var(--teal)}
.btn-amber:hover{background:#8E1014;border-color:#8E1014}

/* --- cards: rounded, with a gold corner tab instead of a left bar --- */
.card,.svc-c,.size-c,.post,.aside-box,.links a,.note,.callout,.table-scroll{
  border-radius:var(--r)}
.card::before,.svc-c::before{
  content:"";position:absolute;top:0;left:0;width:58px;height:4px;
  background:var(--teal);border-radius:var(--r) 0 var(--r) 0}
.card,.svc-c{position:relative;overflow:hidden}
.card:hover::before,.svc-c:hover::before{width:100%;transition:width .28s ease}

/* --- trust bar: gold ticks on the green field --- */
.trust{background:var(--ink);color:#D7E6DB}
.trust .ic{color:var(--teal)}

/* --- eyebrow rule --- */
.eyebrow::before{background:var(--red)}
/* red on navy is a low-contrast pair, so eyebrows on dark fields go light */
.hero .eyebrow,.sec-dark .eyebrow{color:#F5F1E9}
.hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C1272D}
.eyebrow-amber{color:var(--teal)}

/* --- section rules and small accents --- */
.sec-dark{background:linear-gradient(168deg,#1466A8,var(--ink))}
.big-q{border-left-color:var(--teal)}
blockquote{border-left-color:var(--teal)}

/* --- footer stays deep green; the badge logo has a white disc so it reads --- */
.ftr{background:var(--ink)}

/* --- rounded images --- */
.imgwrap,.imgwrap img,figure img,.post img{border-radius:var(--r)}

/* ============================================================
   HEADER — slimmed top bar
   Desktop: thin strip, trust signals left, phone right.
   Mobile:  removed entirely (redundant with the header Call
            button and the sticky bottom call bar), which
            reclaims 35px of permanently sticky viewport.
   ============================================================ */

.hdr-top{background:var(--ink);color:#D6E5DB;font-size:.795rem;border-bottom:0}
.hdr-top-in{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;min-height:30px;flex-wrap:nowrap}
.ht-left{display:flex;align-items:center;gap:1.5rem;min-width:0}
.ht-item{white-space:nowrap;font-weight:500}
.ht-ic{width:14px;height:14px;color:var(--teal)}

/* the phone is the point of the bar, so it reads as a link */
.ht-tel{display:inline-flex;align-items:center;gap:.45rem;flex:none;
  color:#fff;font-family:var(--ff-d);font-weight:700;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;padding:.2rem 0}
.ht-tel .ht-ic{color:var(--teal)}
.ht-tel:hover{color:var(--teal)}
.ht-tel:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

/* header body: tighter, so the sticky chrome stops eating the fold */
.hdr-in{min-height:var(--hdr-h);padding-block:.4rem}
.brand img{height:40px}

/* drop the third trust item before it crowds the phone */
@media(max-width:1180px){.ht-hide + .ht-hide{display:none}}
@media(max-width:1024px){.ht-hide{display:none}}

/* mobile: no top bar at all */
@media(max-width:900px){
  .hdr-top{display:none}
  .brand img{height:34px}
  .hdr-in{padding-block:.3rem}
}

/* ============================================================
   HERO BADGE — was apple red sitting on an orange-red dumpster,
   square-cornered, flush to the image edge and unlifted.
   Now a paper card: separates from the photo above and the deep
   green hero below, and matches the rounded theme.
   ============================================================ */

.hero-badge{
  left:22px;                       /* deliberate inset, not flush to the edge */
  bottom:-24px;
  background:var(--bg);            /* warm paper - reads on red photo AND green field */
  color:var(--tx);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 12px 30px rgba(8,30,52,.34);
  padding:.7rem .95rem;
  align-items:center;
  gap:.7rem;
  max-width:268px}

.hero-badge b{
  color:var(--red);                /* apple red numeral, now legible */
  font-size:1.45rem;
  letter-spacing:-.01em}

.hero-badge span{
  color:var(--tx-2);
  opacity:1;
  font-weight:600}

/* tablet: keep the inset proportional */
@media(max-width:1100px){
  .hero-badge{left:16px;bottom:-20px;max-width:238px}
}

/* mobile: it drops out of the image and becomes a normal block, so it does not
   need the lift - but it should still look like the same component */
@media(max-width:900px){
  .hero-badge{
    position:static;max-width:none;margin-top:1.2rem;
    box-shadow:none;
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16)}
  .hero-badge b{color:var(--teal)}
  .hero-badge span{color:#D3E3D8}
}

/* ============================================================
   HERO BADGE TYPOGRAPHY
   The numeral used to be a single "13 yrs" string in a flex item
   that shrank to 43px, so it wrapped to two same-size lines and
   read as two words rather than a statistic. Now split into a
   figure and a unit with a dividing rule.
   Class selectors are doubled up (.hero-badge .hb-*) so they beat
   the base .hero-badge b / .hero-badge span element rules.
   ============================================================ */

.hero-badge{display:flex;align-items:center;gap:0;padding:.72rem 1.05rem;max-width:336px}

.hero-badge .hb-stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:none;white-space:nowrap;line-height:1;
  padding-right:.9rem;margin-right:.9rem;
  border-right:1px solid var(--line)}

.hero-badge .hb-n{
  font-family:var(--ff-d);font-size:1.85rem;font-weight:800;
  line-height:1;letter-spacing:-.025em;color:var(--red)}

.hero-badge .hb-u{
  font-family:var(--ff-d);font-size:.63rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;line-height:1;
  color:var(--tx-3);margin-top:.28rem}

.hero-badge .hb-tx{
  font-size:.795rem;line-height:1.38;font-weight:600;
  color:var(--tx-2);min-width:0;opacity:1;
  text-wrap:balance}          /* avoids a one-word widow on the last line */

@media(max-width:1100px){
  .hero-badge{max-width:300px;padding:.64rem .9rem}
  .hero-badge .hb-n{font-size:1.65rem}
  .hero-badge .hb-tx{font-size:.755rem}
}

/* mobile: block on the green hero, so the rule and colours invert */
@media(max-width:900px){
  .hero-badge{max-width:none;padding:.85rem 1rem}
  .hero-badge .hb-stat{border-right-color:rgba(255,255,255,.22)}
  .hero-badge .hb-n{color:var(--teal)}
  .hero-badge .hb-u{color:rgba(255,255,255,.6)}
  .hero-badge .hb-tx{color:#D6E4DA}
}

/* ============================================================
   RIVER & RAIL — Paducah
   Navy header, gold accents, slab-serif display, and a quilt
   strip under the hero (Paducah is a UNESCO Creative City of
   Crafts & Folk Art / National Quilt Museum).
   ============================================================ */

/* --- header: navy, with a gold hairline, and no utility strip --- */
.hdr{background:var(--ink);border-bottom:3px solid var(--teal)}
.hdr .nav-l>li>a{color:#D3DEEC}
.hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff}
.hdr .nav-l>li>a[aria-current]::after{background:var(--teal)}
.hdr .sub-b{color:#D3DEEC}
.hdr .burger span{background:#E8EEF6}
.hdr .logo-w b{color:#fff}
.hdr .logo-w span{color:#9FB4CE}

/* --- hero on the deep navy, with a soft gold wash top-right --- */
.hero{background:
   radial-gradient(1000px 560px at 84% 10%,rgba(20,102,168,.22),transparent 60%),
   linear-gradient(166deg,#1466A8 0%,var(--ink) 56%,#08243E 100%)}

/* --- SIGNATURE: quilt strip under the hero --- */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;z-index:2;
  background:
    repeating-linear-gradient(90deg,
      var(--teal) 0 28px,
      #14498C   28px 56px);
  opacity:.95}
@media(max-width:760px){.hero::after{height:10px;
  background:repeating-linear-gradient(90deg,var(--teal) 0 18px,#14498C 18px 36px)}}

/* --- CTAs: gold on dark fields, royal blue on light --- */
.hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{
  background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.hero .btn-red:hover,.sec-dark .btn-red:hover{background:#9E1116;border-color:#9E1116}
.btn-amber{background:var(--teal);color:#FFFFFF;border-color:var(--teal)}
.btn-amber:hover{background:#9E1116;border-color:#9E1116}

/* --- cards: squared slab feel, gold top rule instead of a corner tab --- */
.card::before,.svc-c::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--line);border-radius:0}
.card:hover::before,.svc-c:hover::before{background:var(--teal);transition:background .22s ease}

/* --- trust bar --- */
.trust{background:var(--ink);color:#CFDCEC}
.trust .ic{color:var(--teal)}

/* --- accents --- */
.eyebrow::before{background:var(--teal)}
.eyebrow-amber{color:var(--teal)}
.sec-dark{background:linear-gradient(166deg,#1466A8,var(--ink))}
.big-q{border-left-color:var(--teal)}
blockquote{border-left-color:var(--teal)}
.ftr{background:var(--ink)}

/* slab headings want a touch less letter-spacing */
h1,h2,h3,.logo-w b{letter-spacing:-.012em}

/* ============================================================
   SHOALS SOUND — Florence, AL
   Light ivory header (the previous build ran a navy one), gold
   CTAs with navy text, geometric display face, 10px radius, and
   a soundwave divider under the hero — Florence sits in the
   Shoals, home of FAME and Muscle Shoals Sound.
   ============================================================ */

/* --- header: light ivory, navy type, gold underline --- */
.hdr{background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(14,58,99,.04)}
.hdr .nav-l>li>a{color:var(--tx)}
.hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)}
.hdr .nav-l>li>a[aria-current]::after{background:var(--teal);height:3px}
.hdr .sub-b{color:var(--tx)}
.hdr .burger span{background:var(--ink)}
.hdr .logo-w b{color:var(--ink)}
.hdr .logo-w span{color:var(--tx-2)}

/* --- hero: deep navy with a gold wash --- */
.hero{background:
   radial-gradient(980px 540px at 82% 8%,rgba(20,102,168,.22),transparent 60%),
   linear-gradient(164deg,#1466A8 0%,var(--ink) 58%,#08243E 100%)}

/* --- SIGNATURE: soundwave bars under the hero ------------------
   A row of gold bars at varying heights, like a level meter. The
   Shoals is a music town, so the motif belongs here rather than
   being generic decoration. Pure CSS, no image request. */
.hero::after{
  /* SELF-CONTAINED ON PURPOSE. Four .hero::after rules are stacked in this
     file, one per build in the clone chain: a base diagonal hatch (inset:0,
     z-index:-1, opacity:.5), an arc scoop (border-radius + negative left/right)
     and a quilt strip (opacity:.95). Any property an earlier rule sets that
     this one does not reset will leak through. So reset all of them:
       top:auto        - base uses inset:0, which pins top:0. With bottom AND
                         height also set the box is over-constrained and the
                         browser honours top, putting the bar at the TOP.
       border-radius:0 - otherwise the arc scoop curves this bar.
       opacity:1       - otherwise the quilt rule's .95 applies.  */
  content:"";position:absolute;
  left:0;right:0;top:auto;bottom:0;height:20px;
  z-index:2;opacity:1;border-radius:0;
  background-repeat:repeat-x;
  /* each layer is a 4px bar inside a 64px tile, so the bars do NOT tile solid.
     8 layers offset 8px apart = 4px bar, 4px gap, heights staggered. */
  background-image:
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px),
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px),
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px),
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px),
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px),
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px),
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px),
    linear-gradient(to right,var(--teal) 0 4px,transparent 4px);
  background-size:
    64px 9px, 64px 20px, 64px 12px, 64px 16px,
    64px 7px, 64px 18px, 64px 11px, 64px 14px;
  background-position:
    0px    bottom,  8px bottom, 16px bottom, 24px bottom,
    32px   bottom, 40px bottom, 48px bottom, 56px bottom}

@media(max-width:760px){
  .hero::after{height:14px;
    background-size:
      48px 6px, 48px 14px, 48px 8px, 48px 11px,
      48px 5px, 48px 12px, 48px 7px, 48px 9px;
    background-position:
      0px  bottom,  6px bottom, 12px bottom, 18px bottom,
      24px bottom, 30px bottom, 36px bottom, 42px bottom}}


/* --- CTAs: GOLD with navy text. Gold is a fill colour only; it never
       carries small text on white, which would fail contrast. --- */
.btn-red{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.btn-red:hover{background:#A9151A;border-color:#A9151A;color:#101F16}
.btn-amber{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.btn-amber:hover{background:#A9151A;border-color:#A9151A}
.hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}

/* --- cards: gold left rule, squared-off corners on the accent --- */
.card::before,.svc-c::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;
  background:var(--line);border-radius:0}
.card:hover::before,.svc-c:hover::before{background:var(--teal);
  transition:background .22s ease}

.trust{background:var(--ink);color:#CFDCE9}
.trust .ic{color:var(--teal)}
.eyebrow::before{background:var(--teal)}
.eyebrow-amber{color:var(--teal)}
.sec-dark{background:linear-gradient(164deg,#1466A8,var(--ink))}
.big-q{border-left-color:var(--teal)}
blockquote{border-left-color:var(--teal)}
.ftr{background:var(--ink)}

/* geometric face sets tight */
h1,h2,h3,.logo-w b{letter-spacing:-.02em}

/* ============================================================
   KATY LINE — Katy, TX
   Deep rail blue, brand red CTAs, Archivo display, 4px radius,
   and a RAILROAD TRACK divider under the hero. Katy is named
   after the Missouri-Kansas-Texas Railroad — the "K-T", the Katy.
   ============================================================ */

/* --- header: deep blue with a red underline --- */
.hdr{background:var(--ink);border-bottom:3px solid var(--red);box-shadow:none}
.hdr .nav-l>li>a{color:#DCD6CA}
.hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff}
.hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px}
.hdr .sub-b{color:#DCD6CA}
.hdr .burger span{background:#F2EDE4}
.hdr .logo-w b{color:#fff}
.hdr .logo-w span{color:#B7B0A4}

/* --- hero --- */
.hero{background:
   radial-gradient(960px 520px at 84% 10%,rgba(193,39,45,.15),transparent 60%),
   linear-gradient(163deg,#164C7C 0%,var(--ink) 56%,#08243E 100%)}

/* --- SIGNATURE: railroad track under the hero ------------------
   Two rails with crossties between them. Self-contained on purpose:
   four .hero::after rules are stacked in this file, one per build in
   the clone chain, and any property not reset here leaks through.
     top:auto        - the base rule's inset:0 pins top:0, which would
                       put the track at the TOP of the hero
     border-radius:0 - or an earlier arc scoop curves it
     opacity:1       - or an earlier quilt rule's .95 applies          */
.hero::after{
  content:"";position:absolute;
  left:0;right:0;top:auto;bottom:0;height:18px;
  z-index:2;opacity:1;border-radius:0;
  background-repeat:repeat-x;
  background-image:
    /* crossties: 10px tie, 14px gap */
    linear-gradient(to right,var(--red) 0 10px,transparent 10px),
    /* top rail */
    linear-gradient(var(--teal),var(--teal)),
    /* bottom rail */
    linear-gradient(var(--teal),var(--teal));
  background-size:
    24px 12px,
    100% 3px,
    100% 3px;
  background-position:
    0 bottom 3px,
    0 bottom 12px,
    0 bottom 0}
@media(max-width:760px){
  .hero::after{height:13px;
    background-size:18px 9px,100% 2px,100% 2px;
    background-position:0 bottom 2px,0 bottom 9px,0 bottom 0}}

/* --- CTAs: brand red, white text ---
   NOTE the compound selectors. An earlier build's override block in this file
   sets `.hero .btn-red, .sec-dark .btn-red, .callbar .btn-red` (specificity
   0,2,0), which beats a bare `.btn-red` (0,1,0) and left every hero CTA
   rendering in the accent colour instead of brand red. Match the specificity
   rather than relying on source order. */
.btn-red,
.hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{
  background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover,
.hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{
  background:var(--red-dk);border-color:var(--red-dk);color:#fff}
.btn-amber{background:var(--red);border-color:var(--red);color:#fff}
.btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)}
.hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}

/* --- cards: red top rule, square corners on the accent --- */
.card::before,.svc-c::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--line);border-radius:0}
.card:hover::before,.svc-c:hover::before{background:var(--red);
  transition:background .22s ease}

.trust{background:var(--ink);color:#DCD6CA}
.trust .ic{color:var(--red)}
.eyebrow::before{background:var(--red)}
/* red on navy is a low-contrast pair, so eyebrows on dark fields go light */
.hero .eyebrow,.sec-dark .eyebrow{color:#F5F1E9}
.hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C1272D}
.eyebrow-amber{color:#E8767B}
.sec-dark{background:linear-gradient(163deg,#164C7C,var(--ink))}
.big-q{border-left-color:var(--red)}
blockquote{border-left-color:var(--red)}
.ftr{background:var(--ink)}

h1,h2,h3,.logo-w b{letter-spacing:-.018em}

/* ============================================================
   PINEY WOODS — Longview, TX
   Light warm-paper header, slab-serif display, square corners,
   and a PINE TREELINE divider under the hero. Longview sits in
   the East Texas Piney Woods.
   ============================================================ */

/* --- header: light warm paper, slate type, red underline --- */
.hdr{background:var(--bg);border-bottom:2px solid var(--red);box-shadow:none}
.hdr .nav-l>li>a{color:var(--tx)}
.hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)}
.hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px}
.hdr .sub-b{color:var(--tx)}
.hdr .burger span{background:var(--ink)}
.hdr .logo-w b{color:var(--ink)}
.hdr .logo-w span{color:var(--tx-2)}

/* --- hero --- */
.hero{background:
   radial-gradient(940px 520px at 84% 10%,rgba(20,102,168,.30),transparent 62%),
   linear-gradient(162deg,#164C7C 0%,var(--ink) 55%,#08243E 100%)}

/* --- SIGNATURE: pine treeline under the hero ------------------
   A sawtooth of paper-coloured peaks rising into the dark hero,
   reading as a treeline on the horizon. Longview is the gateway
   to the East Texas Piney Woods.

   Self-contained on purpose. FIVE .hero::after rules are now
   stacked in this file, one per build in the clone chain, and any
   property this rule does not reset leaks through:
     top:auto        - the base rule's inset:0 pins top:0, which
                       would put the treeline at the TOP of the hero
     border-radius:0 - or an earlier arc scoop curves it
     opacity:1       - or an earlier quilt rule's .95 applies       */
.hero::after{
  content:"";position:absolute;
  left:0;right:0;top:auto;bottom:0;height:24px;
  z-index:2;opacity:1;border-radius:0;
  background-repeat:repeat-x;
  background-position:0 bottom;
  background-size:36px 24px;
  background-image:
    linear-gradient(-45deg,var(--bg) 12px,transparent 0),
    linear-gradient( 45deg,var(--bg) 12px,transparent 0);
  /* a solid paper foot under the peaks so the join is clean */
  box-shadow:none}
.hero::before{}
@media(max-width:760px){
  .hero::after{height:16px;background-size:24px 16px;
    background-image:
      linear-gradient(-45deg,var(--bg) 8px,transparent 0),
      linear-gradient( 45deg,var(--bg) 8px,transparent 0)}}

/* --- CTAs: brand red, white text.
       Compound selectors deliberately match the specificity an earlier
       build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red
       loses to it regardless of source order. --- */
.btn-red,
.hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{
  background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover,
.hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{
  background:var(--red-dk);border-color:var(--red-dk);color:#fff}
.btn-amber{background:var(--red);border-color:var(--red);color:#fff}
.btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)}
.hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}

/* --- cards: square, red left rule --- */
.card::before,.svc-c::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;
  background:var(--line);border-radius:0}
.card:hover::before,.svc-c:hover::before{background:var(--red);
  transition:background .22s ease}

.trust{background:var(--ink);color:#DCD6CA}
.trust .ic{color:var(--red)}
.eyebrow::before{background:var(--red)}
/* red on slate is a low-contrast pair, so eyebrows on dark fields go light */
.hero .eyebrow,.sec-dark .eyebrow{color:#F5F1E9}
.hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C1272D}
.eyebrow-amber{color:#C1272D}
.sec-dark{background:linear-gradient(162deg,#164C7C,var(--ink))}
.big-q{border-left-color:var(--red)}
blockquote{border-left-color:var(--red)}
.ftr{background:var(--ink)}

/* slab face wants a touch more room */
h1,h2,h3{letter-spacing:-.01em}
.logo-w b{letter-spacing:-.005em}

/* ============================================================
   CARD HOVER — self-contained, and it has to be.
   FIVE .card::before rules are stacked in this file, one per
   build in the clone chain. An early build's card used a small
   58px x 4px TOP tab that grew to full width on hover, so it set
   `.card:hover::before{width:100%}`. That rule still applies.
   This build's ::before is a 4px-wide FULL-HEIGHT left rule, so
   that width made it a solid brand-red panel covering the whole
   card and painting over the heading and body text on hover.

   So the hover state below re-states width AND height explicitly
   rather than trusting source order, and the lift is done on the
   card itself.
   ============================================================ */

.card,.svc-c{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}

.card:hover,.svc-c:hover,
.card:focus-within,.svc-c:focus-within{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(14,58,99,.16), 0 2px 6px rgba(14,58,99,.08);
  border-color:var(--line)}

/* the accent rule keeps its geometry and only changes colour */
.card:hover::before,.svc-c:hover::before,
.card:focus-within::before,.svc-c:focus-within::before{
  width:4px;height:100%;top:0;left:0;right:auto;bottom:auto;
  background:var(--red);
  transition:background .22s ease}

/* ONE accent, not two. The base stylesheet already gives .card a 3px top
   border, which is the accent actually visible at rest - the ::before left
   rule reads as almost nothing against the pale --line colour. So drive the
   hover off the top border and neutralise ::before, rather than lighting up
   two different edges. */
.card:hover,.svc-c:hover,
.card:focus-within,.svc-c:focus-within{border-top-color:var(--red)}
.card::before,.svc-c::before,
.card:hover::before,.svc-c:hover::before,
.card:focus-within::before,.svc-c:focus-within::before{background:transparent}

/* The heading link colour comes from `.card:hover h3 a`, not from the h3, so
   setting the h3 here would be dead code. Brand red on white measures 5.6:1,
   which passes AA, so the red heading on hover stays as a deliberate
   affordance. Body copy is left alone. */
.card:hover p,.svc-c:hover p{color:var(--tx-2)}

/* ============================================================
   BOLD TEXT ON DARK FIELDS
   The base stylesheet sets a global `strong, b {color:var(--ink)}`,
   which is right on white but renders bold text in EXACTLY the
   background colour inside .hero, .sec-dark and the footer - so
   the lead-in phrase of every dark-section bullet was invisible.
   ============================================================ */

.hero strong,.hero b,
.sec-dark strong,.sec-dark b,
.ftr strong,.ftr b,
.trust strong,.trust b{color:#fff}

/* the hero reassurance line now sits ABOVE the buttons, so give it
   a little more room and enough contrast to actually be read */
.hero-fine{margin-top:1.5rem!important;color:#BFC9D2;margin:0 0 1rem;font-size:.84rem}
.hero-act{margin-top:0}

/* ============================================================
   NORTH COUNTRY — Watertown, NY
   Dark navy header, brand gold CTAs, pill buttons, 16px cards,
   cool snow-white paper, and a SNOWDRIFT divider under the hero.
   Watertown is one of the snowiest cities in the country - the
   lake-effect belt off Lake Ontario runs straight over it.
   ============================================================ */

/* --- header: deep navy with a gold underline --- */
.hdr{background:var(--ink);border-bottom:3px solid var(--teal);box-shadow:none}
.hdr .nav-l>li>a{color:#CFDCEA}
.hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff}
.hdr .nav-l>li>a[aria-current]::after{background:var(--teal);height:3px}
.hdr .sub-b{color:#CFDCEA}
.hdr .burger span{background:#E9EFF6}
.hdr .logo-w b{color:#fff}
.hdr .logo-w span{color:#A8BACD}

/* --- hero --- */
.hero{background:
   radial-gradient(950px 520px at 84% 10%,rgba(193,39,45,.15),transparent 62%),
   linear-gradient(162deg,#164C7C 0%,var(--ink) 55%,#08243E 100%)}

/* --- SIGNATURE: snowdrift under the hero ----------------------
   A run of soft paper-coloured mounds along the bottom edge, so
   the page below reads as drifted snow banking up against the
   dark field. Two offset layers of different radius keep it from
   looking like a mechanical scallop.

   Self-contained on purpose. SIX .hero::after rules are stacked
   in this file, one per build in the clone chain, and any
   property this rule does not reset leaks through:
     top:auto        - the base rule's inset:0 pins top:0, which
                       would put the drift at the TOP of the hero
     border-radius:0 - or an earlier arc scoop curves it
     opacity:1       - or an earlier quilt rule's .95 applies      */
.hero::after{
  content:"";position:absolute;
  left:0;right:0;top:auto;bottom:0;height:26px;
  z-index:2;opacity:1;border-radius:0;
  background-repeat:repeat-x;
  background-position:0 bottom, 34px bottom;
  background-size:96px 26px, 96px 26px;
  background-image:
    radial-gradient(30px 22px at 30px 26px,var(--bg) 99%,transparent 100%),
    radial-gradient(42px 26px at 42px 28px,var(--bg) 99%,transparent 100%)}
@media(max-width:760px){
  .hero::after{height:16px;
    background-position:0 bottom, 22px bottom;
    background-size:62px 16px, 62px 16px;
    background-image:
      radial-gradient(20px 13px at 20px 16px,var(--bg) 99%,transparent 100%),
      radial-gradient(28px 16px at 28px 17px,var(--bg) 99%,transparent 100%)}}

/* --- CTAs: brand GOLD with navy text. Gold is a fill colour only;
       it never carries small text on white, which would fail contrast.
       Compound selectors match the specificity an earlier build's block
       uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it
       regardless of source order. --- */
.btn-red,
.hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{
  background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.btn-red:hover,
.hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{
  background:#9C1F24;border-color:#9C1F24;color:#101C30}
.btn-amber{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.btn-amber:hover{background:#9C1F24;border-color:#9C1F24}
.hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}

/* --- cards: rounded, gold left rule --- */
.card::before,.svc-c::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;
  background:var(--line);border-radius:0}

.trust{background:var(--ink);color:#CFDCEC}
.trust .ic{color:var(--teal)}
.eyebrow::before{background:var(--teal)}
.hero .eyebrow,.sec-dark .eyebrow{color:#F5F1E9}
.hero .eyebrow::before,.sec-dark .eyebrow::before{background:var(--teal)}
.eyebrow-amber{color:var(--teal)}
.sec-dark{background:linear-gradient(162deg,#164C7C,var(--ink))}
.big-q{border-left-color:var(--teal)}
blockquote{border-left-color:var(--teal)}
.ftr{background:var(--ink)}

h1,h2,h3{letter-spacing:-.02em}

/* ============================================================
   HARBOUR LINE — Port Charlotte, FL
   Light sand header, brand red CTAs, 12px cards, squared
   buttons, and a WATERWAY divider under the hero. Port
   Charlotte is built around one of the largest residential
   canal networks in the country, on Charlotte Harbor.
   ============================================================ */

/* --- header: warm sand, navy type, red underline --- */
.hdr{background:var(--bg);border-bottom:3px solid var(--red);box-shadow:none}
.hdr .nav-l>li>a{color:var(--tx)}
.hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)}
.hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px}
.hdr .sub-b{color:var(--tx)}
.hdr .burger span{background:var(--ink)}
.hdr .logo-w b{color:var(--ink)}
.hdr .logo-w span{color:var(--tx-2)}

/* --- hero --- */
.hero{background:
   radial-gradient(940px 520px at 84% 10%,rgba(20,102,168,.34),transparent 62%),
   linear-gradient(162deg,#164C7C 0%,var(--ink) 55%,#08243E 100%)}

/* --- SIGNATURE: waterway under the hero ----------------------
   A smooth double wave, drawn as an inline SVG so the curve is
   exact rather than faked with stacked gradients. Reads as the
   canal network / harbour shoreline this town is built on.

   Self-contained on purpose. SEVEN .hero::after rules are now
   stacked in this file, one per build in the clone chain, and
   any property this rule does not reset leaks through:
     top:auto        - the base rule's inset:0 pins top:0, which
                       would put the wave at the TOP of the hero
     border-radius:0 - or an earlier arc scoop curves it
     opacity:1       - or an earlier quilt rule's .95 applies      */
.hero::after{
  content:"";position:absolute;
  left:0;right:0;top:auto;bottom:0;height:34px;
  z-index:2;opacity:1;border-radius:0;
  background-repeat:repeat-x;
  background-position:bottom left;
  background-size:200px 34px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='34' viewBox='0 0 200 34' preserveAspectRatio='none'>\
<path d='M0 18 C 25 4, 75 4, 100 18 S 175 32, 200 18 L200 34 L0 34 Z' fill='%23F8F5EF'/>\
<path d='M0 26 C 30 34, 70 18, 100 26 S 170 34, 200 26 L200 34 L0 34 Z' fill='%23F8F5EF' opacity='0.5'/>\
</svg>")}
@media(max-width:760px){.hero::after{height:22px;background-size:130px 22px}}

/* --- CTAs: brand red, white text.
       Compound selectors match the specificity an earlier build's block uses
       (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of
       source order. --- */
.btn-red,
.hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{
  background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover,
.hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{
  background:var(--red-dk);border-color:var(--red-dk);color:#fff}
.btn-amber{background:var(--red);border-color:var(--red);color:#fff}
.btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)}
.hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}

.card::before,.svc-c::before{
  content:"";position:absolute;top:0;left:0;width:4px;height:100%;
  background:var(--line);border-radius:0}

.trust{background:var(--ink);color:#CFDCEA}
.trust .ic{color:#E8767B}
.eyebrow::before{background:var(--red)}
/* brand red on a navy field is a low-contrast pair, so eyebrows go light there */
.hero .eyebrow,.sec-dark .eyebrow{color:#F5F1E9}
.hero .eyebrow::before,.sec-dark .eyebrow::before{background:#E8767B}
.eyebrow-amber{color:#E8767B}
.sec-dark{background:linear-gradient(162deg,#164C7C,var(--ink))}
.big-q{border-left-color:var(--red)}
blockquote{border-left-color:var(--red)}
.ftr{background:var(--ink)}

h1,h2,h3{letter-spacing:-.018em}

/* "Port Charlotte, FL" is a long place name and the inherited h1 clamp pushed
   "FL" onto a line of its own. Measured across sizes: 3rem is the largest that
   still sets the headline as two clean lines in this column.
   NOTE: text-wrap:balance was tried first and made it WORSE - it balances
   across the accent <em> as well, giving five short ragged lines. Don't. */
.hero h1{font-size:clamp(2.05rem,3.9vw,3rem)}