/* ==========================================================================
   Charlotte Rat Control
   Design source: the Axiom Pest (axiompest.com) screen capture supplied by the
   client. Tokens read off the live site in a browser via getComputedStyle:

     one typeface (Albert Sans), 800 weight, uppercase, POSITIVE wide tracking
     ink #111111 structure, amber #FFBA21 as the single action colour
     green #3DAE2B / #006838 accent, off-white #F9FAFB
     border-radius: 0 on every button, card, and image
     translucent white cards laid over photography
     feature labels at 27px / 0.10em tracking

   The wide positive tracking on extra-bold uppercase is the signature. Most
   sites tighten large type; this one opens it up. Keep it.
   ========================================================================== */

:root {
  --ink: #111111;
  --ink-2: #1c1c1c;
  --ink-3: #2a2a2a;
  --ink-soft: #4a4a4a;

  --amber: #ffba21;
  --amber-dark: #e5a30d;
  --amber-wash: #fff6df;

  --green: #3dae2b;
  --green-deep: #006838;
  --green-wash: #eef7ec;

  --off: #f9fafb;
  --line: #e6e7e9;
  --line-strong: #111111;
  --white: #ffffff;

  --sans: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --shell: 1240px;
  --gut: 24px;
  --band: 104px;

  /* ---- geometry, measured off the reference ----
     The reference is NOT square-cornered. It runs a 3px base radius plus an angled
     corner-cut system (8px on buttons, 20px and 32px on cards, 64px on whole sections)
     and two hexagons: flat-top for feature images, pointy-top for icon badges.
     Hard 0px corners on everything was the wrong read. */
  --r: 3px;
  --hex-flat: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --hex-point: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* angled corner cuts */
.cut-lb { clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.cut-rb { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.cut-rb-lg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
.cut-lb-xl { clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px)); }

/* hexagons */
/* A pointy-top hexagon has to be taller than it is wide (ratio ~1.155). `flex` shorthand
   is avoided here on purpose: inside a column flex container flex-basis resolves against
   the HEIGHT, which squashed these to 54x54 and broke the shape. */
.hexmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; min-width: 54px; height: 62px; min-height: 62px; flex: none;
  clip-path: var(--hex-point);
  background: var(--amber); color: var(--ink);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
}
.hexmark.ghost { background: transparent; color: var(--amber); box-shadow: none; border: 0; }
.hexphoto { position: relative; width: 100%; aspect-ratio: 1 / 0.94; clip-path: var(--hex-flat); background: var(--line); }
.hexphoto img { width: 100%; height: 100%; object-fit: cover; }

*, *::before, *::after { box-sizing: border-box; }
/* `overflow-x` has to be clipped on BOTH html and body. With it on body alone the
   documentElement still reports a 534px scroll width at 380px, because the comparison
   table's unclipped overflow escapes to the root. `clip` rather than `hidden` so the
   sticky header keeps working (hidden would make html a scroll container). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--r); }
.svcrow-media img, .hexphoto img { border-radius: 0; }
a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ---------- the type system: one face, 800, uppercase, wide tracking ---------- */

/* Headings deliberately do NOT set a colour. They inherit from their container, so a
   dark band paints its own headings white and a light card sitting on that band paints
   them back to ink. A blanket `.band-ink h2 { color:#fff }` leaks into white cards and
   produces white-on-white text, which is exactly what happened on lawrenceksroofingpros. */
h1, h2, h3, h4, h5 {
  margin: 0 0 0.5em;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  color: inherit;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.25rem); letter-spacing: 0.04em; line-height: 1.28; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
h4 { font-size: 1.05rem; letter-spacing: 0.04em; }

p { margin: 0 0 1.15em; }
strong { font-weight: 700; }

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

/* the 10%-tracked feature label, straight off the reference */
.megalabel {
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin: 0 0 10px;
}

.kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 14px;
  padding: 0 0 6px;
  border-bottom: 3px solid var(--amber);
  text-decoration: none;
}
.kicker.on-dark { color: var(--amber); border-bottom-color: var(--amber); }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; }
.band-ink .lead, .band-green .lead { color: rgba(255, 255, 255, 0.82); }

/* ---------- buttons: zero radius, 800 uppercase, amber ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 16px 30px;
  border: 2px solid transparent;
  /* the reference cuts the bottom-left corner of every button at 8px */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-amber { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-amber:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: var(--ink); }

.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-3); color: #fff; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-lg { min-height: 62px; font-size: 16px; padding: 20px 34px; }
.btn-block { width: 100%; }

/* ---------- announcement bar + header ---------- */

.announce {
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.announce .shell { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; text-align: center; flex-wrap: wrap; }
.announce b { color: var(--amber); }
.announce a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: #fff; text-decoration: underline; }

.masthead { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 3px solid var(--ink); }
.masthead .shell { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; min-height: 84px; padding-right: 0; }

.brand { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; }
.brand-mark { width: 46px; height: 46px; flex: 0 0 46px; }
.brand-type { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.brand-sub { margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); }

.mainnav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.mainnav a {
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.mainnav a:hover { border-bottom-color: var(--amber); }

.head-call {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  background: var(--amber);
  color: var(--ink);
  text-decoration: none;
}
.head-call:hover { background: var(--amber-dark); color: var(--ink); }
.head-call small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: .72; }
.head-call strong { font-size: 21px; font-weight: 800; letter-spacing: 0.01em; }

.navtoggle {
  display: none;
  align-items: center;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 14px 20px;
  margin: 13px 0;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- hero: photo, big uppercase, translucent card ---------- */

.hero { position: relative; background: var(--ink) center/cover no-repeat; color: #fff; isolation: isolate; }
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(92deg, rgba(9, 9, 9, .9) 0%, rgba(9, 9, 9, .76) 46%, rgba(9, 9, 9, .3) 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 400px); gap: 46px; align-items: center; padding: 80px 0 88px; }
.hero h1 { color: #fff; margin: 0 0 20px; }
.hero h1 .amber { color: var(--amber); display: block; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(255, 255, 255, .88); max-width: 44ch; margin-bottom: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* the translucent white card, straight off the reference */
.glasscard {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  color: var(--ink);
  padding: 32px 28px 28px;
  border-top: 6px solid var(--amber);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}
.glasscard h2 { font-size: 1.35rem; letter-spacing: 0.04em; margin-bottom: 10px; }
.glasscard p { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.glasscard .bignum {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 14px;
}
.glasscard .bignum:hover { color: var(--green-deep); }
.glasscard .fine { margin: 16px 0 0; padding-top: 14px; border-top: 2px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- bands ---------- */

.band { padding: var(--band) 0; }
.band-tight { padding: 68px 0; }
.band-off { background: var(--off); }
.band-amber { background: var(--amber); }
.band-green { background: var(--green-deep); color: #fff; }
.band-ink { background: var(--ink); color: #fff; }
.band-ink > .shell > .band-head p, .band-green > .shell > .band-head p { color: rgba(255, 255, 255, .82); }

/* Light cards reset the colour context so nothing inherits white onto white. */
.tile, .sign, .svccard, .idcard, .cmp, .glasscard, .panel:not(.dark) { color: var(--ink); }
.band-green .kicker, .band-green .kicker.on-dark { color: #fff; border-bottom-color: var(--amber); }
/* Links on the dark bands: full amber only reaches 4.05:1 on the green, so body-copy
   links use the lighter tint. Card interiors keep the normal link colour. */
.band-green > .shell > p a, .band-ink > .shell > p a { color: #ffd97e; }
.panel.dark a:not(.btn) { color: #ffd97e; }

.band-head { max-width: 780px; margin-bottom: 54px; }
.band-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.band-head p { margin-bottom: 0; }

/* ---------- 4-tile feature grid (the "why bugs hate us" module) ---------- */

.tilegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); gap: 18px; }
.tile {
  background: #fff; border: 1px solid var(--line);
  padding: 30px 26px 28px; display: flex; flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.tile .num { margin-bottom: 18px; }
.tile h3 { letter-spacing: 0.06em; margin-bottom: 12px; }
.tile p { font-size: 15px; color: var(--ink-soft); flex: 1; margin-bottom: 16px; }
/* inline-flex + min-height keeps this text link at a 44px tap target */
.tile a.tilelink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--amber);
  align-self: flex-start; padding: 0 2px;
}
.tile a.tilelink:hover { box-shadow: inset 0 -3px 0 var(--ink); }

/* ---------- the comparison table (the standout module) ---------- */

.cmp { border: 2px solid var(--ink); background: #fff; overflow-x: auto; border-radius: var(--r); }
.cmp table { width: 100%; min-width: 620px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp thead th {
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 0;
}
.cmp thead th.ours { background: var(--amber); color: var(--ink); }
.cmp tbody th { font-weight: 600; font-size: 15.5px; text-transform: none; letter-spacing: normal; width: 40%; }
.cmp td { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.cmp td.ours { background: var(--amber-wash); color: var(--green-deep); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.mark { display: inline-block; font-size: 18px; font-weight: 800; line-height: 1; }
/* --green (#3dae2b) only reaches 2.68:1 on these cells, so the tick uses the deep green */
.mark-yes { color: var(--green-deep); }
.mark-no { color: #b32a26; }

/* ---------- badge tile row (wide-tracked labels) ---------- */

.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 38px 32px; }
.badge .hexmark { width: 46px; min-width: 46px; height: 53px; min-height: 53px; font-size: .9rem; margin-bottom: 16px; }
.badge p { font-size: 15px; color: var(--ink-soft); margin: 0; }
.band-ink .badge p, .band-green .badge p { color: rgba(255, 255, 255, .78); }

/* ---------- alternating full-bleed service rows ---------- */

.svcrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.svcrow + .svcrow { border-top: 3px solid var(--ink); }
.svcrow-media { position: relative; min-height: 400px; background: var(--line); }
.svcrow-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svcrow-body { padding: 66px clamp(24px, 4.4vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.svcrow-body p { color: var(--ink-soft); max-width: 46ch; }
.svcrow-body .btn { align-self: flex-start; margin-top: 12px; }
.svcrow.flip .svcrow-media { order: 2; }
.svcrow.on-off { background: var(--off); }

/* ---------- compact cards ---------- */

.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.svccard {
  background: var(--off); border: 1px solid var(--line);
  padding: 28px 24px 28px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.svccard h3 { font-size: 1.05rem; letter-spacing: 0.05em; margin-bottom: 10px; }
.svccard p { font-size: 15px; color: var(--ink-soft); flex: 1; }
.svccard .more { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); }
.svccard:hover { background: var(--amber); }
.svccard:hover .more { color: var(--ink); }

/* ---------- split content block ---------- */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px; align-items: center; }
.split-media img { width: 100%; height: 100%; max-height: 540px; object-fit: cover; }
.split figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 14px; text-align: center; }
.split-media.hexphoto { height: auto; max-height: none; }
.checks { list-style: none; margin: 0 0 26px; padding: 0; }
.checks li { position: relative; padding-left: 34px; margin-bottom: 13px; }
.checks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--amber); }
.band-ink .checks li::before, .band-green .checks li::before { background: var(--amber); }

/* ---------- numbered process ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 34px 30px; }
.step .hexmark { margin-bottom: 18px; }
.step h3 { letter-spacing: 0.04em; margin-bottom: 10px; }
.step p { font-size: 15px; margin: 0; }

/* ---------- identification cards ---------- */

.idgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.idcard {
  background: #fff; padding: 28px 24px 30px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
.idcard .hexmark { margin-bottom: 16px; }
.idcard h3 { margin-bottom: 2px; letter-spacing: 0.05em; }
.idcard .latin { font-style: italic; font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; text-transform: none; }
.idcard dt { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 4px; }
.idcard dd { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.idcard dd:last-child { margin-bottom: 0; }

/* ---------- symptom grid ---------- */

.signgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.sign {
  background: #fff; border: 1px solid var(--line); padding: 26px 24px 28px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.sign b { display: block; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; margin-bottom: 10px; }
.sign span { font-size: 15px; color: var(--ink-soft); }

/* ---------- coverage finder ---------- */

.coverage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 58px; align-items: start; }
.chiplist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r);
  font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.chip.is-link:hover { background: var(--amber); }
.chip.is-plain { border-color: var(--line); color: var(--ink-soft); font-weight: 700; }

.townlist { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.townlist li { border-bottom: 1px solid var(--line); }
.townlist a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 17px 4px; color: var(--ink); text-decoration: none; }
.townlist a:hover { background: var(--amber); }
.townlist .town { font-size: 1.18rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.townlist .note { font-size: 13px; color: #4f5052; text-align: right; max-width: 22ch; }

/* ---------- prose ---------- */

.prose { font-size: 17.5px; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.7em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: 9px; }
.prose em { font-style: italic; }

/* a bare <ul> of navigation links: give each one a 44px tap target */
.linklist { list-style: none; margin: 0 0 1.2em; padding: 0; border-top: 1px solid var(--line); }
.linklist li { border-bottom: 1px solid var(--line); }
.linklist a { display: flex; align-items: center; min-height: 48px; padding: 8px 2px; font-weight: 600; text-decoration: none; color: var(--ink); }
.linklist a:hover { color: var(--green-deep); }
.prose .callout { background: var(--amber-wash); border-left: 8px solid var(--amber); padding: 24px 26px; margin: 1.7em 0; font-size: 16.5px; }
.prose .callout p:last-child { margin-bottom: 0; }

/* ---------- interior page hero ---------- */

.pagehero { background: var(--ink); color: #fff; padding: 58px 0 62px; border-bottom: 6px solid var(--amber); }
.pagehero h1 { color: #fff; margin-bottom: 16px; }
.pagehero p { color: rgba(255, 255, 255, .84); max-width: 62ch; font-size: 1.08rem; }
.pagehero .btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* breadcrumbs are navigation, so the links need a real tap target: 11px text on its
   own is a 13px-tall hit area. Negative margin keeps the visual position unchanged. */
.crumbs { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: rgba(255, 255, 255, .88); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs span { margin: 0 6px; }
.crumbs > span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; margin: 0 2px; }

/* ---------- sidebar layout ---------- */

.withside { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 58px; align-items: start; }
.sidebar { position: sticky; top: 104px; display: grid; gap: 20px; }
.panel {
  border: 2px solid var(--ink); padding: 24px 22px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.panel h3 { font-size: .95rem; letter-spacing: 0.12em; margin-bottom: 14px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { border-top: 1px solid var(--line); }
.panel li a { display: block; padding: 12px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.panel li a:hover { color: var(--green-deep); }
.panel.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.panel.dark h3 { color: var(--amber); }
.panel.dark p { color: rgba(255, 255, 255, .78); font-size: 15px; }
.panel.dark .bignum { display: block; font-size: 1.9rem; font-weight: 800; color: #fff; text-decoration: none; margin-bottom: 12px; }
.panel.dark .bignum:hover { color: var(--amber); }

/* ---------- FAQ ---------- */

.faqlist { border-top: 3px solid var(--ink); }
.faq { border-bottom: 1px solid var(--line); padding: 26px 0; }
.faq h3 { font-size: 1.08rem; letter-spacing: 0.03em; margin-bottom: 10px; }
.faq p { margin: 0; color: var(--ink-soft); }

/* ---------- amber CTA band ---------- */

.ctaband { background: var(--amber); color: var(--ink); padding: 68px 0 72px; }
.ctaband h2 { color: var(--ink); }
.ctaband p { color: var(--ink-3); max-width: 56ch; }
.ctaband .kicker { color: var(--ink); border-bottom-color: var(--ink); }
.ctaband .ctanum { display: inline-flex; align-items: center; min-height: 52px; font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 800; color: var(--ink); text-decoration: none; line-height: 1.05; margin-top: 6px; letter-spacing: 0.01em; }
.ctaband .ctanum:hover { color: var(--green-deep); }
.ctaband-flex { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }

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

.foot { background: var(--ink); color: #b6b7b9; padding: 76px 0 0; font-size: 15px; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--amber); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 56px; }
.foot h2 { font-size: 1.4rem; letter-spacing: 0.05em; color: #fff; margin-bottom: 14px; }
.foot h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--amber); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0; }
.foot li a { display: inline-block; padding: 11px 0; }
.foot .footphone { display: inline-block; font-size: 1.8rem; font-weight: 800; color: var(--amber); margin: 8px 0 10px; }
.foot-legal { border-top: 1px solid rgba(255, 255, 255, .16); padding: 28px 0 34px; font-size: 13px; line-height: 1.65; color: #8b8c8e; }
.foot-legal p { margin: 0 0 12px; }
.foot-legal .links { display: flex; flex-wrap: wrap; gap: 0 8px; }
.foot-legal .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 0; }

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

.stickycall { display: none; }

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

@media (max-width: 1080px) {
  :root { --band: 78px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 56px 0 62px; }
  .coverage-grid, .split, .withside { grid-template-columns: 1fr; gap: 40px; }
  .sidebar { position: static; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mainnav { display: none; }
  .mainnav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 5px solid var(--amber);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
    padding: 6px 0 12px; gap: 0; z-index: 70;
  }
  .mainnav.is-open a { padding: 16px 24px; border-top: 1px solid var(--line); border-bottom: 0; }
  .masthead .shell { position: relative; min-height: 70px; }
  .navtoggle { display: inline-flex; margin-left: auto; }
  .head-call { display: none; }
  .svcrow, .svcrow.flip .svcrow-media { grid-template-columns: 1fr; order: 0; }
  .svcrow-media { min-height: 250px; }
  .svcrow-body { padding: 42px 24px 46px; }
}

@media (max-width: 640px) {
  :root { --band: 60px; --gut: 18px; }
  body { font-size: 16.5px; }
  .announce .shell { min-height: 44px; font-size: 11.5px; letter-spacing: 0.04em; }
  /* Above the fold at 380x667, verified in a 380px iframe: the H1, the subhead, the
     phone number and the primary call button all have to land inside the first screen.
     Every number below is spent buying that. The card leads with the number and the
     button; the descriptive copy reorders beneath them. */
  .hero-grid { padding: 24px 0 38px; gap: 16px; }
  .hero h1 { font-size: 1.78rem; margin-bottom: 12px; }
  .hero-sub { font-size: 1rem; line-height: 1.5; margin-bottom: 0; }
  .hero-cta { display: none; }
  .glasscard { padding: 18px 16px 18px; display: flex; flex-direction: column; border-top-width: 5px; }
  .glasscard h2 { order: 1; font-size: 1.15rem; margin-bottom: 6px; }
  .glasscard .bignum { order: 2; font-size: 1.75rem; margin-bottom: 10px; }
  .glasscard > .btn { order: 3; min-height: 56px; }
  .glasscard > p:not(.fine) { order: 4; margin: 14px 0 0; font-size: 14.5px; }
  .glasscard .fine { order: 5; }
  .band-head { margin-bottom: 34px; }
  .badges { gap: 30px 24px; }
  .steps { gap: 26px; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .townlist .note { display: none; }
  .foot li a { padding: 13px 0; }
  .panel li a { padding: 14px 0; }
  body { padding-bottom: 74px; }
  .stickycall {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--amber); border-top: 3px solid var(--ink);
  }
  /* the corner cuts get proportionally huge on a phone, so scale them down */
  .tile, .sign, .svccard, .panel { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
  .idcard { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
  .glasscard { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
  .hexmark { width: 46px; min-width: 46px; height: 53px; min-height: 53px; font-size: .95rem; }
  .cut-lb-xl { clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }
  .stickycall a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 62px; color: var(--ink); text-decoration: none;
    font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  }
}

@media (max-width: 400px) {
  h1 { font-size: 1.95rem; }
  .cmp table { min-width: 560px; }
}