/* ==========================================================================
   TRU ARMOR ROOFING - DESIGN SYSTEM
   Your shield against the elements.
   Eagle · Boise · Treasure Valley · McCall · Donnelly
   --------------------------------------------------------------------------
   One accent color. One dominant CTA. Everything else gets out of the way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand - the shield: logo black, logo silver, logo blue */
  --navy-900: #0A0C0E;   /* logo black, page-dark */
  --navy-800: #121518;   /* dark sections */
  --navy-700: #0F4C8C;   /* links: deep logo blue */
  --navy-600: #155089;
  --steel-500: #8A9099;  /* logo silver */
  --slate-400: #A6ACB4;

  /* Logo blue - brand identity color, and also the action color.
     --blue-deep is the same value as --accent below. */
  --blue: #1868B0;
  --blue-deep: #0E559E;
  --blue-bright: #7FB8E8;
  --blue-soft: #E8F1FA;
  --blue-border: #BBD6EE;

  /* Accent - the ONE action color. Deliberately the same blue as --blue-deep:
     this palette carries no separate CTA hue. Action and informational
     elements share the blue; hierarchy comes from fill and weight, not hue. */
  --accent: #0E559E;
  --accent-hover: #0B4380;
  --accent-press: #093868;
  --accent-soft: #E8F1FA;
  --accent-border: #B7D3EE;

  /* Emergency - used ONLY for 24/7 leak response. Same blue as --accent;
     the soft/border tints must stay in the blue family to match. */
  --emergency: #0E559E;
  --emergency-hover: #0B4380;
  --emergency-soft: #E8F1FA;

  /* Neutrals */
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-alt: #F7F9FB;
  --bg-alt-2: #EFF3F7;
  --border: #E2E6EB;
  --border-strong: #B9BEC6;

  /* Text */
  --text: #16181B;
  --text-body: #3A4148;
  --text-muted: #626A73;
  --text-invert: #FFFFFF;
  --text-invert-muted: #C9CFD6;

  /* Feedback */
  --success: #1B7A4D;
  --success-soft: #EAF6F0;
  --error: #B3261E;
  --error-soft: #FDF0EF;

  /* Typography */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-head: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 1rem;
  --fs-base: 1.125rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.5rem;

  /* Spacing scale - 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-full: 999px;

  /* Elevation - restrained */
  --shadow-sm: 0 1px 2px rgba(10, 12, 14, 0.06), 0 1px 3px rgba(10, 12, 14, 0.05);
  --shadow-md: 0 4px 12px rgba(10, 12, 14, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 12, 14, 0.12);

  /* Layout */
  --container: 1280px;
  --container-narrow: 780px;
  --header-h: 96px;
  --utility-h: 40px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* GLOBAL MEDIA SAFETY NET - nothing intrinsic may exceed its container */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }


html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  font-weight: 800;
  text-wrap: balance;
}

h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; line-height: 1.05; }
h1 { font-size: calc(var(--fs-3xl) * 1.18); }
h2 { font-size: calc(var(--fs-2xl) * 1.15); }
h3 { font-size: var(--fs-lg); font-weight: 700; }
h4 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   LINE-WRAP QUALITY
   `pretty` (above) only prevents a single-word last line. Short text blocks -
   card copy, leads, captions, quotes - read better balanced, which spreads the
   words evenly so the last line never trails off with one or two words.
   Long-form paragraphs keep `pretty`: Chrome stops balancing past ~6 lines.
   -------------------------------------------------------------------------- */
.prose p,
.card p,
.split p,
.cta-band p,
.section-head p,
.hero2__subhead,
.rt2-lede,
.rt2__row p,
.svc2__body p,
.wx-card p,
.team-card__body p,
.proc2__card p,
.ins-panel p,
.faq__a p,
.redcheck li,
.checklist li,
.warnlist li,
.prose li,
.card li,
.form__microcopy span,
figcaption,
blockquote {
  text-wrap: balance;
}

a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--text); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-7) 0; }

/* Visible focus - never removed */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.section--dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: #FF8A8A; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy-900);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  font-weight: 700;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--s-10) 0; }
.section--tight { padding: var(--s-8) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 100%); color: var(--blue-soft); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a { color: var(--white); }
.section--dark strong { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: var(--s-7); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: var(--fs-md); color: var(--text-muted); margin-bottom: 0; }
.section--dark .section-head p { color: var(--blue-soft); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow { color: var(--blue-soft); }
.hero .eyebrow { color: var(--blue-bright); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-9); align-items: center; }
.split--wide-left { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); }
.split--top { align-items: start; }

/* --------------------------------------------------------------------------
   4. BUTTONS - one dominant CTA color, used consistently
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 1rem 1.75rem;
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent); color: #FFFFFF; border-color: var(--accent);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.14), 0 1px 2px rgba(10,12,14,0.15);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }

.btn--secondary { background: transparent; color: var(--navy-800); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--navy-700); background: var(--bg-alt); color: var(--navy-900); }

.section--dark .btn--secondary, .hero .btn--secondary, .cta-band .btn--secondary {
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
}
.section--dark .btn--secondary:hover, .hero .btn--secondary:hover, .cta-band .btn--secondary:hover {
  background: rgba(255,255,255,0.14); border-color: #FFFFFF; color: var(--white);
}

.btn--emergency { background: var(--emergency); color: var(--white); border-color: var(--emergency); }
.btn--emergency:hover { background: var(--emergency-hover); border-color: var(--emergency-hover); color: var(--white); }

.btn--sm { padding: 0.625rem 1.125rem; min-height: 44px; font-size: var(--fs-sm); }
.btn--lg { padding: 1.125rem 2.25rem; min-height: 60px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.btn-note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-3); }
.hero .btn-note { color: var(--text-invert-muted); }
.section--dark .btn-note, .cta-band .btn-note { color: var(--blue-soft); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--navy-700);
  text-decoration: none;
  border-bottom: 2px solid var(--blue-border);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--blue-deep); border-bottom-color: var(--blue); }
.link-arrow::after { content: "\2192"; transition: transform 0.15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.section--dark .link-arrow { color: var(--blue-bright); border-bottom-color: rgba(127,184,232,0.5); }

/* --------------------------------------------------------------------------
   5. UTILITY BAR
   -------------------------------------------------------------------------- */
.utility-bar { background: var(--navy-900); color: var(--text-invert-muted); font-size: var(--fs-xs); line-height: 1.4; }
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--utility-h);
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.utility-bar__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.utility-bar__facts li { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.utility-bar__facts svg { flex: none; width: 20px; height: 20px; color: var(--blue-bright); }
.utility-bar__call {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--white); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.utility-bar__call:hover { color: var(--blue-bright); }
.utility-bar__call svg { width: 20px; height: 20px; }

.emergency-ribbon {
  background: var(--emergency); color: var(--white); text-align: center;
  font-size: var(--fs-sm); font-weight: 600; padding: var(--s-2) var(--s-4);
}
.emergency-ribbon a { color: var(--white); font-weight: 800; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-head); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: 0.01em; color: var(--navy-900); text-transform: uppercase;
}
.brand__tag { font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.02em; }

.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700;
  color: var(--navy-800); text-decoration: none;
  padding: 0.6rem 0.7rem; border-radius: var(--r-sm);
  white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.nav__link:hover { background: var(--bg-alt); color: var(--navy-900); }
.nav__link[aria-current="page"] { color: var(--blue-deep); box-shadow: inset 0 -3px 0 var(--blue); }
.nav__caret { width: 10px; height: 10px; transition: transform 0.15s ease; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 300px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--s-3);
  list-style: none; margin: 0; display: none;
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel li { margin: 0; }
.nav__panel a {
  display: block; padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); text-decoration: none;
}
.nav__panel a:hover { background: var(--blue-soft); color: var(--blue-deep); }
.nav__panel-note { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; margin-top: 1px; }

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header__phone { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.header__phone-label {
  font-size: 0.6875rem; color: var(--text-muted); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.header__phone-num { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 800; color: var(--navy-900); }
.header__phone:hover .header__phone-num { color: var(--blue-deep); }

.nav-toggle {
  display: none; align-items: center; gap: 0.55rem;
  background: var(--navy-800); color: var(--white); border: 0;
  border-radius: var(--r-md); padding: 0.7rem 0.95rem;
  min-height: 48px; min-width: 48px;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm); cursor: pointer;
  flex: none; white-space: nowrap;   /* never squeezed by the text-us chip */
}
.nav-toggle__bars { display: block; width: 20px; height: 2px; background: currentColor; position: relative; flex: none; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.mobile-nav { position: fixed; inset: 0; z-index: 200; background: rgba(10, 12, 14, 0.55); display: none; }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw); background: var(--white);
  overflow-y: auto; padding: var(--s-5) var(--s-5) var(--s-10);
  box-shadow: var(--shadow-lg);
}
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); }
.mobile-nav__close {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md);
  min-width: 48px; min-height: 48px; font-size: 1.35rem; line-height: 1;
  cursor: pointer; color: var(--navy-800);
}
.mobile-nav__cta { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.mobile-nav h2 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin: var(--s-5) 0 var(--s-2);
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--border); }
.mobile-nav li a {
  display: block; padding: 0.95rem 0.25rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  color: var(--navy-800); text-decoration: none; min-height: 48px;
}
.mobile-nav li a:hover { color: var(--blue-deep); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--navy-900); color: var(--text-invert-muted); overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.62; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10,12,14,0.86) 0%, rgba(10,12,14,0.66) 45%, rgba(10,12,14,0.22) 100%);
}
.hero .container { position: relative; z-index: 2; }

.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-9); align-items: center;
  min-height: calc(100svh - var(--header-h) - var(--utility-h) - 40px);
  padding: var(--s-8) 0;
}
.hero h1 { color: var(--white); font-size: calc(var(--fs-4xl) * 1.15); margin-bottom: var(--s-4); }
.hero h1 .accent { color: #F6B860; }
.hero__sub { font-size: var(--fs-md); color: #D7E3EB; max-width: 42ch; margin-bottom: var(--s-5); }
.hero__trust {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}
.hero__trust li {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-sm); font-weight: 600; color: #E4EDF3; margin: 0;
}
.hero__trust svg { width: 17px; height: 17px; color: #6FCB9B; flex: none; }

.hero-form {
  background: var(--white); border-radius: var(--r-xl);
  padding: var(--s-6); box-shadow: var(--shadow-lg); color: var(--text-body);
}
.hero-form h2 { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.hero-form__lede { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-5); }

/* --------------------------------------------------------------------------
   8. CREDIBILITY STRIP
   -------------------------------------------------------------------------- */
.cred-strip { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.cred-strip__list {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--s-4); list-style: none; margin: 0; padding: var(--s-6) 0;
}
.cred-strip__list li { margin: 0; text-align: center; padding: 0 var(--s-2); }
.cred-strip__num {
  display: block; font-family: var(--font-head); font-size: var(--fs-xl);
  font-weight: 800; color: var(--navy-800); line-height: 1.1; letter-spacing: -0.03em;
}
.cred-strip__label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 0.25rem; line-height: 1.35; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--s-2); }
.card p { font-size: var(--fs-sm); color: var(--text-muted); }
.card .link-arrow { margin-top: auto; padding-top: var(--s-4); align-self: flex-start; }

.card__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-hover);
  margin-bottom: var(--s-4); flex: none;
}
.card__icon svg { width: 24px; height: 24px; }

.card--dark { background: var(--navy-800); border-color: var(--navy-700); color: var(--text-invert-muted); }
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--text-invert-muted); }

.card--emergency { border-color: var(--emergency); border-width: 2px; background: var(--emergency-soft); }
.card--emergency .card__icon { background: var(--blue-border); color: var(--emergency); }

.card--flat { border: 0; background: var(--bg-alt); }

.media-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.media-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.media-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg-alt-2); }
.media-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.media-card__body h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.media-card__body p { font-size: var(--fs-sm); color: var(--text-muted); }
.media-card__meta { margin: var(--s-3) 0; font-size: var(--fs-sm); }
.media-card__meta div {
  display: flex; gap: var(--s-3); padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.media-card__meta div:last-child { border-bottom: 0; }
.media-card__meta dt {
  flex: none; width: 96px; color: var(--text-muted); font-weight: 700;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
}
.media-card__meta dd { margin: 0; color: var(--text); }

.badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 800;
  font-family: var(--font-head); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25rem 0.55rem; border-radius: var(--r-sm);
  background: var(--blue-soft); color: var(--blue-deep); border: 1px solid var(--blue-border);
}
.badge--navy { background: var(--bg-alt-2); color: var(--navy-700); border-color: var(--border-strong); }
.badge--emergency { background: var(--emergency-soft); color: var(--emergency); border-color: var(--accent-border); }

/* --------------------------------------------------------------------------
   10. CHECKLISTS & WARNING LISTS
   -------------------------------------------------------------------------- */
.checklist { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: var(--s-3); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.35em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7A4D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.section--dark .checklist li::before { background-color: rgba(111, 203, 155, 0.2); }

.warnlist { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.warnlist li { position: relative; padding-left: 2rem; margin-bottom: var(--s-3); }
.warnlist li::before {
  content: ""; position: absolute; left: 0; top: 0.35em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4740F' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* --------------------------------------------------------------------------
   11. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--white); font-size: var(--fs-sm);
}
.compare caption {
  caption-side: top; text-align: left; padding-bottom: var(--s-3);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.compare th, .compare td {
  padding: var(--s-4); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.compare thead th {
  background: var(--bg-alt); font-family: var(--font-head); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 800;
}
.compare thead th:last-child { background: var(--blue-deep); color: var(--white); }
.compare tbody td:last-child { background: #EAF2FB; font-weight: 600; color: var(--navy-900); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody th { font-weight: 500; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12. PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s-5); counter-reset: step;
}
.steps > li { margin: 0; position: relative; padding-top: var(--s-7); }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--blue); color: #FFFFFF;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md);
}
.steps h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.steps p { font-size: var(--fs-sm); color: var(--text-muted); }
.section--dark .steps p { color: var(--text-invert-muted); }

/* --------------------------------------------------------------------------
   13. REVIEWS
   -------------------------------------------------------------------------- */
.review {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-6);
  display: flex; flex-direction: column;
}
.review__stars { display: flex; gap: 2px; margin-bottom: var(--s-3); color: var(--accent); }
.review__stars svg { width: 18px; height: 18px; }
.review { position: relative; }
.review::before {
  content: "\201C";
  position: absolute; top: 0.5rem; right: 1.25rem;
  font-family: var(--font-display);
  font-size: 4.5rem; line-height: 1;
  color: var(--blue-soft);
  pointer-events: none;
}
.review blockquote { margin: 0 0 var(--s-4); font-size: var(--fs-base); color: var(--text); line-height: 1.6; position: relative; }
.review__who { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.review__name { font-weight: 800; font-family: var(--font-head); color: var(--navy-900); display: block; }
.review__meta { color: var(--text-muted); font-size: var(--fs-xs); }

.placeholder-note {
  border: 2px dashed var(--accent-border); background: var(--accent-soft);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  font-size: var(--fs-sm); color: #7A4B08;
}
.placeholder-note strong { color: #5E3A05; }
.placeholder-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); background: none; border: 0; padding: var(--s-5) 0;
  text-align: left; font-family: var(--font-head); font-size: var(--fs-md);
  font-weight: 700; color: var(--navy-900); cursor: pointer; min-height: 56px;
}
.faq__q:hover { color: var(--blue-deep); }
.faq__icon { flex: none; width: 24px; height: 24px; position: relative; margin-top: 4px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--blue);
  border-radius: 2px; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq__icon::before { width: 16px; height: 2.5px; }
.faq__icon::after { width: 2.5px; height: 16px; transition: transform 0.18s ease; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a { padding: 0 0 var(--s-5); max-width: 72ch; }
.faq__a[hidden] { display: none; }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-4); }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); font-family: var(--font-head); }
.field .req { color: var(--error); }
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; display: block; }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--text); background: var(--white);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  padding: 0.8rem 0.9rem; min-height: 50px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7182' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
  background-size: 18px; padding-right: 2.5rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 138, 30, 0.25);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--error); background: var(--error-soft);
}
.field__error { font-size: var(--fs-sm); color: var(--error); font-weight: 600; }
.field__error[hidden] { display: none; }

.radio-group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.radio-group label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  padding: 0.6rem 0.9rem; min-height: 48px; cursor: pointer;
  font-weight: 600; font-size: var(--fs-sm); background: var(--white);
}
.radio-group input { accent-color: var(--accent); width: 18px; height: 18px; }
.radio-group input:checked + span { color: var(--accent-press); font-weight: 800; }

.consent {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
}
.consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }

.conditional { display: none; }
.conditional[data-show="true"] { display: grid; gap: var(--s-4); }

.form__microcopy {
  font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; align-items: flex-start; gap: 0.4rem; line-height: 1.5;
}
.form__microcopy svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--success); }

.form__status { border-radius: var(--r-md); padding: var(--s-4) var(--s-5); font-size: var(--fs-sm); font-weight: 600; }
.form__status[hidden] { display: none; }
.form__status--ok { background: var(--success-soft); color: #145C3A; border: 1px solid #A9DCC3; }
.form__status--err { background: var(--error-soft); color: #8F1E17; border: 1px solid #F0BDB9; }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   16. CTA BANDS
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 100%); color: var(--blue-soft);
  border-radius: var(--r-xl); padding: var(--s-8);
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
  gap: var(--s-7); align-items: center;
}
.cta-band h2 { color: var(--white); margin-bottom: var(--s-3); }
.cta-band__actions { display: grid; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   17. STICKY MOBILE CONVERSION BAR
   -------------------------------------------------------------------------- */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--white); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(8,19,28,0.12);
  padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
  gap: 0.5rem;
}
.mobile-cta .btn { flex: 1; padding: 0.85rem 0.5rem; min-height: 52px; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--text-invert-muted); font-size: var(--fs-sm); padding-top: var(--s-9); }
.site-footer h2, .site-footer h3 { color: var(--white); }
.site-footer h3 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--s-4); color: #9AA2AC;
}
.site-footer a { color: var(--text-invert-muted); text-decoration: none; }
.site-footer a:hover { color: var(--blue-bright); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-7); padding-bottom: var(--s-8); }
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: 0.55rem; }
.footer__brand-line { max-width: 36ch; margin: var(--s-4) 0; }
.footer__contact { list-style: none; margin: 0; padding: 0; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: var(--s-3); }
.footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--blue-bright); }
.footer__contact a { color: var(--white); font-weight: 700; }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: var(--s-5) 0 var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: #9AA2AC;
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }

.social-row { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.social-row a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-md); color: var(--white);
}
.social-row a:hover { background: rgba(255,255,255,0.1); border-color: var(--blue-bright); }
.social-row svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   19. BREADCRUMBS, PAGE HEADS, PROSE, LISTS
   -------------------------------------------------------------------------- */
.crumbs { background: var(--bg-alt); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: var(--s-3) 0; }
.crumbs li { margin: 0; display: flex; gap: 0.4rem; color: var(--text-muted); }
.crumbs li:not(:last-child)::after { content: "/"; color: var(--border-strong); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue-deep); text-decoration: underline; }

.page-head { background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 100%); color: var(--blue-soft); padding: var(--s-9) 0; }
.page-head h1 { color: var(--white); max-width: 24ch; }
.page-head__lede { font-size: var(--fs-md); max-width: 58ch; color: var(--blue-soft); margin-bottom: var(--s-5); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); }

.area-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-2) var(--s-5); list-style: none; margin: 0; padding: 0; }
.area-list li { margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.stat-row li {
  margin: 0; background: var(--white); border: 1px solid var(--border);
  border-left: 4px solid var(--blue); border-radius: var(--r-md); padding: var(--s-5);
}
.stat-row strong {
  display: block; font-family: var(--font-head); font-size: var(--fs-xl);
  color: var(--navy-900); line-height: 1.1; margin-bottom: 0.25rem;
}
.stat-row span { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-6); }
  .cred-strip__list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-6); }
}

@media (max-width: 960px) {
  :root { --fs-4xl: 2.6rem; --fs-3xl: 2.25rem; --fs-2xl: 1.875rem; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7) 0 var(--s-9); min-height: calc(100svh - 150px); align-content: center; }
  .hero__sub { max-width: none; }
  .split, .split--wide-left { grid-template-columns: 1fr; gap: var(--s-6); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cta-band { grid-template-columns: 1fr; padding: var(--s-7); }
  .area-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root {
    --fs-4xl: 2.15rem; --fs-3xl: 1.9rem; --fs-2xl: 1.6rem; --fs-xl: 1.375rem;
    --s-10: 3.25rem; --s-9: 2.75rem;
  }
  .container { padding: 0 var(--s-4); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .cred-strip__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .btn-row .btn { width: 100%; }
  .mobile-cta { display: flex; }
  .footer__legal { padding-bottom: calc(var(--s-6) + 104px); }

  .compare, .compare tbody, .compare tr, .compare td, .compare th { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tbody tr { border-bottom: 1px solid var(--border); padding: var(--s-3) 0; }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare tbody td { border-bottom: 0; padding: 0.35rem var(--s-4); }
  .compare tbody th::before { content: "Typical experience: "; font-weight: 800; color: var(--text); }
  .compare tbody td:last-child { background: transparent; }
  .compare tbody td:last-child::before { content: "Tru Armor: "; font-weight: 800; color: var(--blue-deep); }

  .hero-form { padding: var(--s-5); }
  .card, .review { padding: var(--s-5); }
  .area-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. MOTION, PRINT, FORCED COLORS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .utility-bar, .site-header, .mobile-cta, .mobile-nav, .hero__bg, .emergency-ribbon { display: none !important; }
  .hero, .section--dark, .site-footer, .page-head { background: #fff !important; color: #000 !important; }
  .hero::after { display: none; }
  .hero h1, .section--dark h2, .page-head h1 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .card, .review, .media-card { border: 1px solid CanvasText; }
}


/* --------------------------------------------------------------------------
   22. VIDEO
   -------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-900);
  border: 1px solid var(--border);
}
.video-frame video { width: 100%; height: auto; display: block; }
.video-caption { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-3); }


/* Calm details */
::selection { background: var(--blue-soft); color: var(--navy-900); }
.media-card__img, .video-frame { box-shadow: var(--shadow-sm); }
.faq__a { animation: none; }


/* --------------------------------------------------------------------------
   23. THE OFFER
   -------------------------------------------------------------------------- */
.offer-flag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent); color: #FFFFFF;
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.45rem 0.9rem; border-radius: var(--r-sm);
  margin-bottom: var(--s-4);
  box-shadow: 0 2px 8px rgba(10,12,14,0.35);
}
.offer-stack { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.offer-stack li {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  padding: 0.4rem 0; margin: 0;
  border-bottom: 1px dashed var(--border);
}
.offer-stack li:last-child { border-bottom: 0; }
.offer-stack svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--success); }
.star-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  color: #E8EAEE; margin-top: var(--s-4);
}
.star-strip .stars { color: #F6B860; letter-spacing: 2px; }

/* Trust badge row: responsive 6-up */
.cred-strip__list--6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1080px) { .cred-strip__list--6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .cred-strip__list--6 { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: var(--s-5); } }

/* --------------------------------------------------------------------------
   VERIFY-US STRIP - license lookup, live Google, insurance, warranty
   -------------------------------------------------------------------------- */
.verify-strip { background: var(--white); border-bottom: 1px solid var(--border); padding: var(--s-8) 0; }
.verify-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-4); }
.verify-card {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2);
}
.verify-card h3 { font-size: var(--fs-base); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.verify-card h3 svg { width: 20px; height: 20px; color: var(--blue-deep); flex-shrink: 0; }
.verify-card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; flex: 1; }
.verify-card .link-arrow { font-size: var(--fs-sm); margin-top: var(--s-2); }
@media (max-width: 1080px) { .verify-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  { .verify-grid { grid-template-columns: 1fr; } }

/* Live Google embed */
.gmb-embed {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-alt-2); box-shadow: var(--shadow-sm);
}
.gmb-embed iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Bright blue CTA band variant - discounts */
.cta-band--blue {
  background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: #FFFFFF;
}
.cta-band--blue p { color: #FFFFFF; }
.cta-band--blue .eyebrow { color: var(--blue-soft); }
.cta-band--blue .btn-note { color: var(--blue-soft); }

/* Warranty spotlight */
.warranty-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); margin-bottom: var(--s-7); }
.warranty-stats > div {
  background: var(--white); border: 1px solid var(--blue-border); border-radius: var(--r-lg);
  padding: var(--s-5); text-align: center;
}
.warranty-stats .cred-strip__num { color: var(--blue-deep); font-size: var(--fs-2xl); }
@media (max-width: 720px) { .warranty-stats { grid-template-columns: 1fr; } }


/* Larger brand logo: desktop header is 96px tall; shrink on mobile */
@media (max-width: 720px) {
  :root { --header-h: 78px; }
  .site-header .brand__mark { width: 68px !important; height: 57px !important; }
}


/* --------------------------------------------------------------------------
   MOBILE FIX PACKAGE
   -------------------------------------------------------------------------- */
/* Comparison table: scrolls inside its own box instead of breaking the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--s-5); }
.table-scroll .compare { min-width: 640px; margin-bottom: 0; }

@media (max-width: 960px) {
  /* Taller chrome (utility bar + ribbon + 96px header) - keep hero honest */
  .hero__inner { min-height: calc(100svh - 185px); }
}

@media (max-width: 720px) {
  /* Emergency ribbon: one tight line instead of a paragraph */
  .emergency-ribbon { font-size: 0.8125rem; padding: 0.4rem var(--s-4); line-height: 1.35; }

  /* Logo stands alone on phones; tagline is noise at this size */
  .site-header .brand__text { display: none; }

  /* Hero form breathing room without wasting width */
  .hero-form { padding: var(--s-5); border-radius: var(--r-lg); }

  /* Big section headings wrap tighter on small screens */
  .section-head { margin-bottom: var(--s-6); }

  /* Live Google embed: shorter on phones */
  .gmb-embed iframe { height: 260px; }

  /* Warranty stat cards stack with tighter gaps */
  .warranty-stats { gap: var(--s-3); margin-bottom: var(--s-6); }

  /* CTA bands: tighter padding on phones */
  .cta-band { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
}

/* ==========================================================================
   SIMPLICITY LAYER
   Fewer competing elements, more air, calmer reading rhythm.
   Applied deliberately to both desktop and mobile.
   ========================================================================== */

/* --- Reading comfort: longer measure control, calmer rhythm --- */
.section-head p { max-width: 62ch; }
.split p, .card p { max-width: 68ch; }

/* --- Restraint on decoration: one shadow language, not three --- */
.card { box-shadow: none; }
.card:hover { box-shadow: var(--shadow-sm); }
.review::before { opacity: 0.5; }

/* --- More air between sections so each idea lands alone --- */
.section { padding: var(--s-11) 0; }
.section--tight { padding: var(--s-9) 0; }
.section-head { margin-bottom: var(--s-8); }

/* --- Comparison table: stacked cards on mobile, zero sideways scroll --- */
@media (max-width: 720px) {
  .table-scroll { overflow: visible; }
  .table-scroll .compare { min-width: 0; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead, .compare caption { display: none; }
  .compare tbody tr {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--s-4); margin-bottom: var(--s-3); background: var(--white);
  }
  .compare tbody th {
    padding: 0 0 var(--s-2); border: 0; text-align: left;
    color: var(--text-muted); font-weight: 500; font-style: italic;
  }
  .compare tbody td {
    padding: 0; border: 0; background: transparent !important;
    font-weight: 600; color: var(--text);
  }
  .compare tbody td::before {
    content: "→ "; color: var(--blue-deep); font-weight: 800;
  }
}

/* --- Mobile reading: bigger line-height, calmer type, fewer cramped edges --- */
@media (max-width: 720px) {
  body { line-height: 1.72; }
  .section { padding: var(--s-9) 0; }
  .section-head { margin-bottom: var(--s-6); }
  .card { padding: var(--s-5); }
  .split { gap: var(--s-6); }
  .grid { gap: var(--s-4); }
  /* Checklists and warning lists breathe */
  .checklist li, .warnlist li { margin-bottom: var(--s-3); }
  /* Safety net: only inline grids of 3+ columns collapse on a phone.
     Two-up photo pairs and the city list stay two-up on purpose. */
  [style*="repeat(3,"], [style*="repeat(3, "],
  [style*="repeat(4,"], [style*="repeat(4, "],
  [style*="repeat(6,"], [style*="repeat(6, "] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* --- Discount line layered over the hero photo --- */
.hero-discount {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: var(--s-4); padding: 0.7rem 1rem;
  background: rgba(24, 104, 176, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-size: var(--fs-sm); line-height: 1.45; color: #FFFFFF;
  max-width: 46ch;
}
.hero-discount svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #FFC66B; }
.hero-discount strong { display: block; color: #FFFFFF; font-weight: 700; }
.hero-discount a {
  color: #FFD9A0; font-weight: 700; text-decoration: none;
  font-family: var(--font-head); font-size: var(--fs-xs);
  letter-spacing: 0.02em; display: inline-block; margin-top: 0.15rem;
}
.hero-discount a:hover { color: #FFFFFF; text-decoration: underline; }
@media (max-width: 720px) {
  .hero-discount { font-size: 0.8125rem; padding: 0.6rem 0.8rem; max-width: none; }
  .hero-discount strong { font-size: 0.8125rem; }
}

/* ==========================================================================
   BUILT-TO-LAST ARCHITECTURE COMPONENTS
   ========================================================================== */

/* --- Utility bar: address / email / referral + socials --- */
.utility-bar__social { display: flex; gap: var(--s-3); align-items: center; margin: 0; padding: 0; list-style: none; }
.utility-bar__social a { color: var(--text-invert-muted); display: flex; }
.utility-bar__social a:hover { color: var(--white); }
.utility-bar__social svg { width: 15px; height: 15px; }

/* --- Animated stat counters --- */
.stats-band { background: var(--bg-alt); border-block: 1px solid var(--border); padding: var(--s-8) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-5); text-align: center; }
.stat__num {
  display: block; font-family: var(--font-display); font-size: calc(var(--fs-3xl) * 1.1);
  font-weight: 700; color: var(--accent); line-height: 1;
}
.stat__label {
  display: block; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-2);
}
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-6); } }

/* --- Before / After drag slider --- */
.ba {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; background: var(--bg-alt-2); user-select: none; touch-action: pan-y;
  border: 1px solid var(--border);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: var(--white); transform: translateX(-50%); cursor: ew-resize; z-index: 3;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px;
  transform: translate(-50%,-50%); border-radius: 50%; background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.ba__handle::before {
  content: "\2194"; position: absolute; top: 50%; left: 50%; z-index: 4;
  transform: translate(-50%,-50%); font-size: 20px; color: var(--accent); font-weight: 700;
}
.ba__tag {
  position: absolute; bottom: var(--s-3); z-index: 2;
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
  background: rgba(10,12,14,0.72); padding: 0.3rem 0.7rem; border-radius: var(--r-full);
}
.ba__tag--before { left: var(--s-3); }
.ba__tag--after  { right: var(--s-3); }
.ba__range { position: absolute; inset: 0; z-index: 5; opacity: 0; cursor: ew-resize; width: 100%; height: 100%; margin: 0; }

/* --- Service card with photo (BTOL style) --- */
.svc-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s;
}
.svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.svc-card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.svc-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.svc-card__body h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.svc-card__body p { font-size: var(--fs-sm); color: var(--text-muted); flex: 1; }
.svc-card__body .link-arrow { margin-top: var(--s-3); font-size: var(--fs-sm); }

/* --- Roof type tiles --- */
.rt-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s-4); }
.rt-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4;
  display: block; text-decoration: none; background: var(--navy-900);
}
.rt-card img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .2s, transform .3s; }
.rt-card:hover img { opacity: .55; transform: scale(1.04); }
.rt-card__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-4);
  background: linear-gradient(transparent, rgba(10,12,14,.88));
  color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
}
@media (max-width: 1080px) { .rt-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .rt-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* --- Numbered process steps (BTOL style) --- */
.proc { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-5); counter-reset: step; }
.proc__item { position: relative; padding-top: var(--s-7); }
.proc__num {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--accent); line-height: 1;
}
.proc__item h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.proc__item p { font-size: var(--fs-sm); }
.section--dark .proc__num { color: #FFFFFF; }
@media (max-width: 960px) { .proc { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-6); } }
@media (max-width: 560px) { .proc { grid-template-columns: 1fr; } }

/* --- Red storm band --- */
.storm-band {
  background: var(--accent); color: var(--white); border-radius: var(--r-xl);
  padding: var(--s-8); display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,0.7fr);
  gap: var(--s-6); align-items: center;
}
.storm-band h2 { color: var(--white); margin-bottom: var(--s-3); }
.storm-band p { color: #FFFFFF; margin-bottom: 0; }
.storm-band .btn--white {
  background: var(--white); color: var(--accent); border-color: var(--white); font-weight: 800;
}
.storm-band .btn--white:hover { background: #E8F1FA; color: var(--accent-press); border-color: #E8F1FA; }
@media (max-width: 860px) { .storm-band { grid-template-columns: 1fr; padding: var(--s-6); } }

/* ==========================================================================
   BTOL MIRROR - exact layout language, Tru Armor logo blue + BTOL red
   ========================================================================== */
:root {
  --panel: #0E559E;        /* logo blue-deep: their navy surfaces */
  --panel-deep: #0B4380;   /* darker shade of the same logo blue */
}

/* --- Fixed QUICK INQUIRY tab, left edge --- */
.quick-tab {
  position: fixed; left: 0; top: 40%; z-index: 140;
  background: var(--accent); color: var(--white);
  border-radius: 0 14px 14px 0; padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: var(--shadow-md);
}
.quick-tab a { color: var(--white); display: flex; }
.quick-tab svg { width: 20px; height: 20px; }
.quick-tab__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-head); font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 720px) { .quick-tab { display: none; } }

/* --- Utility bar socials: red squares like BTOL --- */
.utility-bar__social { display: flex; gap: 8px; align-items: center; margin: 0; padding: 0; list-style: none; }
.utility-bar__social .social-label { color: var(--text-invert-muted); font-size: var(--fs-xs); margin-right: 2px; }
.utility-bar__social a.sq {
  width: 24px; height: 24px; border-radius: 5px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.utility-bar__social a.sq:hover { background: var(--accent-hover); color: #fff; }
.utility-bar__social a.sq svg { width: 16px; height: 16px; }

/* --- Red pill call button in header --- */
.btn--pill { border-radius: var(--r-full); }

/* --- Split hero, BTOL structure --- */
.hero2 { background: var(--white); padding: var(--s-4) 0 var(--s-6); }
.hero2__grid { display: grid; grid-template-columns: minmax(0,0.96fr) minmax(0,1.04fr); gap: var(--s-4); align-items: start; }
.hero2__panel {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-deep) 100%);
  border-radius: var(--r-xl); color: #DCE9F7;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.hero2__panel h1 { color: var(--white); font-size: clamp(2.1rem, 3.9vw, 3.2rem); margin-bottom: var(--s-3); }
.hero2__panel h1 .red { color: #A9CFF4; }
.hero2__panel .hero2__subhead { color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md); margin-bottom: var(--s-3); }
.hero2__badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  border: 1.5px solid var(--accent); color: var(--white); border-radius: var(--r-full);
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; padding: 6px 14px; margin-bottom: var(--s-4);
}
.hero2__badge svg { width: 16px; height: 16px; color: #A9CFF4; }
.hero2__right { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.hero2__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.hero2__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2/1; display: block; }
.hero2__cards { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-5); align-items: start; }
.hero2__form, .hero2__quote {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: var(--s-5);
}
.hero2__form h2 {
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  color: var(--panel); margin-bottom: var(--s-4);
}
.hero2__quote blockquote { margin: 0 0 var(--s-3); font-style: italic; font-size: var(--fs-sm); color: var(--text-body); border: 0; padding: 0; }
.hero2__quote .stars { color: #F2B01E; letter-spacing: 2px; font-size: 1.05rem; }
.hero2__quote .who { font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: var(--fs-sm); color: var(--text); margin-top: 6px; }
@media (max-width: 1080px) {
  .hero2__grid { grid-template-columns: 1fr; }
  .hero2__cards { grid-template-columns: 1fr; }
}

/* --- White stat cards with big red numbers --- */
.stats-cards { background: var(--bg-alt); padding: var(--s-7) 0; }
.stats-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); }
.stat-card {
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  text-align: center; padding: var(--s-6) var(--s-4);
}
.stat-card .stat__num { color: var(--panel); font-family: var(--font-head); font-weight: 800; font-size: 2.9rem; }
.stat-card .stat__label { color: var(--accent); font-weight: 800; letter-spacing: 0.09em; }
@media (max-width: 720px) { .stats-cards__grid { grid-template-columns: 1fr; } }

/* --- Dark blue full-bleed sections (their navy) --- */
.section--panel { background: linear-gradient(165deg, var(--panel) 0%, var(--panel-deep) 100%); color: #D5E4F4; }
.section--panel h2 { color: var(--white); }
.section--panel .eyebrow { color: #FF8A8A; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-7); }
.section-head--row h2 { margin-bottom: 0; }

/* --- BTOL service card: photo, red divider, red circle icon, dark body --- */
.svc2 {
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.svc2__media { position: relative; }
.svc2__media img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; display: block; }
.svc2__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent); }
.svc2__icon {
  position: absolute; right: var(--s-5); bottom: -26px; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.svc2__icon svg { width: 26px; height: 26px; }
.svc2__body { padding: var(--s-6) var(--s-5) var(--s-5); flex: 1; display: flex; flex-direction: column; }
.svc2__body h3 { color: var(--white); font-size: var(--fs-lg); }
.svc2__body p { color: #C9DCEF; font-size: var(--fs-sm); flex: 1; }
.svc2__more {
  color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; margin-top: var(--s-4);
}
.svc2__more:hover { color: #FF8A8A; }

/* --- BEFORE / AFTER rectangular red tags (BTOL style) --- */
.ba__tag { border-radius: 4px; background: var(--accent); font-size: 0.8125rem; padding: 0.55rem 1.1rem; top: var(--s-3); bottom: auto; }

/* --- Insurance: red square checklist + floating stat chip --- */
.redcheck { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.redcheck li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: var(--fs-base); }
.redcheck svg { width: 22px; height: 22px; flex: none; color: var(--accent); margin-top: 2px; }
.float-chip {
  background: var(--accent); color: var(--white); border-radius: var(--r-lg);
  text-align: center; padding: var(--s-5) var(--s-6); display: inline-block;
  box-shadow: var(--shadow-lg);
}
.float-chip .n { font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; display: block; line-height: 1; }
.float-chip .l { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.09em; text-transform: uppercase; }

/* --- Process: dark cards, red number circles, arrows between --- */
.proc2 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-5); }
.proc2__card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); text-align: center; position: relative;
}
.proc2__n {
  width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s-4);
}
.proc2__card h3 { color: var(--white); font-size: var(--fs-lg); }
.proc2__card p { color: #C9DCEF; font-size: var(--fs-sm); margin: 0; }
.proc2__card:not(:last-child)::after {
  content: "\2192"; position: absolute; top: 44px; right: -26px; z-index: 2;
  color: #A9CFF4; font-size: 2rem; font-weight: 700;
}
@media (max-width: 1080px) {
  .proc2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proc2__card:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) { .proc2 { grid-template-columns: 1fr; } .proc2__card::after { display: none !important; } }

/* --- Roof types: photo left, white rows right --- */
.rt2 { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: var(--s-6); align-items: start; }
.rt2__photo { border-radius: var(--r-lg); overflow: hidden; position: sticky; top: calc(var(--header-h) + 16px); }
.rt2__photo img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; display: block; }
.rt2__rows { display: flex; flex-direction: column; gap: var(--s-3); }
.rt2__row {
  display: flex; gap: var(--s-4); align-items: center; text-decoration: none;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5); transition: box-shadow .15s, transform .15s;
}
.rt2__row:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.rt2__row img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.rt2__row h3 { margin: 0 0 2px; font-size: var(--fs-lg); color: var(--panel); }
.rt2__row p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 960px) { .rt2 { grid-template-columns: 1fr; } .rt2__photo { position: static; } .rt2__photo img { aspect-ratio: 16/9; } }

/* --- Full-width red CTA band --- */
.redband { background: var(--accent); padding: clamp(2.2rem, 4.5vw, 3.6rem) 0; }
.redband h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); text-align: center; margin-bottom: var(--s-3); }
.redband h2 .navy { color: #C7DDF5; }  /* BTOL uses navy-on-red at 2.2:1 - an accessibility failure we will not copy */
.redband p { color: var(--white); text-align: center; max-width: 62ch; margin: 0 auto var(--s-6); }
.redband .btn-row { justify-content: center; }
.redband .btn--white { background: var(--white); color: var(--accent); border-color: var(--white); font-weight: 800; }
.redband .btn--white:hover { background: var(--panel-deep); color: var(--white); border-color: var(--panel-deep); }

/* ==========================================================================
   CONVERSION POLISH PASS
   ========================================================================== */

/* --- Hero photo: taller, more intentional frame; truck + roofline both read --- */
.hero2__photo img { aspect-ratio: 1800/946; object-position: center 62%; }

/* --- Free inspection form: premium spacing and hierarchy --- */
.hero2__form { padding: var(--s-6); }
.hero2__form h2 {
  font-size: clamp(0.8rem, 3.1vw, 1.05rem);   /* always one line, even at 320px */
  letter-spacing: 0.045em; white-space: nowrap;
  margin-bottom: var(--s-3);
}
.hero2__form .form { display: flex; flex-direction: column; gap: var(--s-4); }
.hero2__form .field label,
.hero2__form label {
  font-family: var(--font-head); font-weight: 700; font-size: 0.875rem;
  color: var(--text); margin-bottom: 6px; display: block;
}
.hero2__form input[type="text"], .hero2__form input[type="tel"],
.hero2__form input[type="email"], .hero2__form select {
  width: 100%; font-size: 1rem; padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-alt); transition: border-color .15s, background .15s, box-shadow .15s;
}
.hero2__form input:focus, .hero2__form select:focus {
  border-color: var(--panel); background: var(--white); outline: none;
  box-shadow: 0 0 0 3px rgba(14,85,158,0.14);
}
.hero2__form .form__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-4); }
.hero2__form .consent { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); display: flex; gap: 10px; align-items: flex-start; }
.hero2__form .consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; }
.hero2__form .btn--block { padding: 1rem; font-size: 1.05rem; }
.hero2__form .form__microcopy { font-size: 0.8125rem; color: var(--text-muted); display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.hero2__form .form__microcopy svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--success); }
@media (max-width: 480px) { .hero2__form .form__row { grid-template-columns: 1fr; } }

/* --- Auto-rotating reviews carousel + Google badge --- */
.rev-car { position: relative; }
.rev-car__google {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-4);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: 0.05em; color: var(--text-muted); text-transform: uppercase;
}
.rev-car__google svg { width: 20px; height: 20px; }
.rev-car__slide { display: none; }
.rev-car__slide.is-active { display: block; animation: revfade .45s ease; }
@keyframes revfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rev-car__dots { display: flex; gap: 0; margin-top: var(--s-4); margin-left: -9px; }
/* Dot stays 9px visually; the button around it is a 36px tap target */
.rev-car__dot {
  width: 36px; height: 36px; border: 0; padding: 0; cursor: pointer;
  background: transparent; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.rev-car__dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong); transition: background .15s, transform .15s;
}
.rev-car__dot.is-active::after { background: var(--accent); transform: scale(1.25); }
.rev-car__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* --- Trust badge shelf: intentionally empty, awaiting real badges --- */
.badge-shelf { background: var(--white); padding: var(--s-7) 0; }
.badge-shelf__row { min-height: 84px; display: flex; align-items: center; justify-content: center; gap: var(--s-7); }

/* --- Services cards: tighter, taller media, premium alignment --- */
.section--panel .grid--3 { gap: var(--s-6); }
.svc2__media img { aspect-ratio: 16/9.6; }
.svc2__body { padding: var(--s-7) var(--s-6) var(--s-6); }
.svc2__body h3 { font-size: 1.3rem; margin-bottom: var(--s-3); }
.svc2__icon { width: 62px; height: 62px; bottom: -30px; border: 3px solid rgba(255,255,255,0.9); }
.svc2__icon svg { width: 28px; height: 28px; }

/* --- Process: drawn curved connector instead of text arrow --- */
.proc2__card:not(:last-child)::after {
  content: ""; width: 54px; height: 28px; font-size: 0;
  position: absolute; top: 57px; right: -47px; z-index: 2;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 28"><path d="M3 22 C 16 5, 34 5, 47 12" fill="none" stroke="white" stroke-width="4" stroke-linecap="round"/><path d="M39 6 L 49 12.5 L 38 18" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.proc2 { gap: var(--s-7); }
.proc2__card { padding: var(--s-7) var(--s-5); }

/* --- Areas map --- */
.area-map { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); margin-bottom: var(--s-7); }
.area-map iframe { display: block; width: 100%; height: 430px; border: 0; }
@media (max-width: 720px) { .area-map iframe { height: 300px; } }

/* --- FAQ: scannable, red plus indicator --- */
.faq__q { position: relative; padding-right: 44px; }
.faq__q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-weight: 800; font-size: 1.15rem; line-height: 26px; text-align: center;
}
.faq__q[aria-expanded="true"]::after { content: "\2212"; background: var(--accent); color: #fff; }

/* --- Team --- */
/* Column count follows the number of cards, so removing one leaves the
   remaining cards centred rather than an empty column on the right. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 384px));
             gap: var(--s-6); justify-content: center; }
.team-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; text-align: center; }
.team-card img, .team-card .team-avatar { width: 100%; aspect-ratio: 1/1.05; object-fit: cover; object-position: top center; }
.team-avatar {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--panel), var(--panel-deep));
  color: #fff; font-family: var(--font-display); font-size: 4rem; font-weight: 700;
}
.team-card__body { padding: var(--s-5); }
.team-card__body h3 { margin-bottom: 2px; font-size: 1.25rem; }
.team-card__role { color: var(--accent); font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: var(--s-3); }
.team-card__body p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
@media (max-width: 960px) { .team-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* --- Desktop proportion pass --- */
.section { padding: clamp(2.4rem, 5vw, 4.2rem) 0; }
/* --tight must actually be tighter than .section at every width */
.section--tight { padding: clamp(1.7rem, 3.6vw, 3.1rem) 0; }
.section-head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
@media (min-width: 1500px) { .container { max-width: 1320px; } }

/* --- Mobile per-section pass --- */
@media (max-width: 720px) {
  .hero2 { padding: var(--s-3) 0 var(--s-5); }
  .hero2__panel { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); }
  .hero2__panel h1 { font-size: 2.05rem; }
  .hero2__photo { border-radius: var(--r-lg); }
  .hero2__form { padding: var(--s-5); }
  .svc2__media img { aspect-ratio: 16/9; }
  .svc2__body { padding: var(--s-6) var(--s-5) var(--s-5); }
  .rt2__row { padding: var(--s-3) var(--s-4); }
  .rt2__row img { width: 52px; height: 52px; }
  .rt2__row h3 { font-size: 1.05rem; }
  .redband { padding: var(--s-8) 0; }
  .stats-cards { padding: var(--s-6) 0; }
  .stat-card { padding: var(--s-5) var(--s-4); }
  .stat-card .stat__num { font-size: 2.3rem; }
  .badge-shelf { padding: var(--s-5) 0; }
  .badge-shelf__row { min-height: 56px; }
  .btn--lg { padding: 0.95rem 1.4rem; font-size: 1rem; }
  .faq__q { min-height: 52px; }
}

/* ==========================================================================
   PAGE-FIT GUARANTEE
   Nothing may ever render wider than the viewport.
   ========================================================================== */
html { overflow-x: clip; }
body { overflow-x: clip; }
iframe { max-width: 100%; }

/* Grid and flex children may always shrink below their content size */
.grid > *, .split > *, .hero2__grid > *, .hero2__right > *, .hero2__cards > *,
.form__row > *, .stats-cards__grid > *, .stats-grid > *, .proc2 > *, .rt2 > *,
.rt-grid > *, .team-grid > *, .footer__grid > *, .section-head--row > * { min-width: 0; }

/* Long unbreakable strings (emails, URLs) wrap instead of pushing the page wide */
.site-footer a, .footer__contact span, .consent span { overflow-wrap: anywhere; }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3 { overflow-wrap: break-word; }

/* Process connector arrows only render where all of them are interior (4-column desktop) */
@media (max-width: 1080px) { .proc2__card::after { display: none; } }


/* ==========================================================================
   HEADER FIT FIX
   With 8 nav items + phone + CTA, the full nav physically cannot fit below
   ~1300px. Collapse to the hamburger there, long before anything clips.
   ========================================================================== */
@media (max-width: 1399px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* Below 1750px the tagline costs more width than it earns */
@media (max-width: 1750px) { .site-header .brand__text { display: none; } }
/* Call Us stays visible at every width - it is the header CTA */
/* The CTA button may never shrink, wrap, or clip */
.header__actions { flex-wrap: nowrap; }
.header__actions .btn { white-space: nowrap; flex: none; }
.site-header .container { flex-wrap: nowrap; }

/* ==========================================================================
   UTILITY BAR - exact match to reference site
   Measured from their live page: Inter 16px/400, bar #183048,
   white link text, red icons, muted "Follow Us:" label.
   ========================================================================== */
.utility-bar {
  background: #183048;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 24px;
}
.utility-bar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 48px; padding-top: 8px; padding-bottom: 8px;
}
.utility-bar__facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.utility-bar__facts li { margin: 0; display: flex; align-items: center; gap: 9px; }
.utility-bar__facts svg { width: 20px; height: 20px; flex: none; color: #FF5A5A; }
.utility-bar__facts a { color: #FFFFFF; text-decoration: none; font-size: 16px; }
.utility-bar__facts a:hover { color: #FF8A8A; }
.utility-bar__social { gap: 10px; }
.utility-bar__social .social-label { color: #9DB2C6; font-size: 16px; margin-right: 4px; }
.utility-bar__social a.sq { width: 27px; height: 27px; border-radius: 6px; }
.utility-bar__social a.sq svg { width: 16px; height: 16px; }
@media (max-width: 960px) {
  .utility-bar__facts li:nth-child(3) { display: none; }  /* referral drops first */
  .utility-bar__facts li:nth-child(1) { display: none; }  /* address drops too - keeps email + social icons on one line */
  .utility-bar__social .social-label { display: none; }
}
@media (max-width: 720px) {
  .utility-bar { font-size: 14px; }
  .utility-bar__facts a { font-size: 14px; }
  .utility-bar .container { flex-wrap: wrap; justify-content: center; row-gap: 4px; column-gap: 12px; }
  .utility-bar__facts { justify-content: center; }
  .utility-bar__social { gap: 6px; }
}

/* ==========================================================================
   FLOATING "TEXT US" BUTTON - bottom right, like the reference site
   ========================================================================== */
.text-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 160;
  display: flex; align-items: center; gap: 9px;
  background: var(--accent); color: #FFFFFF; text-decoration: none;
  font-family: "Inter", var(--font-head), sans-serif; font-weight: 700; font-size: 15px;
  padding: 13px 20px; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(14, 85, 158, 0.38);
  transition: transform .15s ease, background .15s ease;
}
.text-fab:hover { background: var(--accent-hover); color: #FFFFFF; transform: translateY(-2px); }
.text-fab svg { width: 19px; height: 19px; flex: none; }
.text-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(14, 85, 158, 0.45); animation: fabpulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fabpulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 85, 158, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(14, 85, 158, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 85, 158, 0); }
}
@media (prefers-reduced-motion: reduce) { .text-fab::before { animation: none; } }
@media (max-width: 720px) {
  /* sit above the sticky call bar */
  .text-fab { bottom: 92px; right: 12px; padding: 12px 17px; font-size: 14px; }
}
@media print { .text-fab, .quick-tab { display: none !important; } }

/* Failure-mode guarantee: if the header ever runs out of room again, the nav
   yields space - the phone number and CTA button can never be pushed off-screen */
.site-header .container { justify-content: space-between; }
.site-header .nav { min-width: 0; overflow: visible; } /* was hidden - clipped all dropdowns */
.site-header .nav__list { flex-wrap: nowrap; }
.header__actions { margin-left: auto; }

/* ==========================================================================
   RENDER-VERIFIED FIXES + FLASHY DISCOUNT TICKET + SWIPE CAROUSEL + MOBILE PASS
   ========================================================================== */

/* 320px phones: header phone yields (number lives in utility bar, sticky bar, Text Us) */
@media (max-width: 380px) { .header__phone { display: none; } }

/* --- Discount ticket: gold-on-red, reads like a real offer --- */
.hero-discount { display: none; } /* replaced by the ticket below */
.discount-ticket {
  position: relative; margin-top: var(--s-5);
  background: linear-gradient(135deg, #0B4380 0%, #0E559E 55%, #1273D4 100%);
  border: 0;
  border-radius: var(--r-md); padding: 0.6rem 0.8rem;
  box-shadow: 0 5px 16px rgba(4, 16, 30, 0.3);
  max-width: 400px;
  overflow: hidden;
}
.discount-ticket::before {
  content: ""; position: absolute; top: -60%; left: -20%;
  width: 55%; height: 220%; transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(14,85,158,0.07), transparent);
  animation: ticketshine 4.5s ease-in-out infinite;
}
@keyframes ticketshine { 0%,55% { left: -60%; } 85%,100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .discount-ticket::before { animation: none; } }
.discount-ticket__amount {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 700; color: #0E559E; line-height: 1; display: block;
}
.discount-ticket__what { color: #3A4653; font-family: var(--font-head); font-weight: 800; font-size: 0.78rem; display: block; margin: 2px 0 6px; }
.discount-ticket__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.discount-ticket__chips span {
  background: #E8F1FA; border: 1px solid #B7D3EE;
  color: #0B4380; border-radius: var(--r-full); padding: 2px 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.68rem;
}
.discount-ticket__cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: #0E559E; color: #FFFFFF !important; text-decoration: none;
  font-family: var(--font-head); font-weight: 800; font-size: 0.72rem;
  padding: 5px 12px; border-radius: var(--r-full);
}
.discount-ticket__cta:hover { background: #0B4380; color: #FFFFFF; }

/* --- Carousel: swipeable, arrows, drag cursor --- */
.rev-car { touch-action: pan-y; }
.rev-car__slide { cursor: grab; user-select: none; }
.rev-car__slide:active { cursor: grabbing; }
.rev-car__nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); }
.rev-car__arrows { display: flex; gap: 8px; }
.rev-car__arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  background: var(--white); color: var(--panel); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.rev-car__arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.rev-car__arrow svg { width: 17px; height: 17px; }

/* --- Mobile deep pass (render-informed) --- */
@media (max-width: 720px) {
  .hero2__panel h1 { font-size: 1.85rem; line-height: 1.12; }
  .hero2__panel { padding: var(--s-5) var(--s-4); }
  .hero2__badge { font-size: 0.7rem; padding: 6px 12px; }
  .hero2__subhead { font-size: 1.02rem; }
  .hero2__grid, .hero2__right, .hero2__cards { gap: var(--s-4); }
  .discount-ticket { padding: 0.95rem 1rem; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .section-head--row .btn { width: 100%; }
  .svc2__icon { width: 52px; height: 52px; bottom: -24px; }
  .svc2__icon svg { width: 24px; height: 24px; }
  .ba { aspect-ratio: 16/11; }
  .proc2__card { padding: var(--s-5) var(--s-4); text-align: left; }
  .proc2__n { margin: 0 0 var(--s-3); }
  .area-map iframe { height: 260px; }
  .team-card img, .team-card .team-avatar { aspect-ratio: 4/3.4; }
  .team-avatar { font-size: 3rem; }
  .redcheck li { font-size: var(--fs-sm); }
  .float-chip { padding: var(--s-4) var(--s-5); }
  .float-chip .n { font-size: 2rem; }
  .redband h2 { font-size: 1.7rem; }
  .faq__q { font-size: 0.98rem; line-height: 1.35; }
}

/* --- Idaho weather cards --- */
.wx-grid { gap: var(--s-5); }
.wx-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5); border-top: 3px solid var(--panel);
  transition: box-shadow .15s, transform .15s;
}
.wx-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-top-color: var(--accent); }
.wx-card__icon {
  width: 52px; height: 52px; border-radius: 12px; background: var(--blue-soft);
  color: var(--panel); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.wx-card__icon svg { width: 27px; height: 27px; }
.wx-card h3 { font-size: 1.15rem; margin-bottom: var(--s-2); }
.wx-card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
@media (max-width: 720px) {
  .wx-card { padding: var(--s-5) var(--s-4); }
  .wx-card__icon { width: 44px; height: 44px; }
}

/* ==========================================================================
   BOOK NOW TAB - fixed right edge, mirrors the left Quick Inquiry tab
   ========================================================================== */
.book-tab {
  position: fixed; right: 0; top: 40%; z-index: 140;
  background: var(--accent); color: var(--white); text-decoration: none;
  border-radius: 14px 0 0 14px; padding: 18px 10px;
  box-shadow: var(--shadow-md);
  transition: background .15s, padding-right .15s;
}
.book-tab:hover { background: var(--accent-hover); color: var(--white); padding-right: 14px; }
.book-tab__label {
  writing-mode: vertical-rl;
  font-family: var(--font-head); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.09em; text-transform: uppercase;
}
@media (max-width: 720px) { .book-tab { display: none; } }

/* --- Mobile header: phone number centered between logo and Menu --- */
@media (max-width: 720px) {
  .site-header .container { gap: var(--s-2); }
  .header__actions { flex: 1; margin-left: 0; gap: var(--s-2); }
  .header__phone { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
}

/* Social icons: kill the inherited list-item margin that pushed the first
   three icons up 4px and left TikTok sitting visibly lower */
.utility-bar__social li { margin: 0; }

/* --- Form fine print: one clean paragraph beside the shield icon --- */
.form__microcopy { display: flex; gap: 9px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.form__microcopy svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--success); }
.form__microcopy span { flex: 1; min-width: 0; }
.form__microcopy a { font-weight: 700; }

/* ==========================================================================
   TEXT-US BANNER - slim strip between emergency ribbon and header
   Noticeable, minimal, one line, one action.
   ========================================================================== */
.text-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--blue-soft); color: var(--panel-deep);
  border-bottom: 1px solid var(--blue-border);
  font-family: "Inter", var(--font-head), sans-serif; font-size: 15px; line-height: 1.4;
  padding: 9px 16px; text-decoration: none; text-align: center;
  transition: background .15s;
}
.text-banner:hover { background: #DBEAFB; color: var(--panel-deep); }
.text-banner strong { color: var(--panel-deep); font-weight: 800; }
.text-banner svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.text-banner__go { color: var(--accent); font-weight: 800; flex: none; }
@media (max-width: 720px) {
  .text-banner { font-size: 13.5px; padding: 8px 12px; gap: 8px; }
}


/* ==========================================================================
   HEADER TEXT-US MESSAGE - message + number, centered on mobile and on
   desktop widths where the nav is collapsed
   ========================================================================== */
.header__text-cta { max-width: 250px; }
.header__text-cta .header__phone-label {
  display: block; white-space: normal; text-transform: none; text-align: left;
  font-size: 11px; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--text-muted); font-weight: 700;
}
.header__text-cta .header__phone-num { margin-top: 1px; }
.header__text-cta:hover .header__phone-label { color: var(--panel-deep); }

/* Below the nav-collapse width the center of the header is free: use it */
@media (max-width: 1399px) {
  .header__actions { flex: 1; margin-left: 0; justify-content: flex-start; }
  .nav-toggle { margin-left: auto; }   /* Text Us + Call hug the logo, Menu holds the right edge */
  .header__text-cta { margin-left: auto; margin-right: auto; text-align: center; }
  .header__text-cta .header__phone-num { text-align: center; display: block; }
}
/* (legacy shrink tiers removed - superseded by the TEXT-US button tiers below) */

/* Polish: tighter, more deliberate type in the message block */
.header__text-cta .header__phone-label { max-width: 300px; margin: 0 auto; }
.header__text-cta .header__phone-num { letter-spacing: 0.01em; }


/* ==========================================================================
   HEADER TEXT-US - desktop: composed chip. mobile: legible solid button.
   ========================================================================== */
.header__text-cta {
  display: inline-flex; flex-direction: row; align-items: center; gap: 12px;
  background: var(--blue-soft); border: 1px solid var(--blue-border);
  border-radius: 14px; padding: 9px 18px 9px 10px;
  box-shadow: 0 1px 3px rgba(10,12,14,0.08);
  text-decoration: none; line-height: 1.15; transition: background .15s, border-color .15s;
  max-width: 360px;
}
.header__text-cta:hover { background: #DBEAFB; border-color: var(--panel); }
.tc-ic {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tc-ic svg { width: 18px; height: 18px; }
.tc-copy { display: flex; flex-direction: column; }
.header__text-cta .header__phone-label {
  display: block; white-space: normal; text-transform: none; text-align: left;
  font-family: "Inter", var(--font-head), sans-serif;
  font-size: 11.5px; line-height: 1.25; font-weight: 700; color: var(--panel-deep);
  max-width: 250px; letter-spacing: 0;
}
.tc-short { display: none; }
.header__text-cta .header__phone-num {
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
  color: var(--navy-900); margin-top: 1px; letter-spacing: 0.01em;
}

/* Full-nav widths: compact chip (icon + number) so the header always fits */
@media (min-width: 1541px) { .header__text-cta .header__phone-label { display: none; } }

/* Desktop with nav collapsed (901px+): full chip true-centered, buttons pinned right */
@media (min-width: 901px) and (max-width: 1540px) {
  .site-header .container { position: relative; }
  .header__text-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
  .header__actions { justify-content: flex-end; flex: 1; margin-left: 0; }
}
/* Tablet (721-900px): compact chip (icon + number), flex-centered - collision-proof */
@media (min-width: 721px) and (max-width: 900px) {
  .header__actions { flex: 1; margin-left: 0; }
  .header__text-cta { margin-left: auto; margin-right: auto; }
  .header__text-cta .header__phone-label { display: none; }
}

/* Mobile: a real button - solid red, white text, one line, unmissable */
@media (max-width: 720px) {
  .header__actions { flex: 1; margin-left: 0; }
  .header__text-cta {
    margin-left: auto; margin-right: auto;
    background: var(--accent); border-color: var(--accent);
    border-radius: 12px; padding: 9px 16px 9px 9px; gap: 8px;
    box-shadow: 0 2px 8px rgba(14,85,158,0.3);
  }
  .header__text-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .tc-ic { width: 26px; height: 26px; background: rgba(255,255,255,0.22); }
  .tc-ic svg { width: 15px; height: 15px; }
  .header__text-cta .header__phone-label { display: none; }
  .tc-copy { flex-direction: row; align-items: baseline; gap: 6px; }
  .tc-short {
    display: inline; font-family: var(--font-head); font-weight: 800;
    font-size: 12px; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .header__text-cta .header__phone-num { color: #FFFFFF; font-size: 1rem; margin: 0; }
}
@media (max-width: 380px) {
  .header__phone { display: inline-flex; }
  .tc-short { display: none; }
  .header__text-cta { padding: 7px 12px 7px 7px; }
  .header__text-cta .header__phone-num { font-size: 0.92rem; }
}

/* ==========================================================================
   HERO TRUST BADGES - Warranty + Insurance Claims, white on the blue panel
   ========================================================================== */
.hero-badges { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-5); flex-wrap: wrap; }
.hero-badges a {
  display: inline-flex; align-items: center; gap: 10px;
  color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-base);
}
.hero-badges a:hover { color: #C7DDF5; }
.hero-badge__ic {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1.8px solid rgba(255,255,255,0.85); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.hero-badge__ic svg { width: 25px; height: 25px; }
@media (max-width: 720px) {
  .hero-badges { gap: var(--s-4); margin-top: var(--s-4); }
  .hero-badges a { font-size: var(--fs-sm); gap: 8px; }
  .hero-badge__ic { width: 36px; height: 36px; }
  .hero-badge__ic svg { width: 21px; height: 21px; }
}

/* ==========================================================================
   WOOD SHAKE FEATURE - portrait owner video + aerial, homepage + projects
   ========================================================================== */
.ws-feature { background: var(--bg-alt); padding: clamp(1.7rem, 3.6vw, 3.1rem) 0; }
.ws-feature__grid { display: grid; grid-template-columns: minmax(0,0.62fr) minmax(0,1.38fr); gap: var(--s-7); align-items: center; }
.ws-feature__video { position: relative; max-width: 300px; margin: 0 auto; }
.ws-feature__video video {
  width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block;
  border-radius: 18px; background: #0A0C0E; box-shadow: var(--shadow-lg);
  border: 3px solid var(--white);
}
.ws-feature__tag {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(10,12,14,0.75); color: #fff; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xs);
  padding: 5px 14px; border-radius: var(--r-full); pointer-events: none;
}
@media (max-width: 900px) {
  .ws-feature__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .ws-feature__video { max-width: 260px; }
}

/* --- Google Drive video embed, 16:9 rounded frame --- */
.drive-video { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #0A0C0E; margin-bottom: var(--s-6); }
.drive-video iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* Drive video sizing: tile matches photo cards; compact caps homepage width */
.drive-video--tile { margin: 0; }
.drive-video--tile iframe { aspect-ratio: 4/3; height: 100%; }
.drive-video--compact { max-width: 520px; }
@media (max-width: 720px) { .drive-video--compact { max-width: none; } }

/* SMS fallback under form submit */
.form__alt { text-align: center; margin: 10px 0 0; font-size: 0.95rem; }
.form__alt a { color: var(--panel-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form__alt a:hover { color: var(--accent); }

/* VIDEO POSTER - clean click-to-watch card (replaces ugly embedded Drive player) */
.video-poster {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md); background: #0A0C0E;
}
.video-poster img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.video-poster:hover img { transform: scale(1.03); }
.video-poster__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4); transition: transform .2s ease;
}
.video-poster__play svg { width: 30px; height: 30px; margin-left: 3px; }
.video-poster:hover .video-poster__play { transform: translate(-50%, -50%) scale(1.08); }
.video-poster__label {
  position: absolute; left: 14px; bottom: 12px;
  background: rgba(10,12,14,0.78); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.85rem;
  padding: 7px 13px; border-radius: 999px; letter-spacing: 0.01em;
}
.video-poster--compact { max-width: 520px; }
@media (max-width: 720px) {
  .video-poster--compact { max-width: none; }
  .video-poster__play { width: 58px; height: 58px; }
}

/* NATIVE VIDEO - self-hosted clip card */
.native-video { margin: 0; }
.native-video video {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); background: #0A0C0E;
}
.native-video figcaption { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }

/* HEADER CALL BUTTON - red pill, icon-only on small phones */
.btn--call { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.btn--call svg { flex: none; }
@media (max-width: 560px) {
  .btn--call .call-label { display: none; }
  .btn--call { width: 46px; height: 46px; padding: 0; border-radius: 50%; justify-content: center; }
}

/* BLUE THEME - accents that sit on blue backgrounds use a light tint */
.hero2__badge { border-color: rgba(255,255,255,0.55); }
.hero2__badge svg { color: #A9CFF4; }
.section--panel .eyebrow { color: #A9CFF4; }
.review__stars { color: #F6BB06; } /* review stars stay star-colored - universal trust signal */

/* WS FEATURED MEDIA - two matched cards instead of stacked odd sizes */
.ws-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.25rem 0; }
.ws-media .video-poster, .ws-media .native-video { margin: 0; }
.ws-media .video-poster img { aspect-ratio: 16 / 10; object-fit: cover; }
.ws-media .native-video video { aspect-ratio: 16 / 10; object-fit: cover; }
.ws-media .native-video figcaption { font-size: 0.78rem; margin-top: 6px; }
.ws-media .video-poster__play { width: 52px; height: 52px; }
.ws-media .video-poster__play svg { width: 24px; height: 24px; }
.ws-media .video-poster__label { left: 10px; bottom: 9px; font-size: 0.72rem; padding: 5px 10px; }
@media (max-width: 640px) { .ws-media { grid-template-columns: minmax(0, 1fr); } }

/* OFFER STRIP - one-line discount band under the hero */
.offer-strip { background: linear-gradient(135deg, var(--panel-deep) 0%, var(--panel) 100%); padding: 11px 0; }
.offer-strip__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px; text-align: center; }
.offer-strip__amt {
  font-family: var(--font-display); font-weight: 700; color: #FFFFFF;
  font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: 0.02em; white-space: nowrap;
}
.offer-strip__who { color: #C7DDF5; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; }
.offer-strip__cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: #FFFFFF; color: var(--panel-deep); text-decoration: none;
  font-family: var(--font-head); font-weight: 800; font-size: 0.8rem;
  padding: 7px 15px; border-radius: var(--r-full); white-space: nowrap;
  transition: background .15s, transform .15s;
}
.offer-strip__cta:hover { background: #E8F1FA; transform: translateY(-1px); }
@media (max-width: 640px) {
  .offer-strip { padding: 10px 0; }
  .offer-strip__inner { gap: 6px 14px; }
  .offer-strip__who { font-size: 0.78rem; }
}

/* BUTTONS NEVER WRAP - one line at every width */
.btn { white-space: nowrap; }
@media (max-width: 400px) {
  .btn--lg, .btn--block { font-size: 0.92rem; padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* CONTRAST PASS - no blue-on-blue anywhere */
/* primary buttons sitting on blue surfaces invert to white */
.hero2__panel .btn--primary, .section--panel .btn--primary {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--panel-deep);
}
.hero2__panel .btn--primary:hover, .section--panel .btn--primary:hover {
  background: #DCEBFB; border-color: #DCEBFB; color: var(--panel-deep);
}
/* secondary (call) button on the blue hero panel: white outline, white text */
.hero2__panel .btn--secondary {
  border-color: rgba(255,255,255,0.72); color: #FFFFFF; background: transparent;
}
.hero2__panel .btn--secondary:hover {
  background: rgba(255,255,255,0.14); border-color: #FFFFFF; color: #FFFFFF;
}
/* deepen full-bleed blue sections so stacked blues separate cleanly */
.section--panel { background: linear-gradient(165deg, #0C3B6E 0%, #082B50 100%); }
.offer-strip { border-top: 3px solid #FFFFFF; border-bottom: 3px solid #FFFFFF; }

/* HERO DENSITY - no filler, columns close in height */
.hero2__photo img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.hero2__cards { gap: var(--s-4); }
.hero2__form { padding: var(--s-5); }
.hero-badges { margin-top: var(--s-4); gap: var(--s-5); }
@media (max-width: 900px) { .hero2__photo img { max-height: 240px; } }

/* AREA CATEGORIES - two tidy groups instead of a wall of towns */
.area-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.area-cat { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); }
.area-cat h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--panel-deep); }
.area-cat p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.area-cat a { color: var(--panel); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.area-cat a:hover { color: var(--panel-deep); }
.area-more { text-align: center; margin: var(--s-5) 0 0; }
@media (max-width: 700px) { .area-cats { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }

/* HOVER BRIDGE - covers the gap between button and panel so it can't vanish mid-travel */
.nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

/* HERO ASIDE - text-photos card under the blue panel */
.hero2__aside {
  grid-column: 1;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--s-5); text-align: center;
}
.hero2__aside-cta {
  display: inline-block; font-family: var(--font-head); font-weight: 800;
  font-size: 1.02rem; color: var(--panel); text-decoration: underline; text-underline-offset: 3px;
  margin-bottom: 8px;
}
.hero2__aside-cta:hover { color: var(--panel-deep); }
.hero2__aside .form__microcopy { margin: 0; justify-content: center; }
@media (max-width: 900px) { .hero2__aside { grid-column: auto; } }

/* SMS button in the aside card */
.hero2__sms-btn { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; }
.hero2__sms-btn svg { flex: none; }

/* LEFT COLUMN STACK - panel and text-photos card hug with one small gap */
.hero2__left { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

/* FOOTER V2 - Pages / Services / Contact Us with arrow bullets */
.footer__grid--3 { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.15fr); gap: var(--s-7); }
.site-footer .footer__grid--3 h3 { font-size: 1.5rem; margin-bottom: 1.1rem; letter-spacing: 0.01em; }
.footer__links li { margin-bottom: 0.25rem; }
/* vertical padding gives each footer link a comfortable tap target */
.footer__links a { display: inline-flex; align-items: baseline; gap: 10px; color: #D7E2EE; font-size: 0.95rem; padding: 7px 0; }
.footer__links a::before { content: "\2192"; color: #A9CFF4; font-weight: 700; flex: none; }
.footer__links a:hover { color: #FFFFFF; }
.footer__c2 { list-style: none; margin: 0; padding: 0; }
.footer__c2 li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 1rem; font-size: 0.95rem; }
.footer__c2 svg { width: 18px; height: 18px; color: #A9CFF4; flex: none; margin-top: 2px; }
.footer__soc { display: flex; gap: 8px; margin: 1.1rem 0 0.9rem; }
.footer__soc a { width: 32px; height: 32px; border-radius: 7px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.footer__soc a:hover { background: var(--accent-hover); }
.footer__soc svg { width: 16px; height: 16px; }
.footer__lic { font-size: 0.8rem; color: #9AA2AC; margin: 0; }
.footer__lic strong { color: #FFFFFF; letter-spacing: 0.02em; }
@media (max-width: 760px) { .footer__grid--3 { grid-template-columns: minmax(0,1fr); gap: var(--s-6); } }

/* MINI TEXT BUTTON - small circle left of the call button */
.btn-sms-mini {
  height: 46px; border-radius: var(--r-full); flex: none; padding: 0 16px;
  background: #FFFFFF; border: 2px solid var(--panel); color: var(--panel);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; white-space: nowrap;
  text-decoration: none; transition: background .15s;
  line-height: 1;
}
.btn-sms-mini svg { display: block; }   /* inline svg baseline was pushing content off-center */
.btn-sms-mini span { line-height: 1; display: block; }
.header__actions { align-items: center; }
.btn-sms-mini:hover { background: var(--accent-soft); }
.btn-sms-mini svg { width: 20px; height: 20px; }

/* text-fab hidden on mobile - header Text Us covers it there */
@media (max-width: 900px) { .text-fab { display: none !important; } }

/* sticky mobile bar retired */
.mobile-cta { display: none !important; }

/* INSURANCE PANEL - light red outline (matches utility-bar accent), card + caption */
.ins-panel {
  border: 1.5px solid #FF5A5A; border-radius: var(--r-xl);
  background: #FFFFFF; padding: clamp(1.4rem, 3vw, 2.4rem);
}
.ins-eyebrow { color: #FF5A5A !important; }
.ins-card { margin: 0; }
.ins-card { text-align: center; }
.ins-card img { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block;
  border-radius: 10px; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.ins-card figcaption { max-width: 460px; margin-left: auto; margin-right: auto; }
.ins-card figcaption { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-top: 12px; }

/* CREDENTIAL BAND - centered business card under the hero */
.cred-band { padding: 1.6rem 0; background: var(--white); border-bottom: 1px solid var(--border); }
.cred-band .ins-card--band { max-width: 480px; margin: 0 auto; text-align: center; }
.cred-band .ins-card--band figcaption { text-align: center; }

/* INS PANEL DENSITY - tighter type, centered card, no dead column */
.ins-panel { padding: clamp(1.1rem, 2.2vw, 1.7rem); }
.ins-panel .split { align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.ins-panel h2 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin-bottom: var(--s-3); }
.ins-panel p { margin-bottom: var(--s-3); }
.ins-panel .redcheck li { margin-bottom: 0.55rem; }
.ins-panel .ins-card img { max-width: 400px; }
@media (max-width: 860px) { .ins-panel .split { grid-template-columns: minmax(0, 1fr); } }

/* stacked insurance section keeps source order: heading and copy first,
   business card follows as supporting proof */

/* STORM STRIP - slim urgent band above the offer strip */
.storm-strip { background: #0A2F55; padding: 9px 0; }
.storm-strip__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 20px; text-align: center; }
.storm-strip__msg { color: #FFFFFF; font-family: var(--font-head); font-weight: 800; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; }
.storm-strip__msg svg { color: #A9CFF4; flex: none; }
.storm-strip__cta { display: inline-flex; align-items: center; gap: 6px; color: #A9CFF4; font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.storm-strip__cta:hover { color: #FFFFFF; }

/* ROOF TYPE MATERIAL SWATCHES - vector chips in the row circles */
.rt2__row .rt2__mat { width: 64px; height: 64px; border-radius: 50%; flex: none; display: block; box-shadow: inset 0 0 0 1px rgba(10,12,14,0.12); }

/* TEAM BIO FORMAT - names centered, bios left-aligned and readable */
.team-card__body p { text-align: left; line-height: 1.65; max-width: 34ch; margin: 0 auto; }

/* PROCESS - compact vertical stepper */
.proc-v { padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; }
.proc-v__wrap { max-width: 640px; margin: 0 auto; }
.proc-v h2 { color: #FFFFFF; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 4px 0 var(--s-5); }
.proc-v ol { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.proc-v li { position: relative; padding: 0 0 20px 54px; }
.proc-v li::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px; background: rgba(255,255,255,0.28); }
.proc-v li:last-child { padding-bottom: 0; }
.proc-v li:last-child::before { display: none; }
.proc-v .n {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: #FFFFFF; color: var(--panel-deep);
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.proc-v h3 { display: inline; font-size: 1.05rem; color: #FFFFFF; margin: 0; }
.proc-v p { display: inline; color: #C7DDF5; font-size: 0.95rem; margin: 0; line-height: 1.6; }

/* PROC-V COMPACT 2x2 - half the height on desktop */
.proc-v { padding: clamp(1.3rem, 2.6vw, 1.9rem) 0; }
.proc-v__wrap { max-width: 860px; }
.proc-v h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin: 0 0 var(--s-4); }
.proc-v ol { margin-bottom: var(--s-4); }
.proc-v li { padding: 0 0 12px 46px; }
.proc-v li::before { display: none; }
.proc-v .n { width: 30px; height: 30px; font-size: 0.9rem; }
.proc-v h3 { font-size: 0.98rem; }
.proc-v p { font-size: 0.9rem; }
@media (min-width: 700px) {
  .proc-v ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
  .proc-v li { padding-bottom: 0; }
}

/* SECTION RHYTHM
   Where two sections share a background they read as one block, so the
   boundary between them collapses evenly on both sides rather than
   stacking two full paddings or lopsiding one. */
.section--alt + .section--alt,
.section + .section:not(.section--alt):not(.section--panel):not(.section--dark) {
  padding-top: 0;
}
.area-more { margin-top: var(--s-4); }

/* PROC BAND - the whole process as one banner */
.proc-band { background: linear-gradient(165deg, #0C3B6E 0%, #082B50 100%); padding: 16px 0; }
.proc-band__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 26px; text-align: center; }
.proc-band h2 { color: #FFFFFF; font-size: 1.15rem; margin: 0; white-space: nowrap; }
.proc-band__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.proc-band__steps li { display: inline-flex; align-items: center; gap: 7px; color: #C7DDF5; font-family: var(--font-head); font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.proc-band__steps .n { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; color: var(--panel-deep); font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.proc-band__cta { display: inline-flex; align-items: center; gap: 7px; background: #FFFFFF; color: var(--panel-deep); text-decoration: none; font-family: var(--font-head); font-weight: 800; font-size: 0.82rem; padding: 8px 16px; border-radius: var(--r-full); white-space: nowrap; transition: background .15s; }
.proc-band__cta:hover { background: #DCEBFB; }

/* WX COMPACT - half-height weather cards */
.wx-grid { gap: 14px; }
.wx-card { padding: 16px 18px; }
.wx-card .ic, .wx-card__icon { width: 34px; height: 34px; border-radius: 9px; }
.wx-card .ic svg, .wx-card__icon svg { width: 18px; height: 18px; }
.wx-card h3 { font-size: 0.98rem; margin: 10px 0 4px; }
.wx-card p { font-size: 0.925rem; line-height: 1.55; margin: 0; }

/* WX PRETTY + SVC OUTLINE */
/* weather cards: match the polished card language from the top of the page */
.wx-card {
  border: 1px solid var(--border); border-top: 3px solid var(--panel);
  border-radius: var(--r-lg); background: var(--white);
  box-shadow: 0 1px 3px rgba(10,12,14,0.06);
  transition: box-shadow .18s ease, transform .18s ease;
}
.wx-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.wx-card h3 { color: var(--panel-deep); }
.wx-card p { color: var(--text-muted); }

/* service cards on the navy band: minimal white outline for contrast */
.section--panel .svc2 {
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--r-lg); overflow: hidden;
}

/* WX POP - gradient accents, bold hooks, confident cards */
.wx-card { position: relative; border-top: 0; overflow: hidden; }
.wx-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--panel) 0%, #1273D4 60%, #7FB4E8 100%);
}
.wx-card > span:first-of-type, .wx-card .wx-ic {
  background: linear-gradient(150deg, var(--panel) 0%, var(--panel-deep) 100%) !important;
  color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(14,85,158,0.32);
}
.wx-card svg { color: #FFFFFF; stroke: #FFFFFF; }
.wx-card h3 { font-size: 1.02rem; }
.wx-card p strong { color: var(--panel-deep); font-family: var(--font-head); }
.wx-card:hover { border-color: var(--panel); }

/* H2 UNIFIED - one size, contrast color, premium font on every section heading */
h2 {
  font-family: var(--font-head);           /* Manrope 800 - modern, warm, premium */
  font-weight: 800; letter-spacing: -0.015em;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  color: var(--panel-deep);                /* blue on light backgrounds, never black */
}
.section--panel h2, .section--dark h2, .proc-v h2, .storm-band h2 { color: #FFFFFF; }
.ins-panel h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }   /* re-unified with the rest */
.proc-band h2 { font-size: 1.15rem; color: #FFFFFF; }         /* banner label stays banner-sized */
.mobile-nav__panel h2 { font-size: 0.95rem; color: var(--text-muted); letter-spacing: 0.06em; }
.site-footer .footer__grid--3 h2, .site-footer h3 { color: #FFFFFF; }

/* CARD CAPTION BLUE */
.ins-card figcaption { color: var(--panel); }

/* WX READABLE - darker, clearer body text */
.wx-card p { color: #39434E; font-size: 0.95rem; line-height: 1.55; }

/* BAND + WX POLISH - professional placement, desktop + mobile */
.storm-strip__inner { max-width: 860px; margin: 0 auto; gap: 10px 26px; }
.proc-band__inner { justify-content: space-between; text-align: left; }
@media (max-width: 900px) {
  .proc-band__inner { justify-content: center; text-align: center; }
  .storm-strip__inner { gap: 6px 16px; }
}
/* weather cards: icon and title share one row - tighter, composed */
.wx-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.wx-card .wx-card__icon { grid-column: 1; grid-row: 1; width: 40px; height: 40px; }
.wx-card .wx-card__icon svg { width: 20px; height: 20px; }
.wx-card h3 { grid-column: 2; grid-row: 1; margin: 0; }
.wx-card p { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; }

/* RT2 per-row house photo + material circle */
.rt2__row .rt2__house { width: 84px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; box-shadow: 0 1px 4px rgba(10,12,14,0.18); }
.rt2__row img.rt2__mat { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgba(10,12,14,0.12); }
@media (max-width: 640px) {
  .rt2__row .rt2__house { width: 68px; height: 52px; }
  .rt2__row img.rt2__mat { width: 52px; height: 52px; }
}

/* SEXY BANDS - crisp dividers, ghost-pill CTAs, composed mobile stacking */
.storm-strip { padding: 12px 0; }
.storm-strip__cta { text-decoration: none; border: 1.5px solid rgba(169,207,244,0.65); padding: 7px 16px; border-radius: var(--r-full); }
.storm-strip__cta:hover { border-color: #FFFFFF; }
.offer-strip { border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; }
.storm-strip + .proc-band { border-top: 2px solid #FFFFFF; }
.storm-strip__msg, .offer-strip__who { text-wrap: balance; }
.offer-strip__who { white-space: normal; }
@media (max-width: 700px) {
  .storm-strip { padding: 16px 0; }
  .storm-strip__inner { flex-direction: column; gap: 11px; }
  .storm-strip__msg { font-size: 1.02rem; }
  .storm-strip__cta { font-size: 0.88rem; padding: 8px 22px; }
  .offer-strip { padding: 20px 0 22px; }
  .offer-strip__inner { flex-direction: column; gap: 9px; }
  .offer-strip__amt { font-size: 1.62rem; line-height: 1.15; white-space: normal; text-wrap: balance; }
  .offer-strip__who { font-size: 0.83rem; line-height: 1.55; max-width: 32ch; margin: 0 auto; }
  .offer-strip__cta { font-size: 0.86rem; padding: 10px 22px; margin-top: 3px; }
  .proc-band { padding: 24px 0 26px; }
  .proc-band__inner { flex-direction: column; gap: 14px; }
  .proc-band h2 { font-size: 1.28rem; white-space: normal; text-wrap: balance; }
  .proc-band__steps { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 11px 28px; justify-content: center; }
  .proc-band__steps li { justify-content: flex-start; font-size: 0.9rem; }
  .proc-band__cta { font-size: 0.88rem; padding: 10px 24px; margin-top: 3px; }
}

/* SVC2 REFINED - tighter cards, branded badges */
.svc2 { background: rgba(255,255,255,0.06); transition: transform .18s, border-color .18s, box-shadow .18s; }
.svc2:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.55); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.svc2__media img { aspect-ratio: 16/8; }
.svc2__media::after { height: 3px; background: linear-gradient(90deg, #6FA9E6, rgba(111,169,230,0.15)); }
.svc2__body { padding: calc(var(--s-5) + 12px) var(--s-5) var(--s-5); }
.svc2__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.svc2__body p { font-size: 0.91rem; line-height: 1.6; }
.svc2__icon {
  width: 58px; height: 58px; bottom: -29px; border-radius: 16px;
  background: linear-gradient(150deg, var(--panel) 0%, var(--panel-deep) 90%);
  border: 2px solid #FFFFFF;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
}
.svc2__icon svg { width: 26px; height: 26px; }
.svc2__more { margin-top: var(--s-4); border-top: 1px solid rgba(255,255,255,0.14); padding-top: 12px; }
.svc2__more:hover { color: #A9CFF4; }
@media (max-width: 640px) {
  .svc2__media img { aspect-ratio: 16/9; }
  .svc2__icon { width: 52px; height: 52px; bottom: -26px; border-radius: 14px; }
  .svc2__icon svg { width: 23px; height: 23px; }
  .svc2__body { padding: calc(var(--s-5) + 10px) var(--s-4) var(--s-4); }
}

/* SVC2 BTOL-STYLE - bold divider bar, solid circle badge, generous body */
.svc2__media img { aspect-ratio: 16/8.5; }
.svc2__media::after { height: 6px; background: var(--panel); }
.svc2__icon {
  width: 74px; height: 74px; bottom: -37px; right: var(--s-5);
  border-radius: 50%; background: var(--panel); border: none;
  box-shadow: 0 5px 16px rgba(0,0,0,0.35);
}
.svc2__icon svg { width: 34px; height: 34px; stroke-width: 1.6; }
.svc2__body { padding: calc(var(--s-6) + 18px) var(--s-6) var(--s-6); }
.svc2__body h3 { font-size: 1.35rem; margin-bottom: 10px; }
.svc2__body p { font-size: 0.95rem; line-height: 1.65; }
.svc2__more { border-top: none; letter-spacing: 0.1em; margin-top: var(--s-5);
  padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 640px) {
  .svc2__media img { aspect-ratio: 16/9; }
  .svc2__icon { width: 60px; height: 60px; bottom: -30px; border-radius: 50%; }
  .svc2__icon svg { width: 28px; height: 28px; }
  .svc2__body { padding: calc(var(--s-6) + 12px) var(--s-5) var(--s-5); }
  .svc2__body h3 { font-size: 1.2rem; }
}

/* SVC2 COLLAGE - 2 featured wide + 4 compact, like the reference */
.svc2-collage { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--s-5); }
.svc2-collage .svc2 { grid-column: span 3; }
.svc2-collage .svc2:nth-child(-n+2) { grid-column: span 6; }
.svc2-collage .svc2:nth-child(-n+2) .svc2__media img { aspect-ratio: 16/6.8; }
.svc2-collage .svc2:nth-child(n+3) .svc2__media img { aspect-ratio: 16/10; }
.svc2-collage .svc2:nth-child(n+3) .svc2__body h3 { font-size: 1.18rem; }
.svc2-collage .svc2:nth-child(n+3) .svc2__body p { font-size: 0.91rem; }
.svc2-collage .svc2:nth-child(n+3) .svc2__icon { width: 62px; height: 62px; bottom: -31px; }
.svc2-collage .svc2:nth-child(n+3) .svc2__icon svg { width: 29px; height: 29px; }
@media (max-width: 1100px) {
  .svc2-collage .svc2, .svc2-collage .svc2:nth-child(-n+2) { grid-column: span 6; }
  .svc2-collage .svc2 .svc2__media img { aspect-ratio: 16/9; }
}
@media (max-width: 700px) {
  .svc2-collage .svc2, .svc2-collage .svc2:nth-child(-n+2) { grid-column: 1 / -1; }
}

/* SVC2 SIZE CAP - compact collage */
.svc2-collage { max-width: 1140px; margin: 0 auto; gap: 18px; }
.svc2-collage .svc2 .svc2__body { padding: calc(var(--s-5) + 12px) var(--s-5) var(--s-5); }
.svc2-collage .svc2:nth-child(-n+2) .svc2__media img { aspect-ratio: 16/5.8; }
.svc2-collage .svc2:nth-child(-n+2) .svc2__body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.svc2-collage .svc2:nth-child(-n+2) .svc2__icon { width: 60px; height: 60px; bottom: -30px; }
.svc2-collage .svc2:nth-child(-n+2) .svc2__icon svg { width: 28px; height: 28px; }
.svc2-collage .svc2:nth-child(n+3) .svc2__media img { aspect-ratio: 16/8.2; }
.svc2-collage .svc2:nth-child(n+3) .svc2__body h3 { font-size: 1.02rem; margin-bottom: 6px; }
.svc2-collage .svc2:nth-child(n+3) .svc2__body p { font-size: 0.87rem; line-height: 1.55; }
.svc2-collage .svc2:nth-child(n+3) .svc2__icon { width: 50px; height: 50px; bottom: -25px; }
.svc2-collage .svc2:nth-child(n+3) .svc2__icon svg { width: 24px; height: 24px; }
.svc2-collage .svc2 .svc2__more { margin-top: var(--s-4); font-size: 0.7rem; }
@media (max-width: 1100px) {
  .svc2-collage .svc2 .svc2__media img { aspect-ratio: 16/8.5; }
}

/* INS PANEL 10X - framed card exhibit, refined kicker, balanced columns */
.ins-panel { padding: clamp(1.3rem, 2.6vw, 2.1rem); }
.ins-panel .split { align-items: stretch; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.ins-panel .split > div:last-child { display: flex; }
.ins-panel .ins-card {
  background: #F2F7FC; border: 1px solid #DCE9F5; border-radius: var(--r-lg);
  padding: clamp(1rem, 2vw, 1.7rem); display: flex; flex-direction: column;
  justify-content: center; flex: 1;
}
.ins-panel .ins-card img { max-width: 430px; border: 6px solid #FFFFFF; border-radius: 8px; box-shadow: 0 8px 22px rgba(11,67,128,0.18); }
.ins-panel .ins-card figcaption { color: var(--panel-deep); font-weight: 600; font-size: 0.82rem; line-height: 1.6; margin-top: 14px; }
.ins-eyebrow {
  color: #E04747 !important; background: rgba(255,90,90,0.07);
  border: 1px solid rgba(255,90,90,0.35); padding: 4px 13px;
  border-radius: var(--r-full); display: inline-block; font-size: 0.72rem;
}
.ins-panel h2 { letter-spacing: -0.01em; max-width: 24ch; }
.ins-panel .redcheck { margin: var(--s-4) 0; }
.ins-panel .redcheck li { margin-bottom: 0.6rem; font-size: 0.92rem; }
.ins-panel .split > div:first-child > p[style] { border-left: 3px solid #FF5A5A; padding-left: 12px; font-style: italic; }
.ins-panel .btn { margin-top: 6px; }
@media (max-width: 860px) {
  .ins-panel .ins-card { padding: 0.95rem; }
  .ins-panel .ins-card img { max-width: 100%; border-width: 4px; }
  .ins-panel h2 { max-width: none; }
}

/* INS CAPTION PLAQUE - compact label bound to the card */
.ins-panel .ins-card figcaption {
  background: #FFFFFF; border: 1px solid #DCE9F5; border-radius: 8px;
  padding: 8px 16px; margin: 14px auto 0; max-width: 430px; width: fit-content;
  color: var(--panel-deep); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.01em; line-height: 1.5; text-align: center;
  box-shadow: 0 2px 6px rgba(11,67,128,0.08);
}
@media (max-width: 860px) {
  .ins-panel .ins-card figcaption { font-size: 0.74rem; padding: 7px 12px; }
}

/* INS CAPTION - single italic line describing the photo.
   Overrides the global `figcaption { text-wrap: balance }` used for orphan
   control, which would otherwise split this short caption across two lines. */
.ins-panel .ins-card figcaption {
  font-style: italic; width: fit-content; max-width: 100%; text-wrap: wrap;
}

@media (max-width: 860px) {
  .cap-br { display: none; }
  .ins-panel .ins-card figcaption { font-size: 0.72rem; padding: 7px 10px; }
}

/* INTERACTIVE SERVICE-AREA MAP */
.area-map--svg { background: #F4F8FC; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 14px 4px; }
.area-map--svg svg { width: 100%; height: auto; display: block; }
.area-river { stroke: #BFDCF2; stroke-width: 7; stroke-linecap: round; opacity: 0.7; }
.area-hwy { stroke: #C9D4DE; stroke-width: 3; stroke-dasharray: 10 7; stroke-linecap: round; }
.area-zone { cursor: pointer; }
.area-zone path { fill: #E4EFFA; stroke: #B9D4EE; stroke-width: 1.5; transition: fill .15s, stroke .15s; }
.area-zone text { font-family: var(--font-head); font-weight: 800; font-size: 17px; fill: var(--panel-deep); text-anchor: middle; pointer-events: none; transition: fill .15s; }
.area-zone:hover path, .area-zone:focus path { fill: var(--panel); stroke: var(--panel-deep); stroke-width: 2.5; }
.area-zone:hover text, .area-zone:focus text { fill: #FFFFFF; }
.area-hq circle:first-child { fill: none; stroke: var(--panel); stroke-width: 2; }
.area-hq circle:last-child { fill: var(--panel); }
.area-map__hint { text-align: center; color: var(--text-muted); font-size: 0.78rem; margin: 10px 0 8px; }
@media (max-width: 640px) {
  .area-zone text { font-size: 24px; }
  .area-map--svg { padding: 8px 8px 2px; }
}

/* MAP v2 - tiled coverage cells */
.area-zone--a path { fill: #E6F0FA; }
.area-zone--b path { fill: #D9E8F7; }
.area-zone path { stroke: #FFFFFF; stroke-width: 2; }
.area-river, .area-hwy { pointer-events: none; }
.area-river { opacity: 0.45; }
.area-hwy { opacity: 0.6; }

/* MAP v3 - uniform seams */
.area-zone path { stroke: #F4F8FC; stroke-width: 5; stroke-linejoin: round; }

/* AREA PILLS - single grouped city row under the map */
.area-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--s-5); }
.area-pills a {
  border: 1.5px solid var(--panel); color: var(--panel); background: #FFFFFF;
  font-family: var(--font-head); font-weight: 800; font-size: 0.86rem;
  padding: 9px 22px; border-radius: var(--r-full); text-decoration: none;
  transition: background .15s, color .15s;
}
.area-pills a:hover { background: var(--panel); color: #FFFFFF; }
.area-pills a.area-pills__all { background: var(--panel); color: #FFFFFF; }
.area-pills a.area-pills__all:hover { background: var(--panel-deep); }
@media (max-width: 640px) {
  .area-pills { gap: 8px; }
  .area-pills a { font-size: 0.85rem; padding: 11px 18px; }
}

/* MOBILE: Justin video horizontal crop + rt2 lede on 2 lines */
@media (max-width: 700px) {
  .ws-feature__video video { width: 100%; aspect-ratio: 4/3; height: auto; object-fit: cover; object-position: 50% 30%; }
  .rt2-lede { font-size: 0.95rem; line-height: 1.55; max-width: 34ch; margin-inline: auto; }
}

/* MOBILE: Craig first, Justin second */
@media (max-width: 700px) {
  .team-grid { display: flex; flex-direction: column; }
  .team-grid .team-card:nth-child(1) { order: 2; }
  .team-grid .team-card:nth-child(2) { order: 1; }
  .team-grid .team-card:nth-child(3) { order: 3; }
}

/* HERO WATERMARK - transparent white logo, top right of blue panel */
.hero2__panel { position: relative; overflow: hidden; }
.hero2__wm { position: absolute; top: 20px; right: 20px; width: clamp(150px, 18vw, 220px); height: auto; opacity: 0.13; pointer-events: none; }
@media (max-width: 700px) {
  .hero2__wm { top: 52px; right: 10px; width: 170px; opacity: 0.14; }
}

/* VIDEO THUMB + LIGHTBOX */
.vid-thumb { position: relative; display: block; width: 240px; max-width: 100%; border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.vid-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: 50% 30%; display: block; }
.vid-thumb__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--panel); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: transform .15s; }
.vid-thumb__play svg { margin-left: 3px; }
.vid-thumb:hover .vid-thumb__play { transform: translate(-50%, -50%) scale(1.08); }
.vid-thumb .ws-feature__tag { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
.vid-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.vid-modal__backdrop { position: absolute; inset: 0; background: rgba(4,12,24,0.85); }
.vid-modal__box { position: relative; z-index: 1; }
.vid-modal__box video { display: block; height: min(82vh, 780px); max-width: 92vw; width: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); background: #000; }
.vid-modal__close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #FFFFFF; color: var(--panel-deep); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
@media (max-width: 700px) {
  .vid-thumb { width: 210px; margin: 0 auto; }
  .vid-modal__close { top: -12px; right: -6px; }
}

/* FIX: hidden must beat display:flex */
.vid-modal[hidden] { display: none; }

/* VIDEO SIZING - tighter */
.vid-modal__box video { height: min(68vh, 620px); }
.vid-thumb { width: 210px; }
@media (max-width: 700px) {
  .vid-thumb { width: 180px; }
  .vid-modal__box video { height: min(72vh, 620px); }
}

/* WATERMARK: smaller, higher, tucked upper-right */
.hero2__wm { width: clamp(115px, 14vw, 168px); top: 10px; right: 10px; }
@media (max-width: 700px) {
  .hero2__wm { width: 130px; top: 14px; right: 6px; }
}

/* WATERMARK: centered in the open upper-right area */
.hero2__wm { top: 34px; right: 48px; }
@media (max-width: 700px) {
  .hero2__wm { top: 44px; right: 26px; }
}

/* WATERMARK FINAL - mirrored margins, centered on headline block */
.hero2__wm { width: 160px; top: 96px; right: 56px; opacity: 0.16; }
@media (max-width: 700px) {
  .hero2__wm { width: 122px; top: 62px; right: 20px; }
}

/* WATERMARK SPEC - subtle decorative, top-right, behind all content */
.hero2__panel { overflow: hidden; }
.hero2__panel > *:not(.hero2__wm) { position: relative; z-index: 1; }
.hero2__wm { width: min(26%, 240px); top: 42px; right: 32px; opacity: 0.09; z-index: 0; }
@media (max-width: 700px) {
  .hero2__wm { width: 132px; top: 48px; right: -8px; opacity: 0.07; }
}

/* WATERMARK nudge: up + right */
.hero2__wm { top: 26px; right: 18px; }
@media (max-width: 700px) {
  .hero2__wm { top: 34px; right: -14px; }
}

/* WATERMARK: larger, growing down-left from fixed top-right anchor */
.hero2__wm { width: min(30%, 285px); }
@media (max-width: 700px) {
  .hero2__wm { width: 155px; }
}

/* WATERMARK: tiny nudge top-right */
.hero2__wm { top: 18px; right: 10px; }
@media (max-width: 700px) {
  .hero2__wm { top: 26px; right: -18px; }
}

/* WATERMARK: nudge down */
.hero2__wm { top: 24px; }
@media (max-width: 700px) {
  .hero2__wm { top: 32px; }
}

/* WATERMARK MOBILE: match desktop composition - fully inside, upper-right, clear of text */
@media (max-width: 700px) {
  .hero2__wm { width: 110px; top: 28px; right: 14px; opacity: 0.09; }
}

/* WATERMARK: desktop smudge down */
@media (min-width: 701px) {
  .hero2__wm { top: 30px; }
}

/* WATERMARK: mobile down slightly */
@media (max-width: 700px) {
  .hero2__wm { top: 38px; }
}

/* WATERMARK: desktop slightly smaller, same center; mobile down slightly */
@media (min-width: 701px) {
  .hero2__wm { width: min(27%, 258px); top: 41px; right: 23px; }
}
@media (max-width: 700px) {
  .hero2__wm { top: 46px; }
}

/* WATERMARK: desktop up ever so slightly */
@media (min-width: 701px) {
  .hero2__wm { top: 37px; }
}

/* WATERMARK mobile: top edge aligned with the h1 top line */
@media (max-width: 700px) {
  .hero2__wm { top: 74px; }
}

/* WATERMARK mobile: left ever so slightly */
@media (max-width: 700px) {
  .hero2__wm { right: 20px; }
}

/* WATERMARK desktop: up ever so slightly */
@media (min-width: 701px) {
  .hero2__wm { top: 33px; }
}

/* WATERMARK mobile: right ever so slightly */
@media (max-width: 700px) {
  .hero2__wm { right: 15px; }
}

/* MOBILE: subhead fits exactly 3 lines */
@media (max-width: 700px) {
  .hero2__subhead { font-size: 1.04rem; line-height: 1.6; text-wrap: balance; }
}

/* HERO H1 - two lines exactly */
.hero2__panel h1 { font-size: clamp(1.5rem, 4.4vw, 2.3rem); line-height: 1.18; }
@media (max-width: 700px) {
  .hero2__panel h1 { font-size: clamp(1.3rem, 5.9vw, 1.6rem); }
}

/* MOBILE: larger headline (still one line per row) + logo tucked top-right beside badge */
@media (max-width: 700px) {
  .hero2__panel h1 { font-size: clamp(1.4rem, 6.4vw, 1.72rem); letter-spacing: -0.01em; }
  .hero2__wm { width: 74px; top: 16px; right: 16px; opacity: 0.12; }
}

/* WATERMARK: +20% opacity */
@media (min-width: 701px) { .hero2__wm { opacity: 0.11; } }
@media (max-width: 700px) { .hero2__wm { opacity: 0.14; } }

/* WATERMARK: 20% MORE TRANSPARENT than original */
@media (min-width: 701px) { .hero2__wm { opacity: 0.072; } }
@media (max-width: 700px) { .hero2__wm { opacity: 0.096; } }

/* WATERMARK: MORE VISIBLE */
@media (min-width: 701px) { .hero2__wm { opacity: 0.13; } }
@media (max-width: 700px) { .hero2__wm { opacity: 0.16; } }

/* WATERMARK: strong visibility */
@media (min-width: 701px) { .hero2__wm { opacity: 0.22; } }
@media (max-width: 700px) { .hero2__wm { opacity: 0.25; } }

/* INS PANEL PREMIUM - big card, tight exhibit, scannable left column */
.ins-panel .split { align-items: center; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
.ins-panel .split > div:last-child { display: block; }
.ins-panel .ins-card { flex: none; padding: 14px; }
.ins-panel .ins-card img { width: 100%; max-width: none; border-width: 5px; box-shadow: 0 10px 26px rgba(11,67,128,0.2); }
.ins-panel .ins-card figcaption { max-width: none; margin-top: 12px; font-size: 0.8rem; }
.ins-panel h2 { margin-bottom: 14px; }
.ins-panel .split > div:first-child > p { line-height: 1.7; font-size: 1rem; }
.ins-panel .redcheck { margin: 18px 0; }
.ins-panel .redcheck li { margin-bottom: 0.7rem; font-size: 0.9rem; }
.ins-panel .split > div:first-child > p[style] { font-size: 0.82rem; margin: 18px 0 22px; }
@media (max-width: 860px) {
  .ins-panel .ins-card { padding: 10px; }
  .ins-panel .ins-card img { border-width: 4px; }
  .ins-panel .ins-card figcaption { font-size: 0.74rem; }
}

/* Stacked insurance section: single column, copy first, card sized so it
   supports the text instead of dominating the section */
@media (max-width: 860px) {
  .ins-panel .split { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: stretch; }
  .ins-panel .split > div:last-child { order: 0; }
  .ins-panel .ins-card { padding: 10px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .ins-panel h2 { margin-top: 4px; }
}

/* WATERMARK: solid white, both breakpoints */
.hero2__wm { opacity: 1 !important; }

/* HEADER CALL BUTTON: perfect circle, clean icon */
@media (max-width: 560px) {
  .btn--call {
    width: 46px; height: 46px; min-width: 46px; min-height: 46px;
    aspect-ratio: 1; border-radius: 50%; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(8,43,80,0.35); border: none; transform: none;
  }
  .btn--call:hover, .btn--call:active { transform: none; box-shadow: 0 2px 8px rgba(8,43,80,0.45); }
  .btn--call svg { width: 21px; height: 21px; stroke-width: 2; margin: 0; }
}

/* INS SECTION: mobile kicker on top, bold value bullets */
.ins-eyebrow--mob { display: none; }
.ins-panel .redcheck li { font-size: 1rem; font-weight: 600; }
@media (max-width: 860px) {
  .ins-eyebrow--mob { display: inline-block; margin-bottom: 12px; }
  .ins-panel .split .ins-eyebrow { display: none; }
  .ins-panel .redcheck li { font-size: 0.98rem; }
}

/* TEAM TAGLINE - headline treatment */
.team-tag { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.05rem); color: var(--panel-deep); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }

/* ws feature: other-projects button pushed right */
.ws-more-btn { margin-left: auto; }
@media (max-width: 700px) { .ws-more-btn { margin-left: 0; width: 100%; justify-content: center; } }

/* HEADER FIT ON SMALL PHONES
   At 375px the three action buttons needed 276px in a 267px slot, so the
   Menu button overflowed the container's right padding and the whole row
   sat crowded. Trimming the gaps and horizontal padding brings it inside. */
@media (max-width: 430px) {
  .site-header .header__actions { gap: 6px; }
  .btn-sms-mini { padding: 0 12px; gap: 6px; }
  .nav-toggle { padding: 0.7rem 0.7rem; gap: 0.4rem; }
}

/* SERVICE CARDS ON MOBILE
   The collage shrinks cards 3-6 so they sit as secondary tiles on desktop.
   Below 700px the grid is a single column, so that hierarchy no longer
   applies - every card gets the same, larger type. */
@media (max-width: 700px) {
  .svc2-collage .svc2 .svc2__body h3,
  .svc2-collage .svc2:nth-child(-n+2) .svc2__body h3,
  .svc2-collage .svc2:nth-child(n+3) .svc2__body h3 { font-size: 1.32rem; margin-bottom: 9px; }

  .svc2__body p,
  .svc2-collage .svc2 .svc2__body p,
  .svc2-collage .svc2:nth-child(n+3) .svc2__body p { font-size: 1.02rem; line-height: 1.65; }

  .svc2-collage .svc2 .svc2__more,
  .svc2__more { font-size: 0.8rem; }
}

/* MOBILE HEADER GROUPING
   `.nav-toggle { margin-left: auto }` pushes Menu to the right edge, which
   works on a wide header but on a phone dumps all the slack between the
   phone button and Menu (gaps of 8 / 6 / 21). Keeping the three action
   buttons as one evenly-spaced group puts the breathing room after the
   logo, where it reads as deliberate. */
@media (max-width: 430px) {
  .site-header .header__actions { justify-content: flex-end; gap: 9px; }
  .site-header .nav-toggle { margin-left: 0; }
}

/* FOOTER: four columns + a sitewide service-area link row.
   These carry the roof-type and city links that used to sit in duplicate
   homepage sections - now present on every page rather than just one. */
.footer__grid--4 {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
  gap: var(--s-6);
}
.site-footer .footer__grid--4 h3 { font-size: 1.2rem; margin-bottom: 0.9rem; letter-spacing: 0.01em; }
@media (max-width: 1000px) { .footer__grid--4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 620px)  { .footer__grid--4 { grid-template-columns: minmax(0,1fr); gap: var(--s-5); } }

.footer__areas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: var(--s-5) 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.footer__areas-label { color: #A9CFF4; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; }
.footer__areas a { color: #D7E2EE; font-size: 0.88rem; text-decoration: none; padding: 4px 0; }
.footer__areas a:hover { color: #FFFFFF; text-decoration: underline; }

/* ==========================================================================
   ICON BASELINE FIX
   Inline SVGs sit on the text baseline by default, which renders them a few
   pixels below true centre next to text. Ignored inside flex/grid containers
   (children are blockified there), corrective everywhere else. Element-level
   specificity, so it never overrides a component rule.
   ========================================================================== */
svg { vertical-align: middle; }

/* ============================================================
   HERO VIDEO - replaces the static truck photo.
   Matches the old .hero2__photo img rules so the slot keeps
   its shape, radius and shadow on every breakpoint.
   ============================================================ */
.hero2__photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1080 / 568;
  display: block;
  background: var(--panel-deep);
}
@media (max-width: 720px) {
  .hero2__photo video { max-height: 300px; }
}
/* Respect a reduced-motion preference: freeze on the poster frame. */
@media (prefers-reduced-motion: reduce) {
  .hero2__photo video { display: none; }
  .hero2__photo {
    background-image: url("img/hero-truck-roof.jpg");
    background-size: cover;
    background-position: center;
    aspect-ratio: 1080 / 568;
  }
}

/* ============================================================
   HERO H1 - larger and heavier on desktop and mobile.
   Supersedes the earlier "two lines exactly" clamps above.
   ============================================================ */
.hero2__panel h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
  font-weight: 800;
}
@media (max-width: 700px) {
  .hero2__panel h1 {
    font-size: clamp(1.7rem, 8.4vw, 2.5rem);
    line-height: 1.07;
    letter-spacing: -0.028em;
  }
}