/* 3 Brothers Construction — site stylesheet
   Tokens come from ../design-system/. Never hardcode a hex or px color/spacing value here —
   add a token in the design system first if one is missing. */

@import url("../design-system/tokens/fonts.css");
@import url("../design-system/tokens/colors.css");
@import url("../design-system/tokens/typography.css?v=2");
@import url("../design-system/tokens/spacing.css");
@import url("../design-system/tokens/elevation.css");
@import url("../design-system/tokens/motion.css");
@import url("../design-system/tokens/base.css");

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--muted { background: var(--surface-muted); }
.section--navy { background: var(--surface-inverse); color: var(--text-on-navy); }
.section--navy .eyebrow { color: var(--orange-400); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: var(--navy-200); }

/* ---------- icon (Lucide via CSS mask, same technique as the design system) ---------- */
.icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 24px; height: 24px; }
.i-phone { -webkit-mask-image: url(../assets/icons/i-phone.svg); mask-image: url(../assets/icons/i-phone.svg); }
.i-star { -webkit-mask-image: url(../assets/icons/i-star.svg); mask-image: url(../assets/icons/i-star.svg); }
.i-shield-check { -webkit-mask-image: url(../assets/icons/i-shield-check.svg); mask-image: url(../assets/icons/i-shield-check.svg); }
.i-badge-check { -webkit-mask-image: url(../assets/icons/i-badge-check.svg); mask-image: url(../assets/icons/i-badge-check.svg); }
.i-message-circle { -webkit-mask-image: url(../assets/icons/i-message-circle.svg); mask-image: url(../assets/icons/i-message-circle.svg); }
.i-clipboard-list { -webkit-mask-image: url(../assets/icons/i-clipboard-list.svg); mask-image: url(../assets/icons/i-clipboard-list.svg); }
.i-map-pin { -webkit-mask-image: url(../assets/icons/i-map-pin.svg); mask-image: url(../assets/icons/i-map-pin.svg); }
.i-clock { -webkit-mask-image: url(../assets/icons/i-clock.svg); mask-image: url(../assets/icons/i-clock.svg); }
.i-mail { -webkit-mask-image: url(../assets/icons/i-mail.svg); mask-image: url(../assets/icons/i-mail.svg); }
.i-chevron-down { -webkit-mask-image: url(../assets/icons/i-chevron-down.svg); mask-image: url(../assets/icons/i-chevron-down.svg); }
.i-arrow-right { -webkit-mask-image: url(../assets/icons/i-arrow-right.svg); mask-image: url(../assets/icons/i-arrow-right.svg); }
.i-menu { -webkit-mask-image: url(../assets/icons/i-menu.svg); mask-image: url(../assets/icons/i-menu.svg); }
.i-x { -webkit-mask-image: url(../assets/icons/i-x.svg); mask-image: url(../assets/icons/i-x.svg); }
.i-home { -webkit-mask-image: url(../assets/icons/i-home.svg); mask-image: url(../assets/icons/i-home.svg); }
.i-wrench { -webkit-mask-image: url(../assets/icons/i-wrench.svg); mask-image: url(../assets/icons/i-wrench.svg); }
.i-cloud-lightning { -webkit-mask-image: url(../assets/icons/i-cloud-lightning.svg); mask-image: url(../assets/icons/i-cloud-lightning.svg); }
.i-layers { -webkit-mask-image: url(../assets/icons/i-layers.svg); mask-image: url(../assets/icons/i-layers.svg); }
.i-paint-roller { -webkit-mask-image: url(../assets/icons/i-paint-roller.svg); mask-image: url(../assets/icons/i-paint-roller.svg); }
.i-brush { -webkit-mask-image: url(../assets/icons/i-brush.svg); mask-image: url(../assets/icons/i-brush.svg); }
.i-thermometer { -webkit-mask-image: url(../assets/icons/i-thermometer.svg); mask-image: url(../assets/icons/i-thermometer.svg); }
.i-square { -webkit-mask-image: url(../assets/icons/i-square.svg); mask-image: url(../assets/icons/i-square.svg); }
.i-image { -webkit-mask-image: url(../assets/icons/i-image.svg); mask-image: url(../assets/icons/i-image.svg); }
.i-cooking-pot { -webkit-mask-image: url(../assets/icons/i-cooking-pot.svg); mask-image: url(../assets/icons/i-cooking-pot.svg); }
.i-check { -webkit-mask-image: url(../assets/icons/i-check.svg); mask-image: url(../assets/icons/i-check.svg); }
.i-alert-triangle { -webkit-mask-image: url(../assets/icons/i-alert-triangle.svg); mask-image: url(../assets/icons/i-alert-triangle.svg); }
.i-shower-head { -webkit-mask-image: url(../assets/icons/i-shower-head.svg); mask-image: url(../assets/icons/i-shower-head.svg); }
.i-sofa { -webkit-mask-image: url(../assets/icons/i-sofa.svg); mask-image: url(../assets/icons/i-sofa.svg); }
.i-trees { -webkit-mask-image: url(../assets/icons/i-trees.svg); mask-image: url(../assets/icons/i-trees.svg); }
.i-facebook { -webkit-mask-image: url(../assets/icons/i-facebook.svg); mask-image: url(../assets/icons/i-facebook.svg); }
.i-instagram { -webkit-mask-image: url(../assets/icons/i-instagram.svg); mask-image: url(../assets/icons/i-instagram.svg); }
.i-check { -webkit-mask-image: url(../assets/icons/i-check.svg); mask-image: url(../assets/icons/i-check.svg); }

/* ---------- buttons (mirrors design-system Button) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: .045em; line-height: 1.1; font-size: var(--text-body-sm); padding: 12px 24px;
  border-radius: var(--radius-md); cursor: pointer; text-decoration: none; border: 2px solid transparent;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.btn:active { transform: translateY(1px) scale(var(--press-scale)); }
.btn--primary { background: var(--orange-500); color: var(--text-on-orange); border-color: var(--orange-500); box-shadow: var(--shadow-accent); }
.btn--primary:hover { background: var(--orange-600); border-color: var(--orange-600); color: var(--text-on-orange); }
.btn--secondary { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.btn--outline { background: transparent; color: var(--navy-700); border-color: var(--navy-200); }
.btn--outline:hover { border-color: var(--navy-700); background: var(--navy-050); color: var(--navy-700); }
.btn--inverse { background: var(--white); color: var(--navy-700); border-color: var(--white); }
.btn--inverse:hover { background: var(--sand-100); border-color: var(--sand-100); color: var(--navy-700); }
.btn--lg { padding: 16px 34px; font-size: var(--text-body-md); gap: var(--space-3); }
.btn--full { width: 100%; }

/* ---------- top utility bar ---------- */
.topbar { background: var(--navy-900); color: var(--navy-200); font-size: var(--text-caption); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-2); flex-wrap: wrap; }
.topbar a { color: inherit; }
.topbar__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--white); font-weight: var(--weight-semibold); }

/* ---------- header (floating pill, overlaid on the hero) ---------- */
.site-header { position: fixed; top: 48px; left: 0; right: 0; z-index: 40; background: var(--white);
  /* 1px border + a wide (44px) blurred shadow on the same element is the "ghost card" pairing — pick one.
     Keeping the border for definition against any background, shadow-sm (6px blur) gives lift without the pairing. */
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  width: calc(100% - var(--space-8)); max-width: var(--container-max); margin-inline: auto; }
.site-header .container { max-width: none; display: flex; align-items: center; gap: var(--space-8);
  padding-block: var(--space-2); padding-inline: var(--space-6); }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { height: 48px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-6); }
.nav__item { position: relative; }
.nav__link { font-family: var(--font-heading); font-size: var(--text-body-sm); font-weight: var(--weight-bold);
  letter-spacing: .03em; text-transform: uppercase; color: var(--navy-700); display: inline-flex; align-items: center; gap: 4px; padding-block: var(--space-2);
  /* the "Roofing / Remodeling / Services" dropdown triggers are <button> elements — strip all native button chrome so they match the plain <a> nav links */
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding-inline: 0; margin: 0; cursor: pointer; }
.nav__link:hover { color: var(--orange-600); }
.nav__item[aria-current="page"] .nav__link { color: var(--orange-600); border-bottom: 3px solid var(--orange-500); }
.nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-2); opacity: 0; visibility: hidden;
  transform: translateY(4px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-body-sm); color: var(--text-body); text-decoration: none; }
.nav__dropdown a:hover { background: var(--sand-050); color: var(--orange-600); }
.nav-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  background: none; border: 0; color: var(--navy-700); padding: var(--space-2); cursor: pointer; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--navy-700); padding-block: calc(var(--space-32) + var(--space-8)) 0; overflow: visible; }
/* video background — sits behind everything (z-index:0), overlay tints it navy for text contrast
   (z-index:1). .hero__center is already z-index:2 and .hero__photo-wrap is z-index:3, so both
   stack above these without any change. object-fit:cover fills the section at any width/height;
   `background: var(--navy-700)` on .hero itself is the fallback if the video fails to load. */
.hero__bg-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bg-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--navy-700) 68%, transparent); }
@media (prefers-reduced-motion: reduce) { .hero__bg-video { display: none; } }
/* Simpler photo-background hero used on service subpages — one strong real project photo
   instead of the home page's video/slideshow, for a faster, service-specific hero. Shares
   .hero__bg-overlay (already generic) and .hero__center/h1/sub/ctas below. */
.hero__bg-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--page { padding-block: calc(var(--space-32) + var(--space-8)) var(--space-20); }
.hero__center { position: relative; z-index: 2; max-width: 1100px; margin-inline: auto; text-align: center; }
.hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 8px 18px;
  font-family: var(--font-heading); font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: .05em; text-transform: uppercase; color: var(--navy-700); box-shadow: var(--shadow-xs); margin-bottom: var(--space-6); }
.hero__badge .icon { color: var(--orange-500); }
.hero h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12; letter-spacing: var(--ls-display); color: var(--white); margin: 0; }
.hero h1 .accent { color: var(--orange-500); }
.hero h1 .thin { font-family: var(--font-heading); font-weight: var(--weight-light); letter-spacing: 0; }
.hero__sub { font-size: var(--text-lead); line-height: 1.65; color: var(--navy-200); margin: var(--space-5) auto var(--space-6);
  max-width: 820px; }
.hero__ctas { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; justify-content: center; }
.hero__phone { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading);
  font-weight: var(--weight-bold); font-size: var(--text-body-md); color: var(--white); }
.hero__phone .icon { color: var(--orange-500); }
.hero__phone:hover { color: var(--orange-400); }
/* .hero__trust-line removed from the hero (taste-skill 14: no trust micro-strip below hero CTAs) —
   "Same-Day Callbacks" moved into .trust-bar below instead of being dropped */

.hero__photo-wrap { position: relative; z-index: 3; margin-top: var(--space-10); margin-bottom: -56px; }
/* BUG FIX (round 2): a transformed/inset absolutely-positioned box DOES get counted in this
   engine's scrollable overflow even though CSS theory says it shouldn't — scale() and % insets
   both bled the glow past the viewport edge before. Fix that actually holds at every width:
   give the glow its own frame sized to the photo's real box (not the full-bleed wrapper), and
   bleed it by a small FIXED px amount instead of a %/scale that grows with viewport width. */
.hero__photo-frame { position: relative; width: min(920px, 88%); margin-inline: auto; }
/* cutout photo (transparent background, alpha PNG/WebP) floats directly on the navy hero —
   no card box, no crop, no glow behind it. object-fit: contain (not cover) so the full irregular
   silhouette always shows even if a future photo doesn't share this one's exact aspect ratio. */
.hero__photo { position: relative; width: 100%; aspect-ratio: 16 / 7.5; }
/* stacked slides crossfade in place — see the [data-hero-slideshow] rotator in site.js.
   Every slide sits in the same box via position:absolute; the active one fades to opaque. */
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  display: block; opacity: 0; transition: opacity 1200ms ease; }
.hero__slide.is-active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

/* rotating "years of experience" badge, overlapping the photo's corner */
.badge-rotate { position: absolute; z-index: 4; right: var(--space-6); bottom: calc(var(--space-8) * -1);
  width: 96px; height: 96px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center; }
.badge-rotate__ring { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  fill: var(--navy-700); animation: badge-spin 18s linear infinite;
  /* promote to its own compositing layer so this always-running rotation never forces a
     repaint of the fixed header sitting near it */
  will-change: transform; backface-visibility: hidden; }
.badge-rotate__center { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  background: var(--orange-500); color: var(--white); display: flex; align-items: center; justify-content: center; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge-rotate__ring { animation: none; } }

/* ---------- trust bar ---------- */
.trust-bar { position: relative; z-index: 1; background: var(--navy-900); padding-top: 56px; padding-bottom: 32px; overflow: hidden; }
.trust-bar .container { display: flex; gap: var(--space-8); flex-wrap: wrap; padding-block: var(--space-4); color: var(--navy-200); font-size: var(--text-body-sm); justify-content: center; }
.trust-bar__item { display: inline-flex; align-items: center; gap: var(--space-2); }

/* roofline section divider — a literal callback to the logo's roof shape, angular and squared-off
   rather than a soft generic wave, keeping the brand's industrial character */
.roofline-divider { position: absolute; left: 0; bottom: -1px; width: 100%; height: 24px; fill: var(--surface-page); display: block; }
.trust-bar__item .icon { color: var(--orange-500); }

/* ---------- stats strip ---------- */
.stats { background: var(--white); border-bottom: 1px solid var(--border-subtle); padding-block: var(--space-16); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); text-align: center; }
.stat__value { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 54px); line-height: 1;
  letter-spacing: var(--ls-display); color: var(--orange-500); }
.stat__label { margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--text-muted);
  font-family: var(--font-heading); font-weight: var(--weight-semibold); letter-spacing: .02em; }

/* ---------- eyebrow / section heading ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-heading);
  font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  /* navy-600 on light backgrounds clears 4.5:1 with a wide margin (orange-600 only cleared it by 0.02) —
     the orange accent still shows up in the ::before rule below */
  color: var(--navy-600); margin-bottom: var(--space-3); }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: currentColor; display: inline-block; }
.section-head { max-width: 680px; margin-bottom: var(--space-10); }
.section-head--center { max-width: 720px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--text-h2); }
.section-head p { color: var(--text-body); font-size: var(--text-body-lg); margin-top: var(--space-3); }

/* ---------- problem / agitate ---------- */
.agitate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.agitate p { font-size: var(--text-body-lg); }
/* was a border-left accent stripe — replaced with a full tinted card, the non-banned way to set a quote apart */
.agitate__quote { background: var(--orange-050); border: 1px solid var(--orange-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); padding: var(--space-8); overflow: hidden; }
.agitate__quote p { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-semibold);
  color: var(--navy-700); font-style: normal; line-height: var(--lh-snug); }
/* bleeds to the card's own edges (negative margin cancels the padding) so the photo fills the
   rest of the box edge-to-edge instead of floating inset like the quote text above it */
.agitate__quote-photo { display: block; width: calc(100% + var(--space-8) * 2); max-width: none;
  margin: var(--space-6) calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  /* BUG FIX: the img's own height="901" HTML attribute was winning as a literal 901px height
     (both width and height ended up "definite", so aspect-ratio never got a dimension to fill in
     — that's what rendered as a tall, narrow, "stretched" strip). height:auto cancels the
     attribute so aspect-ratio actually controls the box. */
  height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- services grid ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.service-card { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-standard),
  box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
  text-decoration: none; display: block; color: inherit; overflow: hidden; }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--orange-300); }
.service-card__photo { position: relative; aspect-ratio: 16 / 9; background: var(--sand-100);
  display: flex; align-items: center; justify-content: center; color: var(--sand-300); }
.service-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card__icon-badge { position: absolute; left: var(--space-5); bottom: 0; transform: translateY(50%);
  width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--navy-700); color: var(--white);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  transition: background var(--dur-base) var(--ease-standard); }
.service-card:hover .service-card__icon-badge { background: var(--orange-500); }
.service-card__body { padding: calc(var(--space-8) + var(--space-2)) var(--space-5) var(--space-5); }
.service-card__body h3 { font-size: var(--text-h5); margin-bottom: var(--space-2); }
.service-card__body p { font-size: var(--text-body-sm); color: var(--text-body); margin-bottom: var(--space-3); }
.service-card__link { font-family: var(--font-heading); font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy-700); display: inline-flex; align-items: center; gap: 6px; }
.service-card:hover .service-card__link { color: var(--orange-600); }

/* ---------- why us ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.why-card { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--orange-300); }
.why-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); background: var(--orange-100); color: var(--orange-600); margin-bottom: var(--space-4); flex: 0 0 auto; }
.why-card h3 { font-size: var(--text-h5); margin-bottom: var(--space-2); }
.why-card p { font-size: var(--text-body-sm); margin: 0; }
/* the lead reason (owner on your job) gets a distinct wide, horizontal, inverse-color treatment so the
   six why-cards aren't six identical icon+heading+text boxes in a row */
.why-card:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-8);
  background: var(--navy-700); border-color: var(--navy-700); }
.why-card:first-child:hover { border-color: var(--navy-700); }
.why-card:first-child .why-card__icon { background: var(--orange-500); color: var(--white); margin-bottom: 0; width: 64px; height: 64px; }
.why-card:first-child h3, .why-card:first-child p { color: var(--white); }
.why-card:first-child h3 { font-size: var(--text-h3); }

/* ---------- 3D design -> finished work showcase ----------
   Same thin/bold/accent display treatment as the hero H1 and final CTA — a third, deliberate use
   of that "bookend" pattern for a section that's a genuine differentiator (most small contractors
   don't offer a 3D preview), not scattered reuse. section-head's own `.section-head h2` rule is
   class+element (specificity 0,1,1) so a bare `.showcase-heading` (0,1,0) can't reliably beat it —
   scoped as `.section-head .showcase-heading` (0,2,0) so the sizing here always wins. */
.section-head .showcase-heading { font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: var(--ls-display); color: var(--navy-700); }
.showcase-heading .thin { font-family: var(--font-heading); font-weight: var(--weight-light); letter-spacing: 0; color: var(--stone-600); }
.showcase-heading .accent { color: var(--orange-500); }
.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.showcase-card { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--sand-100); }
.showcase-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-card__tag { position: absolute; top: var(--space-4); left: var(--space-4); padding: 6px 14px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--navy-700) 85%, transparent); color: var(--white);
  font-family: var(--font-heading); font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: .06em; text-transform: uppercase; }
.showcase-card__tag--done { background: var(--orange-500); }

/* ---------- process (vertical scroll-spy timeline) ----------
   Default state (no JS, or before the observer fires) is fully visible/readable — the
   "spotlight" is a progressive enhancement, never a requirement to see the content.
   Photo sits BESIDE the text (not stacked above it) specifically to keep each step short —
   three stacked-photo steps ran the section past 1200px tall; side-by-side keeps it under 700px. */
.process { position: relative; max-width: 960px; margin-inline: auto; }
.process::before { content: ""; position: absolute; top: 28px; bottom: 28px; left: 27px; width: 2px;
  background: var(--sand-300); z-index: 0; }
.process__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--space-6); align-items: center; }
.process__step:not(:last-child) { margin-bottom: var(--space-8); }
.process__rail { position: relative; z-index: 1; align-self: flex-start; margin-top: 4px; }
.process__num { width: 56px; height: 56px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--sand-300); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--stone-400);
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.process__content { display: flex; align-items: center; gap: var(--space-6); text-align: left;
  opacity: 1; transition: opacity var(--dur-base) var(--ease-standard); }
.process__photo { flex: 0 0 220px; width: 220px; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background: var(--sand-100); border: 1px solid var(--border-subtle); margin-bottom: 0;
  display: flex; align-items: center; justify-content: center; color: var(--sand-300); overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-standard); }
.process__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process__text { flex: 1; min-width: 0; }
.process__text h3 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.process__text p { font-size: var(--text-body-sm); }

/* JS (site.js, IntersectionObserver on [data-process-step]) marks whichever step is centered in
   the viewport .is-active, and dims the rest — this is the "illuminate" effect. */
.process__step.is-dimmed .process__content { opacity: .5; }
.process__step.is-active .process__num { background: var(--orange-500); border-color: var(--orange-500);
  color: var(--white); transform: scale(1.08); box-shadow: var(--shadow-accent); }
.process__step.is-active .process__photo { border-color: var(--orange-300); border-style: solid; }

/* ---------- financing banner ---------- */
.banner { background: var(--orange-500); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-10);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; color: var(--white); }
.banner h2 { color: var(--white); margin-bottom: var(--space-2); font-size: var(--text-h3); }
.banner p { color: rgba(255,255,255,.92); margin: 0; }

/* ---------- reviews ---------- */
.review-featured { background: var(--navy-700); color: var(--white); border-radius: var(--radius-xl); padding: var(--space-10);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: flex-start; margin-bottom: var(--space-10); }
.review-featured .badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--orange-500);
  color: var(--white); font-family: var(--font-heading); font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.review-featured blockquote { margin: 0; font-size: var(--text-body-lg); line-height: 1.7; color: var(--white); }
.review-featured cite { display: block; margin-top: var(--space-4); font-style: normal; font-family: var(--font-heading); font-weight: var(--weight-bold); }
.review-featured cite span { display: block; font-family: var(--font-body); font-weight: var(--weight-body); color: var(--navy-200); font-size: var(--text-body-sm); }
.review-featured__stars { color: var(--orange-400); display: flex; gap: 2px; margin-bottom: var(--space-3); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.review-card { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.review-card__stars { color: var(--orange-500); display: flex; gap: 2px; margin-bottom: var(--space-3); }
.review-card p { font-size: var(--text-body-sm); color: var(--stone-700); margin-bottom: var(--space-4); }
.review-card__by { display: flex; align-items: center; gap: var(--space-3); }
.review-card__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-050); color: var(--navy-700);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading);
  font-weight: var(--weight-bold); font-size: var(--text-body-sm); flex: 0 0 auto; }
.review-card cite { font-style: normal; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-body-sm); color: var(--navy-700); }

/* ---------- before / after slider grid (one card per project) ---------- */
.ba-slider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.ba-slider-grid--4 { grid-template-columns: repeat(2, 1fr); }
.ba-slider-caption { margin-top: var(--space-3); text-align: center; font-family: var(--font-heading);
  font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--navy-700); }
.ba-slider { position: relative; width: 100%; max-width: none; aspect-ratio: 4 / 3; margin-inline: auto;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); cursor: ew-resize;
  -webkit-user-select: none; user-select: none; touch-action: pan-y; background: var(--sand-100); }
.ba-slider__panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--sand-100); }
.ba-slider__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-slider__panel--before { width: 50%; border-right: 2px solid var(--white); background: var(--sand-200); }
.ba-slider__tag { font-family: var(--font-heading); font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--stone-400); padding: 0 var(--space-6); text-align: center; }
.ba-slider__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--white);
  transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(19,28,54,.08); pointer-events: none; }
.ba-slider__handle-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; gap: 1px; color: var(--navy-700); }
.ba-slider__handle-icon .icon:first-child { transform: scaleX(-1); }
.ba-slider__label { position: absolute; top: var(--space-4); padding: 5px 12px; border-radius: var(--radius-sm);
  background: rgba(19,28,54,.75); color: var(--white); font-family: var(--font-heading); font-size: 11px;
  font-weight: var(--weight-semibold); letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }
.ba-slider__label--before { left: var(--space-4); }
.ba-slider__label--after { right: var(--space-4); }
/* Service-page sliders: full-frame, nothing cropped. Each item's inline aspect-ratio
   (set per-photo in build_service_pages.py) already fits its real photo, and contain
   is the safety net for the rare pair where before/after don't perfectly match. Scoped
   to this modifier only — the home page's curated .ba-slider (cover) is untouched. */
.ba-slider--contain .ba-slider__panel { background: var(--sand-100); }
.ba-slider--contain .ba-slider__panel img { object-fit: contain; }

/* ---------- full-photo gallery (masonry, nothing cropped) ---------- */
.gallery-grid { column-count: 3; column-gap: var(--space-6); }
.gallery-photo { break-inside: avoid; margin-bottom: var(--space-6); }
.gallery-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }

/* ---------- service-page components (checklists, numbered steps, compare tables) ---------- */
.check-list { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-3); }
.check-list--grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-body-md); color: var(--text-body); }
.check-list .icon { color: var(--orange-500); flex: 0 0 auto; margin-top: 3px; }
.check-list strong { color: var(--text-heading); }

.warn-list { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-3); }
.warn-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-body-md); color: var(--text-body); }
.warn-list .icon { color: var(--orange-600); flex: 0 0 auto; margin-top: 3px; }

.step-list { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-6); counter-reset: step; }
.step-list li { position: relative; padding-left: 56px; }
.step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy-700); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; }
.step-list h4 { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold); color: var(--text-heading); }
.step-list p { margin: 0; font-size: var(--text-body-sm); }

.table-scroll { overflow-x: auto; margin: var(--space-6) 0; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.compare-table th, .compare-table td { text-align: left; padding: var(--space-3) var(--space-5); font-size: var(--text-body-sm); border-bottom: 1px solid var(--border-subtle); }
.compare-table thead th { font-family: var(--font-heading); font-size: var(--text-caption); letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy-700); background: var(--sand-050); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:first-child td { color: var(--text-heading); }

/* ---------- legal pages (privacy policy, terms of service) ---------- */
.legal-page { padding-block: calc(var(--space-32) + var(--space-8)) var(--space-20); }
.legal-page__updated { color: var(--text-muted); font-size: var(--text-body-sm); margin: 0 0 var(--space-10); }
.legal-page h2 { margin-top: var(--space-10); font-size: var(--text-h4); }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page h3 { margin-top: var(--space-6); font-size: var(--text-h5); }
.legal-page ul, .legal-page ol { padding-left: 1.15em; margin: 0 0 var(--space-4); max-width: var(--measure); }
.legal-page li { margin-bottom: var(--space-2); color: var(--text-body); }
.legal-page a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--orange-600); }
.legal-page__toc { background: var(--sand-050); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); margin: 0 0 var(--space-10); }
.legal-page__toc p { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--navy-700); }
.legal-page__toc ol { margin: 0; columns: 2; column-gap: var(--space-8); }
.legal-page__toc li { font-size: var(--text-body-sm); break-inside: avoid; }

/* ---------- widget placeholder (reviews, map) ---------- */
.widget-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 200px; border-radius: var(--radius-lg); border: 1px dashed var(--sand-300); background: var(--sand-050);
  padding: var(--space-8); text-align: center; }
.widget-slot__label { font-family: var(--font-heading); font-size: var(--text-body-sm); font-weight: var(--weight-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--stone-600); }
.widget-slot__hint { font-family: var(--font-body); font-size: var(--text-caption); color: var(--text-muted); }

/* ---------- live Google reviews widget (js/google-reviews.js) ---------- */
.g-reviews { margin-top: var(--space-8); }
.g-reviews__summary { display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  margin-bottom: var(--space-8); flex-wrap: wrap; }
.g-reviews__score { font-family: var(--font-display); font-size: 40px; color: var(--navy-700); line-height: 1; }
.g-reviews__summary-right { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.g-reviews__stars, .g-reviews__card-stars { display: flex; gap: 2px; }
.g-reviews .icon.i-star { color: var(--orange-500); }
.g-reviews .g-reviews__star--empty { color: var(--sand-300); }
.g-reviews__count { font-size: var(--text-body-sm); color: var(--text-body); }
/* Coverflow carousel: viewport clips the track, each .g-reviews__slide gets its
   blur/scale/opacity set inline by google-reviews.js based on distance from the
   active (center) slide — CSS only owns the transition timing and static chrome. */
.g-reviews__carousel { display: flex; align-items: center; gap: var(--space-4); }
.g-reviews__carousel--static { justify-content: center; }
.g-reviews__carousel--static .g-reviews__nav { display: none; }
.g-reviews__viewport { overflow: hidden; flex: 1; min-width: 0; }
.g-reviews__track { display: flex; transition: transform var(--dur-slow) var(--ease-standard); will-change: transform; touch-action: pan-y; }
.g-reviews__slide { flex: 0 0 auto; width: min(380px, 84vw); padding: 0 var(--space-3);
  transition: filter var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.g-reviews__nav { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--white);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--navy-700); padding: 0;
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.g-reviews__nav:hover { border-color: var(--orange-300); color: var(--orange-600); }
.g-reviews__nav--prev .icon { transform: scaleX(-1); }
.g-reviews__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.g-reviews__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand-300); border: 0; padding: 0;
  cursor: pointer; transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.g-reviews__dot.is-active { background: var(--orange-500); transform: scale(1.3); }
.g-reviews__card { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-md); min-height: 220px; }
.g-reviews__card-text { font-size: var(--text-body-sm); color: var(--text-body); margin: var(--space-3) 0 var(--space-4);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.g-reviews__card-by { display: flex; align-items: center; gap: var(--space-3); }
.g-reviews__avatar { width: 40px; height: 40px; border-radius: 50%; display: block; object-fit: cover; flex: 0 0 auto; }
.g-reviews__avatar--fallback { display: flex; align-items: center; justify-content: center; background: var(--navy-100);
  color: var(--navy-700); font-family: var(--font-heading); font-weight: var(--weight-semibold); }
.g-reviews__card-by cite { display: block; font-style: normal; font-family: var(--font-heading);
  font-weight: var(--weight-semibold); font-size: var(--text-body-sm); color: var(--text-heading); }
.g-reviews__time { display: block; font-size: var(--text-caption); color: var(--text-muted); }
.g-reviews__footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.g-reviews__attribution { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption);
  color: var(--text-muted); text-decoration: none; }
.g-reviews__attribution:hover { color: var(--text-body); }
.g-reviews__error { text-align: center; color: var(--text-muted); font-size: var(--text-body-sm); }
@media (prefers-reduced-motion: reduce) { .g-reviews__track, .g-reviews__slide { transition: none; } }

/* ---------- live service-area map (Leaflet + free CARTO tiles) ---------- */
.map-embed { position: relative; width: 100%; aspect-ratio: 16 / 7; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--sand-100); border: 1px solid var(--border-subtle); }
.map-embed #serviceMap { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--sand-050); }
.map-embed .leaflet-container { font-family: var(--font-body); }
/* OSM's default tiles are more saturated than the brand's restrained navy/orange system — tone
   them down without touching the pins/popups/controls (they live in a separate Leaflet pane). */
.map-embed .leaflet-tile-pane { filter: grayscale(.35) saturate(.7) brightness(1.05) contrast(.95); }

/* custom city markers — a small orange dot standing in for Leaflet's default blue teardrop pin */
.map-pin { background: transparent; border: 0; }
.map-pin__dot { position: absolute; inset: 0; border-radius: 50%; background: var(--orange-500);
  border: 2px solid var(--white); box-shadow: var(--shadow-sm); }
/* the home base (Freedom) reads as "you are here" — navy instead of orange, plus a pulsing ring */
.map-pin--home .map-pin__dot { background: var(--navy-700); width: 130%; height: 130%; inset: -15%; z-index: 1; }
.map-pin__pulse { position: absolute; inset: -60%; border-radius: 50%; background: var(--navy-700);
  opacity: .35; animation: map-pin-pulse 2.4s ease-out infinite;
  will-change: transform, opacity; backface-visibility: hidden; }
@keyframes map-pin-pulse { 0% { transform: scale(.4); opacity: .35; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-pin__pulse { animation: none; opacity: .18; } }

/* popups + zoom control restyled to match the brand instead of Leaflet's stock chrome */
.leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.leaflet-popup-content { margin: var(--space-3) var(--space-4); font-size: var(--text-body-sm); color: var(--navy-700); }
.leaflet-popup-content strong { font-family: var(--font-heading); font-weight: var(--weight-bold); }
.leaflet-control-zoom { border: 1px solid var(--border-subtle) !important; box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-md) !important; overflow: hidden; }
.leaflet-control-zoom a { color: var(--navy-700) !important; background: var(--white) !important; }
.leaflet-control-zoom a:hover { background: var(--sand-050) !important; color: var(--orange-600) !important; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.85) !important; color: var(--stone-500) !important; }
.leaflet-control-attribution a { color: var(--stone-600) !important; }

/* ---------- Instagram grid ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.ig-grid__tile { aspect-ratio: 1 / 1; border-radius: var(--radius-md); background: var(--sand-100); overflow: hidden; display: block; }
.ig-grid__tile img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-standard); }
.ig-grid__tile:hover img { transform: scale(1.06); }

/* ---------- service area ---------- */
.city-pills { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-2); }
.city-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  background: var(--sand-050); color: var(--stone-600); border: 1px solid var(--sand-200); cursor: pointer;
  appearance: none; -webkit-appearance: none; margin: 0;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.city-pill:hover { border-color: var(--navy-300); }
.city-pill--active { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.city-pill--active:hover { border-color: var(--navy-700); }
.map-embed__reset { margin-top: var(--space-4); text-align: center; max-width: none; }

/* ---------- centered section CTA row ----------
   BUG FIX: base.css caps every <p> at max-width: var(--measure) (64ch ≈ 603px) for readable body
   text. These CTA rows are <p> too, so they were 603px wide and flush-left inside the container —
   text-align:center only centered the button inside that 603px box, which reads as ~275px off
   center on a wide screen. Lifting the cap on this class is the whole fix. */
.section-cta { max-width: none; text-align: center; margin: var(--space-8) 0 0; }
.section-cta--lg { margin-top: var(--space-10); }

/* ---------- FAQ accordion ---------- */
.faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: 800px; }
.faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--white);
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
.faq-item[open] { border-color: var(--orange-300); background: var(--orange-050); }
.faq-item summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-5); display: flex;
  align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--font-heading);
  font-size: var(--text-body-lg); font-weight: var(--weight-bold); color: var(--navy-700); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--navy-400); transition: transform var(--dur-base) var(--ease-standard); flex: 0 0 auto; }
.faq-item[open] summary .icon { transform: rotate(180deg); color: var(--orange-600); }
.faq-item__body { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-body-md); color: var(--text-body); }

/* ---------- forms ---------- */
.lead-form { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-lg); color: var(--text-body); }
.lead-form h3 { color: var(--navy-700); margin-bottom: var(--space-2); }
.lead-form > p { font-size: var(--text-body-sm); margin-bottom: var(--space-5); }
/* GHL (LeadConnector) embedded form — the iframe itself carries width/height:100% inline
   (per GHL's own embed snippet), so this wrapper is what actually holds the pixel height;
   form_embed.js resizes the iframe live as the form's own content loads/changes. */
.lead-form__embed { width: 100%; }
.lead-form__embed iframe { display: block; }
.field { margin-bottom: var(--space-4); }
.field label { display: block; margin-bottom: 6px; font-family: var(--font-heading); font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold); letter-spacing: .09em; text-transform: uppercase; color: var(--navy-700); }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; font-family: var(--font-body);
  font-size: var(--text-body-md); color: var(--stone-700); background: var(--white); padding: 12px 14px;
  border-radius: var(--radius-md); border: 1px solid var(--sand-300); outline: none;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-600); box-shadow: var(--ring-focus); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-microcopy { font-size: var(--text-caption); color: var(--text-muted); text-align: center; margin-top: var(--space-3); }
.form-consent { font-size: 11px; line-height: 1.6; color: var(--text-muted); margin-top: var(--space-4); }
.form-consent a { color: var(--text-link); }

.final-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.final-cta .section-head { margin-bottom: var(--space-6); }
/* same display-face thin+bold mix as the hero H1 — a deliberate bookend, not a one-off effect */
.cta-heading { font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: var(--ls-display); color: var(--white); margin-bottom: var(--space-3); }
.cta-heading .thin { font-family: var(--font-heading); font-weight: var(--weight-light); letter-spacing: 0; }
.final-cta__trust { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); font-size: var(--text-body-sm); color: var(--navy-200); }
.final-cta__trust span:not(:last-child)::after { content: "·"; margin-left: var(--space-2); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: var(--navy-200); padding-top: var(--space-16); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-10); }
.footer-col h4 { font-family: var(--font-heading); font-size: var(--text-eyebrow); font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--orange-500); margin-bottom: var(--space-4); }
.footer-col a, .footer-col p { display: block; color: var(--navy-200); font-size: var(--text-body-sm); text-decoration: none; margin-bottom: var(--space-2); }
.footer-col a:hover { color: var(--white); }
.footer-brand p { max-width: 320px; line-height: 1.7; color: var(--navy-200); margin-block: var(--space-4); }
.footer-social { display: flex; gap: var(--space-2); }
.footer-social a { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(255,255,255,.08);
  color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: rgba(255,255,255,.18); color: var(--white); }
.footer-bottom { border-top: 1px solid var(--border-inverse); margin-top: var(--space-12); }
.footer-bottom .container { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5); font-size: var(--text-caption); }
.footer-bottom a { color: var(--navy-200); margin-right: var(--space-5); }
.footer-license { font-size: var(--text-caption); color: var(--navy-300); margin-top: var(--space-4); }

/* ---------- mobile sticky bar ---------- */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
.mobile-bar__inner { display: grid; grid-template-columns: 1fr 1fr; }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4); font-family: var(--font-heading); font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: .04em; font-size: var(--text-body-sm); text-decoration: none; }
.mobile-bar__call { background: var(--navy-700); color: var(--white); }
.mobile-bar__quote { background: var(--orange-500); color: var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .review-grid, .ba-slider-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { column-count: 2; }
  .agitate, .final-cta { grid-template-columns: 1fr; gap: var(--space-8); }
  .review-featured { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .badge-rotate { width: 76px; height: 76px; right: var(--space-4); bottom: calc(var(--space-6) * -1); }
  .badge-rotate__center { width: 28px; height: 28px; }
  /* BUG FIX: the desktop nav (logo + 8 links + CTA button) needs ~1000px+ to fit on one line
     without wrapping/overflowing. The hamburger drawer used to only kick in below 768px, leaving
     a ~769-1023px dead zone (tablets, small laptop windows) where the nav visibly overflowed its
     header pill. Moving the drawer breakpoint up to 1024px closes that gap. */
  .nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: var(--white); flex-direction: column;
    align-items: stretch; padding: var(--space-20) var(--space-6) var(--space-6); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-standard); overflow-y: auto; }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--sand-200); }
  .nav__link { padding-block: var(--space-4); justify-content: space-between; }
  .nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    display: none; padding-left: var(--space-4); }
  .nav__item.is-expanded .nav__dropdown { display: block; }
  .nav .btn { margin-top: var(--space-6); }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .mobile-bar { display: block; }
  body { padding-bottom: 60px; }
}
@media (max-width: 768px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .why-card:first-child { flex-direction: column; align-items: flex-start; text-align: left; }
  .services-grid, .why-grid, .review-grid, .ba-slider-grid, .showcase-grid, .check-list--grid { grid-template-columns: 1fr; }
  .gallery-grid { column-count: 1; }
  .g-reviews__summary { justify-content: flex-start; text-align: left; }
  .g-reviews__nav { display: none; }
  .legal-page__toc ol { columns: 1; }
  .process__num { width: 44px; height: 44px; font-size: 18px; }
  .process::before { left: 21px; }
  .process__step { grid-template-columns: 44px 1fr; }
  .process__step:not(:last-child) { margin-bottom: var(--space-10); }
  .process__content { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .process__photo { width: 100%; flex: none; aspect-ratio: 21 / 9; }
  .field-row { grid-template-columns: 1fr; }
  .hero { padding-block: calc(var(--space-24) + var(--space-6)) 0; }
  .hero__sub { font-size: var(--text-body-md); line-height: 1.55; }
  .site-header { top: 40px; }
  .hero__photo-wrap { margin-bottom: -28px; }
  .trust-bar { padding-top: 28px; }
  .trust-bar .container { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .topbar .container { justify-content: center; }
  .topbar__area { display: none; }
  .stats__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .badge-rotate { width: 64px; height: 64px; right: var(--space-3); bottom: calc(var(--space-4) * -1); }
  .badge-rotate__center { width: 24px; height: 24px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .service-card, .why-card, .why-card:first-child, .service-card__icon-badge, .nav, .faq-item summary .icon, .btn {
    transition: none;
  }
  .service-card:hover, .why-card:hover, .btn:active {
    transform: none;
  }
}