/* Silverhouse Home Inspections marketing site
   Dark-first per the brand guide PDF. Roughly 90% charcoal / 9% silver / 1% teal
   (the accent earns its weight by being rare).
   Type: Oswald (display, UPPERCASE condensed) · Raleway (subhead) · Inter (body).
   Silver-gradient display headlines; teal reserved for links and primary actions.

   DESIGN-SYSTEM RULES (non-negotiable):
   - NO eyebrows. Sections start with the headline, never a small kicker/label above it.
   - NO em dashes anywhere, in copy or markup. Use a period, comma, colon, or parens.
   - NO AI claims. NO fabricated numbers (reviews, ratings, counts). NO placeholder photos.
   - NO multi-state / "seven states" boasting in visible copy. */

/* Font faces, inlined from Google Fonts rather than linked.
   A <link> to fonts.googleapis.com is a render-blocking stylesheet on a second
   origin: the browser has to resolve, connect and fetch it before it can start on
   a single font file. These are the same declarations that URL returns, latin
   subset only, so the binaries still come from Google's CDN and the round trip
   to fonts.googleapis.com is gone. Each page head keeps a preconnect to
   fonts.gstatic.com so the binary fetch starts early.

   Regenerate after a family or weight change:
     curl -sH 'User-Agent: Mozilla/5.0 Chrome/120.0' \
       'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap'
   and keep the blocks under the "latin" comment. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v57/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYjMdZwl.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v57/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYjMdZwl.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v57/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYjMdZwl.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v37/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v37/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v37/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v37/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2)
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --charcoal: #0d0d0d;
  --charcoal-2: #141414;
  --charcoal-3: #1c1c1c;
  --charcoal-4: #262626;
  --silver-light: #e8e8e8;
  --silver: #c0c0c0;
  --silver-2: #9c9c9c;
  --silver-3: #8c8c8c;
  --teal: #00d5d1;
  --teal-deep: #007b7b;
  --teal-glow: rgba(0, 213, 209, 0.14);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --danger: #ff6b5c; /* safety hazard */
  --warn: #ffb547; /* major cost */
  --display: "Oswald", "Bahnschrift", "Helvetica Neue Condensed", sans-serif;
  --sub: "Raleway", "Inter", sans-serif;
  --body: "Inter", -apple-system, system-ui, sans-serif;
  --maxw: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

a {
  color: var(--teal);
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

/* ---- Type utilities ---- */
.silver-grad {
  background: linear-gradient(178deg, #f8f8f8 0%, #c8c8c8 42%, #7a7a7a 74%, #cfcfcf 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.teal {
  color: var(--teal);
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0;
}
h1 {
  font-size: clamp(44px, 6.4vw, 88px);
}
h2 {
  font-size: clamp(32px, 4.6vw, 56px);
}
h3 {
  font-size: clamp(22px, 2.4vw, 30px);
}
h4 {
  font-size: 19px;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 18px;
  color: var(--silver);
}
p:last-child {
  margin-bottom: 0;
}

/* ---- Layout ---- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
section {
  padding: 104px 0;
  position: relative;
}
section.tight {
  padding: 72px 0;
}
.bg-2 {
  background: var(--charcoal-2);
}
.bg-3 {
  background: var(--charcoal-3);
}

.sec-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sec-head p {
  margin-top: 20px;
  font-size: 18px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  font-family: var(--sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 3px;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}
.btn .arr {
  transition: transform 0.18s ease;
}
.btn:hover .arr {
  transform: translateX(3px);
}
.btn-primary {
  background: var(--teal);
  color: #05201f;
  box-shadow: 0 10px 30px rgba(0, 213, 209, 0.18);
}
.btn-primary:hover {
  background: #1ce7e3;
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(0, 213, 209, 0.3);
}
.btn-ghost {
  background: transparent;
  color: var(--silver-light);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.btn-sm {
  padding: 10px 16px;
  font-size: 11px;
}
.btn-lg {
  padding: 17px 30px;
  font-size: 13px;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.logo-img {
  height: 34px;
  width: auto;
}
.site-nav {
  display: flex;
  gap: 28px;
}
.site-nav a {
  font-family: var(--sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-2);
  transition: color 0.15s;
}
.site-nav a:hover {
  color: var(--silver-light);
}
.site-header .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-phone {
  font-family: var(--sub);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--silver-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.header-phone:hover {
  color: var(--teal);
}

/* ---- Location banner ---- */
.loc-banner {
  background: var(--charcoal-2);
  border-bottom: 1px solid var(--line);
}
.loc-banner-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 11px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--silver-2);
}
.loc-banner strong {
  color: var(--silver-light);
  font-weight: 600;
}
.loc-banner .pin {
  margin-right: 4px;
}
.loc-banner a {
  font-size: 13px;
}

/* ---- Hero ---- */
.hero {
  padding: 96px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(0, 213, 209, 0.08), transparent 70%),
    radial-gradient(40% 40% at 85% 30%, rgba(0, 123, 123, 0.06), transparent 70%);
}
.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}
.hero h1 {
  max-width: 19ch;
}
.hero-sub {
  max-width: 54ch;
  margin-top: 26px;
  font-size: 20px;
  color: var(--silver);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
  padding-bottom: 96px;
}
.hero {
  padding-bottom: 0;
}

/* ---- Trust strip ---- */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--charcoal-2);
}
.trust-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: center;
  justify-content: center;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sub);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-2);
}
.trust-chip svg {
  width: 17px;
  height: 17px;
  color: var(--teal);
  flex: none;
}

/* ---- Differentiators ---- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.diff-card {
  background: var(--charcoal-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 34px 30px 32px;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.diff-card:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.diff-ico {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-glow);
  border: 1px solid rgba(0, 213, 209, 0.25);
  margin-bottom: 24px;
}
.diff-ico svg {
  width: 23px;
  height: 23px;
  color: var(--teal);
}
.diff-card h3 {
  margin-bottom: 14px;
}
.diff-card p {
  font-size: 16px;
}

/* ---- Audience self-select (buyer / seller / agent) ---- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.aud-card {
  display: flex;
  flex-direction: column;
  background: var(--charcoal-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px 30px;
  color: var(--silver-light);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.aud-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.aud-card h3 {
  margin-bottom: 14px;
}
.aud-card p {
  font-size: 15.5px;
  margin-bottom: 24px;
}
.aud-go {
  margin-top: auto;
  font-family: var(--sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aud-card:hover .aud-go {
  color: var(--teal);
}
.aud-go .arr {
  transition: transform 0.18s ease;
}
.aud-card:hover .aud-go .arr {
  transform: translateX(3px);
}

/* ---- Brand pillars (values) + roofline brand pattern ---- */
.brand-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='104' viewBox='0 0 150 104'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.028)' stroke-width='1.3'%3E%3Cpath d='M14 66 L48 38 L82 66'/%3E%3Crect x='41' y='50' width='14' height='16'/%3E%3Cline x1='48' y1='50' x2='48' y2='66'/%3E%3Cline x1='41' y1='58' x2='55' y2='58'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.pillar-ico {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-glow);
  border: 1px solid rgba(0, 213, 209, 0.25);
}
.pillar-ico svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
}
.pillar h3 {
  font-size: 19px;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.pillar p {
  font-size: 15px;
  color: var(--silver-2);
}

/* ---- The report (honest anatomy) ---- */
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.report-text h2 {
  margin-bottom: 22px;
}
.report-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 30px 0 8px;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--silver);
}
.legend-row .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}
.legend-row .dot.safety {
  background: var(--danger);
}
.legend-row .dot.major {
  background: var(--warn);
}
.legend-row .dot.maint {
  background: var(--teal);
}
.legend-row b {
  color: var(--silver-light);
  font-weight: 600;
}

/* report card visual */
.report-card {
  background: var(--charcoal-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.report-card-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-2);
}
.sev-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sev-tag.safety {
  background: rgba(255, 107, 92, 0.14);
  color: var(--danger);
}
.sev-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.report-body {
  padding: 24px;
}
.report-body .ftitle {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.report-field {
  margin-bottom: 13px;
}
.report-field .k {
  display: block;
  font-family: var(--sub);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 3px;
}
.report-field .v {
  font-size: 14.5px;
  color: var(--silver);
  line-height: 1.5;
}

/* ---- Process ---- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.step {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
}
.step .marker {
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--teal);
}
.step h3 {
  font-size: 19px;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.step p {
  font-size: 15.5px;
}

/* ---- Packages ---- */
.zone-toggle {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 28px;
  background: var(--charcoal-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.zone-btn {
  font-family: var(--sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver-2);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.zone-btn:hover {
  color: var(--silver-light);
}
.zone-btn.active {
  background: var(--teal);
  color: #05201f;
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.pkg-grid-4 {
  grid-template-columns: repeat(2, 1fr);
}
.pkg {
  display: flex;
  flex-direction: column;
  background: var(--charcoal-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px 26px;
}
.pkg.featured {
  border-color: rgba(0, 213, 209, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 213, 209, 0.25),
    0 24px 60px rgba(0, 0, 0, 0.4);
}
.pkg-badge {
  align-self: flex-start;
  margin-bottom: 16px;
  font-family: var(--sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-glow);
  border: 1px solid rgba(0, 213, 209, 0.3);
  padding: 5px 10px;
  border-radius: 999px;
}
.pkg-name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 25px;
  margin-bottom: 6px;
}
.pkg-price {
  font-family: var(--display);
  font-size: 34px;
  color: var(--silver-light);
  letter-spacing: 0.01em;
}
.pkg-price .from {
  font-family: var(--sub);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-3);
  display: block;
  margin-bottom: 2px;
}
.pkg-tag {
  font-size: 14px;
  color: var(--silver-2);
  margin: 14px 0 20px;
  min-height: 42px;
}
.pkg-feats {
  list-style: none;
  margin: 0 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pkg-feats li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--silver);
  line-height: 1.45;
}
.pkg-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.pkg-feats li.prev {
  color: var(--silver-3);
}
.pkg-feats li.prev::before {
  border-color: var(--silver-3);
}
.pkg .btn {
  margin-top: auto;
  justify-content: center;
}
.pkg-note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--silver-2);
}
.pkg-note a {
  font-weight: 600;
}

.addon-bar {
  margin-top: 18px;
  padding: 24px 28px;
  background: var(--charcoal-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.addon-bar h3 {
  font-size: 19px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.addon-bar p {
  font-size: 14.5px;
  color: var(--silver-2);
  max-width: 62ch;
}

/* ---- Service areas ---- */
.areas-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.areas-intro {
  font-size: 17px;
  margin-bottom: 26px;
}
.areas-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.areas-directory {
  grid-template-columns: repeat(3, 1fr);
}
.areas-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--silver-light);
  font-size: 15px;
  font-weight: 500;
  background: var(--charcoal-3);
  transition: all 0.16s;
}
.areas-list a:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.areas-list .arr {
  color: var(--silver-3);
}
.areas-list a:hover .arr {
  color: var(--teal);
}
.state-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.state-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--charcoal-3);
}
.state-cell .abbr {
  font-family: var(--display);
  font-size: 22px;
  color: var(--teal);
}
.state-cell .name {
  font-size: 13px;
  color: var(--silver-2);
  margin-top: 2px;
}
.state-cell .count {
  font-family: var(--sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-3);
  text-align: right;
}
.state-cell.soon {
  border-style: dashed;
}

/* ---- FAQ ---- */
.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.faq-head p {
  font-size: 17px;
  margin: 18px 0 24px;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
/* The question is a <button> so it answers to Enter, Space and the Tab order.
   Everything here is undoing the native button chrome. */
.faq-item .q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 22px 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--silver-light);
}
.faq-item .q:hover {
  color: #fff;
}
.faq-item .plus {
  color: var(--teal);
  font-size: 22px;
  font-weight: 400;
  transition: transform 0.2s;
  font-family: var(--body);
}
.faq-item.open .plus {
  transform: rotate(45deg);
}
.faq-item .a {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.28s ease,
    padding 0.28s ease;
}
.faq-item .a p {
  font-size: 15.5px;
  color: var(--silver-2);
}
.faq-item.open .a {
  max-height: 320px;
  padding-bottom: 22px;
}

/* ---- Final CTA + contact form ---- */
.final-cta {
  border-top: 1px solid var(--line);
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(0, 213, 209, 0.07), transparent 70%);
}
.cta-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
  position: relative;
}
.cta-inner h2 {
  margin-bottom: 20px;
}
.cta-inner > p {
  font-size: 18px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  margin-top: 40px;
  text-align: left;
  background: var(--charcoal-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px;
}
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-2);
}
.contact-form .cf-full {
  margin-top: 16px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--body);
  font-size: 15px;
  color: var(--silver-light);
  background: var(--charcoal);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 12px 13px;
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  box-sizing: border-box;
  min-height: 46px;
  line-height: 1.25;
}

/* Safari renders a native menulist select at its own intrinsic height and squashes it
   flat as a column flex item, so drop the native control and draw the chevron. */
.contact-form select {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239C9C9C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.contact-form input,
.contact-form textarea {
  flex: 0 0 auto;
}
.contact-form textarea {
  min-height: 92px;
}
.contact-form textarea {
  resize: vertical;
}

.cf-hide {
  display: none !important;
}

/* FL Insurance Pack opt-in */
.cf-check {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 15px;
  background: var(--charcoal);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 400;
  color: var(--silver-2);
  cursor: pointer;
}
.cf-check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--teal);
  padding: 0;
}
.cf-check span {
  line-height: 1.45;
}

/* Reach-out preference */
.cf-radios {
  border: 0;
  padding: 0;
  margin: 16px 0 0;
  min-width: 0;
}
.cf-radios legend {
  padding: 0;
  margin-bottom: 9px;
  font-family: var(--sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-2);
}
.cf-radios label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  margin-right: 22px;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: var(--silver);
  cursor: pointer;
}
.cf-radios input {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--teal);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.contact-form .btn {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
}
.cf-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--silver-3);
  text-align: center;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--charcoal-2);
  border-top: 1px solid var(--line);
  padding: 72px 0 40px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-cols h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--silver-light);
  margin-bottom: 18px;
  font-family: var(--sub);
  font-weight: 700;
}
.footer-cols a {
  display: block;
  color: var(--silver-2);
  font-size: 14.5px;
  margin-bottom: 11px;
  transition: color 0.15s;
}
.footer-cols a:hover {
  color: var(--teal);
}
.footer-tagline {
  font-size: 14.5px;
  color: var(--silver-2);
  margin: 18px 0 16px;
  max-width: 34ch;
}
.footer-license {
  font-size: 13px;
  color: var(--silver-3);
  line-height: 1.7;
}
.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--silver-3);
}
.footer-certs {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-certs span {
  font-family: var(--sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Locations picker page ---- */
.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.loc-card {
  display: flex;
  flex-direction: column;
  background: var(--charcoal-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 24px;
  transition: all 0.18s;
}
.loc-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.loc-card-city {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 26px;
  color: var(--silver-light);
}
.loc-card-state {
  font-family: var(--sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-3);
  margin: 8px 0 18px;
}
.loc-card-meta {
  font-size: 14px;
  color: var(--silver-2);
  margin-bottom: 22px;
}
.loc-card-go {
  margin-top: auto;
  font-family: var(--sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .diff-grid,
  .process-grid,
  .audience-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pillars {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .pkg-grid,
  .pkg-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .report-grid,
  .areas-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .loc-grid,
  .areas-directory {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  section {
    padding: 72px 0;
  }
  body {
    font-size: 16px;
  }
  .cf-grid {
    grid-template-columns: 1fr;
  }
  .pkg-grid,
  .pkg-grid-4,
  .loc-grid,
  .areas-list,
  .state-grid {
    grid-template-columns: 1fr;
  }
  .footer-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
  .footer-base {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-ctas {
    padding-bottom: 64px;
  }
}

@media (max-width: 560px) {
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* SMS consent checkbox on the booking form. Carriers require an explicit
   affirmative opt-in control, not just disclosure text (TCR opt-in rejection). */
/* The consent copy is a sentence, not a field label, so it has to shed the
   uppercase and the tracking it inherits from .contact-form label. Five lines
   of tracked caps is unreadable, which is the opposite of informed consent. */
.contact-form .cf-consent {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: #9c9c9c;
  margin: 8px 0 2px;
}
.contact-form .cf-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: #00d5d1;
}
.contact-form .cf-consent a {
  color: #00d5d1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Skip link ---- */
.skip-link {
  /* fixed, not absolute: absolute anchors it to the document, so tabbing after
     any scroll focuses a control sitting above the viewport. */
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--teal);
  color: #05201f;
  font-family: var(--sub);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 3px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ---- Focus ----
   Every interactive element gets the same ring. Without this the only focus
   styling on the site was on form fields, so a keyboard user navigating the
   nav, the cards or the footer had nothing but the browser default on a
   near-black background. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}
.aud-card:focus-visible,
.loc-card:focus-visible,
.pkg-card:focus-visible {
  outline-offset: 2px;
}
/* Anchors land under the sticky header otherwise. */
section[id],
[id].faq-item {
  scroll-margin-top: 90px;
}

/* ---- Mobile nav ---- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 9px 10px;
  cursor: pointer;
  color: var(--silver-light);
  touch-action: manipulation;
}
.nav-toggle:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.nav-toggle-bars {
  display: block;
  width: 18px;
}
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}
.nav-toggle-bars span + span {
  margin-top: 4px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  padding: 8px 28px 20px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav a {
  display: block;
  padding: 14px 0;
  font-family: var(--sub);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-2);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover {
  color: var(--silver-light);
}
.mobile-nav .btn {
  display: inline-flex;
  margin-top: 18px;
  border-bottom: 0;
  color: #05201f;
}

@media (max-width: 940px) {
  .site-nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .mobile-nav:not([hidden]) {
    display: block;
  }
  body.nav-open {
    overflow: hidden;
  }
  /* Flex was crushing the wordmark to fit the CTA beside it. */
  .site-header-inner > a:first-child {
    flex: 0 0 auto;
  }
  .site-header-inner {
    gap: 16px;
  }
}
@media (max-width: 620px) {
  /* The header CTA duplicates the one in the panel and the one in the hero,
     and it is what squeezes the logo on a phone. */
  .site-header .right .btn {
    display: none;
  }
  .site-header-inner,
  .mobile-nav {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---- Touch ---- */
.btn,
.nav-toggle,
.zone-btn,
.faq-item .q {
  touch-action: manipulation;
}
html {
  -webkit-tap-highlight-color: rgba(0, 213, 209, 0.18);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}