/* ============================================================
   Jacuzzi Bath Remodel × Yancey Home Improvements
   Conversion landing page — design system
   ============================================================ */

:root {
  --ink: #010101;
  --ink-80: rgba(1, 1, 1, 0.80);
  --ink-60: rgba(1, 1, 1, 0.60);
  --ink-45: rgba(1, 1, 1, 0.45);

  --orange: #F05D1A;
  --orange-dk: #C4460F;
  --orange-soft: #FDE6DC;

  --paper: #FBF8F3;
  --sand: #F1E8DB;
  --sand-deep: #E7DAC7;
  --charcoal: #161310;
  --charcoal-2: #211C17;

  --line: rgba(1, 1, 1, 0.12);
  --line-soft: rgba(1, 1, 1, 0.07);

  --shadow-sm: 0 1px 2px rgba(1,1,1,.06), 0 2px 8px rgba(1,1,1,.04);
  --shadow-md: 0 4px 14px rgba(1,1,1,.08), 0 18px 40px rgba(1,1,1,.08);
  --shadow-lg: 0 10px 30px rgba(1,1,1,.12), 0 30px 70px rgba(1,1,1,.14);

  --maxw: 1200px;
  --r: 14px;
  --r-lg: 22px;

  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

/* anchored targets clear the sticky header */
#quote, #final, #top { scroll-margin-top: 96px; }
.ico-i { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -2px; flex: none; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
.serif-i { font-style: italic; }

.display {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.015em; text-wrap: balance; }
.h3 { font-size: clamp(22px, 2.4vw, 28px); }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-80); line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 800; font-size: 17px;
  border: none; cursor: pointer; border-radius: 12px;
  padding: 17px 26px; min-height: 56px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-align: center; line-height: 1.1;
}
.btn:active { transform: translateY(1px); }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(240,93,26,.38); }
.btn-orange:hover { background: var(--orange-dk); color: #fff; box-shadow: 0 10px 26px rgba(240,93,26,.46); }
/* consultation buttons — ink black on light surfaces (orange is reserved for phone) */
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(1,1,1,.22); }
.btn-ink:hover { background: #000; color: #fff; box-shadow: 0 12px 28px rgba(1,1,1,.30); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(1,1,1,.18); }
.btn-white:hover { background: var(--sand); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
.btn .sub { display: block; font-weight: 600; font-size: 12.5px; opacity: .82; letter-spacing: .02em; margin-top: 2px; }
.btn-stack { flex-direction: column; gap: 0; padding-top: 12px; padding-bottom: 12px; }

/* ---------- Placeholders ---------- */
.ph {
  position: relative;
  background-color: var(--sand);
  background-image: repeating-linear-gradient(45deg, rgba(1,1,1,.045) 0 14px, rgba(1,1,1,0) 14px 28px);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45); text-align: center; padding: 10px 14px; line-height: 1.4;
}
.ph.on-dark { background-color: #2a2520; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px); border-color: rgba(255,255,255,.08); }
.ph.on-dark::after { color: rgba(255,255,255,.4); }
.ph-rounded { border-radius: var(--r); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px;
  background: #fff; border: 1px solid var(--line);
  padding: 9px 14px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.chip .dot { color: var(--orange); font-weight: 900; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--orange-soft); color: #8a2f08;
  border: 1px solid rgba(240,93,26,.35);
  font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px;
}
.badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(240,93,26,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(240,93,26,.5);} 70%{box-shadow:0 0 0 8px rgba(240,93,26,0);} 100%{box-shadow:0 0 0 0 rgba(240,93,26,0);} }

/* ---------- Image fills ---------- */
.shot { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Sections ---------- */
section { position: relative; }
.sect { padding: clamp(56px, 8vw, 104px) 0; }
.sect-sm { padding: clamp(40px, 5vw, 64px) 0; }
.sect-head { max-width: 760px; }
.sect-head.center { margin: 0 auto; text-align: center; }
.sect-dark { background: var(--charcoal); color: #f4efe8; }
.sect-dark .lead { color: rgba(244,239,232,.78); }
.sect-sand { background: var(--sand); }
.sect-why{background:linear-gradient(180deg,#fff 0%,var(--sand) 100%)}
.sect-why .lead{color:var(--ink-60)}
.sect-why .ben{background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm)}
.sect-why .ben h3{color:var(--ink)}
.sect-why .ben p{color:var(--ink-60)}
.sect-why .creds{background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm)}
.sect-why .creds .cr-head{border-bottom-color:var(--line-soft)}
.sect-why .creds .cr-head h3{color:var(--ink)}
.sect-why .cr-list li{color:var(--ink-60)}
.sect-why .cr-list li b{color:var(--ink)}
/* SERVICE AREA */
.svc-cities{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:12px 54px;margin:34px auto 34px;max-width:900px}
.svc-cities li{display:flex;align-items:baseline;gap:10px;font-size:16.5px;font-weight:600;color:var(--ink-80)}
.svc-cities li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.svc-card{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line-soft)}
.svc-bar{background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px 14px 26px}
.svc-bar-t{font-family:var(--sans);font-size:clamp(17px,2.1vw,27px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.svc-bar-t b{font-weight:900}
.svc-bar-t span{color:var(--ink)}
.svc-bar-logo{background:#fff;border-radius:10px;padding:8px 16px;flex:none;box-shadow:0 3px 12px rgba(1,1,1,.18)}
.svc-bar-logo img{height:clamp(34px,4vw,54px);width:auto;display:block}
.svc-img{display:block;width:100%;height:auto}
.svc-foot{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 26px}
.svc-foot .sf-l{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:10px}
.svc-foot .sf-l .pin{color:var(--orange)}
.svc-foot .sf-l a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.svc-foot .sf-l a:hover{color:var(--orange);border-color:var(--orange)}
.svc-foot .sf-r{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.62);text-align:right;border-left:1px solid rgba(255,255,255,.2);padding-left:24px}
@media (max-width:780px){.svc-cities{grid-template-columns:repeat(2,auto);gap:10px 40px}.svc-foot{flex-direction:column;align-items:flex-start;gap:12px}.svc-foot .sf-r{border-left:0;padding-left:0;text-align:left}}


.kicker { color: var(--orange); }

/* ============================================================
   TOP OFFER BAR
   ============================================================ */
.offerbar {
  background: var(--ink); color: #fff;
  font-size: 14.5px; font-weight: 600;
  position: relative; z-index: 60;
}
.offerbar .wrap { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; text-align: center; flex-wrap: wrap; }
.offerbar strong { color: var(--orange); font-weight: 800; }
.offerbar .ob-call { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; border-bottom: 1.5px solid rgba(255,255,255,.4); padding-bottom: 1px; white-space: nowrap; }
.offerbar .ob-call:hover { border-color: var(--orange); color: var(--orange); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,248,243,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }

/* co-brand lockup */
.cobrand { display: flex; align-items: center; gap: 18px; }
.cobrand .yancey-logo { height: 50px; width: auto; }
.cobrand .divider { width: 1px; height: 44px; background: var(--line); }
.cobrand .jac { height: 25px; width: auto; }
.cobrand.on-dark .yancey-logo { filter: brightness(0) invert(1); }

.head-cta { display: flex; align-items: center; gap: 18px; }
.head-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.head-phone .lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.head-phone .num { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.head-phone .num:hover { color: var(--orange); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background-color: #15100c;
  background-image: url("photos/imgi_4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(96deg, rgba(8,6,4,.86) 0%, rgba(8,6,4,.58) 42%, rgba(8,6,4,.30) 66%, rgba(8,6,4,.12) 100%);
}
/* desktop framing of the hero scene */
@media (min-width: 821px) {
  .hero { background-position: center 42%; }
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: clamp(40px,6vw,76px) 0 clamp(48px,6vw,88px); }
.hero-copy .badge { margin-bottom: 22px; }
.hero h1 { margin-bottom: 20px; color: #fff; text-shadow: 0 1px 30px rgba(0,0,0,.25); }
.hero h1 em { color: var(--orange); font-style: italic; }
.hero .lead { max-width: 540px; margin-bottom: 24px; color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(0,0,0,.5); }

.hero-offer {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 26px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: #fff; box-shadow: var(--shadow-sm); max-width: 540px;
}
.hero-offer .ho-main { padding: 16px 20px; flex: 1; }
.hero-offer .ho-main .t { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.15; }
.hero-offer .ho-main .t b { color: var(--orange); }
.hero-offer .ho-main .s { font-size: 13.5px; color: var(--ink-60); margin-top: 3px; }
.hero-offer .ho-side { background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 20px; text-align: center; }
.hero-offer .ho-side .big { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--orange); line-height: 1; }
.hero-offer .ho-side .lbl { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-ctas .btn { flex: 1; min-width: 210px; }
.hero-ctas .btn-ink { border: 1.5px solid rgba(255,255,255,.55); box-shadow: 0 8px 24px rgba(0,0,0,.42); }
.hero-ctas .btn-ink:hover { border-color: rgba(255,255,255,.8); }
.hero-trust { display: flex; flex-wrap: nowrap; gap: 8px 22px; align-items: center; }
.hero-trust .it { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.45); white-space: nowrap; }
.hero-trust .it .ck { color: var(--orange); font-weight: 900; }

/* hero form */
.lead-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.lead-card .lc-head { background: var(--ink); color: #fff; padding: 20px 24px 18px; text-align: center; }
.lead-card .lc-head .t { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.18; }
.lead-card .lc-head .s { font-size: 13.5px; color: rgba(255,255,255,.72); margin-top: 8px; line-height: 1.4; }
.lead-card .lc-head .s b { color: var(--orange); }
.lead-card form { padding: 20px 24px 24px; }
.field { margin-bottom: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240,93,26,.18); background: #fff; }
.lead-card .btn { margin-top: 6px; }
.lc-fine { font-size: 11.5px; color: var(--ink-45); line-height: 1.45; margin-top: 12px; text-align: center; }
.lc-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-60); margin-top: 12px; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip { background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.trust-strip .wrap { padding-top: 26px; padding-bottom: 24px; }
.logo-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px 44px; }
.trust-logo { height: 48px; width: auto; max-width: 150px; object-fit: contain; flex: none; }
/* per-logo optical balancing so differing proportions read at one weight */
.trust-logo[alt^="NARI"]        { height: 56px; }
.trust-logo[alt^="BBB"]         { height: 40px; }
.trust-logo[alt^="Owens"]       { height: 44px; }
.trust-logo[alt^="HomeAdvisor"] { height: 64px; }
.trust-logo[alt^="Yelp"]        { height: 34px; }
.trust-logo[alt^="Google"]      { height: 42px; }
.logo-row-note { text-align: center; font-size: 13px; color: var(--ink-60); margin-top: 20px; }
.logo-row-note b { color: var(--ink); font-weight: 800; }
.stars { color: var(--orange); letter-spacing: 1px; font-size: 14px; }

/* ============================================================
   PRODUCTS
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.prod-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; }
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.prod-card .ph { height: 220px; }
.prod-card .pc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.prod-card h3 { margin-bottom: 8px; }
.prod-card p { font-size: 15px; color: var(--ink-60); margin-bottom: 16px; flex: 1; }
.prod-card .pc-link { font-weight: 800; color: var(--orange); display: inline-flex; align-items: center; gap: 7px; font-size: 15px; }
.prod-card:hover .pc-link { gap: 11px; }

/* ============================================================
   WHY / BENEFITS (dark)
   ============================================================ */
.ben-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
.ben {
  display: flex; gap: 18px; padding: 26px;
  background: var(--charcoal-2); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r);
}
.ben .ico { width: 52px; height: 52px; border-radius: 12px; background: rgba(240,93,26,.16); color: var(--orange); display: flex; align-items: center; justify-content: center; flex: none; }
.ben .ico svg { width: 26px; height: 26px; }
.ben h3 { font-size: 21px; color: #fff; margin-bottom: 7px; }
.ben p { font-size: 14.5px; color: rgba(244,239,232,.66); line-height: 1.55; }
.why-media { border-radius: var(--r-lg); overflow: hidden; }
.why-media .ph { height: 100%; min-height: clamp(280px, 34vw, 460px); }
.why-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; margin-top: 24px; align-items: stretch; }
.creds { background: var(--charcoal-2); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-lg); padding: 30px 30px 28px; display: flex; flex-direction: column; }
.creds .cr-head { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 18px; margin-bottom: 20px; }
.creds .cr-head .eyebrow { color: var(--orange); }
.creds .cr-head h3 { font-size: 24px; color: #fff; margin-top: 10px; line-height: 1.2; }
.cr-list { list-style: none; display: grid; gap: 13px; margin: 0 0 24px; }
.cr-list li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.45; color: rgba(244,239,232,.8); }
.cr-list li b { color: #fff; font-weight: 800; }
.cr-list .ck { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.btn-block { width: 100%; margin-top: auto; }
@media (max-width: 860px) { .why-split { grid-template-columns: 1fr; } }

/* ============================================================
   PROCESS / HOW IT WORKS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step .n {
  font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--orange);
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--orange);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--orange-soft);
}
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-60); }
.step::before { content: ""; position: absolute; top: 34px; left: 64px; right: -12px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--orange) 0 6px, transparent 6px 12px); opacity: .5; }
.step:last-child::before { display: none; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.gf{font:inherit;font-size:13.5px;font-weight:700;letter-spacing:.02em;padding:9px 18px;border-radius:999px;border:1px solid var(--line-soft);background:#fff;color:var(--ink-60);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.gf:hover{border-color:var(--orange);color:var(--orange)}
.gf.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; margin-top: 26px; grid-auto-flow: dense; }
.gcard{position:relative;overflow:hidden;border-radius:var(--r);margin:0;cursor:zoom-in;background:var(--sand)}
.gcard.is-ph{cursor:default}
.gcard.is-ph:hover .ph{transform:none}
.gcard .ph{width:100%;height:100%;border:0;border-radius:0;transition:transform .5s ease}
.gcard:hover .ph{transform:scale(1.05)}
.gcard figcaption{position:absolute;inset:auto 0 0 0;display:grid;gap:3px;padding:44px 18px 16px;color:#fff;background:linear-gradient(to top,rgba(1,1,1,.82),rgba(1,1,1,.35) 55%,rgba(1,1,1,0));opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}
.gcard:hover figcaption,.gcard:focus-within figcaption{opacity:1;transform:none}
.gcard .tag{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.gcard .t{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2}
.gcard .m{font-size:12.5px;color:rgba(255,255,255,.72)}
.gal-note{text-align:center;margin-top:26px;font-size:15px;color:var(--ink-60)}
.gal-note a{font-weight:800}
.lbox{position:fixed;inset:0;z-index:200;background:rgba(1,1,1,.9);display:flex;align-items:center;justify-content:center;gap:10px;padding:5vh 6vw}
.lbox[hidden]{display:none}
.lbox img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:var(--r)}
.lb-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:17px;cursor:pointer}
.lb-nav{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-close:hover,.lb-nav:hover{background:var(--orange);border-color:var(--orange)}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.82);font-size:14px;font-weight:600}
@media (max-width:640px){.lb-nav{width:42px;height:42px;font-size:24px}}
.gallery .tall { grid-row: span 2; }

/* ============================================================
   REVIEWS
   ============================================================ */
.rev-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 44px; }
.rev-scores { display: flex; gap: 14px; flex-wrap: wrap; }
.score-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--shadow-sm); text-align: center; min-width: 140px; }
.score-card .num { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1; }
.score-card .stars { font-size: 15px; margin: 6px 0 4px; }
.score-card .src { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; }
.review .stars { font-size: 15px; margin-bottom: 12px; }
.review p { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink); flex: 1; }
.review .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.review .who .av { width: 42px; height: 42px; border-radius: 50%; background: var(--sand-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--ink-80); flex: none; }
.review .who .nm { font-weight: 800; font-size: 15px; }
.review .who .vf { font-size: 12.5px; color: var(--ink-60); }

.gallery .wide{grid-column:span 2}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
/* ============================================================
   FINANCING
   ============================================================ */
.fin { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.fin .fin-media .ph { height: clamp(260px, 30vw, 380px); border-radius: var(--r-lg); }
.fin ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 14px; }
.fin ul li { display: flex; gap: 13px; font-size: 16px; }
.fin ul li .ck { color: var(--orange); font-weight: 900; flex: none; }
.fin-pill { display: inline-flex; align-items: baseline; gap: 10px; background: var(--ink); color: #fff; border-radius: var(--r); padding: 16px 22px; margin-bottom: 22px; }
.fin-pill .big { font-family: var(--serif); font-size: 27px; color: var(--orange); font-weight: 600; }
.fin-pill .sm { font-size: 14px; color: rgba(255,255,255,.8); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { background: var(--charcoal); color: #fff; }
.final-inner { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; }
.final h2 { color: #fff; margin-bottom: 18px; }
.final h2 em { color: var(--orange); font-style: italic; }
.final .lead { color: rgba(255,255,255,.78); margin-bottom: 26px; max-width: 520px; }
.final-trust { display: grid; gap: 13px; }
.final-trust .it { display: flex; gap: 12px; font-size: 16px; color: rgba(255,255,255,.9); }
.final-trust .it .ck { color: var(--orange); font-weight: 900; flex: none; }
.final .lead-card { color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: #0c0a08; color: rgba(255,255,255,.7); padding: 56px 0 30px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot .cobrand .divider { background: rgba(255,255,255,.22); }
.foot h4 { font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.foot p { margin-bottom: 12px; line-height: 1.6; }
.foot a:hover { color: var(--orange); }
.foot .f-phone { font-family: var(--serif); font-size: 24px; color: #fff; font-weight: 600; }
.foot .areas { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: rgba(255,255,255,.5); }

/* ============================================================
   STICKY MOBILE BAR
   ============================================================ */
.mobar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; border-top: 1px solid var(--line-soft); box-shadow: 0 -6px 24px rgba(0,0,0,.12); }
.mobar .btn { flex: 1; min-height: 52px; font-size: 16px; box-shadow: none; }
.mobar .btn-orange { box-shadow: 0 4px 14px rgba(240,93,26,.32); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 38px; }
  .lead-card { max-width: 540px; }
  .grid-3 { grid-template-columns: 1fr; }
  .ben-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .step::before { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .rev-grid { grid-template-columns: 1fr; }
  .fin { grid-template-columns: 1fr; gap: 30px; }
  .fin .fin-media { order: -1; }
  .final-inner { grid-template-columns: 1fr; gap: 36px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---- Tablet & mobile: simplify header, sticky bottom bar, tidy trust strip ---- */
@media (max-width: 820px) {
  .site-head { position: static; }
  .site-head .wrap { justify-content: center; }
  .head-cta { display: none; }
  .cobrand { gap: 18px; }

  body { padding-bottom: 80px; }
  .mobar { display: flex; }

  /* hero stacks: use a fuller, even scrim so both copy & form sit on dark */
  .hero { background-position: center center; }
  .hero::before { background: linear-gradient(180deg, rgba(8,6,4,.82) 0%, rgba(8,6,4,.66) 50%, rgba(8,6,4,.78) 100%); }

  /* center the hero copy on mobile */
  .hero-copy { text-align: center; }
  .hero-copy .badge { margin-left: auto; margin-right: auto; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-offer { margin-left: auto; margin-right: auto; text-align: left; }
  .hero-trust { justify-content: center; flex-wrap: wrap; }

  /* the sticky bottom bar already provides Call + Free Quote,
     so drop the duplicate in-hero buttons to declutter */
  .hero-ctas { display: none; }

  /* trust strip → tighter logo wrap on mobile */
  .logo-row { gap: 22px 30px; }
  .trust-logo { height: 40px; }
  .trust-logo[alt^="NARI"]        { height: 46px; }
  .trust-logo[alt^="HomeAdvisor"] { height: 54px; }
  .trust-logo[alt^="Yelp"]        { height: 28px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; padding-bottom: 80px; }
  .wrap { padding: 0 18px; }
  .offerbar { font-size: 13px; }
  .offerbar .wrap { gap: 6px 14px; }
  .cobrand { gap: 14px; }
  .cobrand .yancey-logo { height: 54px; }
  .cobrand .jac { height: 19px; }
  .cobrand .divider { height: 34px; }

  .hero-trust { gap: 12px 20px; }

  .field-row { grid-template-columns: 1fr; }

  /* How It Works → centered single column */
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .step { text-align: center; }
  .step .n { margin-left: auto; margin-right: auto; }

  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .logo-row { gap: 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Yancey brand additions ---------- */
.cobrand .yancey-logo{height:68px;width:auto}
.cobrand .badge85{height:58px;width:auto}
.foot .cobrand .yancey-logo{height:64px;background:none;border-radius:0;padding:0;filter:none}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:44px}
.ba{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.ba-stage{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;background:var(--sand)}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-stage .after{clip-path:inset(0 0 0 var(--pos,55%))}
.ba-stage .handle{position:absolute;top:0;bottom:0;left:var(--pos,55%);width:3px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.45);pointer-events:none}
.ba-stage .handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ba-stage .grip{position:absolute;top:50%;left:var(--pos,55%);transform:translate(-50%,-50%);color:#fff;font-size:15px;font-weight:900;letter-spacing:-2px;pointer-events:none;z-index:2}
.ba-tag{position:absolute;bottom:14px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.ba-tag.b{left:14px;background:rgba(1,1,1,.62);color:#fff}
.ba-tag.a{right:14px;background:var(--orange);color:#fff}
.ba-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 20px 18px}
.ba-cap .t{font-family:var(--serif);font-size:20px;font-weight:600}
.ba-cap .m{font-size:13px;font-weight:700;color:var(--ink-45);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.ba-note{text-align:center;margin-top:26px;font-size:14px;color:var(--ink-60)}
.offer-strip{position:relative;overflow:hidden;background:var(--orange);color:#fff;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(0,0,0,.12)}
.offer-strip::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.055) 0 2px,transparent 2px 9px);pointer-events:none}
.offer-strip::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 160% at 50% -40%,rgba(255,255,255,.20),transparent 62%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.10));pointer-events:none}
.offer-strip .wrap{position:relative;z-index:1}
.offer-strip .wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:26px 24px;text-align:center}
.offer-strip .t{font-family:var(--serif);font-size:clamp(19px,2.2vw,26px);font-weight:600}
.offer-strip .btn{background:#fff;color:var(--ink);box-shadow:none;min-height:46px;padding:12px 22px}
.offer-strip .btn:hover{background:var(--ink);color:#fff}
@media (max-width:860px){.ba-grid{grid-template-columns:1fr;gap:22px}}

/* ---------- HERO — luxe refresh ---------- */
.hero{background-image:url("photos/hero-suite.jpg");background-position:center 58%;background-color:#0a0806}
.hero::before{background:linear-gradient(100deg,rgba(7,6,5,.94) 0%,rgba(7,6,5,.84) 30%,rgba(7,6,5,.52) 56%,rgba(7,6,5,.22) 82%,rgba(7,6,5,.34) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(130% 90% at 88% 8%,transparent 38%,rgba(0,0,0,.5) 100%);pointer-events:none}
@media (min-width:821px){.hero{background-position:center 58%}}
.hero-inner{grid-template-columns:1.08fr .92fr;gap:clamp(40px,5vw,76px);padding:clamp(64px,8vw,116px) 0 clamp(64px,8vw,116px)}
.hero-eyebrow{display:flex;align-items:center;gap:18px;font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:26px}
.hero-eyebrow::after{content:"";height:1px;flex:1;max-width:130px;background:linear-gradient(90deg,rgba(255,255,255,.45),transparent)}
.hero h1{font-weight:500;font-size:clamp(42px,5.4vw,80px);line-height:1.02;letter-spacing:-.025em;margin-bottom:0;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero h1 em{color:#EADFCE;font-style:italic}
.hero h1 br{display:inline}
.hero h1{text-wrap:balance}
.hero-rule{width:70px;height:2px;background:var(--orange);margin:30px 0 26px}
.hero .lead{font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.8);max-width:530px;margin-bottom:0;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero-facts{display:flex;flex-wrap:wrap;margin:36px 0 34px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.hero-facts>div{display:flex;flex-direction:column;gap:6px;padding:20px 30px 20px 0;margin-right:30px;border-right:1px solid rgba(255,255,255,.14)}
.hero-facts>div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-facts .k{font-family:var(--serif);font-size:30px;font-weight:500;color:#fff;line-height:1}
.hero-facts .k .sm{font-size:15px;color:rgba(255,255,255,.6)}
.hero-facts .v{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-ghost .sub{color:rgba(255,255,255,.6)}
.btn-ghost:hover .sub{color:var(--ink-60)}
.hero-fine{margin-top:26px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.58)}
.hero .lead-card{background:var(--paper);border:1px solid rgba(255,255,255,.14);box-shadow:0 36px 90px rgba(0,0,0,.55);overflow:hidden}
.hero .lead-card .lc-head{background:#fff;border-bottom:1px solid var(--line-soft);border-top:3px solid var(--orange);padding:24px 26px 22px}
.hero .lead-card .lc-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.hero .lead-card .lc-head .t{color:var(--ink);font-size:29px;line-height:1.14}
.hero .lead-card .lc-head .s{color:var(--ink-60);font-size:15.5px;line-height:1.45}
@media (max-width:820px){.hero-facts>div{padding:16px 20px 16px 0;margin-right:20px}.hero-facts .k{font-size:25px}}

/* ============ multi-step lead form ============ */
.msf{padding:22px 24px 24px}
.msf-prog{margin-bottom:22px}
.msf-track{position:relative;height:7px;border-radius:999px;background:var(--sand,#efe9e2);border:1px solid var(--line-soft)}
.msf-fill{height:100%;border-radius:999px;background:var(--orange);transition:width .35s cubic-bezier(.4,0,.2,1)}
.msf-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(240,93,26,.4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:left .35s cubic-bezier(.4,0,.2,1)}
.msf-ends{display:flex;justify-content:space-between;margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.msf-step{animation:msfIn .3s ease both}
@keyframes msfIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.msf-q{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.18;letter-spacing:-.01em;margin:0 0 6px}
.msf-sub{font-size:13px;color:var(--ink-60);line-height:1.45;margin:0 0 4px}
.msf-opts{display:grid;gap:9px;margin-top:16px}
.msf-opt{display:grid;gap:2px;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:13px 16px;cursor:pointer;font-family:var(--sans);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.msf-opt:hover{border-color:rgba(240,93,26,.5);background:#fffaf6}
.msf-opt .t{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.msf-opt .s{font-size:12.5px;color:var(--ink-60)}
.msf-opt.is-on{border-color:var(--orange);background:var(--orange-soft,#fff4ec);box-shadow:0 0 0 3px rgba(240,93,26,.14)}
.msf-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.msf-fields .field{grid-column:1/-1;margin:0}
.msf-fields .field.is-half{grid-column:span 1}
.msf-fields input.is-bad{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.13)}
.msf-nav{display:flex;gap:10px;margin-top:18px}
.msf-nav .msf-next{flex:1}
.msf-nav .btn-back{background:#fff;border:1.5px solid var(--line);color:var(--ink-60);font-size:14px;padding:17px 18px;flex:0 0 auto}
.msf-nav .btn-back:hover{border-color:var(--ink);color:var(--ink)}
.shake{animation:msfShake .3s ease}
@keyframes msfShake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@media (max-width:560px){.msf-fields{grid-template-columns:1fr}.msf-fields .field.is-half{grid-column:1/-1}.msf-q{font-size:21px}}

/* form head + type scale bump */
.lead-card .lc-head .t{font-size:27px;line-height:1.16}
.lead-card .lc-head .s{font-size:15.5px;line-height:1.45;margin-top:9px}
.lc-offer{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:16px;padding:11px 14px;border-radius:10px;background:var(--orange-soft,#fff4ec);border:1px solid rgba(240,93,26,.32)}
.lc-offer .lbl{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.lc-offer .val{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.lc-offer .val b{font-weight:800}
.msf-q{font-size:26px}
.msf-sub{font-size:14.5px}
.msf-opt{padding:15px 18px}
.msf-opt .t{font-size:16px}
.msf-opt .s{font-size:13.5px}
.msf-fields .field label{font-size:12.5px}
.msf-fields input{font-size:16.5px;padding:14px 15px}
.msf-nav .msf-next{font-size:16px}
.msf-ends{font-size:11px}
@media (max-width:560px){.msf-q{font-size:22px}.lead-card .lc-head .t,.hero .lead-card .lc-head .t{font-size:24px}}

/* ============ lead card refinement (v2) ============ */
.lead-card{background:#fff;overflow:hidden}
.hero .lead-card{background:#fff}
.lc-offer-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 11px;background:var(--ink);color:#fff;padding:11px 26px}
.lc-offer-bar .lbl{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.lc-offer-bar .val{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.88);line-height:1.3}
.lc-offer-bar .val b{font-weight:700;color:#fff}
.lead-card .lc-head,.hero .lead-card .lc-head{background:#fff;text-align:center;border-top:0;border-bottom:0;padding:24px 26px 4px}
.lead-card .lc-head .lc-eyebrow,.hero .lead-card .lc-head .lc-eyebrow{text-align:center;font-size:10px;letter-spacing:.2em;color:var(--ink-45);margin-bottom:11px}
.lead-card .lc-head .t,.hero .lead-card .lc-head .t{font-size:27px;line-height:1.14;letter-spacing:-.015em;text-align:center;max-width:none}
.lead-card .lc-head .s,.hero .lead-card .lc-head .s{font-size:14.5px;line-height:1.5;text-align:center;margin-top:10px;color:var(--ink-60);max-width:none}
.msf{background:#fff;padding:20px 26px 24px}
.msf-prog{margin:16px 0 22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.msf-ends{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.msf-count b{color:var(--ink);font-weight:800}
.msf-track{height:4px;border-radius:999px;background:var(--line-soft);border:0;overflow:hidden}
.msf-fill{background:var(--orange)}
.msf-q{font-size:24px;line-height:1.18;max-width:none;text-align:center}
.msf-sub{text-align:center}
.lc-offer-bar{justify-content:center}
.msf-sub{font-size:14px;margin-top:8px}
.msf-opts{gap:8px;margin-top:18px}
.msf-opt{position:relative;padding:14px 46px 14px 17px;border-radius:10px;border:1px solid var(--line);gap:3px}
.msf-opt::after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.msf-opt.is-on{background:#fff;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.msf-opt.is-on::after{border-color:var(--orange);background:var(--orange);box-shadow:inset 0 0 0 3.5px #fff}
.msf-opt:hover{background:#fff;border-color:var(--ink-45)}
.msf-opt .t{font-size:15.5px;font-weight:700}
.msf-opt .s{font-size:13px;color:var(--ink-60)}
.msf-nav{margin-top:20px}
.msf-nav .msf-next{min-height:54px;font-size:15.5px;box-shadow:0 4px 14px rgba(240,93,26,.3)}
.msf-nav .btn-back{border-radius:12px}
.lead-card .lc-secure{margin-top:14px}
.lead-card .lc-fine{font-size:11px;max-width:none;text-align:center}
.lead-card .lc-secure{justify-content:center}
@media (max-width:560px){.lc-offer-bar{padding:10px 20px}.lead-card .lc-head,.hero .lead-card .lc-head{padding:20px 20px 2px}.msf{padding:16px 20px 20px}.lead-card .lc-head .t,.hero .lead-card .lc-head .t{font-size:23px}.msf-q{font-size:21px}}

/* ============ lead card v3 — badge + offer headline ============ */
.lead-card{overflow:visible;position:relative}
.hero .lead-card{overflow:visible;border-top:0}
.lead-card .lc-badge{display:block;width:132px;height:auto;margin:-58px auto -6px;position:relative;z-index:3;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.lead-card .lc-head,.hero .lead-card .lc-head{padding:26px 30px 0;border-radius:0}
.lead-card .lc-head .t,.hero .lead-card .lc-head .t{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1.16;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.lead-card .lc-head .t em{font-style:normal;color:var(--orange)}
.lead-card .lc-head .s,.hero .lead-card .lc-head .s{font-size:15px;line-height:1.45;margin-top:12px;color:var(--ink-60)}
.msf{padding:0 30px 26px}
.msf-prog{margin:10px 0 22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.msf-track{position:relative;height:9px;border-radius:999px;background:#efeae4;overflow:visible}
.msf-fill{height:100%;border-radius:999px}
.msf-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--orange);color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;transition:left .35s cubic-bezier(.4,0,.2,1);z-index:2}
.msf-ends{display:flex;justify-content:space-between;margin:9px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.msf-q{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.2;text-align:left}
.msf-sub{text-align:left}
.msf-opts{margin-top:20px;gap:10px}
.msf-opt{padding:15px 46px 15px 18px}
.msf-opt .t{font-size:15.5px;font-weight:700;letter-spacing:.005em}
.msf-prog+.msf-step .msf-q,.msf-step .msf-q{margin-top:0}
.msf-step{padding-top:0}
@media (max-width:820px){.lead-card .lc-badge{width:112px;margin:-48px auto -4px}}
@media (max-width:560px){.lead-card .lc-head,.hero .lead-card .lc-head{padding:14px 20px 0}.msf{padding:0 20px 22px}.lead-card .lc-head .t,.hero .lead-card .lc-head .t{font-size:25px}.msf-q{font-size:23px}}

.head-note{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);white-space:nowrap}
.site-head .head-cta .btn{padding:14px 22px;min-height:50px;font-size:15px;display:inline-flex;align-items:center;gap:9px}
@media (max-width:900px){.head-note{display:none}}

@media (min-width:821px){.hero-ctas .btn-ghost{display:none}}

/* hero — lighter scrim, more photo */
.hero{background-color:#171310;filter:none}
.hero::before{background:linear-gradient(100deg,rgba(9,7,6,.80) 0%,rgba(9,7,6,.64) 32%,rgba(9,7,6,.32) 58%,rgba(9,7,6,.08) 84%,rgba(9,7,6,.16) 100%)}
.hero::after{background:radial-gradient(140% 95% at 88% 6%,transparent 46%,rgba(0,0,0,.32) 100%)}
.hero h1{text-shadow:0 2px 34px rgba(0,0,0,.62)}
.hero-fine,.hero p{text-shadow:0 1px 18px rgba(0,0,0,.55)}
@media (max-width:820px){.hero::before{background:linear-gradient(180deg,rgba(9,7,6,.74) 0%,rgba(9,7,6,.56) 48%,rgba(9,7,6,.70) 100%)}}

.lead-card .lc-badge{width:168px;margin:-74px auto -8px}
@media (max-width:820px){.lead-card .lc-badge{width:142px;margin:-62px auto -6px}}

/* ============================================================
   CASE STUDY — HOW IT WORKS (real project, start to finish)
   ============================================================ */
.cstudy{background:linear-gradient(180deg,var(--paper) 0%,#fff 55%,#fff 100%);border-top:1px solid var(--line-soft)}
#before-after{border-top:1px solid rgba(1,1,1,.09);box-shadow:inset 0 14px 26px -18px rgba(1,1,1,.10)}
.cstudy .lead{color:var(--ink-60)}
.cs-track{margin-top:46px;display:grid;gap:52px}
.cs-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.cs-n{font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);font-weight:600;letter-spacing:.02em;color:var(--orange);line-height:1}
.cs-head h3{font-family:var(--serif);font-size:30px;line-height:1.1;font-weight:600}
.cs-head p{font-size:15.5px;color:var(--ink-60);margin-left:auto;max-width:420px;text-align:right}
.cs-shots{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.cs-shots.one{grid-template-columns:1fr}
.cs-shots.cs-big{grid-template-columns:repeat(3,1fr)}
.cs-shots.cs-big4{grid-template-columns:repeat(4,1fr)}
.cs-shots.cs-big4 .cs-shot img{aspect-ratio:1/1}
.cs-shots.cs-big .cs-shot:first-child{grid-column:1/-1}
.cs-shot{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:zoom-in}
.cs-shot::after{content:"⤢";position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:15px;opacity:0;transition:opacity .2s ease}
.cs-shot:hover::after,.cs-shot:focus-visible::after{opacity:1}
.cs-shot img{transition:transform .5s ease}
.cs-shot:hover img{transform:scale(1.03)}
.cs-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.cs-shots.one .cs-shot img{aspect-ratio:2.4/1}
.cs-shots.cs-big .cs-shot:first-child img{aspect-ratio:2.1/1}
.cs-shots.cs-big .cs-shot img{aspect-ratio:4/3}
.cs-tag{position:absolute;left:14px;bottom:14px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);backdrop-filter:blur(4px)}
.cs-shot.is-after .cs-tag{background:var(--orange);color:#fff}
.cs-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:52px;text-align:center}
.cs-foot p{font-size:15.5px;color:var(--ink-60);max-width:520px}
@media (max-width:980px){.cs-shots.cs-big4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.cs-head p{margin-left:0;text-align:left;max-width:none}.cs-head h3{font-size:25px}.cs-n{font-size:22px}.cs-shots.cs-big{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cs-shots,.cs-shots.cs-big{grid-template-columns:1fr}.cs-shots.one .cs-shot img,.cs-shots.cs-big .cs-shot:first-child img{aspect-ratio:3/2}}

.ba-hint{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:999px;background:rgba(1,1,1,.62);color:#fff;backdrop-filter:blur(4px);transition:opacity .35s ease;pointer-events:none}
.ba-stage.is-touched .ba-hint{opacity:0}

/* ---------- the offer: coupon block ---------- */
.offr{display:grid;grid-template-columns:.86fr 1.14fr;gap:44px;align-items:center}
.offr-card{position:relative;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:34px 34px 32px;box-shadow:0 30px 70px rgba(1,1,1,.28);overflow:hidden}
.offr-card::before{content:"";position:absolute;inset:11px;border:1.5px dashed rgba(255,255,255,.26);border-radius:calc(var(--r-lg) - 6px);pointer-events:none}
.offr-card::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px);pointer-events:none}
.offr-card>*{position:relative;z-index:1}
.oc-kicker{display:block;font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.oc-amt{display:flex;align-items:baseline;gap:6px;font-family:var(--serif);font-weight:600;font-size:clamp(62px,7vw,88px);line-height:.9;letter-spacing:-.03em;color:#fff}
.oc-amt .d{font-size:.46em;color:var(--orange)}
.oc-amt .off{font-family:var(--sans);font-size:.2em;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-left:4px}
.oc-sub{font-size:16px;font-weight:600;color:rgba(255,255,255,.74);margin-top:12px}
.oc-list{list-style:none;display:grid;gap:11px;margin:24px 0 22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.oc-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.oc-list .ck{color:var(--orange);font-weight:900;flex:none}
.oc-exp{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px}
.oc-exp .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;box-shadow:0 0 0 4px rgba(240,93,26,.22)}
.offr-card .cta-pair .btn-ink{background:#fff;color:var(--ink)}
.offr-card .cta-pair .btn-ink:hover{background:var(--sand);color:var(--ink)}
.offr-img{margin-top:26px;height:clamp(200px,26vw,300px);border-radius:var(--r-lg)}
@media (max-width:980px){.offr{grid-template-columns:1fr;gap:30px}.offr-copy{order:-1}.offr-img{display:none}}
@media (max-width:640px){.offr-card{padding:26px 22px 26px}.offr-card::before{inset:8px}.oc-amt{font-size:clamp(54px,17vw,68px)}}

/* ---------- lead card: reassurance chips ---------- */
.lc-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 8px;margin-top:16px}
.lc-assure span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);background:var(--sand);border:1px solid var(--line-soft);border-radius:999px;padding:6px 11px}
.lc-assure span::before{content:"\2713";color:var(--orange);font-weight:900}
.lead-card .lc-secure{margin-top:10px}

/* ---------- hero testimonial ---------- */
.hero-quote{max-width:520px;margin:0 0 30px;padding-left:20px;border-left:2px solid var(--orange)}
.hq-stars{display:block;color:var(--orange);font-size:14px;letter-spacing:3px;margin-bottom:11px}
.hero-quote blockquote{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.5;color:rgba(255,255,255,.9);text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero-quote figcaption{margin-top:11px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero-quote figcaption span{font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.42)}
@media (max-width:820px){
  .hero-quote{margin:0 auto 26px;padding:0 0 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;text-align:center}
  .hero-quote blockquote{font-size:16.5px}
}

/* ============================================================
   HERO LEFT COLUMN — contrast + hierarchy pass
   ============================================================ */
/* darker scrim on the copy side so type never fights the photo */
.hero::before{background:linear-gradient(100deg,rgba(6,5,4,.93) 0%,rgba(6,5,4,.86) 34%,rgba(6,5,4,.52) 62%,rgba(6,5,4,.16) 86%,rgba(6,5,4,.30) 100%)}
.hero-copy{position:relative;z-index:1}
/* soft bleed of extra darkness behind the copy — no hard card edge */
.hero-copy::before{content:"";position:absolute;top:-70px;bottom:-70px;right:12%;left:-50vw;z-index:-1;background:linear-gradient(100deg,rgba(4,3,2,.66) 0%,rgba(4,3,2,.50) 58%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);pointer-events:none}

.hero-eyebrow{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:24px}
.hero-eyebrow::after{display:none}
.hero-eyebrow .hd{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none;box-shadow:0 0 0 5px rgba(240,93,26,.24)}

.hero h1{font-size:clamp(46px,5.8vw,86px);line-height:.98;letter-spacing:-.03em;text-shadow:0 3px 40px rgba(0,0,0,.8);text-wrap:wrap}
.hero h1 br{display:inline}
.hero h1 em{color:#F3E7D4}

.hero .lead{font-size:19.5px;line-height:1.55;color:rgba(255,255,255,.9);max-width:560px;margin-top:26px;text-shadow:0 1px 20px rgba(0,0,0,.7)}

/* facts read as one deliberate block, not three floating scraps */
.hero-facts{margin:34px 0 30px;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
.hero-facts>div{border-right:1px solid rgba(255,255,255,.18)}
.hero-facts .k{font-size:clamp(30px,2.7vw,38px);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero-facts .k .sm{color:var(--orange);font-weight:600}
.hero-facts .v{font-size:11px;font-weight:800;letter-spacing:.15em;color:rgba(255,255,255,.72)}

/* testimonial */
.hero-quote{max-width:540px;margin:0 0 28px;padding-left:22px;border-left:2px solid var(--orange)}
.hq-stars{font-size:16px;letter-spacing:4px;margin-bottom:12px}
.hero-quote blockquote{font-size:19px;line-height:1.48;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.7)}
.hero-quote figcaption{font-size:11.5px;letter-spacing:.15em;color:rgba(255,255,255,.72)}
.hero-quote figcaption span{color:rgba(255,255,255,.5)}

/* trust line → discrete chips instead of a run-on sentence */
.hero-fine{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:24px}
.hero-fine span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 13px;backdrop-filter:blur(6px);text-shadow:none}
.hero-fine span::before{content:"\2713";color:var(--orange);font-weight:900;font-size:11px}

@media (max-width:820px){
  .hero-copy::before{top:-40px;bottom:-40px;left:-50vw;right:-50vw;background:linear-gradient(180deg,rgba(4,3,2,.55),rgba(4,3,2,.42))}
  .hero-eyebrow{justify-content:center;font-size:11.5px;letter-spacing:.2em}
  .hero .lead{font-size:18px;margin-left:auto;margin-right:auto}
  .hero-fine{justify-content:center;gap:7px}
  .hero-fine span{font-size:11px;padding:6px 11px}
}

/* ---------- hero facts: always a single row ---------- */
@media (min-width:821px){
  .hero-facts{flex-wrap:nowrap;align-items:stretch}
  .hero-facts>div{flex:1 1 0;min-width:0;padding:20px 20px 20px 0;margin-right:20px;justify-content:center}
  .hero-facts .k{font-size:clamp(24px,2.2vw,30px);white-space:nowrap}
  .hero-facts .k .sm{font-size:.5em}
  .hero-facts .v{white-space:nowrap;font-size:clamp(10px,.78vw,10.5px);letter-spacing:.11em}
}

/* ============================================================
   HERO STRUCTURE — proof below the form on mobile
   ============================================================ */
.hero-inner{position:relative;row-gap:0}
.hero-copy::before{display:none}
.hero-inner::before{content:"";position:absolute;top:-70px;bottom:-70px;right:38%;left:-50vw;z-index:0;background:linear-gradient(100deg,rgba(4,3,2,.66) 0%,rgba(4,3,2,.50) 62%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);pointer-events:none}
.hero-copy,.hero-quote,.hero-fine,.hero .lead-card{position:relative;z-index:1}

@media (min-width:981px){
  .hero-copy{grid-column:1;grid-row:1}
  .hero-quote{grid-column:1;grid-row:2}
  .hero-fine{grid-column:1;grid-row:3}
  .hero .lead-card{grid-column:2;grid-row:1/span 3;align-self:center}
}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-copy{order:1}
  .hero .lead-card{order:2}
  .hero-quote{order:3}
  .hero-fine{order:4}
  .hero-inner::before{right:-50vw;background:linear-gradient(180deg,rgba(4,3,2,.55),rgba(4,3,2,.42))}
  .hero-quote{margin:34px auto 0;max-width:540px}
  .hero-fine{margin-top:22px}
}

/* form card: kill the square inner corners poking past the rounded card */
.lead-card .lc-head,.hero .lead-card .lc-head{border-radius:var(--r-lg) var(--r-lg) 0 0}
.lead-card .msf,.hero .lead-card .msf{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* eyebrow stays on one line */
.hero-eyebrow{white-space:nowrap}

/* header: never a lone logo — a call button rides beside it at every width */
.hc-short{display:none}
.ob-short{display:none}
@media (max-width:820px){
  .site-head .wrap{justify-content:space-between;gap:12px}
  .head-cta{display:flex;gap:0}
  .head-note{display:none}
  .site-head .head-cta .btn{padding:12px 16px;min-height:46px;font-size:14.5px;gap:7px}
  .cobrand .yancey-logo{height:52px}

  /* offer bar back to one tight line */
  .offerbar{font-size:12.5px;font-weight:700}
  .offerbar .wrap{flex-direction:row;justify-content:center;gap:0;padding-top:8px;padding-bottom:8px}
  .offerbar .ob-call{display:none}
  .ob-long{display:none}
  .ob-short{display:inline}

  /* headline: two lines, bigger */
  .hero h1{font-size:clamp(36px,9.6vw,52px)}
  .hero h1 em br{display:none}
  .hero-eyebrow .he-since{display:none}
  .hero-inner{padding-top:clamp(30px,6vw,52px)}
}
@media (max-width:440px){
  .hc-long{display:none}
  .hc-short{display:inline}
  .cobrand .yancey-logo{height:46px}
  .offerbar{font-size:11.5px}
  .hero-eyebrow{font-size:10.5px;letter-spacing:.16em;gap:8px}
}

/* ---------- process: in-house build step ---------- */
.cs-build{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cs-build .cb{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:24px 24px 26px;box-shadow:var(--shadow-sm)}
.cs-build .cb h4{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
.cs-build .cb p{font-size:15px;line-height:1.6;color:var(--ink-60)}
@media (max-width:860px){.cs-build{grid-template-columns:1fr;gap:10px}.cs-build .cb{padding:20px 20px 21px}}

/* ---------- credentials intro ---------- */
.cr-intro{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.62);margin-top:12px}
.sect-why .cr-intro{color:var(--ink-60)}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:44px auto 0;display:grid;gap:10px}
.fq{background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:20px 24px;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.005em;color:var(--ink);min-height:56px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";flex:none;margin-left:auto;width:13px;height:13px;margin-top:5px;border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(45deg);transition:transform .22s ease}
.fq[open] summary::after{transform:rotate(-135deg)}
.fq summary:hover{color:var(--orange-dk)}
.fq-a{padding:0 24px 22px}
.fq-a p{font-size:16px;line-height:1.66;color:var(--ink-60);max-width:70ch}
.fq-a p b{color:var(--ink);font-weight:800}
@media (max-width:640px){.faq{margin-top:30px}.fq summary{font-size:16px;padding:17px 18px;gap:12px}.fq-a{padding:0 18px 18px}.fq-a p{font-size:15.5px}}

.rev-widget{margin-top:38px}
.rev-widget .sr-inner{padding:0}

/* ---------- paired CTA: consultation + orange call button ---------- */
.cta-pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px}
.cta-pair.is-start{justify-content:flex-start}
.cta-pair.is-stack{flex-direction:column;align-items:stretch;gap:10px}
.cta-pair .btn{white-space:nowrap}
.creds .cta-pair{margin-top:auto;padding-top:4px}
.creds .cta-pair .btn-block{margin-top:0}
.cta-pair .or{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.final .cta-pair .or,.foot .cta-pair .or{color:rgba(255,255,255,.5)}
.os-cta{display:flex;flex-direction:column;align-items:center;gap:8px}
.offer-strip .os-cta .btn-orange{background:var(--orange);color:#fff;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 6px 18px rgba(1,1,1,.22)}
.offer-strip .os-cta .btn-orange:hover{background:var(--orange-dk);color:#fff;border-color:#fff}
@media (max-width:640px){
  .cta-pair{flex-direction:column;align-items:stretch;gap:10px}
  .cta-pair .btn{width:100%;justify-content:center}
  .cta-pair .or{text-align:center}
  .os-cta{width:100%}
  .os-cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   MOBILE PASS — authoritative (placed last so it wins the cascade)
   ============================================================ */
html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%}

@media (max-width:980px){
  /* re-assert the stack: later .hero-inner rules were overriding the
     earlier responsive block, pushing the form off-screen on phones */
  .hero-inner{grid-template-columns:1fr;gap:34px;padding:clamp(44px,9vw,80px) 0 clamp(48px,9vw,84px)}
  .hero .lead-card,.final .lead-card{max-width:540px;width:100%;margin-left:auto;margin-right:auto}
  /* the badge's negative offset would otherwise pull the card over the hero fine print */
  .hero .lead-card{margin-top:70px}
  .hero .lead{max-width:560px}
}

@media (max-width:1000px){
  /* one tight line instead of a mid-phrase wrap */
  .offerbar{font-size:13.5px}
  .offerbar .wrap{gap:4px 16px;padding-top:9px;padding-bottom:9px;flex-direction:row}
  .offerbar .ob-call{min-height:32px;align-items:center}
  .ob-long{display:none}
  .ob-short{display:inline}
}
/* trust logos: keep all seven on one row instead of orphaning Google */
@media (min-width:821px) and (max-width:1000px){
  .logo-row{gap:22px 24px}
}
@media (max-width:820px){
  .hero-eyebrow{justify-content:center}
  .hero-eyebrow::after{display:none}
  .why-split>*,.fin>*,.offr>*{min-width:0}
  .hero-rule{margin:22px auto 22px}
  .hero-fine{max-width:420px;margin-left:auto;margin-right:auto;font-size:12.5px}

  /* facts: even 3-up row with clean dividers instead of ragged wrap */
  .hero-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0 30px}
  .hero-facts>div{align-items:center;text-align:center;padding:16px 8px;margin:0;border-right:1px solid rgba(255,255,255,.14)}
  .hero-facts>div:last-child{padding-right:8px}
  .hero-facts .k{font-size:24px}
  .hero-facts .v{font-size:9px;letter-spacing:.12em;line-height:1.3}

  /* touch: no hover, so show the expand affordance */
  .cs-shot::after{opacity:.9;width:30px;height:30px;font-size:13px;top:10px;right:10px}
  .cs-head{gap:8px 14px}
  .cs-track{gap:40px;margin-top:34px}
  .cs-foot{margin-top:38px}

  .fin .fin-media .ph{height:clamp(220px,50vw,300px)}
  .why-media .ph{min-height:clamp(220px,52vw,320px)}
}

@media (max-width:640px){
  .sect-head .lead,.cstudy .lead{font-size:16.5px}
  .h2{font-size:clamp(27px,7.6vw,34px)}
  .h3{font-size:22px}

  /* tap targets */
  .pc-link{min-height:44px;display:inline-flex;align-items:center}
  .foot .f-phone{min-height:44px;display:inline-flex;align-items:center}
  .prod-card .pc-body{padding-bottom:6px}

  .offer-strip .wrap{padding:18px 18px;gap:14px}
  .offer-strip .btn,.cs-foot .btn,.fin .btn,.final .btn-orange{width:100%;justify-content:center;text-align:center}
  .final .btn-orange{max-width:420px}

  .ba-grid{gap:18px;margin-top:30px}
  /* keep the 5 "before" shots 2-up so step 01 doesn't become an endless scroll */
  .cs-shots.cs-big4{grid-template-columns:repeat(2,1fr);gap:10px}
  .ba-stage{aspect-ratio:3/2}
  .ba-stage .handle::after{width:40px;height:40px}
  .ba-hint{font-size:10.5px;padding:7px 12px;top:12px}
  .ba-cap{flex-direction:column;align-items:flex-start;gap:3px;padding:13px 16px 15px}
  .ba-cap .t{font-size:18px}

  .svc-cities{gap:10px 26px;margin:26px auto 28px}
  .svc-cities li{font-size:15.5px}
  .svc-foot{padding:16px 18px}

  .fin ul li{font-size:15.5px}
  .fin-pill{width:100%;flex-direction:column;align-items:flex-start;gap:4px}

  .final-trust{gap:10px}
  .final .lead{font-size:16.5px}

  .foot{padding:44px 0 26px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}

  .creds{padding:24px 22px 24px}
  .cr-list li{font-size:15px}

  .rev-widget{margin-top:28px}
  .rev-widget .sr-strip{gap:8px;margin-bottom:26px}
  .rev-widget .sr-badge{font-size:13px;padding:7px 13px}
  .rev-widget .sr-card{padding:22px 20px}
}

@media (max-width:420px){
  /* nowrap CTA labels were forcing a horizontal scrollbar on 320px phones */
  .cta-pair .btn{white-space:normal!important}
  .svc-cities{grid-template-columns:repeat(2,1fr);gap:9px 18px;justify-content:stretch}
  .hero-facts .k{font-size:21px}
  .hero-facts .k .sm{font-size:12px}
  .mobar .btn{font-size:15px;padding-left:10px;padding-right:10px}
}

/* ============================================================
   MOBILE DENSITY — vertical rhythm roughly halved
   ============================================================ */
@media (max-width:820px){
  .sect{padding:34px 0}
  .hero-inner{padding:24px 0 30px;gap:0}
  .hero-eyebrow{margin-bottom:16px}
  .hero h1{margin-bottom:0}
  .hero .lead{margin-top:16px}
  .hero-facts{margin:22px 0 0}
  .hero-facts>div{padding:13px 8px}
  .hero .lead-card{margin-top:54px}
  .lead-card .lc-badge{width:126px;margin:-46px auto -4px}
  .hero-quote{margin-top:26px;padding-top:18px}
  .hero-fine{margin-top:16px}

  .trust-strip .wrap{padding-top:18px;padding-bottom:16px}
  .logo-row{gap:16px 24px}
  .logo-row-note{margin-top:14px}

  .grid-3{gap:16px}
  .grid-3[style]{margin-top:26px!important}
  .offer-strip .wrap{padding:18px}
  .cs-track{margin-top:24px;gap:28px}
  .cs-head{padding-bottom:12px;margin-bottom:13px}
  .cs-foot{margin-top:26px;gap:14px}
  .ba-grid{margin-top:22px}
  .ba-note{margin-top:16px}
  .ben-grid{margin-top:26px;gap:14px}
  .ben{padding:20px}
  .why-split{margin-top:14px;gap:14px}
  .rev-widget{margin-top:22px}
  .svc-cities{margin:20px auto 20px}
  .offr{gap:22px}
  .faq{margin-top:22px}
  .final-inner{gap:26px}
  .foot{padding:34px 0 22px}
  .foot-grid{gap:24px;padding-bottom:24px}
  .foot-bottom{padding-top:18px}
}