/*  ────────────────────────────────────────────────────────────────────
    Service single — visuals 1:1 with Figma node 203:3 (services-NEW).
    Iter 3 — Figma SVG icons + Figma SVG dot patterns + correct stat
    pattern + redesigned testimonial cards + intro row no highlight
    + light-mint why-us numbers.
   ──────────────────────────────────────────────────────────────────── */

:root{
  --svc-green:        #016b3a;   /* main green */
  --svc-green-deep:   #014b29;   /* CTA card */
  --svc-green-icon:   #008045;   /* icons */
  --svc-green-soft:   #f5faf7;
  --svc-green-mint:   #98d4b3;   /* faded green for why-us numbers (per Figma) */
  --svc-text:         #0e1510;
  --svc-text-strong:  #050815;
  --svc-muted:        #6b7269;
  --svc-line:         #e5e7e5;
  --svc-card-bg:      #f6f8f7;
  --svc-card-bg-2:    #f5f6f5;
  --svc-warn-bg:      #fff1f1;
  --svc-warn-fg:      #d11a2a;
  --svc-star:         #f5b400;
  --svc-radius:       12px;
  --svc-radius-md:    16px;
  --svc-radius-lg:    24px;
}

.svc-container{max-width:1320px;margin:0 auto;padding:0 32px;}

/* ── shared atoms ──────────────────────────────────────────────────── */
/* Buttons — Figma cornerRadius ~12px (measured from 203:5 hero render), NOT pill. */
.svc-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px;border-radius:12px;
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:500;font-size:15px;line-height:1;
  text-decoration:none;transition:transform .15s ease,opacity .15s ease,background .15s ease;
  white-space:nowrap;border:0;
}
.svc-btn:hover{transform:translateY(-1px);}
.svc-btn--solid{background:var(--svc-green);color:#fff;}
.svc-btn--white{background:#fff;color:var(--svc-green);}
/* Dark "Call now" — translucent overlay sitting on the green gradient (per Figma) */
.svc-btn--dark{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22);}
.svc-btn--dark:hover{background:rgba(255,255,255,.16);}
.svc-btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);}
/* arrow / phone — flat inline glyphs, no circle wrap */
.svc-btn__arr{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;font-weight:600;}
.svc-btn--white .svc-btn__arr{color:var(--svc-green);}
.svc-btn--solid .svc-btn__arr,.svc-btn--dark .svc-btn__arr,.svc-btn--outline .svc-btn__arr{color:#fff;}
.svc-btn__phone{display:inline-flex;align-items:center;justify-content:center;color:currentColor;}
.svc-btn__phone svg{display:block;}

/* ── 1. HERO — 2-col: text-left + truck-photo-right; gradient + scoped dot pattern at top-left ─ */
.svc-hero{position:relative;}
.svc-hero__band{
  position:relative;
  /* GREEN on left ~55%, fading to grey on right (per Figma fill: linear gradient) */
  background:linear-gradient(90deg, #016b3a 0%, #016b3a 55%, #b0bcb3 78%, #d9dcd7 100%);
  color:#fff;
  padding-top:120px;
  padding-bottom:72px;
  overflow:hidden;
  min-height:560px;
}
/* Truck photo — sits on the right ~58% of hero per Figma 203:5158 (x=1185 within 1440-wide hero) */
.svc-hero__truck{
  position:absolute;
  top:0;right:0;height:100%;width:60%;
  object-fit:cover;object-position:left center;
  z-index:1;pointer-events:none;
  /* fade left edge into gradient so the photo feels integrated */
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 8%, #000 18%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 8%, #000 18%);
}
.svc-hero__dots{
  position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;
  z-index:0;
}
/* Top-left cluster ONLY — scoped to upper-left zone (per Figma 203:5160 above eyebrow) */
.svc-hero__dots--tl{
  top:0;left:0;width:560px;height:240px;
  background-position:left top;
  opacity:.85;
}
.svc-hero__inner{position:relative;z-index:2;}
.svc-hero__text{max-width:560px;position:relative;}

.svc-breadcrumb{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:15px;color:rgba(255,255,255,.85);margin-bottom:18px;
}
.svc-breadcrumb a{color:rgba(255,255,255,.85);text-decoration:none;}
.svc-breadcrumb a:hover{color:#fff;}
.svc-breadcrumb__sep{margin:0 10px;opacity:.55;}
.svc-breadcrumb__current{color:#fff;font-weight:500;}

.svc-hero__pill{
  display:inline-block;
  padding:8px 18px;border-radius:999px;
  background:#fff;color:var(--svc-text);
  font-size:13px;font-weight:500;
  margin-bottom:24px;
}
.svc-hero__title{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:600;font-size:58px;line-height:1.04;letter-spacing:-.02em;
  margin:0 0 18px;color:#fff;max-width:520px;
}
.svc-hero__title em,.svc-hero__title i,.svc-hero__title strong{font-style:normal;font-weight:600;color:#cfeadd;}
.svc-hero__sub1{font-size:17px;line-height:1.5;color:rgba(255,255,255,.92);max-width:520px;margin:0 0 8px;white-space:pre-line;}
.svc-hero__sub2{font-size:14px;color:rgba(255,255,255,.72);margin:0 0 28px;}
.svc-hero__ctas{display:flex;flex-wrap:wrap;gap:14px;}

/* KPI strip in lighter band BELOW hero (per Figma) */
.svc-hero__kpis-band{
  background:linear-gradient(180deg, #6fa68a 0%, #4f8a6c 100%);
  padding:28px 0 30px;
}
.svc-hero__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:center;}
.svc-hero__kpi{padding:0 28px;border-left:1px solid rgba(255,255,255,.28);}
.svc-hero__kpi:first-child{border-left:none;padding-left:0;}
.svc-hero__kpi-v{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:34px;line-height:1;color:#fff;}
.svc-hero__kpi-l{font-size:14px;color:rgba(255,255,255,.85);margin-top:6px;}

/* ── 2. INTRO ──────────────────────────────────────────────────────── */
.svc-intro{padding:110px 0;}
.svc-intro__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start;}
.svc-intro__media{border-radius:var(--svc-radius-lg);overflow:hidden;background:#eee;aspect-ratio:1/1;}
.svc-intro__media img{width:100%;height:100%;object-fit:cover;display:block;}
.svc-intro__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;
  font-size:46px;line-height:1.08;letter-spacing:-.01em;margin:0 0 20px;color:var(--svc-text);
}
.svc-intro__title em,.svc-intro__title i,.svc-intro__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-intro__body{font-size:16px;line-height:1.6;color:var(--svc-text-strong);margin:0 0 30px;}
.svc-intro__specs-title{font-size:16px;font-weight:600;color:var(--svc-text);margin:0 0 6px;line-height:1.4;}

/* Spec rows: every row identical — plain bg, 1px divider. NO highlighted row. */
.svc-intro__specs{display:flex;flex-direction:column;}
.svc-spec-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--svc-line);
  background:transparent;
}
.svc-spec-row:last-child{border-bottom:none;}
.svc-spec-row__l{font-size:14px;color:var(--svc-muted);font-weight:400;}
.svc-spec-row__v{font-size:14px;color:var(--svc-text);font-weight:500;}

/* ── 3. FREIGHT TYPES ─────────────────────────────────────────────── */
.svc-types{padding:50px 0 110px;}
.svc-types__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:50px;}
.svc-types__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:54px;line-height:1.05;
  margin:0;color:var(--svc-text);max-width:620px;letter-spacing:-.01em;
}
.svc-types__title em,.svc-types__title i,.svc-types__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-types__sub{font-size:15px;color:var(--svc-muted);margin:0;text-align:right;max-width:340px;line-height:1.5;}
.svc-types__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.svc-type-card{
  background:#fff;border:1px solid var(--svc-line);border-radius:var(--svc-radius);
  padding:26px 28px 30px;
}
.svc-type-card__icon{width:42px;height:42px;margin-bottom:32px;display:flex;align-items:center;justify-content:flex-start;}
.svc-type-card__icon img{width:42px;height:42px;object-fit:contain;display:block;}
.svc-type-card__title{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:22px;line-height:1.25;margin:0 0 10px;color:var(--svc-text);}
.svc-type-card__desc{font-size:14px;line-height:1.55;color:var(--svc-muted);margin:0;}

/* ── 4. PROCESS — green band, Figma dot pattern SVGs at corners ────── */
.svc-process{
  position:relative;background:var(--svc-green);color:#fff;padding:90px 0 100px;overflow:hidden;
}
.svc-process__pat{
  position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;
  width:340px;height:280px;
}
.svc-process__pat--tl{top:-20px;left:-20px;background-position:left top;}
.svc-process__pat--tr{top:-20px;right:-20px;background-position:right top;transform:scaleX(-1);}
.svc-process__pat--bl{bottom:-20px;left:-20px;background-position:left bottom;}
.svc-process > *{position:relative;z-index:1;}
.svc-process__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:54px;line-height:1.05;
  text-align:center;color:#fff;margin:0 auto 14px;max-width:900px;letter-spacing:-.01em;
}
.svc-process__sub{text-align:center;color:rgba(255,255,255,.85);font-size:16px;margin:0 auto 50px;max-width:680px;}
.svc-process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.svc-process__step{
  background:#fff;border-radius:var(--svc-radius);padding:26px 24px 30px;color:var(--svc-text);
  display:flex;flex-direction:column;
}
.svc-process__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;
  border-bottom:1px solid var(--svc-line);padding-bottom:16px;}
.svc-process__step-label{font-family:'Instrument Sans',sans-serif;font-weight:600;color:var(--svc-green);font-size:24px;line-height:1;}
/* Per Figma: numbers 01..04 are LIGHT MINT, not full green */
.svc-process__num{font-family:'Instrument Sans',sans-serif;font-weight:500;color:var(--svc-green-mint);font-size:18px;letter-spacing:.04em;line-height:1;}
.svc-process__step-title{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:18px;line-height:1.3;margin:18px 0 14px;color:var(--svc-text);}
.svc-process__desc{font-size:14px;line-height:1.55;color:var(--svc-muted);margin:0;}

/* ── 5. EVERYTHING HANDLED (2x2 with icons) ────────────────────────── */
.svc-handled{padding:110px 0;}
.svc-handled__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px;}
.svc-handled__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:54px;line-height:1.05;
  margin:0;color:var(--svc-text);max-width:760px;letter-spacing:-.01em;
}
.svc-handled__title em,.svc-handled__title i,.svc-handled__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-handled__cta{flex-shrink:0;}
.svc-handled__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.svc-handled__card{
  background:#fff;border:1px solid var(--svc-line);border-radius:var(--svc-radius);padding:28px 32px 32px;
}
.svc-handled__c-icon{width:42px;height:42px;margin-bottom:24px;display:flex;align-items:center;justify-content:flex-start;}
.svc-handled__c-icon img{width:42px;height:42px;object-fit:contain;display:block;}
.svc-handled__c-title{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:20px;line-height:1.3;margin:0 0 12px;color:var(--svc-text);}
.svc-handled__c-desc{font-size:14px;line-height:1.55;color:var(--svc-muted);margin:0;}

/* ── 6. WHY US ─────────────────────────────────────────────────────── */
.svc-why{padding:0 0 110px;}
.svc-why__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:54px;line-height:1.05;
  margin:0 0 50px;color:var(--svc-text);max-width:680px;letter-spacing:-.01em;
}
.svc-why__title em,.svc-why__title i,.svc-why__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-why__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:start;}

.svc-why__points{list-style:none;margin:0;padding:0;}
.svc-why__point{display:grid;grid-template-columns:42px 1fr;gap:0;padding:18px 0;border-bottom:1px solid var(--svc-line);}
.svc-why__point:first-child{padding-top:0;}
/* Per Figma: numbers in light mint green */
.svc-why__num{
  font-family:'Instrument Sans',sans-serif;font-weight:500;
  color:var(--svc-green-mint);
  font-size:14px;line-height:1.6;letter-spacing:.04em;
}
.svc-why__pt-title{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:17px;line-height:1.35;margin:0 0 6px;color:var(--svc-text);}
.svc-why__pt-desc{font-size:14px;line-height:1.55;color:var(--svc-muted);margin:0;}

.svc-why__side{display:flex;flex-direction:column;gap:14px;}
.svc-why__media{position:relative;border-radius:var(--svc-radius-md);overflow:hidden;aspect-ratio:1.3/1;background:#eee;}
.svc-why__media img{width:100%;height:100%;object-fit:cover;display:block;}
.svc-why__stamp{display:none;}

/* Stat cards: dark green bg, Figma dot pattern SVG occupying right side */
.svc-why__stats{display:flex;flex-direction:column;gap:12px;}
.svc-why__stat{
  position:relative;background:var(--svc-green);color:#fff;
  border-radius:var(--svc-radius-md);padding:22px 28px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  overflow:hidden;
}
.svc-why__stat-pat{
  position:absolute;top:0;right:0;bottom:0;width:55%;
  pointer-events:none;
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  opacity:.95;
}
.svc-why__stat > *:not(.svc-why__stat-pat){position:relative;z-index:1;}
.svc-why__stat-v{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:46px;line-height:1;}
.svc-why__stat-l1{font-size:18px;font-weight:500;line-height:1.2;}
.svc-why__stat-l2{font-size:14px;color:rgba(255,255,255,.78);margin-top:4px;}

/* ── 7. PROVEN — testimonials per Figma 218:14684 ─────────────────── */
.svc-proven{padding:90px 0 110px;background:#fff;}
.svc-proven__head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:48px;flex-wrap:wrap;}
.svc-proven__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:54px;line-height:1.05;
  margin:0;color:var(--svc-text);max-width:560px;letter-spacing:-.01em;
}
.svc-proven__title em,.svc-proven__title i,.svc-proven__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-proven__kpis{display:flex;gap:0;align-self:flex-end;}
.svc-proven__kpi{padding:0 26px;border-left:1px solid var(--svc-line);min-width:120px;}
.svc-proven__kpi:first-child{border-left:none;padding-left:0;}
.svc-proven__kpi-v{font-family:'Instrument Sans',sans-serif;font-weight:600;color:var(--svc-green);font-size:36px;line-height:1;}
.svc-proven__kpi-l{font-size:13px;color:var(--svc-text);margin-top:8px;}

/* Testimonial cards: light grey bg, stars top, quote, then divider + avatar+name+org row */
.svc-proven__ts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.svc-proven__t-card{
  background:#f5f6f5;
  border-radius:var(--svc-radius-md);
  padding:32px 32px 28px;
  display:flex;flex-direction:column;
}
.svc-proven__t-stars{display:flex;gap:4px;margin-bottom:22px;}
.svc-proven__t-stars svg{display:block;width:20px;height:19px;}
.svc-proven__t-quote{
  font-family:'Instrument Sans',sans-serif;
  font-size:17px;line-height:1.45;color:var(--svc-text);
  margin:0 0 24px;
  flex:1;font-weight:500;
}
.svc-proven__t-author{
  display:flex;align-items:center;gap:14px;
  padding-top:22px;
  border-top:1px solid #e1e3e1;
}
.svc-proven__t-avatar{
  width:44px;height:44px;border-radius:999px;
  background:#cdd5cf;background-size:cover;background-position:center;
  flex-shrink:0;
}
.svc-proven__t-avatar--ph{background:linear-gradient(135deg,#cdd5cf,#a8b3ad);}
.svc-proven__t-role{font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:600;color:var(--svc-text);line-height:1.2;}
.svc-proven__t-org{font-size:14px;color:var(--svc-muted);margin-top:3px;}

/* ── 8. CTA CARD ───────────────────────────────────────────────────── */
.svc-ctacard{padding:0 0 110px;}
.svc-ctacard__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start;}
.svc-ctacard__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:54px;line-height:1.05;
  margin:0 0 18px;color:var(--svc-text);letter-spacing:-.01em;
}
.svc-ctacard__title em,.svc-ctacard__title i,.svc-ctacard__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-ctacard__lead{font-size:15px;line-height:1.6;color:var(--svc-muted);margin:0 0 28px;max-width:560px;}
.svc-ctacard__warns{display:flex;flex-direction:column;gap:14px;}
.svc-ctacard__warn{
  background:var(--svc-warn-bg);border-radius:var(--svc-radius-md);padding:22px 26px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.svc-ctacard__warn-mark{
  width:22px;height:22px;border-radius:999px;background:#e11d48;flex-shrink:0;margin-top:30px;
  display:inline-flex;align-items:center;justify-content:center;
}
.svc-ctacard__warn-mark::before{content:"";display:block;width:11px;height:2px;background:#fff;border-radius:1px;}
.svc-ctacard__warn-t{font-family:'Instrument Sans',sans-serif;font-weight:600;color:var(--svc-warn-fg);font-size:16px;margin:0 0 10px;line-height:1.3;}
.svc-ctacard__warn-d{font-size:14px;color:var(--svc-muted);line-height:1.55;margin:0;}

/* CTA card: dark green w/ Figma dot pattern SVG at top + bottom corners */
.svc-ctacard__card{
  position:relative;background:var(--svc-green);color:#fff;
  border-radius:var(--svc-radius-md);padding:44px 44px 48px;overflow:hidden;
}
.svc-ctacard__card-pat{
  position:absolute;pointer-events:none;
  background-repeat:no-repeat;
  width:100%;height:100%;
  top:0;left:0;
}
/* Each pattern SVG has its own native pixel size matching Figma 218:14833 dot cluster bbox.
   Top: dense top-right cluster fading toward middle-left.
   Bot: small bottom-left cluster fading toward middle-right. */
.svc-ctacard__card-pat--top{background-position:top right;background-size:540px 270px;}
.svc-ctacard__card-pat--bot{background-position:bottom left;background-size:200px 140px;}
.svc-ctacard__card > *:not(.svc-ctacard__card-pat){position:relative;z-index:1;}
.svc-ctacard__card-t{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:30px;line-height:1.2;margin:0 0 22px;}
.svc-ctacard__card-b{font-size:15px;line-height:1.65;color:rgba(255,255,255,.92);margin:0 0 28px;}
.svc-ctacard__card-b p{margin:0 0 14px;}
.svc-ctacard__card-cta{margin-bottom:18px;}
.svc-ctacard__card-foot{font-size:13px;color:rgba(255,255,255,.75);margin:0;}

/* ── 9. FAQ ────────────────────────────────────────────────────────── */
.svc-faq{padding:0 0 110px;}
.svc-faq__grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start;}
.svc-faq__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:54px;line-height:1.05;
  margin:0;color:var(--svc-text);letter-spacing:-.01em;
}
.svc-faq__title em,.svc-faq__title i,.svc-faq__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-faq__list{display:flex;flex-direction:column;}
.svc-faq__item{border-bottom:1px solid var(--svc-line);padding:22px 0;}
.svc-faq__item:first-child{padding-top:0;}
.svc-faq__q{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:18px;color:var(--svc-text);line-height:1.35;
}
.svc-faq__q::-webkit-details-marker{display:none;}
.svc-faq__sign{position:relative;width:18px;height:18px;flex-shrink:0;color:var(--svc-text);}
.svc-faq__sign::before,.svc-faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
}
.svc-faq__sign::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.svc-faq__sign::after{width:2px;height:14px;transform:translate(-50%,-50%);transition:transform .2s;}
.svc-faq__item[open] .svc-faq__q{color:var(--svc-green);}
.svc-faq__item[open] .svc-faq__sign{color:var(--svc-green);}
.svc-faq__item[open] .svc-faq__sign::after{transform:translate(-50%,-50%) scaleY(0);}
.svc-faq__a{padding-top:14px;font-size:15px;color:var(--svc-muted);line-height:1.6;}
.svc-faq__a p{margin:0 0 10px;}

/* ── 10. PRE-FOOTER CTA ────────────────────────────────────────────── */
.svc-prefooter{padding:0 0 110px;}
.svc-prefooter__inner{
  position:relative;background:var(--svc-green);color:#fff;
  border-radius:var(--svc-radius-lg);padding:54px 56px;
  display:flex;justify-content:space-between;align-items:center;gap:32px;overflow:hidden;
}
.svc-prefooter__pat{
  position:absolute;top:0;right:0;bottom:0;width:65%;
  pointer-events:none;
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  opacity:.95;
}
.svc-prefooter__inner > *:not(.svc-prefooter__pat){position:relative;z-index:1;}
.svc-prefooter__title{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:42px;line-height:1.1;
  margin:0;max-width:760px;color:#fff;letter-spacing:-.01em;
}

/* Avoid the global `.svc a { color: inherit }` problem */
.svc-btn{color:inherit;}
.svc-btn--solid{color:#fff;}
.svc-btn--white{color:var(--svc-green);}
.svc-btn--outline{color:#fff;}
.svc-btn--dark{color:#fff;}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .svc-hero__title{font-size:54px;max-width:460px;}
  .svc-hero__truck{width:55%;}
  .svc-hero__text{max-width:480px;}
  .svc-types__head,.svc-handled__head,.svc-proven__head{flex-direction:column;align-items:flex-start;}
  .svc-types__sub{text-align:left;max-width:none;}
  .svc-types__grid,.svc-handled__grid,.svc-proven__ts{grid-template-columns:1fr 1fr;}
  .svc-process__grid{grid-template-columns:1fr 1fr;}
  .svc-intro__grid,.svc-why__grid,.svc-ctacard__grid,.svc-faq__grid{grid-template-columns:1fr;gap:36px;}
  .svc-hero__kpis{grid-template-columns:repeat(2,1fr);row-gap:18px;}
  .svc-hero__kpi:nth-child(3){border-left:none;padding-left:0;}
  .svc-hero__dots--tl{width:420px;height:180px;}
}
@media (max-width: 1100px){
  /* On tablet, scale dot patterns to track wider card */
  .svc-ctacard__card-pat--top{background-size:480px 240px;}
  .svc-ctacard__card-pat--bot{background-size:180px 126px;}
}
@media (max-width: 860px){
  /* On tablet/mobile stack: photo becomes a slim band below text or hides */
  .svc-hero__band{min-height:auto;}
  .svc-hero__truck{position:relative;width:100%;height:240px;margin-top:32px;
    -webkit-mask-image:none;mask-image:none;border-radius:14px;}
  .svc-hero__text{max-width:none;}
  .svc-hero__band{background:linear-gradient(180deg,#016b3a 0%,#016b3a 78%,#7fa691 100%);}
}
@media (max-width: 720px){
  .svc-container{padding:0 18px;}
  .svc-hero__band{padding-top:80px;padding-bottom:48px;background:linear-gradient(180deg,#016b3a 0%,#016b3a 75%,#7fa691 100%);}
  .svc-hero__title{font-size:42px;}
  .svc-hero__kpi-v{font-size:28px;}
  .svc-hero__dots--tl{display:none;}
  .svc-hero__truck{height:200px;}
  .svc-types__title,.svc-handled__title,.svc-why__title,
  .svc-proven__title,.svc-ctacard__title,.svc-faq__title,
  .svc-process__title{font-size:34px;}
  .svc-prefooter__title{font-size:26px;}
  .svc-prefooter__inner{flex-direction:column;align-items:flex-start;padding:36px 28px;}
  .svc-prefooter__pat{width:100%;opacity:.45;}
  .svc-types__grid,.svc-handled__grid,.svc-proven__ts,.svc-process__grid{grid-template-columns:1fr;}
  .svc-intro,.svc-handled,.svc-ctacard,.svc-types{padding:60px 0;}
  .svc-why,.svc-faq,.svc-prefooter,.svc-proven{padding-bottom:60px;}
  .svc-process{padding:60px 0 70px;}
  .svc-process__pat{width:200px;height:160px;opacity:.5;}
  .svc-proven{padding-top:60px;}
  .svc-ctacard__card{padding:32px 28px 36px;}
  /* Scale dot patterns down on mobile to fit narrower card */
  .svc-ctacard__card-pat--top{background-size:340px 170px;}
  .svc-ctacard__card-pat--bot{background-size:140px 100px;}
  .svc-ctacard__card-t{font-size:24px;}
  .svc-why__stat-pat{width:75%;}
}

/* ──────────────────────────────────────────────────────────────────
   ITER 5 OVERRIDES (Bohdan 2026-05-07)
   1. Glass styling on KPI tiles + why-stat tiles
   2. Hero gradient — exact Figma values
   3. Testimonial avatars: real <img> (round)
   4. Bigger dot patterns site-wide
   ITER 6 (Bohdan 2026-05-07 evening): truck blends seamlessly,
   dot pattern positioned per Figma 203:5160, hero spacing matches
   Figma rhythm (gap=20 inside body, eyebrow→body=42, CTA→stats=80)
   ────────────────────────────────────────────────────────────────── */

/* ── 1. HERO gradient — Bohdan's verbatim values ─────────────────── */
/* linear-gradient(270deg, rgba(0,0,0,.20) 17.79%, #016B3A 62.02%);
   270deg points LEFT → first stop at right (transparent black), second at left (green) */
.svc-hero__band{
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.20) 17.79%, #016B3A 62.02%) !important;
}

/* ── 2. GLASS — hero KPI band WRAPPER (not individual tiles) ────── */
/* Glass goes on .svc-hero__kpis-band wrapper; tiles are transparent */
.svc-hero__kpis-band{
  background: rgba(152, 255, 195, 0.20) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(11px);
          backdrop-filter: blur(11px);
  margin-top: -8px;
  padding-top: 22px;
  padding-bottom: 24px;
}
.svc-hero__kpis{
  gap: 0;
  align-items: stretch;
}
.svc-hero__kpi{
  background: transparent;
  border-radius: 0;
  border-top: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.svc-hero__kpi:first-child{ border-left: 0; padding-left:26px; }

/* ── 3. GLASS — Why Us photo overlay stats WRAPPER (not tiles) ──── */
/* Glass goes on .svc-why__stats wrapper; tiles are transparent */
.svc-why__stats{
  background: rgba(152, 255, 195, 0.20);
  border-top: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--svc-radius-md);
  -webkit-backdrop-filter: blur(11px);
          backdrop-filter: blur(11px);
  padding: 10px;
}
.svc-why__stat{
  background: transparent !important;
  border-top: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ── 4. Testimonial avatar — circular IMG, no bg shape ────────────── */
.svc-proven__t-avatar{
  background: transparent;
  display: inline-block;
  overflow: hidden;
}
.svc-proven__t-avatar img{
  width:100%; height:100%; display:block; object-fit:cover; border-radius:999px;
}

/* ── 5. Dot patterns — bump up sizes per Figma reference ──────────── */
/* Hero top-left cluster — Figma 203:5160 sits across upper-left area */
.svc-hero__dots--tl{
  width: 760px;
  height: 320px;
  opacity: .9;
}
/* Process corners — make corner clusters clearly visible */
.svc-process__pat{
  width: 460px;
  height: 360px;
}
/* Why-us stat overlay pattern */
.svc-why__stat-pat{
  width: 60%;
  background-size: contain;
  background-position: right center;
}
/* CTA card top + bottom patterns — see base rule above (native 1144x268 px) */
/* Pre-footer pattern */
.svc-prefooter__pat{
  width: 70%;
  background-size: contain;
  background-position: right center;
}

/* ── responsive tweaks for above ──────────────────────────────────── */
@media (max-width: 1100px){
  .svc-hero__dots--tl{ width: 560px; height: 240px; }
  .svc-process__pat{ width: 360px; height: 280px; }
}
@media (max-width: 720px){
  .svc-hero__kpi{ padding: 16px 18px 18px; border-radius: 12px; }
  .svc-hero__dots--tl{ display:none; }
}

/* ── ITER 5 PATCH B — pull KPI tiles UP to overlap hero photo ────── */
.svc-hero{ padding-bottom: 0; }
.svc-hero__band{ padding-bottom: 130px; }
.svc-hero__kpis-band{
  position: relative;
  margin-top: -110px;
  padding-bottom: 30px;
  z-index: 3;
}
@media (max-width: 720px){
  .svc-hero__band{ padding-bottom: 60px; }
  .svc-hero__kpis-band{ margin-top: 0; padding-top: 18px; padding-bottom: 18px; background: rgba(1,107,58,0.6); }
}

/* ── ITER 5 PATCH C — why-stat readable text on glass ────────────── */
.svc-why__stat-v{ color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.svc-why__stat-l1{ color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.20); }
.svc-why__stat-l2{ color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.22); }
/* Place stats overlapping photo bottom — Figma intent */
.svc-why__side{ position: relative; }
.svc-why__media{ aspect-ratio: 1.18/1; }
.svc-why__stats{
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
}
@media (max-width: 860px){
  .svc-why__stats{
    position: static; left:auto; right:auto; bottom:auto; margin-top: 14px;
    background: var(--svc-green);
    border-top: 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    padding: 0;
  }
  .svc-why__stat-v, .svc-why__stat-l1, .svc-why__stat-l2{ text-shadow: none; }
  .svc-why__stat{ background: var(--svc-green) !important; }
}

/* ──────────────────────────────────────────────────────────────────
   ITER 6 (Bohdan 2026-05-07 evening) — HERO ONLY: pixel-match Figma 203:5
   - Truck dissolves seamlessly into gradient (no rectangle edge)
   - Dot pattern positioned per Figma 203:5160 (top-left band)
   - Spacing: gap=20 inside body block, eyebrow→body=42, CTA→stats=80
   ────────────────────────────────────────────────────────────────── */

/* 1. TRUCK — softer/wider gradient mask + extend over more of left
      so the rectangle edge fully dissolves into the green gradient.
      Mask now ramps from 0% transparent → 100% opaque over the full
      left third (0→45%) instead of a tight 0→18% band. */
.svc-hero__band{ overflow:hidden; }
.svc-hero__truck{
  width:65%;                    /* slightly wider so subject sits right */
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,0)  0%,
    rgba(0,0,0,0)  6%,
    rgba(0,0,0,.15) 18%,
    rgba(0,0,0,.45) 30%,
    rgba(0,0,0,.85) 42%,
    #000 55%);
          mask-image:linear-gradient(90deg,
    rgba(0,0,0,0)  0%,
    rgba(0,0,0,0)  6%,
    rgba(0,0,0,.15) 18%,
    rgba(0,0,0,.45) 30%,
    rgba(0,0,0,.85) 42%,
    #000 55%);
}
/* 1b. Belt-and-suspenders: a real gradient overlay covering left third
       to guarantee no hard rectangle line is ever visible. Sits over
       the truck (z=1) but BELOW dots (z>=0) and content (z=2).
       Inset right=0% means it doesn't cover the right side of hero. */
.svc-hero__band::before{
  content:"";position:absolute;left:0;top:0;bottom:0;right:0;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    #016B3A 0%,
    #016B3A 40%,
    rgba(1,107,58,.85) 50%,
    rgba(1,107,58,.45) 60%,
    rgba(1,107,58,.10) 70%,
    rgba(1,107,58,0)   78%);
}
/* dots above the gradient overlay so they remain visible */
.svc-hero__dots{ z-index:2; }
/* content above dots */
.svc-hero__inner{ z-index:3; }

/* 2. DOT PATTERN — position per Figma 203:5160 (x=883-2214, y=-140 → 195
      relative to hero @ x=944,y=72). So in hero coords:
      left = 883 - 944 = -61   top = -140 - 72 = -212 (mostly off-canvas)
      width=1331, height=335. We render the visible portion at native scale
      so dot density + size match Figma exactly. */
.svc-hero__dots--tl{
  top:-100px;
  left:-60px;
  width:1330px;
  height:335px;
  background-position:left top;
  background-size:1330px 335px;       /* native size = Figma 1:1 */
  background-repeat:no-repeat;
  opacity:.65;
}

/* 3. SPACING — match Figma rhythm
   Figma body block (203:6987) gap=20px between every child.
   Eyebrow row → body block gap=42px (parent 203:6 itemSpacing).
   CTA bottom → stats band top = 667 - 587 = 80px. */
.svc-hero__text{ display:flex; flex-direction:column; gap:0; }
.svc-breadcrumb{ margin-bottom:42px; }
.svc-hero__pill{ margin-bottom:0; align-self:flex-start; }
.svc-hero__title{
  font-size:62px; line-height:1.2; letter-spacing:-.01em;
  margin:20px 0 0; max-width:560px;
}
.svc-hero__sub1{
  font-size:18px; line-height:1.4;
  white-space:normal;       /* kill stray pre-line linebreaks */
  margin:20px 0 0; max-width:480px;
}
.svc-hero__sub1 br{ display:none; } /* belt+suspenders: hide stray <br> */
.svc-hero__sub2{
  font-size:16px; line-height:1.4; color:rgba(255,255,255,.78);
  margin:20px 0 0;
}
.svc-hero__ctas{ margin-top:20px; gap:20px; }

/* 4. STATS BAND — Figma 218:5423 is a separate full-bleed band BELOW
      the green hero, with a slightly lighter green/teal tint and a
      subtle top border. Background MUST be solid green-ish so text
      stays readable regardless of what's behind. */
.svc-hero__band{ padding-bottom:80px; }
.svc-hero__kpis-band{
  margin-top:0 !important;
  padding:32px 0 !important;
  border-radius:0 !important;
  /* Figma glass on wrapper — verbatim values from Bohdan */
  border-top:2px solid rgba(255,255,255,0.22) !important;
  background: rgba(152,255,195,0.20) !important;
  -webkit-backdrop-filter: blur(11px) !important;
          backdrop-filter: blur(11px) !important;
  color:#fff;
}
.svc-hero__kpis{ grid-template-columns:repeat(4,1fr); }
.svc-hero__kpi{ padding:0 24px; border-left:1px solid rgba(255,255,255,.28); }
.svc-hero__kpi:first-child{ padding-left:24px; border-left:0; }
.svc-hero__kpi-v{ font-size:32px; line-height:1.2; color:#fff; }
.svc-hero__kpi-l{ font-size:14px; color:rgba(255,255,255,.78); margin-top:6px; }

/* 5. Buttons — Figma sizes (45h, 24px x-pad, 15px font, 12px gap to icon) */
.svc-hero__ctas .svc-btn{
  height:45px; padding:0 24px;
  font-size:15px; line-height:1; gap:12px;
  border-radius:8px;
}

/* responsive iter6 */
@media (max-width: 1100px){
  .svc-hero__dots--tl{ width:1100px; height:280px; background-size:1100px 280px; }
  .svc-hero__title{ font-size:54px; }
}
@media (max-width: 860px){
  .svc-hero__band::before{ display:none; }
  .svc-hero__dots--tl{ display:none; }
  .svc-hero__title{ font-size:42px; line-height:1.1; }
  .svc-breadcrumb{ margin-bottom:28px; }
  .svc-hero__kpis-band{ margin-top:0; padding:18px 0; }
}

/* ── ITER 7 — hero stats visibility + process step numbers + title line-height ── */

/* 1. Hero section root: solid green base so the glass KPI band reads correctly
      where it overhangs below .svc-hero__band (white intro section was
      bleeding through and making white labels invisible on pale glass). */
.svc-hero{
  background: #016B3A;
}

/* 2. Process step numbers (01..04) — Bohdan: 32px, more visible.
      Figma: 32px / Instrument Sans 700 / green; we keep them slightly
      muted (mint at higher opacity) so the side number reads as a marker
      rather than competing with the 'Step N' label. */
.svc-process__num{
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(0, 129, 69, 0.32);
}

/* 3. Process 'Step N' label — match Figma (32px / 700 / svc-green) */
.svc-process__step-label{
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

/* 4. Process h2 — tighten line-height (was 1.05 already, but with white-space:pre-line
      and 54px font the visual gap looked loose; Figma shows tight 1.0–1.05). */
.svc-process__title{
  line-height: 1.0;
  margin-bottom: 18px;
}

/* 5. Process dot pattern — Figma shows compact 6–8px mint dots in vertical
      bands flanking the title; the current 460×360 corner clusters are too
      big and too low-opacity. Tighten to subtle vertical pillars. */
.svc-process__pat{
  width: 200px;
  height: 360px;
  opacity: .35;
}
@media (max-width: 1100px){
  .svc-process__pat{ width: 160px; height: 280px; }
}

/* ===== Iter 7b — green CTAs: gradient + 12px radius (Bohdan 2026-05-07) =====
   Hero buttons (.svc-btn--white / .svc-btn--dark) intentionally untouched
   (8px radius approved per Figma 203:5153). This applies to non-hero green
   CTAs only. */

/* (a) Solid green CTA — handled section ('Get a Quote') */
.svc-handled__cta.svc-btn--solid,
.svc-btn--solid.svc-handled__cta{
  border-radius: 12px;
  background:
    linear-gradient(275deg, #008145 0.32%, #049351 99.68%),
    linear-gradient(0deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.94) 100%),
    linear-gradient(275deg, #008145 0.32%, #049351 99.68%);
  color:#fff;
}

/* (b) CTA card right-side 'Get a Quote' button — repaint as gradient green
   pill at 300px wide. Currently uses .svc-btn--white (white pill). */
.svc-ctacard__card-cta.svc-btn--white,
.svc-btn--white.svc-ctacard__card-cta{
  width: 300px;
  max-width: 100%;
  justify-content: center;
  border-radius: 12px;
  background:
    linear-gradient(275deg, #008145 0.32%, #049351 99.68%),
    linear-gradient(0deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.94) 100%),
    linear-gradient(275deg, #008145 0.32%, #049351 99.68%);
  color:#fff;
}
.svc-ctacard__card-cta.svc-btn--white .svc-btn__arr,
.svc-btn--white.svc-ctacard__card-cta .svc-btn__arr{ color:#fff; }

/* ── ITER 8 — kpis-band OVERLAPS truck (Bohdan Figma intent 2026-05-07) ──
   Markup moved INSIDE .svc-hero__band; pin to bottom so glass blur
   reveals truck/road behind. Verbatim glass tokens preserved on the
   kpis-band rule above; only positioning changes here. */
.svc-hero__band{
  position: relative;
  /* reserve room at bottom for the absolute kpis-band (~95px) plus
     breathing room above it so CTAs don't sit behind the band */
  padding-bottom: 150px !important;
}
.svc-hero__kpis-band{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0 !important;
  padding-top: 22px !important;
  padding-bottom: 24px !important;
  border-radius: 0 !important;
  z-index: 5;
}
@media (max-width: 720px){
  .svc-hero__band{ padding-bottom: 60px !important; }
  .svc-hero__kpis-band{
    position: static !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    background: rgba(1,107,58,0.6) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   ITER 9 (Bohdan 2026-05-07) — WHY-US ONLY: photo top, two SOLID
   green stat cards STACKED BELOW (no overlay, no glass).
   Overrides ITER 5 PATCH C absolute-positioning + glass wrapper.
   Hero / Process / other sections untouched.
   ────────────────────────────────────────────────────────────────── */
.svc-why__side{
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.svc-why__media{
  aspect-ratio: 1.3/1 !important;
  border-radius: var(--svc-radius-md) !important;
}
/* kill the glass wrapper + overlay positioning */
.svc-why__stats{
  position: static !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: auto !important;
}
/* each card = solid dark green, big number left, meta right, dot pat right */
.svc-why__stat{
  background: var(--svc-green) !important;
  border-top: 0 !important;
  border-radius: 18px !important;
  padding: 28px 32px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 28px !important;
  align-items: center !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.svc-why__stat-pat{
  position: absolute !important;
  top: 0; right: 0; bottom: 0;
  width: 55% !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 100% auto !important;
  opacity: .85 !important;
  pointer-events: none;
}
.svc-why__stat-v{
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 68px !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.svc-why__stat-l1{
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.svc-why__stat-l2{
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.78) !important;
  margin-top: 4px !important;
  text-shadow: none !important;
}
@media (max-width: 860px){
  .svc-why__stat{ padding: 22px 24px !important; gap: 20px !important; }
  .svc-why__stat-v{ font-size: 56px !important; }
}

/* ──────────────────────────────────────────────────────────────────
   ITER 10 — Why Choose refinements (Bohdan 2026-05-07)
   1) Bigger dots inside the green stat cards
   2) Photo gradient overlay (180deg green→black @ .22 alpha) + 32px radius
   ────────────────────────────────────────────────────────────────── */

/* Bigger dots: SVG was being shrunk by background-size:cover into a 55%-wide
   container; oversize the bg so each dot scales up visually. */
.svc-why__stat-pat{
  background-size: 200% auto !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  opacity: .9 !important;
}
@media (max-width: 860px){
  .svc-why__stat-pat{ background-size: 240% auto !important; }
}

/* Photo wrapper: 32px radius + green→black gradient overlay over existing img */
.svc-why__media{
  position: relative !important;
  border-radius: 32px !important;
  overflow: hidden !important;
}
.svc-why__media img{
  border-radius: 32px;
}
.svc-why__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,129,69,0.22) 0%, rgba(0,0,0,0.22) 100%);
  border-radius: 32px;
  pointer-events: none;
  z-index: 1;
}
/* keep stamp (if any) above the gradient */
.svc-why__stamp{ position: relative; z-index: 2; }

/* ──────────────────────────────────────────────────────────────────
   ITER 11 — Why Choose: structure 1:1 vs Figma 203:23523 (Bohdan 2026-05-07)
   - Title moved INSIDE left column (was full-width above grid)
   - Right col (photo + stats) starts at top, in line with title
   - Photo aspect ratio matches Figma 535×553 ≈ 0.97:1 (was 1.3/1 wide)
   - Stat cards compressed to Figma 535×138 ≈ 3.88:1 (shorter, wider feel)
   - Image already swapped to one with composited McCabe clover logo
   ────────────────────────────────────────────────────────────────── */
.svc-why__grid{ grid-template-columns: 701fr 535fr !important; gap: 80px !important; align-items: start !important; }
.svc-why__main{ min-width: 0; }
.svc-why__title{ margin: 0 0 28px !important; max-width: none !important; }
.svc-why__intro{ font-size: 16px; line-height: 1.55; color: var(--svc-muted); margin: 0 0 28px; max-width: 640px; }

/* photo: shorter+wider than before, closer to Figma proportion */
.svc-why__media{ aspect-ratio: 535/553 !important; }

/* stat cards: lower padding so each ≈ 138px tall like Figma */
.svc-why__stat{
  padding: 22px 28px !important;
  gap: 20px !important;
  border-radius: 18px !important;
  align-items: center !important;
}
.svc-why__stat-v{ font-size: 54px !important; }
.svc-why__stat-l1{ font-size: 17px !important; }
.svc-why__stat-l2{ font-size: 13px !important; margin-top: 2px !important; }

@media (max-width: 980px){
  .svc-why__grid{ grid-template-columns: 1fr !important; gap: 36px !important; }
  .svc-why__title{ margin-bottom: 18px !important; }
  .svc-why__media{ aspect-ratio: 16/10 !important; }
}

/* ──────────────────────────────────────────────────────────────────
   ITER 12 — Why Choose stat cards: dot texture 1:1 vs Figma (Bohdan 2026-05-07)
   Figma 218:8934/218:10784 has dots in BOTH top-right AND bottom-left
   corners (two layered groups: 218:10798 + 218:11712). Live was clipping
   to a 55% right-band so bottom-left cluster never showed.
   Fix: pattern fills full card; SVG already has both clusters stacked
   in 705×356 viewBox —  fits and rotates the full pattern in.
   ────────────────────────────────────────────────────────────────── */
.svc-why__stat-pat{
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  background-size: 100% auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}
@media (max-width: 860px){
  .svc-why__stat-pat{ background-size: 100% auto !important; }
}
/* ── EQUIPMENT (Figma 271:2) ──────────────────────────────────────────
   1:1 per Figma: 3-col card grid, transparent-bg green-outlined pills,
   zebra-striped spec rows with green-tinted alternating rows.
   ──────────────────────────────────────────────────────────────────── */
.svc-equipment{padding:80px 0;background:#fff;}
.svc-equipment__head{display:flex;flex-direction:column;gap:22px;margin-bottom:42px;max-width:1330px;}
.svc-equipment__eyebrow{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:9999px;
  background:rgba(0,129,69,.08);
  color:#008145;
  border:1px solid rgba(0,129,69,.15);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:13px;font-weight:600;line-height:1.22;
  width:fit-content;
}
.svc-equipment__title{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:500;color:#0E1510;
  font-size:69px;line-height:1.0;letter-spacing:-.02em;
  margin:0;
}
.svc-equipment__title em,
.svc-equipment__title i,
.svc-equipment__title strong{font-style:normal;font-weight:600;color:var(--svc-green);}
.svc-equipment__sub{
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.5;color:#2A312C;font-weight:400;
  margin:0;max-width:660px;
}
.svc-equipment__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.eq-card{
  display:flex;flex-direction:column;gap:16px;
  background:#fff;
  border:1px solid #E4E7E3;
  border-radius:18px;
  padding:22px 32px;
}
.eq-card__icon{display:flex;align-items:center;min-height:32px;}
.eq-card__icon img{max-height:32px;width:auto;display:block;}
.eq-card__title{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:600;color:#000;
  font-size:22px;line-height:1.36;letter-spacing:0;
  margin:0;
}
.eq-card__pill{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:9999px;
  background:transparent;
  border:1px solid rgba(0,129,69,.15);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:13px;font-weight:600;color:#008145;line-height:1.22;
  width:fit-content;
}
.eq-card__desc{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:18px;line-height:1.4;color:#6B7269;font-weight:500;
  margin:0;
}
.eq-card__specs{
  display:flex;flex-direction:column;gap:0;
  margin-top:auto;
}
.eq-spec{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  min-height:52px;box-sizing:border-box;
}
.eq-spec:nth-child(odd){background:rgba(0,129,69,.03);}
.eq-spec__l{
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;font-weight:600;line-height:1.71;
  color:rgba(0,129,69,.52);
}
.eq-spec__v{
  font-family:'Inter',system-ui,sans-serif;
  font-size:18px;font-weight:500;line-height:1.52;
  color:#000;text-align:right;
}

/* Tablet */
@media (max-width: 1024px){
  .svc-equipment__grid{grid-template-columns:1fr 1fr;}
  .svc-equipment__title{font-size:44px;}
}
/* Mobile */
@media (max-width: 720px){
  .svc-equipment{padding:60px 0;}
  .svc-equipment__grid{grid-template-columns:1fr;}
  .svc-equipment__title{font-size:34px;}
  .eq-card{padding:22px 22px;}
  .eq-card__title{font-size:20px;}
  .eq-card__desc{font-size:16px;}
  .eq-spec__v{font-size:16px;}
}

/* 2026-05-14: paragraph spacing inside intro body (wpautop output) */
.svc-intro__body p{margin:0 0 16px;}
.svc-intro__body p:last-child{margin-bottom:0;}