:root{
  color-scheme:light;
  /* sampled from the client's mockup: a medium emerald on near-black teal
     grounds, with neutral — not green-tinted — light sections */
  --green:#2F9459;
  --green-d:#237445;
  --mint:#5FD98A;
  --mint-soft:#E6F2EA;
  --night:#010A09;
  --forest:#001413;
  --forest-2:#04201B;
  --ink:#0D1211;
  --ink-2:#434D49;
  --muted:#6F7975;
  --line:#E4E4E4;
  --line-2:#D4D4D4;
  --paper:#FFFFFF;
  --grey:#F4F4F4;
  --grey-2:#EAEAEA;
  --shadow:0 2px 6px rgba(10,16,14,.06),0 18px 36px -24px rgba(10,16,14,.32);
  --r:14px;
  --r-lg:20px;
  /* content width: the side margins are half of what a fixed 1180px column
     would leave — 1180 + (viewport − 1180) / 2 — capped for very wide screens */
  --maxw:min(1680px, calc(590px + 50vw));
  --header-h:84px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Manrope","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit}
svg{display:block}
img{max-width:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:18px}}

.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px
}
.h2{font-size:clamp(26px,3.6vw,40px)}
.h3{font-size:clamp(19px,2.3vw,23px)}
.lead{color:var(--ink-2);font-size:16.5px;max-width:62ch;margin-top:14px}

.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  font-size:15px;font-weight:700;padding:13px 24px;border:1px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s
}
.btn svg{width:16px;height:16px;flex:none}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:var(--green-d);border-color:var(--green-d)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-ghost-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* photographic backdrops */
.shot{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.shot--hero{background-image:url("../img/hero.webp?v=9b3e7e6b");background-position:center 42%}
.shot--loop{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:0;transition:opacity .9s ease;pointer-events:none;max-width:none;
  border:0;display:block
}
.shot--loop.on{opacity:1}
.shot--about{background-image:url("../img/about-valley.webp?v=7d47f1ed")}
.shot--impact{background-image:url("../img/impact-band.webp?v=f164e2b3")}

/* ---------------- header ---------------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-top:env(safe-area-inset-top,0px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease
}
header.site.solid{background:#fff;border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(12,23,17,.07)}
/* over the hero the header is drawn in light ink */
header.site:not(.solid) nav.main a{color:rgba(255,255,255,.86)}
header.site:not(.solid) nav.main a:hover{color:#fff}
header.site:not(.solid) nav.main a.on{color:#fff;border-bottom-color:var(--mint)}
header.site:not(.solid) .lang>button{color:rgba(255,255,255,.92)}
header.site:not(.solid) .burger{border-color:rgba(255,255,255,.45)}
header.site:not(.solid) .burger svg{stroke:#fff}
header.site:not(.solid) .logo .lg-dark{display:none}
header.site.solid .logo .lg-light{display:none}
.bar{display:flex;align-items:center;gap:24px;min-height:var(--header-h)}
.logo{display:flex;align-items:center;margin-right:auto;flex:none}
.logo img{height:54px;width:auto;display:block}
.fbrand .logo img{height:62px}
@media (max-width:560px){.logo img{height:40px}}
nav.main{display:flex;gap:22px}
nav.main a{font-size:15px;font-weight:600;color:var(--ink-2);padding-block:6px;border-bottom:2px solid transparent;transition:.16s}
nav.main a:hover{color:var(--green)}
nav.main a.on{color:var(--green);border-bottom-color:var(--green)}
.lang{position:relative;flex:none}
.lang>button{display:flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink-2);padding:8px 6px}
.lang>button svg{width:11px;height:11px;transition:transform .2s}
.lang.open>button svg{transform:rotate(180deg)}
.lang menu{position:absolute;right:0;top:calc(100% + 6px);margin:0;padding:5px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:116px;display:none}
.lang.open menu{display:block}
.lang menu button{display:block;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink-2);padding:8px 11px;border-radius:7px}
.lang menu button:hover{background:var(--grey)}
.lang menu button[aria-current="true"]{color:var(--green);background:var(--mint-soft)}
.burger{display:none;background:transparent;border:1px solid var(--line-2);border-radius:9px;padding:8px;cursor:pointer}
.burger svg{width:20px;height:20px;stroke:var(--ink)}
.mobnav{display:none;border-top:1px solid var(--line);background:#fff}
.mobnav.open{display:block}
.mobnav a{display:block;padding:13px 0;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
.mobnav a:last-of-type{border-bottom:0}
.mobnav .btn{width:100%;justify-content:center;margin-block:14px 18px}
@media (max-width:1060px){nav.main{display:none}.burger{display:block}.headcta{display:none}}

/* ---------------- hero ---------------- */
.hero{
  position:relative;display:flex;align-items:center;overflow:hidden;background:var(--night);
  min-height:600px;
  min-height:100vh;
  min-height:100svh;
}
.hero .veil{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(6,16,11,.82) 0%,rgba(6,16,11,0) 42%),
    linear-gradient(100deg,rgba(6,16,11,.9) 0%,rgba(6,16,11,.7) 42%,rgba(6,16,11,.25) 78%,rgba(6,16,11,.1) 100%);
}
.hero .wrap{position:relative;padding-block:calc(var(--header-h) + 40px) 76px}
.hero .kicker{color:var(--mint);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px}
.hero h1{font-size:clamp(34px,5.4vw,60px);color:#fff;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero .lede{color:rgba(255,255,255,.82);max-width:58ch;margin-top:24px;font-size:17px}

/* ---------------- countries strip ---------------- */
.strip{background:var(--night);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.striprow{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2.6fr);gap:48px;align-items:center;padding-block:40px}
.striplead p:last-child{color:rgba(255,255,255,.6);font-size:14px;max-width:26ch}
.cstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.cstrip li{display:flex;align-items:center;gap:14px;transition:.2s}
.cstrip .shape{width:60px;height:38px;flex:none}
.shape .edge{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.4;stroke-linejoin:round;transition:stroke .2s}
.cstrip li:hover .shape .edge{stroke:#fff}
.cstrip h3{font-size:15.5px;font-weight:700;color:#fff}
.cstrip p{font-size:13px;color:rgba(255,255,255,.58);line-height:1.4;margin-top:3px}

@media (max-width:980px){
  .striprow{grid-template-columns:1fr;gap:26px;padding-block:32px}
  .cstrip{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:520px){.cstrip{grid-template-columns:1fr}}

/* ---------------- generic sections ---------------- */
.sec{padding-block:84px}
.sec--grey{background:var(--grey)}
.sec--tight{padding-block:56px}
.sec--dark{background:var(--forest);color:#fff}
.sec--dark .eyebrow{color:var(--mint)}
.sec--dark .lead{color:rgba(255,255,255,.78)}
.sechead{margin-bottom:40px;max-width:70ch}
@media (max-width:820px){.sec{padding-block:58px}}

/* about: copy on the left; on the right a photograph bleeding to the screen
   edge, cut by a wide arc, its left side washed green, with a glass lens
   carrying the logo. The lens sits wholly inside the arc at every width. */
.about2{padding-top:0;background:linear-gradient(180deg,#F5F8F4 0%,#FFFFFF 78%)}
.ab-top{position:relative;overflow:hidden}
.ab-top>.wrap{position:relative;z-index:2;padding-block:100px 96px}
.ab-copy{max-width:min(560px,43%)}
.ab-copy .eyebrow{color:#2A4A3A}
.ab-copy .eyebrow::after{content:"";display:block;width:44px;height:2px;background:var(--green);margin-top:14px}
.ab-copy .h2{font-size:clamp(34px,4.1vw,56px);line-height:1.04;letter-spacing:-.032em;margin-top:22px}
.ab-copy .h2 span,.ab-copy .h2 em{display:block}
.ab-copy .h2 em{font-style:normal;color:#17573A}
.ab-copy>p:not(.eyebrow){color:var(--ink-2);margin-top:18px;font-size:16.5px;line-height:1.65}
.ab-copy .h2+p{margin-top:26px}
.ab-copy .btns{align-items:center;gap:22px;margin-top:34px}

.btn-forest{background:#14532D;color:#fff;border-color:#14532D;padding:15px 28px}
.btn-forest:hover{background:#0E3F22;border-color:#0E3F22}
.ab-link{display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:700;color:var(--ink)}
.ab-ring{
  width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line-2);transition:border-color .2s,background .2s
}
.ab-ring svg{width:16px;height:16px;color:#14532D}
.ab-link:hover .ab-ring{border-color:#14532D;background:#EAF2EC}

.ab-visual{position:absolute;top:0;bottom:0;right:0;width:53%;z-index:1}
.ab-photo{
  position:absolute;inset:0;
  background:url("../img/about-green.webp?v=ce9296c6") 64% center/cover no-repeat;
  clip-path:ellipse(100% 66% at 100% 50%)
}
.ab-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,88,55,.74) 0%,rgba(24,88,55,.52) 22%,rgba(24,88,55,.14) 40%,rgba(24,88,55,0) 52%)
}
.ab-lens{
  position:absolute;top:50%;left:4%;height:clamp(260px,58%,460px);aspect-ratio:1;transform:translateY(-50%);
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 32%,rgba(150,214,170,.30),rgba(22,86,54,.42) 70%);
  border:1.5px solid rgba(255,255,255,.42);
  box-shadow:inset 0 0 70px rgba(255,255,255,.08),0 20px 50px -30px rgba(4,30,18,.6);
  -webkit-backdrop-filter:blur(3px) saturate(1.15);backdrop-filter:blur(3px) saturate(1.15)
}
.ab-lens img{width:64%;height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.28))}

.statrow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:8px;
  padding-top:40px;border-top:1px solid var(--line)
}
.statrow li{display:grid;gap:4px}
.statrow .ic{width:26px;height:26px;color:var(--green);margin-bottom:8px}
.statrow b{font-size:clamp(28px,3.4vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1}
.statrow span{font-size:13.5px;color:var(--muted);line-height:1.45}

@media (max-width:1000px){
  .ab-top>.wrap{padding-block:44px 40px}
  .ab-copy{max-width:none}
  .ab-visual{position:relative;inset:auto;width:auto;height:clamp(280px,58vw,440px);margin:40px 24px 0}
  .ab-photo{clip-path:inset(0 round 24px)}
  .ab-photo::after{background:linear-gradient(90deg,rgba(24,88,55,.6) 0%,rgba(24,88,55,.2) 45%,rgba(24,88,55,0) 65%)}
  .ab-lens{left:6%;height:70%}
  .statrow{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:560px){.ab-visual{margin-inline:18px}}
@media (max-width:480px){.statrow{grid-template-columns:1fr}}

/* presence: the photograph carries the map. It is shown at its own 2 : 1
   proportion (height = half the width), so nothing is cropped and the whole
   map stays in view at any width; copy sits on the left, and the country
   cards ride up over the photograph's lower edge onto the dark ground. */
.presence{position:relative;overflow:hidden;background:#06140E;color:#fff}
.pr-bg{
  position:absolute;left:0;right:0;top:0;height:50vw;
  background:url("../img/presence-bg.webp?v=c9bfa63b") center top/100% auto no-repeat
}
.pr-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,16,11,.82) 0%,rgba(4,16,11,.5) 26%,rgba(4,16,11,0) 44%),
    linear-gradient(0deg,#06140E 0%,rgba(6,20,14,.6) 14%,rgba(6,20,14,0) 32%)
}
.pr-wrap{position:relative;padding-block:clamp(70px,6.5vw,110px) 72px}
/* the copy area is tall enough to push the cards to just below the map */
.pr-copy{min-height:calc(50vw - 150px - clamp(70px,6.5vw,110px))}
.pr-copy{max-width:min(460px,34%)}
.pr-copy .eyebrow{color:#fff;letter-spacing:.3em}
.pr-copy .eyebrow::after{content:"";display:block;width:44px;height:2px;background:var(--mint);margin-top:16px}
.pr-copy .h2{margin-top:22px;font-size:clamp(32px,3.4vw,50px);line-height:1.05;letter-spacing:-.035em}
.pr-copy .h2 span,.pr-copy .h2 em{display:block}
.pr-copy .h2 em{font-style:normal;color:var(--mint)}
.pr-text{margin-top:22px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.86)}
.pr-copy .btn{margin-top:30px}

.pr-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:40px 0 0;padding:0;list-style:none}
.pr-card{
  position:relative;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  background:rgba(6,26,18,.86);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s
}
.pr-card:hover{transform:translateY(-6px);border-color:rgba(95,217,138,.45)}
.pr-photo{aspect-ratio:2.1/1;overflow:hidden;position:relative}
.pr-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.pr-card:hover .pr-photo img{transform:scale(1.05)}
.pr-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,rgba(6,26,18,.9),rgba(6,26,18,0))}
.pr-body{position:relative;padding:4px 22px 22px;margin-top:-26px;display:grid;gap:8px;flex:1;align-content:start}
.pr-body h3{display:flex;align-items:center;gap:12px;font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.02em}
.flagdot{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 6px 14px rgba(0,0,0,.35)}
.flagdot svg{width:100%;height:100%;display:block}
.pr-body p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.pr-body .pr-tags{font-size:12.5px;color:var(--mint);letter-spacing:.02em}

@media (max-width:1100px){
  .pr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-copy{max-width:min(440px,40%)}
}
/* on a phone the cards would sit over the map, so the map gets its own frame:
   the photograph zoomed to the map's area (map spans ~39–97% × 33–66% of it) */
.pr-map{display:none}
@media (max-width:720px){
  .pr-wrap{padding-block:64px 32px;display:grid;gap:28px}
  .pr-bg{display:none}
  .pr-copy{max-width:none;min-height:0}
  .pr-map{
    display:block;aspect-ratio:16/10;border-radius:18px;
    background:url("../img/presence-bg.webp?v=c9bfa63b") 95% 48%/165% auto no-repeat;
    border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px -26px rgba(0,0,0,.8)
  }
  .pr-cards{grid-template-columns:1fr;margin-top:0}
}

/* shared infinite strip (partner logos): the set is drawn twice and the track
   slides by one set; it pauses under the pointer or keyboard focus */
.marquee{
  overflow:hidden;padding-block:6px 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)
}
.mtrack{display:flex;width:max-content;animation:marquee 64s linear infinite}
.marquee:hover .mtrack,
.marquee:focus-within .mtrack{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-inline:24px}
}

/* services: a vertical slider driven by page scroll ---------------------------
   Static by default (a list of cards). JS adds .is-live: the track becomes tall,
   the stage pins under the header, and scrolling through the track swaps the
   card in front. Neighbours' titles show above and below as faint ghosts. */
.svc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:40px;align-items:end;margin-bottom:34px}
.svc-head .lead{margin-top:0;max-width:44ch;justify-self:end}
.svc-body{position:relative}
.svc-cards{display:grid;gap:22px}
.svc-dots{display:none}

.slide{
  position:relative;overflow:hidden;border-radius:24px;background:#0B2A1F;color:#fff;
  min-height:420px;isolation:isolate;
  box-shadow:0 30px 60px -34px rgba(4,20,14,.6),0 0 0 1px rgba(255,255,255,.04) inset
}
/* the banners are drawn for this card: empty green on the left for the text,
   the subject on the right — so the image spans the whole card */
.slide-media{position:absolute;inset:0;z-index:-1}
.slide-media img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.slide-media::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,36,25,.55) 0%,rgba(8,36,25,.22) 34%,rgba(8,36,25,0) 52%)
}
.slide-body{
  height:100%;min-height:inherit;max-width:min(560px,58%);
  display:flex;flex-direction:column;justify-content:center;gap:16px;padding:44px 48px
}
.slide-meta{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.slide-meta b{color:#fff;font-weight:800}
.slide-meta span{padding-left:12px;border-left:1px solid rgba(255,255,255,.3)}
.slide-ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(95,217,138,.14);border:1px solid rgba(95,217,138,.35)
}
.slide-ic .ic{width:22px;height:22px;color:var(--mint)}
.slide h3{font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.025em}
.slide-body>p:not(.slide-meta){color:rgba(255,255,255,.8);font-size:16px;line-height:1.55;max-width:46ch}
.slide-more{align-self:flex-start;margin-top:8px}

/* "learn more" opens the full list over the illustration side */
.slide-list{
  position:absolute;inset:0 0 0 auto;width:min(560px,62%);z-index:3;
  background:rgba(6,22,16,.94);backdrop-filter:blur(10px);
  border-left:1px solid rgba(255,255,255,.08);
  padding:44px 44px 40px;overflow:auto;
  transform:translateX(102%);transition:transform .45s cubic-bezier(.2,.8,.2,1);visibility:hidden
}
.slide.open .slide-list{transform:none;visibility:visible}
.slide-list-t{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.slide-list ul{display:grid;gap:11px}
.slide-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.88)}
.slide-list li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--mint)}
.slide-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff
}
.slide-close svg{width:16px;height:16px}
.slide-close:hover{background:rgba(255,255,255,.16)}

/* --- live mode: a deck that turns by itself --------------------------------
   Every slide carries a role; the previous and next cards sit behind the active
   one, shrunk a little and offset so only an edge shows above and below.
   Scaling happens around the centre, so the offset adds back half of what the
   scale took off (card-h × (1 − s) / 2) to land the edge exactly --peek away. */
.svc.is-live .svc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.svc.is-live .svc-deck{position:relative}
.svc.is-live .svc-cards{
  --card-h:clamp(360px,50svh,450px);--peek:34px;
  display:block;position:relative;height:calc(var(--card-h) + 2 * var(--peek))
}
/* Same look as before, only smoother: a curve that eases in as well as out
   (the old one started abruptly), and the stacking order flips halfway
   through the move instead of at its start, so the incoming card no longer
   jumps in front of the outgoing one. */
.svc.is-live .slide{
  position:absolute;left:0;right:0;top:var(--peek);height:var(--card-h);min-height:0;
  opacity:0;pointer-events:none;transform:scale(.8);
  transition:transform .85s cubic-bezier(.4,0,.2,1),opacity .7s ease,
             filter .85s cubic-bezier(.4,0,.2,1),z-index 0s linear .4s
}
.svc.is-live .slide[data-role="active"]{opacity:1;transform:none;z-index:3;pointer-events:auto}
.svc.is-live .slide[data-role="prev"]{
  opacity:1;z-index:2;filter:brightness(.62) saturate(.8);
  transform:translateY(calc(-1 * var(--peek) - var(--card-h) * .035)) scale(.93)
}
.svc.is-live .slide[data-role="next"]{
  opacity:1;z-index:2;filter:brightness(.62) saturate(.8);
  transform:translateY(calc(var(--peek) + var(--card-h) * .035)) scale(.93)
}
.svc.is-live .slide[data-role="far-prev"]{z-index:1;transform:translateY(calc(-2 * var(--peek) - var(--card-h) * .07)) scale(.86)}
.svc.is-live .slide[data-role="far-next"]{z-index:1;transform:translateY(calc(2 * var(--peek) + var(--card-h) * .07)) scale(.86)}

/* invisible click targets over the two peeking edges */
.peek{display:none}
.svc.is-live .peek{
  display:block;position:absolute;left:4%;right:4%;height:var(--peek);z-index:4;
  background:none;border:0;padding:0;cursor:pointer
}
.svc.is-live .peek--prev{top:0}
.svc.is-live .peek--next{bottom:0}

.svc.is-live .svc-dots{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.svc-dots button{
  width:10px;height:10px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--line-2);border:0;transition:background .2s,transform .2s
}
.svc-dots button:hover{background:var(--green)}
.svc-dots button[aria-current="true"]{background:var(--green);transform:scale(1.35)}

@media (max-width:900px){
  .svc-head{grid-template-columns:1fr;gap:12px}
  .svc-head .lead{justify-self:start}
  .slide-body{max-width:100%;padding:34px 30px}
  .slide-media img{object-position:84% center}
  .slide-media::before{background:linear-gradient(90deg,rgba(8,36,25,.9) 0%,rgba(8,36,25,.72) 55%,rgba(8,36,25,.4) 100%)}
  .slide-list{width:100%;border-left:0}
  .svc.is-live .svc-body{grid-template-columns:1fr}
  .svc.is-live .svc-dots{display:flex;justify-content:center;gap:12px}
}
@media (max-width:560px){
  .slide h3{font-size:24px}
  .svc.is-live .svc-cards{--card-h:clamp(380px,58svh,470px);--peek:26px}
}

/* impact band */
.impact{position:relative;overflow:hidden;background:var(--night);color:#fff}
.impact .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,16,11,.92) 0%,rgba(6,16,11,.78) 50%,rgba(6,16,11,.55) 100%)}
.impact .wrap{position:relative;padding-block:72px}
.impact .eyebrow{color:var(--mint)}
.impact p{color:rgba(255,255,255,.8);max-width:52ch;margin-top:16px}
.itop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.istats{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.istats b{display:block;font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--mint)}
.istats span{display:block;font-size:13.5px;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.4}
@media (max-width:900px){.itop{grid-template-columns:1fr;gap:36px}}

/* experience cards */
.pgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.pgrid3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pgrid3{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.pcard .img{aspect-ratio:16/10;background:var(--grey-2);overflow:hidden}
.pcard .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pcard:hover .img img{transform:scale(1.03)}
.pcard .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard h3{font-size:16.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
@media (min-width:641px){.pcard h3{min-height:2.7em}}
.pcard p{font-size:14px;color:var(--muted);line-height:1.55}

/* team: centred heading, a row of portrait cards with the name over the
   photo; one card in focus (green frame, lifted). White ground, site greens. */
.team2{background:#fff}
.t-head{text-align:center;max-width:760px;margin:0 auto 46px}
.t-head .eyebrow{color:var(--ink-2);letter-spacing:.32em;margin-bottom:0}
.t-head .eyebrow::after{content:"";display:block;width:44px;height:2px;background:var(--green);margin:16px auto 0}
.t-head .h2{margin-top:20px;font-size:clamp(34px,4.4vw,58px);letter-spacing:-.035em}
.t-head .h2 em{font-style:normal;color:var(--green)}
.t-head .lead{margin:18px auto 0;max-width:64ch}

.t-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center}
.t-arrow{
  width:52px;height:52px;border-radius:50%;flex:none;cursor:pointer;display:grid;place-items:center;
  background:#fff;border:1.5px solid var(--line-2);color:var(--ink);transition:border-color .2s,color .2s,background .2s
}
.t-arrow svg{width:18px;height:18px}
.t-arrow--prev svg{transform:scaleX(-1)}
.t-arrow:hover{border-color:var(--green);color:var(--green);background:var(--mint-soft)}

.t-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:center;padding-block:18px 10px}
.t-card{
  position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;cursor:pointer;
  background:linear-gradient(165deg,#1E5E3F 0%,#10382A 55%,#0A2419 100%);isolation:isolate;
  box-shadow:0 18px 40px -26px rgba(8,30,20,.45);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,outline-color .3s;
  outline:2px solid transparent;outline-offset:3px
}
/* default user mark until real portraits are supplied */
.t-avatar{
  position:absolute;left:50%;top:13%;width:50%;aspect-ratio:1;transform:translateX(-50%);z-index:-2;
  border-radius:50%;overflow:hidden;display:block;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s
}
.t-avatar svg{width:100%;height:100%;display:block;fill:rgba(220,240,228,.5)}
.t-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(5,22,15,.9) 0%,rgba(5,22,15,.45) 30%,rgba(5,22,15,0) 50%)
}
.t-card:hover .t-avatar{transform:translateX(-50%) scale(1.04);background:rgba(255,255,255,.1)}
.t-card.is-active{transform:translateY(-12px);outline-color:var(--green);box-shadow:0 34px 60px -30px rgba(23,87,58,.6)}

.t-info{position:absolute;left:22px;right:72px;bottom:22px;color:#fff}
.t-info h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.15;letter-spacing:-.015em}
.t-role{margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.45;color:rgba(255,255,255,.78)}
.t-line{display:block;width:28px;height:2px;background:var(--mint);margin-top:14px}

.t-plus{
  position:absolute;right:18px;bottom:18px;z-index:3;width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(95,217,138,.75);transition:background .2s,transform .3s
}
.t-plus svg{width:16px;height:16px}
.t-plus:hover{background:rgba(95,217,138,.2)}
.t-card.open .t-plus{transform:rotate(45deg)}

/* "+" turns the card over to the profile text */
.t-bio{
  position:absolute;inset:0;z-index:2;padding:22px 20px 72px;overflow:auto;
  background:rgba(7,30,20,.95);color:rgba(255,255,255,.9);font-size:13.5px;line-height:1.55;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s
}
.t-card.open .t-bio{opacity:1;visibility:visible}

.t-progress{display:flex;justify-content:center;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.t-progress button{width:48px;height:4px;border-radius:4px;border:0;padding:0;cursor:pointer;background:var(--line);transition:background .25s,width .25s}
.t-progress button:hover{background:var(--line-2)}
.t-progress button[aria-current="true"]{background:var(--green);width:64px}

/* narrow: the row scrolls sideways, one card centred at a time */
@media (max-width:900px){
  .t-stage{grid-template-columns:1fr}
  .t-arrow{display:none}
  .t-row{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
    margin-inline:-24px;padding:18px 24px 10px;scrollbar-width:none
  }
  .t-row::-webkit-scrollbar{display:none}
  .t-card{flex:0 0 min(320px,74%);scroll-snap-align:center}
}
@media (max-width:560px){.t-row{margin-inline:-18px;padding-inline:18px}}

/* partners */
.plead{color:rgba(255,255,255,.75);max-width:62ch;margin-bottom:26px}
/* partner logos: white marks on the dark band, looping on their own */
.marquee--logos{padding-block:18px 8px}
.marquee--logos .mtrack{animation-duration:46s}
.lset{display:flex;align-items:center;gap:72px;padding-right:72px;margin:0}
.lset li{flex:none;display:flex;align-items:center;height:64px}
.lset img{display:block;opacity:.78;transition:opacity .2s}
.lset li:hover img{opacity:1}
@media (max-width:640px){.lset{gap:48px;padding-right:48px}.marquee--logos .mtrack{animation-duration:38s}}
@media (prefers-reduced-motion:reduce){.lset[aria-hidden]{display:none}}

/* partner with us */
.partnerwith{position:relative;overflow:hidden;background:var(--forest);color:#fff}
.partnerwith .shot{opacity:.5}
.partnerwith .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,15,.95) 0%,rgba(10,22,15,.86) 48%,rgba(10,22,15,.6) 100%)}
.partnerwith .wrap{position:relative;padding-block:76px}
.partnerwith .eyebrow{color:var(--mint)}
.partnerwith p{color:rgba(255,255,255,.8);max-width:46ch;margin-top:14px}
.partnerwith .btn{margin-top:30px}
.pwgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.pwcols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pwcols li{display:grid;gap:6px}
.pwcols .ic{width:26px;height:26px;color:var(--mint);margin-bottom:8px}
.pwcols b{font-size:15.5px;font-weight:700}
.pwcols span{font-size:13.5px;color:rgba(255,255,255,.68);line-height:1.45}
@media (max-width:900px){.pwgrid{grid-template-columns:1fr;gap:38px}.pwcols{grid-template-columns:1fr}}


/* footer */
footer.site{background:var(--night);color:rgba(255,255,255,.72);font-size:14.5px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1.3fr);gap:56px;padding-block:64px 56px}
.fgrid h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.fgrid ul{display:grid;gap:10px}
.fgrid a:hover{color:var(--mint)}
.fbrand p{margin-top:18px;max-width:34ch;line-height:1.55}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-block:20px 28px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.55)}

/* footer contacts: each line carries its own icon tile */
.fcontact ul{display:grid;gap:20px}
.fcontact li{display:flex;gap:14px;align-items:flex-start}
.fi{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(95,217,138,.1);border:1px solid rgba(95,217,138,.24)
}
.fi .ic{width:19px;height:19px;color:var(--mint)}
.fcontact small{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:3px
}
.fcontact li>span:last-child{color:#fff;font-size:15px;line-height:1.5;padding-top:1px}
.fcontact a{border-bottom:1px solid rgba(255,255,255,.2);transition:.18s}
.fcontact a:hover{color:var(--mint);border-bottom-color:var(--mint)}
footer.site{scroll-margin-top:var(--header-h)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:38px}.fcontact{grid-column:1 / -1}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

html{scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(var(--header-h) + 10px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
    .shot--loop{display:none}
}