/* Modern marketer hero adapted from the supplied reference. */
body{background:#fff}
main{background:var(--paper)}
.site-header{max-width:1600px;margin-inline:auto;z-index:10;background:#fff}
.modern-hero{position:relative;isolation:isolate;overflow:hidden;padding:68px 24px 90px;background:#fff}
.hero-backdrop{position:absolute;z-index:-1;pointer-events:none;inset:0 0 auto;height:750px;background:url('assets/hero-ribbons-blue.jpg') center top / max(1440px,100vw) auto no-repeat;opacity:.24;mask-image:linear-gradient(#000 0%,#000 58%,transparent 100%)}
.modern-intro{text-align:center;max-width:1000px;margin-inline:auto}
.modern-eyebrow{display:inline-flex;gap:12px;align-items:center;padding:8px 14px;background:#f8f9fa;border:1px solid #e9ebed;border-radius:8px;font-size:11px;font-weight:500;line-height:1.3;color:#4e535a;letter-spacing:.05px}
.modern-eyebrow i{display:block;width:4px;height:4px;border-radius:50%;background:#f2502c}
.modern-eyebrow i:last-of-type{background:#d99a3e}
.modern-intro h1{font-size:clamp(60px,6.15vw,94px);font-weight:600;line-height:1.02;letter-spacing:-.065em;margin:24px auto 24px;color:#141821}
.modern-description{max-width:655px;margin-inline:auto;font-size:18px;line-height:1.5;color:#6b7077;letter-spacing:-.3px;text-wrap:pretty}
.modern-start{margin-top:29px;min-height:52px;gap:26px;min-width:177px;justify-content:center}
.modern-principles{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:26px;font-size:11px;line-height:1.4;color:#5d646d}
.modern-principles a{display:flex;gap:7px;align-items:center;white-space:nowrap}
.modern-principles svg{width:14px;height:14px;fill:none;stroke:#4e5c6a;stroke-width:1.4}
.modern-showcase{width:100%;max-width:1046px;padding:19px 25px 18px 24px;margin:55px auto 0;display:grid;grid-template-columns:319fr 668fr;gap:10px;aspect-ratio:1046/688;background:#f4f3f0;border-radius:28px;box-shadow:0 16px 35px -16px #232b3830,0 2px 8px #1c263608;position:relative}
.showcase-tiles{display:flex;flex-direction:column;gap:7px;min-width:0}
.showcase-skills,.showcase-tools{display:flex;flex-direction:column;justify-content:space-between;text-transform:uppercase;font-size:15px;line-height:1.4;font-weight:400;padding:30px 27px 24px;color:#111210;transition:background .25s}
.showcase-skills{flex:319;background:#ff5c3a;border-radius:35px 0 80px 0}
.showcase-skills svg{width:30px;height:30px;stroke-width:1.7;transform:rotate(45deg)}
.showcase-skills:hover{background:#f64e2c}
.showcase-skills:hover svg{transform:translate(4px,4px) rotate(45deg)}
.showcase-tools{flex:325;background:#e2dfdb;border-radius:34px 34px 34px 0;padding-top:21px;padding-bottom:19px}
.showcase-tools:hover{background:#d9d4ce}
.showcase-meta{display:flex;justify-content:space-between;font-size:13px}
.showcase-photo{position:relative;overflow:hidden;min-width:0;border-radius:100px 100px 80px 80px;aspect-ratio:668/651}
.showcase-photo img{position:absolute;width:156.58682635%;height:105.68356375%;max-width:none;left:-52.84431138%;top:-2.91858679%;display:block}
@media(max-width:1100px){.modern-hero{padding-top:55px}.hero-backdrop{background-size:1400px auto;height:670px}.modern-intro h1{font-size:72px}.modern-showcase{max-width:900px;padding:16px 21px 15px 20px;gap:9px}.showcase-skills,.showcase-tools{padding:25px 23px 21px;font-size:13px}.showcase-meta{font-size:11px}.showcase-skills{border-radius:30px 0 66px 0}.showcase-tools{border-radius:28px 28px 28px 0}.showcase-photo{border-radius:84px 84px 67px 67px}}
@media(max-width:900px){.modern-hero{padding:46px 22px 65px}.modern-intro h1{font-size:62px;letter-spacing:-.06em}.modern-description{max-width:570px;font-size:16px}.hero-backdrop{height:600px;opacity:.2;background-size:1200px auto}.modern-principles{gap:23px;font-size:10px}.modern-showcase{margin-top:48px;padding:14px 18px;gap:8px}.showcase-skills,.showcase-tools{font-size:12px;padding:23px 20px 18px}.showcase-skills{border-radius:26px 0 58px 0}.showcase-tools{border-radius:25px 25px 25px 0}.showcase-photo{border-radius:72px 72px 60px 60px}.showcase-meta{font-size:10px}}
@media(max-width:600px){.modern-hero{padding:38px 14px 52px}.modern-eyebrow{font-size:9px;padding:7px 10px;gap:9px}.modern-intro h1{font-size:clamp(37px,8.9vw,54px);line-height:1.06;letter-spacing:-.06em;margin:23px 0 21px}.modern-description{max-width:410px;width:90%;font-size:14px;line-height:1.6;letter-spacing:-.2px}.modern-start{margin-top:25px;min-height:47px;min-width:157px;font-size:12px}.modern-principles{gap:17px;margin-top:23px;font-size:8px;line-height:1.4}.modern-principles a{gap:4px}.modern-principles svg{width:11px;height:11px}.hero-backdrop{background-size:850px auto;height:490px;opacity:.14;left:-80px;right:-80px}.modern-showcase{margin-top:38px;padding:10px 10px 10px 9px;gap:6px;border-radius:17px;box-shadow:0 12px 25px -14px #232b3838;grid-template-columns:34fr 66fr;aspect-ratio:auto}.showcase-skills,.showcase-tools{padding:14px 12px 12px;font-size:clamp(8px,2.4vw,12px);line-height:1.4}.showcase-skills{border-radius:19px 0 32px 0}.showcase-skills svg{width:20px;height:20px;stroke-width:1.7}.showcase-tiles{gap:5px}.showcase-tools{border-radius:18px 18px 18px 0;padding-top:12px}.showcase-meta{font-size:8px}.showcase-photo{border-radius:40px 40px 35px 35px;aspect-ratio:668/730}.showcase-photo img{height:105.68356375%;width:auto;aspect-ratio:1046/688;left:-69%;top:-2.91858679%}}
@media(max-width:360px){.modern-hero{padding-inline:11px}.modern-principles{gap:11px}.showcase-skills,.showcase-tools{padding-inline:10px}.modern-description{font-size:13px}}

.modern-headline-line{display:block;white-space:nowrap}
@media(max-width:600px){.modern-intro h1{font-size:clamp(28px,8.8vw,52px)}}

/* Keep the complete desktop hero within the first viewport. */
@media(min-width:901px){
  .site-header{height:80px;padding-block:14px}
  .modern-hero{padding:18px 24px 28px}
  .hero-backdrop{height:100%;background-size:max(1440px,100vw) auto;opacity:.2}
  .modern-intro{max-width:1100px}
  .modern-eyebrow{padding:6px 12px;font-size:10px}
  .modern-intro h1{font-size:clamp(48px,6.6svh,68px);line-height:1.08;margin:14px auto 16px;letter-spacing:-.06em}
  .modern-headline-line{display:inline}
  .modern-description{max-width:760px;font-size:16px;line-height:1.5}
  .modern-start{margin-top:18px;min-height:46px;min-width:164px;font-size:13px}
  .modern-principles{margin-top:16px;gap:26px;font-size:10px;line-height:1.4}
  .modern-showcase{--showcase-width:min(880px,calc((100svh - 410px) * 1.52035));width:var(--showcase-width);max-width:100%;margin-top:24px;padding:calc(var(--showcase-width) * .01816) calc(var(--showcase-width) * .0239) calc(var(--showcase-width) * .0172) calc(var(--showcase-width) * .02294);gap:calc(var(--showcase-width) * .00956);border-radius:22px;container-type:inline-size}
  .showcase-tiles{gap:1.07%}
  .showcase-photo{border-radius:14.97% 14.97% 11.98% 11.98%}
  .showcase-skills,.showcase-tools{font-size:clamp(11px,1.435cqw,13px);line-height:1.4;padding:9.4% 8.46% 7.52%}
  .showcase-skills{border-radius:10.97% 0 25.08% 0}
  .showcase-skills svg{width:2.87cqw;height:2.87cqw}
  .showcase-tools{border-radius:10.66% 10.66% 10.66% 0;padding-top:6.58%;padding-bottom:5.96%}
  .showcase-meta{font-size:clamp(8px,1.243cqw,11px)}
}
@media(min-width:901px) and (max-height:740px){
  .modern-hero{padding-top:10px;padding-bottom:20px}
  .modern-intro h1{font-size:46px;margin:10px auto 12px}
  .modern-description{font-size:15px;max-width:760px}
  .modern-start{margin-top:14px;min-height:44px}
  .modern-principles{margin-top:12px}
  .modern-showcase{--showcase-width:clamp(320px,calc((100svh - 365px) * 1.52035),760px);margin-top:20px}
}

/* Quiet, keyboard-accessible links to the related service details. */
.modern-eyebrow a,.modern-principles a{position:relative;text-decoration:underline;text-decoration-color:#b8bdc2;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.modern-eyebrow a::after,.modern-principles a::after{content:"";position:absolute;inset:-5px -3px}
.modern-eyebrow a:hover,.modern-principles a:hover{color:var(--blue);text-decoration-color:currentColor}

@media(max-width:600px){
  .modern-eyebrow a{display:inline-flex;align-items:center;min-height:32px}
  .modern-principles{flex-wrap:wrap;column-gap:12px;row-gap:0;font-size:10px}
  .modern-principles a{min-height:40px}
  .showcase-skills,.showcase-tools{font-size:clamp(10px,2.8vw,12px)}
}

/* Give the standalone toolkit banner breathing room below the hero. */
.modern-hero{padding-bottom:clamp(80px,6vw,100px)}

/* Keep the hero, toolkit banner, and services on white before the approach turns paper. */
.toolkit-transition{display:flow-root;background:#fff;padding-bottom:11px}
.toolkit-transition>.cta-band{margin-bottom:0}
.service-overview{background:#fff}
@media(min-width:901px){.service-overview{padding-bottom:69px;margin-bottom:-36px}}
@media(max-width:900px){.toolkit-transition{padding-bottom:25px}}

/* Let the benefits row read as a separate white band. */
.benefits{background:#fff}