/* ==========================================================================
   Tampa Rat Control — design system
   Built from the HomeTeam Pest Defense screen capture supplied by the client.
   Tokens (colour, type, radius) were read off the live reference with
   getComputedStyle rather than eyeballed, then adapted to a rat-only,
   phone-first lead gen site.

   Headings never set their own colour. They inherit, so a dark band paints
   them white and a light card inside that band paints them back to navy.
   This is deliberate: a blanket `.band-navy h3 { color:#fff }` is what
   produced white-on-white cards on a previous build.
   ========================================================================== */

:root {
  /* Reference palette, measured */
  --navy: #002341;        /* headings, rgb(0,35,65) */
  --navy-band: #0e2e52;   /* dark section background */
  --navy-deep: #012e55;
  --navy-foot: #001a31;
  --cyan: #007db3;        /* primary button: white text on this measures 4.58:1 */
  /* The reference's link cyan is #088ec7, which is only 3.68:1 on white and
     fails AA for body-size text. Darkened to the nearest tone that clears 4.5
     on every light surface used here (6.16 white / 5.62 mint). */
  --cyan-link: #00679a;
  --cyan-bright: #0092d0; /* the call band */
  --mint: #eef7ec;        /* fact cards */
  --mint-line: #d7ecd2;

  --ink: #333333;
  --ink-2: #4d4d4d;
  --muted: #666666;
  --line: #e2e8ee;
  --off: #fafafa;
  --pale: #f5f9fb;
  --white: #ffffff;

  /* Reference radii: 6px cards, 4px buttons, 3px chips, 50% icon circles */
  --r-card: 6px;
  --r-btn: 4px;
  --r-sm: 3px;

  --shadow: 0 0 10px rgba(16, 24, 40, 0.08), 0 0 24px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 10px 34px rgba(0, 35, 65, 0.14);

  --wrap: 1200px;
  --gut: 24px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan-link); }

h1, h2, h3, h4 {
  color: inherit;               /* see header comment */
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 .55em;
}

h1 { font-size: clamp(2rem, 5vw, 3.05rem); }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 900px; }

section { padding: 76px 0; }
.band-navy { background: var(--navy-band); color: #dce7f2; }
.band-navy h2, .band-navy h3 { color: inherit; }
.band-pale { background: var(--pale); }
.band-off { background: var(--off); }

.kicker {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-link);
  margin: 0 0 .7em;
}
.band-navy .kicker,
.bleed-navy .kicker { color: #7ec8ea; }

.lede { font-size: 1.14rem; color: var(--ink-2); }
.band-navy .lede { color: #c3d5e6; }

.center { text-align: center; }
.center .lede { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--r-btn);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--cyan); color: #fff; }
.btn-primary:hover { background: #00679a; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #013a67; }
.btn-ghost { background: #fff; color: var(--navy); border-color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.86); }
.btn-outline { background: transparent; color: var(--cyan); border-color: var(--cyan); }
.btn-outline:hover { background: var(--cyan); color: #fff; }

.btn-lg { min-height: 60px; padding: 16px 34px; font-size: 1.08rem; }

/* An inline <svg> with only a viewBox has no intrinsic size, so inside a
   stretching flex column it grew to 200px and pushed the hero call button
   below the fold at 380x667. Every icon gets an explicit box. */
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-lg svg { width: 21px; height: 21px; }

.textlink {
  font-weight: 700;
  color: var(--cyan-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* ---------- utility bar -------------------------------------------------- */

.ubar {
  background: var(--cyan);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
}
.ubar .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  min-height: 44px;
  flex-wrap: wrap;
}
.ubar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; }
.ubar a:hover { text-decoration: underline; }
.ubar .ubar-note { margin-right: auto; color: #fff; font-weight: 600; }
.ubar svg { width: 15px; height: 15px; flex: none; }

/* ---------- header ------------------------------------------------------- */

.hdr { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.hdr .wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.logo-mark {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--navy);
  display: grid; place-items: center;
}
.logo-mark svg { width: 24px; height: 24px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-weight: 800; font-size: 1.16rem; color: var(--navy); letter-spacing: -.02em; }
.logo-sub { font-size: .64rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--cyan); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav a:hover { color: var(--cyan); }

.navtoggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--navy);
  font-size: 1.35rem;
  cursor: pointer;
}

/* ---------- hero --------------------------------------------------------- */

.hero { position: relative; color: #fff; isolation: isolate; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Scrim strength is set by the worst case, not by taste: a pure-white cloud
   pixel under this gradient still measures 5.75:1 against the white H1 and
   4.89:1 against the subhead. At the reference's lighter .52 midpoint the
   subhead fell to 3.4:1 over the sky in this photograph. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,26,49,.68) 0%, rgba(0,26,49,.66) 45%, rgba(0,35,65,.90) 100%);
}
.hero-inner { padding: 96px 0 84px; text-align: center; }
.hero h1 { color: #fff; max-width: 17ch; margin-inline: auto; text-shadow: 0 2px 18px rgba(0,20,40,.5); }
.hero h1 .accent { color: #7fd2f5; }
.hero-sub {
  font-size: 1.16rem;
  color: #e4eef7;
  max-width: 640px;
  margin: 0 auto 30px;
  text-shadow: 0 1px 10px rgba(0,20,40,.5);
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }

/* neighborhood finder: the reference's zip-code box, made hyperlocal */
.finder {
  background: #fff;
  border-radius: var(--r-btn);
  padding: 7px 7px 7px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.finder svg { width: 19px; height: 19px; color: var(--cyan); flex: none; }
.finder select {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  min-height: 44px;
  outline: none;
  cursor: pointer;
}
.finder a {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--cyan);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
  text-decoration: none;
}
.finder a svg { width: 18px; height: 18px; color: #fff; }

.hero-strip {
  background: rgba(0,26,49,.55);
  border-top: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(3px);
}
.hero-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 34px;
  justify-content: center;
  padding-block: 14px;
  font-size: .93rem;
  font-weight: 600;
  color: #d9e8f4;
}
.hero-strip span { display: inline-flex; align-items: center; gap: 8px; }
.hero-strip svg { width: 15px; height: 15px; color: #7fd2f5; flex: none; }

/* ---------- intro split + mint fact cards -------------------------------- */

.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split2 h2 { color: var(--navy); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fact {
  background: var(--mint);
  border: 1px solid var(--mint-line);
  border-radius: var(--r-card);
  padding: 26px 22px;
}
.fact-stat { font-size: 1.55rem; font-weight: 800; color: var(--navy); line-height: 1.1; margin-bottom: 6px; }
.fact-label { font-size: .95rem; color: var(--ink-2); }

/* ---------- service cards ------------------------------------------------ */

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.card-svc img { width: 100%; height: 218px; object-fit: cover; border-radius: var(--r-card); }
.card-svc h3 { color: var(--navy); margin: 18px 0 .4em; }
.card-svc p { color: var(--ink-2); font-size: .99rem; }

.cards-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card-mini {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  background: #fff;
  text-decoration: none;
  display: block;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card-mini:hover { border-color: var(--cyan); box-shadow: var(--shadow); }
.card-mini .eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.card-mini h3 { font-size: 1.06rem; color: var(--navy); margin: 8px 0 .45em; }
.card-mini p { color: var(--ink-2); font-size: .93rem; margin: 0; }

/* ---------- full-bleed split band (photo | colour) ----------------------- */

.bleed { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.bleed-img { position: relative; min-height: 460px; }
.bleed-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed-body { padding: 74px 56px; }
.bleed-body .inner { max-width: 560px; }
.bleed-navy { background: var(--navy-band); color: #d2e0ee; }
.bleed-navy h2 { color: #fff; }
/* The reference runs white body copy on this bright cyan. Measured, that is
   3.49:1 and fails AA. Ink on the same cyan measures 4.57:1, so the band keeps
   its colour and flips the text instead of muddying the brand blue. */
.bleed-cyan { background: var(--cyan-bright); color: var(--navy); }
.bleed-cyan h2 { color: var(--navy); }

.adv { list-style: none; margin: 26px 0 0; padding: 0; }
.adv li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.16); }
.adv li:first-child { border-top: 0; padding-top: 4px; }
.adv-icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
}
.adv-icon svg { width: 21px; height: 21px; color: #7fd2f5; }
.adv h3 { font-size: 1.04rem; color: #fff; margin: 0 0 .3em; }
.adv p { margin: 0; font-size: .96rem; color: #bed2e4; }

/* ---------- six point signature module ----------------------------------- */

.six { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }

.six-card {
  background: #fff;
  border-radius: var(--r-card);
  padding: 34px 30px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.six-card h3 { color: var(--navy); text-align: center; font-size: 1.35rem; margin-bottom: .2em; }
.six-card .six-tag { text-align: center; font-size: .9rem; color: var(--muted); font-style: italic; margin-bottom: 18px; }
.six-card .rule { width: 74px; height: 3px; background: var(--cyan); margin: 0 auto 24px; border-radius: 2px; }
.six-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.six-item { display: flex; gap: 12px; }
.six-item svg { width: 26px; height: 26px; color: var(--navy); flex: none; margin-top: 2px; }
.six-item h4 { font-size: .84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); margin: 0 0 .3em; }
.six-item p { font-size: .8rem; line-height: 1.45; color: var(--ink-2); margin: 0; }

.six-list { list-style: none; margin: 0; padding: 0; }
.six-list li { border-top: 1px solid rgba(255,255,255,.16); }
.six-list li:first-child { border-top: 0; }
.six-row { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.six-num {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center;
  font-weight: 800;
  color: #fff;
}
.six-row h3 { font-size: 1.1rem; color: #fff; margin: 0; }
.six-row p { margin: .3em 0 0; font-size: .94rem; color: #bed2e4; }
/* the open item, mirroring the reference's active white card */
.six-list li.open { background: #fff; border-radius: var(--r-card); border-top-color: transparent; }
.six-list li.open .six-row h3 { color: var(--navy); }
.six-list li.open .six-row p { color: var(--ink-2); }
.six-list li.open .six-num { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- signs grid --------------------------------------------------- */

.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sign {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 24px;
}
.sign-n {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--navy);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: .9rem;
  margin-bottom: 14px;
}
.sign h3 { font-size: 1.06rem; color: var(--navy); }
.sign p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ---------- rodent id ---------------------------------------------------- */

.ids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.idcard { background: #fff; border-radius: var(--r-card); padding: 28px 26px; color: var(--ink); }
.idcard h3 { color: var(--navy); margin-bottom: .15em; }
.idcard .latin { font-style: italic; color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
.idcard dt { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-top: 14px; }
.idcard dd { margin: 4px 0 0; font-size: .95rem; color: var(--ink-2); }

/* ---------- coverage directory (the reference's branch list) ------------- */

.coverage-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 28px;
}
.cov-group h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.02rem; color: var(--navy); margin-bottom: .7em;
}
.cov-group h3 svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.cov-group ul { list-style: none; margin: 0; padding: 0; }
.cov-group li { margin-bottom: 2px; }
.cov-group a {
  color: var(--cyan-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .96rem;
  display: inline-block;
  min-height: 34px;
  line-height: 34px;
}
.cov-group .plain { color: var(--ink-2); text-decoration: none; }

/* ---------- prose + sticky call panel ------------------------------------ */

.body-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; align-items: start; }
.prose h2 { color: var(--navy); margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--navy); margin-top: 1.5em; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--r-card); margin: 26px 0; }
.prose figure { margin: 26px 0; }
.prose figcaption { font-size: .87rem; color: var(--muted); margin-top: 8px; }

.callpanel {
  position: sticky; top: 100px;
  background: var(--navy);
  color: #cfe0ef;
  border-radius: var(--r-card);
  padding: 30px 26px;
}
.callpanel h3 { color: #fff; font-size: 1.2rem; }
.callpanel .num {
  display: block;
  font-size: 1.72rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  margin: 4px 0 6px;
  letter-spacing: -.01em;
}
.callpanel p { font-size: .93rem; margin-bottom: 1em; }
.callpanel .btn { width: 100%; }
.panel-list { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.16); font-size: .9rem; }
.panel-list li { display: flex; gap: 9px; margin-bottom: 8px; }
.panel-list svg { width: 15px; height: 15px; color: #7fd2f5; flex: none; margin-top: 5px; }

/* ---------- faq ---------------------------------------------------------- */

.faq { max-width: 880px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  margin-bottom: 12px;
  padding: 0 22px;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.04rem;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--cyan); line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details > p { color: var(--ink-2); margin: 0 0 18px; font-size: .99rem; }

/* ---------- cta band ----------------------------------------------------- */

.cta-num {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -.02em;
  min-height: 56px;
}
.cta-num svg { width: 30px; height: 30px; flex: none; }
.bleed-cyan .lede { color: var(--navy); }
.bleed-cyan .hours { color: var(--navy); font-weight: 700; }

/* ---------- page headers (service / location / plain) -------------------- */

.phead { position: relative; color: #fff; isolation: isolate; }
.phead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.phead::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,26,49,.72) 0%, rgba(0,35,65,.88) 100%);
}
.phead-inner { padding: 66px 0 58px; max-width: 780px; }
.phead h1 { color: #fff; }
.phead p { font-size: 1.12rem; color: #dbe8f4; margin-bottom: 26px; }
.phead .kicker { color: #7fd2f5; }

.phead-plain { background: var(--navy); color: #fff; }
.phead-plain .phead-inner { padding: 58px 0 50px; }
.phead-plain h1 { color: #fff; }
.phead-plain p { color: #cfe0ef; }

.crumbs { font-size: .86rem; color: var(--muted); padding: 16px 0; }
.crumbs a { color: var(--cyan-link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 7px; color: #b9c4cf; }

/* ---------- footer ------------------------------------------------------- */

.foot { background: var(--navy-foot); color: #a9bed2; font-size: .94rem; padding: 62px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot h4 { font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7fd2f5; margin-bottom: 1.1em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 4px; }
.foot a { color: #cddced; text-decoration: none; display: inline-block; min-height: 34px; line-height: 34px; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot .foot-num { font-size: 1.35rem; font-weight: 800; color: #fff; min-height: 44px; line-height: 44px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 46px; padding: 26px 0 34px; font-size: .84rem; color: #8ba3ba; }
.disclaimer { max-width: 900px; margin: 0 0 14px; line-height: 1.6; }

/* ---------- sticky mobile call bar --------------------------------------- */

.stickycall { display: none; }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1040px) {
  .cards-mini { grid-template-columns: repeat(2, 1fr); }
  .coverage-cols { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  section { padding: 56px 0; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gut) 16px;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { min-height: 50px; border-bottom: 1px solid var(--line); }
  .navtoggle { display: block; order: 3; }
  /* Logo, call button and toggle stay on ONE row. `flex-wrap: wrap` here used
     to drop the button and toggle onto a second line, which pushed the hero
     down and read as a broken header. Everything below is about making the
     three items fit 380px rather than letting them wrap. */
  .hdr .wrap { position: relative; flex-wrap: nowrap; min-height: 64px; gap: 10px; }
  /* The logo is the only flexible item in the row. min-width:0 plus hidden
     overflow means that if space ever runs genuinely short it ellipsises
     rather than shoving the button and toggle off the edge. */
  .logo { gap: 9px; min-width: 0; min-height: 44px; }
  .logo-text { min-width: 0; overflow: hidden; }
  .logo-name, .logo-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-mark svg { width: 22px; height: 22px; }
  .logo-name { font-size: 1.05rem; }
  .logo-sub { font-size: .58rem; letter-spacing: .15em; }
  .hdr .btn { padding: 10px 14px; font-size: .9rem; min-height: 44px; gap: 7px; white-space: nowrap; flex: none; }
  .navtoggle { flex: none; width: 44px; height: 44px; }

  .split2, .six, .bleed, .body-split { grid-template-columns: 1fr; gap: 34px; }
  .cards3, .signs, .ids { grid-template-columns: 1fr; gap: 22px; }
  .bleed-img { min-height: 260px; }
  .bleed-body { padding: 44px var(--gut); }
  .callpanel { position: static; }
  .six-card { padding: 26px 20px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }

  /* Standalone link lists go to a 44px target on touch. Inline links inside
     prose are left alone: WCAG exempts links set in a run of text. */
  .cov-group a, .foot a { min-height: 44px; line-height: 44px; }

  /* On a phone the header call button drops the number and becomes a square
     icon. The number set beside the icon was eating roughly 90px and crowding
     the logo off the row. The tel: link is unchanged and the sticky bottom bar
     still shows the full number, so nothing is lost. aria-label carries it for
     screen readers. */
  .hdr .btn .btn-label { display: none; }
  .hdr .btn {
    width: 48px; min-width: 48px; height: 48px; min-height: 48px;
    padding: 0; gap: 0;
  }
  .hdr .btn svg { width: 20px; height: 20px; }

  .ubar .ubar-note { display: none; }
  .ubar .wrap { justify-content: center; gap: 18px; }
  .hero-inner { padding: 52px 0 40px; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  .hero-sub { font-size: 1.02rem; margin-bottom: 22px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-strip .wrap { gap: 6px 18px; font-size: .84rem; }
  .facts, .six-grid, .coverage-cols { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }

  /* sticky call bar, mobile only, never over the footer */
  .stickycall {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--cyan);
    box-shadow: 0 -4px 18px rgba(0,26,49,.24);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  .stickycall a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
  }
  .stickycall svg { width: 20px; height: 20px; }
  body { padding-bottom: 78px; }
}

@media (max-width: 420px) {
  :root { --gut: 18px; }

  /* With the call button reduced to an icon there is room for the full logo
     again at 380px, county line included. Only the gap tightens. */
  .hdr .wrap { gap: 8px; }
  .logo-mark { width: 38px; height: 38px; }
  .logo-mark svg { width: 21px; height: 21px; }
  .logo-name { font-size: 1rem; }
  .logo-sub { font-size: .55rem; letter-spacing: .13em; }
  .facts, .coverage-cols { grid-template-columns: 1fr; }
  .six-grid { grid-template-columns: 1fr; }
}

/* Very narrow legacy phones (320px CSS width). Without this the brand name
   ellipsises. Nothing breaks either way, this just keeps it readable. */
@media (max-width: 340px) {
  .logo-mark { width: 34px; height: 34px; }
  .logo-mark svg { width: 19px; height: 19px; }
  .logo-name { font-size: .88rem; }
  .logo-sub { display: none; }
}