/* ==================================================================
   E Connect Africa — ec-design.css
   Design system: "Soft 3D Corporate" (evolved brand blue)
   Used by _LayoutV2.cshtml. Self-contained: no Bootstrap, no Crafto.
   ================================================================== */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/ec/plus-jakarta-sans-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ec/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ec/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ec/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ec/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/ec/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}

/* =====================================================================
   E CONNECT AFRICA — DESIGN SYSTEM  "Soft 3D Corporate"
   Evolved from the existing brand blue (#0078b7 / #03045e)
   ===================================================================== */
:root{
  /* --- Brand ramp (evolved blue) --- */
  --brand-50:#EDF7FD;
  --brand-100:#D6EDFA;
  --brand-200:#AEDCF5;
  --brand-300:#74C4EE;
  --brand-400:#31A5DD;
  --brand-500:#0A84C9;      /* new primary  */
  --brand-600:#0078B7;      /* legacy primary, kept */
  --brand-700:#065C8D;
  --brand-800:#08426A;
  --brand-900:#0A2A4A;
  --navy:#0A1F44;           /* evolved from #03045e */
  --navy-deep:#061530;

  /* --- Secondary accents (from existing product colours) --- */
  --teal:#22ABB9;   --teal-soft:#E4FAFC;
  --violet:#4A67FF; --violet-soft:#EBEEFF;
  --amber:#FF8A3D;  --amber-soft:#FFF2E8;
  --ink-blue:#132047;

  /* --- Neutrals --- */
  --ink:#10203F;
  --ink-2:#3B4C6B;
  --muted:#66789A;
  --line:#E4EBF3;
  --line-2:#EFF4F9;
  --white:#fff;
  --bg:#FFFFFF;
  --bg-soft:#F5FAFE;
  --bg-tint:#EAF4FC;

  /* --- Radii --- */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:38px; --r-pill:999px;

  /* --- Soft 3D shadow ladder --- */
  --sh-1:0 1px 2px rgba(16,32,63,.05), 0 4px 12px rgba(16,32,63,.05);
  --sh-2:0 2px 4px rgba(16,32,63,.04), 0 14px 30px rgba(16,32,63,.08);
  --sh-3:0 8px 18px rgba(16,32,63,.06), 0 36px 70px -18px rgba(16,32,63,.18);
  --sh-4:0 20px 40px rgba(16,32,63,.10), 0 60px 110px -30px rgba(16,32,63,.28);
  --sh-brand:0 14px 34px -10px rgba(10,132,201,.50);
  --bevel:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(16,32,63,.05);

  /* --- Gradients --- */
  --g-brand:linear-gradient(135deg,#0A84C9 0%,#065C8D 55%,#0A2A4A 100%);
  --g-brand-soft:linear-gradient(135deg,#EDF7FD 0%,#D6EDFA 100%);
  --g-teal:linear-gradient(135deg,#3ED0DE 0%,#118A97 100%);
  --g-violet:linear-gradient(135deg,#7B90FF 0%,#3245C9 100%);
  --g-amber:linear-gradient(135deg,#FFA96B 0%,#EF6C1B 100%);
  --g-navy:linear-gradient(160deg,#0A2A4A 0%,#0A1F44 45%,#061530 100%);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));

  --ease:cubic-bezier(.22,.8,.3,1);
  --header-h:82px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;   /* clip = no scroll container, keeps position:fixed intact */
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
p{margin:0}
::selection{background:var(--brand-200);color:var(--brand-900)}

/* ---------- layout helpers ---------- */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px}
.wrap-lg{max-width:1400px}
/* overflow:clip keeps the decorative blobs from creating a horizontal scrollbar
   while still allowing card lift/shadow to render (unlike overflow:hidden) */
.sec{padding:clamp(64px,8vw,120px) 0;position:relative;overflow:clip}
.sec-tight{padding:clamp(48px,5vw,80px) 0;position:relative;overflow:clip}
.grid{display:grid;gap:clamp(20px,3vw,36px)}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- type scale ---------- */
.display{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.04;letter-spacing:-.022em;font-weight:800}
.h1{font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.03em}
.h2{font-size:clamp(1.65rem,3.1vw,2.6rem);letter-spacing:-.025em}
.h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.h4{font-size:clamp(1.05rem,1.5vw,1.25rem)}
.lead{font-size:clamp(1.02rem,1.25vw,1.2rem);color:var(--ink-2);font-weight:400}
.body{color:var(--ink-2);font-weight:400}
.small{font-size:.9rem;color:var(--muted)}
.tiny{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}

/* ---------- eyebrow / chips ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 12px;border-radius:var(--r-pill);
  background:var(--white);box-shadow:var(--sh-1),var(--bevel);
  border:1px solid var(--line-2);
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-700);
}
.eyebrow i{font-size:1rem;color:var(--brand-500)}
.eyebrow.on-dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;
  box-shadow:none;backdrop-filter:blur(10px)}
.eyebrow.on-dark i{color:#8FD5F7}
.eyebrow.teal{color:#0E7C88}.eyebrow.teal i{color:var(--teal)}

.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--brand-50);color:var(--brand-700);font-weight:700;font-size:.85rem;
  border:1px solid #DCEDF9}
.chip i{font-size:.95rem}
.chip.teal{background:var(--teal-soft);color:#0E7C88;border-color:#CDF1F5}
.chip.amber{background:var(--amber-soft);color:#C2530A;border-color:#FFE1CB}
.chip.violet{background:var(--violet-soft);color:#2C3BB0;border-color:#DCE1FF}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--g-brand);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-pill);border:0;cursor:pointer;
  font-weight:700;font-size:.97rem;letter-spacing:-.01em;color:#fff;
  background-image:var(--btn-bg);background-size:150% 150%;background-position:0% 50%;
  box-shadow:var(--sh-brand);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),background-position .6s var(--ease);
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn::after{content:"";position:absolute;inset:0 0 55% 0;background:var(--g-sheen);opacity:.18;pointer-events:none}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 44px -12px rgba(10,132,201,.6);background-position:100% 50%}
.btn:active{transform:translateY(-1px)}
.btn i{font-size:1.05rem;transition:transform .35s var(--ease)}
.btn:hover i.bi-arrow-right{transform:translateX(4px)}
.btn-ghost{background:var(--white);background-image:none;color:var(--brand-700);
  box-shadow:var(--sh-2),var(--bevel);border:1px solid var(--line)}
.btn-ghost:hover{box-shadow:var(--sh-3);color:var(--brand-600)}
.btn-glass{background:rgba(255,255,255,.14);background-image:none;color:#fff;
  border:1px solid rgba(255,255,255,.32);box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
  backdrop-filter:blur(14px)}
.btn-glass:hover{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.4)}
.btn-sm{padding:11px 20px;font-size:.88rem}
.btn-lg{padding:18px 34px;font-size:1.02rem}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;
  letter-spacing:.02em;color:var(--brand-600);text-transform:uppercase}
.link-arrow .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-50);transition:transform .35s var(--ease),background .35s}
.link-arrow:hover .ic{transform:translateX(5px);background:var(--brand-500);color:#fff}

/* ---------- soft 3D card ---------- */
.card3d{
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  position:relative;
}
.card3d:hover{transform:translateY(-8px);box-shadow:var(--sh-3),var(--bevel)}

/* icon tile — extruded look */
.tile{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--g-brand-soft);color:var(--brand-600);font-size:1.78rem;
  box-shadow:inset 0 1px 0 #fff, 0 8px 18px -8px rgba(10,132,201,.45);
  border:1px solid #DCEDF9;
}
.tile.solid{background:var(--g-brand);color:#fff;border-color:transparent}
.tile.teal{background:var(--g-teal);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(34,171,185,.6)}
.tile.violet{background:var(--g-violet);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(74,103,255,.55)}
.tile.amber{background:var(--g-amber);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(255,138,61,.55)}

/* decorative blobs */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
.blob-a{width:520px;height:520px;background:#BFE4F8}
.blob-b{width:420px;height:420px;background:#CFF3F7}
.blob-c{width:460px;height:460px;background:#DCE3FF}
.mesh{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(10,132,201,.16) 1px,transparent 1px);
  background-size:26px 26px;mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%)}

/* ---------- section heading block ---------- */
.sec-head{max-width:760px}
.sec-head .h2{margin:18px 0 14px}
.sec-head.center{margin-inline:auto}
.rule{width:74px;height:5px;border-radius:99px;background:var(--g-brand);margin-top:6px}
.rule.center{margin-inline:auto}
.rule.teal{background:var(--g-teal)}

/* =====================  HEADER  ===================== */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-h);
  display:flex;align-items:center;transition:all .45s var(--ease);
}
.hdr .wrap-lg{display:flex;align-items:center;gap:22px;width:100%}
.hdr-inner-bg{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 rgba(16,32,63,.06),0 12px 34px -18px rgba(16,32,63,.25);}
.hdr.stuck{height:70px}
.hdr.stuck .hdr-inner-bg{opacity:1}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;z-index:2}
.brand img{height:42px;width:auto;transition:opacity .3s,height .45s var(--ease)}
.brand .logo-dark{display:none}
.hdr.stuck .brand img{height:36px}
.hdr.stuck .brand .logo-light{display:none}
.hdr.stuck .brand .logo-dark{display:block}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto;z-index:2}
.nav > li > a,.nav > li > .navbtn{
  display:flex;align-items:center;gap:6px;padding:11px 15px;border-radius:var(--r-pill);
  font-weight:600;font-size:.94rem;color:rgba(255,255,255,.92);
  background:transparent;border:0;cursor:pointer;transition:all .3s var(--ease);white-space:nowrap;
}
.nav > li > a:hover,.nav > li > .navbtn:hover,.nav > li.open > .navbtn{
  background:rgba(255,255,255,.16);color:#fff}
.nav > li.current > a{background:rgba(255,255,255,.2);color:#fff}
.hdr.stuck .nav > li > a,.hdr.stuck .nav > li > .navbtn{color:var(--ink-2)}
.hdr.stuck .nav > li > a:hover,.hdr.stuck .nav > li > .navbtn:hover,
.hdr.stuck .nav > li.open > .navbtn{background:var(--brand-50);color:var(--brand-700)}
.hdr.stuck .nav > li.current > a{background:var(--brand-50);color:var(--brand-700)}
.nav .navbtn i{font-size:.7rem;transition:transform .3s var(--ease)}
.nav li.open .navbtn i{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% - 6px);left:50%;transform:translate(-50%,10px);
  min-width:300px;padding:12px;border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-4);border:1px solid var(--line-2);
  opacity:0;visibility:hidden;transition:all .35s var(--ease);
}
.nav li{position:relative}
.nav li.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:var(--r-sm);
  font-weight:600;font-size:.92rem;color:var(--ink);transition:all .28s var(--ease)}
.drop a:hover{background:var(--brand-50);color:var(--brand-700);transform:translateX(3px)}
.drop .dt{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:1rem;color:#fff;flex:0 0 auto;box-shadow:0 6px 14px -6px rgba(16,32,63,.4)}
.drop small{display:block;font-weight:500;font-size:.76rem;color:var(--muted);letter-spacing:0}

.hdr-cta{margin-left:8px;z-index:2}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:14px;border:0;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.35rem;cursor:pointer;z-index:2;
  align-items:center;justify-content:center}
.hdr.stuck .burger{background:var(--brand-50);color:var(--brand-700)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:1100;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(6,21,48,.55);opacity:0;transition:opacity .4s}
.drawer .panel{position:absolute;top:0;right:0;height:100%;width:min(400px,88vw);background:#fff;
  transform:translateX(102%);transition:transform .5s var(--ease);
  padding:24px;overflow-y:auto;box-shadow:-20px 0 60px rgba(6,21,48,.3)}
.drawer.open{pointer-events:auto}
.drawer.open .scrim{opacity:1}
.drawer.open .panel{transform:none}
.drawer .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.drawer .top img{height:38px}
.drawer .x{width:44px;height:44px;border-radius:13px;border:0;background:var(--bg-tint);
  color:var(--brand-700);font-size:1.3rem;cursor:pointer}
.macc{border-bottom:1px solid var(--line-2)}
.macc > button,.macc > a{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:16px 4px;background:0;border:0;font:inherit;font-weight:700;font-size:1rem;
  color:var(--ink);cursor:pointer;text-align:left}
.macc > button i{font-size:.75rem;color:var(--brand-500);transition:transform .3s}
.macc.open > button i{transform:rotate(180deg)}
.macc .sub{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.macc.open .sub{max-height:420px}
.macc .sub a{display:flex;align-items:center;gap:12px;padding:11px 4px 11px 8px;
  font-size:.92rem;font-weight:600;color:var(--ink-2)}
.macc .sub a .dt{width:32px;height:32px;border-radius:10px;font-size:.85rem}

/* =====================  HERO  ===================== */
.hero{position:relative;min-height:min(100svh,900px);display:flex;align-items:center;
  padding:calc(var(--header-h) + 40px) 0 clamp(120px,14vw,190px);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--g-navy)}
.hero-media video{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 12% 40%,rgba(6,21,48,.92) 0%,rgba(6,21,48,.55) 45%,rgba(6,21,48,.15) 75%),
    linear-gradient(90deg,rgba(10,42,74,.9) 0%,rgba(10,42,74,.35) 55%,rgba(10,42,74,.55) 100%),
    linear-gradient(180deg,rgba(6,21,48,.55) 0%,transparent 35%,rgba(6,21,48,.75) 100%);
}
.hero-glow{position:absolute;z-index:-1;width:640px;height:640px;border-radius:50%;
  right:-140px;top:-140px;filter:blur(90px);opacity:.42;
  background:radial-gradient(circle,#31A5DD 0%,rgba(49,165,221,0) 70%)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,70px);align-items:center;width:100%}
.hero h1{color:#fff;margin:22px 0 20px;text-shadow:0 8px 40px rgba(0,0,0,.35)}
.hero h1 .grad{background:linear-gradient(100deg,#fff 10%,#8FD5F7 55%,#fff 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:rgba(255,255,255,.86);max-width:600px;font-weight:400}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:40px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero-trust span{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);
  font-size:.86rem;font-weight:600}
.hero-trust i{color:#7FD0F5;font-size:1.05rem}

/* floating stat stack — the 3D signature of the hero */
.float-stack{position:relative;display:grid;gap:16px;justify-items:end}
.gcard{
  width:min(330px,100%);padding:20px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff;display:flex;align-items:center;gap:16px;
  animation:floaty 7s ease-in-out infinite;
}
.gcard:nth-child(2){animation-delay:-2.3s;transform:translateX(-34px)}
.gcard:nth-child(3){animation-delay:-4.6s}
.gcard .tile{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.gcard b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.gcard small{font-size:.8rem;color:rgba(255,255,255,.75);font-weight:500}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -13px}}

.hero-wave{position:absolute;left:0;right:0;bottom:-2px;z-index:1;line-height:0;pointer-events:none}
.hero-wave svg{width:100%;height:auto;display:block}

.scroll-hint{position:absolute;left:50%;bottom:clamp(66px,9vw,104px);transform:translateX(-50%);
  z-index:2;display:grid;place-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.scroll-hint .bar{width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.6),transparent);
  position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;top:0;left:0;width:1px;height:14px;background:#fff;
  animation:slide 2.1s var(--ease) infinite}
@keyframes slide{0%{top:-16px}100%{top:46px}}

/* =====================  ABOUT  ===================== */
.about-visual{position:relative;padding:26px 26px 0 0}
.about-visual .plate{
  position:absolute;inset:0 0 auto auto;width:78%;height:78%;border-radius:var(--r-xl);
  background:var(--g-brand-soft);transform:rotate(3deg);z-index:0;
  box-shadow:var(--sh-1)}
.about-visual .shot{position:relative;z-index:1;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-4);border:8px solid #fff}
.about-visual .shot img{width:100%}
.badge-float{
  position:absolute;z-index:2;background:#fff;border-radius:var(--r-md);padding:14px 18px;
  box-shadow:var(--sh-3),var(--bevel);display:flex;align-items:center;gap:13px;
  animation:floaty 8s ease-in-out infinite}
.badge-float b{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;display:block;line-height:1.1;color:var(--brand-700)}
.badge-float small{font-size:.76rem;color:var(--muted);font-weight:600}
.badge-float.bl{left:-14px;bottom:34px}
.badge-float.tr{right:-6px;top:6%;animation-delay:-3s}

.about-note{
  margin-top:26px;padding:22px 24px;border-radius:var(--r-md);background:var(--bg-soft);
  border:1px solid var(--line-2);border-left:5px solid var(--brand-500);
  box-shadow:var(--sh-1);color:var(--ink-2);font-weight:500}

/* =====================  SPLIT FEATURE ROWS  ===================== */
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;
  gap:clamp(28px,5vw,72px)}
.frow.flip .fmedia{order:2}
.fmedia{position:relative}
.fmedia .plate{position:absolute;border-radius:var(--r-xl);inset:auto auto -18px -18px;
  width:62%;height:62%;background:var(--g-brand-soft);z-index:0}
.frow.teal .fmedia .plate{background:linear-gradient(135deg,#E4FAFC,#CDF1F5)}
.fmedia .shot{position:relative;z-index:1;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.fmedia:hover .shot{transform:translateY(-8px) scale(1.012);box-shadow:var(--sh-4)}
.fmedia .shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fmedia .num{position:absolute;z-index:2;right:-10px;top:-14px;width:64px;height:64px;border-radius:20px;
  display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:#fff;background:var(--g-brand);
  box-shadow:var(--sh-brand);letter-spacing:-.03em}
.frow.teal .fmedia .num{background:var(--g-teal);box-shadow:0 14px 30px -10px rgba(34,171,185,.55)}
.fbody .h3{margin:16px 0 12px}
.fbullets{display:grid;gap:11px;margin-top:22px}
.fbullets li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-2);font-weight:500}
.fbullets i{color:var(--brand-500);font-size:1.1rem;margin-top:2px}
.frow.teal .fbullets i{color:var(--teal)}

/* =====================  STATS  ===================== */
.stats-panel{
  position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(36px,5vw,64px);
  background:var(--g-brand);box-shadow:var(--sh-4);color:#fff}
.stats-panel .mesh{opacity:.5;mask-image:radial-gradient(ellipse at 20% 0%,#000,transparent 75%);
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1px)}
.stats-grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);align-items:center}
.stat{padding:22px;border-radius:var(--r-lg);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 40px -20px rgba(0,0,0,.5);
  transition:transform .5s var(--ease)}
.stat:hover{transform:translateY(-7px)}
.stat .n{font-size:clamp(2.3rem,4vw,3.3rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  display:flex;align-items:baseline;gap:2px}
.stat .lbl{margin-top:8px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.8)}
.stats-title .h2{color:#fff}
.stats-title p{color:rgba(255,255,255,.78);margin-top:12px;font-size:.95rem}

/* presence / map */
.presence{position:relative;text-align:center}
.presence .map{max-width:900px;margin-inline:auto;filter:drop-shadow(0 24px 40px rgba(16,32,63,.14))}
.country-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}

/* =====================  SOLUTIONS  ===================== */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rail-nav{display:flex;gap:10px}
.rnav{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--brand-700);font-size:1.05rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--sh-2),var(--bevel);transition:all .35s var(--ease)}
.rnav:hover{background:var(--g-brand);color:#fff;border-color:transparent;
  box-shadow:var(--sh-brand);transform:translateY(-3px)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:26px;
  overflow:auto hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:20px 6px 34px;margin:0 -6px;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
/* fixed (not minmax-with-0-min) track size, otherwise the 5 cards shrink to fit
   the container and the rail never overflows -> arrows would do nothing */
@media(min-width:1200px){.rail{grid-auto-columns:calc(25% - 19.5px)}}

.sol{scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  position:relative;--c:var(--brand-600);--cg:var(--g-brand)}
.sol:hover{transform:translateY(-10px);box-shadow:var(--sh-4),var(--bevel)}
.sol .top{position:relative;overflow:hidden;background:var(--bg-tint)}
.sol .top img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .8s var(--ease)}
.sol:hover .top img{transform:scale(1.06)}
.sol .tag{position:absolute;top:16px;left:16px;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c);box-shadow:var(--sh-1)}
.sol .body{padding:22px 22px 8px;flex:1}
.sol .body h4{font-size:1.2rem;color:var(--c);margin-bottom:9px}
.sol .body p{font-size:.9rem;color:var(--ink-2);font-weight:400}
.sol .foot{padding:16px 22px 20px;margin-top:auto}
.sol .foot a{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.sol .foot .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--cg);color:#fff;transition:transform .35s var(--ease)}
.sol:hover .foot .ic{transform:translateX(5px)}
.sol::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--cg)}
.sol.care{--c:#132047;--cg:linear-gradient(135deg,#2A4A8F,#0B1733)}
.sol.iconnect{--c:#118A97;--cg:var(--g-teal)}
.sol.edulink{--c:#E06714;--cg:var(--g-amber)}
.sol.zamw{--c:#3245C9;--cg:var(--g-violet)}
.sol.eduhub{--c:#003049;--cg:linear-gradient(135deg,#0E5C7E,#001E2E)}

/* =====================  MARQUEE (certs / logos)  ===================== */
.mq{overflow:hidden;position:relative;padding:10px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:18px;width:max-content;animation:mq 34s linear infinite}
.mq.rev .mq-track{animation-direction:reverse;animation-duration:42s}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.logo-card{flex:0 0 auto;height:96px;min-width:172px;padding:16px 26px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-1),var(--bevel);
  display:grid;place-items:center;transition:all .4s var(--ease)}
.logo-card:hover{box-shadow:var(--sh-2);transform:translateY(-5px)}
.logo-card img{max-height:60px;width:auto;object-fit:contain}

.comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.comp{padding:28px 22px;border-radius:var(--r-lg);background:#fff;text-align:center;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.comp:hover{transform:translateY(-8px);box-shadow:var(--sh-3)}
.comp img{height:60px;width:auto;margin:0 auto 14px;object-fit:contain}
.comp span{font-weight:700;font-size:.9rem;color:var(--ink)}

/* =====================  MEDIA HUB  ===================== */
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.mcard{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);display:block;
  background:var(--navy)}
.mcard:hover{transform:translateY(-9px);box-shadow:var(--sh-4)}
.mcard img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--ease),opacity .5s}
.mcard:hover img{transform:scale(1.07);opacity:.8}
.mcard .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,21,48,.05) 0%,rgba(6,21,48,.25) 45%,rgba(6,21,48,.88) 100%)}
.mcard .meta{position:absolute;inset:auto 0 0 0;padding:20px;color:#fff;display:block}
.mcard .src{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);
  margin-bottom:10px}
.mcard .ttl{display:block;font-weight:700;font-size:1rem;line-height:1.35}
.mcard .play{position:absolute;top:50%;left:50%;translate:-50% -50%;width:66px;height:66px;
  border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.4rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);transition:all .45s var(--ease)}
.mcard:hover .play{background:var(--brand-500);border-color:transparent;scale:1.1;box-shadow:var(--sh-brand)}

/* =====================  CTA  ===================== */
.cta{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(38px,5vw,70px);
  background:var(--g-navy);box-shadow:var(--sh-4);color:#fff;isolation:isolate}
.cta .blob{filter:blur(80px);opacity:.32}
.cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,60px);align-items:center}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.78);margin-top:14px}
.form-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:26px;backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 26px 60px -24px rgba(0,0,0,.6)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:7px}
.field input,.field select{width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  font:inherit;font-size:.94rem;outline:0;transition:all .3s}
.field input::placeholder{color:rgba(255,255,255,.45)}
.field input:focus,.field select:focus{border-color:#7FD0F5;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 4px rgba(127,208,245,.16)}
.field select option{color:#0A1F44}

/* =====================  FOOTER  ===================== */
.ftr{position:relative;background:var(--navy-deep);color:rgba(255,255,255,.72);padding-top:90px;overflow:hidden}
.ftr .curve{position:absolute;top:-1px;left:0;right:0;line-height:0}
.ftr .curve svg{width:100%;height:auto;display:block}
.ftr .blob{opacity:.22}
.ftr-grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,48px);
  padding-bottom:48px}
.ftr h5{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
.ftr li{margin-bottom:11px}
.ftr li a{font-size:.93rem;font-weight:500;transition:all .28s var(--ease);display:inline-block}
.ftr li a:hover{color:#fff;transform:translateX(4px)}
.ftr .logo{height:44px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.95}
.ftr .tagline{font-size:.95rem;max-width:330px}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.1rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:all .35s var(--ease)}
.socials a:hover{transform:translateY(-4px);background:var(--brand-500);border-color:transparent;
  box-shadow:var(--sh-brand)}
.ftr-bot{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);padding:24px 0;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem}

/* progress + to-top */
.prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;background:var(--g-brand);
  box-shadow:0 0 12px rgba(10,132,201,.7)}
.totop{position:fixed;right:22px;bottom:22px;z-index:900;width:52px;height:52px;border-radius:50%;
  border:0;cursor:pointer;background:#fff;color:var(--brand-700);font-size:1.2rem;
  box-shadow:var(--sh-3);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all .4s var(--ease)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--g-brand);color:#fff}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .gcard,.badge-float,.mq-track{animation:none}
}

/* ===================  RESPONSIVE  =================== */
@media(max-width:1100px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .float-stack{justify-items:start;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
    overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .float-stack::-webkit-scrollbar{display:none}
  .gcard:nth-child(2){transform:none}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  :root{--header-h:74px}
  .frow,.about-row,.cta-grid{grid-template-columns:1fr!important}
  .frow.flip .fmedia{order:0}
  .fmedia .num{width:54px;height:54px;font-size:1.1rem;right:-6px;top:-10px}
  .about-visual{padding:18px 18px 0 0}
  .badge-float.bl{left:0;bottom:14px;padding:11px 14px}
  .badge-float.tr{right:0;top:0}
  .hero{min-height:auto;padding-bottom:clamp(90px,18vw,140px)}
  .scroll-hint{display:none}
}
@media(max-width:620px){
  .wrap{padding-inline:18px}
  .stats-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .btn{padding:14px 22px;font-size:.92rem}
  .hero-actions .btn{flex:1 1 100%}
  .logo-card{height:82px;min-width:140px;padding:12px 18px}
  .logo-card img{max-height:48px}
}

/* =====================================================================
   PART 2 — additions for the Razor layout
   (replaces the inline styles used in the static prototype)
   ===================================================================== */

/* ---------- header: always-solid variant for pages without a dark hero ---------- */
.hdr.solid{height:70px}
.hdr.solid .hdr-inner-bg{opacity:1}
.hdr.solid .brand .logo-light{display:none}
.hdr.solid .brand .logo-dark{display:block}
.hdr.solid .brand img{height:36px}
.hdr.solid .nav > li > a,.hdr.solid .nav > li > .navbtn{color:var(--ink-2)}
.hdr.solid .nav > li > a:hover,.hdr.solid .nav > li > .navbtn:hover,
.hdr.solid .nav > li.open > .navbtn{background:var(--brand-50);color:var(--brand-700)}
.hdr.solid .nav > li.current > a{background:var(--brand-50);color:var(--brand-700)}
.hdr.solid .burger{background:var(--brand-50);color:var(--brand-700)}
.main-offset{padding-top:var(--header-h)}

/* ---------- dropdown / drawer icon tiles ---------- */
.dt-brand{background:var(--g-brand)}
.dt-teal{background:var(--g-teal)}
.dt-violet{background:var(--g-violet)}
.dt-amber{background:var(--g-amber)}
.dt-care{background:linear-gradient(135deg,#2A4A8F,#0B1733)}
.dt-eduhub{background:linear-gradient(135deg,#0E5C7E,#001E2E)}
.macc .sub a .dt{color:#fff;box-shadow:none;border:0}
.drawer-cta{width:100%;margin-top:26px}

/* ---------- footer helpers ---------- */
.ftr h5.mt-26{margin-top:26px}
.ftr-bot b{color:#fff}
.ftr-blob{right:-200px;top:60px}

/* ---------- decorative blob placements (were inline in the prototype) ---------- */
.blob-about{left:-220px;top:60px}
.blob-health{right:-180px;top:120px}
.blob-edu{left:-200px;bottom:80px}
.blob-sol{right:-240px;bottom:0}
.blob-comp{left:-160px;top:0}
.blob-cta-a{right:-180px;top:-160px}
.blob-cta-b{left:-160px;bottom:-180px}

/* ---------- feature-row mirrored decorations ---------- */
.frow.flip .fmedia .plate{inset:auto -18px -18px auto}
.frow.flip .fmedia .num{left:-10px;right:auto}
@media(max-width:860px){.frow.flip .fmedia .num{left:auto;right:-6px}}

/* ---------- section-head spacing used by the About block ---------- */
.head-tight .h2{margin:18px 0 16px}
.mt-18{margin-top:18px}
.mt-26{margin-top:26px}
.mt-30{margin-top:30px}
.mt-36{margin-top:36px}
.mt-44{margin-top:44px}
.mt-48{margin-top:48px}
.rows-gap{gap:clamp(56px,8vw,110px)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.z1{position:relative;z-index:1}

/* ---------- hero: static poster fallback when the video cannot play ---------- */
.hero-media img.poster{width:100%;height:100%;object-fit:cover;opacity:.85}

/* =====================================================================
   MODALS (Subscribe / Contact)
   ===================================================================== */
.modal{
  position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;
}
.modal.open{display:flex}
.modal-scrim{position:absolute;inset:0;background:rgba(6,21,48,.62);backdrop-filter:blur(10px);
  animation:fadeIn .3s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  position:relative;z-index:1;width:100%;max-width:470px;margin:auto;
  padding:34px 32px;border-radius:var(--r-xl);color:#fff;
  background:var(--g-navy);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12);
  animation:pop .42s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modal-x{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:13px;border:0;
  cursor:pointer;background:rgba(255,255,255,.1);color:#fff;font-size:1rem;
  display:grid;place-items:center;transition:all .3s var(--ease)}
.modal-x:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
.modal-title{color:#fff;margin:16px 0 8px}
.modal-sub{color:rgba(255,255,255,.72);font-size:.94rem;margin-bottom:24px}

.ec-form .field{margin-bottom:14px}
.ec-form textarea{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);resize:vertical;min-height:110px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  font:inherit;font-size:.94rem;outline:0;transition:all .3s}
.ec-form textarea::placeholder{color:rgba(255,255,255,.45)}
.ec-form textarea:focus{border-color:#7FD0F5;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 4px rgba(127,208,245,.16)}
.ec-form input:invalid.touched,.ec-form select:invalid.touched,.ec-form textarea:invalid.touched{
  border-color:#FF8A8A;box-shadow:0 0 0 4px rgba(255,138,138,.14)}

.modal-submit{width:100%;margin-top:10px}
.modal-submit .spin{display:none;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-submit.loading{pointer-events:none;opacity:.8}
.modal-submit.loading .spin{display:block}
.modal-submit.loading > i{display:none}

.form-error{margin-top:14px;font-size:.86rem;color:#FFB4B4;font-weight:600}
.form-error a{color:#fff;text-decoration:underline}

.modal-done{text-align:center;padding:8px 0 4px}
.modal-done .done-ic{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  font-size:1.9rem;color:#fff;background:linear-gradient(135deg,#3ED0DE,#118A97);
  box-shadow:0 16px 34px -12px rgba(34,171,185,.7)}
.modal-done .h4{color:#fff;margin-bottom:12px}
.modal-done p{color:rgba(255,255,255,.76);font-size:.93rem;margin-bottom:22px}
.modal-done a{color:#8FD5F7;text-decoration:underline}

body.modal-open{overflow:hidden}

@media(max-width:620px){
  .modal{padding:14px}
  .modal-card{padding:28px 20px;border-radius:var(--r-lg)}
}

/* ---------- section backgrounds ---------- */
.bg-soft{background:var(--bg-soft)}
.bg-tinted{background:var(--bg-tint)}

/* ---------- icon tile size variants ---------- */
.tile-sm{width:46px;height:46px;border-radius:14px;font-size:1.42rem}
.tile-lg{width:66px;height:66px;border-radius:20px;font-size:2.1rem}

/* ---------- misc layout helpers used by the views ---------- */
.sec-head-narrow{max-width:640px}
.marquee-stack{display:grid;gap:18px}

/* ---------- CTA side panel ---------- */
.cta-panel{
  padding:32px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 26px 60px -24px rgba(0,0,0,.6);
}
.cta-panel .tile{margin-bottom:22px}
.cta-panel .h3{color:#fff;margin-bottom:12px}
.cta-panel p{color:rgba(255,255,255,.76);font-size:.95rem;margin-bottom:26px}
.cta-panel-btn{width:100%}

/* ---------- dark-form <select>: the native chevron is invisible on navy ---------- */
.field select,.ec-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:44px;
  background-color:rgba(255,255,255,.1);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:15px 15px;
}
.field select:focus,.ec-form select:focus{background-color:rgba(255,255,255,.16)}

/* ---------- wider solutions dropdown so descriptions stay on one line ---------- */
.drop-wide{min-width:384px}
@media(max-width:1240px){.drop-wide{min-width:340px}}

/* =====================================================================
   PART 3 — inner-page components (Expertise / Solutions / Contact ...)
   ===================================================================== */

/* ---------- shorter hero for inner pages ---------- */
.hero-page{min-height:min(66svh,640px);padding-bottom:clamp(96px,11vw,150px)}
.hero-page .hero-inner{grid-template-columns:minmax(0,1fr)}
.hero-page .hero-copy{max-width:760px}
.hero-page h1{font-size:clamp(2.1rem,5vw,3.9rem);letter-spacing:-.028em}
.hero-page p.lead{max-width:640px}
@media(max-width:860px){.hero-page{min-height:auto;padding-bottom:clamp(80px,16vw,120px)}}

/* accent variants for the hero glow / wave tint */
.hero.accent-teal .hero-glow{background:radial-gradient(circle,#3ED0DE 0%,rgba(62,208,222,0) 70%)}
.hero.accent-teal .eyebrow.on-dark i{color:#7FE4EE}

/* ---------- feature card grid ("What Sets Us Apart") ---------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(18px,2.4vw,28px)}
.fcard{
  padding:30px 26px;border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;
}
.fcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--g-brand);
  opacity:0;transition:opacity .4s var(--ease)}
.fcard:hover{transform:translateY(-8px);box-shadow:var(--sh-3),var(--bevel)}
.fcard:hover::before{opacity:1}
.fcard h4{font-size:1.06rem;letter-spacing:-.015em}

/* Every feature card is centred — icon tile, heading and description alike — which
   also matches the .callout pair. align-items centres the tile (it is a flex item),
   text-align centres the copy, and margin-inline:auto covers the tile even where
   something else has overridden its alignment. */
.fcard{text-align:center;align-items:center}
.fcard:not(:has(p)){justify-content:center}
.fcard .tile{margin-inline:auto}
.fcard p{font-size:.93rem;color:var(--ink-2);font-weight:400;line-height:1.62}
.fgrid.teal .fcard::before{background:var(--g-teal)}
.fgrid.teal .tile{background:var(--teal-soft);color:#0E7C88;border-color:#CDF1F5;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -8px rgba(34,171,185,.45)}

/* ---------- stakeholder cards (compact, centred) ---------- */
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(16px,2vw,24px)}
.kcard{
  padding:26px 20px;border-radius:var(--r-md);background:#fff;text-align:center;
  border:2px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.kcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--brand-200)}
.kcard .tile{margin:0 auto 16px}
.kcard b{display:block;color:var(--brand-700);font-size:1rem;margin-bottom:6px}
/* :not(.tile) matters — the icon tile in a .kcard is also a <span>, and without
   the exclusion this rule won its specificity battle with .tile and shrank the
   glyph to .88rem */
.kcard span:not(.tile){font-size:.88rem;color:var(--ink-2);line-height:1.55;display:block}
.kgrid.teal .kcard:hover{border-color:#A7E4EB}
.kgrid.teal .kcard b{color:#0E7C88}

/* ---------- solutions shown as a static 3-up grid (not a rail) ---------- */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.6vw,28px)}
.sol-grid .sol{scroll-snap-align:none}

/* ---------- stats band with light cards ---------- */
.stats-panel.stats-center{text-align:center}
.stats-panel .stats-lead{max-width:820px;margin:0 auto;color:rgba(255,255,255,.9);
  font-size:clamp(1rem,1.35vw,1.18rem);font-weight:500;position:relative;z-index:1}
.stats-row{position:relative;z-index:1;display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:34px}
.stat-light{
  background:#fff;border:0;border-radius:var(--r-lg);padding:28px 22px;text-align:center;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.4),var(--bevel);backdrop-filter:none;
  transition:transform .5s var(--ease)}
.stat-light:hover{transform:translateY(-7px)}
.stat-light .n{justify-content:center;color:var(--brand-600);font-size:clamp(2.1rem,3.6vw,2.9rem)}
.stat-light .lbl{color:var(--ink-2);font-weight:600;font-size:.95rem}
.stats-panel.teal-band{background:var(--g-teal)}
.stats-panel.teal-band .stat-light .n{color:#0E7C88}

/* ---------- slim centred CTA band ---------- */
.cta-slim{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(38px,5vw,64px) clamp(24px,4vw,56px);text-align:center;
  background:var(--g-brand);color:#fff;box-shadow:var(--sh-4)}
.cta-slim.teal{background:var(--g-teal)}
.cta-slim .h2,.cta-slim .h3{color:#fff}
.cta-slim p{color:rgba(255,255,255,.85);max-width:680px;margin:16px auto 0;font-size:1rem}
.cta-slim .btn{margin-top:28px;background-image:none;background-color:#fff;color:var(--brand-700);
  box-shadow:0 16px 34px -12px rgba(0,0,0,.4)}
.cta-slim .btn:hover{background-color:#fff;color:var(--brand-800);
  box-shadow:0 24px 46px -14px rgba(0,0,0,.45)}
.cta-slim.teal .btn{color:#0E7C88}

/* ---------- office cards (Contact page) ---------- */
.office-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(20px,2.6vw,28px)}
.office{
  display:grid;grid-template-columns:110px minmax(0,1fr);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.office:hover{transform:translateY(-7px);box-shadow:var(--sh-3)}
.office .flag{position:relative;overflow:hidden;background:var(--bg-tint)}
.office .flag img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.office:hover .flag img{transform:scale(1.07)}
.office .info{padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px}
.office .info b{font-size:1.06rem;color:var(--ink);letter-spacing:-.015em}
.office .info .addr{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin-bottom:6px}
.office .info a{font-size:.84rem;letter-spacing:-.01em;font-weight:600;color:var(--brand-600);
  display:inline-flex;align-items:center;gap:8px;transition:color .3s}
.office .info a:hover{color:var(--brand-800)}
.office .info a i{font-size:.95rem;opacity:.75}
@media(max-width:420px){
  .office{grid-template-columns:1fr}
  .office .flag{height:150px}
}

/* ---------- mission / vision / value trio ---------- */
.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.6vw,30px)}
.mv{padding:34px 28px;border-radius:var(--r-lg);background:#fff;text-align:center;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mv:hover{transform:translateY(-8px);box-shadow:var(--sh-3)}
.mv img{width:76px;height:76px;object-fit:contain;margin:0 auto 18px}
.mv .tile{margin:0 auto 18px}
.mv h3{font-size:1.2rem;margin-bottom:10px;color:var(--brand-700)}
.mv p{font-size:.94rem;color:var(--ink-2);line-height:1.62}

/* a stats row with a single card should not stretch edge to edge */
.stats-row.stats-row-one{max-width:420px;margin-inline:auto}

/* inline mail link inside a coloured CTA band */
.cta-slim .cta-mail{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* =====================================================================
   PART 4 — Solutions pages (cover, intro, tabs, galleries, video modal)
   ===================================================================== */

/* ---------- full-bleed solution cover ----------
   One DOM node instead of three: the three artwork sizes are passed in as
   CSS custom properties and swapped by media query.                      */
.sol-cover{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(78svh,740px);display:flex;align-items:center;
  padding:calc(var(--header-h) + 48px) 0 clamp(110px,13vw,170px);
  background-color:var(--navy);
  background-image:var(--cv);background-size:cover;background-position:center;
  background-repeat:no-repeat;
}
@media(max-width:1024px){.sol-cover{background-image:var(--cv-md,var(--cv))}}
@media(max-width:767px){
  .sol-cover{background-image:var(--cv-sm,var(--cv-md,var(--cv)));
    min-height:auto;padding-bottom:clamp(90px,18vw,130px)}
}
.sol-cover::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(115% 85% at 8% 45%,rgba(6,21,48,.9) 0%,rgba(6,21,48,.5) 48%,rgba(6,21,48,.1) 78%),
    linear-gradient(180deg,rgba(6,21,48,.6) 0%,transparent 32%,rgba(6,21,48,.7) 100%);
}
.sol-cover .wrap{position:relative;z-index:1}
.sol-cover-copy{max-width:660px}
.sol-cover h1{color:#fff;margin:20px 0 18px;text-shadow:0 8px 40px rgba(0,0,0,.4)}
.sol-cover p{color:rgba(255,255,255,.88);font-size:clamp(1rem,1.3vw,1.18rem);font-weight:400;line-height:1.62}
.sol-cover .btn-cover{
  margin-top:32px;background-image:none;background-color:#fff;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.5);
  color:var(--accent,var(--brand-700));
}
.sol-cover .btn-cover:hover{background-color:#fff;box-shadow:0 24px 48px -14px rgba(0,0,0,.55)}

/* ---------- solution intro (badge + copy + framed shot) ---------- */
.sol-intro .frow{align-items:center}
.sol-intro .shot-wrap{position:relative}
.sol-intro .shot{position:relative;z-index:1;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-4);border:8px solid #fff}
.sol-intro .shot img{width:100%}
.sol-intro .plate{position:absolute;inset:auto -18px -18px auto;width:66%;height:66%;
  border-radius:var(--r-xl);background:var(--g-brand-soft);z-index:0}
.play-badge{
  position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;
  display:inline-flex;align-items:center;gap:12px;padding:14px 26px 14px 20px;
  border-radius:var(--r-pill);border:0;cursor:pointer;font:inherit;font-weight:700;
  background:rgba(255,255,255,.9);color:var(--navy);backdrop-filter:blur(10px);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.55);
  transition:all .4s var(--ease);white-space:nowrap;
}
.play-badge i{font-size:1.25rem;color:#E02F2F}
.play-badge:hover{background:#fff;transform:translate(-50%,-50%) scale(1.05);
  box-shadow:0 26px 56px -16px rgba(0,0,0,.6)}

/* ---------- pill tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1),var(--bevel);
  width:max-content;max-width:100%;margin-inline:auto}
.tabs button{
  padding:11px 22px;border-radius:var(--r-pill);border:0;cursor:pointer;
  font-weight:700;font-size:.9rem;color:var(--ink-2);background:transparent;
  transition:all .35s var(--ease);white-space:nowrap}
.tabs button:hover{background:var(--brand-50);color:var(--brand-700)}
.tabs button[aria-selected="true"]{background:var(--g-brand);color:#fff;
  box-shadow:0 10px 22px -10px rgba(10,132,201,.6)}
.tabs.teal button[aria-selected="true"]{background:var(--g-teal);
  box-shadow:0 10px 22px -10px rgba(34,171,185,.6)}
/* the panel sat flush against the pill bar — measured gap 0px at every width */
.tabpanel{margin-top:clamp(26px,3vw,40px)}
.tabpanel[hidden]{display:none}
@media(max-width:620px){
  .tabs{width:100%;justify-content:center}
  .tabs button{padding:10px 16px;font-size:.84rem}
}

/* ---------- media gallery rail ---------- */
/* ---------- on-ground gallery (CareConnect / iConnect) ----------
   Replaces the old .gal rail. That was a horizontal scroll-snap strip with no
   arrows, so items past the third were unreachable without guessing you could
   drag; the videos also carried native `controls`, which painted a black frame
   and a browser toolbar into the tile. Now: an even grid of uniform tiles, each
   a real <button>, opening a lightbox with prev/next.                          */
/* Flex rather than grid so a partial last row centres itself. The tab panels hold
   five, four and four items against a four-up row, and an auto-fill grid left the
   fifth stranded in the left column looking like a mistake. flex-basis pins every
   tile to the same width, flex-grow stays 0 so the orphan never stretches, and
   justify-content centres whatever is left over. */
.gallery{--g:clamp(14px,1.6vw,20px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.gtile{position:relative;display:block;padding:0;border:0;cursor:pointer;
  border-radius:var(--r-md);overflow:hidden;background:var(--bg-tint);
  box-shadow:var(--sh-1),var(--bevel);aspect-ratio:4/3;
  flex:0 0 calc((100% - var(--g)) / 2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
@media (min-width:700px){.gtile{flex-basis:calc((100% - 2 * var(--g)) / 3)}}
@media (min-width:1100px){.gtile{flex-basis:calc((100% - 3 * var(--g)) / 4)}}
.gtile:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.gtile:focus-visible{outline:3px solid var(--brand-500);outline-offset:3px}
.gtile img,.gtile video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.gtile:hover img,.gtile:hover video{transform:scale(1.07)}
/* a wash that only appears on hover, so the photo is unobstructed at rest */
.gtile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,31,68,.45),rgba(10,31,68,0) 55%);
  opacity:0;transition:opacity .4s var(--ease)}
.gtile:hover::after,.gtile:focus-visible::after{opacity:1}
.gzoom{position:absolute;z-index:1;right:12px;bottom:12px;width:38px;height:38px;
  border-radius:12px;display:grid;place-items:center;color:var(--navy);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:var(--sh-1);
  font-size:.9rem;opacity:0;translate:0 8px;transition:all .4s var(--ease)}
.gtile:hover .gzoom,.gtile:focus-visible .gzoom{opacity:1;translate:0 0}
/* the play badge stays visible at rest — it is the only thing marking a video tile
   now that the native controls are gone */
.gplay{position:absolute;z-index:1;inset:0;margin:auto;width:62px;height:62px;
  border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.6rem;
  background:linear-gradient(135deg,rgba(10,132,201,.96),rgba(0,120,183,.96));
  box-shadow:0 14px 30px -8px rgba(6,21,48,.55),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .4s var(--ease)}
.gtile:hover .gplay{transform:scale(1.1)}
.gal-teal .gplay{background:linear-gradient(135deg,rgba(34,171,185,.96),rgba(14,124,136,.96))}

/* ---------- gallery lightbox ---------- */
.glb{position:fixed;inset:0;z-index:1450;display:none;padding:clamp(16px,4vw,44px)}
.glb.open{display:grid;place-items:center}
.glb .scrim{position:absolute;inset:0;background:rgba(6,21,48,.9);backdrop-filter:blur(10px)}
.glb-stage{position:relative;z-index:1;display:grid;gap:14px;justify-items:center;
  max-width:min(1180px,100%);width:100%}
/* shrink-wraps its content, so a portrait or square photo is not framed by black
   bars the way a fixed width:100% panel framed it */
.glb-media{position:relative;max-width:100%;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);line-height:0;background:#000}
.glb-media img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block}
/* a video has no intrinsic size before metadata arrives, so it does need a width */
.glb-media:has(video){width:min(1000px,100%)}
.glb-media video{width:100%;max-height:78vh;display:block;background:#000}
.glb-cap{color:rgba(255,255,255,.86);font-size:.88rem;font-weight:600;text-align:center}
.glb-cap b{color:#fff;font-weight:800;margin-right:8px}
.glb button{border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);
  display:grid;place-items:center;transition:all .3s var(--ease)}
.glb button:hover{background:#fff;color:var(--navy)}
.glb button:focus-visible{outline:3px solid var(--brand-500);outline-offset:3px}
.glb .x{position:absolute;z-index:2;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  width:46px;height:46px;border-radius:14px;font-size:1.05rem}
.glb .nav{position:absolute;z-index:2;top:50%;translate:0 -50%;
  width:52px;height:52px;border-radius:16px;font-size:1.2rem}
.glb .prev{left:clamp(8px,1.6vw,20px)}
.glb .next{right:clamp(8px,1.6vw,20px)}
.glb .nav[hidden]{display:none}
@media (max-width:620px){
  .glb .nav{width:44px;height:44px;top:auto;bottom:-4px;translate:0 0}
  .glb-media{max-height:60vh}
  .glb-media img,.glb-media video{max-height:60vh}
}

/* ---------- highlight / callout pair ---------- */
.callout{
  padding:30px 28px;border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  display:flex;flex-direction:column;gap:14px;
  /* centred: align-items centres the icon tile, text-align centres the copy.
     The accent moved from the left edge to the top because a 5px stripe on one
     side is the only asymmetric thing left once the content is centred — on the
     top edge it caps the card and follows the corner radius. */
  align-items:center;text-align:center;
  border-top:5px solid var(--brand-500)}
.callout.accent-teal{border-top-color:var(--teal)}
.callout.accent-violet{border-top-color:var(--violet)}
.callout.accent-amber{border-top-color:var(--amber)}
.callout h3{font-size:1.15rem}
.callout p{font-size:.95rem;color:var(--ink-2);line-height:1.62}
.callout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(20px,2.6vw,28px)}

/* ---------- "latest project" strip ---------- */
.proj-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 28px;border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9)}
.proj-strip .lbl{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:4px}
.proj-strip b{font-size:1.15rem;color:var(--ink);letter-spacing:-.015em}

/* ---------- video lightbox ---------- */
.vmodal{position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;padding:24px}
.vmodal.open{display:flex}
.vmodal .scrim{position:absolute;inset:0;background:rgba(6,21,48,.85);backdrop-filter:blur(8px)}
.vmodal .frame{position:relative;z-index:1;width:100%;max-width:1000px;aspect-ratio:16/9;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);background:#000}
.vmodal iframe,.vmodal video{width:100%;height:100%;border:0;display:block}
.vmodal .x{position:absolute;z-index:2;top:-52px;right:0;width:42px;height:42px;border-radius:13px;
  border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:1.05rem;
  display:grid;place-items:center;transition:all .3s}
.vmodal .x:hover{background:#fff;color:var(--navy)}
@media(max-width:620px){.vmodal .x{top:auto;bottom:-52px;right:50%;translate:50% 0}}

/* ---------- icon tile holding an inline brand SVG ---------- */
.tile-svg{width:64px;height:64px;border-radius:19px}
.tile-svg svg{width:36px;height:36px;display:block}
/* the JSON/legacy icons carry Crafto utility classes (mb-25px etc.) that no
   longer exist — neutralise any stray margins so they stay centred */
.tile-svg svg{margin:0 !important}

/* ---------- per-solution accent variants for the feature grid ---------- */
.fgrid.violet .fcard::before{background:var(--g-violet)}
.fgrid.violet .tile{background:var(--violet-soft);color:#2C3BB0;border-color:#DCE1FF;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -8px rgba(74,103,255,.45)}
.fgrid.amber .fcard::before{background:var(--g-amber)}
.fgrid.amber .tile{background:var(--amber-soft);color:#C2530A;border-color:#FFE1CB;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -8px rgba(255,138,61,.45)}
.fgrid.eduhub .fcard::before{background:linear-gradient(135deg,#0E5C7E,#001E2E)}
.fgrid.eduhub .tile{background:#E4F1F7;color:#003049;border-color:#CBE4EE;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -8px rgba(0,48,73,.35)}

.eyebrow.violet{color:#2C3BB0}.eyebrow.violet i{color:var(--violet)}
.eyebrow.amber{color:#C2530A}.eyebrow.amber i{color:var(--amber)}
.eyebrow.eduhub{color:#003049}.eyebrow.eduhub i{color:#0E5C7E}
.rule.violet{background:var(--g-violet)}
.rule.amber{background:var(--g-amber)}
.rule.eduhub{background:linear-gradient(135deg,#0E5C7E,#001E2E)}

.tabs.violet button[aria-selected="true"]{background:var(--g-violet);
  box-shadow:0 10px 22px -10px rgba(74,103,255,.6)}
.tabs.amber button[aria-selected="true"]{background:var(--g-amber);
  box-shadow:0 10px 22px -10px rgba(255,138,61,.6)}

.cta-slim.violet{background:var(--g-violet)}
.cta-slim.violet .btn{color:#2C3BB0}
.cta-slim.amber{background:var(--g-amber)}
.cta-slim.amber .btn{color:#C2530A}
.cta-slim.eduhub{background:linear-gradient(135deg,#0E5C7E,#001E2E)}
.cta-slim.eduhub .btn{color:#003049}

.frow.violet .fmedia .plate,.sol-intro .frow.violet .plate{background:linear-gradient(135deg,#EBEEFF,#DCE1FF)}
.frow.amber .fmedia .plate,.sol-intro .frow.amber .plate{background:linear-gradient(135deg,#FFF2E8,#FFE1CB)}
.frow.eduhub .fmedia .plate,.sol-intro .frow.eduhub .plate{background:linear-gradient(135deg,#E4F1F7,#CBE4EE)}

/* ---------- partner logo inside a stats band ---------- */
.cira-logo{position:relative;z-index:1;margin-bottom:24px}
.cira-logo img{max-width:230px;height:auto;margin:0 auto;
  background:#fff;padding:14px 20px;border-radius:var(--r-md);box-shadow:var(--sh-2)}

/* amber is the lightest band — lift the sub-copy for contrast */
.cta-slim.amber p{color:rgba(255,255,255,.95)}
.cta-slim.amber .eyebrow.on-dark{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34)}

/* =====================================================================
   PART 5 — Our Work In Africa / Media Hub / Our Partners
   ===================================================================== */

/* ---------- product spotlight row (Malaz / Jadara) ----------
   One full-width row per product instead of two side-by-side cards. The two
   products have 6 and 4 feature bullets and their artwork has opposite aspect
   ratios (a 923x1769 portrait phone vs a 2502x1531 landscape laptop), so equal
   columns with a shared bottom image panel could never balance: the shorter card
   left a ~700px void and the phone stretched past 1000px tall. A row lets each
   product carry the frame its artwork actually needs.                          */
.psl-stack{display:grid;gap:clamp(26px,3.6vw,44px)}

.psl{position:relative;display:grid;grid-template-columns:1.03fr .97fr;
  align-items:center;gap:clamp(26px,3.6vw,54px);
  padding:clamp(26px,3vw,50px);border-radius:var(--r-xl);background:#fff;
  border:1px solid rgba(228,235,243,.9);box-shadow:var(--sh-2),var(--bevel);
  overflow:clip;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.psl:hover{transform:translateY(-6px);box-shadow:var(--sh-4)}
.psl.flip .psl-body{order:2}
.psl.flip .psl-media{order:1}
@media (min-width:1001px){
  /* a portrait phone needs far less width than a landscape dashboard, so this row
     gives the spare space back to the copy instead of padding the panel */
  .psl:has(.psl-media.portrait){grid-template-columns:1.2fr .8fr}
}

/* ---- text column ---- */
.psl-body{position:relative;z-index:1;min-width:0}
.psl-head{display:flex;align-items:center;gap:16px}
.psl-logo{width:66px;height:66px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:20px;background:var(--g-brand-soft);
  box-shadow:var(--sh-1),var(--bevel)}
.psl-logo img{width:38px;height:38px;object-fit:contain;display:block}
.psl-head b{display:block;font-size:clamp(1.45rem,2vw,1.8rem);font-weight:800;
  letter-spacing:-.025em;color:var(--ink);line-height:1.15}
/* :not(.psl-logo) matters — the logo plate is also a <span> inside .psl-head, so
   without the exclusion this rule outranked .psl-logo (0,1,1 vs 0,1,0), forcing
   display:block over the grid and adding margin-top:5px. The result was the logo
   pinned to the top of its 66px plate with all 28px of slack below it. */
.psl-head span:not(.psl-logo){display:block;margin-top:5px;font-size:.9rem;
  color:var(--brand-600);font-weight:700;line-height:1.45}
.psl-desc{margin-top:20px;font-size:1.02rem;color:var(--ink-2);line-height:1.68}

/* the bullets sit in a self-balancing chip grid, so a 6-item list and a 4-item
   list both read as one tidy block rather than two lists of different length */
.psl-list{margin-top:26px;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:12px}
.psl-list li{display:flex;gap:11px;align-items:flex-start;
  padding:13px 16px;border-radius:16px;background:#F6F9FC;
  border:1px solid rgba(228,235,243,.9);
  font-size:.9rem;color:var(--ink-2);font-weight:600;line-height:1.5}
.psl-list li i{color:var(--brand-500);font-size:1.02rem;line-height:1.45;flex:0 0 auto}
.psl-list li span{min-width:0}

/* ---- media column ---- */
.psl-media{position:relative;border-radius:var(--r-lg);background:var(--g-brand-soft);
  display:grid;place-items:center;padding:clamp(22px,2.4vw,38px);
  box-shadow:var(--bevel);overflow:clip}
.psl-glow{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 68%)}
.psl-media img{position:relative;display:block;
  filter:drop-shadow(0 28px 46px rgba(16,32,63,.22))}
/* a portrait phone mockup is height-driven; a landscape dashboard is width-driven */
.psl-media.portrait img{height:clamp(340px,34vw,470px);width:auto;max-width:100%}
.psl-media.landscape img{width:100%;max-width:600px;height:auto}
/* the numeral is anchored in the media panel, where no copy can collide with it */
.psl-num{position:absolute;top:clamp(14px,1.6vw,22px);left:clamp(16px,1.8vw,26px);
  font-size:.82rem;font-weight:800;letter-spacing:.14em;color:var(--brand-600);
  padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.86);
  box-shadow:var(--sh-1);backdrop-filter:blur(6px)}

/* ---- teal variant (Jadara) ---- */
.psl.teal .psl-logo{background:linear-gradient(135deg,#E4FAFC,#CDF1F5)}
.psl.teal .psl-head span:not(.psl-logo),.psl.teal .psl-num{color:#0E7C88}
.psl.teal .psl-list li i{color:var(--teal)}
.psl.teal .psl-media{background:linear-gradient(135deg,#E4FAFC,#CDF1F5)}

@media (max-width:1000px){
  /* stack, and lead with the artwork — on a narrow screen the mockup is the hook */
  .psl{grid-template-columns:1fr;gap:26px}
  .psl .psl-body,.psl.flip .psl-body{order:2}
  .psl .psl-media,.psl.flip .psl-media{order:1}
  .psl-media.portrait img{height:clamp(320px,62vw,420px)}
}
@media (max-width:560px){
  .psl{padding:20px}
  .psl-media{padding:20px}
  .psl-logo{width:56px;height:56px;border-radius:17px}
  .psl-logo img{width:32px;height:32px}
  .psl-media.portrait img{height:min(300px,70vw)}
}

/* ---------- big-number metric cards on a light background ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2.4vw,26px)}
.metric{padding:30px 24px;border-radius:var(--r-lg);background:#fff;text-align:center;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.metric:hover{transform:translateY(-7px);box-shadow:var(--sh-3)}
.metric .tile{margin:0 auto 18px}
.metric .n{font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--brand-600);display:flex;align-items:baseline;justify-content:center;gap:1px}
.metric .lbl{margin-top:12px;font-size:.92rem;color:var(--ink-2);font-weight:500;line-height:1.55}

/* ---------- featured article cards ---------- */
/* ---------- newsroom cards (Media Hub / Our News) ----------
   Two containers on purpose. The two feature cards stack full width, and the
   remaining teasers flow in a balanced multi-column wall.

   Why a wall and not a grid: in a grid every card in a row is stretched to the
   tallest one, and these teasers carry very uneven copy — the EduVation card's
   paragraph is 382px against ~120px for its neighbours. That leaves only bad
   options. Fixed-ratio photos put ~260px of dead white under the short cards;
   letting the photo absorb the slack instead removed the white but made the
   photos 220px and 480px tall side by side, which read as misalignment. A
   column wall has no row to stretch to, so every photo keeps the same 16:10
   crop, every card is exactly as tall as its own content, and the columns
   still finish level because the browser balances them.                        */
.feature-stack{display:grid;gap:clamp(22px,3vw,30px)}
/* grid-auto-rows:1fr makes every row resolve to the same track height, so all six
   teasers end up identically tall — not just the ones sharing a row. */
.article-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  grid-auto-rows:1fr;gap:clamp(22px,3vw,30px);margin-top:clamp(22px,3vw,30px)}

.article{display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-2),var(--bevel);border:1px solid rgba(228,235,243,.9);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.article:hover{transform:translateY(-8px);box-shadow:var(--sh-4)}
/* absolute fill inside a ratio box: the photo can never drive the card height,
   and every crop is identical no matter how long the copy under it runs */
.article .thumb{position:relative;overflow:hidden;background:var(--bg-tint);
  aspect-ratio:16/10;flex:0 0 auto}
.article .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.article:hover .thumb img{transform:scale(1.06)}
.article .body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column}
.article .body h3{font-size:1.1rem;line-height:1.35;margin-bottom:12px}
.article .body p{font-size:.92rem;color:var(--ink-2);line-height:1.62}

/* Uniform teasers. Two things have to be pinned for the cards to read as a set:
   the title reserves three lines so every excerpt starts on the same baseline
   whether the headline wraps to two lines or three, and the excerpt itself is
   clamped to a fixed three lines. Between them, and with the Read more link
   pinned to the bottom edge, all six cards are the same height with no card
   carrying a blank patch. The clamp class is applied by ec-design.js, so with
   scripting off the copy simply shows in full. */
.article-wall .body h3{min-height:calc(3em * 1.35);
  display:flex;align-items:flex-start}
.article .body p.excerpt{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;overflow:hidden}
.article .body p.excerpt.open{-webkit-line-clamp:unset;overflow:visible}
/* margin-top:auto drops the link onto the card's bottom edge, so the slack in a
   card with short copy sits above a real footer instead of below the last line */
.excerpt-more{margin-top:auto;padding:16px 0 0;border:0;background:none;cursor:pointer;
  align-self:flex-start;font:inherit;font-size:.82rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600)}
.excerpt-more:hover{color:var(--navy);text-decoration:underline}
.excerpt-more:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px;border-radius:6px}
.article .foot{padding-top:18px}


/* Every row is a 1fr track, so while one card is expanded the uniform rows would
   grow together and pad out the five cards nobody opened. ec-design.js flags the
   wall while anything is open and the tracks go back to sizing themselves. */
.article-wall.has-open{grid-auto-rows:auto}
@media (max-width:700px){.article-wall{grid-auto-rows:auto}}

@media (min-width:900px){
  /* The feature card used to have THREE children (thumb, body, foot) against two
     columns, so auto-placement dropped the foot into row 2 / column 1 and left
     row 2 / column 2 empty — that was the large blank block under the paragraph.
     The link now lives inside .body, so this is a plain two-cell row: photo down
     the whole left side, copy + link centred as one block on the right. */
  .article.feature{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    grid-template-rows:minmax(0,1fr)}
  .article.feature .thumb{grid-column:1;grid-row:1;aspect-ratio:auto;min-height:360px}
  .article.feature .body{grid-column:2;grid-row:1;padding:clamp(30px,3vw,44px);
    display:flex;flex-direction:column;justify-content:center}
  .article.feature .body h3{font-size:1.45rem}
}

/* ---------- logo wall ---------- */
/* fixed column counts: both logo groups hold 8 marks, so 4-up gives two clean
   rows instead of auto-fill's 7 + 1 orphan */
.logo-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,20px);
  --logo-h:98px}   /* the cell's inner height: 136px cell - 2x18px padding - 2x1px border */
@media(min-width:576px){.logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:992px){.logo-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
.logo-wall .cell{height:136px;padding:18px 22px;border-radius:var(--r-md);background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--sh-1),var(--bevel);
  display:grid;place-items:center;transition:all .4s var(--ease)}
.logo-wall .cell:hover{box-shadow:var(--sh-2);transform:translateY(-5px)}
/* The marks used to sit at max-height:66px inside a 110px cell, and each source PNG
   also carried 10-67px of baked-in white padding, so the visible logo landed around
   53px in a 283px-wide card. The art in images/partners is pre-trimmed to the mark,
   so the cap can now be the cell's full inner height.

   It has to be a length, not max-height:100%: the img is a grid item, and Chromium
   treats the grid area's height as indefinite while sizing it, so the percentage
   resolved to none and the logos overflowed the cell at ~250px tall. Width was
   fine — percentage max-width against a grid area does resolve. */
/* The img fills the cell's inner box and object-fit:contain scales the mark to fit
   it. max-height/max-width alone only ever SHRINK a replaced element, so the wide
   wordmarks fell back to their ~124px native width and rendered 28px tall. */
.logo-wall .cell img{width:100%;height:var(--logo-h);object-fit:contain}
@media (max-width:575px){
  .logo-wall{--logo-h:82px}
  .logo-wall .cell{height:112px;padding:14px 16px}
}

/* ---------- light form card (Become a Partner) ---------- */
.form-light{background:#fff;border-radius:var(--r-xl);padding:clamp(28px,4vw,44px);
  box-shadow:var(--sh-3),var(--bevel);border:1px solid rgba(228,235,243,.9)}
.form-light .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px 20px}
.form-light .field.span-2{grid-column:1 / -1}
.form-light label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.form-light label .req{color:#D64545}
.form-light input,.form-light select,.form-light textarea{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);background:var(--bg-soft);
  border:1px solid var(--line);color:var(--ink);font:inherit;font-size:.94rem;outline:0;
  transition:all .3s}
.form-light textarea{min-height:120px;resize:vertical}
.form-light input::placeholder,.form-light textarea::placeholder{color:#9AABC2}
.form-light input:focus,.form-light select:focus,.form-light textarea:focus{
  border-color:var(--brand-400);background:#fff;box-shadow:0 0 0 4px rgba(10,132,201,.12)}
.form-light select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background-color:var(--bg-soft);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2366789A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px}
.form-light select:focus{background-color:#fff}
.form-light input:invalid.touched,.form-light select:invalid.touched,
.form-light textarea:invalid.touched{border-color:#E88;box-shadow:0 0 0 4px rgba(214,69,69,.1)}
.form-light .submit-row{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-light .note{font-size:.84rem;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.form-light .form-error{color:#C23B3B}
.form-light .modal-submit{width:auto}
.form-done{display:flex;align-items:flex-start;gap:14px;padding:22px 24px;margin-top:22px;
  border-radius:var(--r-md);background:#E9F9F1;border:1px solid #BFE9D4;color:#12694A;
  font-weight:600;font-size:.94rem}
.form-done i{font-size:1.3rem;margin-top:1px}

/* ---------- screen-reader-only SEO block ---------- */
.sr-only-block{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.stats-panel .stats-h2{color:#fff;max-width:820px;margin-inline:auto}

/* media cards are <button> on the Media Hub — reset the native button chrome */
button.mcard{border:0;padding:0;margin:0;background:var(--navy);cursor:pointer;
  text-align:left;font:inherit;color:inherit;width:100%;display:block}
.mt-64{margin-top:clamp(48px,6vw,72px)}

/* ---------- long-form article / blog prose ---------- */
.prose{max-width:820px;margin-inline:auto}
.prose .h2{margin-bottom:22px}
.prose h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin:34px 0 12px;color:var(--brand-700)}
.prose p{font-size:1.02rem;line-height:1.75;color:var(--ink-2);margin-bottom:18px}
.prose p b{color:var(--ink);font-weight:700}
.prose a{color:var(--brand-600);font-weight:600}
.prose-shot{margin:30px 0 34px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.prose-shot.mb-0{margin-bottom:34px;margin-top:0}
.prose-shot img{width:100%;display:block}

/* secondary "back" button inside a coloured CTA band */
.cta-second{margin-top:14px;margin-left:10px}
@media(max-width:620px){.cta-second{margin-left:0;display:flex}}