/* Epic Dog Academy LP - direct-response. Skeleton cloned 1:1 from the
   Kansas City K9 Academy build (Countryside / Skyline lineage).
   Palette sampled from the client's own badge epic-dog-academy.png, not their
   stylesheet: royal blue #3D59A7 (the shield) and gold #C2912E (the laurel),
   near-black #0F0708. Every value is a computed contrast ratio, tools/contrast.py.
   Type is Outfit + Jost, carried over from the skeleton. */
:root{
  --navy:#3D59A7;        /* brand blue, straight off the shield: 6.59:1 on white */
  --navy-deep:#1B2B5E;   /* deeper blue for the topbar and footer: 13.5:1 */
  --navy-line:#2F4A94;
  --green:#2F4A94;       /* brand blue deepened for labels/checks: 8.31:1 on white */
  --green-deep:#24397A;
  --cream:#F3DC9C;       /* pale laurel gold for highlight words on blue: 8.0:1 on deep */
  --maroon:#565E70;
  --gold:#C2912E;        /* action colour = the laurel gold exactly */
  --gold-hi:#D4A23A;     /* hover */
  --gold-on:#0F0708;     /* ink ON the gold button: 7.0:1. White would be 2.84:1 and fail */
  --gold-ink:#86620F;    /* gold accent text on light: 5.57:1 */
  --gold-star:#86620F;      /* star glyphs on LIGHT grounds */
  --gold-star-dk:#E8C872;   /* star glyphs on the blue proof strip: 6.66:1 */
  --ink:#141A2B;
  --muted:#565E70;       /* 6.5:1 on white */
  --canvas:#FFFFFF;
  --alt:#F3F5FA;
  --line:#DCE1EC;
  --ok:#1C7A4B;
  --err:#B3261E;
  --sticky-h:60px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* type scale: 4 sizes doing 4 jobs */
h1,h2,h3,.display{font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.012em;margin:0;text-transform:uppercase}
h1{font-size:clamp(31px,4.5vw,55px);line-height:1.06;letter-spacing:-.02em}
h2{font-size:clamp(23px,2.9vw,37px);line-height:1.12}
h3{font-size:19.5px;line-height:1.26;letter-spacing:-.004em}
p{margin:0}
.eyebrow{font-family:"Jost",sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sect-label{font-family:"Jost",sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.lede{font-size:17px;color:var(--muted);line-height:1.65}

/* ---- topbar ---- */
.topbar{background:var(--navy-deep);color:#fff}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0}
.trust{font-size:12.5px;letter-spacing:.02em;color:#C5CDE4;margin:0}
.trust b{color:#fff;font-weight:600}
.tb-offer-txt{margin-left:4px}
@media (max-width:620px){ .trust{font-size:12.5px;line-height:1.45;text-align:center} .topbar-in{justify-content:center} }
/* The offer leads the header bar on every width, worded exactly as the header
   bar on epicdogacademy.com. Gold pill, near-black ink 7.0:1. The offer never
   hides; the rating that follows it drops off on phones. */
.tb-promo{
  display:inline-block;background:var(--gold);color:var(--gold-on);
  font-weight:700;font-size:13px;letter-spacing:.02em;
  padding:3px 11px;border-radius:100px;white-space:nowrap;
}
@media (max-width:620px){ .tb-offer{display:none} }
.topbar-call{color:#fff;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.topbar-call:hover{color:var(--gold-hi)}

/* ---- masthead ---- */
.masthead{border-bottom:1px solid var(--line)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0}
.logo img{height:58px;width:58px;flex:0 0 auto}
/* The Epic mark is a 5.5:1 shield + wordmark lockup (their .com header). It carries
   the brand name itself, so the header shows it alone with no separate text.
   Sized by height and capped by width so it can never crowd the call button. */
.logo .logo-mark{height:52px;width:auto;max-width:min(230px,46vw);object-fit:contain;flex:0 1 auto}
.logo-word{display:block;line-height:1}
.logo-word b{
  display:block;font-family:"Outfit",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:22px;letter-spacing:-.018em;color:var(--navy-deep);
}
.logo-word span{
  display:block;font-family:"Jost",sans-serif;font-weight:600;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.17em;color:var(--gold-ink);margin-top:4px;
}
.foot-logo .logo{gap:12px}
.foot-logo img{height:64px;width:64px}
.foot-logo .logo-word b{color:#fff;font-size:20px}
.foot-logo .logo-word span{color:#C5CDE4}
@media (max-width:420px){
  .logo img{height:46px;width:46px}
  .masthead .logo .logo-mark{height:34px;width:auto;max-width:46vw}
  .logo-word b{font-size:18px}
  .logo-word span{font-size:9px;letter-spacing:.14em}
}
.call-btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:12px 20px;border-radius:5px;
  transition:background .13s,transform .13s;
  white-space:nowrap;flex:0 0 auto;
}
.call-btn:hover{background:var(--navy-line)}
.call-btn:active{transform:scale(.985)}

/* ---- hero ---- */
.hero{padding:40px 0 52px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:start}
.ribbon{
  display:inline-block;background:var(--gold);color:var(--gold-on);
  font-family:"Jost",sans-serif;font-weight:600;font-size:14px;letter-spacing:.045em;
  text-transform:uppercase;padding:10px 20px;border-radius:4px;margin-bottom:20px;
}
.hero h1{margin-bottom:10px}
.hero .eyebrow{display:block;margin-bottom:16px}
.hero-sub{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:18px}

.pains{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px}
.pains li{display:flex;align-items:flex-start;gap:9px;font-size:15.5px;color:var(--ink)}
.pains svg{flex:0 0 auto;margin-top:4px}

.hero-body{font-size:16px;color:var(--muted);line-height:1.62;margin-bottom:20px;max-width:56ch}
.kicker{font-family:"Jost",sans-serif;font-weight:600;font-size:15px;letter-spacing:.07em;color:var(--green);margin-bottom:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Secondary qualifier under the primary CTA pair. Deliberately quiet: it must
   not compete with the gold action button. */
.promo-note{margin:14px 0 0}
/* Was a pale tinted outline. It was legible but read as fine print, so it got
   missed entirely. Now solid brand gold with near-black ink: 7.0:1, and the same
   visual weight as the CTA it sits under. */
.promo-badge{
  display:inline-block;background:var(--gold);border:0;
  color:var(--gold-on);border-radius:100px;padding:9px 18px;
  font-family:"Jost",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(194,145,46,.34);
}
.lf-promo{
  text-align:center;color:var(--cream);font-family:"Jost",sans-serif;
  font-weight:700;font-size:13.5px;letter-spacing:.015em;margin:12px 0 0;
}

.btn-gold{
  display:inline-block;background:var(--gold);color:var(--gold-on);text-decoration:none;
  font-family:"Jost",sans-serif;font-weight:600;font-size:16px;letter-spacing:.035em;text-transform:uppercase;
  padding:15px 28px;border-radius:5px;border:0;cursor:pointer;
  transition:background .13s,transform .13s;
}
.btn-gold:hover{background:var(--gold-hi)}
.btn-gold:active{transform:scale(.985)}
.btn-ghost{
  display:inline-block;background:transparent;color:var(--navy);text-decoration:none;
  font-family:"Jost",sans-serif;font-weight:600;font-size:16px;letter-spacing:.035em;text-transform:uppercase;
  padding:14px 26px;border-radius:5px;border:1.5px solid var(--navy);
  transition:background .13s,color .13s;
}
.btn-ghost:hover{background:var(--navy);color:#fff}

/* review badge */
.badge{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.badge-score{font-family:"Jost",sans-serif;font-size:30px;font-weight:600;color:var(--navy);line-height:1}
.badge-stars{color:var(--gold-star);font-size:16px;letter-spacing:2px;line-height:1}
.badge-meta{font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---- form ---- */
.form-card{
  background:var(--green-deep);border-radius:12px;padding:28px 26px 26px;
  box-shadow:0 14px 34px rgba(22,34,74,.16);position:sticky;top:20px;
}
.form-card .sect-label{color:var(--cream)}
.form-head h3{color:#fff;font-size:27px;margin:6px 0 6px;line-height:1.12;letter-spacing:.01em}
/* .form-head p also matches p.form-val and outranks it on specificity, so this
   value is the one that actually renders. 4.90:1 over the .form-val tint. */
.form-head p{color:#D6DDEF;font-size:14px;margin-bottom:18px}
.form-head p b{color:var(--cream);font-weight:700}
.lf-row{display:flex;gap:11px;margin-bottom:11px}
.lf-two{flex-wrap:wrap}
.lf-two input{flex:1 1 46%;min-width:0}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;padding:13px 15px;border:1px solid #4E65A3;border-radius:7px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:15px;outline:none;
  transition:border-color .13s,box-shadow .13s;
}
.lead-form textarea{resize:vertical;min-height:92px}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:#5E6578}
.lead-form select:invalid{color:#5E6578}
.lead-form input:hover,.lead-form select:hover,.lead-form textarea:hover{border-color:#4E68AE}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,145,46,.34);
}
.lf-submit{
  width:100%;margin-top:4px;background:var(--gold);color:var(--gold-on);border:0;border-radius:7px;
  padding:16px 18px;font-family:"Jost",sans-serif;font-weight:600;font-size:17px;letter-spacing:.035em;
  text-transform:uppercase;cursor:pointer;transition:background .13s,transform .13s;
}
.lf-submit:hover{background:var(--gold-hi)}
.lf-submit:active{transform:scale(.99)}
.lf-submit:disabled{opacity:.62;cursor:not-allowed}
.lf-status{font-size:13.5px;margin-top:11px;color:#B4BEDB;min-height:1em}
.lf-status.ok{color:#F3DC9C}
.lf-status.err{color:#FFC2BD}
.lf-fine{font-size:11.5px;color:#A9B4D4;margin-top:10px;line-height:1.45}

/* ---- sections ---- */
.sect{padding:62px 0}
.sect-alt{background:var(--alt)}
.sect-head{max-width:64ch;margin-bottom:34px}
.sect-head h2{margin:8px 0 12px}
.sect-head .gold{color:var(--green)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:10px;padding:23px 22px}
.sect-alt .card{background:#fff}
.card h3{font-family:"Jost",sans-serif;font-weight:600;font-size:17px;letter-spacing:.045em;color:var(--navy);margin-bottom:9px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.6}

.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:12px 26px}
.checks li{display:flex;align-items:flex-start;gap:11px;font-size:16px}
.checks svg{flex:0 0 auto;margin-top:4px}

/* focus band */
.band{background:var(--navy);color:#fff;padding:56px 0}
.band h2{color:#fff}
.band .sect-label{color:var(--cream)}
.band p{color:#CFD6EA;margin:14px 0 0;font-size:16px;line-height:1.68}
.band-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.band-or{color:#B4BEDB;font-size:14px}
.band-tel{color:#fff;font-weight:700;text-decoration:none;font-size:17px}
.band-tel:hover{color:var(--gold-hi)}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px}
.rev{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 21px;display:flex;flex-direction:column}
.rev-stars{color:var(--gold-star);font-size:14px;letter-spacing:2px;margin-bottom:10px}
.rev-txt{font-size:14.5px;color:var(--ink);line-height:1.62;margin-bottom:15px}
.rev-who{margin-top:auto;font-size:13px;color:var(--muted)}
.rev-who b{display:block;color:var(--ink);font-size:14.5px;font-weight:600}

/* service area */
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.area{background:#fff;border:1px solid #D3D9EA;border-radius:100px;padding:8px 17px;font-size:14px;color:var(--green-deep);font-weight:500}

/* final */
.final{background:var(--navy-deep);color:#fff;padding:66px 0;text-align:center}
.final h2{font-size:clamp(28px,4vw,48px)}
.final .gold{color:var(--cream)}
.final > .wrap > p{color:#BFC9E4;margin:14px 0 26px;font-size:17px}
.final-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* footer */
.foot{background:#06112E;color:#A9B4D4;padding:34px 0;font-size:13.5px}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot a{color:#CFD6EA;text-decoration:none}
.foot a:hover{color:var(--gold-hi)}
.foot-b{color:#fff;font-weight:600;display:block;margin-bottom:5px;font-size:13px;letter-spacing:.05em;text-transform:uppercase}

/* sticky mobile call */
.sticky{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--gold);box-shadow:0 -3px 14px rgba(0,0,0,.2);
}
.sticky a{
  display:flex;align-items:center;justify-content:center;gap:9px;height:var(--sticky-h);
  color:var(--gold-on);text-decoration:none;font-family:"Jost",sans-serif;font-weight:600;
  font-size:17px;letter-spacing:.035em;text-transform:uppercase;
}

/* modal */
.modal{display:none;position:fixed;inset:0;z-index:80;background:rgba(12,16,36,.72);padding:22px;overflow-y:auto}
.modal.is-open{display:flex;align-items:flex-start;justify-content:center}
.modal-box{position:relative;width:min(430px,100%);margin:auto}
.modal-box .form-card{position:static;animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-x{
  position:absolute;top:-13px;right:-13px;width:38px;height:38px;border-radius:50%;
  background:#fff;border:0;color:var(--navy);font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.28);
}
.modal-x:hover{background:var(--gold);color:var(--gold-on)}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .form-card{position:static}
  h1{font-size:clamp(30px,7.4vw,42px)}
}
@media (max-width:620px){
  .pains{grid-template-columns:1fr}
  .topbar-in{flex-direction:column;gap:5px;text-align:center}
  .masthead-in .call-btn{display:none}
  .sticky{display:block}
  body{padding-bottom:var(--sticky-h)}
  .sect{padding:46px 0}
  .hero{padding:28px 0 38px}
  .hero-cta .btn-ghost,.hero-cta .btn-gold{width:auto;text-align:center}
}

/* ---- photo strip ---- */
.strip{padding:0 0 10px}
.strip-grid{display:grid;grid-template-columns:1fr 1.32fr 1fr;gap:10px}
.strip figure{margin:0;overflow:hidden;border-radius:9px;background:var(--alt)}
.strip img{width:100%;height:270px;object-fit:cover;transition:transform .5s ease}
.strip figure:hover img{transform:scale(1.03)}
.strip-cap{width:min(1180px,92vw);margin:12px auto 0;font-size:13px;color:var(--muted);letter-spacing:.01em}

/* about band 2-col */
.band-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:44px;align-items:center}
.band-photo{margin:0;overflow:hidden;border-radius:11px}
.band-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* masthead logo */
.logo img{height:64px}

@media (max-width:980px){
  .band-grid{grid-template-columns:1fr;gap:26px}
  .strip img{height:210px}
}
@media (max-width:620px){
  .strip-grid{grid-template-columns:1fr;gap:9px}
  .strip img{height:220px}
  .logo img{height:50px}
}

@media (max-width:620px){
  .t-hide{display:none}
  .masthead-in{justify-content:center}
}

/* ================= photo backdrop band ================= */
.pat-stripe{position:relative;isolation:isolate;overflow:hidden}
.pat-stripe::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("/assets/img/pat-stripe.webp") center/cover no-repeat;
  opacity:.42;
}

/* ================= hero proof card (the 5.0 / 280 reviews block) ================= */
.hero-sub{font-size:19px;font-weight:500;color:var(--ink);margin-bottom:18px}
.proof{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin-bottom:22px;box-shadow:0 5px 18px rgba(16,24,52,.07);
}
.proof-score{display:flex;align-items:center;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.proof-num{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;
  font-size:52px;line-height:.86;color:var(--navy);
}
.proof-stars{color:var(--gold-star);font-size:20px;letter-spacing:3px;line-height:1}
.proof-count{
  font-family:"Jost",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:5px;
}
.proof-g{margin-left:auto;flex:0 0 auto}
.proof-list{list-style:none;padding:0;margin:15px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.proof-list li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.38;color:var(--ink)}
.proof-list svg{flex:0 0 auto;margin-top:3px}

.pains-lead{font-size:16px;color:var(--muted);margin-bottom:12px}

/* torn-edge team shot under the hero copy */
.team-shot{margin:30px 0 0;position:relative}
.team-shot img{width:100%;height:auto;filter:drop-shadow(0 10px 22px rgba(16,24,52,.17))}
.team-shot figcaption{
  margin-top:12px;font-family:"Jost",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);
}

/* ================= Google-style reviews ================= */
.greviews{padding-top:52px}
.grev-head{display:flex;align-items:center;gap:15px;margin-bottom:26px}
.grev-h-score{display:flex;align-items:center;gap:10px;line-height:1}
.grev-h-score b{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;
  font-size:38px;font-weight:400;color:var(--navy);
}
.grev-h-stars{color:var(--gold-star);font-size:19px;letter-spacing:3px}
.grev-h-meta{font-size:14px;color:var(--muted);margin-top:5px}
.grev-h-meta b{color:var(--ink);font-weight:700}

.grevs{display:grid;grid-template-columns:repeat(auto-fit,minmax(304px,1fr));gap:16px}
.grev{
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:19px 19px 21px;
  display:flex;flex-direction:column;
}
.grev-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.grev-av{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Jost",sans-serif;font-weight:700;font-size:16px;
}
.grev-id{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.grev-id b{font-size:14.5px;font-weight:700;color:var(--ink)}
.grev-when{font-size:12.5px;color:var(--muted)}
.grev-g{margin-left:auto;flex:0 0 auto}
.grev-stars{color:var(--gold-star);font-size:14px;letter-spacing:2.5px;margin-bottom:9px}
.grev-txt{font-size:14.5px;color:#333A4F;line-height:1.6}

/* ================= credentials ================= */
.creds{background:#fff;padding:56px 0;border-bottom:1px solid var(--line)}
.creds-in{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center}
.creds-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.creds-list li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--ink);line-height:1.45}
.creds-list svg{flex:0 0 auto;margin-top:3px}
.creds-badges{background:var(--alt);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.creds-badges img{display:block;width:100%;height:auto}
.creds-shield{background:var(--navy-deep);border-color:var(--navy-deep)}
.creds-shield img{max-width:230px;margin:0 auto}
@media (max-width:860px){
  .creds{padding:40px 0}
  .creds-in{grid-template-columns:1fr;gap:24px}
  .creds-badges{padding:18px 14px}
}

/* ================= service area ================= */
/* The map used to sit in the right half of a two-column grid, about 570px wide,
   which shrank its labels to roughly 8px. It now gets the full content width
   below the copy and chips, and on phones it links out to the full-size PNG. */
.area-grid{display:block;max-width:760px;margin:0 auto;text-align:center}
.area-grid .areas{justify-content:center}
.map-wrap{
  position:relative;display:block;max-width:980px;margin:34px auto 0;
  border-radius:14px;overflow:hidden;border:1px solid rgba(194,145,46,.35);
  box-shadow:0 18px 44px rgba(16,24,52,.28);background:#01040C;
}
.map-wrap img{display:block;width:100%;height:auto}
/* No link and no "view full map" caption: Matt DuBois, 2026-09-22, no external
   or outbound links on the landing page. */
@media (max-width:760px){ .map-wrap{margin-top:24px} }

/* ================= final offer ================= */
.final{padding:72px 0}
.offer-card{
  background:#fff;border-radius:16px;padding:44px 40px;max-width:760px;margin:0 auto;
  text-align:center;box-shadow:0 22px 50px rgba(0,0,0,.24);border-top:6px solid var(--gold);
}
.offer-flag{
  display:inline-block;background:var(--maroon);color:#fff;
  font-family:"Jost",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 15px;border-radius:4px;margin-bottom:16px;
}
.offer-card h2{color:var(--navy);margin-bottom:18px}
.offer-card .gold{color:var(--green)}
.offer-price{display:flex;align-items:baseline;justify-content:center;gap:16px;margin-bottom:14px}
.offer-was{font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;font-size:34px;color:#5E6578}
.offer-now{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;font-size:54px;line-height:.92;
  color:var(--green);letter-spacing:.01em;
}
.offer-sub{font-size:16px;color:var(--muted);line-height:1.62;max-width:56ch;margin:0 auto 22px}
.offer-list{
  list-style:none;padding:0;margin:0 auto 26px;display:flex;flex-wrap:wrap;
  gap:10px 26px;justify-content:center;
}
.offer-list li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink)}
.btn-xl{font-size:18px;padding:18px 34px}
/* a long label at desktop size becomes a two-line slab on a phone */
@media (max-width:620px){
  .btn-gold,.btn-ghost{font-size:13.5px;padding:11px 18px;letter-spacing:.03em}
  .btn-xl{font-size:14px;padding:12px 20px}
}
@media (max-width:380px){
  .btn-gold,.btn-ghost{font-size:12.5px;padding:10px 14px}
  .btn-xl{font-size:13px;padding:11px 16px}
}
.btn-onwhite{border-color:var(--navy);color:var(--navy)}
.btn-onwhite:hover{background:var(--navy);color:#fff}
.offer-fine{
  margin-top:20px;font-family:"Jost",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}

@media (max-width:980px){
  .area-grid{grid-template-columns:1fr;gap:28px}
  .proof-list{grid-template-columns:1fr}
}
@media (max-width:620px){
  .offer-card{padding:32px 22px;border-radius:13px}
  .offer-now{font-size:52px}
  .offer-was{font-size:32px}
  .offer-list{flex-direction:column;align-items:flex-start;text-align:left}
  .final-cta .btn-gold,.final-cta .btn-ghost{width:auto;text-align:center}
  .grev-head{flex-wrap:wrap;gap:12px}
}

/* ================= hero: photo backdrop, heavy left-to-right fade ================= */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-top:34px}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:url("/assets/img/hero-bg.webp") right center/cover no-repeat;
  opacity:.34;
  /* strongest on the right, gone by the time it reaches the headline */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.8) 68%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.8) 68%,#000 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.72) 30%,rgba(255,255,255,.18) 62%,transparent 100%);
}
.hero h1{margin-bottom:20px}

/* proof card: the review COUNT is the headline number */
.proof-num{font-size:52px;font-weight:800;letter-spacing:-.03em}
.proof-meta{line-height:1.2}
.proof-stars{display:flex;align-items:center;gap:8px;font-size:18px;letter-spacing:2px}
.proof-stars b{
  font-family:"Jost",sans-serif;font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink);
}
.proof-count{
  font-family:"Jost",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-top:4px;
}

/* ================= reviews: photo backdrop + headline ================= */
.greviews{position:relative;isolation:isolate;overflow:hidden;padding:60px 0 66px}
.rev-bg{
  position:absolute;inset:0;z-index:-1;
  background:url("/assets/img/rev-bg.webp") center 28%/cover no-repeat;
  opacity:.75;
}
.rev-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.70) 45%,rgba(255,255,255,.90) 100%);
}
.rev-title{margin-bottom:20px}
.grev{background:rgba(255,255,255,.97);backdrop-filter:blur(2px)}

/* ================= programs: three photo cards ================= */
.sect-head-c{text-align:center;margin-left:auto;margin-right:auto}
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prog{
  position:relative;border-radius:13px;overflow:hidden;background:var(--navy);
  box-shadow:0 12px 30px rgba(16,24,52,.17);
  transition:transform .22s ease, box-shadow .22s ease;
}
.prog:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,24,52,.24)}
.prog img{width:100%;height:290px;object-fit:cover;display:block}
.prog-body{
  position:absolute;inset:auto 0 0 0;padding:52px 20px 20px;color:#fff;
  background:linear-gradient(180deg,transparent 0%,rgba(16,24,52,.82) 46%,rgba(16,24,52,.96) 100%);
}
.prog-body h3{color:#fff;font-size:25px;margin-bottom:6px;letter-spacing:.015em}
.prog-body p{font-size:14.5px;line-height:1.5;color:#D6DDEF}
.prog-cta{margin-top:30px;text-align:center}

@media (max-width:980px){
  .prog-grid{grid-template-columns:1fr;gap:16px}
  .prog img{height:235px}
  .hero-bg{opacity:.22}
  .hero-bg,.hero-bg::after{-webkit-mask-image:none;mask-image:none}
  .hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.94) 100%)}
}
@media (max-width:620px){
  .proof-num{font-size:48px}
  .prog-body h3{font-size:22px}
}

/* ================= hero balance: match the two columns ================= */
/* form gets real labels, which also lifts it to the height of the left column */
.lf-row{align-items:flex-start}
.lf-field{flex:1 1 46%;min-width:0;display:flex;flex-direction:column;gap:5px}
.lf-row > .lf-field:only-child{flex:1 1 100%}
.lead-form label{
  font-family:"Jost",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:#CFD6EA;
}
.lead-form textarea{min-height:78px}
.lf-callback{
  font-size:12.5px;line-height:1.5;color:#B4BEDB;margin-top:12px;text-align:center;
}
.lf-fine{margin-top:9px;text-align:center}

/* left column trimmed so both sides land together */
.ribbon{font-size:13px;padding:9px 17px;letter-spacing:.03em}
.proof{margin-bottom:18px}
.pains{gap:6px 22px;margin-bottom:18px}
.team-shot{margin-top:24px}
.team-shot img{width:100%;height:auto}
.team-shot figcaption{margin-top:10px}

/* balance pass 2 */
.hero h1{margin-bottom:14px}
.ribbon{margin-bottom:14px}
.proof{margin-bottom:14px;padding:16px 18px}
.proof-list{margin-top:13px;gap:9px 20px}
.pains{margin-bottom:16px}
.team-shot{margin-top:18px}

.lead-form textarea{min-height:104px}
.lf-row{margin-bottom:13px}

/* balance pass 3: let the card fill the remaining difference instead of shrinking the photo to nothing */

.form-card{display:flex;flex-direction:column}
.form-card .lead-form{display:flex;flex-direction:column;flex:1}

.team-shot img{max-height:none;width:100%;height:auto;object-fit:fill}

/* balance pass 4: trim the left column to the form's natural height instead of inflating the card */
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;margin-bottom:13px}
.proof{margin-bottom:13px;padding:15px 18px}
.proof-num{font-size:52px}
.pains{margin-bottom:15px;gap:5px 22px}
.pains li{font-size:15px}
.hero-cta{gap:10px}
.team-shot{margin-top:16px}
.team-shot img{width:100%;height:auto}

/* balance pass 5 */
.team-shot{max-width:74%}
.lead-form textarea{min-height:132px}

@media (max-width:980px){
  /* the 74% cap exists only to balance the two desktop columns */
  .team-shot{max-width:100%}
}

/* ================= sticky header, phone lives here only ================= */
.masthead{position:sticky;top:0;z-index:70;background:#fff;box-shadow:0 1px 0 var(--line)}
.masthead-in{padding:11px 0}
.logo img{height:56px}
.topbar-in{justify-content:center;text-align:center}

/* ================= pain list without the X glyphs ================= */
.pains li{
  position:relative;padding-left:16px;align-items:center;color:var(--ink);
}
.pains li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--green);
}

/* ================= social proof stat band ================= */
.statband{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.statband-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
.stat + .stat::before{
  content:"";position:absolute;left:-11px;top:8%;bottom:8%;width:1px;background:var(--line);
}
.stat-n{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;
  font-size:clamp(30px,3.2vw,42px);line-height:1;color:var(--navy);letter-spacing:.01em;
}
.stat-l{
  font-family:"Jost",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}

/* review headline centred, floating widget gone */
.rev-title{margin-bottom:26px}

/* ================= why us, rebuilt ================= */
.whyus{padding:66px 0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px 24px;
  position:relative;transition:transform .2s ease, box-shadow .2s ease;
}
.why:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,24,52,.12)}
.why-n{
  display:inline-block;font-family:"Jost",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.12em;color:#fff;background:var(--green);
  padding:5px 9px;border-radius:4px;margin-bottom:13px;
}
.why h3{color:var(--navy);font-size:23px;margin-bottom:9px;letter-spacing:.012em}
.why p{font-size:14.5px;line-height:1.6;color:var(--muted)}

@media (max-width:980px){
  .statband-grid{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .stat:nth-child(3)::before{display:none}
  .why-grid{grid-template-columns:1fr}
  .masthead{position:static}
}
@media (max-width:620px){
  .statband-grid{grid-template-columns:1fr;gap:22px}
  .stat + .stat::before{display:none}
  .stat + .stat{border-top:1px solid var(--line);padding-top:20px}
}

/* ================= make the four flat sections read ================= */

/* stat band: navy slab instead of a pale grey stripe */
.statband{background:var(--green-deep);border:0;padding:34px 0}
.statband-grid{gap:20px}
.stat + .stat::before{background:rgba(255,255,255,.18)}
.stat-n{color:var(--cream)}
.stat-l{color:#B4BEDB}

/* reviews: drop the section into navy so the white cards actually pop */
.greviews{background:var(--navy-deep)}
.rev-bg{opacity:.3}
.rev-bg::after{
  background:linear-gradient(180deg,rgba(16,24,52,.90) 0%,rgba(16,24,52,.78) 45%,rgba(16,24,52,.94) 100%);
}
.greviews .sect-label{color:#F3DC9C}
.greviews h2{color:#fff}
.greviews .gold{color:var(--cream)}
.grev{
  background:#fff;border:0;border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}

/* why us: cream ground, the brand colour that was going unused */
.whyus{background:var(--cream)}
/* the eyebrow sits on the pale-gold whyus ground */
.whyus .sect-label{color:#0F2050}
.why{
  background:#fff;border:0;border-left:4px solid var(--green);
  box-shadow:0 10px 26px rgba(16,24,52,.13);
}
.why:hover{box-shadow:0 18px 40px rgba(16,24,52,.2)}

/* service area: solid chips, not hairline bubbles */
.areas{gap:10px}
.area{
  background:var(--navy);border:0;color:#fff;font-weight:600;
  padding:11px 20px;border-radius:7px;font-size:14.5px;letter-spacing:.015em;
  box-shadow:0 4px 12px rgba(16,24,52,.2);
}

/* ================= brand lockup (client-supplied stacked mark) ================= */
.masthead-in{padding:9px 0}
.logo img{height:50px;width:auto}
.foot-logo img{height:56px;width:auto;opacity:.95}
.foot-grid{align-items:center}

@media (max-width:620px){
  .logo img{height:40px}
  .foot-logo img{height:46px}
}

/* ================= how it works ================= */
.process{padding:66px 0}
.process .sect-head{margin-bottom:38px}
.proc-intro{color:#CFD6EA;font-size:16px;line-height:1.6;margin-top:12px;max-width:62ch;margin-left:auto;margin-right:auto}
.steps{
  list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  counter-reset:step;
}
.step{position:relative;padding-top:8px}
/* connecting rule between the steps */
.step::after{
  content:"";position:absolute;top:29px;left:calc(50% + 34px);right:calc(-50% + 34px);
  height:2px;background:rgba(243,220,156,.26);
}
.step:last-child::after{display:none}
.step-n{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;margin:0 auto 16px;
  background:var(--cream);color:var(--navy);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;font-size:29px;line-height:1;
  position:relative;z-index:1;
}
.step h3{color:#fff;font-size:22px;text-align:center;margin-bottom:9px;letter-spacing:.012em}
.step p{color:#CFD6EA;font-size:14.5px;line-height:1.6;text-align:center}
.proc-cta{justify-content:center;margin-top:36px}

@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr;gap:30px 20px}
  .step:nth-child(2)::after{display:none}
}
@media (max-width:620px){
  .steps{grid-template-columns:1fr;gap:26px}
  .step::after{display:none}
  .proc-cta{flex-direction:column;align-items:center;text-align:center}
}

/* ================= headline wrap ================= */
.nowrap{white-space:nowrap}
/* a nowrap tail wider than the viewport is what pushed the whole page sideways on mobile */
@media (max-width:620px){
  .nowrap{white-space:normal}
}
.hero h1{text-wrap:balance}


/* form card value badge */

/* ================= reviews: one scrolling row, more backdrop ================= */
.rev-bg{opacity:.52}
.rev-bg::after{
  background:linear-gradient(180deg,rgba(16,24,52,.86) 0%,rgba(16,24,52,.58) 45%,rgba(16,24,52,.88) 100%);
}
.revscroll{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
/* Was a -50% marquee over a doubled card list. A marquee cannot carry a filter:
   the translate maths assume a fixed card count, so hiding cards makes it jump,
   and the doubling means every card renders twice. Now a plain scroll-snap row. */
.revtrack{display:flex;gap:16px;width:max-content}
.revscroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.revtrack .grev{width:330px;flex:0 0 330px;scroll-snap-align:center}
.grev[hidden]{display:none}

/* ---- review category picker ---- */
.revpick{display:flex;flex-direction:column;gap:8px;align-items:center;margin:0 0 22px}
.revpick__lab{
  font-family:"Outfit",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.01em;color:#fff;
}
.revpick__sel{
  width:min(420px,92%);padding:13px 15px;border-radius:8px;
  border:1px solid rgba(243,220,156,.45);background:rgba(255,255,255,.08);color:#fff;
  font-family:"Jost",sans-serif;font-weight:500;font-size:15px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8E4E6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.revpick__sel:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.revpick__sel option{color:#141A2B;background:#fff}
.revpick__rec{
  text-align:center;color:#CFD6EA;font-size:14.5px;margin:-8px 0 18px;
}
.revpick__rec a{color:var(--cream);font-weight:600}
.revpick__empty .lk{
  background:none;border:0;padding:0;color:var(--cream);font:inherit;
  font-weight:600;text-decoration:underline;cursor:pointer;
}
.revpick__empty{
  text-align:center;color:#CFD6EA;font-size:15px;padding:26px 18px;
  border:1px dashed rgba(243,220,156,.4);border-radius:10px;margin-bottom:14px;
}
.revscroll-hint{
  text-align:center;margin-top:20px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#B4BEDB;font-weight:600;
}

/* ================= final offer headline ================= */
.offer-card h2{margin-bottom:6px}
.offer-price{margin:6px 0 16px;gap:18px}
.offer-now{font-size:74px}
.offer-was{font-size:42px}

@media (max-width:620px){
  .revtrack .grev{width:276px;flex:0 0 276px}
  .offer-now{font-size:56px}
}

/* ================= offer line: one continuous statement ================= */
.offerbar{
  display:inline-block;background:var(--navy);color:#fff;border-radius:8px;
  font-family:"Jost",sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:13px 22px;margin-bottom:16px;box-shadow:0 6px 18px rgba(16,24,52,.2);
}
.offerbar b{
  color:var(--cream);font-weight:700;
}
/* form header carries the same line, sized for the card */
.form-val{
  display:block;background:rgba(243,220,156,.14);border:1px solid rgba(243,220,156,.32);
  border-radius:7px;padding:10px 14px;margin-bottom:18px;
  font-family:"Jost",sans-serif;font-weight:600;font-size:13.5px;color:#EAEEF8;letter-spacing:.015em;
}
.form-val b{color:var(--cream);font-weight:700}

/* ================= process: more to look at ================= */
.steps{gap:16px}
.step{
  background:rgba(255,255,255,.055);border:1px solid rgba(243,220,156,.16);
  border-radius:13px;padding:26px 20px 24px;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.step:hover{background:rgba(255,255,255,.1);border-color:rgba(243,220,156,.34);transform:translateY(-3px)}
/* the connecting rule has to sit outside the cards now */
.step::after{display:none}
.step-n{
  width:52px;height:52px;margin:0 auto 14px;font-size:26px;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14px}
.proc-cta{display:flex;justify-content:center;margin-top:34px}

@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .steps{grid-template-columns:1fr}
  .offerbar{font-size:13.5px;padding:12px 16px}
}

/* ================= thank-you page ================= */
body.ty{background:var(--alt)}
.ty-wrap{padding:56px 0 70px}
.ty-inner{max-width:720px;margin:0 auto;text-align:center;background:#fff;border-radius:16px;
  padding:44px 40px 40px;box-shadow:0 18px 44px rgba(16,24,52,.13);border-top:6px solid var(--green)}
.ty-check{
  display:inline-flex;align-items:center;justify-content:center;width:74px;height:74px;
  border-radius:50%;background:var(--green);margin-bottom:18px;
  box-shadow:0 8px 22px rgba(194,145,46,.30);
}
.ty-h1{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.1vw,37px);line-height:1.06;color:var(--navy);margin:8px 0 14px;text-wrap:balance;
}
.ty-lede{font-size:16.5px;line-height:1.62;color:var(--muted);max-width:56ch;margin:0 auto 26px}
.ty-hours{font-size:13px;color:var(--muted);margin-top:12px;letter-spacing:.02em}
.ty-next{margin-top:38px;padding-top:32px;border-top:1px solid var(--line);text-align:left}
.ty-next h2{
  font-size:24px;color:var(--navy);text-align:center;margin-bottom:22px;
}
.ty-steps{list-style:none;padding:0;margin:0;display:grid;gap:15px}
.ty-steps li{display:flex;align-items:flex-start;gap:14px}
.ty-steps span{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--cream);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;font-size:18px;line-height:1;
}
.ty-steps p{font-size:15px;line-height:1.55;color:var(--ink);padding-top:6px}
.ty-foot{margin-top:30px;font-size:14px;color:var(--muted)}
.ty-foot a{color:var(--green);font-weight:600}

@media (max-width:620px){
  .ty-inner{padding:32px 22px 30px;border-radius:13px}
  .ty-wrap{padding:30px 0 48px}
}

/* ================= process: photo backdrop + cards that read ================= */
.process{position:relative;isolation:isolate;overflow:hidden}
.process-bg{
  position:absolute;inset:0;z-index:-1;
  background:url("/assets/img/process-bg.webp") center 34%/cover no-repeat;
  opacity:.5;
}
.process-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,24,52,.90) 0%,rgba(16,24,52,.72) 45%,rgba(16,24,52,.93) 100%);
}
.step{
  background:rgba(12,16,36,.72);
  border:1px solid rgba(243,220,156,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(3px);
}
.step:hover{
  background:rgba(12,16,36,.85);
  border-color:var(--cream);
  box-shadow:0 20px 44px rgba(0,0,0,.44);
}
.step-n{box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* ================= final offer badge carries the offer now ================= */
.offer-flag{
  background:var(--green);font-size:12.5px;letter-spacing:.09em;padding:9px 18px;
  margin-bottom:18px;
}
.offer-card h2{margin-bottom:16px}

/* ================= why cards as disclosure panels ================= */
details.why{padding:0}
details.why > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;
  padding:22px 22px;
}
details.why > summary::-webkit-details-marker{display:none}
details.why > summary .why-n{margin:0;flex:0 0 auto}
details.why > summary h3{margin:0;flex:1;font-size:20px}
details.why > p{margin:0;padding:0 22px 22px}
.why-caret{
  flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--green);
  border-bottom:2.5px solid var(--green);transform:rotate(45deg);margin-top:-5px;
  transition:transform .2s ease;display:none;
}
details.why[open] .why-caret{transform:rotate(-135deg);margin-top:3px}
details.why > summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ================= sticky bar is the eval CTA now ================= */


@media (max-width:860px){
  .why-caret{display:block}
  details.why > summary{padding:17px 18px}
  details.why > summary h3{font-size:18px}
  details.why > p{padding:0 18px 18px}
  .whyus{padding:44px 0}
  .why-grid{gap:11px}
}

/* ================= mobile hero: cut the dead space ================= */
@media (max-width:620px){
  .topbar-in{padding:6px 0}
  .trust{font-size:11.5px}
  .masthead-in{padding:7px 0}
  .logo img{height:36px}
  .hero{padding:14px 0 22px}
  .offerbar{font-size:12.5px;padding:9px 13px;margin-bottom:11px;line-height:1.4}
  .hero h1{margin-bottom:11px}
  .proof{padding:13px 15px;margin-bottom:11px}
  .proof-list{margin-top:11px;gap:7px}
  .hero-cta{gap:8px;margin-bottom:0}
  .team-shot{margin-top:13px}
  .team-shot figcaption{margin-top:8px;font-size:12px}
}

/* the sticky bar is the eval CTA now, so the phone has to stay reachable up top */
@media (max-width:620px){
  .masthead-in{justify-content:space-between;gap:10px}
  .masthead-in .call-btn{
    display:inline-flex;padding:9px 12px;font-size:13.5px;gap:6px;border-radius:6px;
  }
  .masthead-in .call-btn span{display:none}
  /* the phone is fixed width, so the wordmark is what has to give way */
  .masthead .logo{gap:9px}
  .masthead .logo img{height:40px;width:40px}
  /* the wordmark is 2.51:1, so it must never be forced square. This needs
     .masthead .logo depth to outrank the rule directly above it. */
  .masthead .logo .logo-mark{height:38px;width:auto;max-width:46vw}
  .masthead .logo-word b{font-size:15px;letter-spacing:-.01em}
}
@media (max-width:380px){
  .masthead .logo img{height:34px;width:34px}
  .masthead .logo-word b{font-size:13px}
  .masthead-in .call-btn{padding:8px 10px;font-size:12.5px}
}

/* ================= popup form: compact, leads with the review proof ================= */
.form-card-c{padding:20px 20px 18px;border-radius:12px}
.fc-proof{
  display:flex;align-items:center;gap:11px;
  background:rgba(243,220,156,.13);border:1px solid rgba(243,220,156,.3);
  border-radius:8px;padding:10px 13px;margin-bottom:14px;
}
.fc-proof-n{
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;
  font-size:34px;line-height:.9;color:var(--cream);
}
.fc-proof-meta{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.fc-proof-stars{color:var(--gold-star-dk);font-size:14px;letter-spacing:1.5px}
.fc-proof-stars b{
  font-family:"Jost",sans-serif;font-size:13px;font-weight:700;letter-spacing:0;color:#fff;
}
.fc-proof-lab{
  font-family:"Jost",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#CFD6EA;
}
.fc-proof .proof-g{margin-left:auto}

.form-card-c .form-head h3{font-size:22px;margin:0 0 8px}
.form-card-c .form-val{font-size:12.5px;padding:8px 11px;margin-bottom:14px}
.form-card-c .lf-row{margin-bottom:10px}
.form-card-c .lead-form label{font-size:11.5px}
.form-card-c .lead-form input,
.form-card-c .lead-form select,
.form-card-c .lead-form textarea{padding:10px 13px;font-size:14.5px}
.form-card-c .lead-form textarea{min-height:66px}
.form-card-c .lf-submit{padding:14px 16px;font-size:15px}
.form-card-c .lf-callback{font-size:11.5px;margin-top:10px}

@media (max-width:620px){
  .modal{padding:14px}
  .form-card-c{padding:16px 16px 15px}
  .fc-proof-n{font-size:29px}
}

/* ================= sticky call CTA, pulsing ================= */
.sticky{background:var(--green);overflow:hidden}
.sticky-cta{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:var(--sticky-h);color:#fff;text-decoration:none;
  font-family:"Jost",sans-serif;font-weight:700;font-size:15.5px;
  letter-spacing:.04em;text-transform:uppercase;
  animation:ctaPulse 1.9s ease-in-out infinite;
}
.sticky-cta svg{flex:0 0 auto}
/* the glow sweeps behind the label rather than moving it */
.sticky::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* .28 dropped the white label to 3.76:1 at peak; .15 keeps the worst case at 5.12:1 */
  background:radial-gradient(ellipse at center, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 65%);
  animation:ctaGlow 1.9s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.028)}
}
@keyframes ctaGlow{
  0%,100%{opacity:0}
  50%{opacity:1}
}
.sticky-cta:active{transform:scale(.99)}

/* a pulsing bar is exactly what motion sensitivity flags, so stop it cleanly */
@media (prefers-reduced-motion:reduce){
  .sticky-cta{animation:none}
  .sticky::after{animation:none;opacity:0}
}
@media (max-width:380px){
  .sticky-cta{font-size:14px;letter-spacing:.02em;gap:7px}
}
.offer-list svg{flex:0 0 auto}