:root {
  --black: #08090b;
  --black-2: #101216;
  --black-3: #181b20;
  --char: #23272d;
  --orange: #fc7a1a;
  --orange-hi: #fe9b2a;
  --orange-deep: #e2620a;
  /* TEXT ORANGE FOR LIGHT BACKGROUNDS. The brand orange (#fc7a1a) is gorgeous on
     black and fails WCAG AA badly on white — it measured 2.26:1 as a 12.5px
     eyebrow on the soft panel, where 4.5 is the floor. This is the only orange
     allowed on small text over a light surface: 5.84:1 on #fff, 5.41:1 on the
     paper gray, 4.99:1 on the soft gray, all measured. Bright --orange stays for
     dark sections, where it passes comfortably. */
  --orange-ink: #a8480a;
  --chrome: #d8dce1;
  --chrome-2: #9aa0a6;
  --text: #1a1d22;
  --muted: #5d6470;
  --muted-dark: #a2a9b4;
  --paper: #f6f6f7;
  --soft: #ecedf0;
  --white: #fff;
  --line: rgba(26, 29, 34, .12);
  --line-dark: rgba(255, 255, 255, .11);
  --shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; overflow-x: hidden; }
body.menu-open, body.lb-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, a, span, strong, article, section, div { min-width: 0; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-weight: 900; letter-spacing: -.022em; line-height: 1.1; margin: 0 0 14px; }
h1 { font-size: clamp(34px, 5.4vw, 62px); }
h2 { font-size: clamp(26px, 3.4vw, 42px); }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }
/* Dark by default because most sections are light; the dark-surface override
   directly below flips it back to the bright brand orange. Getting this the
   wrong way round is what produced 59 contrast failures on the first build. */
.eyebrow { display: inline-block; margin-bottom: 12px; color: var(--orange-ink); font-size: 12.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero .eyebrow, .subhero .eyebrow, .section.dark .eyebrow, .mobile-band .eyebrow,
.meet-band .eyebrow, .mission-band .eyebrow, .cta-band .eyebrow, .stat-stack .eyebrow { color: var(--orange); }

/* header ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px clamp(16px, 4vw, 56px); background: rgba(8, 9, 11, .93); border-bottom: 1px solid rgba(252, 122, 26, .28); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; min-width: 0; }
.brand-logo { width: auto; height: 46px; flex: 0 0 auto; }
.nav-links { display: flex; gap: 22px; color: rgba(255,255,255,.84); font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--orange-hi); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.phone-link { color: var(--chrome); font-weight: 900; white-space: nowrap; }
.phone-link:hover { color: var(--orange-hi); }
.menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: transparent; position: relative; }
.menu-toggle span, .menu-toggle:before, .menu-toggle:after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 999px; background: #fff; }
.menu-toggle span { top: 22px; } .menu-toggle:before { top: 15px; } .menu-toggle:after { top: 29px; }
.mobile-menu { display: none; }

/* buttons --------------------------------------------------------------- */
.btn { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 12px; padding: 0 24px; font-size: 13.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; text-align: center; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.btn.primary { background: linear-gradient(180deg, var(--orange-hi), var(--orange-deep)); color: #14100a; box-shadow: 0 6px 20px rgba(252,122,26,.4); }
.btn.light { background: #fff; color: var(--black); border-color: #fff; }
/* dark backgrounds only — see the note at the top of css() */
.btn.ghost, .btn.dark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn.ghost:hover, .btn.dark-ghost:hover { border-color: var(--orange); color: var(--orange-hi); }
/* the light-background equivalent */
.btn.outline { background: transparent; color: var(--text); border-color: rgba(26,29,34,.28); }
.btn.outline:hover { border-color: var(--orange); color: var(--orange-ink); }
.btn.block { display: flex; width: 100%; margin-bottom: 10px; }

/* hero ------------------------------------------------------------------ */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr); align-items: center; gap: clamp(28px, 5vw, 68px); padding: clamp(44px, 7vw, 96px) clamp(16px, 5vw, 76px); background: radial-gradient(circle at 84% 6%, rgba(252,122,26,.20), transparent 46%), radial-gradient(circle at 8% 96%, rgba(216,220,225,.10), transparent 44%), linear-gradient(155deg, #08090b, #14171b 56%, #1c2026); color: #fff; overflow: hidden; }
.hero > *:not(.shine-motion) { position: relative; z-index: 1; }
.hero h1 { margin-bottom: 16px; }
.hero p { color: rgba(255,255,255,.8); font-size: 17px; max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; color: var(--muted-dark); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.trust-row span { position: relative; padding-left: 16px; }
.trust-row span:before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--orange); }
.hero-photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-dark); }
/* height:auto is REQUIRED: the img carries width/height attributes for CLS, and
   the HTML height attribute becomes a presentational height in px, which makes
   CSS aspect-ratio be IGNORED. Without this the hero renders at the photo's full
   intrinsic height. */
.hero-photo img { width: 100%; height: auto; display: block; }
.hero-photo-badge { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(8,9,11,.82); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(6px); }

/* shine motion ---------------------------------------------------------- */
.shine-motion { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shine-motion .gloss { position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; right: -10vw; top: -14vw; border-radius: 50%; background: radial-gradient(circle, rgba(252,122,26,.22), transparent 66%); filter: blur(8px); animation: drift 17s ease-in-out infinite alternate; }
.shine-motion .gloss.amber { left: -12vw; right: auto; top: auto; bottom: -18vw; background: radial-gradient(circle, rgba(216,220,225,.14), transparent 66%); animation-duration: 23s; }
.shine-motion .sweep { position: absolute; top: -30%; left: -40%; width: 26%; height: 170%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.13) 42%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.13) 58%, transparent); transform: rotate(14deg); animation: sweep 8.5s ease-in-out infinite; }
.shine-motion .sweep-2 { width: 12%; animation-duration: 12.5s; animation-delay: 3.2s; opacity: .7; }
.shine-motion .flecks i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .5; box-shadow: 0 0 8px rgba(255,255,255,.75); animation: twinkle var(--t) ease-in-out var(--d) infinite; }
.shine-motion.compact .sweep { animation-duration: 11s; }
@keyframes sweep { 0% { left: -40%; } 55% { left: 118%; } 100% { left: 118%; } }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-26px, 22px, 0); } }
@keyframes twinkle { 0%, 100% { opacity: .12; transform: scale(.8); } 50% { opacity: .85; transform: scale(1.25); } }

/* sections -------------------------------------------------------------- */
.section { padding: clamp(52px, 7vw, 96px) clamp(16px, 5vw, 76px); }
.section.soft { background: var(--soft); }
.section.dark { background: linear-gradient(160deg, var(--black), var(--black-3)); color: #fff; }
.section.dark p { color: rgba(255,255,255,.78); }
.section-head { max-width: 62ch; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.section-head p { color: var(--muted); font-size: 16.5px; }
.section.dark .section-head p { color: rgba(255,255,255,.72); }
.section-foot { margin-top: 32px; display: flex; justify-content: center; }
.subhero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(52px, 7vw, 92px) clamp(16px, 5vw, 76px) clamp(40px, 5vw, 64px); background: radial-gradient(circle at 88% 0%, rgba(252,122,26,.20), transparent 48%), linear-gradient(155deg, #08090b, #16191e); color: #fff; }
.subhero > *:not(.shine-motion) { position: relative; z-index: 1; }
.subhero h1 { max-width: 24ch; }
.subhero p { color: rgba(255,255,255,.8); font-size: 17px; max-width: 66ch; margin-bottom: 0; }
.service-ribbon { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 20px clamp(16px, 5vw, 76px); background: var(--black-2); }
.service-ribbon span { padding: 7px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* marquee --------------------------------------------------------------- */
.makes-band { padding: 26px 0 30px; background: var(--black); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); overflow: hidden; }
.makes-head { margin: 0 0 14px; text-align: center; color: var(--muted-dark); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.make-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.make-track { display: flex; gap: 42px; width: max-content; animation: marquee 42s linear infinite; }
.make-item { color: #fff; font-size: clamp(15px, 2vw, 20px); font-weight: 900; letter-spacing: .02em; white-space: nowrap; opacity: .85; }
.make-item:nth-child(3n) { color: var(--orange); }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* cards ----------------------------------------------------------------- */
.card-grid { display: grid; gap: 20px; }
.card-grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.service-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(0,0,0,.11); border-color: rgba(252,122,26,.4); }
.service-card > a { display: block; padding: 0; height: 100%; }
/* The photo is clipped to the card's top corners, so .card-photo carries the
   radius and the overflow. The icon badge therefore CANNOT live inside it — it
   overhangs the photo's bottom edge and would be cut in half. It sits in
   .card-body instead and is pulled back up by its own height plus the body's
   top padding. */
.card-photo { display: block; overflow: hidden; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; background: #0d0e11; }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform .5s ease; }
.service-card:hover .card-photo img { transform: scale(1.045); }
.card-body { display: block; padding: 22px 24px 24px; }
.card-badge { display: grid; place-items: center; width: 46px; height: 46px; margin: -45px 0 14px; border-radius: 13px; background: var(--black); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 22px rgba(0,0,0,.3); position: relative; }
.service-icon { width: 24px; height: 24px; color: var(--orange); }
.service-card p { color: var(--muted); font-size: 15px; }
.card-link { color: var(--orange-ink); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.value-grid, .tips-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.value-card, .tip-card { padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.value-card p, .tip-card p { color: var(--muted); font-size: 15px; margin-bottom: 0; }
.value-card h3, .tip-card h3 { color: var(--black); }
.tip-card { border-left: 3px solid var(--orange); }
.stacked-list { display: grid; gap: 14px; }
.stacked-list article { padding: 20px 22px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.stacked-list strong { display: block; margin-bottom: 6px; font-size: 16px; }
.stacked-list p { margin: 0; font-size: 15px; }
.split { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.two-col { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.tick-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 30px; color: var(--muted); }
.tick-list li:before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 14px; border: solid var(--orange); border-width: 0 3px 3px 0; transform: rotate(42deg); }
.photo-frame, .meet-photo img { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); width: 100%; height: auto; }
.meet-photo { margin: 0; }
.process-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.process-card { position: relative; padding: 30px 24px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.process-num { position: absolute; top: -16px; left: 22px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: #14100a; font-weight: 900; }
.process-card p { color: var(--muted); font-size: 15px; margin-bottom: 0; }
.section.soft .process-card, .section.soft .value-card, .section.soft .tip-card { background: #fff; }

/* bands ----------------------------------------------------------------- */
.intro-band { background: var(--paper); }
.intro-inner, .mobile-inner, .meet-band-inner, .brand-band-inner { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; max-width: 1240px; margin: 0 auto; }
.stat-stack { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-stack article { padding: 22px 20px; background: var(--black); color: #fff; border-radius: var(--radius); }
.stat-stack strong { display: block; font-size: 38px; font-weight: 900; line-height: 1; color: var(--orange); }
.stat-stack span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted-dark); }
.mobile-band { background: linear-gradient(160deg, var(--black), var(--black-3)); color: #fff; }
.mobile-band p { color: rgba(255,255,255,.78); }
.mobile-photos { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.mobile-photos figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-dark); }
.mobile-photos figure:first-child { grid-column: span 2; }
.mobile-photos img { width: 100%; height: auto; }
.meet-band { background: var(--black-2); color: #fff; }
.meet-band p { color: rgba(255,255,255,.78); }
.meet-band .meet-photo img { border-radius: 18px; }
.work-strip { background: var(--paper); }
.work-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 1240px; margin: 0 auto; }
.work-tile { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.work-tile img { width: 100%; height: auto; transition: transform .35s ease; }
.work-tile:hover img { transform: scale(1.04); }
.brand-band { background: var(--soft); }
.brand-band-mark img { max-width: 340px; margin-bottom: 16px; }
.brand-band-tag { font-size: 20px; font-weight: 900; color: var(--black); }
.brand-band-mark p { color: var(--muted); }
.brand-band-photo { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.brand-band-photo img { width: 100%; height: auto; }
.mission-band { background: var(--black); color: #fff; text-align: center; }
.mission-inner { max-width: 900px; margin: 0 auto; }
.mission-quote { font-family: "Segoe UI", system-ui, sans-serif; font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; line-height: 1.25; margin-bottom: 12px; }
.mission-by { color: var(--orange); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; margin: 0; }
.guarantee-band { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: clamp(34px, 4.5vw, 54px) clamp(16px, 5vw, 76px); background: linear-gradient(120deg, var(--orange-deep), var(--orange-hi)); color: #14100a; }
.guarantee-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; max-width: 1240px; margin: 0 auto; width: 100%; }
.guarantee-inner > div { flex: 1 1 340px; }
.guarantee-inner p { margin-bottom: 0; color: rgba(20,16,10,.82); }
.guarantee-inner .eyebrow { color: rgba(20,16,10,.6); }
.guarantee-icon { width: 54px; height: 54px; flex: 0 0 auto; color: #14100a; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding: clamp(40px, 5.5vw, 68px) clamp(16px, 5vw, 76px); background: linear-gradient(150deg, var(--black), #1d2127); color: #fff; }
.cta-band > div:first-child { flex: 1 1 420px; }
.cta-band p { color: rgba(255,255,255,.78); margin-bottom: 0; max-width: 60ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* reviews --------------------------------------------------------------- */
.review-band { background: var(--soft); }
.review-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); max-width: 1240px; margin: 0 auto; }
.review-card { display: flex; flex-direction: column; padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.review-stars { color: var(--orange-ink); font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.review-card blockquote { margin: 0 0 18px; font-size: 15.5px; color: var(--text); }
.review-card footer { margin-top: auto; }
.review-card strong { display: block; }
.review-card footer span { color: var(--muted); font-size: 13px; }

/* areas ----------------------------------------------------------------- */
.county-stack { display: grid; gap: 22px; max-width: 1240px; margin: 0 auto; }
.county-block { padding: 28px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.county-block header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.county-block h2 { margin-bottom: 6px; }
.county-count { color: var(--orange-ink); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.county-block > p { color: var(--muted); max-width: 84ch; }
.pill-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-grid-spaced { margin-top: 28px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.pill em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 700; }
.pill:hover { background: var(--black); color: #fff; border-color: var(--black); }
.pill:hover em { color: var(--orange); }
.pill-all { background: var(--orange); border-color: var(--orange); color: #14100a; }
.county-block .pill { background: var(--paper); }
.scene-panel { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.scene-panel svg { width: 100%; height: auto; }

/* video ------------------------------------------------------------------ */
.video-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); max-width: 1240px; margin: 0 auto; }
.video-grid.one { max-width: 760px; }
.video-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* Height is set by aspect-ratio rather than left to the file, so a portrait
   phone clip cannot stretch its card to three times the height of the one
   beside it. object-fit letterboxes it against the black stage instead. */
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0d0e11; }
.video-card figcaption { padding: 13px 16px; color: var(--muted); font-size: 13.5px; }

/* before / after ---------------------------------------------------------
   --ba is the reveal position. It is set on .ba-stage by site.js and defaults
   to 50% here, so a no-JS visitor gets a fixed half-and-half comparison. */
.ba-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); max-width: 1240px; margin: 0 auto; }
/* One pair on its own would otherwise stretch the full 1240px, and at 3:2 that
   is an 800px-tall slab of one photo. The class is set by the renderer rather
   than by :has(), so it does not depend on selector support. */
.ba-grid.one { max-width: 760px; }
.ba { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ba-stage { --ba: 50%; position: relative; aspect-ratio: 3 / 2; background: #0d0e11; touch-action: pan-y; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-tag, .ba-handle { pointer-events: none; }
.ba-tag { position: absolute; bottom: 12px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; background: rgba(8,9,11,.72); color: #fff; }
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; background: var(--orange); color: #12130f; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(8,9,11,.28); }
.ba-grip { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.34); }
/* The arrows are drawn rather than typed so the grip needs no icon font. */
.ba-grip::before, .ba-grip::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; }
.ba-grip::before { left: 8px; border-right-color: var(--black); margin-top: -6px; }
.ba-grip::after { right: 8px; border-left-color: var(--black); margin-top: -6px; }
/* The real control: full-bleed, invisible, on top of everything. Opacity 0
   rather than visibility:hidden so it still takes pointer and focus events. */
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ba-range::-moz-range-thumb { width: 44px; height: 100%; border: 0; }
.ba-range:focus-visible { outline: none; }
.ba-range:focus-visible ~ .ba-handle .ba-grip { box-shadow: 0 0 0 3px var(--orange), 0 6px 18px rgba(0,0,0,.34); }
html:not(.js) .ba-range, html:not(.js) .ba-grip { display: none; }
.ba figcaption { padding: 13px 16px; color: var(--muted); font-size: 13.5px; }

/* gallery --------------------------------------------------------------- */
.photo-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-width: 1240px; margin: 0 auto; }
.photo-tile { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* aspect-ratio needs height:auto to beat the img height attribute — same trap as
   .hero-photo. object-fit then makes straight-from-the-phone photos of any size
   line up in a grid without shifting as they load. */
.photo-tile img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.photo-tile figcaption { padding: 12px 14px; color: var(--muted); font-size: 13.5px; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; grid-template-areas: "img"; padding: 4vh 6vw; background: rgba(4,5,7,.94); }
.lightbox.open { display: grid; }
.lightbox img { grid-area: img; max-width: 100%; max-height: 78vh; width: auto; border-radius: 12px; box-shadow: var(--shadow); }
.lb-caption { position: absolute; left: 0; right: 0; bottom: 3vh; margin: 0; text-align: center; color: rgba(255,255,255,.86); font-size: 14px; padding: 0 6vw; }
.lightbox button { position: absolute; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; border-radius: 50%; width: 48px; height: 48px; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: var(--orange); border-color: var(--orange); color: #14100a; }
.lb-close { top: 3vh; right: 4vw; }
.lb-prev { left: 2vw; top: 50%; margin-top: -24px; }
.lb-next { right: 2vw; top: 50%; margin-top: -24px; }

/* faq ------------------------------------------------------------------- */
.faq-section { background: var(--paper); }
.faq-list { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-item summary { padding: 18px 22px; font-weight: 800; cursor: pointer; list-style: none; position: relative; padding-right: 52px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:after { content: "+"; position: absolute; right: 22px; top: 50%; margin-top: -13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--orange-ink); font-weight: 900; }
.faq-item[open] summary:after { content: "\2212"; background: var(--orange); color: #14100a; }
.faq-item > div { padding: 0 22px 20px; color: var(--muted); }

/* contact --------------------------------------------------------------- */
/* Stacked by default. Two columns need 320 (card) + 44 (gap) + 808 (750 form
   + 28px padding each side + borders) = 1172px of CONTENT width, and .section
   eats clamp(16px,5vw,76px) of padding on each side, so 1320px of viewport is
   the first width where that actually fits. The form column is minmax(0,808px)
   rather than a flat 808px so it can still shrink instead of overflowing. */
.contact-grid { display: grid; gap: clamp(24px, 3.5vw, 44px); grid-template-columns: 1fr; align-items: start; max-width: 1240px; margin: 0 auto; }
/* max-width is raised here, and only here, because .contact-grid IS the
   .section element: the section's own clamp(16px,5vw,76px) side padding comes
   out of this max-width, so a 1240px cap leaves 1096px of CONTENT and the two
   columns need 320 + 44 + 808 = 1172. Measured, not assumed — at 1240 the form
   rendered 674px wide instead of 750 and the browser gate caught it. 1340
   leaves ~24px of slack at the 1320px breakpoint and keeps the info card
   beside the form instead of stacking it. */
@media (min-width: 1320px) {
  .contact-grid { max-width: 1340px; grid-template-columns: minmax(320px, 1fr) minmax(0, 808px); }
}
.contact-card, .contact-form-wrap { padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
/* The estimate card sits on a LIGHT panel, so its paragraphs must not inherit a
   near-white color from any dark-section rule. This exact combination has
   rendered an invisible card on a previous build — keep the explicit color. */
.contact-card p, .contact-form-wrap p { color: var(--muted); }
.contact-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 22px 0 0; }
.contact-list dt { color: var(--black); font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.contact-list dd { margin: 0; color: var(--muted); }
.contact-list a { color: var(--orange-ink); font-weight: 700; }
.contact-social { display: flex; flex-wrap: wrap; gap: 12px; }
.quote-form { display: grid; gap: 14px; }
.quote-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--black); }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; padding: 13px 14px; border: 1px solid rgba(26,29,34,.2); border-radius: 10px; font: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); background: #fff; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.quote-form textarea { resize: vertical; }
.form-note { font-size: 13px; margin: 0; }
.form-note a { color: var(--orange-ink); font-weight: 800; }
/* The GHL form was widened to 750px on the LeadConnector side on 4 Sep 2026,
   so the embed is capped at exactly that and centred rather than stretched:
   letting a 750px-wide form render into a wider box just adds dead space
   inside the iframe. The two-column contact grid below only had ~542px of
   inner width, which would have squeezed it, so that grid now needs 1320px of
   viewport before it goes side-by-side and stacks under that.

   min-height stays a 640px COLLAPSE FLOOR and is deliberately not raised to
   the embed's data-height of 888: form_embed.js is loaded on this page and
   resizes the frame to its real height, and a wider form is usually a shorter
   one, so a taller floor would show as blank space under the fields. What must
   never appear here is a percentage height — that computes to a 0px floor and
   collapses the frame silently, taking the client's lead channel with it. The
   static gate rejects one and the browser gate measures the rendered box. */
.ghl-form { display: block; width: 100%; max-width: 750px; margin-inline: auto; min-height: 640px; border: 0; border-radius: 12px; }

/* prose ----------------------------------------------------------------- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { font-size: 23px; margin-top: 34px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); }
.prose a { color: var(--orange-ink); font-weight: 700; }
/* Added 4 Sep 2026 — the A2P Terms copy is the first prose on this site with a
   real list in it. Same --muted as .prose p, so it inherits a text colour the
   contrast loop in the static gate already checks against every ground. */
/* Bottom margin matches the global paragraph rhythm of 0 0 14px. Without it
   the paragraph after a list butts straight against the last bullet, because
   paragraphs here carry no TOP margin to open the gap themselves. */
.prose ul { margin: 12px 0 14px; padding-left: 22px; color: var(--muted); }
.prose li { margin-bottom: 7px; }

/* footer ---------------------------------------------------------------- */
.footer { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding: clamp(44px, 5.5vw, 72px) clamp(16px, 5vw, 76px) 34px; background: var(--black); color: rgba(255,255,255,.72); }
.footer-brand { margin-bottom: 16px; }
.footer .brand-logo { height: 52px; }
.footer p { font-size: 14.5px; }
.footer-tag { color: var(--orange); font-weight: 900; font-size: 17px; }
.footer-lic { color: var(--muted-dark); font-size: 13px; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { color: var(--chrome); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.footer-social a:hover, .footer-grid a:hover { color: var(--orange-hi); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; align-content: start; font-size: 14px; font-weight: 700; }
.mobile-sticky { display: none; }

/* reveal ---------------------------------------------------------------- */
/* Visible by default; hidden only when JS is confirmed present. */
html.js .reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* responsive ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 460px; }
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav-actions { display: none; }
  .mobile-menu { display: none; position: fixed; inset: 78px 0 0; z-index: 49; padding: 24px clamp(16px, 5vw, 40px); background: rgba(8,9,11,.98); flex-direction: column; gap: 4px; overflow-y: auto; }
  body.menu-open .mobile-menu { display: flex; }
  .mobile-menu a { padding: 16px 4px; border-bottom: 1px solid var(--line-dark); color: #fff; font-size: 17px; font-weight: 800; }
  /* Two buttons since 4 Sep 2026 (call + prefilled text), so this is a
     container now rather than a button itself. Both children are SOLID —
     primary orange and .light white-on-black — because this bar floats over
     whatever section happens to be behind it, and a transparent ghost button
     would be unreadable against a photo. */
  .mobile-sticky { display: flex; gap: 10px; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 48; opacity: 0; pointer-events: none; transform: translate3d(0, 14px, 0); transition: opacity .25s ease, transform .25s ease; }
  .mobile-sticky .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; box-shadow: 0 10px 26px rgba(0,0,0,.3); }
  .mobile-sticky.show { opacity: 1; pointer-events: auto; transform: none; }
  .footer { padding-bottom: 96px; }
  .mobile-photos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .guarantee-inner { flex-direction: column; align-items: flex-start; }
  .lb-prev, .lb-next { top: auto; bottom: 3vh; margin-top: 0; }
  .lb-prev { left: 22%; } .lb-next { right: 22%; }
  .lb-caption { bottom: 12vh; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card:hover .card-photo img { transform: none; }
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .make-track { animation: none; }
}