/* Self-hosted fonts, latin subset, byte-identical to what Google was serving.
   Going via fonts.googleapis.com cost a blocking round trip for the CSS plus a
   second one to fonts.gstatic.com for the files, and text could not paint until
   both landed. Regenerate with the localizer, not by hand. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/outfit-var-latin.woff2') format('woff2');
}

/* =========================================================
   CATAWBA COMFORT HEATING & AIR — shared stylesheet

   Mobile-first: everything outside the media queries is the phone view.
   The palette, radii and shadows are lifted unchanged from the approved
   single-page homepage so the multi-page build cannot drift off-brand.
     navy   #0D2440   deep    #16395C   card-on-navy #123253
     orange #D93E18   hover   #B83414   dark         #B33A1B   (AA-checked against white)
     page   #F4F9FD   tint    #EFF6FC   line         #D5E4F0
     body   #5B7288   quote   #33475C   sky          #9CC4E4 / #B8D2E8
   ========================================================= */

html, body { margin: 0; padding: 0; background: #EAF3FA; }
body { font-family: 'Outfit', sans-serif; color: #0D2440; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: #0D2440; text-decoration: none; }
img { display: block; max-width: 100%; }
input::placeholder, textarea::placeholder { color: #8FA6BC; }

.page { background: #F4F9FD; min-height: 100vh; }
.wrap { max-width: 640px; margin: 0 auto; }

/* Section rhythm. `band` is the white alternate, `tint` the pale blue one. */
.section-pad { padding: 34px 20px; }
.band-pad { padding: 20px; }
.bg-white { background: #FFFFFF; }
.bg-tint { background: #F4F9FD; }
.bg-navy { background: #0D2440; color: #FFFFFF; }

h2.sec-h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; text-wrap: pretty; }
h3.sub-h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.2px; }
p.sec-sub { margin: 0 0 18px; font-size: 14.5px; color: #5B7288; line-height: 1.5; text-wrap: pretty; }
.bg-navy h2.sec-h2, .bg-navy h3.sub-h3 { color: #FFFFFF; }
.bg-navy p.sec-sub { color: #B8D2E8; }

/* Small uppercase eyebrow above a section heading */
.kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
  background: #E4EFF8; color: #16395C; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.kicker--onnavy { background: #1C4467; color: #9CC4E4; }
.kicker--onorange { background: rgba(255,255,255,0.18); color: #FFFFFF; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; padding: 14px 24px;
  border-radius: 999px; border: none; cursor: pointer; text-align: center;
  transition: background .15s ease, color .15s ease; white-space: nowrap; }
.btn--block { display: flex; width: 100%; }
.btn--orange { background: #D93E18; color: #FFFFFF; box-shadow: 0 6px 16px rgba(217,62,24,0.35); }
.btn--orange:hover { background: #B83414; color: #FFFFFF; }
.btn--navy { background: #0D2440; color: #FFFFFF; box-shadow: 0 6px 16px rgba(13,36,64,0.25); }
.btn--navy:hover { background: #16395C; color: #FFFFFF; }
.btn--ghost { background: transparent; color: #0D2440; border: 1.5px solid #C6DCEE; }
.btn--ghost:hover { background: #0D2440; color: #FFFFFF; border-color: #0D2440; }
.btn--white { background: #FFFFFF; color: #B33A1B; font-weight: 800; }
.btn--white:hover { background: #FFF1EB; color: #B33A1B; }
.btn--onorange { background: rgba(0,0,0,0.14); color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.70); }
.btn--onorange:hover { background: rgba(0,0,0,0.24); color: #FFFFFF; }

/* ---------- Closing CTA band ---------- */
.cta-wrap { padding: 0 20px 34px; }
.cta-band { background: #D93E18; border-radius: 16px; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: 0 12px 28px rgba(217,62,24,0.3); }
.cta-h { color: #FFFFFF; font-size: 24px; font-weight: 800; line-height: 1.2;
  letter-spacing: -0.3px; text-wrap: pretty; }
.cta-sub { color: #FFFFFF; font-size: 14.5px; line-height: 1.5; margin-top: 10px; text-wrap: pretty; }
.cta-actions { display: flex; flex-direction: column; gap: 10px; }
.cta-actions .btn { width: 100%; }

/* ---------- Header ---------- */
.emergency-banner { background: #FDEDE7; color: #B33A1B; font-size: 13px; font-weight: 600;
  text-align: center; padding: 8px 16px; line-height: 1.4; }
.emergency-banner a { color: #B33A1B; font-weight: 800; text-decoration: underline; }

.site-header { position: sticky; top: 0; z-index: 50; background: #0D2440; padding: 12px 16px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-lockup { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-weight: 800; font-size: 17px; color: #FFFFFF; letter-spacing: -0.2px; line-height: 1.1; }
.brand-sub { font-size: 11px; font-weight: 600; color: #9CC4E4; letter-spacing: 1.2px; text-transform: uppercase; }
.header-right { display: flex; align-items: center; gap: 10px; }
.call-pill { display: flex; align-items: center; gap: 8px; background: #D93E18; color: #FFFFFF;
  font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(217,62,24,0.35); transition: background .15s ease; }
.call-pill:hover { background: #B83414; color: #FFFFFF; }
.call-pill .num { display: none; }

/* The hamburger owns mobile; the inline link row owns desktop. Each is hidden
   at the other's breakpoint rather than the two sharing one element. */
.nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 8px; background: none; border: 0; cursor: pointer; flex: none; }
.nav-toggle span { display: block; height: 2px; width: 100%; background: #FFFFFF; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links { display: none; }
/* The open panel clears the fixed action bar itself, so its last item is never
   parked underneath one on a short page. */
.nav-panel { display: none; background: #0D2440; border-top: 1px solid #1C4467;
  padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.nav-panel.open { display: block; }
/* The list carries its own reset via a class so a future blanket rule cannot
   strip markers off genuine content lists elsewhere. */
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-panel a { display: block; padding: 14px 20px; border-bottom: 1px solid #16395C;
  font-size: 16px; font-weight: 700; color: #FFFFFF; }
.nav-panel a:hover, .nav-panel a[aria-current="page"] { color: #FFB59D; }
.nav-panel .sub a { padding-left: 36px; font-size: 14.5px; font-weight: 500; color: #B8D2E8; }
.nav-panel .sub a:hover { color: #FFB59D; }

/* ---------- Homepage hero ---------- */
.hero { background: linear-gradient(180deg, #0D2440 0%, #16395C 100%); padding: 26px 20px 32px; }
.hero-grid { display: flex; flex-direction: column; gap: 20px; }
.hero-h1 { margin: 0 0 12px; color: #FFFFFF; font-size: 31px; line-height: 1.15; font-weight: 800;
  letter-spacing: -0.5px; text-wrap: pretty; }
.hero-sub { margin: 0; color: #B8D2E8; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.hero-media img { height: 180px; }

/* ---------- Interior page hero ---------- */
.page-hero { background: linear-gradient(180deg, #0D2440 0%, #16395C 100%); padding: 26px 20px 32px; }
.page-hero h1 { margin: 0 0 12px; color: #FFFFFF; font-size: 29px; line-height: 1.15;
  font-weight: 800; letter-spacing: -0.5px; text-wrap: pretty; }
.page-hero p { margin: 0; color: #B8D2E8; font-size: 15.5px; line-height: 1.55; max-width: 54ch; text-wrap: pretty; }

/* Breadcrumbs own their own list reset for the same reason .nav-list does. */
.crumbs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 7px; font-size: 12px; color: #7FA6C8; }
.crumbs a { color: #9CC4E4; }
.crumbs a:hover { color: #FFFFFF; }
.crumbs .sep { color: #4E7396; }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { background: #FFFFFF; border-radius: 16px; padding: 20px;
  box-shadow: 0 4px 14px rgba(13,36,64,0.07); display: flex; flex-direction: column; gap: 7px; }
.card h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.card p { margin: 0; font-size: 14px; line-height: 1.5; color: #5B7288; }
.card .num { font-size: 12px; font-weight: 800; color: #D93E18; letter-spacing: 1.2px; }
.card .more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: #D93E18; }
a.card { transition: box-shadow .15s ease, transform .15s ease; }
a.card:hover { box-shadow: 0 10px 24px rgba(13,36,64,0.13); transform: translateY(-2px); }
.card--tint { background: #EFF6FC; box-shadow: none; }
.card--media { padding: 0; overflow: hidden; }
.card--media img { width: 100%; height: 150px; object-fit: cover; flex: none; }
/* flex:1 so the body fills a stretched grid cell and the `.more` link, which
   carries margin-top:auto, lands on the card's baseline rather than floating
   directly under copy of whatever length that card happened to get. */
.card--media .card-body { flex: 1; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.card--navy { background: #123253; box-shadow: none; }
.card--navy h3 { color: #FFFFFF; }
.card--navy p { color: #9CC4E4; }

/* Checklist rows */
.checks { display: flex; flex-direction: column; gap: 11px; }
.check-row { display: flex; gap: 11px; align-items: flex-start; }
.check-row .tick { width: 22px; height: 22px; border-radius: 50%; background: #D93E18; color: #FFFFFF;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.check-row .txt { font-size: 14.5px; line-height: 1.5; color: #33475C; }
.bg-navy .check-row .txt { color: #DCEAF6; }

/* Numbered process steps */
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step .n { width: 36px; height: 36px; border-radius: 50%; background: #0D2440; color: #FFFFFF;
  font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.step h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; }
.step p { margin: 0; font-size: 14px; line-height: 1.5; color: #5B7288; }

/* Chips. padding-inline-end so flex wraps a hair early and no chip ever sits
   flush to the container edge at an exact-fit width. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-inline-end: 12px; }
.chip { background: #EFF6FC; color: #16395C; font-size: 13.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 999px; max-width: 100%; }
a.chip:hover { background: #16395C; color: #FFFFFF; }
.chip--onnavy { background: #1C4467; color: #DCEAF6; }
a.chip--onnavy:hover { background: #D93E18; color: #FFFFFF; }

/* ---------- Reviews ---------- */
.review { background: #FFFFFF; border-radius: 16px; padding: 18px; display: flex;
  flex-direction: column; gap: 10px; box-shadow: 0 4px 14px rgba(13,36,64,0.07); }
.review .stars { color: #F5A623; font-size: 16px; letter-spacing: 2px; }
.review .quote { font-size: 14.5px; color: #33475C; line-height: 1.55; }
.review .who { margin-top: auto; padding-top: 2px; font-size: 13px; font-weight: 700; color: #0D2440; }
.review .who span { font-weight: 500; color: #5B7288; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #FFFFFF; border-radius: 14px; box-shadow: 0 4px 14px rgba(13,36,64,0.06); overflow: hidden; }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: none; border: none; padding: 16px 18px; cursor: pointer; text-align: left;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: #0D2440; }
.faq-q:hover { color: #16395C; }
.faq-q .icon { color: #D93E18; font-size: 18px; font-weight: 600; flex: none; }
.faq-a { padding: 0 18px 16px; font-size: 14px; color: #5B7288; line-height: 1.55; }
.faq-item:not(.open) .faq-a { display: none; }

/* ---------- Lead form ---------- */
.lead-card { background: #FFFFFF; border-radius: 16px; padding: 22px 20px;
  box-shadow: 0 12px 32px rgba(8,26,48,0.2); display: flex; flex-direction: column; gap: 14px; }
.lead-card .lead-h { font-size: 19px; font-weight: 800; color: #0D2440; }
.lead-card .lead-sub { font-size: 13.5px; color: #5B7288; margin-top: 3px; }
.field { width: 100%; font-family: 'Outfit', sans-serif; font-size: 16px; color: #0D2440;
  padding: 13px 14px; border: 1.5px solid #D5E4F0; border-radius: 12px; background: #F7FBFE; outline: none; }
.field:focus { border-color: #2E6DA6; }
.field[aria-invalid="true"] { border-color: #B3261E; }
/* Error text carries a marker glyph so it never depends on colour alone. */
.field-error { font-size: 12px; line-height: 1.4; color: #B3261E; margin-top: -4px; }
.field-error::before { content: "\25B2  "; }
.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: #5B7288;
  line-height: 1.45; cursor: pointer; }
.consent input { margin-top: 3px; accent-color: #D93E18; flex-shrink: 0; }
/* An unticked required box needs a visible marker of its own — the error text
   below it sits at 12px and is easy to miss next to two paragraphs of fine
   print. Outline rather than a layout-affecting border, so nothing shifts. */
.consent input[aria-invalid="true"] { outline: 2px solid #B3261E; outline-offset: 2px; }
/* Marks the marketing box as a real opt-in. Sits OUTSIDE the carrier-mandated
   sentence, which stays verbatim. */
.consent-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  background: #E4EFF8; color: #16395C; font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; vertical-align: 1px; }
/* Honeypot: display:none so password managers will not autofill it. An
   off-screen but visible box gets filled by 1Password and silently killed
   every real submission. Some bots skip hidden fields, which is why a filled
   box now only flags the lead instead of dropping it. */
.hp { display: none; }
.lead-state { display: none; padding: 18px 4px; text-align: center; }
.lead-state .badge { width: 48px; height: 48px; border-radius: 50%; font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.lead-state .badge--ok { background: #E7F5EC; color: #1F7A45; }
.lead-state .badge--bad { background: #FDEDE7; color: #B33A1B; }
.lead-state .title { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.lead-state .body { font-size: 14px; color: #5B7288; line-height: 1.5; }
.lead-state .detail { font-size: 11px; color: #8FA6BC; margin-top: 10px; font-family: monospace; }

/* ---------- Detail / NAP block ---------- */
.nap { background: #FFFFFF; border-radius: 16px; padding: 22px; box-shadow: 0 4px 14px rgba(13,36,64,0.07); }
.nap dl { margin: 0; }
.nap dt { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: #D93E18; margin-bottom: 5px; }
.nap dd { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #33475C; }
.nap dd:last-child { margin-bottom: 0; }
.nap a { color: #16395C; font-weight: 600; }

/* ---------- Long-form prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.2px; margin: 30px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; line-height: 1.65; color: #33475C; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* ---------- Media frames ---------- */
.media { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(13,36,64,0.12); }
.media img { width: 100%; height: 220px; object-fit: cover; }

/* ---------- Sticky mobile action bar ---------- */
/* The footer, not the page wrapper, reserves the room for this bar — putting it
   on the wrapper reserves a strip in the PAGE colour, which shows as a seam of
   the wrong shade below the footer. */
.sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; }
.sticky-bar-inner { width: 100%; max-width: 640px; display: flex; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid #DCE9F3; }
.sticky-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 800; padding: 14px 0; border-radius: 999px; }
.sticky-bar .call { background: #D93E18; color: #FFFFFF; box-shadow: 0 4px 12px rgba(217,62,24,0.3); }
.sticky-bar .call:hover { background: #B83414; }
.sticky-bar .text { background: #0D2440; color: #FFFFFF; }
.sticky-bar .text:hover { background: #16395C; }

.site-footer { background: #0D2440; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.footer-links { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 2; }
.footer-links a { color: #B8D2E8; }
.footer-links a:hover { color: #FFFFFF; }
.footer-head { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #FFB59D; margin-bottom: 8px; }

:focus-visible { outline: 3px solid #D93E18; outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: 0; padding: 12px 18px; background: #D93E18; color: #FFFFFF; font-weight: 700; }

/* =========================================================
   TABLET PORTRAIT (600–899px) — widen the column, 2-up grids
   ========================================================= */
@media (min-width: 600px) and (max-width: 899px) {
  .wrap { max-width: 720px; }
  .sticky-bar-inner { max-width: 720px; }
  .section-pad { padding: 44px 32px; }
  .band-pad { padding: 26px 32px; }
  .page-hero { padding: 40px 32px 46px; }
  .page-hero h1 { font-size: 38px; line-height: 1.1; }
  .page-hero p { font-size: 17px; }
  h2.sec-h2 { font-size: 28px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
  .hero { padding: 42px 32px 48px; }
  .hero-h1 { font-size: 40px; line-height: 1.1; }
  .hero-sub { font-size: 17px; }
  .hero-media img { height: 300px; }
  .club-perks { grid-template-columns: repeat(3, 1fr); }

  /* Copy left, buttons right — full-width buttons across a 1160px band read as
     an unfinished mobile layout that never got its desktop pass. */
  .cta-wrap { padding: 0 40px 56px; }
  .cta-band { flex-direction: row; align-items: center; justify-content: space-between;
    gap: 40px; padding: 40px 44px; }
  .cta-h { font-size: 30px; }
  .cta-actions { flex-direction: row; flex: none; }
  .cta-actions .btn { width: auto; }
}

/* =========================================================
   DESKTOP (900px+)
   ========================================================= */
@media (min-width: 900px) {
  .wrap { max-width: 1160px; }
  .page { padding-bottom: 0; }
  .sticky-bar { display: none; }
  .site-footer { padding-bottom: 0; }

  .site-header { padding: 16px 40px; }
  .header-inner { max-width: 1160px; margin: 0 auto; }
  .brand-name { font-size: 20px; }
  .emergency-banner { font-size: 14px; padding: 10px 40px; }
  .call-pill .num { display: inline; }

  /* Nav swaps: hamburger and panel out, inline links in */
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }
  .nav-links { display: flex; align-items: center; gap: 24px; }
  .nav-links a { font-size: 15px; font-weight: 600; color: #DCEAF6; white-space: nowrap; }
  .nav-links a:hover { color: #FFFFFF; }
  .nav-links a[aria-current="page"] { color: #FFB59D; font-weight: 700; }
  .header-right { gap: 26px; }

  .section-pad { padding: 68px 40px; }
  .band-pad { padding: 30px 40px; }
  .page-hero { padding: 56px 40px 62px; }
  .page-hero h1 { font-size: 46px; line-height: 1.08; }
  .page-hero p { font-size: 18px; }

  h2.sec-h2 { font-size: 31px; }
  h3.sub-h3 { font-size: 22px; }
  p.sec-sub { font-size: 16px; }

  .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
  .split--center { align-items: center; }
  .split--wide-left { grid-template-columns: 1.2fr 0.8fr; }
  .steps { gap: 22px; }
  .card--media img { height: 170px; }
  .media img { height: 340px; }
  .prose { font-size: 16px; }
  .measure { max-width: 60ch; }

  /* Hero: copy over image on the left, the quote card on the right */
  .hero { padding: 56px 40px 64px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 22px; align-items: start; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-media { grid-column: 1; grid-row: 2; }
  .hero-media img { height: 340px; }
  .hero-grid .lead-card { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .hero-h1 { font-size: 46px; line-height: 1.08; }
  .hero-sub { font-size: 18px; }

  .club-perks { grid-template-columns: repeat(3, 1fr); }

  /* Copy left, buttons right — full-width buttons across a 1160px band read as
     an unfinished mobile layout that never got its desktop pass. */
  .cta-wrap { padding: 0 40px 56px; }
  .cta-band { flex-direction: row; align-items: center; justify-content: space-between;
    gap: 40px; padding: 40px 44px; }
  .cta-h { font-size: 30px; }
  .cta-actions { flex-direction: row; flex: none; }
  .cta-actions .btn { width: auto; }
  .faq-list { max-width: 860px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .center-band { text-align: center; }
  .center-band .kicker, .center-band .btn, .center-band .btn-stack { margin-left: auto; margin-right: auto; }
  .center-band p.sec-sub { margin-left: auto; margin-right: auto; }
}