/* Team Dog with Yasmin LPs. Palette sampled from her logo: indigo #181038, orange #F8A000.
   Type is Manrope, the font on teamdogwithyasmin.net. Layout adapted from the RevvedPro dog-trainer template. */
:root{
  --navy:#1E1650;
  --navy-deep:#140E36;
  --navy-line:#342A72;
  --green:#B45309;       /* accent text and fills on white, 5.0:1 */
  --green-deep:#8A4A00;
  --cream:#FFC24D;       /* accent on the indigo bands */
  --maroon:#1E1650;
  --gold:#F8A000;        /* action colour, her logo orange; always carries indigo text */
  --gold-hi:#FFB42E;
  --gold-ink:#B45309;
  --gold-star:#B45309;   /* star glyphs are text, so they need 4.5:1 on white */
  --ink:#171130;
  --muted:#5B5872;
  --canvas:#FFFFFF;
  --alt:#F7F5FB;
  --line:#E6E2F0;
  --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:"Manrope",-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:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(36px,5.4vw,66px);line-height:1.04;letter-spacing:-.005em}
h2{font-size:clamp(26px,3.4vw,42px);line-height:1.08}
h3{font-size:21px;line-height:1.22;letter-spacing:.012em}
p{margin:0}
.eyebrow{font-family:"Manrope",sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sect-label{font-family:"Manrope",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:#CAC5E3;margin:0}
.trust b{color:#fff;font-weight:600}
.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 img{height:52px;width:auto}
.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;
}
.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(--navy-deep);
  font-family:"Manrope",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:"Manrope",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}

.btn-gold{
  display:inline-block;background:var(--gold);color:var(--navy-deep);text-decoration:none;
  font-family:"Manrope",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:"Manrope",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:"Manrope",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(--navy);border-radius:12px;padding:28px 26px 26px;
  box-shadow:0 14px 34px rgba(20,14,54,.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{color:#BDB7DA;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 #4A3F8C;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:#6E6A85}
.lead-form select:invalid{color:#6E6A85}
.lead-form input:hover,.lead-form select:hover,.lead-form textarea:hover{border-color:#6A5FB0}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(248,160,0,.34);
}
.lf-submit{
  width:100%;margin-top:4px;background:var(--gold);color:var(--navy-deep);border:0;border-radius:7px;
  padding:16px 18px;font-family:"Manrope",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:#BDB7DA;min-height:1em}
.lf-status.ok{color:#FFC24D}
.lf-status.err{color:#FFB4AE}
.lf-fine{font-size:11.5px;color:#A7A1C4;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:"Manrope",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:#CFCAE6;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:#B1ABCF;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 #F5D9A8;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(--gold)}
.final > .wrap > p{color:#C6C1E0;margin:14px 0 26px;font-size:17px}
.final-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* footer */
.foot{background:#0D0926;color:#A7A1C4;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:#D8D3EC;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(--navy-deep);text-decoration:none;font-family:"Manrope",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(13,9,38,.72);padding:22px;overflow-y:auto}
.modal.is-open{display:flex;align-items:flex-start;justify-content:center}
.modal-box{position:relative;width:min(520px,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(--navy-deep)}

@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:100%;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}
}

/* ================= stripe backdrop ================= */
.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 ================= */
.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(30,22,80,.07);
}
.proof-score{display:flex;align-items:center;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.proof-num{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  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:"Manrope",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(30,22,80,.17))}
.team-shot figcaption{
  margin-top:12px;font-family:"Manrope",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:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  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:"Manrope",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:#3E3A55;line-height:1.6}

/* ================= service area + locked map ================= */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.map-wrap{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(30,22,80,.11);aspect-ratio:4/3;background:var(--alt);
}
.map-wrap iframe{
  position:absolute;top:-22%;left:-16%;width:132%;height:140%;border:0;
  filter:saturate(.9);pointer-events:none;
}
/* transparent lid: the map is decoration, not a destination */
.map-lock{position:absolute;inset:0;z-index:2;cursor:default;background:transparent}

/* ================= 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:"Manrope",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:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:40px;color:#6E6A85}
.offer-now{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:62px;line-height:.9;
  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}
.btn-onwhite{border-color:var(--navy);color:var(--navy)}
.btn-onwhite:hover{background:var(--navy);color:#fff}
.offer-fine{
  margin-top:20px;font-family:"Manrope",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:100%;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:60px;letter-spacing:-.01em}
.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:"Manrope",sans-serif;font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink);
}
.proof-count{
  font-family:"Manrope",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(30,22,80,.17);
  transition:transform .22s ease, box-shadow .22s ease;
}
.prog:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(30,22,80,.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(20,14,54,.82) 46%,rgba(20,14,54,.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:#DDD9EE}
.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:"Manrope",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:#D2CDE8;
}
.lead-form textarea{min-height:78px}
.lf-callback{
  font-size:12.5px;line-height:1.5;color:#BDB7DA;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:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(30px,3.2vw,42px);line-height:1;color:var(--navy);letter-spacing:.01em;
}
.stat-l{
  font-family:"Manrope",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(30,22,80,.12)}
.why-n{
  display:inline-block;font-family:"Manrope",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(--navy);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:#BDB7DA}

/* 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(20,14,54,.90) 0%,rgba(20,14,54,.78) 45%,rgba(20,14,54,.94) 100%);
}
.greviews .sect-label{color:#FFC24D}
.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:#FFF6E6}
.why{
  background:#fff;border:0;border-left:4px solid var(--green);
  box-shadow:0 10px 26px rgba(30,22,80,.13);
}
.why:hover{box-shadow:0 18px 40px rgba(30,22,80,.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(30,22,80,.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:#CFCAE6;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(255,194,77,.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:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;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:#CFCAE6;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:stretch;text-align:center}
}

/* ================= headline wrap ================= */
.nowrap{white-space:nowrap}
.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(20,14,54,.86) 0%,rgba(20,14,54,.58) 45%,rgba(20,14,54,.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);
}
.revtrack{display:flex;gap:16px;width:max-content;animation:revmarquee 64s linear infinite}
.revscroll:hover .revtrack{animation-play-state:paused}
.revtrack .grev{width:330px;flex:0 0 330px}
@keyframes revmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .revtrack{animation:none}
  .revscroll{overflow-x:auto;scroll-snap-type:x mandatory}
  .revtrack .grev{scroll-snap-align:center}
}
.revscroll-hint{
  text-align:center;margin-top:20px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#B1ABCF;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:"Manrope",sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;
  padding:13px 22px;margin-bottom:16px;box-shadow:0 6px 18px rgba(30,22,80,.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(255,194,77,.14);border:1px solid rgba(255,194,77,.32);
  border-radius:7px;padding:10px 14px;margin-bottom:18px;
  font-family:"Manrope",sans-serif;font-weight:600;font-size:13.5px;color:#EAF1F7;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(255,194,77,.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(255,194,77,.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(30,22,80,.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(248,160,0,.34);
}
.ty-h1{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,3.6vw,42px);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:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;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(20,14,54,.90) 0%,rgba(20,14,54,.72) 45%,rgba(20,14,54,.93) 100%);
}
.step{
  background:rgba(14,9,40,.72);
  border:1px solid rgba(255,194,77,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(3px);
}
.step:hover{
  background:rgba(14,9,40,.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}

/* ================= Team Dog additions: sections her copy needs that the template lacked ================= */
/* stripe backdrop: drawn in CSS so no other brand's pattern file is involved */
.pat-stripe{background:var(--navy-deep)}
.pat-stripe::before{background:repeating-linear-gradient(90deg,var(--navy) 0 46px,#261c62 46px 92px);opacity:1}
/* hero proof: a star where the review count used to be */
.proof-num{color:var(--gold);font-size:46px}
/* story bands: photo beside her own words */
.story .band-grid{align-items:center}
.band-grid.flip > .band-photo{order:2}
.band-photo{border-radius:14px;box-shadow:0 16px 38px rgba(30,22,80,.18);aspect-ratio:5/6;max-height:640px}
.story-copy h2{margin:8px 0 18px;color:var(--navy)}
.story-lead p{font-size:19px;font-weight:700;color:var(--ink);line-height:1.45}
.story-body{margin-top:12px}
.story-body p{font-size:16px;color:var(--muted);line-height:1.7}
.story-copy .checks{margin:16px 0 4px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.story-close{margin-top:16px;font-size:17px;font-weight:600;color:var(--navy);line-height:1.55;padding-left:14px;border-left:3px solid var(--gold)}
.story-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
/* centred paragraph stacks */
.stack{max-width:68ch;margin:0 auto 22px;text-align:center}
.stack p{font-size:17px;color:var(--muted);line-height:1.7}
.stack-l{text-align:left;margin:0 0 16px}
.stack-close{max-width:64ch;margin:26px auto 0;text-align:center;font-size:18px;font-weight:700;color:var(--navy);line-height:1.5}
.checks-c{max-width:860px;margin:0 auto}
.checks li span{font-weight:600;color:var(--ink)}
/* two columns of her lists */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.duo-col{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:30px 28px;box-shadow:0 10px 26px rgba(30,22,80,.08)}
.sect-alt .duo-col{background:#fff}
.duo-col h2{font-size:clamp(22px,2.4vw,28px);color:var(--navy);margin-bottom:12px;line-height:1.15}
.duo-kicker{font-weight:700;color:var(--green);margin:-4px 0 12px}
.duo-col .checks{grid-template-columns:1fr;gap:9px;margin-bottom:14px}
.duo-out{font-size:15.5px;color:var(--muted);line-height:1.65}
/* imagine: photo cards with her "no more" lists */
.img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.img-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(30,22,80,.12);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.img-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(30,22,80,.18)}
.img-card img{width:100%;height:220px;object-fit:cover}
.img-body{padding:20px 22px 22px;border-top:4px solid var(--gold)}
.img-body h3{font-size:20px;color:var(--navy);margin-bottom:12px;line-height:1.2}
.x-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.x-list li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.x-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.x-list li:last-child{color:var(--ink);font-weight:700}
/* process: her three steps */
.steps-3{grid-template-columns:repeat(3,1fr)}
.band .proc-after{max-width:66ch;margin:28px auto 0;text-align:center;color:#CFCAE6;font-size:15.5px;line-height:1.65}
.area-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
/* a real five star review above the popup form */
.pop-rev{margin:0 0 16px;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.pop-rev .pr-stars{display:block;color:var(--gold-star);letter-spacing:2px;font-size:14px;margin-bottom:6px}
.pop-rev blockquote{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.pop-rev figcaption{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.pop-rev figcaption span{font-weight:500}
@media (max-height:760px){.pop-rev{display:none}}
.lf-callback a{color:var(--cream);font-weight:700}
.foot-logo img{height:84px;width:auto}
@media (max-width:980px){
  .duo{grid-template-columns:1fr}
  .img-grid{grid-template-columns:1fr;gap:18px}
  .steps-3{grid-template-columns:1fr}
  .band-grid.flip > .band-photo{order:0}
  .band-photo{max-height:520px}
}
@media (max-width:620px){
  .story-cta .btn-gold,.story-cta .btn-ghost,.area-cta .btn-gold,.area-cta .btn-ghost{width:100%;text-align:center}
  .story-lead p{font-size:17px}
  .img-card img{height:200px}
  .duo-col{padding:24px 20px}
  .logo img{height:58px}
}

/* round badge logo needs more height than a wordmark to read */
.logo img{height:68px}
@media (max-width:620px){.logo img{height:56px}}

/* ================= photos show whole: every frame has its file's shape, so the browser never crops ================= */
/* program cards: text sits under the photo instead of over its lower half */
.prog{display:flex;flex-direction:column}
.prog img{height:auto;aspect-ratio:760/543}
.prog-body{position:static;flex:1;padding:18px 20px 22px;background:var(--navy)}
.img-card img{height:auto;aspect-ratio:640/440}
.band-photo{max-height:none}
@media (max-width:980px){
  .prog-grid,.img-grid{max-width:560px;margin-left:auto;margin-right:auto}
  .band-photo{max-width:440px;width:100%;margin-left:auto;margin-right:auto}
}

/* ================= mobile: 9 in 10 visits are phones, so it leads here ================= */
.hint-m{display:none}
/* sticky bar carries both actions, not just the call */
.sticky{background:var(--navy-deep);padding:8px 10px;gap:9px;box-shadow:0 -3px 16px rgba(0,0,0,.3)}
.sticky > *{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;
  border-radius:9px;font-family:"Manrope",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
}
.sticky .st-call{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.sticky .st-form{background:var(--gold);color:var(--navy-deep)}
.sticky .st-form:active{transform:scale(.99)}

@media (max-width:620px){
  :root{--sticky-h:62px}
  .sticky{display:flex}
  body{padding-bottom:62px}
  /* iOS zooms into any field under 16px and throws the layout sideways mid-form */
  .lead-form input,.lead-form select,.lead-form textarea{font-size:16px}
  .lf-field label{font-size:13px}
  .lf-fine{font-size:12.5px}
  .foot{font-size:14px}
  .revscroll-hint{font-size:13px}
  /* a phone had 14,400px to scroll through */
  .sect{padding:38px 0}
  .band{padding:44px 0}
  .process{padding:44px 0}
  .greviews{padding:40px 0 46px}
  .sect-head{margin-bottom:22px}
  .story-cta,.area-cta{margin-top:18px}
  /* reviews: swipe, because nobody can hover to pause a marquee on a phone */
  .revscroll{
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    -webkit-mask-image:none;mask-image:none;scrollbar-width:none;
  }
  .revscroll::-webkit-scrollbar{display:none}
  .revtrack{animation:none}
  .revtrack .grev{scroll-snap-align:center}
  .hint-d{display:none}
  .hint-m{display:inline}
  /* phone links were 18px tall, too small to hit */
  .foot a[href^="tel:"],.lf-callback a{display:inline-block;padding:7px 0}
  /* the popup was 1,093px tall on an 812px screen, so its button sat off-screen */
  .modal{padding:14px}
  .modal .form-card{padding:20px 17px}
  .modal .sect-label,.modal .form-val,.modal .lf-callback{display:none}
  .modal .form-head{margin-bottom:14px}
  .modal .form-head h3{font-size:21px;line-height:1.2}
  .modal .lf-row{margin-bottom:9px}
  .modal .lead-form textarea{min-height:58px;height:58px}
  .modal .lf-fine{font-size:12px;margin-top:8px}
}
@media (max-height:700px){.pop-rev{display:none}}
@media (max-width:620px){
  .pop-rev{padding:11px 13px;margin-bottom:12px}
  .pop-rev blockquote{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pop-rev figcaption{margin-top:6px}
}
/* both halves of the bar the same height, and clear of the iPhone home indicator */
.sticky .st-call,.sticky .st-form{height:46px}
.sticky{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
@media (max-width:620px){body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}}

/* ================= reviews: pick the problem, see the reviews about it ================= */
.revpick{max-width:520px;margin:0 auto}
.revpick-lab{
  display:block;text-align:center;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:10px;
}
.revpick-sel{
  width:100%;padding:14px 42px 14px 16px;font-family:inherit;font-size:16px;font-weight:600;
  color:var(--ink);background:#fff;border:2px solid var(--navy);border-radius:12px;cursor:pointer;
  -webkit-appearance:none;appearance:none;box-shadow:0 8px 22px rgba(30,22,80,.1);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231E1650' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.revpick-sel:focus-visible{outline:3px solid rgba(248,160,0,.5);outline-offset:2px}
.revpick-rec{
  text-align:center;margin:14px 0 0;font-size:15.5px;font-weight:600;color:var(--ink);
}
.revpick-rec a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.revpick-rec a:hover{color:var(--green)}
.rev-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:24px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rev-track::-webkit-scrollbar{display:none}
.rev-track .grev{width:330px;flex:0 0 330px;scroll-snap-align:center}
.revs-empty{
  text-align:center;margin:26px 0 0;font-size:15.5px;color:var(--ink);font-weight:600;
}
.revs-empty a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.revs-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.revs-arrow{
  width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(30,22,80,.22);background:#fff;
  color:var(--navy);font-size:17px;line-height:1;cursor:pointer;transition:background .15s ease;
}
.revs-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.revs-arrow:disabled{opacity:.34;cursor:default}
.revs-dots{display:flex;align-items:center;gap:7px}
.revs-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#C9C3E4;cursor:pointer;
  transition:width .18s ease,background .18s ease;
}
.revs-dots button[aria-current="true"]{width:22px;border-radius:5px;background:var(--gold)}
/* the program the picker points at, flagged for a couple of seconds after the jump */
.prog.is-rec{box-shadow:0 0 0 3px var(--gold),0 18px 40px rgba(30,22,80,.24)}
@media (max-width:620px){
  .rev-track .grev{width:272px;flex:0 0 272px}
  .revpick-lab{font-size:15.5px}
  .rev-track{padding-top:18px}
}
/* the recommendation sits on the photo backdrop, so it needs its own card */
.revpick-rec{
  max-width:520px;margin:14px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 16px;box-shadow:0 10px 24px rgba(30,22,80,.12);
}
/* .grev sets display:flex, which beats the hidden attribute on its own */
.grev[hidden],.rev-track[hidden],.revs-ctrl[hidden],.revpick-rec[hidden],.revs-empty[hidden]{display:none}

/* ================= a card is a doorway to the whole review ================= */
.grev[data-full]{cursor:pointer}
.grev[data-full]:hover{box-shadow:0 14px 34px rgba(30,22,80,.18)}
.grev[data-full]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.grev-more{
  margin-top:12px;align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  font-family:"Manrope",sans-serif;font-size:13.5px;font-weight:700;color:var(--navy);
  letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px;
}
.grev-more:hover{color:var(--green)}
/* the full review, opened over the page */
.rev-modal .modal-box{width:min(620px,100%)}
.rev-modal .grev-full{
  padding:26px 26px 28px;border-radius:14px;box-shadow:0 26px 60px rgba(13,9,38,.4);
  max-height:82vh;overflow-y:auto;cursor:default;
}
.rev-modal .grev-full .grev-txt{font-size:16px;line-height:1.7;color:var(--ink)}
.rev-modal .grev-full .grev-id b{font-size:16px}
.rev-modal .rev-full-cta{margin-top:20px;width:100%;text-align:center}
@media (max-width:620px){
  .rev-modal .grev-full{padding:20px 18px 22px;max-height:78vh}
  .rev-modal .grev-full .grev-txt{font-size:15.5px}
  .grev-more{font-size:13px}
}
/* the close button sat half off a phone screen */
@media (max-width:620px){.rev-modal .modal-x{top:-7px;right:-7px;width:34px;height:34px;font-size:20px}}

/* ================= hero: her photo instead of a form, and the backdrop reads ================= */
.hero-grid{align-items:center}
.hero .team-shot{margin:0}
.hero .team-shot img{border-radius:16px}
/* the photo behind the hero was at a third opacity behind a hard left-to-right mask,
   which left it as grey noise. It is now a wash across the whole hero. */
.hero-bg{
  opacity:.62;
  -webkit-mask-image:none;mask-image:none;
  background-position:center right;
}
.hero-bg::after{
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.66) 42%,rgba(255,255,255,.88) 100%);
}
/* the closing card carries the form now */
.offer-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center;text-align:left}
.offer-grid .offer-flag{margin-left:0}
.offer-grid .offer-sub{margin-left:0;margin-right:0}
.offer-grid .offer-list{justify-content:flex-start}
.offer-grid .form-card{margin:0}
@media (max-width:980px){
  .offer-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .offer-grid .offer-list{justify-content:center}
  .hero-bg{opacity:.4}
  .hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.74) 45%,rgba(255,255,255,.92) 100%)}
}
/* the form card is sticky in the hero column; inside the closing card it must sit still */
.offer-grid .form-card{position:static;top:auto}
.offer-card.offer-grid{max-width:1040px;padding:38px 36px}
@media (max-width:620px){.offer-card.offer-grid{padding:26px 18px}}
/* the card headline already carries the offer; the form does not need to repeat it */
.offer-grid .form-card .sect-label,.offer-grid .form-card .form-val{display:none}
.offer-grid .form-head h3{font-size:23px;margin-top:0}
/* the hero photo was capped at 74% of its column and sized for a column that held a form */
.hero-grid{grid-template-columns:.92fr 1.08fr;gap:44px}
.hero .team-shot{max-width:none;width:100%}
.hero .team-shot img{width:100%;height:auto;border-radius:18px;box-shadow:0 22px 50px rgba(30,22,80,.22)}
.hero .team-shot figcaption{margin-top:12px;font-size:12.5px}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero .team-shot{max-width:100%}
}
.hero-grid{grid-template-columns:.84fr 1.16fr;gap:38px}
/* phones and tablets stack: one column, photo under the copy */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero .team-shot{max-width:100%;width:100%}
  .offer-grid{grid-template-columns:1fr}
}

/* ================= form popup on desktop: her reviews float in behind it ================= */
.rev-collage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rev-collage::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(54% 58% at 50% 50%,rgba(13,9,38,.93) 0%,rgba(13,9,38,.86) 45%,rgba(13,9,38,.72) 100%);
}
.modal-box{z-index:1}
.rbub{
  position:absolute;margin:0;max-width:min(300px,21vw);background:#fff;border-radius:16px;
  padding:13px 15px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);opacity:0;
  transform:rotate(var(--rot)) scale(.86) translateY(16px);
}
.modal.is-open .rbub{
  animation:rbIn .65s cubic-bezier(.2,.9,.3,1.25) var(--d) forwards,
            rbFloat 9s ease-in-out calc(var(--d) + .65s) infinite;
}
.rbub .rb-stars{display:block;color:var(--gold-star);font-size:13px;letter-spacing:2px;line-height:1;margin-bottom:7px}
.rbub blockquote{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.rbub figcaption{margin-top:8px;font-size:12px;font-weight:700;color:var(--muted)}
.rbub.b-md blockquote{font-size:14px}
.rbub.b-lg blockquote{font-size:14.5px}
@keyframes rbIn{to{opacity:.94;transform:rotate(var(--rot)) scale(1) translateY(0)}}
@keyframes rbFloat{
  0%,100%{opacity:.94;transform:rotate(var(--rot)) translateY(0)}
  50%{opacity:.94;transform:rotate(var(--rot)) translateY(-8px)}
}
/* phones keep the popup exactly as it was */
@media (max-width:980px){.rev-collage{display:none}}

/* the bubbles carry the proof on desktop, so the popup's single review card is mobile only */
@media (min-width:981px){.pop-rev{display:none}}
/* the picker label was dark ink on a pale photo backdrop and disappeared into it */
.revpick{text-align:center}
.revpick-lab{
  display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:17px;
  letter-spacing:.01em;padding:11px 22px;border-radius:999px;margin-bottom:14px;
  box-shadow:0 12px 26px rgba(20,14,54,.28);
}
.revpick-sel{border-color:var(--gold);box-shadow:0 10px 26px rgba(30,22,80,.16)}
@media (max-width:620px){.revpick-lab{font-size:16px;padding:10px 18px}}
/* every bubble lands at once when a CTA opens the form; only the drift is staggered */
.modal.is-open .rbub{
  animation:rbIn .5s cubic-bezier(.2,.9,.3,1.25) .05s forwards,
            rbFloat 9s ease-in-out var(--f,0s) infinite;
}

/* ================= stacked view: proof comes straight after the hero ================= */
@media (max-width:980px){
  body{display:flex;flex-direction:column}
  .topbar{order:-4}
  .masthead{order:-3}
  .hero{order:-2}
  .greviews{order:-1}
}
/* a program card is the ask: tap it and the form opens on that program */
.prog[data-program]{cursor:pointer}
.prog[data-program]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.prog-go{display:inline-block;margin-top:12px;font-size:14px;font-weight:800;color:var(--cream);letter-spacing:.02em}
.prog[data-program]:hover .prog-go{color:var(--gold)}
/* stacked hero: the label and headline sit centred over the copy */
@media (max-width:980px){
  .hero .offerbar{display:block;width:fit-content;margin-left:auto;margin-right:auto;text-align:center}
  .hero h1{text-align:center}
}

/* the small eyebrow above each headline repeated what the headline already said */
.sect-label{display:none}
.sect-head{margin-bottom:26px}
.story-copy h2{margin-top:0}

/* ================= why us: a rail that fills as you scroll, each reason lighting in turn ================= */
.why-wrap{position:relative;padding-left:52px;max-width:800px;margin:0 auto}
.why-rail{
  position:absolute;left:18px;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:rgba(30,22,80,.13);overflow:hidden;
}
.why-rail-fill{
  display:block;width:100%;height:0;border-radius:3px;
  background:linear-gradient(180deg,var(--gold),#FFD277);
  box-shadow:0 0 14px rgba(248,160,0,.6);transition:height .18s linear;
}
.why-grid{grid-template-columns:1fr;gap:14px}
.why{opacity:.7;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,box-shadow .3s ease,border-color .3s ease}
.why::before{
  content:"";position:absolute;left:-39px;top:30px;width:13px;height:13px;border-radius:50%;
  background:#EFECF8;border:2px solid #D7D1EC;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.why.is-lit{opacity:1;transform:none;border-color:rgba(248,160,0,.5);box-shadow:0 10px 26px rgba(30,22,80,.1)}
.why.is-lit::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(248,160,0,.22);transform:scale(1.08)}
.why.is-lit .why-n{color:var(--gold)}
.no-anim .why{opacity:1;transform:none}
@media (max-width:620px){
  .why-wrap{padding-left:34px}
  .why-rail{left:8px}
  .why::before{left:-30px;top:26px;width:11px;height:11px}
}
/* the Google mark reads as a signature beside the list, not a header above it */
.proof-body{display:flex;align-items:center;gap:18px}
.proof-body .proof-list{flex:1 1 auto;margin:0}
.proof-body .proof-g{flex:0 0 auto;margin-left:auto;opacity:.95}

/* ================= the popup's rotating review, on phones where it was being hidden ================= */
/* two older height rules (760px, 700px) killed it on almost every phone in portrait */
@media (max-width:980px){
  .pop-rev{display:block}
  .modal .pop-rev{padding:10px 13px;margin-bottom:11px}
  .modal .pop-rev blockquote{font-size:13px;line-height:1.45;-webkit-line-clamp:3}
  .modal .pop-rev .pr-stars{margin-bottom:5px}
}
@media (max-width:980px) and (max-height:720px){
  .modal .pop-rev blockquote{-webkit-line-clamp:2;font-size:12.5px}
  .modal .form-card{padding:17px 15px}
  .modal .lead-form textarea{min-height:50px;height:50px}
  .modal .form-head h3{font-size:19px}
}
@media (max-height:560px){.pop-rev{display:none}}

/* ================= key phrases underline themselves on the way past ================= */
.mark{position:relative;display:inline;color:inherit}
.mark::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.01em;height:.15em;border-radius:3px;
  background:var(--gold);opacity:.92;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .75s cubic-bezier(.22,.75,.2,1);
}
.mark.is-on::after{transform:scaleX(1)}
.band .mark::after,.process .mark::after{background:var(--cream)}


/* ================= why us rail, second pass: one active step, diamond nodes ================= */
.why-rail{width:2px;left:19px;background:rgba(30,22,80,.14)}
.why-rail-fill{
  height:0;background:linear-gradient(180deg,#FFD277,var(--gold));
  box-shadow:0 0 16px rgba(248,160,0,.75);transition:height .22s ease-out;
}
.why{opacity:1;transform:none;border:1px solid var(--line);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.why::before{
  content:"";position:absolute;left:-38px;top:26px;width:12px;height:12px;border-radius:2px;
  background:#F3F0FA;border:2px solid #D2CBE8;transform:rotate(45deg);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.why.is-done::before{background:var(--gold);border-color:var(--gold)}
.why.is-active::before{
  background:var(--gold);border-color:var(--gold);transform:rotate(45deg) scale(1.2);
  box-shadow:0 0 0 6px rgba(248,160,0,.16),0 0 20px rgba(248,160,0,.9);
}
.why.is-active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 16px 36px rgba(248,160,0,.18);transform:translateY(-2px)}
.why.is-active .why-n{background:var(--gold);color:var(--navy-deep)}
@media (max-width:620px){
  .why-rail{left:9px}
  .why::before{left:-29px;top:24px;width:11px;height:11px}
}
/* the node's 2px border sat outside its 12px box, pushing every diamond 3px right of the line */
.why::before{box-sizing:border-box;width:14px;height:14px;left:-40px;top:25px}
@media (max-width:620px){.why::before{width:12px;height:12px;left:-31px;top:24px}}
/* the fill is set every frame from the scroll position, so no easing on top of it */
.why-rail-fill{transition:none}

/* her badge sits behind the checklist section, faint enough to stay out of the way */
.checks-sec{position:relative;isolation:isolate;overflow:hidden}
.checks-sec::before{
  content:"";position:absolute;z-index:-1;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(520px,72vw);aspect-ratio:1;opacity:.07;pointer-events:none;
  background:url("/assets/img/logo.webp") center/contain no-repeat;
}
@media (max-width:620px){.checks-sec::before{width:76vw;opacity:.06}}
/* softer: at 7% the badge competed with the copy */
.checks-sec::before{opacity:.045}
@media (max-width:620px){.checks-sec::before{opacity:.04}}
/* a touch slower, so the stroke reads as a stroke */
.mark::after{transition:transform .9s cubic-bezier(.2,.75,.25,1)}


/* ================= hand drawn underline, swept in from the left ================= */
.mark::after{
  left:-.07em;right:-.07em;bottom:-.1em;height:.4em;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2.4%209.1C22%206.4%2044.6%205.1%2069%204.6c24.4-.5%2048.9-.1%2073.2%201%2018%20.8%2035.4%202%2052.3%203.6-17.2-.9-34.6-1.4-52.1-1.6-24.3-.3-48.6.2-72.7%201.5-22.4%201.2-44.8%203-67%205.4-1.6.2-2.6-.5-2.6-1.7%200-1.6%201.1-2.9%202.3-3.7z%22%20fill%3D%22%23F8A000%22%2F%3E%3Cpath%20d%3D%22M14%2012.4c26-2.5%2052.4-4%2078.9-4.6%2026.4-.6%2052.9-.2%2079.2%201.2-26.3-.6-52.7-.5-78.9.4-26.2.9-52.3%202.7-78.2%205.3%22%20fill%3D%22none%22%20stroke%3D%22%23F8A000%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat;
  opacity:1;transform:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .85s cubic-bezier(.24,.72,.26,1);
}
.mark.is-on::after{clip-path:inset(0 0 0 0)}
.band .mark::after,.process .mark::after{
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2.4%209.1C22%206.4%2044.6%205.1%2069%204.6c24.4-.5%2048.9-.1%2073.2%201%2018%20.8%2035.4%202%2052.3%203.6-17.2-.9-34.6-1.4-52.1-1.6-24.3-.3-48.6.2-72.7%201.5-22.4%201.2-44.8%203-67%205.4-1.6.2-2.6-.5-2.6-1.7%200-1.6%201.1-2.9%202.3-3.7z%22%20fill%3D%22%23FFC24D%22%2F%3E%3Cpath%20d%3D%22M14%2012.4c26-2.5%2052.4-4%2078.9-4.6%2026.4-.6%2052.9-.2%2079.2%201.2-26.3-.6-52.7-.5-78.9.4-26.2.9-52.3%202.7-78.2%205.3%22%20fill%3D%22none%22%20stroke%3D%22%23FFC24D%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat;
}

/* ================= the two "bland" sections get some life =================
   Yasmin flagged the Board & Train checklist and the puppy "stage most owners
   miss" block as flat. Both are walls of text, so the motion carries the
   meaning rather than decorating it: the checklist ticks itself off one item
   at a time, and the puppy lines arrive in the order you would say them.
   Everything below is additive, so nothing moves until the JS adds .lively. */

.lively .checks li{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.75,.2,1);
}
.lively .checks li svg path{
  stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .45s cubic-bezier(.3,.9,.3,1) .12s;
}
.lively .checks li svg circle{
  transform:scale(.6);transform-origin:50% 50%;
  transition:transform .4s cubic-bezier(.2,1.5,.4,1);
}
.lively .checks li.is-in{opacity:1;transform:none}
.lively .checks li.is-in svg path{stroke-dashoffset:0}
.lively .checks li.is-in svg circle{transform:scale(1)}

/* the puppy block: each line lands, then the closing line gets its own beat */
.lively .stack-step{
  opacity:0;transform:translateY(8px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.75,.2,1);
}
.lively .stack-step.is-in{opacity:1;transform:none}

/* her badge behind the checklist drifts, so the empty middle is never static */
.checks-sec::before{animation:badge-drift 26s ease-in-out infinite}
@keyframes badge-drift{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:.07}
  50%    {transform:translate(-50%,-53%) scale(1.06) rotate(3deg);opacity:.1}
}

/* a slow sweep of light across the section, left to right, once a minute */
.checks-sec .wrap::after,.stage-sec .wrap::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(248,160,0,.10) 50%,transparent 58%);
  transform:translateX(-120%);animation:sheen 19s ease-in-out infinite;
}
.checks-sec .wrap,.stage-sec .wrap{position:relative}
.stage-sec{position:relative;isolation:isolate;overflow:hidden}
@keyframes sheen{
  0%,72%{transform:translateX(-120%)}
  88%,100%{transform:translateX(120%)}
}

@media (prefers-reduced-motion:reduce){
  .lively .checks li,.lively .stack-step{opacity:1;transform:none;transition:none}
  .lively .checks li svg path{stroke-dashoffset:0;transition:none}
  .lively .checks li svg circle{transform:none;transition:none}
  .checks-sec::before{animation:none}
  .checks-sec .wrap::after,.stage-sec .wrap::after{animation:none;display:none}
}

/* ================= the bland section, second pass =================
   Devin, 2026-10-05: bring the badge up, make the list and its check marks
   bigger. Scoped to .checks-sec .checks-c, which is this one section and
   exists on all four landing pages, so the other checklists are untouched. */

/* her badge was at 7%, faint enough to read as a smudge */
.checks-sec::before{opacity:.12;width:min(620px,78vw)}
@keyframes badge-drift{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:.12}
  50%    {transform:translate(-50%,-53%) scale(1.06) rotate(3deg);opacity:.17}
}

/* the list carries the section, so it gets the size to match */
.checks-sec .checks-c{max-width:900px;gap:18px 34px}
.checks-sec .checks-c li{font-size:19px;gap:14px;align-items:center}
.checks-sec .checks-c li span{font-weight:700}
.checks-sec .checks-c svg{width:28px;height:28px;margin-top:0}

/* the tick lands with a little weight behind it */
.lively .checks-c li svg circle{opacity:.2}
.lively .checks-c li.is-in svg circle{
  animation:tick-pop .5s cubic-bezier(.2,1.6,.35,1) both;
}
@keyframes tick-pop{
  0%  {transform:scale(.5)}
  60% {transform:scale(1.14)}
  100%{transform:scale(1)}
}
.lively .checks-c li svg path{stroke-dasharray:24;stroke-dashoffset:24}
.lively .checks-c li.is-in svg path{
  stroke-dashoffset:0;transition:stroke-dashoffset .42s cubic-bezier(.3,.9,.3,1) .1s;
}

@media (max-width:620px){
  .checks-sec .checks-c li{font-size:17.5px}
  .checks-sec .checks-c svg{width:25px;height:25px}
}
@media (prefers-reduced-motion:reduce){
  .checks-sec::before{opacity:.12;animation:none}
  .lively .checks-c li.is-in svg circle{animation:none;transform:none}
  .lively .checks-c li svg path,.lively .checks-c li.is-in svg path{
    stroke-dashoffset:0;transition:none;
  }
}

/* the badge is strong enough now to fight the paragraph sitting on top of it,
   so it fades out through the middle where the copy runs and keeps its weight
   around the edges */
.checks-sec::before{
  -webkit-mask-image:radial-gradient(ellipse 58% 42% at 50% 46%,transparent 18%,#000 72%);
  mask-image:radial-gradient(ellipse 58% 42% at 50% 46%,transparent 18%,#000 72%);
}

/* ================= the review picker, asking to be used =================
   Devin, 2026-10-05: people were scrolling past the filter. Until it is
   touched the picker pulses, its chevron bobs and a cue points at it; the
   moment anyone uses it all of that stops for the rest of the session.
   The payoff is louder too: the recommendation becomes a card, and the
   program it names stays lit instead of flashing for two seconds. */

.revpick{position:relative}
/* the cue used to be its own gold pill reading "Pick what your dog does", which
   sat directly under "What is your dog doing?" and said the same thing twice.
   Now the label we already have grows a bobbing arrow while the nudge is on. */
.revpick.is-nudge .revpick-lab::after{
  content:"\2193";display:inline-block;margin-left:9px;
  animation:cue-bob 1.6s ease-in-out infinite;
}
@keyframes cue-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(5px)}
}

.revpick.is-nudge .revpick-sel{
  animation:pick-ring 2.3s ease-in-out infinite,pick-chevron 1.6s ease-in-out infinite;
}
@keyframes pick-ring{
  0%  {box-shadow:0 10px 26px rgba(30,22,80,.16),0 0 0 0 rgba(248,160,0,.55)}
  70% {box-shadow:0 10px 26px rgba(30,22,80,.16),0 0 0 12px rgba(248,160,0,0)}
  100%{box-shadow:0 10px 26px rgba(30,22,80,.16),0 0 0 0 rgba(248,160,0,0)}
}
@keyframes pick-chevron{
  0%,100%{background-position:right 16px center}
  50%    {background-position:right 16px calc(50% + 3px)}
}
/* once it has been used, the picker reads as answered rather than waiting */
.revpick.is-used .revpick-sel{border-color:var(--green)}

/* the recommendation stops being a sentence and becomes the next step */
.revpick-rec{
  max-width:520px;margin:16px auto 0;padding:14px 18px;border-radius:14px;
  background:#fff;border:2px solid var(--gold);
  box-shadow:0 14px 30px rgba(248,160,0,.22);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;
  animation:rec-in .45s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes rec-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.revpick-rec a{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--navy);color:#fff;text-decoration:none;font-weight:800;
  padding:9px 16px;border-radius:999px;transition:background .2s ease,transform .2s ease;
}
.revpick-rec a::after{content:"\2192"}
.revpick-rec a:hover{background:var(--green);color:#fff;transform:translateY(-1px)}

/* the program we point at stays lit until they pick something else */
.prog.is-rec{position:relative;box-shadow:0 0 0 3px var(--gold),0 18px 40px rgba(30,22,80,.24)}
.prog.is-rec::after{
  content:"Recommended for you";position:absolute;top:12px;left:12px;z-index:2;
  background:var(--gold);color:var(--navy);font-size:12px;font-weight:800;
  letter-spacing:.03em;padding:6px 12px;border-radius:999px;
  box-shadow:0 8px 18px rgba(20,14,54,.3);
}

@media (prefers-reduced-motion:reduce){
  .revpick.is-nudge .revpick-lab::after{animation:none}
  .revpick.is-nudge .revpick-sel{animation:none;box-shadow:0 0 0 3px rgba(248,160,0,.55)}
  .revpick-rec{animation:none}
}

/* the puppy "stage most owners miss" block, now that it has a photo.
   Her original is portrait, so it sits beside the copy on desktop and above
   it on a phone, rather than pushing the text down a screen. */
.stage-split{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(22px,3.4vw,44px);align-items:center;max-width:1000px;margin:0 auto;
}
.stage-photo{margin:0}
.stage-photo img{
  width:100%;height:auto;border-radius:18px;display:block;
  box-shadow:0 18px 44px rgba(30,22,80,.22);
}
.stage-split .stack{margin-bottom:0;max-width:none}
.stage-close{text-align:left;margin:18px 0 0;max-width:none}
@media (max-width:820px){
  .stage-split{grid-template-columns:1fr;gap:22px}
  .stage-photo img{max-width:420px;margin:0 auto}
  .stage-split .stack{text-align:center}
  .stage-close{text-align:center}
}


/* ================= the underline, drawn per line =================
   It was an absolutely positioned ::after on an inline span, so a phrase that
   wrapped got one box spanning the first fragment only: "Ready to Make a
   Change?" rendered as a stub hanging under the question mark. A background on
   the span itself paints on every line fragment instead, and box-decoration-break
   clone gives each of those fragments its own full-width stroke. */
.mark::after{content:none}
.mark{
  position:relative;display:inline;color:inherit;
  padding-bottom:.16em;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2.4%209.1C22%206.4%2044.6%205.1%2069%204.6c24.4-.5%2048.9-.1%2073.2%201%2018%20.8%2035.4%202%2052.3%203.6-17.2-.9-34.6-1.4-52.1-1.6-24.3-.3-48.6.2-72.7%201.5-22.4%201.2-44.8%203-67%205.4-1.6.2-2.6-.5-2.6-1.7%200-1.6%201.1-2.9%202.3-3.7z%22%20fill%3D%22%23F8A000%22%2F%3E%3Cpath%20d%3D%22M14%2012.4c26-2.5%2052.4-4%2078.9-4.6%2026.4-.6%2052.9-.2%2079.2%201.2-26.3-.6-52.7-.5-78.9.4-26.2.9-52.3%202.7-78.2%205.3%22%20fill%3D%22none%22%20stroke%3D%22%23F8A000%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% .4em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .85s cubic-bezier(.24,.72,.26,1);
}
.mark.is-on{background-size:100% .4em}
.band .mark,.process .mark{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2.4%209.1C22%206.4%2044.6%205.1%2069%204.6c24.4-.5%2048.9-.1%2073.2%201%2018%20.8%2035.4%202%2052.3%203.6-17.2-.9-34.6-1.4-52.1-1.6-24.3-.3-48.6.2-72.7%201.5-22.4%201.2-44.8%203-67%205.4-1.6.2-2.6-.5-2.6-1.7%200-1.6%201.1-2.9%202.3-3.7z%22%20fill%3D%22%23FFC24D%22%2F%3E%3Cpath%20d%3D%22M14%2012.4c26-2.5%2052.4-4%2078.9-4.6%2026.4-.6%2052.9-.2%2079.2%201.2-26.3-.6-52.7-.5-78.9.4-26.2.9-52.3%202.7-78.2%205.3%22%20fill%3D%22none%22%20stroke%3D%22%23FFC24D%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E")}

@media (prefers-reduced-motion:reduce){
  .mark{transition:none}
  .mark.is-on{background-size:100% .4em}
}

/* the picker label goes gold, indigo text as the gold token requires */
.revpick-lab{
  background:var(--gold);color:var(--navy);
  box-shadow:0 12px 26px rgba(248,160,0,.34);
}