/* ============================================================
   HomeKnight — shared styles
   Brand: Knight Navy #1A2848 · Heraldic Gold #C1962D
          Armor Steel #9BA3AD · Plume Red #B23A3A (mascot only)
          Ink #2A2E36 · Paper #FFFFFF
   Type:  Inter (one type system — logo, headings, UI, body)
   ============================================================ */

/* ---- Self-hosted font: Inter (one system across the brand) ---- */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;       /* variable wght axis */
  font-style: normal;
  font-display: swap;
}

:root {
  --navy:   #1A2848;
  --navy-2: #223256;       /* lifted navy for layered surfaces */
  --gold:   #C1962D;       /* heraldic accent — decorative only (trim, highlights) */
  --gold-soft: #d9b35a;
  --steel:  #9BA3AD;
  --red:    #BE3438;        /* ACTION RED — CTAs / conversion only */
  --red-2:  #a82d31;        /* hover */
  --ink:    #2A2E36;
  --paper:  #FFFFFF;
  --parchment: #FAF8F3;     /* warm off-white section tone */
  --parchment-2: #F3EFE6;
  --line:   #E7E2D6;        /* warm hairline */
  --line-cool: #DDE1E8;

  --ink-70: #54585f;
  --ink-55: #71757c;

  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(26,40,72,.06), 0 2px 8px rgba(26,40,72,.05);
  --shadow-md: 0 4px 14px rgba(26,40,72,.08), 0 10px 30px rgba(26,40,72,.07);
  --shadow-lg: 0 18px 50px rgba(26,40,72,.14);

  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* knight crop ratios (width / cropped-height); higher 2nd number => taller reveal */
  --knight-crop-desktop: 848 / 470;  /* head-to-chest reveal; lower body hidden behind card */
  --knight-crop-mobile:  848 / 452;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0;
}

p { margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.section { padding: 84px 0; }
.section--parchment { background: var(--parchment); }
.section--navy { background: var(--navy); }
.section--navy h2, .section--navy h3 { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 17px;
  padding: 16px 28px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  text-align: center; line-height: 1;
}
/* Primary CTA = Action Red, white text (brand: red is action-only) */
.btn--gold, .btn--cta { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(190,52,56,.30); }
.btn--gold:hover, .btn--cta:hover { transform: translateY(-2px); background: var(--red-2); box-shadow: 0 12px 28px rgba(190,52,56,.38); }
.btn--gold svg, .btn--cta svg { stroke: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-cool); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--block { width: 100%; }
.btn--xl { font-size: 21px; padding: 23px 44px; border-radius: 15px; }
.btn--xl svg { width: 24px; height: 24px; stroke: currentColor; }
.btn--gold svg { stroke: currentColor; }
.hero-cta { margin-top: 34px; }
.final-cta-btn { margin-top: 28px; display: flex; justify-content: center; }
.hero-cta .btn--xl { box-shadow: 0 10px 30px rgba(193,150,45,.34); }

/* =================================================================
   HEADER
   ================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.site-header .logo { height: 57px; width: auto; }
.header-nav { display: flex; align-items: center; gap: 26px; }
.header-nav a.nav-link { font-weight: 700; font-size: 15px; color: var(--ink-70); transition: color .15s; }
.header-nav a.nav-link:hover { color: var(--navy); }
.header-cta { padding: 11px 20px; font-size: 15px; }
/* Small white pill toggle button: "For Contractors" / "For Homeowners" */
.hk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--navy);
  border: 1.5px solid var(--navy); border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background .15s, color .15s;
}
.hk-pill:hover { background: var(--navy); color: #fff; }
@media (max-width: 760px) {
  /* Not fixed on mobile — header scrolls away with the page */
  .site-header { position: static; backdrop-filter: none; background: var(--paper); }
  .header-nav .nav-link, .header-nav .header-cta { display: none; }
  .site-header .wrap { height: 64px; }
  .site-header .logo { height: 40px; }
  .hk-pill { padding: 8px 15px; font-size: 13px; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 92% 10%, rgba(193,150,45,.10), transparent 60%),
    linear-gradient(180deg, var(--parchment) 0%, #fff 100%);
}
.hero::before { /* faint heraldic dot lattice */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(26,40,72,.05) 1px, transparent 1px);
  background-size: 26px 26px; pointer-events: none; opacity: .6;
}
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  padding-top: 64px; padding-bottom: 64px; min-height: 660px;
}
.hero-copy { max-width: 720px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.hero-eyebrow {
  font-size: 13.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(2.7rem, 5.1vw, 3.95rem); line-height: 1.06;
  margin-bottom: 26px; text-wrap: balance;
}
.hero h1 .accent { color: var(--gold); font-style: normal; }
.hero-break { display: none; }   /* desktop forces the 2-line break; mobile wraps naturally */
.hero-sub { font-size: 1.34rem; line-height: 1.55; color: var(--ink-70); max-width: 30em; margin: 0 auto; }
.hero-cta { display: flex; justify-content: center; margin-top: 42px; }
.hero-micro { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 26px; color: var(--ink-55); font-size: 15.5px; font-weight: 600; }
.hero-micro .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* Knight floats just to the right of the dead-center copy (tracks it across widths). */
.hero-knight { position: absolute; bottom: 20px; left: calc(50% + 300px); right: auto; width: 375px; z-index: 1; }
.hero-knight img { width: 100%; filter: drop-shadow(0 26px 34px rgba(26,40,72,.18)); }
.hero-knight::after { /* grounding shadow */
  content: ""; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 62%; height: 30px; background: radial-gradient(ellipse, rgba(26,40,72,.18), transparent 70%);
  filter: blur(2px); z-index: -1;
}
@media (min-width: 981px) { .hero-break { display: inline; } }   /* force headline onto exactly two lines */

/* Mobile-only full-body knight (faded into the headline). Hidden on desktop;
   shown in the <=640px hero. Background image => not fetched on desktop. */
.hero-knight-m { display: none; }


/* ---------- Project selector ---------- */
.selector { margin-top: 6px; }
.selector-label { font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.selector-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.proj {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 8px 14px; background: #fff; border: 1px solid var(--line-cool);
  border-radius: var(--radius-sm); color: var(--navy); font-weight: 700; font-size: 14.5px;
  transition: transform .16s var(--ease), border-color .16s, box-shadow .16s, background .16s;
}
.proj svg { width: 26px; height: 26px; stroke: var(--navy); transition: stroke .16s; }
.proj:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-md); background: #fff; }
.proj:hover svg { stroke: var(--gold); }

/* =================================================================
   TRUST STRIP
   ================================================================= */
.trust {
  background: var(--navy); color: #d7dce6;
}
.trust .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 22px; padding-top: 16px; padding-bottom: 16px;
  font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
}
.trust .ph { color: #fff; }
.trust .sep { color: var(--gold); }
.trust .em { color: var(--gold-soft); }

/* =================================================================
   VERTICALS GRID
   ================================================================= */
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.7rem); }
.section-head p { color: var(--ink-70); margin-top: 14px; font-size: 1.08rem; }

.verticals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vcard {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.vcard::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
  background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .22s var(--ease);
}
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-cool); }
.vcard:hover::after { transform: scaleY(1); }
.vcard .vicon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--parchment-2); flex: none;
}
.vcard .vicon svg { width: 28px; height: 28px; stroke: var(--navy); }
.vcard h3 { font-size: 1.42rem; }
.vcard p { color: var(--ink-70); font-size: 1rem; line-height: 1.55; }
.vcard .vgo { margin-top: auto; font-weight: 700; color: var(--gold); font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.vcard .vgo svg { width: 16px; height: 16px; stroke: var(--gold); transition: transform .16s; }
.vcard:hover .vgo svg { transform: translateX(4px); }

/* =================================================================
   HOW IT WORKS
   ================================================================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; counter-reset: step; }
.step { position: relative; }
.step .num {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--gold);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--gold); margin-bottom: 20px;
}
.step h3 { font-size: 1.35rem; margin-bottom: 10px; }
.step p { color: var(--ink-70); }
.steps .step:not(:last-child)::before {
  content: ""; position: absolute; top: 28px; left: 70px; right: -17px; height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--line-cool) 0 8px, transparent 8px 16px);
}

/* =================================================================
   WHY HOMEKNIGHT + STANDARD
   ================================================================= */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 0; }
.benefit {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-md);
}
.benefit .bicon { width: 44px; height: 44px; border-radius: 10px; background: rgba(193,150,45,.16); display: grid; place-items: center; margin-bottom: 16px; }
.benefit .bicon svg { width: 24px; height: 24px; stroke: var(--gold); }
.benefit h3 { font-size: 1.28rem; color: var(--navy); margin-bottom: 8px; }
.benefit p { color: var(--ink-70); font-size: 1rem; }

/* The HomeKnight Standard — a coherent capstone band on the navy section */
.standard-band { margin-top: 48px; text-align: center; max-width: 820px; margin-inline: auto; }
.standard-lead { color: var(--ink-70); font-size: 1.12rem; line-height: 1.6; margin: 0; }
.standard-lead span { color: var(--gold); font-weight: 700; }
.standard-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.standard-pills .pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; color: var(--navy); font-weight: 700; font-size: .98rem;
  box-shadow: var(--shadow-sm);
}
.standard-pills .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; flex: none; }
.standard-pills .ck svg { width: 13px; height: 13px; stroke: var(--navy); stroke-width: 3; }

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm); position: relative;
}
.tcard .quote { font-family: var(--font-display); color: var(--gold); font-size: 3rem; line-height: 1; height: 28px; }
.tcard p { color: var(--ink); font-size: 1.06rem; margin: 10px 0 22px; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--parchment-2); border: 1px solid var(--line); }
.tcard .who b { color: var(--navy); display: block; font-size: 15px; }
.tcard .who span { color: var(--ink-55); font-size: 13.5px; }

/* =================================================================
   FAQ
   ================================================================= */
.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  margin-bottom: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.faq details[open] { border-color: var(--line-cool); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; color: var(--navy);
  font-size: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 22px; height: 22px; flex: none; position: relative; transition: transform .2s var(--ease); }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; }
.faq summary .plus::before { left: 0; top: 50%; width: 100%; height: 2.5px; transform: translateY(-50%); }
.faq summary .plus::after { top: 0; left: 50%; height: 100%; width: 2.5px; transform: translateX(-50%); transition: transform .2s var(--ease); }
.faq details[open] summary .plus { transform: rotate(90deg); }
.faq details[open] summary .plus::after { transform: translateX(-50%) scaleY(0); }
.faq .answer { padding: 0 24px 22px; color: var(--ink-70); }

/* =================================================================
   FINAL CTA
   ================================================================= */
.final { background: #fff; }
.final-panel {
  position: relative; overflow: hidden; text-align: center;
  max-width: 920px; margin-inline: auto;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(193,150,45,.18), transparent 55%),
    var(--navy);
  border-radius: 24px; padding: 64px 40px; box-shadow: var(--shadow-lg);
}
.final-panel h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.final-panel p { color: #c4ccda; font-size: 1.15rem; margin: 16px auto 0; max-width: 34em; }
.final-panel .hero-micro { justify-content: center; color: #aeb6c5; margin-top: 22px; font-size: 13px; font-weight: 500; }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer { background: #141f38; color: #aeb6c5; padding: 56px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; align-items: start; }
.footer-brand .logo { height: 42px; width: auto; margin-bottom: 16px; }
.footer-lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-lockup img { height: 46px; width: auto; }
.footer-lockup span {
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: 30px; line-height: 1; letter-spacing: -0.01em;
}
.footer-brand-logo { display: inline-block; margin-bottom: 18px; }
.footer-brand-logo img { height: 44px; width: auto; display: block; }
.footer-brand p { color: #8e98ab; max-width: 26em; font-size: .98rem; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a { display: block; color: #aeb6c5; margin-bottom: 10px; font-size: 15px; transition: color .15s; }
.footer-col a:hover { color: var(--gold); }
.footer-cta .btn { white-space: nowrap; }
.footer-social { display: flex; gap: 12px; margin-top: 6px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; transition: border-color .15s, background .15s; }
.footer-social a:hover { border-color: var(--gold); background: rgba(193,150,45,.12); }
.footer-social svg { width: 18px; height: 18px; stroke: #cdd4e0; }
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between;
  font-size: 13.5px; color: #8e98ab;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-bottom a:hover { color: var(--gold); }

/* =================================================================
   LEGAL / PROSE PAGES  (/terms, /privacy, /marketing-partners)
   ================================================================= */
.legal-main { padding: 56px 0 72px; background: #fff; }
.legal { max-width: 780px; margin: 0 auto; }
.legal .eyebrow { color: var(--gold); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 6px 0 10px; }
.legal .updated { color: var(--ink-55); font-size: 14.5px; font-weight: 600; margin-bottom: 32px; }
.legal h2 { font-size: 1.3rem; margin: 34px 0 12px; }
.legal h3 { font-size: 1.06rem; margin: 22px 0 8px; color: var(--navy); }
.legal p { color: var(--ink-70); margin-bottom: 14px; line-height: 1.7; }
.legal ul { margin: 0 0 16px 0; padding-left: 22px; color: var(--ink-70); line-height: 1.7; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--navy); text-decoration: underline; }
.legal a:hover { color: var(--gold); }
.legal .lead { font-size: 1.08rem; color: var(--ink); }
.partner-grid { columns: 2; column-gap: 40px; margin-top: 18px; }
.partner-grid li { break-inside: avoid; color: var(--ink-70); }
@media (max-width: 640px) { .partner-grid { columns: 1; } .legal-main { padding: 36px 0 52px; } }

/* =================================================================
   THANK-YOU / CONFIRMATION PAGE  (/quote/thank-you)
   ================================================================= */
.ty { width: 100%; max-width: 560px; text-align: center; }
.ty-check {
  width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(193,150,45,.32);
}
.ty-check svg { width: 38px; height: 38px; stroke: #fff; stroke-width: 3; fill: none; }
.ty h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 10px; }
.ty-lead { font-size: 1.16rem; color: var(--ink-70); margin: 0 auto 26px; max-width: 30em; }
.ty-callout {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--navy); color: #fff; border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 14px 34px rgba(26,40,72,.22);
}
.ty-ring {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.12); display: grid; place-items: center;
  animation: tyring 1.7s ease-in-out infinite;
}
.ty-ring svg { width: 28px; height: 28px; stroke: var(--gold-soft); stroke-width: 2; fill: none; }
@keyframes tyring { 0%,55%,100% { transform: rotate(0); } 8% { transform: rotate(-13deg); } 16% { transform: rotate(13deg); } 24% { transform: rotate(-9deg); } 32% { transform: rotate(9deg); } 40% { transform: rotate(0); } }
.ty-callout strong { display: block; font-size: 1.18rem; margin-bottom: 4px; }
.ty-callout p { margin: 0; color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.5; }
.ty-callout .accent { color: var(--gold-soft); }
.ty-tips { list-style: none; margin: 26px auto 0; padding: 0; max-width: 30em; text-align: left; display: grid; gap: 12px; }
.ty-tips li { position: relative; padding-left: 32px; color: var(--ink-70); line-height: 1.45; }
.ty-tips li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(193,150,45,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1962D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-11'/%3E%3C/svg%3E") center/13px no-repeat;
}
.ty-foot { margin-top: 26px; color: var(--ink-55); font-size: .95rem; line-height: 1.5; }
@media (max-width: 640px) { .ty-lead { font-size: 1.05rem; } .ty-callout { padding: 18px; } }

.funnel-body {
  min-height: 100svh; display: flex; flex-direction: column;
  background:
    radial-gradient(90% 70% at 50% -8%, rgba(193,150,45,.10), transparent 60%),
    linear-gradient(180deg, var(--parchment) 0%, #fff 60%);
}
.funnel-header { padding: 18px 0; }
.funnel-header .wrap { display: flex; align-items: center; justify-content: space-between; }
.funnel-header .logo { height: 57px; width: auto; }

.funnel-main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 20px 32px;
}
.guardian { position: relative; width: 100%; max-width: 540px; padding-top: 206px; }
.guardian-knight {
  position: absolute; top: 0; left: 0; right: 0; height: 288px; z-index: 0;
  pointer-events: none;
  background: url("/assets/knight-full.svg") no-repeat top center;
  background-size: 320px auto;
}
@media (max-width: 560px) {
  .guardian { padding-top: 168px; }
  .guardian-knight { height: 234px; background-size: 260px auto; }
}

/* Quiz card shaped as a heraldic shield: an arched crown at the top
   (peak at center, broad shoulders), straight sides, then a gentle inward
   convergence to a soft point. The crown (--crown) and the convergence
   region (--converge) are FIXED heights so the silhouette stays consistent
   at any slide height; only the straight middle stretches. Content padding
   keeps the form clear of the crown up top, and the CTA button lands exactly
   where the sides begin to converge. Two clipped layers = one clean gold edge. */
.quiz-card {
  --crown: 26px;        /* chevron crown height (reference shape, lowered pinnacle) — content begins below this */
  --converge: 110px;    /* taper region — tight convergence to the point below the content */
  --shield: polygon(0.000% 25.6px, 2.000% 25.3px, 4.000% 24.9px, 6.000% 24.3px, 8.000% 23.8px, 10.000% 23.1px, 12.000% 22.4px, 14.000% 21.7px, 16.000% 20.9px, 18.000% 20.1px, 20.000% 19.2px, 22.000% 18.2px, 24.000% 17.2px, 26.000% 16.2px, 28.000% 15.1px, 30.000% 14.0px, 32.000% 12.8px, 34.000% 11.6px, 36.000% 10.3px, 38.000% 9.0px, 40.000% 7.6px, 42.000% 6.2px, 44.000% 4.8px, 46.000% 3.3px, 48.000% 1.8px, 50.000% 0.0px, 52.000% 1.8px, 54.000% 3.3px, 56.000% 4.8px, 58.000% 6.2px, 60.000% 7.6px, 62.000% 9.0px, 64.000% 10.3px, 66.000% 11.6px, 68.000% 12.8px, 70.000% 14.0px, 72.000% 15.1px, 74.000% 16.2px, 76.000% 17.2px, 78.000% 18.2px, 80.000% 19.2px, 82.000% 20.1px, 84.000% 20.9px, 86.000% 21.7px, 88.000% 22.4px, 90.000% 23.1px, 92.000% 23.8px, 94.000% 24.3px, 96.000% 24.9px, 98.000% 25.3px, 100.000% 25.6px, 100% calc(100% - 110px), 99.763% calc(100% - 106.2px), 99.267% calc(100% - 102.3px), 98.529% calc(100% - 98.3px), 97.565% calc(100% - 94.1px), 96.391% calc(100% - 89.8px), 95.024% calc(100% - 85.3px), 93.478% calc(100% - 80.9px), 91.771% calc(100% - 76.3px), 89.918% calc(100% - 71.7px), 87.935% calc(100% - 67.1px), 85.839% calc(100% - 62.4px), 83.646% calc(100% - 57.8px), 81.371% calc(100% - 53.2px), 79.031% calc(100% - 48.6px), 76.642% calc(100% - 44.1px), 74.220% calc(100% - 39.6px), 71.781% calc(100% - 35.2px), 69.342% calc(100% - 31.0px), 66.917% calc(100% - 26.8px), 64.524% calc(100% - 22.8px), 62.178% calc(100% - 19.0px), 59.896% calc(100% - 15.3px), 57.693% calc(100% - 11.8px), 55.586% calc(100% - 8.5px), 53.591% calc(100% - 5.4px), 51.723% calc(100% - 2.6px), 50.000% calc(100% - 0.0px), 48.277% calc(100% - 2.6px), 46.409% calc(100% - 5.4px), 44.414% calc(100% - 8.5px), 42.307% calc(100% - 11.8px), 40.104% calc(100% - 15.3px), 37.822% calc(100% - 19.0px), 35.476% calc(100% - 22.8px), 33.083% calc(100% - 26.8px), 30.658% calc(100% - 31.0px), 28.219% calc(100% - 35.2px), 25.780% calc(100% - 39.6px), 23.358% calc(100% - 44.1px), 20.969% calc(100% - 48.6px), 18.629% calc(100% - 53.2px), 16.354% calc(100% - 57.8px), 14.161% calc(100% - 62.4px), 12.065% calc(100% - 67.1px), 10.082% calc(100% - 71.7px), 8.229% calc(100% - 76.3px), 6.522% calc(100% - 80.9px), 4.976% calc(100% - 85.3px), 3.609% calc(100% - 89.8px), 2.435% calc(100% - 94.1px), 1.471% calc(100% - 98.3px), 0.733% calc(100% - 102.3px), 0.237% calc(100% - 106.2px), 0.000% calc(100% - 110.0px));
  position: relative; isolation: isolate; z-index: 2;
  width: 100%; max-width: 540px; background: transparent;
  /* top clears the crown; bottom = convergence region so the CTA sits at the taper start */
  padding: calc(var(--crown) + 34px) 32px var(--converge);
}
.quiz-card::before, .quiz-card::after {
  content: ""; position: absolute; pointer-events: none; clip-path: var(--shield);
}
.quiz-card::before {                 /* gold shield edge + shadow */
  inset: 0; z-index: -2; background: var(--gold);
  filter: drop-shadow(0 18px 34px rgba(26,40,72,.16));
}
.quiz-card::after {                  /* white face, inset to reveal a single gold edge */
  inset: 2.5px; z-index: -1; background: #fff;
}
.quiz-title { text-align: center; font-size: 1.6rem; margin: 0; }

/* single-line percentage progress bar */
.progress2 { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 2px 0 24px; }
.progress2-fill { height: 100%; width: 0; background: var(--gold); border-radius: 999px; transition: width .35s var(--ease); }
/* Smooth auto-progress transition between funnel slides */
#slideHost { transition: opacity .14s ease, transform .14s ease; }
#slideHost.slide-leaving { opacity: 0; transform: translateY(-8px); }

.quiz-q { animation: fade .3s var(--ease); }
.q-title { text-align: center; font-size: 1.34rem; line-height: 1.2; margin: 0 0 18px; }

/* first + last name side by side (both desktop and mobile) */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-bottom: 14px; }

/* TCPA disclosure — INSIDE the shield, directly below the CTA button */
.tcpa { font-size: 10px; line-height: 1.32; color: var(--ink-55); margin: 12px 0 0; text-align: left; }
.tcpa a { color: var(--ink-70); text-decoration: underline; }
.tcpa a:hover { color: var(--navy); }

.field.reveal:not([hidden]), .consent.reveal:not([hidden]) { animation: fade .25s var(--ease); }

.progress { display: flex; gap: 6px; margin-bottom: 22px; }
.progress .bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background .25s; }
.progress .bar.active { background: var(--gold); }

.qstep { display: none; }
.qstep.active { display: block; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; font-family: var(--font-body); font-size: 18px; color: var(--ink);
  padding: 16px 16px; border: 1px solid var(--line-cool); border-radius: 11px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193,150,45,.18); }

/* Phone field: US flag + +1 prefix; input submits a clean 10-digit string */
/* Phone field: flag + +1 sit in their own cell, divided from the input. */
.phone-wrap {
  display: flex; align-items: stretch; width: 100%;
  background: #fff; border: 1px solid var(--line-cool); border-radius: 11px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.phone-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193,150,45,.18); }
.phone-prefix {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 0 14px; background: var(--parchment); border-right: 1px solid var(--line-cool);
  font-weight: 700; font-size: 18px; color: var(--ink-70);
}
.phone-prefix .us-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: block; }
.phone-prefix .cc { letter-spacing: .01em; }
.phone-wrap input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; }
.phone-wrap input:focus { outline: none; box-shadow: none; border: 0; }

/* Google Places suggestion dropdown — on-brand (Inter), elevated */
.pac-container {
  z-index: 99999; margin-top: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(26,40,72,.16);
  font-family: var(--font-body);
}
.pac-item { padding: 11px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-70); cursor: pointer; }
.pac-item:first-child { border-top: 0; }
.pac-item:hover, .pac-item-selected { background: var(--parchment); }
.pac-item-query { font-weight: 600; color: var(--ink); }
.pac-matched { font-weight: 700; color: var(--navy); }
.pac-icon { margin-top: 3px; }

.choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
.choices--vert { grid-template-columns: 1fr; }
.choices--vert .choice {
  display: flex; align-items: center; gap: 11px; text-align: left; padding: 18px 16px; font-size: 17.5px;
}
.choices--vert .choice svg { width: 22px; height: 22px; stroke: var(--gold); flex: none; }
.choices--vert .choice span { line-height: 1.15; }
.choice {
  padding: 19px 16px; border: 1px solid var(--line-cool); border-radius: 12px; cursor: pointer;
  font-weight: 700; color: var(--navy); font-size: 17px; text-align: center; background: #fff;
  box-shadow: 0 2px 7px rgba(26,40,72,.07);
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.choice:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,40,72,.12); }
.choice.selected { border-color: var(--gold); background: rgba(193,150,45,.10); box-shadow: 0 0 0 1px var(--gold) inset, 0 4px 12px rgba(193,150,45,.16); }

.quiz-nav { display: flex; gap: 10px; margin-top: 20px; }
.quiz-nav .btn { flex: 1; }

.consent { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 16px; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--gold); }
.consent label { font-size: 12.5px; line-height: 1.5; color: var(--ink-55); }

.quiz-done { text-align: center; padding: 14px 0; }
.quiz-done .check { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; margin: 0 auto 16px; }
.quiz-done .check svg { width: 32px; height: 32px; stroke: var(--navy); stroke-width: 3; }
.quiz-done.dq .dq-mark { width: 60px; height: 60px; border-radius: 50%; background: var(--parchment-2); display: grid; place-items: center; margin: 0 auto 16px; }
.quiz-done.dq .dq-mark svg { width: 30px; height: 30px; stroke: var(--steel); stroke-width: 2; }
.quiz-done h2 { font-size: 1.5rem; margin-bottom: 8px; }
.quiz-done p { color: var(--ink-70); }
.quiz-done .btn { margin-top: 20px; display: inline-flex; }

.funnel-foot { text-align: center; padding: 18px; color: var(--ink-55); font-size: 12.5px; }

/* =================================================================
   CONTRACTORS STUB
   ================================================================= */
.stub {
  min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px;
}
.stub img { width: 120px; margin-bottom: 24px; }
.stub h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 14px; }
.stub p { color: var(--ink-70); max-width: 34em; margin: 0 auto 28px; font-size: 1.1rem; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 980px) {
  .hero .wrap {
    grid-template-columns: 1fr; gap: 0; min-height: 0;
    padding-top: 28px; padding-bottom: 36px; text-align: center;
  }
  /* Conversion copy fills most of the first screen; knight sits below it. */
  .hero-copy {
    max-width: none; order: 0;
    min-height: 74svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  .hero-cta { display: flex; justify-content: center; }
  .hero-micro { justify-content: center; }
  .hero-knight { display: none; }   /* no knight in the hero on mobile */
  .verticals, .tgrid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps .step:not(:last-child)::before { display: none; }
  .final-panel { padding: 44px 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-cta { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .wrap { padding-inline: 18px; }

  /* ---- Mobile hero: faded full-body knight above a vertically-centered copy block ---- */
  .hero .wrap { padding-top: 0; padding-bottom: 0; }
  .hero-copy {
    min-height: calc(100svh - 64px);   /* fill the viewport below the (now static) header */
    justify-content: center;            /* center the copy block... */
    padding-bottom: 12vh;               /* ...biased up toward center (headline position) */
  }
  .hero-eyebrow { display: none; }            /* reference goes straight to the knight */
  .hero-knight-m {
    display: block;
    width: min(86vw, 345px);                   /* ~15% larger */
    aspect-ratio: 848 / 683;                   /* body ends above the headline (no overlap) */
    margin: 0 auto;                            /* no negative margin -> never overlaps the headline */
    background: url(/assets/fullbodyknighttall.svg) top center / 100% auto no-repeat;
    /* fade starts low on the body, then drops out fast (aggressive); fully gone above the headline */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
  }
  .hero h1 { font-size: clamp(2.1rem, 8.5vw, 2.7rem); margin: 0; }
  .hero-sub { font-size: 1.06rem; margin-top: 16px; }
  .hero-cta { margin-top: 24px; width: 100%; }
  .hero-cta .btn { width: 100%; }
  .hero-micro { margin-top: 18px; gap: 5px; font-size: 12px; flex-wrap: nowrap; white-space: nowrap; }
  .final-panel { padding: 40px 16px; }       /* more room so the micro row fits one line */
  .final-panel .hero-micro { font-size: 11px; }   /* smaller, lighter fine print */

  .why-grid { grid-template-columns: 1fr; }   /* stack the guardian cards cleanly */
  .benefit { padding: 22px; }

  .selector-grid { grid-template-columns: repeat(3, 1fr); }
  .verticals, .tgrid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }
}

/* ---- Funnel on mobile ---- */
@media (max-width: 640px) {
  .funnel-main { padding: 10px 16px 20px; justify-content: center; }
  .funnel-header .logo { height: 45px; }
  .quiz-card {
    --crown: 18px;
    --converge: 80px;
    --shield: polygon(0.000% 18.1px, 2.000% 17.8px, 4.000% 17.5px, 6.000% 17.1px, 8.000% 16.7px, 10.000% 16.3px, 12.000% 15.8px, 14.000% 15.3px, 16.000% 14.7px, 18.000% 14.1px, 20.000% 13.5px, 22.000% 12.8px, 24.000% 12.1px, 26.000% 11.4px, 28.000% 10.6px, 30.000% 9.8px, 32.000% 9.0px, 34.000% 8.1px, 36.000% 7.2px, 38.000% 6.3px, 40.000% 5.4px, 42.000% 4.4px, 44.000% 3.4px, 46.000% 2.3px, 48.000% 1.3px, 50.000% 0.0px, 52.000% 1.3px, 54.000% 2.3px, 56.000% 3.4px, 58.000% 4.4px, 60.000% 5.4px, 62.000% 6.3px, 64.000% 7.2px, 66.000% 8.1px, 68.000% 9.0px, 70.000% 9.8px, 72.000% 10.6px, 74.000% 11.4px, 76.000% 12.1px, 78.000% 12.8px, 80.000% 13.5px, 82.000% 14.1px, 84.000% 14.7px, 86.000% 15.3px, 88.000% 15.8px, 90.000% 16.3px, 92.000% 16.7px, 94.000% 17.1px, 96.000% 17.5px, 98.000% 17.8px, 100.000% 18.1px, 100% calc(100% - 80px), 99.747% calc(100% - 77.3px), 99.288% calc(100% - 74.5px), 98.632% calc(100% - 71.7px), 97.789% calc(100% - 68.7px), 96.771% calc(100% - 65.8px), 95.585% calc(100% - 62.8px), 94.243% calc(100% - 59.7px), 92.755% calc(100% - 56.6px), 91.131% calc(100% - 53.5px), 89.380% calc(100% - 50.3px), 87.512% calc(100% - 47.2px), 85.539% calc(100% - 44.0px), 83.469% calc(100% - 40.8px), 81.313% calc(100% - 37.7px), 79.081% calc(100% - 34.5px), 76.783% calc(100% - 31.4px), 74.428% calc(100% - 28.3px), 72.027% calc(100% - 25.2px), 69.591% calc(100% - 22.1px), 67.128% calc(100% - 19.1px), 64.649% calc(100% - 16.2px), 62.164% calc(100% - 13.3px), 59.683% calc(100% - 10.5px), 57.216% calc(100% - 7.7px), 54.773% calc(100% - 5.1px), 52.365% calc(100% - 2.5px), 50.000% calc(100% - 0.0px), 47.635% calc(100% - 2.5px), 45.227% calc(100% - 5.1px), 42.784% calc(100% - 7.7px), 40.317% calc(100% - 10.5px), 37.836% calc(100% - 13.3px), 35.351% calc(100% - 16.2px), 32.872% calc(100% - 19.1px), 30.409% calc(100% - 22.1px), 27.973% calc(100% - 25.2px), 25.572% calc(100% - 28.3px), 23.217% calc(100% - 31.4px), 20.919% calc(100% - 34.5px), 18.687% calc(100% - 37.7px), 16.531% calc(100% - 40.8px), 14.461% calc(100% - 44.0px), 12.488% calc(100% - 47.2px), 10.620% calc(100% - 50.3px), 8.869% calc(100% - 53.5px), 7.245% calc(100% - 56.6px), 5.757% calc(100% - 59.7px), 4.415% calc(100% - 62.8px), 3.229% calc(100% - 65.8px), 2.211% calc(100% - 68.7px), 1.368% calc(100% - 71.7px), 0.712% calc(100% - 74.5px), 0.253% calc(100% - 77.3px), 0.000% calc(100% - 80.0px));
    padding: calc(var(--crown) + 30px) 22px var(--converge);
  }
  .quiz-title { font-size: 1.35rem; }
  .progress2 { margin: 2px 0 20px; }
  .progress { margin-bottom: 18px; }
  .field { margin-bottom: 13px; }
  .field-row .field { margin-bottom: 13px; }
  .field input, .field select { padding: 15px 14px; }
  .choice { padding: 17px 14px; }
  .choices--vert .choice { padding: 16px 14px; }
}

/* Short viewports (mobile landscape / small phones): keep funnel compact */
@media (max-height: 720px) and (max-width: 640px) {
  .funnel-header { padding: 12px 0; }
  .quiz-card { padding: calc(var(--crown) + 22px) 18px var(--converge); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* =================================================================
   CONTRACTORS — B2B PAGE  (/contractors)
   Reuses the homeowner brand system. Navy-led hero to signal the
   B2B audience while staying on-brand (gold accents, Inter, knight).
   ================================================================= */

/* Header on the contractor page: subtle "For homeowners" back link */
.header-back { font-weight: 600; font-size: 14.5px; color: var(--ink-55); transition: color .15s; white-space: nowrap; }
.header-back:hover { color: var(--navy); }

/* ---------- Hero (navy) ---------- */
.chero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(193,150,45,.18), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, #141f38 100%);
}
.chero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 30px 30px; pointer-events: none; opacity: .7;
}
.chero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px;
  padding-top: 72px; padding-bottom: 72px; min-height: 600px;
}
.chero-copy { max-width: 640px; position: relative; z-index: 2; }
.chero-eyebrow { color: var(--gold); font-weight: 700; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
.chero h1 { color: #fff; font-size: clamp(2.4rem, 4.4vw, 3.5rem); line-height: 1.07; margin-bottom: 22px; text-wrap: balance; }
.chero h1 .accent { color: var(--gold); }
.chero-sub { color: #c4ccda; font-size: 1.22rem; line-height: 1.55; max-width: 34em; }
.chero-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.chero-list li { display: flex; align-items: center; gap: 11px; color: #dfe4ee; font-weight: 600; font-size: 1.02rem; }
.chero-list .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; flex: none; }
.chero-list .ck svg { width: 13px; height: 13px; stroke: var(--navy); stroke-width: 3; fill: none; }
.chero-actions { margin-top: 34px; display: inline-flex; flex-direction: column; align-items: stretch; width: fit-content; gap: 16px; }
.chero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.chero-micro { display: flex; align-items: center; gap: 11px; margin-top: 22px; color: #aeb6c5; font-size: 15px; font-weight: 600; }
.chero-micro .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
/* Trust chip near the CTA */
.chero-trust {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: #e7ebf2; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  padding: 9px 16px; border-radius: 999px;
}
.chero-trust svg { width: 16px; height: 16px; stroke: var(--gold); flex: none; }
.chero-trust { white-space: nowrap; }

/* Knight rises out of the bottom-right of the navy hero (desktop) */
.chero-knight { position: relative; justify-self: center; align-self: end; width: 330px; max-width: 100%; z-index: 1; }
.chero-knight img { width: 100%; filter: drop-shadow(0 28px 40px rgba(0,0,0,.45)); }
.chero-knight::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 64%; height: 28px; background: radial-gradient(ellipse, rgba(0,0,0,.4), transparent 70%);
  filter: blur(3px); z-index: -1;
}
.chero-mobile-mark { display: none; }

/* ---------- Stat band ---------- */
.cstats { background: var(--parchment); border-bottom: 1px solid var(--line); }
.cstats .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 24px; }
.cstat { text-align: center; }
.cstat .v { font-family: var(--font-display); font-weight: 800; color: var(--gold); font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; }
.cstat .v span { color: var(--gold); }
.cstat .l { color: var(--ink-70); font-size: .95rem; font-weight: 600; margin-top: 6px; }

/* ---------- Benefit cards ---------- */
.cbenefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- Testimonials ---------- */
.cvideos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.cvideo { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.cvideo:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-cool); }
.cvideo .vwrap { position: relative; aspect-ratio: 16/9; background: var(--navy); }
.cvideo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvideo .vbody { padding: 22px 22px 24px; }
.cvideo .vco { color: var(--navy); font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; margin-bottom: 8px; }
.cvideo .vres { color: var(--ink-70); font-size: .98rem; line-height: 1.55; }
.cvideo .vres .hl { color: var(--gold); font-weight: 700; }

.creviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.creview { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.creview .glogo { position: absolute; top: 22px; right: 22px; }
.creview-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding-right: 34px; }
.creview .avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(193,150,45,.16); display: grid; place-items: center; color: var(--gold); font-weight: 800; flex: none; border: 1px solid rgba(193,150,45,.3); }
.creview .rname { color: var(--navy); font-weight: 700; font-size: 15px; }
.creview .rco { color: var(--ink-55); font-size: 13px; }
.creview .rbadge { display: inline-block; margin-top: 6px; padding: 2px 10px; background: rgba(193,150,45,.14); color: var(--gold); font-size: 11px; font-weight: 700; border-radius: 999px; border: 1px solid rgba(193,150,45,.28); }
.creview .stars { display: flex; gap: 2px; margin-bottom: 12px; }
.creview .stars svg { width: 16px; height: 16px; fill: var(--gold); stroke: var(--gold); }
.creview .rtext { color: var(--ink); font-size: .96rem; line-height: 1.6; }

/* ---------- Final CTA — compact, no watermark ---------- */
.cfinal .final-panel { position: relative; max-width: 640px; padding: 48px 40px; }
@media (max-width: 640px) { .cfinal .final-panel { padding: 36px 22px; } }

/* ---------- Contractor page responsive ---------- */
@media (max-width: 980px) {
  .chero .wrap { grid-template-columns: 1fr; gap: 0; min-height: 0; padding-top: 40px; padding-bottom: 44px; text-align: center; }
  .chero-copy { max-width: none; margin: 0 auto; }
  .chero-list { max-width: 22em; margin-left: auto; margin-right: auto; }
  .chero-list li { justify-content: flex-start; }
  .chero-cta { justify-content: center; }
  .chero-actions { margin-left: auto; margin-right: auto; }
  .chero-micro { justify-content: center; }
  .chero-knight { display: none; }
  .chero-mobile-mark {
    display: block;
    width: min(84vw, 340px);
    aspect-ratio: 848 / 683;
    margin: 0 auto 2px;
    background: url(/assets/fullbodyknighttall.svg) top center / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
  }
  .cbenefits, .cvideos, .creviews { grid-template-columns: 1fr 1fr; }
  .cstats .wrap { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; padding: 30px 16px; }
}
@media (max-width: 760px) {
  /* Keep the contractor header clean on phones: logo + Book a call only */
  .chero-header .nav-link, .chero-header .header-back { display: none; }
}
@media (max-width: 640px) {
  .cbenefits, .cvideos, .creviews { grid-template-columns: 1fr; }
  .chero h1 { font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: 14px; }
  .cfinal .crest-bg { width: 220px; right: -30px; bottom: -30px; }

  /* Match the homeowner hero: vertically-centered copy biased up, no dead space up top */
  .chero .wrap { padding-top: 0; padding-bottom: 0; }
  .chero-copy {
    min-height: calc(100svh - 64px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 0 12vh;
  }
  .chero-mobile-mark { width: min(80vw, 320px); margin: 0 auto 2px; }
  .chero-sub { font-size: 1rem; line-height: 1.45; max-width: 21em; }
  .chero-cta { margin-top: 18px; width: 100%; }
  .chero-cta .btn { width: 100%; }
  .chero-actions { width: 100%; display: flex; align-items: center; gap: 13px; margin-top: 20px; }
  .chero-book { width: 100%; }
  .chero-trust { margin-top: 0; width: auto; max-width: 100%; font-size: clamp(10.5px, 3.05vw, 14.5px); padding: 9px 15px; gap: 7px; border-radius: 999px; }
}

/* =================================================================
   HOMEPAGE — section CTAs, desktop gap, mobile sticky bar
   ================================================================= */

/* Desktop CTA button at the end of What We Help With / How It Works / A Guardian */
.sec-cta { text-align: center; margin-top: 44px; }
.sec-cta .btn svg, .mobile-cta-bar .btn svg { width: 18px; height: 18px; flex: none; }

/* Trim the desktop gap between the FAQ and the final CTA */
@media (min-width: 641px) {
  #faq { padding-bottom: 36px; }
  .final { padding-top: 30px; }
}

/* Persistent mobile-only Get-a-quote bar */
.mobile-cta-bar {
  display: none;                       /* hidden on desktop */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--navy);             /* blue background behind the button */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 22px rgba(15, 23, 42, .22);
  transform: translateY(115%);
  transition: transform .3s var(--ease);
}
.mobile-cta-bar.show { transform: translateY(0); }
.mobile-cta-bar .btn { width: 100%; }  /* red Get-a-quote button */

@media (max-width: 640px) {
  /* No extra CTAs below the hero on mobile */
  .sec-cta { display: none; }
  /* Completely remove the final CTA section on mobile */
  #get-started { display: none; }
  /* Show the persistent bar (revealed via .show once past the hero CTA) */
  .mobile-cta-bar { display: block; }
}