/* ==========================================================================
   RemodeLA Builders — Design System
   Palette carried over from the existing RemodeLA site (gold + deep navy).
   Layout & section structure adapted from the Rampart reference theme.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --gold:        #D6A046;
  --gold-bright: #D7A52E;
  --gold-dark:   #B8863A;
  --gold-text:   #946722;   /* AA-compliant gold for text/links on light surfaces */
  --gold-soft:   #FBF3E4;

  /* Dark surfaces */
  --ink:      #121B2B;
  --navy:     #192437;
  --navy-2:   #1E293B;

  /* Text */
  --slate:  #334155;
  --muted:  #69727D;

  /* Light surfaces */
  --surface: #F9FAFB;
  --border:  #E9EEF2;
  --white:   #FFFFFF;

  /* Type */
  --font-head: 'Albert Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Layout */
  /* Content column = 70% of the viewport, so the side margins grow with the screen
     instead of being a fixed cap. The 1180px floor stops it going narrower than the
     old design on a 13" laptop; below that it simply runs full width with gutters. */
  --container: min(100%, max(1180px, 70%));
  --gutter: 24px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 2px 10px rgba(18, 27, 43, .06);
  --shadow-md: 0 10px 34px rgba(18, 27, 43, .09);
  --shadow-lg: 0 18px 55px rgba(18, 27, 43, .13);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--slate);
  background: var(--white);
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.2;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.0625rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-text); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold); }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink);
  padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(64px, 8vw, 110px) 0; }
.section--tight { padding: clamp(48px, 5vw, 70px) 0; }
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: rgba(255,255,255,.8); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--white); }

.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mw-720 { max-width: 720px; }
.mb-0 { margin-bottom: 0 !important; }

/* ---------- 4. Section headings ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head);
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--gold); flex: none;
}
.eyebrow--center { justify-content: center; }
/* Eyebrows sitting on any dark surface use the brighter gold (7.4:1 on ink) */
.section--ink .eyebrow,
.portfolio .eyebrow,
.testimonial-panel .eyebrow,
.hero .eyebrow { color: var(--gold); }

.section-head { margin-bottom: clamp(36px, 4vw, 56px); }
.section-head p { color: var(--muted); }
.section--ink .section-head p { color: rgba(255,255,255,.72); }

.lead { font-size: 1.0625rem; color: var(--muted); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: .9375rem;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .28s var(--ease);
  white-space: nowrap;
  line-height: 1.2;
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .28s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-text); border-color: var(--gold-text); color: var(--white); }

.btn--dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--dark:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.btn--white { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--white:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn--sm { padding: 10px 20px; font-size: .875rem; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- 6. Header ---------- */
.topbar {
  background: var(--gold);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 500;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  min-height: 44px; padding-block: 6px;
}
.topbar__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.topbar__list li { display: flex; align-items: center; gap: 8px; }
.topbar__list svg { width: 14px; height: 14px; flex: none; }
.topbar a { color: var(--ink); font-weight: 600; }
.topbar a:hover { color: var(--ink); text-decoration: underline; }
.topbar__social { display: flex; align-items: center; gap: 16px; }
/* 24px is the WCAG 2.2 minimum target. The icon stays 15px, the hit area
   around it does not. */
.topbar__social a { display: grid; place-items: center; min-width: 26px; min-height: 26px; }
.topbar a[href^="tel:"], .topbar a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 26px; }
.topbar__social svg { width: 15px; height: 15px; }

.site-header { background: var(--ink); position: relative; z-index: 60; }
.site-header--overlay {
  position: absolute; inset: 0 0 auto; background: transparent;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 92px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__mark { height: 38px; width: auto; flex: none; }
.brand__lockup { display: flex; flex-direction: column; }
.brand__word { height: 22px; width: auto; display: block; }
.brand__sub {
  display: block; font-family: var(--font-body); font-size: .5625rem;
  letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,.55); margin-top: 5px;
}

.nav__menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__menu > li { position: relative; }
.nav__menu > li > a {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: .9375rem;
  color: rgba(255,255,255,.88);
  padding: 12px 15px;
}
.nav__menu > li > a:hover,
.nav__menu > li.is-current > a { color: var(--gold); }
.nav__menu > li > a .caret { width: 10px; height: 10px; opacity: .7; transition: transform .25s var(--ease); }
.nav__menu > li:hover > a .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: 100%; left: 0;
  min-width: 258px; margin: 0; padding: 10px 0;
  list-style: none; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--gold);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .26s var(--ease);
}
.nav__menu > li:hover > .submenu,
.nav__menu > li:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: block; padding: 9px 22px;
  font-size: .875rem; font-weight: 500; color: var(--slate);
}
.submenu a:hover { color: var(--gold-text); background: var(--gold-soft); padding-left: 27px; }

/* Two-column mega-menu — 11 services no longer fit a single column.
   The parent li goes static so the panel centres on the header and can never
   run off the right edge on a 1024px laptop. */
.nav__menu > li.has-mega { position: static; }
.submenu--mega {
  display: grid; grid-template-columns: 1fr 1fr; min-width: 524px; padding: 14px 0 6px;
  left: 50%; transform: translate(-50%, 12px);
}
.nav__menu > li:hover > .submenu--mega,
.nav__menu > li:focus-within > .submenu--mega { transform: translate(-50%, 0); }
.submenu--mega ul { list-style: none; margin: 0; padding: 0; }
.submenu--mega > .submenu__col + .submenu__col { border-left: 1px solid var(--border); }
.submenu__head {
  display: block; padding: 2px 22px 8px;
  font-family: var(--font-head); font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.submenu__all {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 4px;
  border-top: 1px solid var(--border);
}
.submenu__all a { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gold-text); }
.submenu__all a svg { width: 14px; height: 14px; flex: none; }

.nav__cta { display: flex; align-items: center; gap: 14px; flex: none; }

/* Compact call button — mobile only, keeps the phone one tap away */
.nav__call {
  display: none; align-items: center; gap: 8px;
  background: var(--gold); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: .875rem;
  padding: 11px 15px; border-radius: var(--radius);
}
.nav__call svg { width: 15px; height: 15px; flex: none; }
.nav__call:hover { background: var(--white); color: var(--ink); }

.nav__toggle {
  display: none; width: 46px; height: 46px;
  background: transparent; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius); cursor: pointer;
  padding: 0; place-items: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ''; display: block; width: 20px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 480px at 12% 18%, rgba(214,160,70,.14), transparent 62%),
    linear-gradient(180deg, #16223a 0%, var(--ink) 100%);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
  min-height: 620px;
  padding-block: clamp(60px, 6vw, 92px);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: .8125rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.hero__eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--gold); }
.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__text { color: rgba(255,255,255,.76); font-size: 1.0625rem; max-width: 540px; margin-bottom: 30px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

.hero__trust {
  display: flex; gap: 34px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.13);
}
.hero__trust div { line-height: 1.35; }
.hero__trust strong {
  display: block; font-family: var(--font-head); font-size: 1.5rem;
  font-weight: 800; color: var(--gold);
}
.hero__trust span { font-size: .8125rem; color: rgba(255,255,255,.6); }

.hero__media { position: relative; }
.hero__media img,
.hero__media video {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-lg);
  border: 6px solid var(--gold);
  display: block;
}
/* The still is the LCP element and paints immediately. The video fades in over
   it once it has buffered, and never loads at all if the visitor has asked for
   reduced motion or the file fails. */
.hero__media .hero__video {
  /* Sits inside the still's gold border, so its painted box is always smaller
     than the still's. That keeps the still as the LCP element even when the
     video arrives late on a slow connection. */
  position: absolute; left: 6px; top: 6px;
  width: calc(100% - 12px); height: auto; aspect-ratio: 4/3;
  border: 0; border-radius: 5px;
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.hero__media .hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__media .hero__video { display: none; } }
/* No hero video on phones. Measured on a throttled mobile profile, the video
   was overtaking the still image as the LCP element, which makes the headline
   metric depend on a 590KB file that loads after everything else. It is also
   590KB of someone's mobile data for a decorative loop. */
@media (max-width: 720px) { .hero__media .hero__video { display: none; } }
.hero__badge {
  position: absolute; left: -22px; bottom: 30px;
  background: var(--gold); color: var(--ink);
  padding: 18px 24px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-width: 220px;
}
.hero__badge strong {
  display: block; font-family: var(--font-head); font-size: 1.75rem; font-weight: 800; line-height: 1;
}
.hero__badge span { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- 8. Page banner ---------- */
.page-banner {
  position: relative;
  background: var(--ink);
  padding: clamp(70px, 9vw, 130px) 0;
  text-align: center;
  overflow: hidden;
}
.page-banner::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(760px 340px at 50% 0%, rgba(214,160,70,.16), transparent 65%),
    linear-gradient(180deg, #16223a, var(--ink));
}
.page-banner__inner { position: relative; }
.page-banner h1 { color: var(--white); margin-bottom: 12px; }
.breadcrumb {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding: 0;
  font-size: .9375rem; font-weight: 500;
}
.breadcrumb a { color: rgba(255,255,255,.82); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb li[aria-current] { color: var(--gold); }
.breadcrumb svg { width: 12px; height: 12px; color: rgba(255,255,255,.45); }

/* ---------- 9. About block ---------- */
.about__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 72px); align-items: center;
}
.about__media { position: relative; padding-bottom: 54px; padding-right: 54px;
  /* The square inset is pushed below the tall image, so reserve that space as
     margin rather than padding. Padding would drag the years badge down with it,
     since the badge is pinned to the padding box. Percentage margin resolves
     against width, so the reservation scales with the column. */
  margin-bottom: 15%; }
.about__media > img:first-child {
  width: 82%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg);
  border: 6px solid var(--gold);
}
.about__media .about__media-sm {
  position: absolute; right: 0; bottom: 54px;
  width: 52%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius-lg);
  /* Gold frame to match the hero, with a white outline outside it so the square
     still reads as a separate object in front of the tall image rather than a
     hole cut into it. Without the white gap, gold meets gold on the overlap. */
  border: 6px solid var(--gold);
  outline: 5px solid var(--white);
  box-shadow: var(--shadow-md);
  /* Dropped below the tall image so it reads as a separate object sitting in
     front of it rather than a panel notched into its corner. A percentage on
     translateY resolves against the element's own height, so the offset stays
     proportional at every screen width. */
  transform: translateY(35%);
}
.about__exp {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  background: var(--gold); color: var(--ink);
  padding: 16px 24px; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.about__exp strong { font-family: var(--font-head); font-size: 2.25rem; font-weight: 800; line-height: 1; }
.about__exp span { font-size: .75rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; }

.checklist {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  list-style: none; margin: 22px 0 28px; padding: 0;
}
.checklist li {
  position: relative; padding-left: 28px;
  font-size: .9375rem; font-weight: 500; color: var(--slate);
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B8863A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section--ink .checklist li { color: rgba(255,255,255,.8); }

/* ---------- 10. Service cards ---------- */
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card__icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-text);
  display: grid; place-items: center; margin-bottom: 24px;
  transition: background .32s var(--ease), color .32s var(--ease);
}
.service-card__icon svg { width: 32px; height: 32px; }
.service-card:hover .service-card__icon { background: var(--gold); color: var(--ink); }
.service-card h3 { font-size: 1.3125rem; margin-bottom: 10px; }
.service-card h3 a { color: inherit; }
.service-card:hover h3 a { color: var(--gold-text); }
.service-card p { color: var(--muted); font-size: .9375rem; margin-bottom: 18px; }
.service-card__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: .875rem;
  color: var(--gold-text);
}
.service-card__link svg { width: 14px; height: 14px; transition: transform .28s var(--ease); }
.service-card__link:hover svg { transform: translateX(4px); }

/* ---------- 11. Gold signup bar ---------- */
.signup {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 55%, var(--gold-dark) 100%);
  padding: clamp(40px, 5vw, 62px) 0;
  position: relative; overflow: hidden;
}
.signup::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 22px, transparent 22px 44px);
  pointer-events: none;
}
.signup__inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px; align-items: center;
}
.signup h2 { color: var(--ink); margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
.signup__form { display: flex; gap: 10px; background: var(--white); padding: 8px; border-radius: var(--radius); }
.signup__form input {
  flex: 1; border: 0; background: transparent; padding: 12px 16px;
  font-family: var(--font-body); font-size: .9375rem; color: var(--slate); min-width: 0;
}
.signup__form input:focus { outline: none; }

/* ---------- 12. Portfolio ---------- */
.portfolio { background: var(--ink); padding-bottom: 0; }
.portfolio__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.portfolio__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 46px var(--gutter) 70px;
  max-width: var(--container); margin-inline: auto;
  scrollbar-width: none;
}
.portfolio__track::-webkit-scrollbar { display: none; }
.portfolio-card { scroll-snap-align: start; }
.portfolio-card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 18px;
}
.portfolio-card h3 { font-size: 1.125rem; color: var(--white); margin-bottom: 2px; }
.portfolio-card h3 a { color: inherit; }
.portfolio-card h3 a:hover { color: var(--gold); }
.portfolio-card span { font-size: .8125rem; color: var(--gold); font-weight: 600; }

.carousel-nav { display: flex; gap: 10px; }
.carousel-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: transparent;
  color: var(--white); display: grid; place-items: center; cursor: pointer;
  transition: all .26s var(--ease);
}
.carousel-nav button:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.carousel-nav button svg { width: 16px; height: 16px; }
.carousel-nav--light button { border-color: var(--border); color: var(--ink); }

/* ---------- 13. Contact form block ---------- */
.contact-block { background: var(--surface); }
.contact-block__grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(34px, 5vw, 70px); align-items: center;
}
.contact-block__media img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-lg);
  /* Same gold frame as the hero and the About block. It matters more here than
     elsewhere, because this image has a near-white background that would
     otherwise bleed into the section surface and lose its edge. box-sizing is
     border-box globally, so the border eats into the width rather than
     overflowing the grid column. */
  border: 6px solid var(--gold);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: var(--ink);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: .9375rem; color: var(--slate);
  padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); width: 100%; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214,160,70,.16);
}
.field input::placeholder, .field textarea::placeholder { color: #9AA3AE; }

.consent {
  grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start;
  font-size: .75rem; line-height: 1.6; color: var(--muted);
}
.consent input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--gold); }

.form-note { grid-column: 1/-1; font-size: .8125rem; color: var(--muted); margin: 0; }
.form-note.is-error { color: #B42318; font-weight: 600; }
.form-note.is-success { color: #12643B; font-weight: 600; }
.consent-note { font-size: .8125rem; color: var(--muted); margin: 8px 0 0 34px; }
.consent-note a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
/* The Web3Forms honeypot. Off screen rather than display:none, because some
   bots skip anything that is not rendered. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.signup__status { margin-top: 12px; }
.signup__status.is-success, .signup__status.is-error { color: var(--ink); }

/* ---------- 14. Testimonials ---------- */
.testimonial-panel {
  background: var(--ink); border-radius: var(--radius-lg);
  padding: clamp(38px, 5vw, 64px); text-align: center;
  position: relative; overflow: hidden;
}
.testimonial-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(560px 260px at 50% 0%, rgba(214,160,70,.15), transparent 70%);
}
.testimonial-panel > * { position: relative; }
.testimonial-panel h2 { color: var(--white); }
.testimonial-panel blockquote {
  margin: 0 auto 26px; max-width: 720px;
  color: rgba(255,255,255,.82); font-size: 1.0625rem; line-height: 1.85;
}
.stars { display: flex; justify-content: center; gap: 4px; color: var(--gold); margin-bottom: 18px; }
.stars svg { width: 17px; height: 17px; }
.testimonial-who { display: flex; align-items: center; justify-content: center; gap: 13px; }
.testimonial-who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
/* Reviews come from Google without usable profile photos, and hotlinking Google's
   avatar CDN means a third-party request per review plus a broken image the day
   a URL rots. A monogram costs nothing and never breaks. */
/* Must out-specify `.testimonial-who span` above, which is (0,1,1) and would
   otherwise paint this gold on gold and make the letter vanish. */
.testimonial-who .testimonial-who__initial {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1;
}
.review-card .testimonial-who .testimonial-who__initial { width: 44px; height: 44px; font-size: 1.0625rem; }
/* The true rating and count for the whole profile, plus the way through to the
   unfiltered set on Google. Present wherever reviews are shown. */
.reviews-source { font-size: .875rem; color: var(--muted); margin: 18px 0 0; }
.reviews-source--center { text-align: center; }
.testimonial-panel .reviews-source { color: rgba(255,255,255,.72); margin-top: 22px; }
.reviews-source a { color: var(--gold-text); font-weight: 600; text-decoration: underline; }
.testimonial-panel .reviews-source a { color: var(--gold); }
.testimonial-who strong { display: block; color: var(--white); font-family: var(--font-head); font-size: 1rem; }
.testimonial-who span { font-size: .8125rem; color: var(--gold); }

.review-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px;
  height: 100%; display: flex; flex-direction: column;
}
.review-card .stars { justify-content: flex-start; margin-bottom: 14px; }
.review-card p {
  color: var(--muted); font-size: .9375rem; margin-bottom: 22px;
  /* Cards sit in a grid row, so every card was being stretched to match the one
     939 character review and short reviews were floating in a 1100px box. The
     clamp bounds the tallest card and adds an ellipsis so it is visible that
     there is more. The text itself is never altered, and the full set is one
     click away on Google via the link below the carousel. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10;
  line-clamp: 10; overflow: hidden;
}
.review-card .testimonial-who { justify-content: flex-start; margin-top: auto; }
.review-card .testimonial-who strong { color: var(--ink); }
.review-card .testimonial-who span { color: var(--muted); }

.reviews__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track > * { scroll-snap-align: start; }

/* ---------- 14b. Review rotator and carousel ---------- */
/* Every slide sits in the same grid cell, so the panel is always as tall as the
   longest review and never resizes as it cycles. Height is reserved once, at
   layout, which is what keeps the cumulative layout shift at zero. */
.rotator { display: grid; }
.rotator__slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
  margin: 0; align-self: center;
}
.rotator__slide.is-active { opacity: 1; visibility: visible; }
/* Arrows sit at the sides of the block, vertically centred on the quote rather
   than on the whole block, so they do not drift as the heading wraps. The
   wrapper needs the padding or a long line of quote runs underneath them. */
.rotator-wrap { position: relative; }
.rotator__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: transparent;
  color: var(--white); transition: all .26s var(--ease);
}
.rotator__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.rotator__arrow svg { width: 16px; height: 16px; }
.rotator__arrow--prev { left: 22px; }
.rotator__arrow--next { right: 22px; }
.reviews-block .rotator__arrow { border-color: var(--border); color: var(--ink); }
.reviews-block .rotator__arrow:hover { color: var(--ink); }
.reviews-block .rotator__arrow--prev { left: 0; }
.reviews-block .rotator__arrow--next { right: 0; }
.rotator__dots {
  display: flex; gap: 0; flex-wrap: wrap;
  justify-content: center; margin-top: 18px;
}
/* The visible dot is 9px, but a 9px tap target fails WCAG 2.2 Target Size and
   is genuinely hard to hit with a thumb. The button is 26px and transparent,
   and the dot itself is drawn as a pseudo-element inside it. */
.rotator__dot {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 0; background: none; position: relative;
  display: grid; place-items: center;
}
.rotator__dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.28);
  transition: background .26s var(--ease), transform .26s var(--ease);
}
.rotator__dot:hover::before { background: rgba(255,255,255,.55); }
.rotator__dot.is-active::before { background: var(--gold); transform: scale(1.35); }
.reviews-block .rotator__dot::before { background: rgba(18,27,43,.18); }
.reviews-block .rotator__dot:hover::before { background: rgba(18,27,43,.38); }
.reviews-block .rotator__dot.is-active::before { background: var(--gold); }

/* The light rotator on About Us. Same component, pale surface. */
.reviews-block { text-align: center; padding-inline: 78px; }
.reviews-block blockquote {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.75;
  color: var(--slate); max-width: 860px; margin: 0 auto 26px;
}
.reviews-block .testimonial-who { justify-content: center; }
.reviews-block .testimonial-who strong { color: var(--ink); }
.reviews-block .testimonial-who span { color: var(--muted); }
/* The section head already carries its own space below it. */
.reviews-block .section-head { margin-bottom: 18px; }

/* Below this the arrows would sit on top of the words. Drop them under the
   quote and let them share the row with the dots. */
@media (max-width: 720px) {
  .rotator__arrow { position: static; transform: none; }
  .rotator-wrap { display: flex; flex-direction: column; }
  .rotator-wrap > .rotator { order: 1; }
  .rotator__dots { order: 2; }
  .rotator__arrow--prev { order: 3; margin: 18px auto 0; }
  .rotator__arrow--next { order: 4; margin: 18px auto 0; }
  .reviews-block { padding-inline: 0; }
}
.rotator__dot:focus-visible,
.carousel-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.reviews__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 20px;
}
.reviews__count { margin: 0; font-size: .875rem; color: var(--muted); font-weight: 600; }
.reviews__track { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .rotator__slide { transition: none; }
  .reviews__track { scroll-behavior: auto; }
}

/* ---------- 15. Accordion (FAQ / expert solutions) ---------- */
.accordion { display: grid; gap: 14px; }
.accordion__item {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); overflow: hidden;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.accordion__item[open] { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.accordion__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 800; font-size: 1.0625rem; color: var(--ink);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
  content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B8863A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") center/13px no-repeat;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.accordion__item[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23121B2B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
  background-color: var(--gold); transform: rotate(180deg);
}
.accordion__body { padding: 0 26px 24px; color: var(--muted); font-size: .9375rem; }

/* ---------- 16. Service detail ---------- */
.detail__grid { display: grid; grid-template-columns: 1fr 350px; gap: clamp(30px, 4vw, 56px); align-items: start; }
.detail__hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 32px; }
.detail__body h2 { margin-top: 34px; }
.detail__body h2:first-child { margin-top: 0; }
.detail__body h3 { margin-top: 28px; font-size: 1.25rem; }

.detail__points { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.detail__points li {
  position: relative; padding-left: 34px; font-size: .9375rem; font-weight: 500; color: var(--slate);
}
.detail__points li::before {
  content: ''; position: absolute; left: 0; top: .1em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23121B2B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/13px no-repeat;
}

.detail__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0; }
.detail__gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius); }

.widget {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px; margin-bottom: 26px;
}
.widget h3 { font-size: 1.1875rem; margin-bottom: 20px; }
.widget__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.widget__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--slate);
  transition: all .26s var(--ease);
}
.widget__list a svg { width: 15px; height: 15px; flex: none; }
.widget__list a:hover, .widget__list a[aria-current] {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}

.widget--cta { background: var(--ink); border-color: var(--ink); text-align: center; }
.widget--cta h3 { color: var(--white); }
.widget--cta p { color: rgba(255,255,255,.72); font-size: .9375rem; margin-bottom: 20px; }
.widget--cta .phone {
  display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800;
  color: var(--gold); margin-bottom: 18px;
}

/* ---------- 17. Contact page ---------- */
/* The map is the background of the whole block rather than a fixed 460px strip
   with the cards hanging off the bottom of it onto white. Absolute inset means
   it always covers the full height whatever the cards do, so the cards can grow
   or stack on mobile without ever leaving a gap under them. */
.map-section { position: relative; padding: 360px 0 54px; }
.map-embed {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; filter: grayscale(.15);
}
.contact-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  position: relative; z-index: 5;
}
.contact-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 36px 28px; text-align: center;
}
.contact-card__icon {
  width: 58px; height: 58px; border-radius: 50%; background: var(--gold); color: var(--ink);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.contact-card p, .contact-card a { font-size: .9375rem; color: var(--muted); margin: 0; }
.contact-card a:hover { color: var(--gold-text); }

/* ---------- 18. CTA banner ---------- */
.cta-banner { padding-bottom: 0; background: var(--white); }
.cta-banner__inner {
  position: relative;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4vw, 54px) clamp(26px, 4vw, 60px);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  transform: translateY(50%);
}
.cta-banner__inner h2 { color: var(--ink); margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.cta-banner__inner p { color: #2A2110; margin-top: 8px; font-weight: 500; }
.cta-banner__actions { display: flex; gap: 13px; flex-wrap: wrap; }

/* ---------- 19. Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); font-size: .9375rem; }
.site-footer__top { padding: calc(clamp(64px, 8vw, 110px) + 60px) 0 clamp(48px, 6vw, 72px); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr; gap: 40px; }
.site-footer h4 {
  color: var(--white); font-size: 1.125rem; margin-bottom: 22px;
  position: relative; padding-bottom: 12px;
}
.site-footer h4::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--gold);
}
.site-footer p { color: rgba(255,255,255,.66); }
.site-footer a { color: rgba(255,255,255,.72); }
/* Buttons keep their own foreground — the generic footer link color must not win */
.site-footer .btn--primary { color: var(--ink); }
.site-footer .btn--primary:hover { color: var(--white); }
.site-footer a:hover { color: var(--gold); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-list--arrow a { display: flex; align-items: center; gap: 10px; }
.footer-list--arrow svg { width: 13px; height: 13px; color: var(--gold); flex: none; }
.footer-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
@media (max-width: 1100px) { .footer-list--2col { grid-template-columns: 1fr; } }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.footer-contact li { display: flex; gap: 13px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 5px; }

.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 40px; height: 40px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center;
  transition: all .26s var(--ease);
}
.social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.social svg { width: 16px; height: 16px; }

.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.footer-badge {
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(214,160,70,.4); color: var(--gold);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-size: .875rem;
}
.site-footer__bottom nav { display: flex; gap: 26px; flex-wrap: wrap; }

/* ---------- 20. 404 ---------- */
.error-page {
  min-height: 68vh; display: grid; place-items: center; text-align: center;
  padding: clamp(60px, 8vw, 110px) 0;
}
.error-code {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(6rem, 18vw, 13rem); line-height: .9;
  background: linear-gradient(140deg, var(--gold) 20%, var(--gold-dark) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}

/* ---------- 21. Legal / prose ---------- */
.prose { max-width: 820px; }
.prose h2 { font-size: 1.5rem; margin-top: 42px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.125rem; margin-top: 28px; }
.prose ul { padding-left: 20px; }
/* Inline links inside body copy need a non-color affordance */
.prose p a, .consent a { text-decoration: underline; text-underline-offset: 2px; }
.prose li { margin-bottom: 8px; }
.prose__toc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 30px; margin-bottom: 40px;
}
.prose__toc ul { columns: 2; column-gap: 30px; margin: 0; }

/* ---------- 22. Utilities ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 600;
  padding: 8px 15px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-text);
}
.badge svg { width: 14px; height: 14px; }
.section--ink .badge { background: rgba(214,160,70,.14); color: var(--gold); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.stat { text-align: center; padding: 26px 14px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat strong {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.75rem); color: var(--gold-text); line-height: 1;
}
.stat span { font-size: .875rem; color: var(--muted); }

.logo-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.logo-strip div {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: .9375rem; color: var(--muted);
}

/* ---------- 21b. "What this saves you" panel ---------- */
.saves {
  margin: 34px 0 6px; padding: clamp(24px, 3vw, 36px);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--gold); border-radius: var(--radius-lg);
}
.saves__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 14px; }
.saves__head h2 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.saves__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.saves__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 100px;
  background: var(--gold-soft); color: var(--gold-text);
  font-size: .75rem; font-weight: 600; line-height: 1.4;
}
.saves__chip svg { width: 12px; height: 12px; flex: none; }
.saves__lead { font-weight: 500; color: var(--ink); margin-bottom: 20px; }
.saves__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.saves__list > li { padding-left: 22px; position: relative; }
.saves__list > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}
.saves__list p { margin: 0; }
.saves__src { margin-top: 5px !important; font-size: .8125rem; }
.saves__src a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.saves__src a:hover { color: var(--gold-text); }
.saves__honest {
  margin-top: 24px; padding: 18px 20px;
  background: var(--white); border: 1px dashed var(--gold-dark); border-radius: var(--radius);
}
.saves__honest h3 {
  margin: 0 0 7px; font-size: .8125rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-text);
}
.saves__honest p { margin: 0; }
.saves__pairs { margin-top: 20px; font-size: .9375rem; }
.saves__pairs a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.saves__pairs a + a { margin-left: 4px; }
.saves__note { margin-top: 12px; font-size: .8125rem; color: var(--muted); }
.saves__note a { color: var(--gold-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }


/* ---------- 21c. Callouts and the rebates table ---------- */
.callout {
  max-width: 900px; margin: 0 auto 44px; padding: clamp(22px, 3vw, 32px);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--gold); border-radius: var(--radius-lg);
}
.callout h3 { margin: 0 0 8px; font-size: 1.1875rem; }
.callout p { margin: 0; }
.callout p + p { margin-top: 12px; }
.callout--warn { background: var(--gold-soft); border-color: var(--gold); }

.rebate-group { max-width: 900px; margin: 0 auto 48px; }
.rebate-group h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-bottom: 4px; }
.rebate-group__admin { font-size: .875rem; color: var(--muted); margin-bottom: 20px; }
.rebate-group__admin a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.rebate-table { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rebate-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px;
  padding: 18px 22px; background: var(--white);
}
.rebate-row + .rebate-row { border-top: 1px solid var(--border); }
.rebate-row:nth-child(even) { background: var(--surface); }
.rebate-row__amt { font-family: var(--font-head); font-weight: 800; color: var(--gold-text); }
.rebate-row__note { grid-column: 1 / -1; font-size: .875rem; color: var(--muted); margin-top: 4px; }
.rebate-gone { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rebate-gone li { padding-left: 24px; position: relative; color: var(--muted); }
.rebate-gone li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 12px; height: 2px; background: var(--muted);
}
.rebate-gone strong { color: var(--slate); }

@media (max-width: 640px) {
  .rebate-row { grid-template-columns: 1fr; padding: 16px 18px; }
}

/* Reveal on scroll */
/* Only hide for the animation when JS is present — no-JS users and crawlers see everything. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 22b. Wide-screen guards ----------
   Sections run edge to edge, but body copy and the media blocks stop reading
   well past ~1500px. Everything here is a max, never a fixed width — the
   layout stays fluid. Must sit after the component rules it overrides. */
@media (min-width: 1500px) {
  /* Text-heavy blocks: the section still spans the viewport, the content column
     centres inside it so lines stay readable. */
  .detail__grid { max-width: 1560px; margin-inline: auto; }
  .prose { max-width: 80ch; margin-inline: auto; }
  .about__grid > div:not(.about__media) > p,
  .contact-block__copy p,
  .hero__text { max-width: 68ch; }
  .about__media, .contact-block__media { max-width: 640px; margin-inline: auto; }
  .cta-banner__inner, .signup__inner { max-width: 1600px; margin-inline: auto; }
}
@media (min-width: 2100px) {
  /* Three cards across gets bloated on a very wide monitor — 11 services sit 4 / 4 / 3 */
  .grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 23. Responsive ---------- */
@media (max-width: 1200px) {
  .nav__menu > li > a { padding: 12px 11px; font-size: .875rem; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 991px) {
  .nav__toggle { display: grid; }
  .nav__cta .btn { display: none; }
  .nav__call { display: inline-flex; }
  .nav { min-height: 76px; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); padding: 8px 16px 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    max-height: 0; overflow: hidden;
    transition: max-height .4s var(--ease);
  }
  .nav__menu.is-open { max-height: 90vh; overflow-y: auto; }
  .nav__menu > li > a { padding: 14px 8px; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent; border-top: 0;
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height .35s var(--ease);
  }
  .submenu.is-open { max-height: 1000px; padding: 6px 0 10px; }
  .submenu a { color: rgba(255,255,255,.75); padding: 10px 20px; }
  .submenu a:hover { background: transparent; color: var(--gold); padding-left: 24px; }

  /* Mega-menu collapses to a single stacked accordion on mobile */
  .submenu--mega,
  .nav__menu > li:hover > .submenu--mega,
  .nav__menu > li:focus-within > .submenu--mega { left: auto; transform: none; }
  .submenu--mega { display: block; min-width: 0; padding: 0; }
  .submenu--mega > .submenu__col + .submenu__col { border-left: 0; }
  .submenu__head { padding: 12px 20px 4px; color: rgba(255,255,255,.45); }
  .submenu__all { margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.12); }
  .submenu__all a { color: var(--gold); }

  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { order: -1; }
  .hero__badge { left: 12px; }

  .about__grid, .contact-block__grid, .signup__inner, .detail__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* Stacked cards make the block much taller, so less map above them. */
  .map-section { padding: 240px 0 40px; }
  .contact-cards { grid-template-columns: 1fr; }
  .cta-banner__inner { grid-template-columns: 1fr; transform: translateY(40%); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .portfolio__head { justify-content: flex-start; }
}

@media (max-width: 640px) {
  /* Keep the top bar to one compact line — the full NAP lives in the footer */
  .topbar__inner { justify-content: center; gap: 10px; }
  .topbar__list { gap: 16px; justify-content: center; font-size: .75rem; }
  .topbar__list li:nth-child(2),
  .topbar__list li:nth-child(3) { display: none; }
  .topbar__social span { display: none; }

  /* 11px micro-copy is legible on a desktop monitor at arm's length and not on
     a phone at reading distance. Nudged up only on small screens. */
  .footer-badge { font-size: .75rem; }
  .hero__badge span { font-size: .75rem; }
  .submenu__head { font-size: .75rem; }

  /* Tighten the nav row so brand + call + toggle fit a 360px screen */
  .nav { gap: 10px; }
  .nav__cta { gap: 8px; }
  .brand { gap: 9px; }
  .brand__mark { height: 30px; }
  .brand__word { height: 18px; }
  .brand__sub { display: none; }
  .nav__call { padding: 11px 13px; }
  .nav__call span { display: none; }

  .hero__badge { padding: 12px 16px; left: 10px; bottom: 14px; max-width: 170px; }
  .hero__badge strong { font-size: 1.375rem; }
  .hero__badge span { font-size: .75rem; }
  .hero__media { margin-bottom: 30px; }
  .grid-2, .grid-3, .grid-4, .form-grid, .detail__gallery, .logo-strip { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .prose__toc ul { columns: 1; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .hero__trust { gap: 22px; }
  .about__media { padding-right: 0; }
  .about__media > img:first-child { width: 100%; }
  .about__media .about__media-sm { display: none; }
  .signup__form { flex-direction: column; }
  .stat { border-right: 0; border-bottom: 1px solid var(--border); }
  /* Four fixed columns plus gaps could not fit a 375px screen, which put a
     couple of pixels of horizontal scroll on every narrow page. Two up. */
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .stat:nth-child(odd) { border-right: 1px solid var(--border); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Very small phones: the logo lockup has to give way to the call button and toggle */
@media (max-width: 400px) {
  .brand { gap: 8px; }
  .brand__mark { height: 26px; }
  .brand__word { height: 15px; }
}