/* ==========================================================================
   Accurate Air Solutions, LLC — accurateairsolutionsllc.com
   Hand-coded static site. Component vocabulary matches the DBA sites
   (hawkins-ac-site / callrrplumbing-site).

   Palette and type follow the AAS Brand Guidelines packet:
     primary  #0c1b56 navy · #26408b blue · #d2232a red · #9c1519 dark red
     neutral  #c5c6c8 grey · #ffffff white
     accent   #e1a900 yellow — SPECIAL USE ONLY, minimal and intentional,
              never in the logo and never as a primary brand colour
   Brand fonts are American Typewriter (header, ALL CAPS) / Minion Pro
   (subheads, ALL CAPS) / Avant Garde Demi (body). None are licensed for web,
   so the closest free equivalents stand in: Zilla Slab / Source Serif 4 /
   Poppins. Header type is uppercase per the guide.
   ========================================================================== */

:root{
  /* brand — exact values from the guidelines packet */
  --navy:#0c1b56;
  --blue:#26408b;
  --blue-lite:#3a5bb5;
  --red:#d2232a;
  --red-dark:#9c1519;
  --grey:#c5c6c8;
  --white:#fff;
  --yellow:#e1a900;      /* sparingly */

  /* derived neutrals for text and surfaces */
  --ink:#151d33;
  --slate:#5a6478;
  --slate-lite:#818b9f;
  --line:#dde3ee;
  --paper:#f1f4fa;
  --paper-2:#e6ebf6;
  --sky:#a9c2f0;

  /* metrics */
  --maxw:1240px;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 20px 50px -22px rgba(12,27,86,.40);
  --shadow-sm:0 10px 28px -14px rgba(12,27,86,.30);
  --shadow-xs:0 3px 12px rgba(12,27,86,.13);
  --ring:0 0 0 4px rgba(38,64,139,.22);
  --ease:cubic-bezier(.2,.8,.2,1);

  --f-disp:"Zilla Slab",Rockwell,"Roboto Slab",Georgia,serif;
  --f-sub:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-body:"Poppins",system-ui,-apple-system,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-body);color:var(--ink);background:var(--white);
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Header type: brand rule is ALL CAPS for the display face */
h1,h2,h3,h4{
  font-family:var(--f-disp);font-weight:700;line-height:1.1;margin:0 0 .5em;
  text-transform:uppercase;letter-spacing:.005em;
}
h1{font-size:clamp(1.95rem,4.2vw,3.15rem)}
h2{font-size:clamp(1.5rem,2.9vw,2.2rem)}
h3{font-size:1.14rem}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.center{text-align:center}
.u{text-decoration:underline}
.fine{font-size:.8rem;color:var(--slate);line-height:1.55}
/* marks content awaiting confirmation before launch — delete the rule once
   every .tbd is gone from the markup */
.tbd{
  font-style:normal;font-size:.86em;font-weight:600;color:var(--red-dark);
  background:#fdecec;border:1px dashed #e9a9ab;border-radius:6px;padding:.05em .45em;
  text-transform:none;letter-spacing:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-disp);font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.03em;
  padding:.8em 1.5em;border-radius:999px;border:2px solid transparent;
  background:var(--blue);color:var(--white);cursor:pointer;text-align:center;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn:hover{background:var(--blue-lite);text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-blaze{background:var(--red)}
.btn-blaze:hover{background:#e4353c}
.btn-blue{background:var(--navy)}
.btn-blue:hover{background:var(--blue)}
.btn-gold{background:var(--yellow);color:var(--navy)}
.btn-gold:hover{background:#f0bb1f}
.btn-line{background:transparent;border-color:currentColor;color:inherit}
.btn-line:hover{background:rgba(255,255,255,.14);box-shadow:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--blue)}
.btn-ghost:hover{background:var(--paper);box-shadow:none}
.btn-lg{font-size:1.02rem;padding:.92em 1.8em}
.btn-block{width:100%}

/* ---------- topbar ---------- */
.topbar{background:var(--navy);color:#c3d0ea;font-size:.84rem}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;min-height:40px}
.tb-item{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.tb-right{margin-left:auto;display:flex;gap:1.2rem;align-items:center}
.topbar a{color:var(--sky)}

/* ---------- header / nav ---------- */
/* nowrap on purpose: .nav uses margin-left:auto, and in a wrapping flex row that
   auto margin absorbs the free space and pushes .header-cta onto a second line.
   The <=470px block below opts back into wrapping, where two rows are intended. */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow-xs)}
.site-header .wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:.5rem 1.1rem;min-height:78px;padding-top:.4rem;padding-bottom:.4rem}
/* every header child holds its intrinsic size; see the .nav note below */
.brand-logo{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.brand-logo:hover{text-decoration:none}
.brand-logo img{width:54px;height:54px;flex:0 0 auto}
.brand-logo .bl-txt{display:flex;flex-direction:column;line-height:1.02;font-family:var(--f-disp);color:var(--navy)}
.brand-logo b{font-size:1.12rem;font-weight:700;text-transform:uppercase;letter-spacing:.005em;white-space:nowrap}
.brand-logo span{
  font-family:var(--f-body);font-size:.62rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);white-space:nowrap;margin-top:.15rem;
}

/* flex:0 0 auto, NOT min-width:0 — allowing the nav to shrink below its content
   width made it silently overlap the phone number instead of overflowing, which
   meant scrollWidth checks reported the header as fine when it wasn't. */
.nav{margin-left:auto;display:flex;align-items:center;gap:.2rem;flex:0 0 auto}
.nav>li{position:relative;list-style:none}
.nav ul{list-style:none;margin:0;padding:0}
.nav>li>a{
  display:block;padding:.6em .6em;border-radius:9px;font-family:var(--f-disp);
  font-weight:600;font-size:.86rem;color:var(--ink);text-transform:uppercase;
  letter-spacing:.01em;white-space:nowrap;
}
.nav>li>a:hover{background:var(--paper);text-decoration:none;color:var(--navy)}
.nav .has-menu>a::after{content:"";display:inline-block;margin-left:.4em;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.nav .menu{
  position:absolute;left:0;top:calc(100% + 6px);min-width:262px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:.45rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s var(--ease);
}
.nav .has-menu:hover .menu,.nav .has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none}
.nav .menu a{
  display:block;padding:.55em .8em;border-radius:8px;font-size:.88rem;color:var(--ink);
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.02em;font-weight:600;
}
.nav .menu a:hover{background:var(--paper);text-decoration:none;color:var(--navy)}

.header-cta{display:flex;align-items:center;gap:.8rem;flex:0 0 auto}
.header-call{font-family:var(--f-disp);font-weight:700;font-size:1.08rem;color:var(--navy);white-space:nowrap}
.header-call:hover{text-decoration:none;color:var(--blue)}
.header-call small{
  display:block;font-family:var(--f-body);font-size:.6rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);
}
.nav-toggle{display:none;background:var(--navy);color:#fff;border:0;border-radius:10px;padding:.6em .8em;font-size:1.1rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background-image:
    radial-gradient(880px 620px at 92% 116%,rgba(210,35,42,.34),transparent 64%),
    linear-gradient(100deg,rgba(12,27,86,.97) 0%,rgba(12,27,86,.90) 42%,rgba(26,48,112,.74) 100%),
    url("../img/bg-blue.webp");
  background-size:auto,auto,cover;background-position:center,center,center;
}
/* two-column hero: copy left, real job photography right */
.hero-grid{
  position:relative;display:grid;grid-template-columns:1.06fr .94fr;
  gap:3.4rem;align-items:center;padding:4rem 0 4.4rem;
}
.hero-copy{max-width:37rem}
.hero h1::after{
  content:"";display:block;width:104px;height:5px;background:var(--red);
  margin-top:1.15rem;border-radius:3px;
}
.hero-art{position:relative}
.ha-main{
  margin:0;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 34px 74px -22px rgba(0,0,0,.62);
}
.ha-main img{width:100%;display:block}
.ha-inset{
  position:absolute;left:-40px;bottom:-30px;width:43%;margin:0;
  border-radius:15px;overflow:hidden;border:5px solid var(--navy);
  box-shadow:0 24px 52px -14px rgba(0,0,0,.66);
}
.ha-inset img{width:100%;display:block}
.hero-inner{position:relative;padding:4.4rem 0 4rem;max-width:1000px}
.kicker{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-disp);
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--red);padding:.45em 1em;border-radius:999px;margin-bottom:1.2rem;
}
.hero h1{color:#fff;margin-bottom:.55em;letter-spacing:-.005em}
.hero .hl{color:var(--sky)}
.lead{
  font-size:clamp(1.03rem,1.6vw,1.22rem);color:#ccd9f2;max-width:64ch;margin-bottom:1.7rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.8rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{
  display:inline-flex;align-items:center;gap:.45em;font-size:.83rem;font-weight:500;
  color:#dce7f8;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  padding:.42em .9em;border-radius:999px;
}
.chip b{color:#fff;font-weight:600}

/* ---------- cert strip ---------- */
.certstrip{background:var(--paper);border-bottom:1px solid var(--line)}
.certstrip .wrap{display:flex;flex-wrap:wrap;gap:.7rem 2rem;padding:.95rem 20px;align-items:center;justify-content:center}
.cert{
  font-family:var(--f-disp);font-size:.82rem;font-weight:700;color:var(--navy);
  display:inline-flex;align-items:center;gap:.5em;text-transform:uppercase;letter-spacing:.03em;
}
.cert span{font-family:var(--f-body);font-weight:500;color:var(--slate);text-transform:none;letter-spacing:0}

/* ---------- stats ---------- */
.stats{background:var(--navy);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2.1rem 20px}
.stat{text-align:center}
.num{font-family:var(--f-disp);font-size:clamp(1.7rem,3.4vw,2.45rem);font-weight:700;line-height:1;color:#fff}
.lbl{
  display:block;margin-top:.45rem;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sky);font-weight:500;
}

/* ---------- sections ---------- */
.section{padding:4.2rem 0}
/* The AAS wallpaper is a real brand asset, but at full strength the monogram
   competes with body copy. A white wash knocks it back to texture, and text on
   these sections is set heavier and darker so it sits clearly on top. */
.section.alt{
  background-color:var(--paper);
  background-image:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66)),url("../img/bg-white.webp");
  background-size:cover,cover;background-position:center,center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sec-head{max-width:74ch;margin-bottom:2.3rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--slate);font-size:1.04rem;margin-bottom:0}
.tag{
  display:inline-block;font-family:var(--f-sub);font-size:.78rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem;
}

/* Type sitting on a patterned background needs more weight and contrast than the
   same type on flat white — mid-grey at 400 disappears into the monogram. */
.section.alt p,.leadblock p,
.section.alt li,.leadblock li,
.section.alt .sec-head p,.leadblock .sec-head p{
  color:var(--ink);font-weight:500;
}
/* …but anything inside a solid white card is already on a clean backdrop, so it
   keeps the lighter secondary treatment. FAQ answers and process steps sit
   directly on the pattern, so they are deliberately NOT in this list. */
.section.alt .svc .bd,.leadblock .svc .bd,
.section.alt .svc p,.leadblock .svc p,
.section.alt .svc li,.leadblock .svc li,
.section.alt .famcard p,.leadblock .famcard p,
.section.alt .tm-note,.leadblock .tm-note,
.section.alt .loc address,.leadblock .loc address,
.section.alt .leadform .sub,.leadblock .leadform .sub,
.section.alt .fine,.leadblock .fine{
  color:var(--slate);font-weight:400;
}
.section.alt .checks li,.leadblock .checks li{font-weight:500}
/* `.section.alt p` (0,2,1) outspecifies `.tm-role` (0,1,0), so the job titles
   rendered brand red on the white leadership block and ink on the patterned
   management block below it — same component, two colours. Same family of bug as
   the media-query shadowing: a broad later rule quietly beating a specific one. */
.section.alt .tm-role,.leadblock .tm-role{color:var(--red);font-weight:700}
/* Same trap as .tm-role: `.section.alt p` would repaint these. Named explicitly
   so a review card looks identical on white and on the patterned ground. */
.section.alt .rv blockquote,.leadblock .rv blockquote{color:var(--ink);font-weight:400}
.section.alt .rv figcaption span,.leadblock .rv figcaption span{color:var(--slate-lite);font-weight:400}
.section.alt .rv-cta p,.leadblock .rv-cta p{color:#d3dff6;font-weight:400}

/* Section divider. The previous version tiled the bold red/blue AAS monogram
   full-bleed at 64px; at that scale it read as a cropped, noisy stripe rather
   than a break. This is the same brand idea done quietly: a hairline across the
   full width, interrupted at centre by the real badge and one factual line, with
   a short brand-gradient rule either side. It separates the two blocks without
   adding a third heavy mass to a page that already has a navy band and a red one. */
.band-mark{position:relative;background:var(--white);padding:1.95rem 0}
/* One rule, navy rather than the grey hairline used inside sections, so the
   break reads as intentional. Earlier versions flanked the badge with two short
   gradient bars that sat on top of this line and doubled it up. */
.band-mark::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,var(--navy) 16%,var(--blue) 50%,var(--navy) 84%,transparent);
  opacity:.85;
}
.band-mark .wrap{position:relative;z-index:1;display:flex;justify-content:center}
.bm-core{
  display:flex;align-items:center;gap:.9rem;
  background:var(--white);padding:.3rem 1.5rem;
}
.bm-core img{width:44px;height:44px;flex:0 0 auto}
.bm-core b{
  font-family:var(--f-disp);font-size:.88rem;font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.115em;line-height:1.35;
}
@media (max-width:760px){
  /* At narrow widths the badge and the line fill the row, leaving two useless
     12px stubs of rule either side. Drop the centre rule and bracket the whole
     band instead — same "this is a break" signal, no vestigial fragments. */
  .band-mark{padding:1.25rem 0;border-block:1px solid var(--line)}
  .band-mark::before{display:none}
  .bm-core{padding:0;gap:.7rem}
  .bm-core img{width:36px;height:36px}
  .bm-core b{font-size:.76rem;letter-spacing:.08em}
}
@media (max-width:400px){
  /* Below this the full line wraps to two and the badge stops relating to it.
     Dropping "in Texas" keeps it on one line; the state is on every other block
     of this page already. */
  .bm-tx{display:none}
  .bm-core b{font-size:.72rem;letter-spacing:.05em;text-align:center}
  .bm-core img{width:32px;height:32px}
}

.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* service / content cards */
.svc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--blue-lite)}
.svc-img{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.04)}
.svc-body{padding:1.4rem 1.5rem 1.55rem;display:flex;flex-direction:column;flex:1}
.svc h3{margin-bottom:.45em;color:var(--navy)}
.svc .bd{color:var(--slate);font-size:.94rem;margin-bottom:1rem;flex:1}
.svc .more{
  font-family:var(--f-disp);font-weight:700;font-size:.86rem;color:var(--red);
  text-transform:uppercase;letter-spacing:.04em;
}
.svc .more::after{content:" →"}
/* padded card with no image (sidebars, link lists) */
.svc.plain{padding:1.5rem}
.svc.plain h3{margin-bottom:.7em}
.svc.plain ul{margin-bottom:0}

/* ---------- "at a glance" spec panel ---------- */
/* Its own component rather than a .svc: a static panel should not lift and
   change border colour on hover, and its padding must not depend on a wrapper
   element that a caller can forget to include. */
.glance{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--navy);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);
  padding:1.45rem 1.55rem 1.55rem;
}
.glance h3{
  margin:0 0 1.1rem;padding-bottom:.7rem;color:var(--navy);font-size:1.06rem;
  border-bottom:2px solid var(--line);
}
.glance dl{margin:0 0 1.4rem}
.glance dl>div{
  display:grid;grid-template-columns:5.9rem 1fr;gap:.2rem .9rem;
  padding:.62rem 0;border-bottom:1px solid var(--line);
}
.glance dl>div:last-child{border-bottom:0;padding-bottom:0}
.glance dt{
  font-family:var(--f-sub);font-size:.74rem;font-weight:700;color:var(--slate-lite);
  text-transform:uppercase;letter-spacing:.1em;line-height:1.9;
}
.glance dd{margin:0;font-size:.93rem;color:var(--ink);font-weight:500;line-height:1.5}
@media (max-width:420px){
  /* The HQ address squeezes badly against a fixed label column this narrow. */
  .glance dl>div{grid-template-columns:1fr;gap:.1rem}
  .glance dt{line-height:1.5}
}

/* checklists */
.checks{list-style:none;padding:0;margin:0 0 1.5rem}
.checks li{position:relative;padding-left:1.9em;margin-bottom:.6em;color:var(--ink)}
.checks li::before{
  content:"";position:absolute;left:0;top:.42em;width:1.1em;height:.6em;
  border-left:3px solid var(--red);border-bottom:3px solid var(--red);
  transform:rotate(-45deg);border-radius:1px;
}

/* ---------- lead block + form ---------- */
.leadblock{
  background-color:var(--paper);
  background-image:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66)),url("../img/bg-white.webp");
  background-size:cover,cover;background-position:center,center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4rem 0;
}
/* Was align-items:start, which parked every pixel of the height difference in
   one lump under the left column. The column now carries the branch numbers so
   the two sides are close in height, and centre splits whatever is left. */
.leadblock .split{align-items:center}
.lb-call{margin-bottom:1.9rem}
.dlines{border-top:1px solid var(--line);padding-top:1.5rem}
.dlines h3{
  font-family:var(--f-sub);font-size:.8rem;font-weight:700;color:var(--red);
  text-transform:uppercase;letter-spacing:.15em;margin:0 0 .9rem;
}
.dlines ul{list-style:none;margin:0 0 1.1rem;padding:0}
.dlines li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--line);
}
.dlines li:first-child{border-top:1px solid var(--line)}
.dl-city{
  font-family:var(--f-disp);font-size:1rem;font-weight:700;color:var(--navy);
  display:flex;flex-direction:column;gap:.15rem;line-height:1.25;
}
.dl-city span{
  font-family:var(--f-body);font-size:.76rem;font-weight:500;color:var(--slate-lite);
  letter-spacing:.02em;
}
.dl-tel{
  font-family:var(--f-disp);font-size:1.02rem;font-weight:700;color:var(--blue);
  white-space:nowrap;flex:0 0 auto;
}
.dl-tel:hover{color:var(--red);text-decoration:none}
.dl-mail{font-size:.88rem;margin:0}
@media (max-width:420px){
  .dlines li{flex-direction:column;align-items:flex-start;gap:.3rem}
}
.leadform{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow)}
.leadform h3{color:var(--navy);margin-bottom:.35em}
.leadform .sub{color:var(--slate);font-size:.92rem;margin-bottom:1.3rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field.full{grid-column:1/-1}
.field label{
  font-family:var(--f-sub);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);
}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:.98rem;color:var(--ink);
  padding:.7em .85em;border:1px solid var(--line);border-radius:10px;background:var(--white);
  transition:border-color .16s,box-shadow .16s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.field textarea{min-height:104px;resize:vertical}
/* Consent checkbox. `.field label` is uppercase 700 micro-type and `.field input`
   is width:100%, both of which are wrong for a sentence with a box in front of
   it — so these overrides are written with an extra class (0,2,0 / 0,2,1) rather
   than relying on source order. */
.field .cb{
  display:flex;flex-direction:row;align-items:flex-start;gap:.6em;cursor:pointer;
  font-family:var(--f-body);font-size:.86rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--slate);line-height:1.45;
}
.field .cb input[type=checkbox]{
  width:17px;height:17px;flex:0 0 17px;margin:.14em 0 0;padding:0;
  accent-color:var(--blue);cursor:pointer;
}
.form-note{margin-top:.9rem}
.form-status{display:none;margin-top:1rem;padding:.85em 1em;border-radius:10px;font-size:.93rem}
.form-status.ok{display:block;background:#e7f6ec;color:#146b30;border:1px solid #b6e2c4}
.form-status.err{display:block;background:#fdecec;color:var(--red-dark);border:1px solid #f3c4c4}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.step{position:relative;padding-top:.4rem}
.step .sn{
  width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;font-size:1.1rem;
  margin-bottom:.9rem;
}
.step h3{color:var(--navy)}
.step p{color:var(--slate);margin-bottom:0}

/* ---------- split / media ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;align-items:center}
.split.media-right .media{order:2}
.media .frame{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--paper-2);
}
.media .frame img{width:100%}
.media figcaption{
  font-size:.82rem;color:var(--slate);margin-top:.7rem;text-align:center;font-style:italic;
}
.badge{
  display:inline-flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:.9rem 1.15rem;box-shadow:var(--shadow-sm);
}
.badge .bn{font-family:var(--f-disp);font-weight:700;font-size:1.35rem;color:var(--navy);line-height:1}
.badge .bt{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-top:.3rem}

/* ---------- financing ---------- */
/* stretch, not start: the panel fills its column so the space under it reads as
   card padding rather than a hole. The facts list is a 2x2 so the left column
   isn't ~290px taller than the right. */
.finance{display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:center}
.finance .eyebrow{
  display:inline-block;font-family:var(--f-sub);font-size:.78rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem;
}
/* definition rows read as terms, not as a marketing tick-list */
.fin-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:1.35rem 2.4rem;
  margin:1.6rem 0 1.8rem;padding-top:1.5rem;border-top:1px solid var(--line);
}
.fin-facts>div{display:block}
.fin-facts dt{
  font-family:var(--f-sub);font-weight:700;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);margin-bottom:.3rem;
}
.fin-facts dd{margin:0;color:var(--ink);font-weight:500;font-size:.96rem;line-height:1.55}
.finance .btn-ghost{align-self:flex-start}

.fin-panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
.fin-panel-head{
  background:var(--navy);color:#fff;padding:.95rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--f-disp);font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.06em;
}
.fin-panel-head .fph-secure{
  font-family:var(--f-body);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  color:var(--sky);white-space:nowrap;
}
.fin-panel-body{padding:1.5rem 1.4rem 1.4rem}
.fin-lender{
  font-family:var(--f-disp);font-size:1.14rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;color:var(--navy);margin-bottom:.15em;line-height:1.2;
}
.fin-fdic{
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-lite);
  margin-bottom:1.1rem;
}
.fin-panel-body p{color:var(--slate);font-size:.94rem}
/* fills the panel with something useful rather than leaving a hole above the
   legal line — the alternative was an empty gap where margin-top:auto pushed it down */
.fin-steps{list-style:none;padding:0;margin:.2rem 0 1.4rem;counter-reset:fs}
.fin-steps li{
  counter-increment:fs;position:relative;padding-left:2.3rem;margin-bottom:.85rem;
  font-size:.93rem;color:var(--ink);font-weight:500;line-height:1.45;
}
.fin-steps li::before{
  content:counter(fs);position:absolute;left:0;top:-.05em;
  width:1.6rem;height:1.6rem;border-radius:50%;background:var(--paper);
  border:1px solid var(--line);color:var(--navy);
  font-family:var(--f-disp);font-weight:700;font-size:.8rem;
  display:grid;place-items:center;
}
.fin-steps li span{display:block;font-weight:400;color:var(--slate);font-size:.86rem}
.fin-panel-body .btn{margin:.4rem 0 1rem}
.fin-panel-body .fc-sub{font-size:.75rem;color:var(--slate-lite);margin-bottom:0;line-height:1.55}
/* inline emphasis, not a display-face shout mid-sentence */
.finance-partner{font-weight:600;color:var(--navy)}

/* ---------- blog ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.post{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--blue-lite)}
.post-img{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.post:hover .post-img img{transform:scale(1.04)}
.post-body{padding:1.35rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;margin-bottom:.7rem;
  font-family:var(--f-sub);font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;
}
.post-cat{color:var(--red)}
.post-date{color:var(--slate-lite)}
.post h3{margin-bottom:.5em;color:var(--navy);font-size:1.08rem;line-height:1.22}
.post h3 a{color:inherit}
.post h3 a:hover{color:var(--blue);text-decoration:none}
.post .dek{color:var(--slate);font-size:.93rem;flex:1;margin-bottom:1rem}
.post .more{
  font-family:var(--f-disp);font-weight:700;font-size:.84rem;color:var(--red);
  text-transform:uppercase;letter-spacing:.04em;
}
.post .more::after{content:" →"}

/* single post */
.article{max-width:none}
.article-head{max-width:52rem}
.article-body{max-width:44rem;font-size:1.04rem}
.article-body h2{margin-top:2.5rem;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.article-body h3{margin-top:1.9rem;font-size:1.08rem}
.article-body ul,.article-body ol{margin-bottom:1.3rem}
.article-body li{margin-bottom:.55em}
.article-body .callout{
  border-left:4px solid var(--red);background:var(--paper);
  padding:1.1rem 1.3rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.8rem 0;
}
.article-body .callout p:last-child{margin-bottom:0}
.article-body .callout strong{color:var(--navy)}
.article-figure{margin:2rem 0}
.article-figure img{border-radius:var(--radius);border:1px solid var(--line)}
.article-figure figcaption{font-size:.82rem;color:var(--slate);margin-top:.6rem;font-style:italic}
.byline{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
  padding:1rem 0;border-block:1px solid var(--line);margin-bottom:2rem;
  font-size:.86rem;color:var(--slate);
}
.byline b{color:var(--navy);font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.02em}
.sources{font-size:.84rem;color:var(--slate);border-top:1px solid var(--line);padding-top:1.2rem;margin-top:2.4rem}
.sources h3{font-size:.78rem;letter-spacing:.1em;color:var(--slate);margin-bottom:.6em}
.sources ul{padding-left:1.1em;margin-bottom:0}

@media (max-width:1000px){
  .postgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:2.6rem;padding:3.2rem 0 3.6rem}
  .hero-copy{max-width:none}
  .ha-inset{left:auto;right:-14px;bottom:-20px;width:38%}
}
@media (max-width:560px){
  .fin-facts{grid-template-columns:1fr;gap:1.1rem}
  .postgrid{grid-template-columns:1fr}
  .ha-inset{display:none}
  /* .caps and .markets collapse in the 560px block near the bottom of this
     file, NOT here: a later `max-width:1000px` block sets them to two columns,
     and equal-specificity rules are decided by source order, so a narrow-screen
     override written above it silently loses. Anything that a later, WIDER
     breakpoint also touches has to be declared after it. */
}

@media (max-width:1060px){
  .finance{grid-template-columns:1fr;gap:2rem}
}

/* ---------- capability tiles (image + overlaid label) ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--navy)}
.cap img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.cap:hover img{transform:scale(1.04)}
.cap-txt{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.35rem 1.2rem;
  background:linear-gradient(transparent,rgba(11,27,58,.30) 34%,rgba(11,27,58,.90) 72%,rgba(11,27,58,.96) 100%);
  color:#fff;
}
.cap-txt h3{color:#fff;margin-bottom:.3em;font-size:1.02rem}
.cap-txt p{color:#cfdcf4;font-size:.86rem;margin:0;line-height:1.5}

/* ---------- capability band (photographic backplate) ---------- */
/* The plate is already darkened and desaturated in assets.py, so this gradient
   only has to guarantee contrast under the headline, not rescue a bright photo.
   Gradient runs left-heavy because the copy is left-aligned and the flag — the
   part of the frame worth seeing — sits on the right. */
.capband{
  position:relative;overflow:hidden;background:var(--navy);
  border-block:1px solid rgba(255,255,255,.10);
}
.capband::before,.capband::after{content:"";position:absolute;inset:0;pointer-events:none}
.capband::before{background:url("../img/bg-capability.webp") center 34%/cover no-repeat}
.capband::after{
  background:
    linear-gradient(96deg,
      rgba(12,27,86,.95) 0%, rgba(12,27,86,.84) 34%,
      rgba(12,27,86,.58) 66%, rgba(38,64,139,.42) 100%),
    linear-gradient(rgba(12,27,86,.30),rgba(12,27,86,0) 40%,rgba(12,27,86,.34));
}
.capband>.wrap{position:relative;z-index:1}
.capband .sec-head h2{color:var(--white)}
.capband .sec-head p{color:#d3dff6;font-weight:400}
/* Brand red on navy is 3.07:1 — under AA for text this size. This tint of the
   same hue clears 7:1 and still reads as the brand accent. */
.capband .tag{color:#ff8a90}
/* On navy the tiles need an edge of their own or they dissolve into the band. */
.capband .cap{
  outline:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.66);
}

/* ---------- markets served ---------- */
/* Eight hairline-separated text cells read as a spreadsheet, and on the
   patterned background they washed out entirely. Each market now gets its own
   card and its own icon, on a clean ground with no wallpaper behind it. */
.markets{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.market{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.35rem 1.4rem;box-shadow:var(--shadow-xs);
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.market::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--red),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.market:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--sky)}
.market:hover::before{transform:scaleX(1)}
/* A pale tile with a red glyph disappeared into the card. A solid navy chip
   gives each card a real anchor and puts the brand colour to work; hover moves
   it to red so the grid feels alive without animating anything else. */
.mk-ico{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy),var(--blue));
  box-shadow:0 10px 22px -12px rgba(12,27,86,.62);
  margin-bottom:1.05rem;transition:background .32s var(--ease),box-shadow .32s var(--ease);
}
.mk-ico svg{width:27px;height:27px;stroke:var(--white);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.market:hover .mk-ico{
  background:linear-gradient(150deg,var(--red-dark),var(--red));
  box-shadow:0 12px 26px -12px rgba(210,35,42,.70);
}
.market h3{font-size:.95rem;color:var(--navy);margin-bottom:.45em;line-height:1.3}
.market p{font-size:.87rem;color:var(--slate);margin:0;line-height:1.58;font-weight:400}

/* ---------- google reviews ---------- */
.rvs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:1.5rem}
.rv{
  margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.5rem 1.5rem 1.35rem;
  box-shadow:var(--shadow-xs);display:flex;flex-direction:column;
  border-top:3px solid var(--blue);
}
.g-mark{width:22px;height:22px;flex:0 0 auto;margin-bottom:.9rem}
.rv blockquote{
  margin:0 0 1.1rem;font-size:.95rem;line-height:1.62;color:var(--ink);
  font-weight:400;flex:1;
}
/* Quotation marks are decorative, so they are drawn rather than typed — keeps the
   excerpt itself byte-identical to what the customer actually wrote. */
.rv blockquote::before{content:"\201C";color:var(--blue);font-family:var(--f-disp);
  font-size:1.5rem;line-height:0;vertical-align:-.25rem;margin-right:.1rem}
.rv blockquote::after{content:"\201D";color:var(--blue);font-family:var(--f-disp);
  font-size:1.5rem;line-height:0;vertical-align:-.25rem;margin-left:.08rem}
.rv figcaption{display:flex;flex-direction:column;gap:.1rem;border-top:1px solid var(--line);padding-top:.9rem}
.rv figcaption b{font-family:var(--f-disp);font-size:.95rem;color:var(--navy)}
.rv figcaption span{font-size:.78rem;color:var(--slate-lite);letter-spacing:.02em}

.rv-group{margin-bottom:2.4rem}
.rv-group:last-child{margin-bottom:0}
.rv-group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:1.1rem;padding-bottom:.7rem;border-bottom:2px solid var(--line);
}
.rv-group-head h3{margin:0;color:var(--navy);font-size:1.18rem}
.rv-group-head a{font-family:var(--f-disp);font-weight:700;font-size:.86rem;white-space:nowrap}

/* The leave-a-review block. Deliberately loud: it is the one thing on this page
   with a job to do. */
.rv-cta{
  display:grid;grid-template-columns:1fr auto;gap:1.6rem 2.4rem;align-items:center;
  background:var(--navy);color:#fff;border-radius:var(--radius-lg);
  padding:2.1rem 2.2rem;box-shadow:var(--shadow);
}
.rv-cta .tag{color:#ff8a90}          /* brand red is 3.07:1 on navy — under AA */
.rv-cta h3{color:#fff;margin:0 0 .35em;font-size:1.5rem}
.rv-cta p{color:#d3dff6;margin:0;font-weight:400}
.rv-cta-btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.rv-cta .btn-ghost{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);
}
.rv-cta .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.rv-cta.is-compact{padding:1.7rem 1.9rem}
.rv-cta.is-compact h3{font-size:1.28rem}

@media (max-width:980px){
  .rvs{grid-template-columns:1fr 1fr}
  .rv-cta{grid-template-columns:1fr;gap:1.3rem}
  .rv-cta-btns{justify-content:flex-start}
}
@media (max-width:640px){
  .rvs{grid-template-columns:1fr}
  .rv-group-head{flex-direction:column;align-items:flex-start;gap:.35rem}
  .rv-group-head a{white-space:normal}
  .rv-cta{padding:1.6rem 1.35rem}
  .rv-cta h3,.rv-cta.is-compact h3{font-size:1.18rem}
  .rv-cta-btns .btn{width:100%;text-align:center}
}

/* ---------- meet the team ---------- */
/* A six-column track so one grid handles both tiers: leadership cards span 3
   (two per row, larger), everyone else spans 2 (three per row). Eight people
   divide evenly either way, so no row is ever left with a hole in it — the
   failure mode that made the old gallery and markets blocks look unfinished. */
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}
.tm{
  grid-column:span 2;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* Leadership runs HORIZONTAL. Spanning three columns made the 4:5 portrait
   735px tall, which read as a poster rather than a feature. Photo beside the
   copy keeps the emphasis without the height. */
.tm.is-lead{
  grid-column:span 3;display:grid;grid-template-columns:minmax(0,44%) 1fr;
  align-items:stretch;
}
.tm:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tm-shot{position:relative;background:var(--paper-2);border-bottom:3px solid var(--red)}
.tm.is-lead .tm-shot{border-bottom:0;border-right:3px solid var(--navy)}
.tm.is-lead .tm-shot img{height:100%;aspect-ratio:auto;min-height:330px}
/* .tm-note{flex:1} pushes the email to the card floor, which is right for the
   equal-height 3-up cards but left a dead band inside the short lead cards.
   Leads keep their content as one centred block instead. */
.tm.is-lead .tm-body{justify-content:center}
.tm.is-lead .tm-note{flex:0 0 auto;margin-bottom:.9rem}
.tm-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block}
.tm-body{padding:1.35rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.tm-body h3{font-size:1.12rem;color:var(--navy);margin:0 0 .2em}
.tm.is-lead .tm-body h3{font-size:1.32rem}
.tm-role{
  font-family:var(--f-sub);font-size:.8rem;font-weight:700;color:var(--red);
  text-transform:uppercase;letter-spacing:.09em;margin:0 0 .75rem;line-height:1.35;
}
.tm-note{font-size:.9rem;color:var(--slate);margin:0 0 1.1rem;line-height:1.55;flex:1}
.tm-mail{
  font-family:var(--f-disp);font-weight:700;font-size:.87rem;color:var(--blue);
  /* break-all chopped addresses mid-domain ("...solutionsllc.co / m"). The
     markup carries a <wbr> after the @, so word-break lets it split there. */
  overflow-wrap:break-word;
}
.tm-mail:hover{color:var(--red);text-decoration:none}
@media (max-width:980px){
  /* Four columns: leads span 4 (one per row), the rest span 2 (two per row). */
  .team{grid-template-columns:repeat(4,1fr)}
  .tm{grid-column:span 2}
  .tm.is-lead{grid-column:span 4;grid-template-columns:minmax(0,34%) 1fr}
}
@media (max-width:620px){
  .team{grid-template-columns:1fr;gap:1.25rem}
  /* Every one of these has to name .tm.is-lead as well. `.tm.is-lead` is (0,2,0)
     and beats a bare `.tm` (0,1,0) even from inside this media block, so the
     leadership cards kept their 44% photo column and their 330px min-height and
     ended up with a tall band of dead space beside two lines of text. */
  .tm,.tm.is-lead{
    grid-column:span 1;display:grid;grid-template-columns:118px 1fr;
    align-items:stretch;
  }
  .tm-shot{border-bottom:0;border-right:3px solid var(--red)}
  .tm.is-lead .tm-shot{border-bottom:0;border-right:3px solid var(--navy)}
  .tm-shot img,.tm.is-lead .tm-shot img{
    height:100%;aspect-ratio:auto;min-height:168px;
  }
  .tm-body,.tm.is-lead .tm-body{padding:1.05rem 1.1rem;justify-content:flex-start}
  .tm-body h3,.tm.is-lead .tm-body h3{font-size:1.06rem}
  .tm-role{font-size:.72rem;letter-spacing:.06em;margin-bottom:.55rem}
  .tm-note,.tm.is-lead .tm-note{font-size:.86rem;margin-bottom:.8rem}
  .tm-mail{font-size:.78rem}
}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-xs);background:var(--paper-2)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery .wide{grid-column:span 2}
.gallery .wide img{aspect-ratio:2/1}

/* ---------- bands ---------- */
.band-blue{background:var(--navy);color:#fff;padding:3.4rem 0}
.band-blue h2{color:#fff}
.band-blue p{color:#ccd9f2}
.band-blue a{color:var(--sky)}

/* ---------- locations ---------- */
.loc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.7rem;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;
}
.loc h3{color:var(--navy);margin-bottom:.15em}
.loc h3 small{font-size:.6em;color:var(--slate);font-weight:600}
.loc .who{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);
  font-weight:700;margin-bottom:.9rem;font-family:var(--f-sub);
}
.loc address{font-style:normal;color:var(--slate);font-size:.94rem;margin-bottom:.9rem}
.loc .scope{list-style:none;padding:0;margin:0 0 1.2rem}
.loc .scope li{font-size:.9rem;color:var(--ink);padding-left:1.4em;position:relative;margin-bottom:.32em}
.loc .scope li::before{content:"▪";position:absolute;left:0;color:var(--blue);font-size:1.1em;line-height:1}
.loc .tel{font-family:var(--f-disp);font-weight:700;font-size:1.24rem;color:var(--navy);margin-bottom:.9rem;display:inline-block}
.loc .tel:hover{text-decoration:none;color:var(--blue)}
.town-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.town-links a{font-size:.86rem;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.38em .9em;color:var(--ink)}
.town-links a:hover{background:var(--blue);color:#fff;border-color:var(--blue);text-decoration:none}

/* ---------- brand family / DBA cards ---------- */
/* Each card wears its own DBA's identity — Hawkins is blue-on-white art, Double R
   is white/orange on black — so the family reads as three real brands rather than
   two identical text boxes. */
.fam{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.famcard{
  --dba:var(--blue);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow);display:flex;flex-direction:column;
  border-top:5px solid var(--dba);
}
.fam-logo{
  display:grid;place-items:center;padding:2rem 1.6rem 1.7rem;min-height:180px;
  background:var(--fam-logo-bg,var(--paper));
}
.fam-logo img{max-height:128px;width:auto;max-width:100%}
.fam-body{padding:1.5rem 1.6rem 1.6rem;display:flex;flex-direction:column;flex:1}
.famcard .who{
  font-family:var(--f-sub);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dba);font-weight:700;margin-bottom:.8rem;
}
.famcard p{color:var(--slate);font-size:.95rem;margin-bottom:1rem}
.fam-lic{
  font-family:var(--f-sub);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate-lite);margin-bottom:1.3rem !important;
}
.fam-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;align-items:center}
.fam-actions .btn{background:var(--dba);border-color:var(--dba)}
.fam-actions .btn:hover{filter:brightness(1.12);background:var(--dba)}
.fam-actions .fam-tel{
  font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:var(--navy);
  white-space:nowrap;
}
.fam-actions .fam-tel:hover{color:var(--dba);text-decoration:none}

/* Hawkins — brand blue, logo art is transparent so it sits on a light field */
.famcard.is-hawkins{--dba:#25408e;--fam-logo-bg:#f4f7fd}
/* Double R — the supplied artwork is on an opaque black field, so the logo well
   is the same black and the two blend seamlessly */
.famcard.is-doubler{--dba:#f47521;--fam-logo-bg:#000}
.famcard.is-doubler .fam-logo img{max-height:104px}

/* visually hidden but available to screen readers and document outline */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{
  cursor:pointer;font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  text-transform:uppercase;letter-spacing:.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--red);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.9rem 0 0;color:var(--slate)}

/* ---------- cta (emergency band) ---------- */
/* Photography under a red duotone rather than flat brand red — this is the
   highest-intent block on the site and flat colour wasted it. */
.cta-blaze{
  position:relative;color:#fff;padding:3.9rem 0 3.7rem;overflow:hidden;
  border-top:5px solid var(--navy);
}
.cta-blaze::before{
  content:"";position:absolute;inset:0;
  background:url("../img/cta-response.webp") center 26%/cover no-repeat;
}
.cta-blaze::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(110,15,18,.93) 0%,rgba(156,21,25,.84) 44%,rgba(210,35,42,.60) 100%),
    url("../img/bg-red.webp") center/cover;
  mix-blend-mode:multiply;
}
.cta-blaze .wrap{position:relative;z-index:1}
.cta-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:center}
.cta-eyebrow{
  display:inline-flex;align-items:center;gap:.55em;margin-bottom:.9rem;
  font-family:var(--f-sub);font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
}
.cta-eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.28);
}
.cta-left h2{color:#fff;margin-bottom:.4em;font-size:clamp(1.6rem,3.1vw,2.4rem)}
.cta-sub{color:#fbe3e4;font-size:1.06rem;margin-bottom:1.5rem;max-width:46ch}
/* trust facts as a divided row, not a loose sentence fragment */
.cta-facts{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:.5rem 0;
}
.cta-facts li{
  font-size:.86rem;color:#fff;font-weight:500;padding:0 1.1rem;
  border-left:1px solid rgba(255,255,255,.34);line-height:1.3;
}
.cta-facts li:first-child{padding-left:0;border-left:0}

/* solid white panel — maximum contrast against the red, reads as a real dispatch card */
.cta-card{
  background:var(--white);border-radius:var(--radius-lg);padding:1.7rem 1.5rem 1.5rem;
  text-align:center;box-shadow:0 26px 60px -20px rgba(0,0,0,.55);
  border-top:5px solid var(--navy);
}
.cta-card .cta-label{
  display:block;font-family:var(--f-sub);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:.5rem;
}
.cta-card .cta-num{
  display:block;font-family:var(--f-disp);font-weight:700;color:var(--navy);
  font-size:clamp(1.7rem,2.7vw,2.15rem);line-height:1.05;letter-spacing:-.01em;
}
.cta-card .cta-num:hover{color:var(--red);text-decoration:none}
.cta-card .btn{margin:1.15rem 0 .9rem}
.cta-card .cta-fine{font-size:.76rem;color:var(--slate);margin:0;line-height:1.5}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#a6b5d2;padding:3.4rem 0 1.6rem;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem}
.site-footer h4{
  font-family:var(--f-sub);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem;font-weight:700;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5em}
.site-footer a{color:#a6b5d2}
.site-footer a:hover{color:#fff}
.fbrand img{width:78px;height:78px;margin-bottom:.9rem}
.site-footer .fbrand b{
  display:block;font-family:var(--f-disp);font-size:1.14rem;font-weight:700;color:#fff;
  margin-bottom:.35rem;text-transform:uppercase;
}
.site-footer address{font-style:normal;margin-bottom:1rem}
.lic{font-size:.82rem;color:#8697b8;line-height:1.7}
.foot-bot{border-top:1px solid rgba(255,255,255,.13);padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.84rem;color:#8697b8}
.foot-bot .tb-right{margin-left:auto}

/* ---------- page header (interior) ---------- */
.pagehead{
  position:relative;color:#fff;padding:3.1rem 0 2.8rem;overflow:hidden;
  background-image:linear-gradient(105deg,rgba(12,27,86,.95) 0%,rgba(12,27,86,.82) 55%,rgba(38,64,139,.66) 100%),url("../img/bg-blue.webp");
  background-size:cover,cover;background-position:center,center;
}
.pagehead .wrap{position:relative}
.pagehead h1{color:#fff;margin-bottom:.35em;font-size:clamp(1.75rem,3.7vw,2.75rem)}
.pagehead p{color:#ccd9f2;max-width:64ch;margin-bottom:0;font-size:1.04rem}
.crumbs{font-size:.83rem;color:var(--sky);margin-bottom:.9rem}
.crumbs a{color:var(--sky)}
.crumbs span{color:#7d93bd;margin:0 .4em}

/* ---------- prose ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.8rem;color:var(--navy)}
.prose ul li{margin-bottom:.5em}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .caps{grid-template-columns:1fr 1fr}
  .markets{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid-4,.gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .wide{grid-column:span 2}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:1.6rem}
  .cta-grid{grid-template-columns:1fr}
}
/* Six nav tabs plus the wordmark, phone and button need ~1400px to coexist, which
   is wider than most laptops. So between the breakpoints we shed the least
   valuable elements first — the Request Service button (the phone is the real
   conversion), then the tagline and some wordmark size — and only fall back to
   the hamburger when the tabs themselves stop fitting. */
@media (max-width:1330px){
  .header-cta .btn{display:none}
}
@media (max-width:1200px){
  .brand-logo b{font-size:1rem}
  .brand-logo span{display:none}
  .brand-logo img{width:48px;height:48px}
}
@media (max-width:1140px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);padding:.6rem;max-height:76vh;overflow:auto;
  }
  .nav.open{display:flex}
  .nav>li>a{padding:.75em .9em}
  .nav .menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;margin:0 0 .4rem .9rem;padding:0 0 0 .4rem;
  }
  .nav-toggle{display:block}
  .header-cta{margin-left:auto}
  .header-cta .btn{display:none}
}
@media (max-width:880px){
  .split,.grid-2,.grid-3,.fam,.steps{grid-template-columns:1fr}
  .split.media-right .media{order:0}
  .tb-hide{display:none}
  .hero-inner{padding:3.2rem 0 3rem}
  .section{padding:3.2rem 0}
}
@media (max-width:700px){
  .brand-logo span{display:none}
  .brand-logo b{font-size:1rem}
  .brand-logo img{width:46px;height:46px}
  /* let the topbar strapline wrap instead of forcing the page wide */
  .tb-item{white-space:normal}
}
@media (max-width:470px){
  /* header becomes two rows: wordmark, then phone + menu button */
  .site-header .wrap{flex-wrap:wrap}
  .header-cta{width:100%;margin-left:0;justify-content:space-between}
  .header-call{font-size:1.02rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .caps,.markets{grid-template-columns:1fr}
  /* Eight stacked cards with the icon above the text made for a very long
     scroll. On one column the icon moves beside the copy instead, which roughly
     halves the height of the block. */
  .market{display:grid;grid-template-columns:auto 1fr;column-gap:1.05rem;
    align-items:start;padding:1.2rem 1.15rem}
  .mk-ico{width:44px;height:44px;border-radius:11px;margin-bottom:0;grid-row:span 2}
  .mk-ico svg{width:23px;height:23px}
  .market h3{margin-bottom:.35em}
  .grid-4,.foot-grid,.gallery{grid-template-columns:1fr}
  .gallery .wide{grid-column:span 1}
  .fgrid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .stats .wrap{grid-template-columns:1fr;gap:1.3rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{
  .site-header,.topbar,.nav,.cta-blaze,.leadblock,.site-footer,.band-mark{display:none}
  body{font-size:12pt;color:#000}
  .hero-bg,.pagehead{background:none!important}
  .hero h1,.pagehead h1,.pagehead p{color:#000!important}
}