/* ==========================================================================
   Talanta 10 — site stylesheet
   Palette sampled from the logo: petrol #15434E, teal #128384, mist #92C0C0.
   Copper #B26A3C is a signal accent only. Type is Poppins throughout, which
   matches the wordmark.
   ========================================================================== */

:root{
  --petrol:#15434E;
  --petrol-deep:#0D2E36;
  --teal:#128384;
  --teal-bright:#17A0A1;
  --mist:#92C0C0;
  --mist-pale:#DCE9E9;
  --paper:#F5F8F8;
  --copper:#B26A3C;
  --ink:#1E2A2E;
  --grey:#5C6E73;
  --hair:#C9DADA;

  --wrap:1180px;
  --gut:clamp(20px, 5vw, 48px);
  --sec:clamp(64px, 9vw, 120px);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
body{
  margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;font-size:17px;line-height:1.65;color:var(--grey);background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--teal);text-decoration:none;}
a:hover{color:var(--petrol);}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.section{padding:var(--sec) 0;}
.section--tight{padding:calc(var(--sec) * .62) 0;}
.dark{background:var(--petrol);color:#CBDCDC;}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}
.deep{background:var(--petrol-deep);color:#CBDCDC;}
.deep h1,.deep h2,.deep h3,.deep h4{color:#fff;}
.pale{background:var(--paper);}
.mist{background:var(--mist-pale);}

.grid{display:grid;gap:clamp(20px,3vw,34px);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start;}
@media (max-width:940px){
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:1fr;}
}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--petrol);font-weight:300;line-height:1.15;margin:0 0 .5em;}
h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:-.01em;}
h2{font-size:clamp(27px,3.6vw,42px);letter-spacing:-.005em;}
h3{font-size:clamp(19px,2vw,23px);font-weight:500;line-height:1.3;}
h4{font-size:17px;font-weight:500;line-height:1.35;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
.lead{font-size:clamp(18px,2.1vw,22px);line-height:1.55;color:var(--petrol);font-weight:300;}
.dark .lead,.deep .lead{color:#DCEAEA;}
.small{font-size:15px;line-height:1.6;}
.tiny{font-size:13px;line-height:1.55;}
.measure{max-width:62ch;}
.measure-sm{max-width:48ch;}

.eyebrow{
  display:block;font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin:0 0 18px;
}
.dark .eyebrow,.deep .eyebrow{color:var(--mist);}

.cap-title{text-transform:uppercase;letter-spacing:.045em;font-weight:300;}

.rule{width:64px;height:2px;background:var(--petrol);margin:0 0 22px;}
.dark .rule,.deep .rule{background:var(--mist);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 28px;border-radius:var(--r);border:1.5px solid var(--petrol);
  background:var(--petrol);color:#fff;transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--teal);border-color:var(--teal);color:#fff;}
.btn--ghost{background:transparent;color:var(--petrol);}
.btn--ghost:hover{background:var(--petrol);color:#fff;}
.btn--light{background:var(--mist);border-color:var(--mist);color:var(--petrol-deep);}
.btn--light:hover{background:#fff;border-color:#fff;color:var(--petrol-deep);}
.btn--outline-light{background:transparent;border-color:rgba(146,192,192,.55);color:#fff;}
.btn--outline-light:hover{background:var(--mist);border-color:var(--mist);color:var(--petrol-deep);}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

.arrow{font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
  display:inline-flex;align-items:center;gap:8px;}
.arrow::after{content:"→";transition:transform .2s;}
.arrow:hover::after{transform:translateX(4px);}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--hair);
}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:78px;}
.site-head .logo img{height:38px;width:auto;}
.nav{display:flex;align-items:center;gap:clamp(14px,1.5vw,26px);}
.nav a{
  font-size:14px;font-weight:400;letter-spacing:.06em;color:var(--petrol);
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
html[lang="sw"] .nav a,html[lang="fr"] .nav a{letter-spacing:.02em;font-size:13.5px;}
.nav a:hover{border-bottom-color:var(--mist);}
.nav a[aria-current="page"]{border-bottom-color:var(--teal);font-weight:500;}
.nav a.btn{color:#fff;border-bottom:0;padding:12px 22px;font-size:12.5px;}
.nav a.btn:hover{color:#fff;}
.navtoggle{display:none;background:none;border:0;padding:10px;cursor:pointer;}
.navtoggle span{display:block;width:24px;height:2px;background:var(--petrol);margin:5px 0;transition:.25s;}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:1140px){
  .navtoggle{display:block;}
  .nav{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--hair);padding:8px var(--gut) 28px;
    transform:translateY(-120%);transition:transform .3s ease;box-shadow:0 20px 40px rgba(21,67,78,.08);
  }
  .nav[data-open="true"]{transform:translateY(0);}
  .nav a{padding:15px 0;border-bottom:1px solid var(--hair);font-size:16px;}
  .nav .btn{margin-top:20px;justify-content:center;}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--petrol);color:#DCEAEA;}
.hero .scatter{position:absolute;inset:0;}
.hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,var(--petrol) 0%,rgba(21,67,78,.96) 42%,rgba(21,67,78,.55) 76%,rgba(21,67,78,.15) 100%);
}
.hero .wrap{position:relative;padding-top:clamp(80px,12vw,140px);padding-bottom:clamp(80px,12vw,140px);}
.hero h1{color:#fff;max-width:16ch;}
.hero .lead{max-width:54ch;margin-top:26px;color:#DCEAEA;}
.hero .kicker{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:52px;padding-top:26px;
  border-top:1px solid rgba(146,192,192,.35);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mist);
}
.hero--sub .wrap{padding-top:clamp(64px,8vw,96px);padding-bottom:clamp(64px,8vw,96px);}
@media (max-width:520px){
  .hero .kicker{font-size:10.5px;letter-spacing:.14em;gap:8px 18px;}
}
.hero--sub h1{max-width:20ch;}

/* ---------- cards ---------- */
.card{background:var(--paper);border-top:3px solid var(--teal);padding:clamp(24px,3vw,34px);height:100%;}
.card h3{margin-bottom:12px;}
.card p{font-size:15.5px;line-height:1.6;}
.card--mist{background:var(--mist-pale);border-top-color:var(--petrol);}
.card--dark{background:var(--petrol);border-top-color:var(--mist);color:#C3D6D6;}
.card--dark h3{color:#fff;}
.card--copper{border-top-color:var(--copper);}
.card--copper h3{color:var(--copper);}
.card--glass{background:rgba(255,255,255,.06);border-top-color:var(--mist);color:#C3D6D6;}
.card--glass h3{color:#fff;}
.card--link{display:block;transition:transform .2s, box-shadow .2s;}
.card--link:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(21,67,78,.10);}

/* numbered service rows */
.rows{border-top:1px solid var(--hair);}
.row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 28px;
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--hair);align-items:start;}
.row .num{font-size:26px;font-weight:300;color:var(--mist);line-height:1;}
.row h3{margin-bottom:10px;}
.row p{font-size:16px;}
@media (max-width:620px){
  .row{grid-template-columns:1fr;gap:10px;}
}

/* tick lists */
.ticks{list-style:none;margin:0;padding:0;}
.ticks li{position:relative;padding-left:24px;margin-bottom:14px;font-size:16px;line-height:1.55;}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--mist);}
.ticks li b,.ticks li strong{font-weight:500;color:var(--petrol);}
.dark .ticks li b,.deep .ticks li b,.card--dark .ticks li b,.card--glass .ticks li b{color:#fff;}
.dark .ticks li::before,.deep .ticks li::before{background:var(--teal-bright);}

/* trio: problem / tools / difference */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);
  padding-top:34px;border-top:2px solid var(--teal);margin-top:40px;}
.trio h4{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;}
.trio p{font-size:15px;line-height:1.6;}
.deep .trio,.dark .trio{border-top-color:var(--mist);}
.deep .trio h4,.dark .trio h4{color:var(--mist);}
@media (max-width:820px){.trio{grid-template-columns:1fr;gap:26px;}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);}
.stat .big{font-size:clamp(38px,5vw,56px);font-weight:200;color:var(--mist);line-height:1;letter-spacing:-.02em;}
.stat .cap{font-size:13px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:#9FBFBF;margin-top:14px;line-height:1.45;}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr);}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair);color:var(--petrol);padding:8px 16px;border-radius:40px;}
.chip--solid{background:var(--copper);border-color:var(--copper);color:#fff;}
.chip--light{border-color:rgba(146,192,192,.5);color:var(--mist);}

/* project list */
.projects{border-top:1px solid var(--hair);}
.project{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,150px);
  gap:0 32px;padding:28px 0;border-bottom:1px solid var(--hair);align-items:start;}
.project .client{font-size:18px;font-weight:500;color:var(--petrol);line-height:1.3;}
.project .client span{display:block;font-size:11.5px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist);margin-top:8px;}
.project h4{margin-bottom:8px;}
.project p{font-size:15.5px;}
.project .tags{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);text-align:right;line-height:1.7;}
@media (max-width:900px){
  .project{grid-template-columns:1fr;gap:14px;}
  .project .tags{text-align:left;}
}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.5vw,30px);}
.step .n{font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--mist);}
.step h4{margin:12px 0 8px;}
.step p{font-size:14.5px;line-height:1.55;}
@media (max-width:940px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}

/* pricing packs */
.pack{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--mist);padding:clamp(24px,3vw,34px);height:100%;}
.pack--feature{border-top-color:var(--copper);box-shadow:0 18px 40px rgba(21,67,78,.08);}
.pack h3{margin-bottom:6px;}
.pack .tagline{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:20px;}

/* forms */
.field{margin-bottom:22px;}
.field label{display:block;font-size:12.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--petrol);margin-bottom:9px;}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px;
}
.field textarea{min-height:150px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;}
.formnote{font-size:13px;color:var(--grey);margin-top:16px;}

/* contact list */
.cinfo{list-style:none;margin:0;padding:0;}
.cinfo li{padding:18px 0;border-bottom:1px solid rgba(146,192,192,.3);}
.cinfo .k{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin-bottom:8px;}
.cinfo .v{font-size:18px;color:#fff;font-weight:300;line-height:1.6;}
.cinfo .v a{color:#fff;border-bottom:1px solid rgba(146,192,192,.5);}
.cinfo .v a:hover{color:var(--mist);}

/* callout */
.callout{border-left:3px solid var(--mist);background:var(--paper);padding:clamp(22px,3vw,30px);}
.dark .callout,.deep .callout{background:rgba(146,192,192,.12);border-left-color:var(--mist);color:#DCEAEA;}

/* footer */
.site-foot{background:var(--petrol-deep);color:#9FBFBF;padding:clamp(56px,7vw,86px) 0 40px;}
.site-foot h4{color:#fff;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;}
.site-foot a{color:#B7CDCD;font-size:15px;}
.site-foot a:hover{color:#fff;}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li{margin-bottom:11px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,48px);}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr;}}
.foot-logo img{height:38px;margin-bottom:22px;}
.foot-base{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid rgba(146,192,192,.22);
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#6E9494;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;}}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--petrol);color:#fff;padding:12px 20px;z-index:100;}
.skip:focus{left:0;}

/* ==========================================================================
   AI & Data Readiness Assessment
   ========================================================================== */
.as-card{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--teal);
  padding:clamp(26px,4vw,48px);margin-bottom:24px;}
.as-card h2{margin-bottom:14px;}
.as-card h3{margin-bottom:18px;}

.as-progress{height:3px;background:var(--mist-pale);margin-bottom:28px;}
.as-progress div{height:3px;background:var(--teal);transition:width .3s ease;}
.as-meta{display:flex;justify-content:space-between;gap:16px;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:20px;}
.as-q{font-size:clamp(22px,3vw,32px);margin-bottom:30px;}

.as-opts{display:grid;gap:12px;}
.as-opt{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  font:inherit;font-size:16.5px;line-height:1.5;color:var(--petrol);cursor:pointer;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);
  padding:18px 22px;transition:border-color .18s,background .18s,transform .18s;}
.as-opt:hover{border-color:var(--teal);background:#fff;transform:translateX(3px);}
.as-opt .as-dot{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--mist);margin-top:5px;}
.as-opt.is-on{border-color:var(--teal);background:#fff;}
.as-opt.is-on .as-dot{background:var(--teal);border-color:var(--teal);}
.as-nav{margin-top:26px;display:flex;justify-content:space-between;align-items:center;}

.as-consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55;
  color:var(--grey);margin-top:6px;}
.as-consent input{margin-top:4px;flex:none;width:17px;height:17px;accent-color:var(--teal);}

.as-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;}
.as-score{text-align:center;padding-left:32px;border-left:1px solid var(--hair);}
.as-score .pc{font-size:clamp(48px,7vw,74px);font-weight:200;color:var(--teal);line-height:1;letter-spacing:-.03em;}
.as-score .pc span{font-size:.4em;font-weight:300;}
.as-score .lb{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-top:10px;}
@media (max-width:720px){
  .as-head{grid-template-columns:1fr;}
  .as-score{padding-left:0;border-left:0;border-top:1px solid var(--hair);padding-top:24px;text-align:left;}
}

.as-ladder{border-top:1px solid var(--hair);}
.as-rung{display:grid;grid-template-columns:44px 130px minmax(0,1fr) 110px;gap:0 18px;
  padding:16px 0;border-bottom:1px solid var(--hair);align-items:baseline;}
.as-rung .n{font-size:16px;font-weight:300;color:var(--mist);}
.as-rung .nm{font-size:17px;font-weight:500;color:var(--petrol);}
.as-rung .bl{font-size:14.5px;line-height:1.5;}
.as-rung .mk{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);text-align:right;}
.as-rung.is-on{background:var(--paper);box-shadow:inset 3px 0 0 var(--teal);padding-left:14px;padding-right:14px;margin:0 -14px;}
.as-rung.is-on .nm{color:var(--teal);}
@media (max-width:720px){
  .as-rung{grid-template-columns:40px minmax(0,1fr);gap:4px 14px;}
  .as-rung .bl{grid-column:2;}
  .as-rung .mk{grid-column:2;text-align:left;}
}

.as-dims{display:grid;gap:20px;}
.as-dim-h{display:flex;justify-content:space-between;font-size:15px;color:var(--petrol);
  font-weight:400;margin-bottom:9px;}
.meter{display:flex;gap:6px;align-items:center;}
.meter i{width:12px;height:12px;border-radius:50%;background:var(--mist-pale);display:block;}
.meter i.on{background:var(--teal);}

.as-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;}
@media (max-width:900px){.as-phases{grid-template-columns:1fr;}}
.as-phase{background:var(--paper);padding:26px;border-top:3px solid var(--mist);}
.as-phase.p1{border-top-color:var(--copper);}
.as-phase.p2{border-top-color:var(--teal);}
.as-phase.p3{border-top-color:var(--mist);}
.as-phase-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--hair);}
.as-phase-h h3{margin:0;font-size:21px;}
.as-phase-h span{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);}
.as-item{margin-bottom:22px;}
.as-item:last-child{margin-bottom:0;}
.as-item .tag{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:7px;}
.as-item h4{margin:0 0 7px;font-size:16px;}
.as-item p{font-size:14px;line-height:1.55;}

.as-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:32px;align-items:center;
  background:var(--petrol);border-color:var(--petrol);border-top-color:var(--mist);}
.as-cta h3,.as-cta h4{color:#fff;}
.as-cta p{color:#CBDCDC;}
.as-cta a{color:var(--mist);border-bottom:1px solid rgba(146,192,192,.5);}
.as-cta .as-actions{display:grid;gap:10px;}
.as-cta .as-actions .btn{justify-content:center;background:var(--mist);border-color:var(--mist);color:var(--petrol-deep);}
.as-cta .as-actions .btn--ghost{background:transparent;border-color:rgba(146,192,192,.5);color:#fff;}
.as-cta .as-actions .btn--ghost:hover{background:var(--mist);color:var(--petrol-deep);}
.as-cta .as-actions .btn{border-bottom:0;}
@media (max-width:820px){.as-cta{grid-template-columns:1fr;}}

button.btn{font-family:inherit;cursor:pointer;}

/* printing the roadmap */
@media print{
  .site-head,.site-foot,.hero,.as-cta,.skip,.as-nav{display:none !important;}
  body{font-size:11pt;color:#1E2A2E;}
  .as-card{border:0;border-top:2px solid #128384;padding:0 0 18pt;margin-bottom:18pt;page-break-inside:avoid;}
  .as-phases{grid-template-columns:1fr;}
  .as-phase{page-break-inside:avoid;}
  .section{padding:0;}
}

/* ==========================================================================
   Iconography, client logos and the data value chain
   ========================================================================== */
.ico{width:44px;height:44px;display:block;flex:none;
  stroke:var(--teal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ico--sm{width:32px;height:32px;stroke-width:1.8;}
.ico--lg{width:60px;height:60px;stroke-width:1.4;}
.dark .ico,.deep .ico,.card--dark .ico,.card--glass .ico{stroke:var(--mist);}
.card--mist .ico,.card--copper .ico{stroke:var(--petrol);}
.card--copper .ico{stroke:var(--copper);}
.card .ico{margin-bottom:16px;}

/* icon column in the numbered service rows */
.row{grid-template-columns:56px 56px minmax(0,1fr);}
.row .rowicon{padding-top:2px;}
@media (max-width:620px){
  .row{grid-template-columns:44px minmax(0,1fr);gap:8px 14px;}
  .row .num{grid-column:1;}
  .row .rowicon{display:none;}
  .row > div:last-child{grid-column:1 / -1;}
}

/* section-heading icon */
.ico-head{display:flex;align-items:center;gap:18px;margin-bottom:6px;}
.ico-head .eyebrow{margin:0;}

/* steps and chain items get icons above the label */
.step .ico,.chain .ico{margin-bottom:14px;}

/* the data value chain */
.chain{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,26px);position:relative;margin-top:44px;}
.chain::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:1px;background:var(--hair);}
.chain .link{position:relative;text-align:center;}
.chain .ico{margin:0 auto 16px;width:44px;height:44px;background:#fff;padding:0 6px;box-sizing:content-box;}
.chain h4{font-size:15px;margin-bottom:6px;}
.chain p{font-size:13.5px;line-height:1.5;}
.pale .chain .ico{background:var(--paper);}
@media (max-width:900px){
  .chain{grid-template-columns:repeat(3,1fr);gap:30px 20px;}
  .chain::before{display:none;}
}
@media (max-width:520px){.chain{grid-template-columns:repeat(2,1fr);}}

/* client logos */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,34px);margin-top:44px;}
@media (max-width:820px){.logos{grid-template-columns:repeat(2,1fr);}}
.logo-cell{background:#fff;border:1px solid var(--hair);padding:26px 22px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;}
.logo-cell .mark{height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.logo-cell .mark img{max-height:60px;max-width:100%;width:auto;object-fit:contain;}
.logo-cell .nm{font-size:14.5px;font-weight:500;color:var(--petrol);line-height:1.35;}
.logo-cell .wk{font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);margin-top:9px;line-height:1.5;}

/* dimension list on the roadmap page */
.dimlist{margin-top:22px;}
.dimrow{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 18px;align-items:start;
  padding:16px 0;border-top:1px solid var(--hair);}
.dimrow:last-child{border-bottom:1px solid var(--hair);}
.dimrow h4{margin:0 0 5px;font-size:16px;}
.dimrow p{font-size:14.5px;line-height:1.55;}
.ico--xs{width:18px;height:18px;stroke-width:2;display:inline-block;vertical-align:-4px;margin-right:9px;}
.cinfo .k{display:flex;align-items:center;}
.cinfo .k .ico--xs{stroke:var(--mist);}

/* ==========================================================================
   NGO data and technology health check
   ========================================================================== */
.hc-areas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px;}
.hc-area{display:flex;align-items:center;gap:12px;background:var(--paper);padding:14px 16px;
  font-size:15px;font-weight:500;color:var(--petrol);}
@media (max-width:620px){.hc-areas{grid-template-columns:1fr;}}

.hc-group{margin-top:30px;}
.hc-gh{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--hair);margin-bottom:6px;}
.hc-gh h3{margin:0;font-size:18px;}
.hc-pain{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--hair);}
.hc-pain p{font-size:16px;line-height:1.5;color:var(--petrol);margin:0;}
.hc-pain.is-hit p{font-weight:400;}
.hc-fs{display:flex;gap:6px;flex-wrap:wrap;}
.hc-f{font:inherit;font-size:13px;font-weight:500;letter-spacing:.03em;cursor:pointer;white-space:nowrap;
  background:#fff;color:var(--petrol);border:1px solid var(--hair);border-radius:40px;padding:8px 15px;
  transition:border-color .15s,background .15s,color .15s;}
.hc-f:hover{border-color:var(--teal);}
.hc-f.is-on{background:var(--teal);border-color:var(--teal);color:#fff;}
.hc-f.hc-f--hi.is-on{background:var(--copper);border-color:var(--copper);}
@media (max-width:760px){.hc-pain{grid-template-columns:1fr;}}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.btn[disabled]:hover{background:var(--petrol);border-color:var(--petrol);}

.hc-arows{display:grid;gap:16px;}
.hc-arow{display:grid;grid-template-columns:32px minmax(0,220px) minmax(0,1fr) 96px;gap:14px;align-items:center;}
.hc-arow .nm{font-size:15px;color:var(--petrol);font-weight:400;}
.hc-arow .bar{height:10px;background:var(--mist-pale);border-radius:10px;overflow:hidden;display:block;}
.hc-arow .bar i{display:block;height:100%;background:var(--teal);border-radius:10px;}
.hc-arow .pc{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);text-align:right;}
@media (max-width:620px){.hc-arow{grid-template-columns:28px minmax(0,1fr) 80px;}.hc-arow .bar{grid-column:1 / -1;}}

.hc-pri{border-top:3px solid var(--copper);background:var(--paper);padding:24px 26px;margin-top:22px;}
.hc-pri-h{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;}
.hc-pri-h .n{font-size:26px;font-weight:200;color:var(--mist);line-height:1;}
.hc-pri-h .tag{display:block;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;}
.hc-pri-h h3{margin:0;font-size:19px;line-height:1.4;}
.hc-pri-b{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);}
.hc-pri-b h4{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin-bottom:8px;}
.hc-pri-b p{font-size:14.5px;line-height:1.55;}
.hc-pri-b .fix{background:#fff;padding:14px 16px;border-left:3px solid var(--teal);}
.hc-pri-b .arrow{margin-top:12px;font-size:12.5px;}
@media (max-width:820px){.hc-pri-b{grid-template-columns:1fr;}}

.hc-more{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.hc-mi{background:var(--paper);padding:16px 18px;}
.hc-mi p{font-size:14.5px;color:var(--petrol);margin-bottom:10px;}
.hc-mi .arrow{font-size:12px;}
@media (max-width:620px){.hc-more{grid-template-columns:1fr;}}

.hc-ai{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;background:var(--petrol);
  border-color:var(--petrol);border-top-color:var(--copper);}
.hc-ai .ico{stroke:var(--mist);}
.hc-ai h3{color:#fff;}
.hc-ai p{color:#CBDCDC;}
.hc-ai .eyebrow{color:var(--mist);}
.hc-ai .arrow{color:var(--mist);margin-top:14px;}

/* language switcher */
.langs{position:relative;margin-left:auto;margin-right:14px;}
.langs summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--petrol);padding:8px 10px;border-radius:3px;border:1px solid var(--hair);}
.langs summary::-webkit-details-marker{display:none;}
.langs summary:hover,.langs[open] summary{border-color:var(--teal);}
.langs-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--hair);
  box-shadow:0 14px 30px rgba(21,67,78,.12);min-width:150px;padding:6px 0;z-index:70;}
.langs-menu a{display:block;padding:9px 16px;font-size:14px;color:var(--petrol);white-space:nowrap;}
.langs-menu a:hover{background:var(--paper);}
.langs-menu a[aria-current]{font-weight:500;box-shadow:inset 3px 0 0 var(--teal);}
@media (min-width:1141px){.langs{order:3;margin-left:clamp(12px,1.4vw,22px);margin-right:0;}}

/* Chinese: Poppins has no CJK glyphs, so hand those to a CJK face and relax the tracking */
html[lang="zh"] body{font-family:"Poppins","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;}
html[lang="zh"] .eyebrow,html[lang="zh"] .as-meta,html[lang="zh"] .chip{letter-spacing:.06em;}
html[lang="zh"] h1,html[lang="zh"] h2{letter-spacing:0;}
html[lang="zh"] p{line-height:1.8;}