/* =============================================================================
   ExteriorMax — site styles
   -----------------------------------------------------------------------------
   Color system is locked to the official lockup:
     Navy field, gold action, max-blue links, warm paper.
   Layout follows Apple HIG: 8pt grid, 44px controls, one primary accent,
   spring motion, and a header that stays readable on phone / tablet / desktop.
   ============================================================================= */

:root {
  /* Brand */
  --navy: #0B1F3A;
  --gold: #E8C21A;
  --gold-ink: #1A1608;
  --max-blue: #1A4F9C;
  /* Home blob CTAs only — print swatches, not the lockup gold. */
  --yellow-012: #FFD621; /* PANTONE Yellow 012 C · rgb(255, 214, 33) */
  --blue-2728: #00529E;  /* PANTONE 2728 C · rgb(0, 82, 158) */
  /* Title dashes under gold type — print 2728 C, not the CTA hover swatch. */
  --blue-2728-print: #00529E; /* rgb(0, 82, 158) */

  /* Surfaces + type */
  --paper: #F6F4F0;
  --white: #FFFFFF;
  --ink: #122033;
  --muted: #5B6B7C;
  --line: #E4E0D8;
  --on-navy: #F6F4F0;
  --on-navy-muted: #C9D3DE;

  /* Photo grade helpers */
  --shadow-navy: #10243F;
  --window-warm: #F6E7A1;

  /* HIG spacing + chrome */
  --space: 8px;
  --radius: 16px;
  --header-h: 72px;
  --tap: 44px;
  --page: 1080px;
  --spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --shadow: 0 18px 40px rgba(18, 32, 51, 0.12);

  /* Type — Apple / SF stack. Title mark + navy/blue ink. Future pages inherit. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --mark-gold: linear-gradient(90deg, var(--gold) 0%, var(--gold) 58%, transparent 100%);
  --mark-blue: linear-gradient(90deg, var(--blue-2728-print) 0%, var(--blue-2728-print) 58%, transparent 100%);
}

/* -------------------------------------------------------------------------
   Reset — keep native form controls, kill only the noisy defaults
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sticky header only — chip bars are gone. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* A hair under 16px so the default view isn't blown up. */
  font-size: 15px;
}

body {
  margin: 0;
  font-family: var(--font-text);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
}

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

a {
  color: var(--max-blue);
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* -------------------------------------------------------------------------
   Type — extra-bold navy H1/H2, short title dash, gold kicker, blue links.
   h3 is weight only. h4 (footer) stays quiet.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 0 0 12px;
  color: var(--ink);
}

h1 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 700;
}

/*
  Short dash glued under the title box — 8pt HIG gap, not a stretched
  grid cell. Gold type on the heading itself (the whole word yellow)
  flips to print 2728 C. Mixed ink + gold / blue type keeps the gold mark.
*/
h1,
h2 {
  height: fit-content;
  align-self: start;
}

h1::after,
h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--mark-gold);
}

h1.accent-gold,
h2.accent-gold,
.hero h1.accent-gold {
  color: var(--gold);
}

h1.accent-gold::after,
h2.accent-gold::after {
  background: var(--mark-blue);
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

p { margin: 0 0 14px; }

.kicker {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* One accent word in a title — gold from the lockup, blue from Max. */
.accent-gold { color: var(--gold); }
.accent-blue { color: var(--max-blue); }

.muted { color: var(--muted); }

.wrap {
  width: min(var(--page), calc(100% - 40px));
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Buttons — 44px minimum, gold is the only primary
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  /* Spring on lift + fill so hover color doesn't snap. */
  transition:
    transform 0.45s var(--spring),
    background-color 0.45s var(--spring),
    color 0.45s var(--spring),
    border-color 0.45s var(--spring);
}

.btn-gold {
  background: var(--gold);
  color: var(--gold-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--on-navy);
  border: 1px solid rgba(246, 244, 240, 0.35);
}

/*
  Hover fill — ghost goes gold on navy and paper.
  Gold invert (navy + gold type) is scoped to white chrome / paper blob
  so a navy-hero gold pill doesn't vanish into the field.
*/
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
}

.header-actions .btn-gold {
  background: var(--yellow-012);
  color: var(--blue-2728);
}

.header-actions .btn-gold:hover,
.header-actions .btn-gold:focus-visible {
  background: var(--blue-2728);
  color: var(--yellow-012);
}

.btn-text {
  background: none;
  border: 0;
  color: var(--max-blue);
  font-weight: 600;
  min-height: 32px;
  padding: 0;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover,
  .card:hover {
    transform: translateY(-2px);
  }
}

/* -------------------------------------------------------------------------
   Header — white sticky bar, HIG-sized targets, mega menus.
   Nav type is 700 so the labels read at a glance. Layout is the
   original full-bleed frost. The host div is the sticky one so it
   stays with the viewport; sticking .site-header alone dies when
   #site-header is only as tall as the bar.
   ------------------------------------------------------------------------- */
#site-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--header-h);
  width: min(var(--page), calc(100% - 32px));
  margin-inline: auto;
}

/*
  Official horizontal lockup — Nobel Bold, native tracking, roof over max.
  Height only; width:auto so the 4-color PNG never gets squashed.
  40px sits in the 72px bar and stays above the 96px min width.
*/
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--tap);
}

.brand img {
  height: 40px;
  width: auto;
  display: block;
}

.nav {
  display: none;
  flex: 1;
  align-items: center;
  gap: 2px;
}

.nav-btn,
.nav-link {
  /*
    inline-block so text-decoration paints on the letters.
    inline-flex swallows the underline (flex item, new FC).
    line-height holds the 44px HIG hit.
  */
  display: inline-block;
  min-height: var(--tap);
  line-height: var(--tap);
  padding: 0 10px;
  border: 0;
  background: transparent;
  /* Option 10 — 2728 C type on the white bar. */
  color: var(--blue-2728);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.nav-btn:hover,
.nav-link:hover,
.nav-caret:hover {
  color: var(--blue-2728-print);
}

/*
  Yellow 012 C on the <a> itself — Deck / Projects were missing
  the rail when only .nav-txt was targeted. Glyph-width still,
  because the label is the only text in the box. HIG 8pt offset.
*/
html[data-here="roofing"] [data-nav="roofing"],
html[data-here="siding"] [data-nav="siding"],
html[data-here="gutters"] [data-nav="gutters"],
html[data-here="windows"] [data-nav="windows"],
html[data-here="doors"] [data-nav="doors"],
html[data-here="deck"] [data-nav="deck"],
html[data-here="projects"] [data-nav="projects"],
html[data-here="about"] [data-nav="about"],
.nav-btn.is-on,
.nav-item:hover .nav-btn,
.nav-item:focus-within .nav-btn,
.nav-link.is-on,
.nav-link:hover,
.nav-link:focus-visible,
.nav-btn.is-on .nav-txt,
.nav-link.is-on .nav-txt,
.nav-item:hover .nav-btn .nav-txt,
.nav-item:focus-within .nav-btn .nav-txt,
.nav-link:hover .nav-txt,
.nav-link:focus-visible .nav-txt {
  text-decoration: underline;
  text-decoration-color: var(--yellow-012);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Name goes to the page. Caret is a 44px hit, no chevron. */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-btn {
  padding-right: 4px;
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  margin-left: -4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
}

.mega {
  display: none;
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  min-width: 420px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

.mega.open,
.nav-item:hover .mega {
  display: grid;
}

.mega.one-col {
  min-width: 240px;
  grid-template-columns: 1fr;
}

/* About is last in the bar. Open left so the two-col list stays on screen. */
.nav-item:last-child .mega {
  left: auto;
  right: 0;
}

.mega p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.mega a {
  display: block;
  padding: 7px 0;
  /* Same 2728 / 012 mix as the bar — lists do not snap back to ink. */
  color: var(--blue-2728);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

/*
  Yellow 012 under the glyphs only — short label, short rail.
  Block stay for the hit; text-decoration does not follow the box.
*/
.mega a:hover .nav-txt,
.mega a:focus-visible .nav-txt {
  color: var(--blue-2728);
  text-decoration: underline;
  text-decoration-color: var(--yellow-012);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.header-actions .btn {
  white-space: nowrap;
  font-weight: 700;
}

.menu-toggle {
  margin-left: auto;
  min-width: var(--tap);
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-2728);
  font-weight: 700;
}

@media (min-width: 1100px) {
  .nav { display: flex; }
  .menu-toggle { display: none; }

  /*
    Hover opens the list. Hide the caret brick so the row is labels only.
    Phone keeps the 44px hit — HIG thumb target, no glyph.
  */
  .nav-caret { display: none; }

  .nav-btn { padding-right: 10px; }
}

/* Phone / tablet: stacked drawer, 44px rows */
.nav.is-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 8px 16px 16px;
  max-height: calc(100dvh - var(--header-h));
  overflow: auto;
}

.nav.is-open .nav-item {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.nav.is-open .nav-btn {
  flex: 1;
}

.nav.is-open .mega {
  position: static;
  display: none;
  min-width: 0;
  box-shadow: none;
  border: 0;
  padding: 0 0 8px 12px;
  width: 100%;
}

.nav.is-open .mega.open { display: grid; }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  display: grid;
  gap: 28px;
  padding: 48px 0 40px;
  /* Print 2728 C field. Footer / chips keep lockup navy. */
  background: var(--blue-2728-print);
  color: var(--on-navy);
}

.hero .wrap {
  display: grid;
  gap: 28px;
  align-items: center;
}

.hero h1 {
  color: var(--on-navy);
}

.hero p {
  color: var(--on-navy-muted);
  font-size: 1.12rem;
  max-width: 36rem;
}

.hero-actions,
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0;
  margin: 0 0 14px;
  list-style: none;
}

.trust li { color: var(--on-navy-muted); font-size: 0.92rem; }

/*
  Official job photos from exteriormax.com/our-work.
  Grade: cooler shadows, slight punch, navy veil so gold CTAs stay the accent.
  crop-lower hides the baked-in live-site wordmark on most shots.
*/
figure.media {
  margin: 0;
}

.media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--shadow-navy);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.08) brightness(0.96);
}

.media.crop-lower img {
  object-position: center 80%;
}

.media.crop-upper img {
  object-position: center 18%;
}

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 55, 100, 0.1) 0%, rgba(0, 55, 100, 0.32) 100%);
  pointer-events: none;
}

.hero-art {
  width: 100%;
  min-height: 240px;
  /* Wider than the job stills so cover-crop can hide the top wordmark. */
  aspect-ratio: 16 / 10;
}

.card .media {
  height: 168px;
  border-radius: 0;
}

.card .media.crop-lower img {
  object-position: center 82%;
}

.card .media.crop-upper img {
  object-position: center 16%;
}

.person .media {
  height: 216px;
  border-radius: 14px 14px 0 0;
  margin: -16px -16px 12px;
  background: #fff;
}

/* Illustrated live-site portraits — contain, never crop a face. */
.person .media::after {
  display: none;
}

.person .media img {
  filter: none;
  object-fit: contain;
  object-position: center;
}

.person strong {
  display: block;
}

@media (min-width: 860px) {
  .hero .wrap {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/*
  Roofing + siding heroes share the three-beat grid.
  Desktop: left PNG | copy | right PNG.
  Tablet: copy on top, photos beside each other.
  Phone: copy, then the two images stacked. 44px CTAs stay first.
*/
.hero-roofing,
.hero-siding {
  overflow: visible;
}

.hero-roofing .wrap,
.hero-siding .wrap {
  align-items: center;
}

/* Copy first in the DOM; areas only apply from the tablet break up. */
.hero-roofing-copy,
.hero-siding-copy {
  min-width: 0;
}

.hero-roofing-copy p,
.hero-siding-copy p {
  max-width: 28rem;
}

/*
  Gold curved frame — padding is the stroke so the radius stays honest.
  No .media veil: this still is already graded.
*/
.hero-roofing-shot {
  margin: 0;
  padding: 3px;
  border-radius: 28px;
  background: var(--gold);
  min-width: 0;
  transition: transform 0.45s var(--spring);
}

.hero-roofing-shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 25px;
}

/* PNG cutout — contain, no crop, navy shows through the alpha. */
.hero-roofing-exploded,
.hero-siding-layers,
.hero-siding-exploded,
.hero-gutter-exploded,
.hero-windows-exploded,
.hero-doors-exploded,
.hero-deck-exploded {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 819 / 545;
  object-fit: contain;
  filter: none;
}

/* About hero — 1024×576 pair, keep both houses. */
.hero-about-exploded {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  object-fit: contain;
  filter: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-roofing-shot:hover {
    transform: translateY(-2px);
  }
}

@media (min-width: 600px) and (max-width: 859px) {
  .hero-roofing .wrap,
  .hero-siding .wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "copy copy"
      "shot exploded";
    gap: 24px;
  }

  .hero-roofing-copy,
  .hero-siding-copy { grid-area: copy; }
  .hero-roofing-shot,
  .hero-siding-layers { grid-area: shot; }
  .hero-roofing-exploded,
  .hero-siding-exploded { grid-area: exploded; }
}

@media (min-width: 860px) {
  .hero.hero-roofing .wrap,
  .hero.hero-siding .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-areas: "shot copy exploded";
    gap: 24px 20px;
    align-items: center;
  }

  .hero-roofing-copy,
  .hero-siding-copy {
    grid-area: copy;
    text-align: center;
  }

  .hero-roofing-copy h1::after,
  .hero-siding-copy h1::after {
    margin-inline: auto;
  }

  .hero-roofing-copy p,
  .hero-siding-copy p {
    margin-inline: auto;
  }

  .hero-roofing-copy .hero-actions,
  .hero-siding-copy .hero-actions {
    justify-content: center;
  }

  .hero-roofing-shot,
  .hero-siding-layers { grid-area: shot; }
  .hero-roofing-exploded,
  .hero-siding-exploded { grid-area: exploded; }
}

/*
  Home hero — paper blob sized to the copy, gold wiggly stroke.
  Type sits on paper (HIG contrast). House reads around the sticker.
  Height follows the text; no forced 560px disc.
*/
.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  gap: 0;
}

.hero-home-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 32%;
  filter: brightness(1.18) contrast(1.05) saturate(0.95);
}

/* Background plate — never a player. No hit target, no chrome. */
.hero-home-video {
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-home-still { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home-video { display: none; }
  .hero-home-still { visibility: visible; }
}

.hero-home .wrap {
  position: relative;
  z-index: 1;
  padding: 48px 0;
  align-items: center;
  grid-template-columns: 1fr;
}

/*
  Copy is the sizing box. Isolation keeps the blob behind type
  without punching through the aerial.
*/
.hero-home-copy {
  position: relative;
  isolation: isolate;
  /* Wider so the tracked kickers stay on two clean lines, not orphans. */
  max-width: 32rem;
  /* Bottom pad keeps the three stacked CTAs inside the inward waves. */
  padding: 40px 56px 40px 32px;
}

/*
  Home actions — kicker, then pill. 8pt inside a pair, 16pt between.
  display:contents lets the three pills share one max-content column
  (widest label) while kickers still span the copy. HIG stacked actions.
*/
.hero-home .hero-actions {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  row-gap: 8px;
  column-gap: 0;
  margin-bottom: 0;
}

.hero-home .hero-cta {
  display: contents;
}

.hero-home .hero-cta-line {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.hero-home .hero-actions .btn {
  grid-column: 1;
  width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
  /* One line, padding that matches a 44pt HIG capsule. */
  white-space: nowrap;
  text-align: center;
  padding: 0 22px;
  /* 8pt row-gap + 8pt here = 16pt before the next kicker. */
  margin-bottom: 8px;
  /* Rest: Yellow 012 C fill, black type. Hover swaps to 2728 C. */
  background: var(--yellow-012);
  color: var(--ink);
  border: 1px solid var(--yellow-012);
}

.hero-home .hero-cta:last-child .btn {
  margin-bottom: 0;
}

.hero-home .hero-actions .btn:hover,
.hero-home .hero-actions .btn:focus-visible {
  background: var(--blue-2728);
  border-color: var(--blue-2728);
  /* White on 2728 C — black fails contrast on that blue. */
  color: var(--white);
}

.hero-home-blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  /* Div, not the SVG — so inset actually fills the copy box. */
  inset: -8px -28px -4px -12px;
}

.hero-home-blob svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-home-blob path {
  fill: var(--paper);
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* In-flow copy sits above the SVG (same stacking context). */
.hero-home-copy > *:not(.hero-home-blob) {
  position: relative;
  z-index: 1;
}

/*
  Instant Quote in the blob. The copy box grows; the SVG wiggle
  stretches with it (preserveAspectRatio none). No page dimmer.
  Apple HIG: one surface, 44px close, spring size.
*/
.hero-home-copy {
  transition:
    max-width 0.48s var(--spring),
    padding 0.48s var(--spring);
}

/*
  Quoting: the aerial's CSS filter + isolate + overflow:hidden on
  .hero-home flatten FRHR's nested map into a navy square. Phone
  already lifted this. Desktop has to as well. Blob is only the
  gold frame; the FRHR card sits on top (Apple HIG: one surface).
*/
.hero-home:has(.is-quoting) {
  isolation: auto;
  overflow: visible;
}

.hero-home:has(.is-quoting) .hero-home-bg {
  filter: none;
}

.hero-home-copy.is-quoting {
  display: flex;
  flex-direction: column;
  isolation: auto;
  /* Room for the 460 FRHR card plus the inward gold waves. */
  max-width: 42rem;
  width: min(42rem, 100%);
  /* Top-right wave eats the × unless this pad is fat. */
  padding: 56px 88px 56px 48px;
  overflow: visible;
}

/* Frame only — fill + Yellow 012 stroke sit behind the quote. */
.hero-home-copy.is-quoting .hero-home-blob {
  z-index: 0;
  inset: -24px -56px -20px -28px;
}

/* FRHR chrome + iframe above the wiggle. Never under the sticker. */
.hero-home-copy.is-quoting .hero-home-quote {
  position: relative;
  z-index: 2;
  isolation: auto;
}

/* White fill + Yellow 012 C stroke. Glow is an SVG filter, not CSS. */
.hero-home-copy.is-quoting .hero-home-blob path {
  fill: var(--white);
  stroke: var(--yellow-012);
  filter: url(#hero-blob-glow);
}

/* Grid on .hero-actions beats [hidden]. The class is the real hide. */
.hero-home-copy.is-quoting h1,
.hero-home-copy.is-quoting .hero-actions {
  display: none;
}

.hero-home-quote {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hero-home-quote[hidden] {
  display: none;
}

/* Desktop uses the hero sticker. Phone draws its own outline. */
.hero-home-quote__outline {
  display: none;
}

/* Block wrapper so the top fade can sit on the iframe. No overflow /
   isolate / filter here — those flatten FRHR's map. */
.hero-home-quote__slide {
  position: relative;
  display: block;
}

.hero-home-quote__slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 36px;
  pointer-events: none;
  /* Soften FRHR's card lip + shadow into the white paper. */
  background: linear-gradient(var(--white) 0%, rgba(255, 255, 255, 0) 100%);
}

.hero-home-quote__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  /* Keep the 44px × inside the paper, off the gold stroke. */
  margin: 0 20px 12px 0;
  padding: 4px 8px 0 2px;
}

.hero-home-quote__title {
  display: inline-block;
  margin: 0;
  font-size: 2.125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  /* Free / Quote = 2728 C. Roof = Yellow 012. Site gold dash stays. */
  color: var(--blue-2728);
  /* Programmatic focus for the sheet — no browser focus box. */
  outline: none;
  box-shadow: none;
}

.hero-home-quote__roof {
  color: var(--yellow-012);
}

.hero-home-quote__grab {
  display: none;
}

.hero-home-quote__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  /* Flat rest. The old ring + focus made it look already pressed. */
  background: var(--yellow-012);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-home-quote__close:hover,
.hero-home-quote__close:active {
  background: var(--ink);
  color: var(--yellow-012);
}

.hero-home-quote__frame {
  display: block;
  width: 460px;
  max-width: 100%;
  /* Explicit box — FRHR's map reads iframe innerWidth/innerHeight. */
  height: 840px;
  margin: 0 auto;
  border: 0;
  background: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .hero-home-copy {
    transition: none;
  }
}

.hero-home h1 {
  color: var(--ink);
}

.hero-home p {
  color: var(--ink);
  font-weight: 500;
  text-shadow: none;
}

.hero-home .btn-ghost {
  backdrop-filter: none;
}

@media (min-width: 860px) {
  .hero.hero-home .wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .hero-home-copy {
    max-width: 28rem;
    padding: 32px 48px 32px 24px;
  }

  .hero-home-copy.is-quoting {
    max-width: 40rem;
    padding: 52px 80px 48px 40px;
  }
}

@media (max-width: 700px) {
  .hero-home .wrap {
    padding: 24px 0 32px;
  }

  /* Dim the site. The blob is the overlay, not a tall in-flow banner. */
  body.hero-quote-open {
    overflow: hidden;
  }

  body.hero-quote-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 75;
    /* Light veil only — the house should still read. */
    background: rgba(0, 55, 100, 0.18);
  }

  .hero-home-bg {
    object-position: 82% 38%;
  }

  /* Same blob on phone — hug the stacked copy, don't swap to a slab. */
  .hero-home-copy {
    max-width: none;
    padding: 28px 36px 28px 20px;
  }

  /* Still hug the copy on phone — don't stretch into a banner. */
  .hero-home .hero-actions .btn {
    white-space: nowrap;
    text-align: center;
    padding: 10px 18px;
  }

  .hero-home-blob {
    top: -4px;
    right: -10px;
    bottom: -4px;
    left: -8px;
  }

  /*
    The wrap's z-index:1 and hero isolate trap position:fixed.
    Drop both so the blob stacks above body::before (z 75).
    Do not raise .hero-home itself — that would lift the aerial too.
  */
  .hero-home:has(.is-quoting) {
    isolation: auto;
    overflow: visible;
  }

  .hero-home:has(.is-quoting) .wrap {
    z-index: auto;
  }

  /*
    Phone: keep the original hero sticker. The quote is a
    separate outlined blob floating over that view.
  */
  .hero-home-copy.is-quoting {
    display: block;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    padding: 28px 36px 28px 20px;
    overflow: visible;
  }

  .hero-home-copy.is-quoting h1 {
    display: block;
  }

  .hero-home-copy.is-quoting .hero-actions {
    display: grid;
  }

  .hero-home-copy.is-quoting .hero-home-blob {
    top: -4px;
    right: -10px;
    bottom: -4px;
    left: -8px;
  }

  /*
    Beats .hero-home-copy > * { position: relative } so this
    outlined blob leaves the hero and floats over it.
  */
  /*
    Phone quote is a full-screen sheet. Gold wiggle is the frame.
    Drag the bar to dismiss — Apple HIG sheet, 44px close still wins.
  */
  .hero-home-copy.is-quoting > .hero-home-quote,
  body.hero-quote-open .hero-home-quote {
    position: fixed;
    z-index: 80;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    box-sizing: border-box;
    background: transparent;
  }

  .hero-home-quote__outline {
    display: block;
    position: absolute;
    /* Stroke sits outside the form view, not over the fields. */
    inset: -10px -14px -10px -10px;
    z-index: 0;
    pointer-events: none;
  }

  .hero-home-quote__outline svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hero-home-quote__outline path {
    fill: var(--white);
    stroke: var(--yellow-012);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .hero-home-copy.is-quoting > .hero-home-quote,
  body.hero-quote-open .hero-home-quote {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .hero-home-quote[hidden] {
    display: none;
  }

  .hero-home-quote__bar,
  .hero-home-quote__slide {
    position: relative;
    z-index: 1;
  }

  .hero-home-quote__bar {
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 4px 8px 0;
    padding: 4px 4px 0 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }

  .hero-home-quote.is-dragging .hero-home-quote__bar {
    cursor: grabbing;
  }

  .hero-home-quote__grab {
    display: block;
    flex-basis: 100%;
    width: 36px;
    height: 5px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: var(--ink);
    opacity: 0.22;
  }

  .hero-home-quote__title {
    font-size: 2.5rem;
  }

  /*
    Form stays in the iframe. A scrolling ancestor here flattens
    FRHR's map the same way isolate + overflow did on desktop.
  */
  .hero-home-quote__slide {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .hero-home-quote__slide::-webkit-scrollbar {
    display: none;
  }

  .hero-home-quote__frame {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 640px;
  }

  .hero-home h1 { font-size: 1.45rem; margin-bottom: 8px; }
  .hero-home p { font-size: 0.95rem; max-width: none; }
}

/* -------------------------------------------------------------------------
   Sections, cards, chips
   ------------------------------------------------------------------------- */
.section { padding: 48px 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  /* Top-align so the gold bar under the H2 does not pull the link down. */
  align-items: start;
  margin-bottom: 20px;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .cards.six { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.45s var(--spring);
}

.card .swatch {
  height: 110px;
}

.sw-roof { background: #2A4A70; }
.sw-siding { background: #3A5A4A; }
.sw-gutters { background: #4A6A88; }
.sw-windows { background: #5A4A3A; }
.sw-doors { background: #3A3A5A; }
.sw-deck { background: #6B4E2A; }

.card-body { padding: 16px; }
.card-body p { color: var(--muted); }

/*
  Service-page jump bar. Sticks under the header like a segmented control
  so Roofing / Siding / etc. stay one tap from every heading on the page.
*/
.page-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.page-nav .chip {
  transition: transform 0.45s var(--spring), background 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .page-nav .chip:hover {
    transform: translateY(-1px);
  }
}

/* Dropdown hashes land on the h2, not on a stray list item. */
.topic h2[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.topic-art {
  height: 260px;
  min-height: 220px;
}

/*
  Storm Damage — fade carousel inside the existing topic-art frame.
  No extra card. Dots sit under the rounded box.
*/
.topic-carousel {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (min-width: 800px) {
  /* Copy sits with the diagram, not pinned to the top of the 400px frame. */
  .split:has(.topic-carousel) {
    align-items: center;
  }

  .split:has(.topic-carousel) > :first-child {
    transform: translateY(-32px);
  }
}

.topic-carousel__stage {
  grid-column: 2;
  margin: 0;
  height: 400px;
  min-height: 400px;
  /* Paper shows through the PNG alpha — no white plate. */
  background: transparent;
}

.topic-carousel__stage::after {
  display: none;
}

.topic-carousel__viewport {
  position: absolute;
  inset: 0;
  outline: none;
}

.media .topic-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition:
    opacity 0.55s var(--spring),
    transform 0.55s var(--spring);
}

.media .topic-carousel__slide.is-on {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}

.media .topic-carousel__slide.is-out {
  opacity: 0;
  transform: translateX(-10px);
}

.topic-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  /* Rest: white disc, ink chevron. Hover stays Yellow 012 fill. */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.topic-carousel__arrow:hover,
.topic-carousel__arrow:focus-visible {
  background: var(--yellow-012);
  color: var(--ink);
}

.topic-carousel__dots {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  min-height: var(--tap);
}

.topic-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--blue-2728-print);
  cursor: pointer;
  transition:
    width 0.45s var(--spring),
    height 0.45s var(--spring),
    background-color 0.45s var(--spring);
}

.topic-carousel__dot.is-on {
  width: 11px;
  height: 11px;
  background: var(--yellow-012);
}

@media (prefers-reduced-motion: reduce) {
  .media .topic-carousel__slide,
  .topic-carousel__dot {
    transition: none;
  }
}

@media (max-width: 700px) {
  .topic-carousel .topic-art {
    width: 100%;
    height: auto;
    min-height: 280px;
    aspect-ratio: 1;
  }
}

/*
  Gold outline on a job still. Own box-shadow so overflow:hidden
  still clips the photo but the glow sits outside the radius.
  Soft bloom, not a neon ring — gold is the only accent.
*/
.media.glow-gold {
  box-shadow:
    0 0 0 2px var(--gold),
    0 8px 28px rgba(255, 214, 33, 0.45),
    0 0 36px rgba(255, 214, 33, 0.35);
}

/* Let the sunset read. The navy veil would kill the glow anyway. */
.media.glow-gold::after {
  display: none;
}

/*
  Layer diagrams — real PNG cutout. Paper shows through the
  alpha. No navy plate, no radius card, no photo veil.
*/
.media.diagram {
  background: transparent;
  overflow: visible;
  border-radius: 0;
  height: auto;
  min-height: 0;
  padding: 0;
}

.media.diagram img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
}

/*
  Topic cutouts (windows, doors) — cap to the topic-art band
  so the PNG sits with the copy, not at full column height.
*/
.topic-cutout {
  width: auto;
  max-width: 100%;
  max-height: 260px;
}

.media.diagram::after {
  display: none;
}

/*
  Insulated vinyl — PNG cutaway + live labels.
  Desktop: graphic | keys. Phone: stack. Type uses the gold kicker
  so it reads as chrome, not a screenshot of a screenshot.
*/
.siding-insulated-art {
  display: grid;
  gap: 16px;
  height: auto;
}

.siding-insulated-art img {
  /* Landscape cutaway — no height cap; the cell width sets the size. */
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.siding-insulated-keys {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.siding-insulated-keys li {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.siding-insulated-keys strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 800px) {
  /*
    This PNG is wide. Steal column from the copy so the house
    isn't a stamp, and park the keys on a fixed rail.
  */
  .split.split-diagram:has(.siding-insulated-art) {
    grid-template-columns: minmax(16rem, 0.55fr) minmax(0, 1.45fr);
  }

  .siding-insulated-art {
    grid-template-columns: minmax(0, 1fr) 11.5rem;
    align-items: center;
    /* 8pt HIG gap — keys sit on the cutaway, not across a dead column. */
    gap: 8px;
  }

  .siding-insulated-art img {
    margin-inline: 0;
    /* PNG alpha on the right; slide the panel onto the legend. */
    transform: translateX(48px);
  }
}

/*
  Fiber cement — wide labeled PNG. Contain, not cover, so the
  callouts don't get clipped. Height hugs the copy column.
*/
.siding-fiber-art img,
.siding-wood-art img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

/* Overview diagram gets the wider column so callouts stay readable. */
@media (min-width: 800px) {
  .split-diagram {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
  }
}

.chip {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}

.chip.is-on {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}

.split {
  display: grid;
  gap: 22px;
}

@media (min-width: 800px) {
  .split { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

.split ul { margin: 0; padding-left: 18px; line-height: 1.8; }

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.panel p { color: var(--muted); margin: 0; }

/* -------------------------------------------------------------------------
   About — lead composition
   Mission + vision + team on the left. Why ExteriorMax is the right rail
   and spans both rows so the card height matches the stack. HIG 8pt.
   ------------------------------------------------------------------------- */
.about-lead {
  display: grid;
  gap: 28px;
}

.about-lead > * {
  min-width: 0;
}

.about-lead__copy h2:nth-of-type(2) {
  margin-top: 28px;
}

.about-lead__copy p,
.about-lead__team p {
  margin: 0;
}

/* Pair fills the left column — don't leave a 280px cap of empty paper. */
.about-lead .team {
  grid-template-columns: 1fr 1fr;
}

.about-lead .person .media {
  height: 180px;
}

/*
  Financing then warranties — stacked page headings, not a side card.
  32px is four ticks on the 8pt grid so the second gold dash doesn't crowd.
*/
.about-terms > * + * {
  margin-top: 32px;
}

.about-terms p {
  max-width: 40rem;
}

@media (min-width: 800px) {
  .about-lead {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "copy why"
      "team why";
    column-gap: 28px;
    row-gap: 32px;
    align-items: stretch;
  }

  .about-lead__copy { grid-area: copy; }
  .about-lead__team { grid-area: team; }

  /* Right rail — same top as Mission, same bottom as the portraits. */
  .about-lead .why-panel {
    grid-area: why;
    align-self: stretch;
  }
}

/* -------------------------------------------------------------------------
   About — Why ExteriorMax
   2-col grouped tiles, HIG 8pt. Wide marks (Owens Corning, MAXTech)
   span the row so a 4.8:1 lockup stays readable. Images contain, never crop.
   ------------------------------------------------------------------------- */
.why-panel {
  padding: 20px 18px 12px;
}

.why-panel h3 {
  margin-bottom: 8px;
}

.why-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.why-proof li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 64px;
  padding: 14px 10px;
  border-radius: 12px;
  transition:
    transform 0.45s var(--spring),
    background-color 0.2s ease;
}

.why-proof li + li {
  border-top: 1px solid var(--line);
}

/* Licensed sits beside BBB — hairline between the pair. */
.why-proof--chips {
  border-left: 1px solid var(--line);
}

.why-proof--wide {
  grid-column: 1 / -1;
}

/* MAXTech lockup is compact — sit it beside the line, not above. */
.why-proof li.why-proof--inline {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.why-proof strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: -0.03em;
  margin-bottom: 2px;
}

.why-proof p {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Slot holds every mark. Left-align with the copy. Contain, never crop. */
.why-proof__mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 56px;
  width: 100%;
}

.why-proof--wide .why-proof__mark {
  height: 52px;
}

.why-proof li.why-proof--inline .why-proof__mark {
  width: auto;
  flex: 0 0 auto;
  height: auto;
}

.why-proof__mark img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.why-proof--wide .why-proof__mark img {
  height: 52px;
  max-height: 52px;
  max-width: min(300px, 100%);
}

/*
  Five-state cluster stands in for a license plate.
  Navy chips, paper type. Half-width cell can take a wrap.
*/
.why-states {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

.why-states span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Paper field — max goes navy, TECH stays gold. Smaller than the navy band. */
.why-maxtech {
  font-size: 1.15rem;
}

.why-panel .maxtech-max {
  color: var(--navy);
}

@media (prefers-reduced-motion: no-preference) {
  .why-proof li:hover {
    background: var(--paper);
    transform: translateY(-1px);
  }
}

/* -------------------------------------------------------------------------
   Service areas + proof
   ------------------------------------------------------------------------- */
.areas {
  background: var(--blue-2728-print);
  color: var(--on-navy);
  border-radius: 18px;
  padding: 32px;
  margin: 8px 0 40px;
}

/* Global h2 is ink. On 2728 C that reads as black — flip the title. */
.areas h2,
.areas h2 .accent-blue {
  color: var(--white);
}

.areas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 14px 0;
}

.areas li {
  background: rgba(246, 244, 240, 0.1);
  border-radius: 999px;
  padding: 8px 14px;
}

.areas p { color: var(--on-navy-muted); margin: 0; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

/* -------------------------------------------------------------------------
   Quote form
   ------------------------------------------------------------------------- */
.quote-grid {
  display: grid;
  gap: 28px;
  padding: 48px 0;
}

@media (min-width: 860px) {
  .quote-grid { grid-template-columns: 0.9fr 1.1fr; }
}

/* Benefit list on evaluation + estimate. Same 8pt rhythm as topic lists. */
.quote-points {
  margin: 0 0 18px;
  padding-left: 18px;
  line-height: 1.7;
  color: var(--ink);
}

.quote-points li {
  margin-bottom: 8px;
}

/* Locked Roofing field — readable, not editable, not a fake dropdown. */
.form input[readonly] {
  background: var(--line);
  color: var(--ink);
  cursor: default;
}

.form {
  display: grid;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.form input:not([type="checkbox"]),
.form select,
.form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--paper);
  color: var(--ink);
}

/* Same pill as the text fields. Native chrome is stripped so the
   chevron sits in the same 44px row as Full Name / Email / Phone. */
.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23122033' d='M1 1.5 L6 6.5 L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.form textarea { padding: 12px; min-height: 96px; }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9rem;
}

.form-msg {
  margin: 0;
  color: var(--max-blue);
  font-weight: 600;
}

.form-msg.is-error { color: #8B1E1E; }

/* -------------------------------------------------------------------------
   Footer — four equal columns, 44px social hits, gold hover.
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--on-navy-muted);
  padding: 48px 0 24px;
}

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

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
  }
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 32px;
  }
}

.site-footer h4 {
  color: var(--on-navy);
  font-size: 0.95rem;
  min-height: 32px;
  display: flex;
  align-items: center;
  margin: 0 0 12px;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li,
.site-footer p { margin: 0 0 8px; }

.site-footer a { color: var(--on-navy-muted); }
.site-footer a:hover { color: var(--gold); }

.footer-logo {
  height: 36px;
  width: auto;
  margin: 0 0 12px;
  display: block;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.social-btn {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(246, 244, 240, 0.18);
  color: var(--on-navy);
  background: rgba(246, 244, 240, 0.06);
  transition: transform 0.45s var(--spring), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.social-btn:hover,
.social-btn:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.social-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* Trust badges — small, wrapping row. Cap height so they never
   inflate the logo (36px) or social icons (20px) above. */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 24px;
}

.footer-badges img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

.legal {
  border-top: 1px solid rgba(246, 244, 240, 0.15);
  margin-top: 28px;
  padding-top: 16px;
  font-size: 0.82rem;
}

/* -------------------------------------------------------------------------
   FAQ / team / projects extras
   ------------------------------------------------------------------------- */
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 28px;
}

.team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  /* Two people — keep card width honest, don't stretch to full wrap. */
  .team {
    grid-template-columns: repeat(2, minmax(0, 280px));
  }
}

.person {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.person span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
   Roofing — family copy, navy difference band, component carousel.
   HIG: 44px arrows, spring fade, one slide, wrap on the phone.
   ------------------------------------------------------------------------- */
.family-copy p {
  color: var(--muted);
  max-width: 40rem;
  margin: 0 0 14px;
  font-size: 1.05rem;
}

/* Paper gap under the 2728 C band so it does not fuse with the footer. */
.difference {
  background: var(--blue-2728-print);
  color: var(--on-navy);
  padding: 56px 0 64px;
  margin: 0 16px 48px;
  border-radius: var(--radius);
}

.difference h2 { color: var(--on-navy); }

.difference-lead {
  color: var(--on-navy-muted);
  max-width: 36rem;
  margin: 0 0 28px;
}

.difference-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

@media (min-width: 760px) {
  .difference-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 40px;
  }
}

.difference-card p {
  color: var(--on-navy-muted);
  margin: 0;
}

.difference-cta {
  display: flex;
  justify-content: center;
}

/* Roof mark + word. Gold stroke, white/gold type. */
.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 12px;
  color: var(--gold);
}

.brand-mark svg:not(.maxtech-roof) {
  width: 56px;
  height: 40px;
  flex: 0 0 auto;
}

.brand-mark-word {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.35rem;
}

.warranty svg { width: 36px; height: 40px; }

/* Same roof-over-max as the ExteriorMax lockup. Gold cap, white max, gold TECH. */
.maxtech-lockup {
  display: inline-flex;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.45rem;
  line-height: 1;
}

.maxtech-max {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--on-navy);
}

.maxtech-max em {
  font-style: normal;
}

.maxtech-roof {
  width: 100%;
  height: 12px;
  margin-bottom: 1px;
  color: var(--gold);
}

.maxtech-roof path { fill: currentColor; }

.maxtech-tech { color: var(--gold); }

.carousel {
  margin-top: 8px;
}

.carousel-frame {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.carousel-btn {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.45s var(--spring), background 0.2s ease;
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
}

.carousel-viewport {
  outline: none;
}

.carousel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.carousel-slide {
  display: none;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.carousel-slide.is-on {
  display: grid;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(255, 214, 33, 0.45);
}

@media (min-width: 720px) {
  .carousel-slide.is-on {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
  }
}

.carousel-shot {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  background: var(--shadow-navy);
}

.carousel-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-slide h3 { margin-bottom: 8px; }
.carousel-slide p { color: var(--muted); margin: 0; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}

.carousel-dot.is-on { background: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .carousel-btn:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .carousel-btn, .why-proof li { transition: none; }
}

/*
  Phone only — desktop rules above stay untouched.
  Stacked reading order, 44px hits, no sideways scroll.
  Notch/home-indicator via safe-area. HIG 8pt spacing.
*/
@media (max-width: 699px) {
  html,
  body {
    overflow-x: clip;
  }

  .wrap,
  .header-inner {
    width: min(var(--page), calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  /* Gold CTA lives in the hero; Menu is the 44px chrome. */
  .header-actions {
    display: none;
  }

  .brand img {
    height: 32px;
  }

  .hero {
    padding: 28px 0 24px;
  }

  .hero .wrap,
  .split {
    gap: 20px;
  }

  .hero .wrap > *,
  .split > * {
    min-width: 0;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  /* Home pills stay content-sized; the stretch rule is for other heroes. */
  .hero-home .hero-actions .btn {
    flex: 0 0 auto;
  }

  .section {
    padding: 36px 0;
  }

  .topic-cutout {
    max-height: 220px;
    margin-inline: auto;
  }

  .difference {
    margin: 0 12px 32px;
    padding: 36px 0 40px;
  }

  .form input:not([type="checkbox"]),
  .form select,
  .form textarea {
    font-size: 16px;
  }

  .nav.is-open .mega a {
    min-height: var(--tap);
    /* inline-block so the 012 rail stays glyph-width, not a flex stripe. */
    display: inline-block;
    line-height: var(--tap);
  }

  .site-footer a {
    overflow-wrap: anywhere;
  }

  .site-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .about-lead .person .media {
    height: 140px;
  }

  /* Why card — one column. Wide rows keep the banner; the pair stacks. */
  .why-proof {
    grid-template-columns: 1fr;
  }

  .why-proof li {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    padding: 12px 4px;
  }

  .why-proof--chips {
    border-left: 0;
  }

  .why-proof__mark {
    width: 72px;
    flex: 0 0 72px;
    height: 56px;
  }

  .why-proof__mark img {
    max-width: 72px;
    max-height: 56px;
  }

  .why-proof li.why-proof--wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .why-proof li.why-proof--inline {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  /* Chips need the full row — 72px makes MD/VA wrap into a stack. */
  .why-proof li.why-proof--chips {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .why-proof li.why-proof--chips .why-proof__mark {
    width: 100%;
    flex: none;
    height: auto;
  }

  .why-proof--wide .why-proof__mark {
    width: 100%;
    flex: none;
    height: 48px;
  }

  .why-proof li.why-proof--inline .why-proof__mark {
    width: auto;
    flex: 0 0 auto;
    height: auto;
  }

  .why-proof--wide .why-proof__mark img {
    height: 44px;
    max-height: 44px;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
   Instant quote addon
   Apple HIG: one small elevated card, 44px close, dimmed backdrop, spring in.
   ExteriorMax only frames the Free Roof Health Report URL. No FRHR edits.
   Desktop stays a compact card. Phone goes edge-to-edge for thumb reach.
   ------------------------------------------------------------------------- */
body.quote-embed-open {
  overflow: hidden;
}

.quote-embed {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: transparent;
}

/* Dimmer is a sibling of the sheet — never an ancestor of the iframe. */
.quote-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 55, 100, 0.28);
}

.quote-embed[hidden] {
  display: none;
}

.quote-embed[hidden]::before {
  content: none;
}

.quote-embed__sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /*
     460 matches the FRHR card. No overflow/transform/opacity here —
     those flatten WebGL in the iframe (navy map square).
  */
  width: min(520px, calc(100vw - 32px));
  height: min(920px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(0, 55, 100, 0.28);
  overflow: visible;
}

.quote-embed__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* One accessory row. The form itself lives in the iframe below. */
  min-height: var(--tap);
  padding: 4px 4px 4px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  border-radius: 24px 24px 0 0;
}

/*
   Contractor lockup on OUR quote chrome — 36px EM mark, 44px close, 8pt gap.
   The PNG already has alpha; do not paint a black plate behind it.
   Does not replace FRHR's own chip.
*/
.emx-quote-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.emx-quote-lockup__mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}
.emx-quote-lockup__text {
  min-width: 0;
}

.quote-embed__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.quote-embed__note {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.quote-embed__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.quote-embed__close:hover,
.quote-embed__close:focus-visible {
  background: var(--paper);
}

.quote-embed__frame {
  /* Fixed viewport. Flex-shrink-to-zero was giving FRHR a dead map. */
  flex: none;
  display: block;
  width: 460px;
  max-width: 100%;
  height: calc(min(920px, 100dvh - 32px) - 56px);
  min-height: 720px;
  margin: 0 auto;
  border: 0;
  background: var(--white);
}

@media (max-width: 700px) {
  .quote-embed {
    padding: 0;
  }

  .quote-embed__sheet {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .quote-embed__frame {
    flex: none;
    width: 100%;
    height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
    min-height: 640px;
  }

  .quote-embed__bar {
    padding-top: calc(4px + env(safe-area-inset-top, 0px));
    border-radius: 0;
  }
}

/* Fade the dimmer only. Never transform/opacity the iframe's parent. */
@media (prefers-reduced-motion: no-preference) {
  .quote-embed.is-open::before {
    animation: quote-embed-dim 0.36s var(--spring);
  }
}

@keyframes quote-embed-dim {
  from { opacity: 0; }
  to { opacity: 1; }
}