/* ---------- Fonts (self-hosted Montserrat) ---------- */
@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:900;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-900-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --lime:#ccff00;
  --black:#000;
  --dark:#0c1014;
  --ink:#151316;
  --white:#fff;
  --gray:#444;
  --faq-bg:#cbd5df;
  --faq-item:#f5f5f5;
  --radius:5px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--lime);
  color:#000;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-align:center;
  overflow-x:hidden;
}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:1170px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:1120px}

/* ---------- Photo slots (blank box until a photo is added) ---------- */
.slot{
  background-color:var(--white);
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:var(--radius);
  width:100%;
}
.slot.white{background-color:var(--white)}
.slot.dark{background-color:var(--dark)}
.slot.black{background-color:var(--black)}
.slot.ink{background-color:var(--ink)}

/* ---------- Typography ---------- */
h1{
  font-weight:900;
  font-size:46px;
  line-height:61px;
  letter-spacing:0;
  text-transform:uppercase;
}
.hero-sub{font-size:20px;line-height:29px;font-weight:400}
.h2{
  font-weight:800;
  font-size:28px;
  line-height:36px;
  text-transform:uppercase;
}
.h2-heavy{font-weight:900}
.h2-gray{color:var(--gray);font-weight:700}
.tagline{font-size:15px;line-height:24px;color:#333;font-weight:400}

/* per-heading sizes (matched to reference) */
.sec-ba1 .h2{font-size:32px;line-height:40px}
.sec-how .h2{font-size:46px;line-height:60px}
.sec-ba2 .h2{font-size:38px;line-height:50px}
.sec-leads .h2{font-size:46px;line-height:60px}
.sec-packages .h2,.faq .h2{font-size:32px;line-height:40px}
.resources .h2{font-size:28px;line-height:36px}

/* ---------- Button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gray);
  color:#fff;
  font-weight:700;
  font-size:20px;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  width:191px;height:54px;
  border-radius:0;
  transition:background .15s ease;
}
.btn:hover{background:#2b2b2b}
.btn:focus-visible,.res:focus-visible{outline:3px solid #000;outline-offset:3px}

/* ---------- Hero ---------- */
.hero{padding:44px 20px 0}
.hero-sub{margin-top:12px}
.hero .btn{margin-top:51px}

/* ---------- Sections ---------- */
.sec{padding:0 0}
.sec-ba1{margin-top:47px}
.sec-ba1 .tagline{margin-top:0}
.sec-ba1 .grid{margin-top:59px}

/* grid rows */
.grid .row{display:grid;gap:30px;margin:0 auto}
.row.two{grid-template-columns:1fr 1fr}
.row.one{grid-template-columns:1fr;max-width:450px}
.row.uneven{grid-template-columns:473fr 625fr}
.row.two .slot,.row.uneven .slot{aspect-ratio:549/139}
.row.one .slot{aspect-ratio:450/155}
.row.uneven .slot.short{aspect-ratio:auto;height:120px}

.grid-ba1 .row + .row{margin-top:65px}

.btn-after-grid{margin-top:68px}

/* ---------- How we work ---------- */
.sec-how{margin-top:88px}
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  align-items:center;
  margin-top:52px;
  max-width:1180px;
  padding:0;
}
.step{display:flex;flex-direction:column;align-items:center;padding:0 14px}
.step h3{font-weight:700;font-size:23px;line-height:32px;text-transform:uppercase;margin-bottom:9px}
.step .slot{width:218px}
.step .s1{height:139px}
.step .s2{height:279px}
.step .s3{height:130px}
.step .s4{height:81px}
.step p{font-size:15px;line-height:21px;margin-top:12px;max-width:270px;color:#000}
.step:nth-child(1) p{max-width:280px}
.step:nth-child(2) p{max-width:262px}
.step:nth-child(3) p{max-width:290px}
.step:nth-child(4) p{max-width:270px}
.btn-after-steps{margin-top:45px}
/* reference has the 4 steps sitting slightly left of centre */
@media (min-width:1300px){.steps{position:relative;left:-40px}}

/* ---------- More before & after ---------- */
.sec-ba2{margin-top:116px}
.sec-ba2 .grid{margin-top:70px}
.grid-ba2 .row + .row{margin-top:55px}
.btn-after-ba2{margin-top:88px}

/* ---------- Client lead results ---------- */
.sec-leads{margin-top:80px}
.leads{margin-top:51px;display:flex;flex-direction:column;gap:22px;max-width:1160px}
.lead.l1{height:155px}
.lead.l2{height:119px}
.lead.l3{height:146px}
.btn-after-leads{margin-top:46px}

/* ---------- Packages ---------- */
.sec-packages{margin-top:85px;padding:0 20px}
.packages{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1161px;margin:40px auto 0;
  border:1px solid #111;
  height:365px;
}
.pkg{
  border-left:1px solid #111;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:27px;
}
.pkg:first-child{border-left:0}

/* ---------- FAQ ---------- */
.faq{
  margin-top:56px;
  background:var(--faq-bg);
  padding:27px 20px 0;
  height:362px;
}
.faq-list{max-width:1148px;margin:23px auto 0;display:flex;flex-direction:column;gap:12px}
.faq-list li{
  background:var(--faq-item);
  border-radius:8px;
  font-weight:700;
  font-size:16px;
  line-height:47px;
  height:47px;
  padding:0 16px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ---------- Resources ---------- */
.resources{padding:36px 0 51px}

.res-row{display:grid;grid-template-columns:repeat(3,1fr);gap:27px;max-width:1170px;margin-top:21px}
.res{
  display:block;height:54px;
  background-color:var(--white);
  background-image:var(--img);
  background-size:cover;background-position:center;
  border-radius:var(--radius);
}

/* ---------- Tablet / Mobile ---------- */
@media (max-width:900px){
  h1{font-size:30px;line-height:1.35}
  .h2{font-size:22px;line-height:1.3}
  .sec-ba1 .h2,.sec-how .h2,.sec-ba2 .h2,.sec-leads .h2,.sec-packages .h2,.faq .h2{font-size:28px;line-height:1.3}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px;left:0!important}
  .step:nth-child(n) p{max-width:260px}
  .res-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero{padding-top:36px}
  h1{font-size:24px}
  h1 br{display:none}
  .hero-sub{font-size:16px;line-height:1.5}
  .row.two,.row.uneven{grid-template-columns:1fr;gap:18px}
  .row.two .slot,.row.uneven .slot{aspect-ratio:549/139}
  .row.uneven .slot.short{height:auto;aspect-ratio:549/139}
  .grid-ba1 .row + .row,.grid-ba2 .row + .row,.grid-ba1 .row.uneven{margin-top:18px}
  .sec-ba1 .h2,.sec-how .h2,.sec-ba2 .h2,.sec-leads .h2,.sec-packages .h2,.faq .h2{font-size:24px}
  .steps{grid-template-columns:1fr}
  .sec-how,.sec-ba2,.sec-leads,.sec-packages{margin-top:72px}
  .packages{grid-template-columns:1fr;height:auto}
  .pkg{border-left:0;border-top:1px solid #111;min-height:200px}
  .pkg:first-child{border-top:0}
  .faq{height:auto;padding-bottom:36px}
  .faq-list li{white-space:normal;height:auto;line-height:1.5;padding:12px 16px}
  .lead.l1,.lead.l2,.lead.l3{height:auto;aspect-ratio:1120/130}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}