/* Revive Your Roof — design system
   Palette is lifted straight from the logo vector, nothing eyeballed:
   #103e58 #0c2136 #0e3047 #859ca6 #838d95 #f9f9f4 #467233 #294a35 #a0b694
   Every colour below goes through a token. No inline hex anywhere in the HTML. */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --navy-900: #0c2136;
  --navy-800: #0e3047;
  --navy: #103e58;
  --navy-deep: #08192b; /* one step below navy-900; the film viewport/veil use it */
  --slate: #859ca6;
  --cream: #f9f9f4;
  --cream-2: #f1f1ea;
  --green: #467233;
  --green-dark: #365726;
  --green-deep: #294a35;
  --sage: #a0b694;
  --white: #fff;

  /* derived, contrast-checked against --cream (all >= 4.5:1) */
  --ink: var(--navy-900);
  --ink-muted: #4e5d68;
  --rule: #d9dcd2;
  --rule-dark: #1d3d52;

  --ff-head: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1180px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --pad-y: clamp(3.25rem, 7vw, 5.5rem);
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 1px 2px rgba(12, 33, 54, .06), 0 8px 28px rgba(12, 33, 54, .09);
  --shadow-lg: 0 2px 6px rgba(12, 33, 54, .08), 0 22px 60px rgba(12, 33, 54, .16);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.05rem, 5.2vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, 760px); margin-inline: auto; }
.section { padding-block: var(--pad-y); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--navy { background: var(--navy-900); color: var(--cream); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy a { color: var(--sage); }
.section--alt { background: var(--cream-2); }
.section--rule { border-top: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--ff-head);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 0 0 .85rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.section--navy .eyebrow { color: var(--sage); }
.section--navy .eyebrow::after { background: var(--rule-dark); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--ink-muted); }
.section--navy .lede { color: var(--slate); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem;
  line-height: 1.15; text-align: center; text-decoration: none;
  padding: 1rem 1.6rem; min-height: 54px; border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: linear-gradient(180deg, #4e7d39 0%, var(--green) 55%, #3f652c 100%); color: var(--white); box-shadow: 0 1px 2px rgba(12,33,54,.18), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--primary:hover { background: var(--green-dark); color: var(--white); box-shadow: 0 4px 14px rgba(41,74,53,.32); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--onnavy { background: transparent; color: var(--white); border-color: var(--slate); }
.btn--onnavy:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ---------- top bar + header ---------- */
.topbar {
  background: var(--navy-900); color: var(--slate);
  font-size: .84rem; padding: .5rem 0;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; }
.topbar a { color: var(--cream); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--sage); text-decoration: underline; }
.topbar__note { display: flex; align-items: center; gap: .45rem; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream); border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s ease;
}
.header.is-scrolled { box-shadow: 0 6px 24px rgba(12, 33, 54, .12); }
.header .wrap { display: flex; align-items: center; gap: 1.2rem; padding-block: .7rem; }
.header__logo { flex: 0 0 auto; }
.header__logo img { width: 152px; }
.header nav { margin-left: auto; }
.header nav ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1280px) { .header nav ul { gap: 1.05rem; } .header nav a { font-size: .9rem; } }
.header nav a {
  font-family: var(--ff-head); font-weight: 600; font-size: .95rem;
  color: var(--navy-900); text-decoration: none; white-space: nowrap;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.header nav a:hover, .header nav a[aria-current='page'] {
  color: var(--green-dark); border-bottom-color: var(--green);
}
.header__cta { flex: 0 0 auto; }
.header__cta .btn { padding: .8rem 1.2rem; min-height: 48px; font-size: .95rem; }
.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .header nav { display: none; }
  .header nav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow); padding: .5rem 1.2rem 1.1rem;
  }
  .header nav.is-open ul { flex-direction: column; gap: 0; }
  .header nav.is-open a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--rule); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 48px; height: 48px; border-radius: var(--r-sm);
    background: transparent; border: 2px solid var(--navy); color: var(--navy);
    cursor: pointer;
  }
  .header__cta { display: none; }
}

/* ---------- hero ---------- */
.hero { background: var(--navy-900); color: var(--cream); position: relative; overflow: clip; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  padding-block: clamp(2.25rem, 5vw, 4rem);
}
.hero h1 { color: var(--white); margin-bottom: .55rem; }
.hero__sub { color: var(--slate); font-size: clamp(1.02rem, 1.6vw, 1.16rem); max-width: 46ch; }
.hero__proof { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.5rem; padding: 0; list-style: none; }
.hero__proof li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 600; color: var(--cream);
  background: rgba(160, 182, 148, .13); border: 1px solid var(--rule-dark);
  border-radius: 999px; padding: .38rem .8rem;
}
.hero__media { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 420px; margin-left: auto; }
.hero__media video, .hero__media img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  max-height: 560px; /* keep the copy column from being dwarfed */
}
.hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(12, 33, 54, .88), rgba(12, 33, 54, 0));
  color: var(--cream); font-size: .82rem; padding: 2.2rem .95rem .8rem;
}

/* Cinematic hero at every width. The media anchors to .hero (position:relative),
   NOT the grid, so it spans edge to edge; the grid stays static so the copy
   clears the callbar. Phones keep the 9:16 cut of the film, desktop gets the
   16:9 one, chosen in the page script. */
.hero { min-height: calc(100svh - 76px - 150px); display: flex; flex-direction: column; }
.hero .wrap { flex: 1; display: flex; flex-direction: column; }
.hero__grid {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 2rem 1.8rem;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  max-width: none; margin: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; max-height: none;
}
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,25,43,.5) 0%, rgba(8,25,43,.28) 28%, rgba(8,25,43,.68) 58%, rgba(8,25,43,.94) 100%);
}
.hero__grid > div:first-child { position: relative; z-index: 2; }
.hero__sub { color: #e2eaf0; text-shadow: 0 1px 10px rgba(8,25,43,.6); }
.hero__caption { z-index: 3; }

@media (min-width: 861px) {
  /* Desktop: taller frame, copy held to a readable measure on the left, and a
     second scrim running left to right so the type never sits on open sky. */
  .hero { min-height: min(calc(100svh - 76px), 760px); }
  .hero__grid { justify-content: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
  .hero__grid > div:first-child { max-width: 46rem; }
  .hero__media::after {
    background:
      linear-gradient(100deg, rgba(8,25,43,.88) 0%, rgba(8,25,43,.62) 42%, rgba(8,25,43,.18) 78%),
      linear-gradient(180deg, rgba(8,25,43,.42) 0%, rgba(8,25,43,.10) 34%, rgba(8,25,43,.55) 100%);
  }
  .hero__caption { left: auto; right: 0; width: max-content; max-width: 46ch;
    background: linear-gradient(to left, rgba(8,25,43,.75), rgba(8,25,43,0));
    padding: .8rem 1.4rem .8rem 3.5rem; text-align: right; }
}

@media (max-width: 860px) {
  .header__logo img { width: 132px; }
}

/* Google rating, used in the hero and in the trust band */
.rating { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1.1rem; }
.rating__stars { display: inline-flex; gap: .12rem; color: #f0b429; }
.rating__stars svg { display: block; }
.rating__text { font-family: var(--ff-head); font-weight: 700; font-size: .95rem; color: var(--white); }
.rating__text b { font-size: 1.05rem; }
.rating__text span { color: var(--slate); font-weight: 600; }
.rating--ink .rating__text { color: var(--navy-900); }
.rating--ink .rating__text span { color: var(--ink-muted); }

/* ---------- lead form ---------- */
.leadform {
  position: relative;
  background: var(--cream); color: var(--ink);
  border-radius: var(--r); padding: clamp(1.1rem, 2.4vw, 1.5rem);
  box-shadow: var(--shadow-lg);
}
.leadform::before {
  content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 4px;
  border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--green), var(--sage));
}
.leadform h2, .leadform h3 { font-size: 1.22rem; margin-bottom: .3rem; color: var(--navy-900); }
.leadform__note { font-size: .85rem; color: var(--ink-muted); margin-bottom: .9rem; }
.field { margin-bottom: .7rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .28rem; color: var(--navy-800); }
.field .req { color: var(--green-dark); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .7rem .8rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid #b9c0b6; border-radius: var(--r-sm);
}
.field textarea { min-height: 86px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); outline: 3px solid rgba(70, 114, 51, .28); outline-offset: 0;
}
.field .hint { font-size: .78rem; color: var(--ink-muted); margin-top: .25rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
@media (max-width: 460px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.form-error { color: #8a2b16; font-size: .84rem; margin-top: .3rem; font-weight: 600; }
.leadform__fineprint { font-size: .78rem; color: var(--ink-muted); margin-top: .75rem; }
.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;
}

/* ---------- trust bar ---------- */
.trustbar { background: var(--cream-2); border-block: 1px solid var(--rule); padding: 1.1rem 0; }
.trustbar ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
  list-style: none; margin: 0; padding: 0;
}
.trustbar li {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--navy-800);
}
.trustbar svg { flex: 0 0 auto; color: var(--green); }

/* ---------- cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.card {
  background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem;
}
.section--alt .card { background: var(--cream); }
.card h3 { margin-bottom: .15rem; }
.card p { font-size: .96rem; color: var(--ink-muted); }
.card__link { margin-top: auto; padding-top: .7rem; font-weight: 600; font-family: var(--ff-head); font-size: .94rem; }
.card--link:hover { border-color: var(--green); }
.card figure { margin: -1.4rem -1.4rem .9rem; }
.card figure img { border-radius: var(--r) var(--r) 0 0; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

/* numbered process steps */
.steps { counter-reset: step; display: grid; gap: 1.1rem; padding: 0; list-style: none; margin: 0; }
.steps li {
  display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  counter-increment: step; content: '0' counter(step);
  font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem;
  color: var(--green); line-height: 1;
}
.section--navy .steps li { border-color: var(--rule-dark); }
.section--navy .steps li::before { color: var(--sage); }
.steps h3 { margin-bottom: .2rem; font-size: 1.12rem; }
.steps p { font-size: .96rem; color: var(--ink-muted); }
.section--navy .steps p { color: var(--slate); }
.steps__meta { font-size: .82rem; font-weight: 600; color: var(--green-dark); }
.section--navy .steps__meta { color: var(--sage); }

/* ---------- before / after ---------- */
.ba { display: grid; gap: 1rem; }
.ba__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .7rem; }
.ba figure { margin: 0; }
.ba img { border-radius: var(--r-sm); width: 100%; }
.ba figcaption { font-size: .88rem; color: var(--ink-muted); margin-top: .45rem; }
.ba__job { font-family: var(--ff-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-900); margin-bottom: .5rem; }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .8rem; }
.shots figure { margin: 0; }
.shots img { border-radius: var(--r-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.shots figcaption { font-size: .84rem; color: var(--ink-muted); margin-top: .4rem; }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
/* 30 full-length Google reviews read badly in 4 narrow columns; 330px floors it at 3. */
.review {
  background: var(--cream); border: 1px solid var(--rule); border-left: 4px solid var(--green);
  border-radius: var(--r-sm); padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem;
}
.section--navy .review { background: var(--navy-800); border-color: var(--rule-dark); border-left-color: var(--sage); }
.review p { font-size: .98rem; margin: 0; }
.section--navy .review p { color: var(--cream); }
.review__by { font-size: .85rem; color: var(--ink-muted); margin-top: auto; }
.section--navy .review__by { color: var(--slate); }
.review__head { display: flex; align-items: center; gap: .8rem; }
.review__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sage), #7d9a6e); color: var(--navy-900);
  font-family: var(--ff-head); font-weight: 800; font-size: .92rem; letter-spacing: .02em;
}
.section--navy .review__avatar { background: linear-gradient(135deg, var(--sage), #5d7c50); color: var(--navy-900); }
.review__meta { display: flex; flex-direction: column; gap: .15rem; }
.review__meta strong { color: var(--navy-900); font-size: .95rem; }
.section--navy .review__meta strong { color: var(--white); }
.stars { display: inline-flex; gap: 2.5px; color: var(--green); }
.stars svg { display: block; }
.section--navy .stars { color: var(--sage); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.2rem 1.15rem 0; position: relative;
  font-family: var(--ff-head); font-weight: 600; font-size: 1.06rem; color: var(--navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--green); line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding-bottom: 1.2rem; color: var(--ink-muted); }
.faq details > div p:not(:last-child) { margin-bottom: .8rem; }

/* ---------- prose (about, blog, city copy) ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 4px solid var(--green); color: var(--navy-800);
  font-size: 1.1rem;
}
.prose figure { margin: 1.8rem 0; }
.prose figure img { border-radius: var(--r-sm); }
.prose figcaption { font-size: .86rem; color: var(--ink-muted); margin-top: .5rem; }

/* ---------- misc blocks ---------- */
.split {
  /* 400px floor so this collapses to one column on tablets rather than
     squeezing a lead form into a 350px track */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center;
}
.split img { border-radius: var(--r); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .65rem; align-items: start; }
.checks li::before {
  content: '\2713'; color: var(--green); font-weight: 700; font-size: 1.05rem; line-height: 1.5;
}
.section--navy .checks li::before { color: var(--sage); }

.callout {
  background: var(--cream-2); border: 1px solid var(--rule); border-left: 4px solid var(--green);
  border-radius: var(--r-sm); padding: 1.1rem 1.3rem; margin: 1.6rem 0;
}
.callout p { font-size: .97rem; }
.callout strong { color: var(--navy-900); }

.pricepoint { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin: 1.6rem 0 0; }
.pricepoint div { background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1.1rem; }
.section--navy .pricepoint div { background: var(--navy-800); border-color: var(--rule-dark); }
.pricepoint dt { font-family: var(--ff-head); font-weight: 700; font-size: 1.25rem; color: var(--green-dark); margin-bottom: .2rem; }
.section--navy .pricepoint dt { color: var(--sage); }
.pricepoint dd { margin: 0; font-size: .92rem; color: var(--ink-muted); }
.section--navy .pricepoint dd { color: var(--slate); }

.arealist { columns: 3 190px; column-gap: 1.6rem; list-style: none; padding: 0; margin: 0; }
.arealist li { break-inside: avoid; padding: .3rem 0; font-size: .96rem; }

.crumbs { font-size: .84rem; color: var(--ink-muted); padding-block: .9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumbs li::after { content: '\203A'; margin-left: .35rem; color: var(--slate); }
.crumbs li:last-child::after { content: ''; }

.cta-band { background: var(--green-deep); color: var(--white); }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #d7e2cf; }
.cta-band .btn--primary { background: var(--white); color: var(--green-deep); }
.cta-band .btn--primary:hover { background: var(--cream); color: var(--green-deep); }
.cta-band .btn--onnavy { border-color: #9fb894; }

.postmeta { font-size: .86rem; color: var(--ink-muted); margin-bottom: 1.4rem; }
.postlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.postlist li { border-bottom: 1px solid var(--rule); padding-bottom: 1.1rem; }
.postlist h3 { margin-bottom: .3rem; }
.postlist a { text-decoration: none; }
.postlist a:hover h3 { color: var(--green-dark); }

/* ---------- footer ---------- */
.footer { background: var(--navy-900); color: var(--slate); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; font-size: .93rem; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 2rem; }
.footer h3 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); margin-bottom: .9rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer a { color: var(--cream); text-decoration: none; }
.footer a:hover { color: var(--sage); text-decoration: underline; }
.footer__logo img { width: 190px; margin-bottom: 1rem; }
.footer__bottom {
  margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .85rem;
}

/* ---------- sticky mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 860px) {
  .callbar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--navy-900); border-top: 1px solid var(--rule-dark);
    padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap: .5rem;
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 52px; border-radius: var(--r-sm); text-decoration: none;
    font-family: var(--ff-head); font-weight: 700; font-size: .98rem;
  }
  .callbar__call { background: var(--green); color: var(--white); }
  .callbar__quote { background: transparent; color: var(--white); border: 2px solid var(--slate); }
  body { padding-bottom: 76px; }
}

/* ---------- storm banner ---------- */
.stormbar {
  background: var(--green-deep); color: var(--white);
  font-size: .9rem; padding: .6rem 0; text-align: center;
}
.stormbar a { color: var(--white); font-weight: 700; }
.stormbar p { margin: 0; }

@media print { .header, .footer, .callbar, .topbar { display: none; } }

/* ---------- stat band ---------- */
.statband { background: var(--navy-900); color: var(--cream); padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; }
.statband dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1.2rem 2rem; margin: 0;
}
.statband dl > div { padding-left: 1.4rem; border-left: 1px solid var(--rule-dark); }
.statband dt {
  font-family: var(--ff-head); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; color: var(--sage);
  font-variant-numeric: tabular-nums;
}
.statband dd { margin: .45rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--slate); }

/* ---------- service card icons ---------- */
.svc-ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: .35rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2); border: 1px solid var(--rule); color: var(--green-dark);
  transition: background-color .15s ease, color .15s ease;
}
.card--link:hover .svc-ico { background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------- before / after slider ---------- */
.baslider {
  position: relative; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-lg); touch-action: pan-y;
}
.baslider figure { margin: 0; }
/* Natural photo ratio sets the frame: no forced crop, so labels baked into the
   job-app photos stay intact. Top layer shares the frame; same-size pairs align 1:1. */
.baslider__base img { width: 100%; height: auto; display: block; }
.baslider__top {
  position: absolute; inset: 0; margin: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.baslider__top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.baslider__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; margin-left: -1.5px; background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(12, 33, 54, .25); pointer-events: none;
}
.baslider__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.baslider:focus-within .baslider__grip { outline: 3px solid var(--green); outline-offset: 2px; }
.baslider__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.baslider__chip {
  position: absolute; top: .85rem; z-index: 2;
  font-family: var(--ff-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .34rem .75rem; border-radius: 999px;
  background: rgba(12, 33, 54, .74); color: var(--cream);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none;
}
.baslider__chip--after { left: .85rem; }
.baslider__chip--before { right: .85rem; }
.baslider__job {
  font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem;
  color: var(--navy-900); margin: .8rem 0 0;
}

/* ---------- film story (static telling of the scroll-film beats) ---------- */
.film-story__media { position: relative; }
.film-story__media img { border-radius: var(--r); box-shadow: var(--shadow-lg); width: 100%; }
.film-story__caption { font-size: .84rem; color: var(--ink-muted); margin-top: .55rem; }
/* Desktop visitors with the film active already lived this story; everyone else gets it here */
html.film-on .film-story { display: none; }

/* ---------- scroll reveals (JS-applied only; content never hidden without JS) ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ------------------------------------------------------------ scroll film
   Hidden by default; film.js un-hides it only on desktop with motion
   allowed and a decent connection. Everyone else gets the standard hero. */
#film { display: none; position: relative; background: var(--navy-deep); }
#film[data-active] { display: block; }
#film:not([hidden]) { display: block; }
.film__viewport { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.film__viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__veil {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: var(--navy-deep); transition: opacity .6s ease; color: var(--sage);
  font-family: var(--ff-head); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem;
}
.film__veil.is-done { opacity: 0; pointer-events: none; }
.film__beat {
  position: absolute; z-index: 3; max-width: 560px; visibility: hidden; opacity: 0;
  will-change: transform, opacity;
  padding: 1.1rem 1.5rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(12,33,54,.62), rgba(12,33,54,.18));
  backdrop-filter: blur(3px);
}
.film__beat h2, .film__beat p.h {
  font-family: var(--ff-head); font-weight: 800; color: var(--white);
  font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.04; margin: 0 0 .5rem;
  text-shadow: 0 2px 24px rgba(12,33,54,.55);
}
.film__beat .sub {
  color: #fff; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.45;
  text-shadow: 0 1px 3px rgba(12,33,54,.9), 0 2px 18px rgba(12,33,54,.7); margin: 0;
}
.film__beat--tl { top: 19vh; left: 6vw; }
.film__beat--tr { top: 19vh; right: 6vw; text-align: right; }
.film__beat--bl { bottom: 16vh; left: 6vw; }
.film__beat--br { bottom: 16vh; right: 6vw; text-align: right; }
.film__beat--c  { top: 46%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: min(92vw, 760px); }
.film__beat--c .btn-row { justify-content: center; margin-top: 1rem; }
.film__beat .btn { margin-top: 1.1rem; }
.film__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,33,54,.35) 0%, rgba(12,33,54,0) 30%, rgba(12,33,54,0) 62%, rgba(12,33,54,.45) 100%);
}
.film__tour {
  position: absolute; z-index: 6; bottom: 26px; right: 26px; display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(249,249,244,.12); color: var(--white); border: 1px solid rgba(249,249,244,.35);
  backdrop-filter: blur(6px); border-radius: 999px; padding: .6rem 1.1rem; cursor: pointer;
  font-family: var(--ff-head); font-size: .85rem; letter-spacing: .04em; transition: opacity .3s ease;
}
.film__tour:hover { background: rgba(249,249,244,.22); }
.film__rail {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(249,249,244,.15);
}

/* ---------- trust band (directly under the hero) ---------- */
.trustband { background: var(--cream-2); border-bottom: 1px solid var(--rule); padding: clamp(1.6rem, 3.4vw, 2.4rem) 0; }
.trustband__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem); align-items: start;
}
.trustband__lead { display: flex; flex-direction: column; gap: .5rem; }
.trustband__score {
  font-family: var(--ff-head); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  margin: 0; /* the global p margin is 1.1em, which at 3.2rem is a 3.5rem hole */
}
.trustband__score small { font-size: .38em; font-weight: 700; color: var(--ink-muted); letter-spacing: 0; }
.trustband__note { font-size: .9rem; color: var(--ink-muted); margin: 0; max-width: 34ch; }
.trustband__note a { color: var(--green-dark); }
.trustband dl { margin: 0; display: grid; gap: .9rem; }
.trustband dl > div { display: grid; grid-template-columns: 1.6rem minmax(0,1fr); gap: .7rem; align-items: start; }
.trustband dt { grid-column: 2; font-family: var(--ff-head); font-weight: 700; font-size: .97rem; color: var(--navy-900); }
.trustband dd { grid-column: 2; margin: 0; font-size: .88rem; color: var(--ink-muted); line-height: 1.45; }
.trustband dl svg { grid-row: span 2; color: var(--green); margin-top: .15rem; }
.trustbar__rating { gap: .55rem; }
.trustbar .stars--gold { color: #c8860b; gap: 1.5px; }
.trustbar .stars--gold svg { color: inherit; }
.trustbar__rating b { font-weight: 800; }

/* ---------- services dropdown in the header ----------
   No JS: hover for pointers, focus-within for keyboards, and on the mobile
   panel the submenu is simply always open and indented. */
.header nav li.has-sub { position: relative; padding-bottom: .4rem; margin-bottom: -.4rem; }
.header nav .subnav {
  display: none; position: absolute; top: 100%; left: -.9rem;
  min-width: 15.5rem; margin: 0; padding: .45rem;
  background: var(--cream); border: 1px solid var(--rule);
  border-radius: var(--r-sm); box-shadow: var(--shadow); z-index: 60;
}
.header nav li.has-sub:hover > .subnav,
.header nav li.has-sub:focus-within > .subnav { display: flex; flex-direction: column; gap: 0; }
.header nav .subnav a {
  display: block; padding: .55rem .7rem; white-space: nowrap;
  border-bottom: 0; border-radius: 6px; font-weight: 600;
}
.header nav .subnav a:hover,
.header nav .subnav a[aria-current='page'] { background: var(--cream-2); color: var(--green-dark); }

@media (max-width: 960px) {
  .header nav li.has-sub { padding-bottom: 0; margin-bottom: 0; }
  .header nav.is-open .subnav {
    display: flex; flex-direction: column; position: static;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 0 1rem; min-width: 0;
  }
  .header nav.is-open .subnav a {
    padding: .8rem 0; border-radius: 0;
    border-bottom: 1px solid var(--rule); font-weight: 500; font-size: .92rem;
  }
  .header nav.is-open .subnav a:hover { background: transparent; }
}
.hero__fin { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 1.1rem 0 0; font-size: .88rem; color: #cfdae2; }
.hero__fin svg { flex: 0 0 auto; color: var(--sage); }
.hero__fin a { color: var(--white); font-weight: 700; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Mobile fixes, 2026-08-12. Appended so every rule here is a deliberate
   override of something above, and the whole block can be lifted out again.
   --------------------------------------------------------------------------- */

/* 1. The open menu used to leave the page scrollable underneath it, with no
      scrim, so content showed through and the panel drifted as you swiped. */
@media (max-width: 960px) {
  html.nav-open, html.nav-open body { overflow: hidden; }
  .header nav.is-open {
    max-height: 84svh; overflow-y: auto; overscroll-behavior: contain;
  }
  html.nav-open body::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(11, 31, 43, .5); z-index: 40;
  }
}

/* 2. The fixed call bar sat on top of the hero's second button. Reserve its
      height at the foot of the page and inside the hero. */
@media (max-width: 860px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .hero { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* 3. The rating tail was set in slate on top of a photograph and vanished. */
.hero .rating__text span { color: rgba(244, 241, 232, .82); }

/* 4. The hero's tel: button duplicated the sticky call bar and collided with it,
      costing the top of the most valuable screen on the site. The bar carries
      the phone permanently, so the hero only needs the one primary action. */
@media (max-width: 860px) {
  .hero .btn-row a[href^="tel:"] { display: none; }
}

/* ---------------------------------------------------------------------------
   Second mobile pass, 2026-08-12.
   --------------------------------------------------------------------------- */

/* 5. Review cards are <blockquote>, and the browser's own default of
      "margin: 1em 40px" was eating 80px of a 390px screen, which is why the
      quotes wrapped every five or six words. */
.review { margin-left: 0; margin-right: 0; }

/* 6. Convention is BEFORE on the left. The top layer was clipped from the
      right, which put AFTER on the left and read backwards. */
.baslider__top { clip-path: inset(0 0 0 var(--pos, 50%)); }
.baslider__chip--before { left: .85rem; right: auto; }
.baslider__chip--after { right: .85rem; left: auto; }

@media (max-width: 860px) {
  /* 7. Long single-column link lists. Two columns halves the scroll without
        dropping a single internal link, so the city pages keep their equity. */
  .arealist { columns: 2 128px; column-gap: 1.1rem; }
  .footer__grid ul { grid-template-columns: 1fr 1fr; gap: .15rem .9rem; }

  /* 8. Tap targets were 16px to 23px against a 44px guideline. */
  .topbar a, .footer a, .arealist li a, .crumbs a { display: inline-block; padding-block: .42rem; }
  .arealist li { padding: 0; }

  /* 9. Small type on a phone. */
  .eyebrow { font-size: .82rem; }
  .topbar { font-size: .88rem; }
}

/* ---------- Round 5 (Paul 2026-08-20): centered hero copy ---------- */
.hero__grid > div:first-child { text-align: center; margin-inline: auto; }
.hero__grid .hero__sub { margin-inline: auto; }
.hero__grid .hero__proof { justify-content: center; }
.hero__grid .btn-row { justify-content: center; }
.hero__grid .hero__fin { margin-inline: auto; }
@media (min-width: 861px) {
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(8,25,43,.60) 0%, rgba(8,25,43,.74) 50%, rgba(8,25,43,.60) 100%),
      linear-gradient(180deg, rgba(8,25,43,.42) 0%, rgba(8,25,43,.10) 34%, rgba(8,25,43,.55) 100%);
  }
}
.prod-warranty { font-family: var(--ff-head); font-weight: 700; font-size: .92rem; color: var(--green-dark); margin: -.2rem 0 .6rem; }
@media (min-width: 861px) { #products .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Premium refinement, 2026-08-26 ---------- */
:root {
  --paper: #fbfaf6;
  --paper-warm: #f5f2e9;
  --hairline: rgba(12, 33, 54, .12);
  --shadow-premium: 0 18px 50px rgba(12, 33, 54, .12);
}
body { background: var(--paper); }
h1, h2, h3 { letter-spacing: -.032em; text-wrap: balance; }
p { text-wrap: pretty; }
.section { padding-block: clamp(4rem, 7vw, 6.4rem); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.4rem); }
.rv { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Quieter, better-spaced navigation. */
.header {
  background: rgba(249, 249, 244, .97);
  border-bottom-color: rgba(12, 33, 54, .10);
  backdrop-filter: saturate(120%) blur(14px);
}
.header .wrap { gap: 1rem; padding-block: .82rem; }
.header nav > ul { gap: .95rem; }
.header nav > ul > li > a { font-size: .9rem; letter-spacing: -.01em; }
.header__cta .btn { min-height: 46px; padding-inline: 1.05rem; border-radius: 8px; }
.header__logo img { display: block; }
.footer__logo img { display: block; height: auto; }

/* A two-line, evidence-first hero instead of a stack of badges. */
.hero__grid > div:first-child { max-width: 64rem !important; }
.hero h1 {
  max-width: 24ch; margin-inline: auto; margin-bottom: 1rem;
  font-size: clamp(2.7rem, 5.25vw, 4.65rem); line-height: .99;
  letter-spacing: -.052em;
}
.hero__sub { max-width: 62ch; line-height: 1.62; }
.hero .rating {
  margin-top: .35rem; padding: .48rem .75rem;
  border: 1px solid rgba(244, 241, 232, .22); border-radius: 8px;
  background: rgba(8, 25, 43, .34); backdrop-filter: blur(5px);
}
.hero__proof { gap: .35rem 1.1rem; }
.hero__proof li {
  padding: .15rem 0; border: 0; border-radius: 0; background: none;
  font-size: .88rem; letter-spacing: .005em;
}
.hero__proof li::before { content: '✓'; color: #b9d4aa; font-weight: 800; }
.hero .btn { min-height: 56px; border-radius: 8px; }
.hero__caption { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }

/* Top proof reads as one composed band rather than three separate widgets. */
.trustband { background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.trustband__grid { grid-template-columns: 1.05fr 1fr 1fr; gap: 0; }
.trustband__grid > * { padding-inline: clamp(1rem, 2.7vw, 2rem); }
.trustband__grid > *:first-child { padding-left: 0; }
.trustband__grid > *:last-child { padding-right: 0; }
.trustband__grid > * + * { border-left: 1px solid var(--hairline); }
.trustband__score { font-size: clamp(2.35rem, 4vw, 3rem); }
.trustband dl { gap: .75rem; }
.trustband dt { font-size: .94rem; }
.trustband dd { font-size: .84rem; }

/* The conversion surface now follows the trust band immediately. */
.section--lead { background: var(--paper-warm); border-bottom: 1px solid var(--hairline); }
.section--lead .split { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: start; }
.section--lead .lede { max-width: 55ch; }
.section--lead .checks { max-width: 62ch; }
.leadform {
  border: 1px solid rgba(12, 33, 54, .11); border-radius: 12px;
  box-shadow: var(--shadow-premium); padding: clamp(1.35rem, 2.6vw, 1.8rem);
}
.leadform::before { left: 1.8rem; right: 1.8rem; height: 3px; }
.leadform h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.field input, .field select, .field textarea { border-radius: 7px; }

/* Real-job process proof. */
.proof-story { background: #f0eee5; border-block: 1px solid var(--hairline); }
.proof-story__grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: clamp(2.5rem, 7vw, 6.5rem); align-items: center;
}
.proof-story__media { position: relative; min-height: 500px; padding: 0 3.8rem 3.8rem 0; }
.proof-story figure { margin: 0; }
.proof-story__primary img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 14px; box-shadow: var(--shadow-premium);
}
.proof-story__secondary {
  position: absolute; width: min(45%, 330px); right: 0; bottom: 0;
  background: var(--paper-warm); border: 8px solid var(--paper-warm); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(12, 33, 54, .18);
}
.proof-story__secondary img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.proof-story figcaption { margin-top: .5rem; font-size: .78rem; line-height: 1.4; color: var(--ink-muted); }
.proof-story__primary figcaption { max-width: 52%; }
.proof-story__copy .lede { max-width: 50ch; }
.proof-story__checks { margin-top: 1.5rem; }

/* Art-directed job photography on the results page. */
.real-work-gallery { background: var(--navy-900); color: var(--cream); }
.real-work-gallery h2 { color: #fff; }
.real-work-gallery .lede { color: #d8e2e8; max-width: 62ch; }
.real-work-gallery .eyebrow { color: var(--sage); }
.real-work-gallery .eyebrow::after { background: var(--rule-dark); }
.photo-mosaic {
  display: grid; grid-template-columns: 1.42fr .88fr; grid-template-rows: 1fr 1fr;
  gap: .9rem; margin-top: 2rem; min-height: 610px;
}
.photo-mosaic figure { position: relative; overflow: hidden; margin: 0; border-radius: 12px; }
.photo-mosaic figure:first-child { grid-row: 1 / span 2; }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.photo-mosaic figure:hover img { transform: scale(1.015); }
.photo-mosaic figcaption {
  position: absolute; inset: auto 0 0; padding: 3.2rem 1rem .9rem;
  background: linear-gradient(to top, rgba(8,25,43,.90), transparent);
  color: #fff; font-family: var(--ff-head); font-size: .84rem; font-weight: 650;
}

/* Product choices read as a considered system, not four generic cards. */
#products .card {
  border: 1px solid rgba(12, 33, 54, .12); border-top: 3px solid var(--green);
  border-radius: 10px; padding: clamp(1.45rem, 2.8vw, 2rem);
  box-shadow: 0 10px 30px rgba(12, 33, 54, .07);
}
#products .card h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
#products .card a[href$='.pdf'] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.prod-warranty { letter-spacing: .01em; }

/* Touch targets for controls and navigation, without inflating inline prose links. */
@media (max-width: 1080px) {
  .header nav.is-open { padding: .65rem 1.2rem 1.2rem; }
  .header nav.is-open > ul { gap: 0; }
  .header nav.is-open > ul > li > a { min-height: 48px; display: flex; align-items: center; padding-block: .75rem; }
  .header nav.is-open .subnav { display: none; }
  .footer a, .topbar a, .arealist a, .crumbs a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 860px) {
  .header .wrap { padding-block: .62rem; }
  .hero { min-height: 670px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .hero__grid { justify-content: flex-end; padding-block: 2.1rem 1.6rem; }
  .hero h1 { max-width: 18ch; font-size: clamp(2.45rem, 11vw, 3.55rem); line-height: 1.01; }
  .hero__sub { max-width: 36ch; font-size: 1rem; }
  .hero__media { background: url('/assets/img/roof-treatment-application.webp') 60% center / cover no-repeat; }
  .hero__media video { display: none; }
  .hero__media::after { background: linear-gradient(180deg, rgba(8,25,43,.35) 0%, rgba(8,25,43,.40) 25%, rgba(8,25,43,.80) 57%, rgba(8,25,43,.97) 100%); }
  .hero .rating {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    justify-content: stretch; text-align: left; max-width: 22rem; margin-inline: auto;
  }
  .hero .rating__text { line-height: 1.35; }
  .hero__proof { max-width: 34rem; margin-inline: auto; justify-content: center; }
  .hero__fin { justify-content: center; }
  .trustband__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .trustband__grid > * { padding: 0; }
  .trustband__grid > * + * { border-left: 0; border-top: 1px solid var(--hairline); padding-top: 1.2rem; }
  .section--lead .split { grid-template-columns: 1fr; }
  .section--lead .split > div:last-child { order: -1; }
  .proof-story__grid { grid-template-columns: 1fr; }
  .proof-story__media { min-height: 0; padding: 0 2rem 2.5rem 0; }
  .proof-story__secondary { width: 40%; border-width: 6px; }
  .photo-mosaic { min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: 390px 210px; }
  .photo-mosaic figure:first-child { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 520px) {
  .hero { min-height: 720px; }
  .hero h1 { font-size: clamp(2.3rem, 11.5vw, 3rem); }
  .hero .rating { border-radius: 7px; }
  .hero__proof { gap: .25rem .75rem; }
  .hero__proof li { font-size: .79rem; }
  .proof-story__media { padding: 0 1.4rem 2rem 0; }
  .proof-story__secondary { width: 43%; }
  .photo-mosaic { grid-template-rows: 310px 175px; gap: .65rem; }
  .photo-mosaic figcaption { font-size: .74rem; }
}