/* ==========================================================================
   Poppins, self-hosted — 10 Sep 2026
   Was loaded from fonts.googleapis.com: a render-blocking third-party
   stylesheet plus font files from a second third-party host, on every page
   load, in every country. Four files, 31 KB total, latin subset (full French
   coverage verified against the actual cmap table), served from our own
   origin under the SIL Open Font License (fonts/POPPINS-OFL.txt).

   800 is included deliberately. Google Fonts only ever served 500/600/700,
   so the stat numerals at weight 800 were being synthetically emboldened by
   the browser - a smeared approximation. This is the real cut.
   ========================================================================== */
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/poppins-800.woff2") format("woff2")}

/* ============================================================================
   Hankaka Technologies — site visual system v2
   "Disciplined enterprise": one blue, deep navy, warm grey. Colour carries
   meaning; it is never decoration. Scoped to .site-v2 so the other 41 pages
   are untouched.
   ========================================================================== */
.site-v2{
  --ink:#0a1730;          /* headings                      */
  --ink-2:#39424f;        /* body                          */
  --ink-3:#656c7a;        /* muted / meta — 4.6:1 on the warm grey ground */
  --acc:#1a56c4;          /* the one accent, for text      */
  --acc-btn:#1a73e8;      /* brand blue, actions only      */
  --ground:#f6f5f2;       /* warm grey — the calm band     */
  --ground-2:#efece6;
  --card:#ffffff;
  --line:rgba(10,23,48,.11);
  --line-2:rgba(10,23,48,.20);
  --eco:#1f7a45;          /* reserved for ITAD, nothing else */
  --navy:#0a1730;         /* inverted surfaces — must NOT flip in dark mode */
  --rhythm:clamp(3rem,4.6vw,4.4rem);
}
[data-theme="dark"] .site-v2{
  --ink:#e9edf4; --ink-2:#b8c0cc; --ink-3:#8b93a1;
  --acc:#7fb0ff; --acc-btn:#1a73e8;
  --ground:#0d1420; --ground-2:#0a1018; --card:#141c2a;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --eco:#5fc98a; --navy:#070d18;
}

/* ---- rhythm ------------------------------------------------------------ */
.site-v2 .section{padding-block:var(--rhythm);background:var(--card)}
.site-v2 .section--tint,.site-v2 .section--subtle,.site-v2 .section--vivid,
.site-v2 .section--tight{background:var(--card)}
.site-v2 .proofbar,.site-v2 .field2,.site-v2 .itad2,.site-v2 .coverage2{background:var(--ground)}
.site-v2 .section-head{max-width:56ch;margin-bottom:clamp(2rem,3.5vw,3rem)}
.site-v2 .section-head--center{margin-inline:auto;text-align:center}
.site-v2 h2{color:var(--ink);letter-spacing:-.021em;line-height:1.12;
  font-size:clamp(1.65rem,1.2rem + 1.55vw,2.5rem);text-wrap:balance}
.site-v2 h3{color:var(--ink);letter-spacing:-.012em}
.site-v2 p{color:var(--ink-2)}
.site-v2 .overline{color:var(--ink-3);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase}
.site-v2 .overline::after{display:none}          /* kill the rainbow dash */

/* ---- hero: the headline was breaking into five ragged lines ------------ */
.site-v2 .hero--v2{background:linear-gradient(178deg,var(--ground) 0%,var(--card) 78%)}
.site-v2 .hero--v2::before{opacity:.5}
.site-v2 .hero__inner{grid-template-columns:1.18fr .82fr;align-items:start;gap:clamp(2rem,4vw,3.5rem)}
.site-v2 .hero__art{position:sticky;top:6.5rem}
.site-v2 .hero__content{max-width:none}
.site-v2 .hero--v2{padding-block:clamp(2.2rem,4vw,3.4rem) clamp(2.6rem,5vw,4.2rem)}
.site-v2 .hero--v2 h1{
  font-size:clamp(2rem,1.1rem + 2.7vw,3.05rem);
  line-height:1.09;letter-spacing:-.028em;color:var(--ink);
  max-width:22ch;text-wrap:balance;margin-block:.8rem .9rem}
.site-v2 .hero__note{margin-top:1rem;font-size:.86rem;line-height:1.6;
  color:var(--ink-3);max-width:60ch}
.site-v2 .hero__trust{margin-top:2rem;padding-top:1.35rem}
.site-v2 .hero__sub{font-size:clamp(1rem,.96rem + .28vw,1.1rem);
  line-height:1.62;color:var(--ink-2);max-width:52ch}
.site-v2 .hero__trust-item svg{color:var(--eco)}
.site-v2 .hero__photo{border-radius:14px;box-shadow:0 24px 54px rgba(10,23,48,.13)}
.site-v2 .hero__photo img{filter:contrast(1.05) saturate(1.04) brightness(1.02)}
.site-v2 .hero__trust{display:flex;gap:.7rem 1.35rem}
.site-v2 .hero__trust-item{font-size:.85rem}
.site-v2 .hero__actions{gap:.7rem}
.site-v2 .hero__coverage span{background:transparent;border-color:var(--line)}

/* ---- proof bar: stats + partner markets + credential ------------------- */
.site-v2 .proofbar{padding-block:clamp(2.5rem,4vw,3.6rem);
  border-block:1px solid var(--line)}
.site-v2 .proofbar .stats{display:grid;gap:1.25rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.site-v2 .proofbar .stat{padding-left:1.05rem;border-left:2px solid var(--acc)}
.site-v2 .proofbar .stat__num{font-size:clamp(1.85rem,1.4rem + 1.4vw,2.6rem);
  line-height:1;letter-spacing:-.03em;
  background:none!important;background-image:none!important;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--ink);color:var(--ink)}
.site-v2 .coverage2 .mini-stat__num{background:none!important;background-image:none!important;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--ink);color:var(--ink)}
.site-v2 .proofbar .stat__label{color:var(--ink-3);font-size:.85rem;
  line-height:1.45;margin-top:.4rem}
.site-v2 .proofbar__partners{margin-top:2.4rem;padding-top:1.9rem;
  border-top:1px solid var(--line)}
.site-v2 .proofbar__partners .markets{display:flex;flex-wrap:wrap;gap:.45rem;
  justify-content:center}
.site-v2 .proofbar__partners .market-chip{background:var(--card);
  border:1px solid var(--line);color:var(--ink-2);font-size:.79rem;
  font-weight:500;padding:.32rem .72rem;border-radius:999px}
.site-v2 .proofbar__partners p{text-align:center;max-width:64ch;
  margin:1rem auto 0;font-size:.9rem;color:var(--ink-3)}
.site-v2 .proofbar__credential{margin-top:2rem;background:var(--card);
  border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.15rem,2.4vw,1.7rem);box-shadow:none;max-width:none}
.site-v2 .proofbar__credential blockquote{font-size:.98rem;line-height:1.6;
  color:var(--ink-2);font-style:normal;margin:.7rem 0 .6rem}
.site-v2 .proofbar__credential .pill{background:transparent;color:var(--eco);
  border:1px solid color-mix(in srgb,var(--eco) 34%,transparent)}
.site-v2 .proofbar__credential p{font-size:.83rem;color:var(--ink-3)}

/* ---- one icon treatment everywhere (was four different hues) ----------- */
/* style.css rotates icon tiles through six hues via
   .grid > *:nth-of-type(6n+N) .icon-tile — that is the rainbow engine.
   Same specificity, declared later, so these win. */
.site-v2 .icon-tile,.site-v2 .grid > * .icon-tile,
.site-v2 .grid > *:nth-of-type(6n+1) .icon-tile,
.site-v2 .grid > *:nth-of-type(6n+2) .icon-tile,
.site-v2 .grid > *:nth-of-type(6n+3) .icon-tile,
.site-v2 .grid > *:nth-of-type(6n+4) .icon-tile,
.site-v2 .grid > *:nth-of-type(6n+5) .icon-tile,
.site-v2 .grid > *:nth-of-type(6n+6) .icon-tile{
  background:color-mix(in srgb,var(--acc) 9%,transparent);
  color:var(--acc);border-radius:9px}
[data-theme="dark"] .site-v2 .grid > *:nth-of-type(6n+1) .icon-tile,
[data-theme="dark"] .site-v2 .grid > *:nth-of-type(6n+2) .icon-tile,
[data-theme="dark"] .site-v2 .grid > *:nth-of-type(6n+3) .icon-tile,
[data-theme="dark"] .site-v2 .grid > *:nth-of-type(6n+4) .icon-tile,
[data-theme="dark"] .site-v2 .grid > *:nth-of-type(6n+5) .icon-tile,
[data-theme="dark"] .site-v2 .grid > *:nth-of-type(6n+6) .icon-tile{
  background:rgba(127,176,255,.14);color:var(--acc)}
.site-v2 .services2 .service-card--feature .icon-tile{
  background:rgba(255,255,255,.13);color:#fff}
.site-v2 .pill--green{background:transparent;color:var(--eco);
  border:1px solid color-mix(in srgb,var(--eco) 34%,transparent)}

/* ---- services --------------------------------------------------------- */
.site-v2 .services2 .service-card{background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:none;transition:border-color .2s,transform .2s}
.site-v2 .services2 .service-card:hover{border-color:var(--line-2);
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,23,48,.07)}
.site-v2 .services2 .service-card--feature{background:var(--navy);border-color:var(--navy)}
.site-v2 .services2 .service-card--feature h3,
.site-v2 .services2 .service-card--feature p{color:#fff}
.site-v2 .services2 .service-card--feature p{color:rgba(255,255,255,.76)}
.site-v2 .services2 .service-card--feature .icon-tile{
  background:rgba(255,255,255,.12);color:#fff}
/* the flagship badge sits on navy: needs a light green, not the ITAD green */
.site-v2 .services2 .service-card--feature .pill--green,
.site-v2 .services2 .service-card--feature .pill{
  background:rgba(95,201,138,.16);color:#8fe0b0;
  border:1px solid rgba(143,224,176,.34)}
.site-v2 .services2 .service-card--feature .pill .dot{background:#8fe0b0}
.site-v2 .services2 .btn--text{color:var(--acc);font-weight:600}
.site-v2 .services2 .service-card--feature .btn--text{color:#9dc0ff}

/* the eight delivery capabilities: a list, not a wall of coloured cards */
.site-v2 .caplist{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:clamp(2rem,3vw,2.75rem);
  border-top:1px solid var(--line)}
.site-v2 .caplist__head{font-size:clamp(1.15rem,1rem + .5vw,1.45rem);
  letter-spacing:-.018em;margin:0}
.site-v2 .caplist__intro{margin:.6rem 0 0;max-width:70ch;font-size:.94rem;
  line-height:1.62;color:var(--ink-2)}
.site-v2 .caplist__grid{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;
  gap:0 clamp(1.5rem,3vw,3rem);grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.site-v2 .caplist__item{padding:1.05rem 0;border-top:1px solid var(--line)}
.site-v2 .caplist__item h3{margin:0;font-size:.97rem;font-weight:650;
  letter-spacing:-.008em}
.site-v2 .caplist__item p{margin:.28rem 0 0;font-size:.88rem;line-height:1.55;
  color:var(--ink-3)}

/* ---- from the field: the photographs are the differentiator ----------- */
.site-v2 .field2 .plate{background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:none;overflow:hidden}
.site-v2 .field2 .plate__idx{color:var(--ink-3);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase}
.site-v2 .field2 .plate__ttl{color:var(--ink)}
.site-v2 .field2 .plate__txt{color:var(--ink-3);font-size:.85rem}
.site-v2 .field2 .fieldnote{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:0 10px 10px 0;color:var(--ink-3)}

/* ---- why: four reasons, numbered — no coloured blocks ----------------- */
.site-v2 .why2 .reasons{display:grid;gap:0 clamp(1.75rem,3.5vw,3.25rem);
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.site-v2 .why2 .reason,
.site-v2 .why2 .reason--blue,.site-v2 .why2 .reason--green,
.site-v2 .why2 .reason--orange,.site-v2 .why2 .reason--purple{
  background:none;background-image:none;border:0;border-top:2px solid var(--ink);
  border-radius:0;box-shadow:none;color:inherit;padding:1.4rem 0 0;
  min-height:0;overflow:visible}
.site-v2 .why2 .reason::before,.site-v2 .why2 .reason::after{display:none}
.site-v2 .why2 .reason__n{position:static;display:block;width:auto;height:auto;
  background:none;box-shadow:none;font-family:var(--font-display);font-size:.8rem;
  font-weight:700;letter-spacing:.1em;color:var(--acc);margin:0 0 .5rem;
  line-height:1;white-space:nowrap;text-align:left}

.site-v2 .why2 .reason h3{margin:0 0 .42rem;font-size:1.05rem;color:var(--ink)}
.site-v2 .why2 .reason p{margin:0;font-size:.91rem;line-height:1.6;color:var(--ink-2)}
.site-v2 .standards2{margin-top:clamp(2.75rem,4.5vw,4rem);
  padding:clamp(1.75rem,3vw,2.5rem);background:var(--ground);
  border:1px solid var(--line);border-radius:14px}
.site-v2 .standards2__head{margin:0;font-size:clamp(1.15rem,1rem + .5vw,1.45rem)}
.site-v2 .standards2__intro{margin:.55rem 0 0;max-width:68ch;font-size:.93rem;
  line-height:1.6;color:var(--ink-2)}
.site-v2 .standards2__grid{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;
  gap:1.5rem clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site-v2 .standards2__item h3{margin:0 0 .3rem;font-size:.95rem;font-weight:650}
.site-v2 .standards2__item p{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-3)}
.site-v2 .standards2__item .kicker{display:block;color:var(--acc);font-weight:600;
  margin-bottom:.15rem}

/* photographs: one aspect ratio for all three plates, captions aligned */
.site-v2 .field2 .fieldwork__grid{align-items:stretch}
.site-v2 .field2 .plate{display:flex;flex-direction:column}
.site-v2 .field2 .plate>picture,
.site-v2 .field2 .plate--tall>picture,
.site-v2 .field2 .plate--wide>picture{aspect-ratio:4/3;display:block}
.site-v2 .field2 .plate img{width:100%;height:100%;object-fit:cover}
.site-v2 .field2 .plate figcaption{flex:1}
.site-v2 .field2 .plate__idx{color:var(--ink-3)}

/* ---- ITAD: the one place green is allowed --------------------------- */
.site-v2 .itad2 .sustain{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--eco);border-radius:14px;
  padding:clamp(1.75rem,3.5vw,3rem)}
.site-v2 .itad2 .sustain__inner{display:grid;gap:clamp(1.75rem,4vw,3.25rem);
  grid-template-columns:1.32fr .68fr;align-items:center}
.site-v2 .itad2 h2{font-size:clamp(1.5rem,1.15rem + 1.15vw,2.05rem);max-width:20ch}
.site-v2 .itad2 .sustain p{max-width:62ch}
.site-v2 .itad2 .overline{color:var(--eco)}
.site-v2 .itad2 .check-list li::before{background-color:color-mix(in srgb,var(--eco) 16%,transparent)}
.site-v2 .itad2 .btn--green{background:var(--eco);box-shadow:none}
.site-v2 .itad2 .btn--green:hover{background:#186236}
.site-v2 .itad2__photo{margin:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 18px 40px rgba(10,23,48,.11)}
.site-v2 .itad2__photo img{display:block;width:100%;height:100%;
  aspect-ratio:4/3;object-fit:cover}

/* ---- clients: drop the five gold stars, let the words carry it ------- */
.site-v2 .clients2 .testi-card__stars{display:none}
.site-v2 .clients2 .testi-card{background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:none}
.site-v2 .clients2 .testi-card blockquote{color:var(--ink);font-size:1rem;
  line-height:1.62;font-style:normal}
.site-v2 .clients2 .testi-card blockquote::before{content:"“";display:block;
  font-family:var(--font-display);font-size:2.4rem;line-height:.6;
  color:var(--line-2);margin-bottom:.5rem}
.site-v2 .clients2 .testi-card__service{background:transparent;color:var(--ink-3);
  border:1px solid var(--line);font-size:.74rem}
.site-v2 .clients2 .testi-card__name{color:var(--ink)}
.site-v2 .clients2 .testi-card__role{color:var(--ink-3)}

/* ---- coverage: map, four countries, then the city links -------------- */
.site-v2 .coverage2 .connect-card{background:var(--card);border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(10,23,48,.09)}
.site-v2 .coverage2 .grid-4{gap:0 clamp(1.5rem,3vw,2.5rem);margin-top:clamp(1.75rem,3vw,2.5rem)}
.site-v2 .coverage2 .location-card{background:none;border:0;border-top:1px solid var(--line);
  box-shadow:none;border-radius:0;padding:1.15rem 0 0}
.site-v2 .coverage2 .location-card h3{font-size:.98rem;margin:.45rem 0 .3rem}
.site-v2 .coverage2 .location-card p{font-size:.86rem;line-height:1.55;color:var(--ink-3)}
.site-v2 .coverage2 .location-card__flag{font-size:1.15rem}
.site-v2 .services2 .service-card{padding:clamp(1.25rem,2.2vw,1.6rem)}
.site-v2 .services2 .grid-3{gap:clamp(1rem,1.8vw,1.35rem)}
.site-v2 .coverage2 .mini-stat__num{color:var(--ink)}
.site-v2 .citylinks{margin-top:clamp(2.25rem,4vw,3.25rem);padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--line)}
.site-v2 .citylinks__head{margin:0;font-size:clamp(1.1rem,1rem + .4vw,1.35rem)}
.site-v2 .citylinks__intro{margin:.5rem 0 0;max-width:68ch;font-size:.92rem;
  line-height:1.6;color:var(--ink-2)}
.site-v2 .citylinks__row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.site-v2 .citylink{display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1rem;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink);font-size:.88rem;font-weight:550;
  text-decoration:none;transition:border-color .18s,color .18s,background .18s}
.site-v2 .citylink::after{content:"→";color:var(--ink-3);font-size:.9em;
  transition:transform .18s,color .18s}
.site-v2 .citylink:hover{border-color:var(--acc);color:var(--acc)}
.site-v2 .citylink:hover::after{color:var(--acc);transform:translateX(2px)}
.site-v2 .citylink h3{margin:0;font:inherit;color:inherit}

/* ---- insights: text-led cards, no placeholder colour blocks ---------- */
.site-v2 .insights2 .insight-card{background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:none;overflow:hidden}
.site-v2 .insights2 .insight-card:hover{border-color:var(--line-2);
  box-shadow:0 14px 32px rgba(10,23,48,.08)}
.site-v2 .insights2 .insight-card__thumb{background:var(--ground);
  border-bottom:1px solid var(--line);height:118px;overflow:hidden;
  display:block;position:relative}
.site-v2 .insights2 .insight-card__thumb svg{width:100%;height:100%;display:block;
  filter:saturate(.1) brightness(1.04) contrast(.96)}
.site-v2 .insights2 .insight-card__thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,23,48,.05),rgba(10,23,48,.16))}
[data-theme="dark"] .site-v2 .insights2 .insight-card__thumb svg{filter:saturate(.1) brightness(.62)}
.site-v2 .insights2 .insight-card__meta{color:var(--ink-3);font-size:.76rem;
  letter-spacing:.02em}
.site-v2 .insights2 .insight-card h3{font-size:1.02rem;line-height:1.36}

/* ---- closing CTA: the only dark band on the page -------------------- */
.site-v2 .cta2{background:var(--navy);color:#fff;
  padding-block:clamp(3.5rem,6vw,5.5rem)}
.site-v2 .cta2 .overline{color:#8fb4f5}
.site-v2 .cta2 h2{color:#fff;max-width:22ch}
.site-v2 .cta2 .cta-band__inner>div>*{color:inherit}
.site-v2 .cta2 p{color:rgba(255,255,255,.72);max-width:56ch}
.site-v2 .cta2 .cta-band{background:none!important;background-image:none!important;
  border:0;box-shadow:none;padding:0;border-radius:0}
.site-v2 .cta2 .cta-band::before,.site-v2 .cta2 .cta-band::after{display:none}
.site-v2 .cta2 .cta-band__inner{display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:1.25fr auto;align-items:center;padding:0}
@media (max-width:820px){.site-v2 .cta2 .cta-band__inner{grid-template-columns:1fr}}
.site-v2 .cta2 .btn--primary,
.site-v2 .cta2 .btn--primary span{background:#fff;color:#0a1730;box-shadow:none}
.site-v2 .cta2 .btn--primary span{background:none}
.site-v2 .cta2 .btn--primary:hover{background:#e8eef8}
.site-v2 .cta2 .btn--primary svg{color:#0a1730}

/* ---- narrow screens -------------------------------------------------- */
@media (max-width:900px){
  .site-v2 .hero__inner{grid-template-columns:1fr}
  .site-v2 .hero--v2 h1{max-width:20ch}
  .site-v2 .itad2 .sustain__inner{grid-template-columns:1fr}
  .site-v2 .itad2__photo{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .site-v2 .service-card,.site-v2 .citylink,.site-v2 .insight-card{transition:none}
}

/* ==========================================================================
   PART 2 — interior pages
   Everything below exists only on the other 41 pages. Same rules as the
   homepage: one accent, navy ink, warm grey ground, green for ITAD only.
   ========================================================================== */

/* ---- kill the six-hue rotation everywhere it reaches --------------------
   style.css lines 727-753 colour icon tiles, card top-bars and use-case
   panels by position in the grid. Matched specificity, declared later.     */
.site-v2 .grid > *:nth-of-type(6n+1).service-card::before,
.site-v2 .grid > *:nth-of-type(6n+2).service-card::before,
.site-v2 .grid > *:nth-of-type(6n+3).service-card::before,
.site-v2 .grid > *:nth-of-type(6n+4).service-card::before,
.site-v2 .grid > *:nth-of-type(6n+5).service-card::before,
.site-v2 .grid > *:nth-of-type(6n+6).service-card::before,
.site-v2 .grid > *:nth-of-type(6n+1).spec-card::before,
.site-v2 .grid > *:nth-of-type(6n+2).spec-card::before,
.site-v2 .grid > *:nth-of-type(6n+3).spec-card::before,
.site-v2 .grid > *:nth-of-type(6n+4).spec-card::before,
.site-v2 .grid > *:nth-of-type(6n+5).spec-card::before,
.site-v2 .grid > *:nth-of-type(6n+6).spec-card::before,
.site-v2 .grid > *:nth-of-type(6n+1).card-tile::before,
.site-v2 .grid > *:nth-of-type(6n+2).card-tile::before,
.site-v2 .grid > *:nth-of-type(6n+3).card-tile::before,
.site-v2 .grid > *:nth-of-type(6n+4).card-tile::before,
.site-v2 .grid > *:nth-of-type(6n+5).card-tile::before,
.site-v2 .grid > *:nth-of-type(6n+6).card-tile::before,
.site-v2 .grid > *:nth-of-type(6n+1).usecase::before,
.site-v2 .grid > *:nth-of-type(6n+2).usecase::before,
.site-v2 .grid > *:nth-of-type(6n+3).usecase::before,
.site-v2 .grid > *:nth-of-type(6n+4).usecase::before,
.site-v2 .grid > *:nth-of-type(6n+5).usecase::before,
.site-v2 .grid > *:nth-of-type(6n+6).usecase::before{
  background:var(--acc)}
.site-v2 .grid > *:nth-of-type(6n+1).usecase,
.site-v2 .grid > *:nth-of-type(6n+2).usecase,
.site-v2 .grid > *:nth-of-type(6n+3).usecase,
.site-v2 .grid > *:nth-of-type(6n+4).usecase,
.site-v2 .grid > *:nth-of-type(6n+5).usecase,
.site-v2 .grid > *:nth-of-type(6n+6).usecase{background:var(--ground)}
.site-v2 .grid > *:nth-of-type(3n+1) .testi-card__service,
.site-v2 .grid > *:nth-of-type(3n+2) .testi-card__service,
.site-v2 .grid > *:nth-of-type(3n+3) .testi-card__service{
  background:transparent;color:var(--ink-3);border-color:var(--line)}
.site-v2 .stats .stat:nth-of-type(1) .stat__num,
.site-v2 .stats .stat:nth-of-type(2) .stat__num,
.site-v2 .stats .stat:nth-of-type(3) .stat__num,
.site-v2 .stats .stat:nth-of-type(4) .stat__num{
  background:none!important;background-image:none!important;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--ink);color:var(--ink)}

/* ---- interior page header ---------------------------------------------- */
.site-v2 .page-hero{background:var(--ground);border-bottom:1px solid var(--line);
  padding-block:clamp(2.2rem,4vw,3.4rem) clamp(2.2rem,4vw,3.2rem)}
.site-v2 .page-hero::before{opacity:.35}
.site-v2 .page-hero h1{color:var(--ink);letter-spacing:-.028em;line-height:1.1;
  font-size:clamp(1.9rem,1.15rem + 2.35vw,2.85rem);max-width:24ch;text-wrap:balance}
.site-v2 .page-hero--center h1{margin-inline:auto}
.site-v2 .page-hero .lead{color:var(--ink-2);max-width:62ch;
  font-size:clamp(1.02rem,.98rem + .32vw,1.14rem);line-height:1.62}
.site-v2 .page-hero--center .lead{margin-inline:auto}
.site-v2 .breadcrumb{color:var(--ink-3);font-size:.82rem}
.site-v2 .breadcrumb a{color:var(--ink-3)}
.site-v2 .breadcrumb a:hover{color:var(--acc)}
.site-v2 .breadcrumb li[aria-current]{color:var(--ink-2)}

/* ---- long-form copy ----------------------------------------------------- */
.site-v2 .lead{color:var(--ink-2)}
.site-v2 .prose{max-width:70ch}
.site-v2 .prose p{color:var(--ink-2);font-size:1.05rem;line-height:1.76}
.site-v2 .prose h2{color:var(--ink);margin-top:2.5rem}
.site-v2 .prose h3{color:var(--ink)}
.site-v2 .prose a{color:var(--acc);text-underline-offset:.18em}
.site-v2 .prose li{color:var(--ink-2)}
.site-v2 .pull{border-left:3px solid var(--acc);background:var(--ground);
  border-radius:0 10px 10px 0;color:var(--ink);font-style:normal}
.site-v2 .callout{background:var(--ground);border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:0 10px 10px 0;color:var(--ink-2)}
.site-v2 .callout--green{border-left-color:var(--eco)}
.site-v2 .audience-note{color:var(--ink-3)}
.site-v2 .audience-note strong{color:var(--ink)}
.site-v2 .included-title{color:var(--ink-3)}
.site-v2 .check-list li::before{background-color:color-mix(in srgb,var(--acc) 12%,transparent)}
.site-v2 .check-list li{color:var(--ink-2)}

/* ---- cards on interior pages ------------------------------------------- */
.site-v2 .spec-card,.site-v2 .card-tile,.site-v2 .usecase,
.site-v2 .location-card,.site-v2 .office-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:none;transition:border-color .2s,transform .2s}
.site-v2 .spec-card:hover,.site-v2 .card-tile:hover,.site-v2 .office-card:hover{
  transform:translateY(-2px);border-color:var(--line-2);
  box-shadow:0 12px 28px rgba(10,23,48,.07)}
.site-v2 .spec-card h3,.site-v2 .card-tile h3,.site-v2 .usecase h3{color:var(--ink)}
.site-v2 .spec-card p,.site-v2 .card-tile p,.site-v2 .usecase p{color:var(--ink-2)}
.site-v2 .usecase__tag{color:var(--acc)}
.site-v2 .kicker{color:var(--acc)}
.site-v2 .service-card__go{color:var(--acc)}

/* ---- FAQ (33 pages) ----------------------------------------------------- */
.site-v2 .faq{max-width:74ch}
.site-v2 .faq-item{background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:none}
.site-v2 .faq-item[open]{border-color:var(--line-2);box-shadow:none;
  background:var(--ground)}
.site-v2 .faq-item summary{color:var(--ink);font-size:1rem;padding:1.05rem 1.25rem}
.site-v2 .faq-item summary .chev{color:var(--ink-3)}
.site-v2 .faq-item[open] summary .chev{color:var(--acc)}
.site-v2 .faq-item__body{color:var(--ink-2);font-size:.95rem;padding:0 1.25rem 1.2rem}

/* ---- insight / case-study article furniture ---------------------------- */
.site-v2 .article-meta{color:var(--ink-3)}
.site-v2 .article-cover{border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:none}
.site-v2 .article-cover img{display:block;width:100%;height:auto}
.site-v2 .article-share{border-top:1px solid var(--line);color:var(--ink-3)}
.site-v2 .article-share a{color:var(--ink-3)}
.site-v2 .article-share a:hover{color:var(--acc)}

/* ---- careers rows ------------------------------------------------------- */
.site-v2 .role-row{background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:none}
.site-v2 .role-row:hover{border-color:var(--acc);box-shadow:none;transform:none}
.site-v2 .role-row__icon{background:color-mix(in srgb,var(--acc) 9%,transparent);
  color:var(--acc)}
.site-v2 .role-row h3{color:var(--ink)}
.site-v2 .role-row p{color:var(--ink-3)}

/* ---- contact form ------------------------------------------------------- */
.site-v2 .form-card{background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:none}
.site-v2 .field label{color:var(--ink);font-weight:600}
.site-v2 .field input,.site-v2 .field select,.site-v2 .field textarea{
  background:var(--card);border:1px solid var(--line-2);border-radius:9px;
  color:var(--ink)}
.site-v2 .field input:focus,.site-v2 .field select:focus,.site-v2 .field textarea:focus{
  border-color:var(--acc);outline:2px solid color-mix(in srgb,var(--acc) 28%,transparent);
  outline-offset:1px}
.site-v2 .form-note,.site-v2 .contact-line{color:var(--ink-3)}
.site-v2 .contact-block h3{color:var(--ink)}

/* ---- 404 ---------------------------------------------------------------- */
.site-v2 .error-code{color:var(--line-2);
  background:none!important;background-image:none!important;
  -webkit-text-fill-color:currentColor}

/* ---- avatars: the portraits deserve more than 50px --------------------- */
.site-v2 .avatar{width:56px;height:56px;background:var(--navy)}
.site-v2 .avatar__img{object-position:50% 32%}
.site-v2 .testi-card__author{gap:.85rem}

/* ---- split layouts ------------------------------------------------------ */
.site-v2 .split{gap:clamp(1.75rem,4vw,3.25rem)}
.site-v2 .section--tint,.site-v2 .section--subtle{background:var(--ground)}
.site-v2 .section--vivid{background:var(--ground)}
.site-v2 .section--vivid h2,.site-v2 .section--vivid h3{color:var(--ink)}
.site-v2 .section--vivid p{color:var(--ink-2)}

/* ---- thumbnails: desaturate the decorative covers everywhere ------------
   These are flat brand-colour SVG panels. On the homepage they sat inside
   .insights2; on the insights index, case studies and article pages they
   are bare, so the rule has to be unscoped.                               */
.site-v2 .insight-card__thumb{background:var(--ground);
  border-bottom:1px solid var(--line);height:118px;overflow:hidden;
  display:block;position:relative}
.site-v2 .insight-card__thumb svg,
.site-v2 .insight-card__thumb img{width:100%;height:100%;display:block;
  object-fit:cover;filter:saturate(.1) brightness(1.04) contrast(.96)}
.site-v2 .insight-card__thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,23,48,.05),rgba(10,23,48,.16))}
[data-theme="dark"] .site-v2 .insight-card__thumb svg,
[data-theme="dark"] .site-v2 .insight-card__thumb img{filter:saturate(.1) brightness(.62)}
.site-v2 .article-cover svg,.site-v2 .article-cover img{
  filter:saturate(.12) brightness(1.03) contrast(.97)}

/* ---- closing CTA band: one flat navy panel, on every page --------------
   It carried a blue-to-purple gradient that swallowed its own heading.    */
.site-v2 .cta-band{background:var(--navy)!important;background-image:none!important;
  border:0;border-radius:16px;box-shadow:none;color:#fff;
  padding:clamp(1.9rem,4vw,3.1rem)}
.site-v2 .cta-band::before,.site-v2 .cta-band::after{display:none!important}
.site-v2 .cta-band h2,.site-v2 .cta-band h3{color:#fff}
.site-v2 .cta-band p{color:rgba(255,255,255,.74)}
.site-v2 .cta-band .overline,.site-v2 .cta-band .overline--light{color:#8fb4f5}
.site-v2 .cta-band .btn--primary,
.site-v2 .cta-band .btn--primary span{background:#fff;color:#0a1730;box-shadow:none}
.site-v2 .cta-band .btn--primary span{background:none}
.site-v2 .cta-band .btn--primary svg{color:#0a1730}
.site-v2 .cta-band .btn--primary:hover{background:#e8eef8}
.site-v2 .cta-band .btn--ghost,
.site-v2 .cta-band .btn--outline-white{border-color:rgba(255,255,255,.42);color:#fff}
.site-v2 .cta-band .btn--ghost:hover,
.site-v2 .cta-band .btn--outline-white:hover{background:rgba(255,255,255,.12)}
.site-v2 .cta-band__inner{display:grid;gap:clamp(1.4rem,3vw,2.75rem);
  grid-template-columns:1.25fr auto;align-items:center}
@media (max-width:820px){.site-v2 .cta-band__inner{grid-template-columns:1fr}}

/* ==========================================================================
   PART 3 — contrast repairs found by a scripted WCAG sweep of every page
   in both themes. Each of these was a component built for a vivid parent
   that now sits on a neutral one.
   ========================================================================== */

/* white pill/button text left stranded on a white button face */
.site-v2 .cta-band .btn--primary,
.site-v2 .cta-band .btn--primary *{color:#0a1730!important}
.site-v2 .cta-band .btn--primary svg{color:#0a1730!important}

/* the flagship badge sits on navy wherever it appears, not only on the home page */
.site-v2 .service-card--feature .pill,
.site-v2 .service-card--feature .pill--green{
  background:rgba(95,201,138,.16);color:#8fe0b0;
  border:1px solid rgba(143,224,176,.34)}
.site-v2 .service-card--feature .pill .dot{background:#8fe0b0}

/* numbered step markers */
.site-v2 .service-detail__num{background:var(--navy);color:#fff;
  background-image:none;-webkit-text-fill-color:#fff}
.site-v2 .service-detail__icon{background:color-mix(in srgb,var(--acc) 10%,transparent)!important;
  background-image:none!important;color:var(--acc)}

/* ghost pills: readable in both themes */
.site-v2 .pill--ghost{background:transparent;color:var(--ink-2);
  border:1px solid var(--line-2)}
[data-theme="dark"] .site-v2 .pill--ghost{color:var(--ink-2);
  border-color:var(--line-2)}
.site-v2 .pill{color:var(--ink-2)}

/* outline-white buttons only make sense on a dark panel */
.site-v2 .btn--outline-white{border:1px solid var(--line-2);color:var(--ink)}
.site-v2 .btn--outline-white:hover{background:var(--ground);border-color:var(--acc);
  color:var(--acc)}
.site-v2 .cta-band .btn--outline-white,
.site-v2 .section--vivid .btn--outline-white{border-color:rgba(255,255,255,.42);color:#fff}

/* the ITAD button keeps a dark green face in both themes so white text holds */
.site-v2 .btn--green,.site-v2 .btn--green:visited{
  background:#1f7a45!important;background-image:none!important;color:#fff;box-shadow:none}
.site-v2 .btn--green:hover{background:#186236!important}
.site-v2 .btn--green span,.site-v2 .btn--green svg{color:#fff}

/* careers requirement rows and the hero footnote */
.site-v2 .req{color:var(--ink-2)}
[data-theme="dark"] .site-v2 .hero__note,
[data-theme="dark"] .site-v2 .caplist__item p,
[data-theme="dark"] .site-v2 .standards2__item p,
[data-theme="dark"] .site-v2 .proofbar .stat__label{color:var(--ink-2)}

/* ---- primary button: white on #1a73e8 is 3.68:1, under AA for body text.
   A slightly deeper blue clears 4.5:1 and stays inside the brand family. */
.site-v2 .btn--primary{background:#1558b8;background-image:none;color:#fff;
  box-shadow:0 10px 22px rgba(21,88,184,.22)}
.site-v2 .btn--primary:hover{background:#12489a;background-image:none}
.site-v2 .btn--primary span,.site-v2 .btn--primary svg{color:#fff}

/* ---- feature-card link colour must not leak onto light cards ----------- */
.site-v2 .service-card:not(.service-card--feature) .service-card__go,
.site-v2 .service-card:not(.service-card--feature) .btn--text{color:var(--acc)}
.site-v2 .service-card--feature .service-card__go,
.site-v2 .service-card--feature .btn--text{color:#9dc0ff}
.site-v2 .service-card--feature::before{background:rgba(255,255,255,.22);height:1px}

/* ---- the flagship badge, wherever the navy card appears ---------------- */
.site-v2 .service-card:not(.service-card--feature) .pill--green{
  background:transparent;color:var(--eco);
  border:1px solid color-mix(in srgb,var(--eco) 34%,transparent)}
.site-v2 .service-card:not(.service-card--feature) .pill--green .dot{background:var(--eco)}

/* ---- 404 numeral ------------------------------------------------------- */
.site-v2 .error-code{-webkit-text-fill-color:var(--line-2);color:var(--line-2)}
[data-theme="dark"] .site-v2 .error-code{-webkit-text-fill-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.22)}

/* ==========================================================================
   PART 4 — dark surfaces
   `.site-v2 h2/h3/p` set the navy ink colour at the same specificity as
   style.css's own `.service-card--feature h3 {color:#fff}` and, being later
   in source order, won these ties — which put navy text on navy panels.
   Anything with a dark face has to restate white here.
   ========================================================================== */
.site-v2 .service-card--feature h2,
.site-v2 .service-card--feature h3,
.site-v2 .service-card--feature h4,
.site-v2 .cta-band h2,.site-v2 .cta-band h3,
.site-v2 .connect-card--dark h3{color:#fff}
.site-v2 .service-card--feature p,
.site-v2 .service-card--feature li{color:rgba(255,255,255,.80)}
.site-v2 .service-card--feature .overline,
.site-v2 .service-card--feature strong{color:#fff}
.site-v2 .service-card--feature{background:var(--navy)!important;
  background-image:none!important;border-color:var(--navy)}

/* white-outline buttons: only white when the panel behind them is dark */
.site-v2 .btn--outline-white,
.site-v2 .btn--outline-white *{color:var(--ink)}
.site-v2 .btn--outline-white{background:transparent;
  border:1px solid var(--line-2)}
.site-v2 .cta-band .btn--outline-white,
.site-v2 .cta-band .btn--outline-white *,
.site-v2 .service-card--feature .btn--outline-white,
.site-v2 .service-card--feature .btn--outline-white *{color:#fff}
.site-v2 .cta-band .btn--outline-white{border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.08)}

/* 404 numeral: decorative, but still clears 3:1 as large text */
.site-v2 .error-code{-webkit-text-fill-color:rgba(10,23,48,.42);color:rgba(10,23,48,.42)}
[data-theme="dark"] .site-v2 .error-code{-webkit-text-fill-color:rgba(255,255,255,.40);
  color:rgba(255,255,255,.40)}

/* every dark panel in style.css, in one place: .service-card--feature,
   .cta-band, .mission-block, .mega__lead (.site-footer sits outside main) */
.site-v2 .mission-block,
.site-v2 .mega__lead{background:var(--navy)!important;background-image:none!important;
  border-color:var(--navy)}
.site-v2 .mission-block h2,.site-v2 .mission-block h3,.site-v2 .mission-block h4,
.site-v2 .mega__lead h2,.site-v2 .mega__lead h3{color:#fff}
.site-v2 .mission-block p,.site-v2 .mission-block li,
.site-v2 .mission-block span,.site-v2 .mission-block div,
.site-v2 .mega__lead p{color:rgba(255,255,255,.82)}
.site-v2 .mission-block strong,.site-v2 .mission-block b{color:#fff}
.site-v2 .mission-block .overline{color:#8fb4f5}
.site-v2 .mission-block a:not(.btn){color:#9dc0ff}
.site-v2 .mission-block .btn--outline-white,
.site-v2 .mission-block .btn--outline-white *,
.site-v2 .mega__lead .btn--outline-white,
.site-v2 .mega__lead .btn--outline-white *{color:#fff}
.site-v2 .mission-block .btn--outline-white{border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.08)}
.site-v2 .mission-block .check-list li::before{background-color:rgba(255,255,255,.16)}

/* 404 numeral, comfortably past 3:1 as large text */
.site-v2 .error-code{-webkit-text-fill-color:rgba(10,23,48,.55);color:rgba(10,23,48,.55)}
[data-theme="dark"] .site-v2 .error-code{-webkit-text-fill-color:rgba(255,255,255,.52);
  color:rgba(255,255,255,.52)}

/* testimonial and insight cards: white everywhere, not only on the home page.
   about.html and insights.html each carried one navy-gradient variant, which
   left dark ink on a dark card once the ink tokens applied. */
.site-v2 .testi-card,.site-v2 .insight-card{
  background:var(--card)!important;background-image:none!important;
  border:1px solid var(--line);border-radius:12px;box-shadow:none}
.site-v2 .testi-card:hover,.site-v2 .insight-card:hover{
  border-color:var(--line-2);box-shadow:0 14px 32px rgba(10,23,48,.08)}
.site-v2 .testi-card blockquote,.site-v2 .testi-card p{color:var(--ink)}
.site-v2 .testi-card__name,.site-v2 .insight-card h3{color:var(--ink)}
.site-v2 .testi-card__role,.site-v2 .insight-card p,
.site-v2 .insight-card__meta{color:var(--ink-3)}
.site-v2 .testi-card__stars{display:none}
.site-v2 .testi-card .btn--outline-white,
.site-v2 .testi-card .btn--outline-white *,
.site-v2 .insight-card .btn--outline-white,
.site-v2 .insight-card .btn--outline-white *{color:var(--ink)}
.site-v2 .testi-card .btn--outline-white,
.site-v2 .insight-card .btn--outline-white{border:1px solid var(--line-2);
  background:transparent}
.site-v2 .testi-card .btn--outline-white:hover,
.site-v2 .insight-card .btn--outline-white:hover{border-color:var(--acc);
  background:var(--ground)}
.site-v2 .testi-card .overline{color:var(--ink-3)}
/* those two cards also carried white headings and body copy for their old
   navy face; restate the ink colours now that the face is white */
.site-v2 .testi-card h2,.site-v2 .testi-card h3,.site-v2 .testi-card h4,
.site-v2 .insight-card h2,.site-v2 .insight-card h4{color:var(--ink)}
.site-v2 .testi-card span,.site-v2 .testi-card li,.site-v2 .testi-card div,
.site-v2 .insight-card span,.site-v2 .insight-card li{color:var(--ink-2)}
.site-v2 .testi-card a:not(.btn),.site-v2 .insight-card a:not(.btn){color:var(--acc)}
/* the initials avatar keeps white type on its navy disc */
.site-v2 .avatar__init,.site-v2 .testi-card .avatar__init{color:#fff!important}
/* and the two ex-navy cards need their heading/body colour forced, because
   style.css sets them from a variant selector that outranks the plain one */
.site-v2 .testi-card > h3,.site-v2 .testi-card > h2,
.site-v2 .insight-card > h3,.site-v2 .insight-card > h2{color:var(--ink)!important}
.site-v2 .testi-card > p,.site-v2 .insight-card > p{color:var(--ink-2)!important}

/* ---- reCAPTCHA v3 -------------------------------------------------------
   v3 has no widget. Google permits hiding the floating badge provided the
   disclosure below appears in the form, which it does. Hiding it also stops
   it colliding with the WhatsApp button in the same corner.               */
.grecaptcha-badge{visibility:hidden}
.site-v2 .recaptcha-wrap{margin-top:.4rem}
.site-v2 .recaptcha-note{margin:0;font-size:.78rem;line-height:1.5;color:var(--ink-3)}
.site-v2 .recaptcha-note a{color:var(--ink-3);text-decoration:underline}
.site-v2 .recaptcha-note a:hover{color:var(--acc)}

/* ==========================================================================
   PART 5 — SERVICE-PAGE DEPTH COMPONENTS                    10 Sep 2026
   Added for the content-depth programme. Three components, all scoped to
   .site-v2 so css/style.css stays untouched and the rollback is still
   "delete the link".

   Why these exist: the competitor benchmark found that NO provider in this
   market — regional or global, including Hemmersbach, Sims Lifecycle, CWG
   and Inlaks — publishes response-time commitments, engineer credentials, or
   a written engagement sequence. Those three things are the differentiator,
   and each one needs a component the site did not have.
   ========================================================================== */

/* ---- Response-time / spec table -----------------------------------------
   Tables are the one element allowed to be wider than the page, inside their
   own scroll container. Everything else must reflow.                       */
.site-v2 .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:1.6rem;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.site-v2 .svc-table{width:100%;border-collapse:collapse;font-size:.94rem;
  min-width:44rem}   /* narrower than this and the time column wraps to three
                        lines, tripling every row height on a phone. The wrap
                        scrolls, so a generous min-width costs nothing.      */
.site-v2 .svc-table caption{caption-side:bottom;text-align:left;padding:.85rem 1.15rem;
  font-size:.8rem;line-height:1.55;color:var(--ink-3);border-top:1px solid var(--line)}
.site-v2 .svc-table th,.site-v2 .svc-table td{
  padding:.78rem 1.15rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.site-v2 .svc-table thead th{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);background:var(--ground);white-space:nowrap}
.site-v2 .svc-table tbody th{font-weight:650;color:var(--ink);white-space:nowrap}
.site-v2 .svc-table tbody td{color:var(--ink-2)}
/* The three right-hand columns are short, fixed phrases. Letting them wrap
   buys nothing and makes every row on a phone three lines deep.            */
.site-v2 .svc-table td:nth-child(3),
.site-v2 .svc-table td:nth-child(4),
.site-v2 .svc-table td:last-child{white-space:nowrap}
.site-v2 .svc-table tbody tr:last-child th,
.site-v2 .svc-table tbody tr:last-child td{border-bottom:0}
.site-v2 .svc-table .t-strong{color:var(--ink);font-weight:650}

/* ---- Credential list ----------------------------------------------------
   Hankaka holds no company-level certification yet, so this block names the
   credentials the ENGINEERS hold. That is the honest claim, and it is still
   more than any competitor page in the benchmark states.                   */
.site-v2 .cred-list{list-style:none;margin:1.2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem}
.site-v2 .cred-list li{
  font-size:.82rem;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:.42rem .9rem;
  background:var(--card)}

/* ---- Numbered engagement sequence --------------------------------------- */
.site-v2 .step-list{list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:step;
  display:grid;gap:1.15rem}
@media(min-width:820px){.site-v2 .step-list{grid-template-columns:repeat(2,1fr);gap:1.5rem 2.2rem}}
.site-v2 .step-list li{counter-increment:step;position:relative;padding-left:3rem}
.site-v2 .step-list li::before{
  content:counter(step);position:absolute;left:0;top:-.1rem;
  width:2.1rem;height:2.1rem;border-radius:9px;
  display:grid;place-items:center;
  font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,transparent)}
.site-v2 .step-list h3{font-size:1rem;margin:0 0 .3rem;line-height:1.3}
.site-v2 .step-list p{margin:0;font-size:.93rem;line-height:1.62}

/* ==========================================================================
   PART 6 — NAVIGATION BREAKPOINT REPAIR                     10 Sep 2026
   Found during QA of the expanded IT Support page, but it is NOT a fault of
   that page: EVERY page on the site scrolls sideways between roughly 745px
   and 900px wide.

   Cause: the desktop navigation needs about 886px to lay out, but the mobile
   hamburger only takes over at max-width:720px (css/style.css line 492). In
   the gap the nav simply overflows the viewport and the whole document
   scrolls horizontally. That covers iPad portrait (810px), iPad Mini (768px),
   most Android tablets, and any desktop window dragged narrow. Search Console
   reports this as "Content wider than screen" under mobile usability.

   Repaired here rather than in style.css so the rollback story is unchanged:
   delete the link to this file and the site returns to exactly what it was.
   These selectors are deliberately NOT scoped to .site-v2 - the header sits
   outside <main>, which is where that class lives. This is the only block in
   this file that reaches outside .site-v2, and it is confined to the nav.

   js/main.js carries the matching 960 constant for the scroll lock and the
   resize auto-close. If one moves, the other must move with it.
   ========================================================================== */
@media (max-width:960px){
  .nav__toggle{display:grid}
  .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:.25rem;margin:0;padding:1rem var(--gutter) 1.5rem;background:var(--bg);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease-out),visibility .25s;
    max-height:calc(100vh - 72px);overflow-y:auto}
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .nav__link{padding:.85rem .8rem;font-size:1.02rem;border-radius:var(--r-md)}
  .nav__link.is-active{background:var(--blue-50)}
  [data-theme="dark"] .nav__link.is-active{background:rgba(66,133,244,.14)}
  .nav__link.is-active::after{content:none}
  .nav__tools{margin-left:auto}
  .nav__cta{margin-top:.6rem}
  .nav__cta .btn{width:100%}
}

/* --- French navigation needs more room than English ----------------------
   French runs roughly 20% longer than English for the same nav labels, so on
   the /fr/ tree the desktop nav needs about 1012px, not 886px. Measured, not
   estimated. js/i18n.js sets lang="fr" on <html> when the visitor toggles
   language, so this also catches an English page switched to French at
   runtime rather than only the static French pages.
   Kept as a separate block so English laptops at 1024-1120px keep the full
   desktop nav instead of being pushed into a hamburger they do not need.  */
@media (max-width:1120px){
  html[lang="fr"] .nav__toggle{display:grid}
  html[lang="fr"] .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;
    align-items:stretch;gap:.25rem;margin:0;padding:1rem var(--gutter) 1.5rem;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease-out),visibility .25s;
    max-height:calc(100vh - 72px);overflow-y:auto}
  html[lang="fr"] .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  html[lang="fr"] .nav__link{padding:.85rem .8rem;font-size:1.02rem;border-radius:var(--r-md)}
  html[lang="fr"] .nav__link.is-active{background:var(--blue-50)}
  html[lang="fr"] .nav__link.is-active::after{content:none}
  html[lang="fr"] .nav__tools{margin-left:auto}
  html[lang="fr"] .nav__cta{margin-top:.6rem}
  html[lang="fr"] .nav__cta .btn{width:100%}
}

/* --- Very small screens: let grid tracks actually shrink ------------------
   Grid and flex children default to min-width:auto, so one child that cannot
   shrink below its content forces its whole track wider than the viewport and
   the page scrolls sideways. Measured at 320px: the contact grid held a
   310px track inside a 283px container, and the French hero held a 384px one.
   min-width:0 lets the track do its job; break-word handles the long
   French compounds that caused it.                                        */
@media (max-width:560px){
  .site-v2 .contact-grid > *,
  .site-v2 .hero__content,
  .site-v2 .hero__content > *,
  .site-v2 .split > *{min-width:0}
  .site-v2 h1,.site-v2 h2,.site-v2 .pill,.site-v2 .hero__sub{overflow-wrap:break-word}
  /* The CTA band stacks to one column here, but its children still refuse to
     shrink, and a button label like "Demander une consultation de service" is
     wider than a 320px phone on one line. Buttons keep nowrap everywhere else;
     at this size a two-line button beats a page that scrolls sideways.     */
  .site-v2 .cta-band__inner,
  .site-v2 .cta-band__inner > *{min-width:0}
  .site-v2 .btn{white-space:normal;max-width:100%}
}

/* --- Coverage card stats on the narrowest phones --------------------------
   .connect-card__stats lays out its stat tiles in fixed columns. On a 320px
   screen the last tile is clipped by the card's own overflow:hidden - the
   page cannot scroll sideways (body clips it), so the content is simply lost
   rather than reachable. Letting the tiles wrap keeps all of them visible. */
@media (max-width:400px){
  .site-v2 .connect-card__stats{grid-template-columns:1fr}
}