/* components part 2 of 7 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
@media(max-width:1040px){
  .hero-row{grid-template-columns:minmax(0,1fr);gap:0}
  .hero h1{max-width:none}
  .hero-txt{display:contents}
  /* Phone order is eyebrow, IMAGE, H1. The eyebrow doubles as the breadcrumb/
   category label, so keeping it above the image tells the visitor what page they
   are on before the visual lands — then the render does the selling and the H1
   names it. This is the common pattern on premium service pages, and it costs
   nothing in SEO: the H1 is still the first heading in the DOM. */
  /* Phone: media first, then the breadcrumb, then the H1. The image sells, the
     breadcrumb says where you are, the heading names it. */
  .hero-media{order:1;margin-bottom:14px}
  .hero-txt>.eyebrow{order:2;padding-inline:var(--gut);margin:0 0 10px;display:flex}
  .hero-txt>h1{order:3;padding-inline:var(--gut);margin:2px 0 14px}
  .hero-media img.hero-img,.hero-media video.hero-img{aspect-ratio:16/10;height:auto;min-height:0;border-radius:0}
  .hero-txt>.hero-sub{order:4;padding-inline:var(--gut);margin-bottom:14px}
  .hero-txt>.checks{order:5;padding-inline:var(--gut);margin-bottom:16px;max-width:none}
  .hero-txt>.hero-btns{order:6;padding-inline:var(--gut)}
  .hero-txt>.hero-scarce{order:7;padding-inline:var(--gut);margin:10px 0 26px}}@media(max-width:700px){
  .hero h1{font-size:36px;letter-spacing:-0.035em}
  .hero-media img.hero-img,.hero-media video.hero-img{aspect-ratio:2/1}
  .hero-txt>.eyebrow{margin:12px 0 2px}
  .hero-txt>h1{margin:2px 0 12px}
  .hero-media{margin-bottom:14px}
  .hero-txt>.hero-sub{margin-bottom:12px;font-size:16px;line-height:1.55}
  .checks{gap:8px}
  .checks li{font-size:14.5px;line-height:1.45}
  .hero-txt>.checks{margin-bottom:14px}}@media(max-width:700px){.hero-btns{flex-direction:column;align-items:stretch}.hero-btns .btn{width:100%;justify-content:center}}

/* HERO checks + check-style variants */
.checks{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.checks li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.checks .ci{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s}
.checks .ci svg{width:20px;height:20px;color:var(--ink)}
body.chk-bold .checks .ci{background:transparent;border:0}
body.chk-bold .checks .ci svg{width:20px;height:20px;color:var(--ink)}
body.chk-bold .checks .ci svg path{stroke-width:3.4}
body.chk-fill .checks .ci{background:var(--ink);border:0}
body.chk-fill .checks .ci svg{width:12px;height:12px;color:#fff}
body.chk-fill .checks .ci svg path{stroke-width:3}
body.chk-outline .checks .ci{background:transparent;border:1.5px solid var(--faint)}
body.chk-outline .checks .ci svg{width:11px;height:11px;color:var(--ink)}
body.chk-outline .checks .ci svg path{stroke-width:2.4}
body.chk-grey .checks .ci{background:#c7c5c0;border:0}
body.chk-grey .checks .ci svg{width:12px;height:12px;color:#fff}
body.chk-grey .checks .ci svg path{stroke-width:3}

/* BEFORE/AFTER SLIDER */
.ba{position:relative;width:100%;overflow:hidden;--pos:52%;background:#e8e7e2;user-select:none;aspect-ratio:4/3}
.ba.block{aspect-ratio:16/9;max-height:78vh}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;z-index:3}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 18px rgba(0,0,0,.28);pointer-events:none;z-index:4}
.ba-knob svg{width:20px;height:20px;color:var(--accent)}
.ba-tag{position:absolute;bottom:18px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(20,18,14,.5);backdrop-filter:blur(6px);padding:7px 13px;border-radius:999px;z-index:3;pointer-events:none}
.ba-tag.l{left:18px}.ba-tag.r{right:18px}

/* TRUST BAND — hero-width, no edge outlines, single middle divider */
.trust{background:var(--grey)}
.trust .wrap-wide{padding-block:34px}
.trust-top{display:flex;justify-content:space-between;align-items:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.trust-stats{display:flex;gap:clamp(28px,3.4vw,48px)}
.trust-stats .s .n{font-family:var(--disp);font-size:24px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-0.03em}
.trust-stats .s .l{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.trust-geo{padding-left:0}
.trust-geo.right{text-align:right}
.trust-geo p{font-size:17.5px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;line-height:1.5;margin-bottom:0}
.trust-geo p.b1{font-weight:700}
.trust-geo p.b2{color:var(--muted);font-weight:500;margin-top:4px}
.clients{margin-top:26px;padding-top:26px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,4vw,48px);flex-wrap:wrap}
.client-logos{display:flex;align-items:center;gap:clamp(24px,3.4vw,50px);flex-wrap:wrap}
.logo-cell{height:36px;display:flex;align-items:center;justify-content:center}
.logo-cell img{max-height:36px;width:auto;max-width:158px;object-fit:contain;filter:grayscale(1) brightness(0) opacity(.5);transition:filter .25s}
/* A wordmark 11:1 wide hits max-width long before max-height and ends up 14px
   tall next to a 108px square. Wide marks get the room to reach a readable size. */
/* 200, not 290. At 290 a 11.6:1 wordmark rendered nearly twice the visual width of every
   other mark in the row and read as the client rather than as one of four. Optical size,
   not box size, is what has to match here. */
.logo-cell.wide{height:40px}
.logo-cell.wide img{max-height:40px;max-width:200px}
.logo-cell.sm{height:34px}
.logo-cell.sm img{max-height:34px}
.logo-cell.big{height:78px}
.logo-cell.big img{height:78px;width:78px;max-height:none;max-width:none;object-fit:contain}
.logo-cell.xl{height:108px}
.logo-cell.xl img{height:108px;width:108px;max-height:none;max-width:none;object-fit:contain}
/* No hover on client logos — they are proof, not controls, and the colour flash
   read as an accidental interaction. */
/* rating cluster — now BOTTOM-right of trust band */
.client-rating{display:flex;align-items:center;gap:16px;flex-shrink:0}
/* Repeat business, shown as a proportion. Same job the avatar cluster did — fill the
   right of the row with something dense enough to read as evidence — with the
   difference that this is countable from the client list. */
.client-proof{display:flex;align-items:center;gap:18px;flex-shrink:0}
.cp-dots{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;width:106px;flex:0 0 auto}
.cp-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--hair)}
.cp-dots i.on{background:var(--accent)}
.cp-rc{display:flex;flex-direction:column;line-height:1.15}
.cp-n{font-family:var(--disp);font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-0.03em}
.cp-n span{color:var(--faint)}
.cp-l{font-size:13.5px;color:var(--muted);font-weight:500;margin-top:5px;max-width:22ch}@media(max-width:900px){.client-proof{width:100%}}

.client-rating .hero-avatars{display:flex}
.client-rating .hero-avatars img{width:46px;height:46px;border-radius:50%;border:2px solid var(--grey);margin-left:-12px;object-fit:cover;box-shadow:0 1px 5px rgba(0,0,0,.16)}
.client-rating .hero-avatars .av{width:46px;height:46px;margin-left:-12px;
  --ring:var(--grey);box-shadow:0 1px 5px rgba(0,0,0,.16)}
.client-rating .hero-avatars .av:first-child{margin-left:0}
.client-rating .hero-avatars img:first-child{margin-left:0}
/* slightly different framing per avatar so the row doesn't look cloned */
.client-rating .rc{display:flex;flex-direction:column;line-height:1.15}
.client-rating .stars{font-size:26px;letter-spacing:.04em;background:linear-gradient(180deg,#FFCB3D 0%,#F79009 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#F5A623}
.client-rating .rl{font-size:14.5px;color:var(--muted);font-weight:500;letter-spacing:.005em;margin-top:4px}
.client-rating .rl b{color:var(--ink);font-weight:800;font-family:var(--disp)}
.client-rating .rev-link{color:var(--accent);font-weight:700;border-bottom:1px solid rgba(178,138,87,.4)}
.client-rating .rev-link:hover{border-color:var(--accent)}@media(max-width:900px){
  .trust-top{flex-direction:column;align-items:flex-start;gap:22px}
  .trust-geo.right{text-align:left}
  /* These scroll horizontally; at 100% width their right edge was cut off inside
     .wrap's padding. Bleed the track, put the gutter back as padding. */
  .trust-stats,.client-logos,.client-rating{width:var(--bleed);max-width:none;margin-left:calc(50% - var(--bleed)/2);padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .trust-stats{flex-wrap:nowrap;overflow-x:auto;gap:30px;-webkit-overflow-scrolling:touch}
  .trust-stats .s{flex:0 0 auto}
  .clients{flex-direction:column;align-items:flex-start;gap:22px}
  .client-logos{flex-wrap:nowrap;overflow-x:auto;gap:30px;-webkit-overflow-scrolling:touch}
  .client-logos .logo-cell{flex:0 0 auto}
  .client-rating{flex-wrap:nowrap;overflow-x:auto;gap:14px}
  .client-rating .hero-avatars,.client-rating .rc{flex:0 0 auto}
  .client-rating .rl{white-space:nowrap}}@media(max-width:480px){.client-rating .hero-avatars img{width:40px;height:40px;margin-left:-11px}
.client-rating .hero-avatars .av{width:40px;height:40px;margin-left:-11px}.trust-stats .s .n{font-size:21px}}

/* SECTION scaffolding */
/* Bare `section` is the one generic selector in here that reaches content this
   theme does not own: an Elementor popup renders <section class="elementor-section">
   INSIDE our page, so this rule was adding 128px of padding above and below every
   row of the quote popup — the "huge empty spaces" on the conversion path. */
section:not([class*="elementor"]){padding-block:clamp(62px,7.6vw,100px)}
.bg-white{background:var(--white)}
.bg-grey{background:var(--grey)}
.sec-head{max-width:740px;margin:0 auto clamp(46px,6vw,74px);text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head h2{font-size:clamp(36px,4.7vw,58px);font-weight:800;margin-bottom:18px;letter-spacing:-0.035em;line-height:1.02}
.sec-head p{color:var(--muted);font-size:18px;line-height:1.6}