/* Home page (2026-11-03): hero with a real client site and ONE main button (the free competitor check), the price strip, colour bands, and the motion that walks the eye down it.
   Order of attention: headline, the free check and what is in it, the picture, the four ways in, then proof. Motion is off under reduced motion. */
:root{--ink-soft:#3f444d;--paper-3:#fafbfc;--wash-blue:color-mix(in srgb,var(--blue) 16%,var(--paper));--wash-teal:color-mix(in srgb,var(--teal) 14%,var(--paper));--ease:cubic-bezier(.2,.7,.2,1)}

/* full-bleed colour band behind a section that sits in the 1440px column */
.hero-b,.strip,.services,.audit-w{position:relative;isolation:isolate}
.hero-b::before,.strip::before,.services::before,.audit-w::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.hero-b,.strip{--band:var(--wash-blue)}
.services{--band:var(--paper-2)}
.audit-w{--band:var(--wash-teal)}

/* hero */
.hero-b{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4.4vw,64px);align-items:center;padding-block:clamp(36px,5vw,72px) clamp(36px,4.4vw,64px)}
@media(min-width:1000px){.hero-b{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
.hero-b h1{max-width:none;margin:0;font:700 clamp(34px,4.1vw,60px)/1.04 var(--display);letter-spacing:-.045em;text-wrap:balance}
.hero-b h1 .pt{color:var(--mark)}
.hero-b .rp-hero-copy{min-width:0}
.hero-lede{margin:20px 0 0;max-width:34em;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--ink-soft)}
.sweep{background:linear-gradient(var(--orange),var(--orange)) 0 90%/100% .3em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* the main call to action: one big button, what is in it, how long it takes */
.hero-check{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:start;margin-top:28px;padding:clamp(18px,2.2vw,26px);background:#fff;border:1.5px solid var(--ink);box-shadow:5px 6px 0 var(--orange)}
.hero-check-k{margin:0;font:700 12px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.hero-b .hero-cta{margin:0;width:100%;justify-content:center;flex-wrap:nowrap;gap:12px;padding-inline:16px;font-size:clamp(16px,1.5vw,18px);min-height:58px}
.hero-cta span{min-width:0;text-wrap:balance}
.hero-cta svg{width:18px;height:18px;flex:0 0 auto}
.hero-check-in{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.hero-check-in li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font:500 15.5px/1.4 var(--body)}
.hero-check-in svg{width:18px;height:18px;margin-top:2px;color:var(--ink);background:var(--teal);border-radius:50%;padding:3px}
.hero-check-n{margin:0;font:500 14px/1.45 var(--body);color:var(--ink-soft)}
.hero-check-n a,.hero-or a{color:var(--ink);font-weight:700}
.hero-or{margin:18px 0 0;font:500 15px/1.4 var(--body);color:var(--ink-soft)}

.hero-pic{margin:0;min-width:0}
.hero-pic .scene{max-width:100%;margin-bottom:0;padding:clamp(12px,1.8vw,20px) clamp(12px,1.8vw,20px) clamp(22px,2.6vw,32px);background:#fff;border:1.5px solid var(--ink);box-shadow:clamp(6px,.9vw,12px) clamp(6px,.9vw,12px) 0 var(--teal)}
.hero-pic figcaption{margin-top:clamp(18px,2vw,26px);font:500 14px/1.4 var(--body);color:var(--ink-soft)}
.hero-pic figcaption a{color:var(--ink);font-weight:700}

/* price strip, joined to the hero by the same wash */
.strip{padding-block:0 clamp(40px,5vw,72px);margin-bottom:var(--sec)}
.strip ul{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;border:1.5px solid var(--ink);background:var(--paper-3)}
.strip li{--c:var(--blue);box-shadow:inset 0 7px 0 var(--c);transition:box-shadow .35s var(--ease)}
.strip li+li{border-left:1.5px solid var(--ink)}
.strip li.strip-teal{--c:var(--teal)}.strip li.strip-orange{--c:var(--orange)}.strip li.strip-green{--c:var(--green)}
.strip li:hover,.strip li:focus-within{box-shadow:inset 0 220px 0 color-mix(in srgb,var(--c) 26%,#fff)}
.strip a{position:relative;display:grid;gap:5px;align-content:start;min-height:138px;padding:26px 48px 18px 20px;color:var(--ink);text-decoration:none}
.strip-k{font:700 12px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.strip-p{font:800 clamp(1.15rem,1.7vw,1.5rem)/1.15 var(--display)}
.strip-n{font:500 15px/1.35 var(--body);color:var(--ink-soft)}
.strip svg{position:absolute;right:16px;top:26px;width:18px;height:18px;transition:transform .3s var(--ease)}
.strip li:hover svg,.strip li:focus-within svg{transform:translateX(4px)}
@media(max-width:900px){.strip ul{grid-template-columns:1fr 1fr}.strip li:nth-child(3){border-left:0}.strip li:nth-child(n+3){border-top:1.5px solid var(--ink)}}
@media(max-width:480px){.strip ul{grid-template-columns:1fr}.strip li+li{border-left:0;border-top:1.5px solid var(--ink)}.strip a{min-height:0}}

/* bands: spacing moves from margin to padding so the colour covers it */
.services{margin-bottom:0;padding-block:var(--sec)}
.services .grp-h{margin-top:0}
.services+.about{padding-top:var(--sec)}
.audit-w{max-width:none;margin:0 auto;padding-block:var(--sec)}
.audit-w>.aw-card{max-width:calc(840px + 2 * var(--g));margin-inline:auto}

/* the competitor check card further down: the same three things, in the same words */
.chk-in{display:grid;gap:6px;margin:14px 0 0;padding:0;list-style:none;font:500 15px/1.4 var(--body)}
.chk-in li{position:relative;padding-left:22px}
.chk-in li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(-45deg)}

/* motion: the hero builds in order (headline, lede, the check, picture, strip); everything below arrives as it scrolls into view */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes sweep{from{background-size:0% .3em}to{background-size:100% .3em}}
  @keyframes nudge{0%,100%{transform:translateX(0)}40%{transform:translateX(5px)}}
  .hero-b h1{animation:rise .75s var(--ease) .05s both}
  .hero-b .hero-lede{animation:rise .75s var(--ease) .22s both}
  .hero-b .hero-check{animation:rise .75s var(--ease) .36s both}
  .hero-b .hero-or{animation:rise .75s var(--ease) .5s both}
  .hero-pic{animation:rise .95s var(--ease) .25s both}
  .sweep{animation:sweep .9s var(--ease) .8s both}
  .hero-cta svg{animation:nudge 1s ease-in-out 1.7s 2}
  .strip li{animation:rise .7s var(--ease) both}
  .strip li:nth-child(1){animation-delay:.6s}.strip li:nth-child(2){animation-delay:.7s}.strip li:nth-child(3){animation-delay:.8s}.strip li:nth-child(4){animation-delay:.9s}
  .mo-on [data-mo]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .mo-on [data-mo].mo-in{opacity:1;transform:none}
  .work-item .scene{transition:transform .4s var(--ease)}
  .work-item:hover .scene{transform:translateY(-3px)}
}