/* SVAX — grade cascade
   Grounds step from stone at the edges to white at the centre of an argument.
   Green is structure, not decoration. Hover sharpens; it does not lift. */

:root{
  color-scheme: light;

  /* brand */
  --green:#2E6B43; --vivid:#26A269; --deep:#1B4A2E; --pale:#E9F1EC; --mint:#83CEA6;
  --gold:#B8955A;

  /* grade cascade — D (outermost) through A (cleanest) */
  --gD:#EFEDE6; --gC:#F5F4EF; --gB:#FAF9F6; --gA:#FFFFFF;
  --paper:#FFFFFF; --stone:#F5F4EF; --stone2:#EAE8E1;

  --ink:#0C1A13; --ink2:#4A5A53; --ink3:#626D68;
  --line:#E3E6E1; --line2:#CED6D0; --line3:#B6C2BA;

  --night:#0C231A; --night2:#123023;

  --disp:"Sora","Manrope","Segoe UI",system-ui,sans-serif;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --ar-disp:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;
  --ar:"IBM Plex Sans Arabic","Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;

  /* type scale — 1.25 above body, 1.125 below */
  --t-hero:clamp(2.6rem,6.2vw,5.4rem);
  --t-h1:clamp(2.2rem,4.8vw,3.9rem);
  --t-h2:clamp(1.8rem,3.4vw,2.75rem);
  --t-h3:1.32rem;
  --t-lede:clamp(1.06rem,1.3vw,1.18rem);
  --t-body:1.0rem;
  --t-sm:.92rem;
  --t-xs:.8rem;

  --wrap:1300px; --pad:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
.chapter{scroll-margin-top:78px}
#top{scroll-margin-top:0}
body{margin:0;background:var(--gB);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility;overflow-x:hidden}
html[dir="rtl"] body{font-family:var(--ar)}

h1,h2,h3,h4{margin:0;font-family:var(--disp);text-wrap:balance}
h1,h2{font-weight:300;letter-spacing:-.035em;line-height:1.04}
h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.2}
html[dir="rtl"] h1,html[dir="rtl"] h2{font-family:var(--ar-disp);font-weight:500;letter-spacing:0;line-height:1.34}
html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] .pull,html[dir="rtl"] .stat b{font-family:var(--ar-disp);letter-spacing:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--vivid);outline-offset:3px;border-radius:2px}
::selection{background:var(--pale);color:var(--deep)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* category label — used where a section genuinely needs naming, not above every heading */
.eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
         color:var(--green);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:0 0 auto}
html[dir="rtl"] .eyebrow{letter-spacing:.03em;font-size:.82rem;text-transform:none}
.on-dark .eyebrow{color:var(--mint)}


/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:90;background:rgba(252,252,251,.82);
     backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid transparent;
     transition:border-color .3s,background .3s}
.nav[data-stuck="true"]{border-bottom-color:var(--line);background:rgba(252,252,251,.94)}
.nav-in{display:flex;align-items:center;gap:22px;min-height:84px;transition:min-height .3s var(--ease)}
.nav[data-stuck="true"] .nav-in{min-height:70px}
.logo img{height:44px;width:auto;transition:height .3s var(--ease)}
.nav[data-stuck="true"] .logo img{height:38px}
.links{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.links > a,.drop > button{position:relative;padding:10px 15px;font-size:.9rem;font-weight:600;
  color:var(--ink2);background:none;border:0;font-family:inherit;cursor:pointer;
  transition:color .2s;white-space:nowrap}
html[dir="rtl"] .drop > button{font-family:var(--ar)}
.links > a::after,.drop > button::before{content:"";position:absolute;inset-inline:15px;bottom:4px;
  height:1px;background:var(--green);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .32s var(--ease-out)}
.links > a:hover,.drop > button:hover{color:var(--green)}
.links > a[aria-current="true"]{color:var(--green)}
.links > a[aria-current="true"]::after{transform:scaleX(1)}
.links > a:hover::after,.drop:hover > button::before{transform:scaleX(1)}
.drop{position:relative}
.drop > button::after{content:"";display:inline-block;width:5px;height:5px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);margin-inline-start:8px;opacity:.6}
.menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:252px;background:#fff;
  border:1px solid var(--line);border-radius:2px;box-shadow:0 30px 60px -34px rgba(12,26,19,.4);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .28s var(--ease-out),visibility .22s}
.drop:hover .menu,.drop:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:11px 14px;font-size:.9rem;color:var(--ink2);font-weight:500;
        transition:color .2s,padding-inline-start .25s var(--ease-out)}
.menu a:hover{color:var(--green);padding-inline-start:20px}
.lang{font-size:.78rem;font-weight:700;letter-spacing:.06em;border:1px solid var(--line2);
  background:none;color:var(--ink2);padding:9px 16px;border-radius:99px;cursor:pointer;
  white-space:nowrap;transition:border-color .22s,color .22s;font-family:inherit}
.lang:hover{border-color:var(--green);color:var(--green)}
.burger{display:none;background:none;border:1px solid var(--line2);border-radius:2px;
        width:46px;height:42px;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:1.5px;
  background:var(--ink);margin-inline:auto;content:"";position:relative}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
@media(max-width:1100px){
  .burger{display:block;margin-inline-start:auto}
  .links{position:fixed;inset:84px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    padding:14px var(--pad) 28px;border-bottom:1px solid var(--line);
    box-shadow:0 24px 50px -30px rgba(12,26,19,.5);display:none;
    max-height:calc(100dvh - 84px);overflow:auto}
  .links[data-open="true"]{display:flex}
  .links > a::after,.drop > button::before{display:none}
  .menu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 6px 12px}
  .nav .btn.sm{display:none}
}

/* ---------------- buttons: fill sweeps from the leading edge ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:99px;font-weight:700;font-size:.92rem;letter-spacing:.005em;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);overflow:hidden;
  transition:color .28s var(--ease),border-color .28s;white-space:nowrap;isolation:isolate}
html[dir="rtl"] .btn{font-family:var(--ar)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);
  transform-origin:inline-start;transition:transform .42s var(--ease-out)}
.btn:hover::before{transform:scaleX(1)}
.fill{background:var(--green);color:#fff}
.fill::before{background:var(--deep)}
.line{border-color:var(--line2);color:var(--ink);background:transparent}
.line::before{background:var(--green)}
.line:hover{color:#fff;border-color:var(--green)}
.on-dark .line{border-color:rgba(255,255,255,.3);color:#fff}
.on-dark .line::before{background:#fff}
.on-dark .line:hover{color:var(--deep);border-color:#fff}
.btn.sm{padding:11px 22px;font-size:.85rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;background:var(--gD);padding:88px 0 0;
      min-height:min(90vh,900px);display:flex;flex-direction:column;justify-content:flex-end}
#girih{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(239,237,230,0) 0%,rgba(239,237,230,.35) 58%,var(--gD) 100%)}
.hero > *{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:88px;
           align-items:end;padding-bottom:72px}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:48px;align-items:start}}
.hero h1{font-weight:300;font-size:var(--t-hero);line-height:1.0;letter-spacing:-.045em;
         margin:28px 0 0;max-width:15ch}
html[dir="rtl"] .hero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.3;max-width:18ch;font-weight:500}
.hero .lede{margin-top:30px;font-size:var(--t-lede);color:var(--ink2);max-width:44ch;line-height:1.72}
.hero .est{font-size:.9rem;font-weight:500;color:var(--ink3);display:flex;
           align-items:center;gap:16px;letter-spacing:0}
.hero .est::before{content:"";width:36px;height:1px;background:var(--green)}
html[dir="rtl"] .hero .est{font-size:.92rem}

/* section index — a real list of destinations, so the arrow is the control, not decoration */
.hero-index{display:grid;border-top:1px solid var(--line2)}
.hero-index a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:16px;padding:22px 2px;border-bottom:1px solid var(--line2);transition:color .22s}
.hero-index a::before{content:"";position:absolute;inset-block:0;inset-inline-start:-14px;width:2px;
  background:var(--green);transform:scaleY(0);transform-origin:center;
  transition:transform .34s var(--ease-out)}
.hero-index a:hover{color:var(--green)}
.hero-index a:hover::before{transform:scaleY(1)}
.hero-index .l{font-size:1.02rem;font-weight:700;transition:transform .34s var(--ease-out)}
.hero-index a:hover .l{transform:translateX(8px)}
html[dir="rtl"] .hero-index a:hover .l{transform:translateX(-8px)}
.hero-index i{font-style:normal;color:var(--line3);transition:transform .34s var(--ease-out),color .22s}
.hero-index a:hover i{transform:translateX(6px);color:var(--green)}
html[dir="rtl"] .hero-index i{transform:scaleX(-1)}
html[dir="rtl"] .hero-index a:hover i{transform:scaleX(-1) translateX(6px)}

/* stats */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2);
       background:var(--gA)}
.stat{padding:42px 24px 44px;text-align:center;border-inline-end:1px solid var(--line);position:relative}
.stat::before{content:"";position:absolute;top:-1px;inset-inline:0;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease-out)}
.stat:hover::before{transform:scaleX(1)}
.stat:last-child{border-inline-end:0}
.stat b{display:block;font-family:var(--disp);font-weight:300;font-size:clamp(2.2rem,3.8vw,3.2rem);
  line-height:1;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:14px;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--ink3)}
html[dir="rtl"] .stat span{letter-spacing:.02em;font-size:.82rem;text-transform:none}
@media(max-width:720px){.strip{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-inline-end:0}}

/* ---------------- page head ---------------- */
.phead{position:relative;padding:104px 0 64px;background:var(--gD);
       border-bottom:1px solid var(--line);overflow:hidden}
.phead h1{font-size:var(--t-h1);max-width:17ch}
.phead .lede{margin-top:26px;color:var(--ink2);font-size:var(--t-lede);max-width:58ch;line-height:1.72}

/* ---------------- sections: the cascade ---------------- */
.sec{padding:112px 0}
.sec.tight{padding:84px 0}
.sec.deep{padding:140px 0}
.alt{background:var(--gC)}
.head{max-width:60ch;margin-bottom:8px}
.head h2{font-size:var(--t-h2)}
.head .lede,.lede{color:var(--ink2)}
.head .lede{margin-top:24px;font-size:var(--t-lede);line-height:1.72;max-width:56ch}
.two{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:34px}}
.two p+p{margin-top:20px}
.two p{color:var(--ink2);font-size:1.02rem}
.pull{font-family:var(--disp);font-weight:300;font-size:clamp(1.7rem,3.2vw,2.6rem);
      line-height:1.2;letter-spacing:-.035em;color:var(--ink);max-width:20ch}
html[dir="rtl"] .pull{font-weight:500;line-height:1.42}
.sig{margin-top:30px!important;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
     font-weight:700;color:var(--green)!important}
html[dir="rtl"] .sig{letter-spacing:.02em;text-transform:none;font-size:.88rem}
.note{margin-top:36px;color:var(--ink2);max-width:68ch;font-size:1rem;line-height:1.72}
.muted{color:var(--ink2);font-size:var(--t-sm)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photo.wide img{aspect-ratio:21/8}
.photo.tallpic img{aspect-ratio:3/4}
.hexphoto{aspect-ratio:1/1.08;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
          background:var(--pale)}
.hexphoto img{width:100%;height:100%;object-fit:cover}

/* ---------------- dark statement band ---------------- */
.band{position:relative;background:var(--night);color:#E6EFE9;padding:132px 0;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(72% 92% at 82% 8%,rgba(38,162,105,.2),transparent 62%)}
.band > .wrap{position:relative}
.band .pull{color:#fff;font-weight:300;font-size:clamp(1.9rem,4vw,3.3rem);max-width:19ch}
.band p{color:#A5BBAF}
.band .sig{color:var(--mint)!important}
.band .rule{width:56px;height:1px;background:var(--gold);margin:0 0 36px}
.band-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:76px;align-items:end}
@media(max-width:900px){.band-grid{grid-template-columns:1fr;gap:36px}}
.band-grid p+p{margin-top:20px}

/* ---------------- value chain ---------------- */
.chain{margin-top:60px;overflow-x:auto;padding-bottom:6px}
.chain svg{display:block;min-width:840px;width:100%;height:auto}
.clbl{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
      font-weight:700;fill:#4A5A53}
.cnum{font-family:var(--disp);font-size:9px;font-weight:600;fill:#26A269;letter-spacing:.12em}
.cown{font-family:var(--sans);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
      font-weight:700;fill:#2E6B43}
html[dir="rtl"] .clbl{font-family:var(--ar);letter-spacing:0;font-size:11.5px;text-transform:none}
html[dir="rtl"] .cown{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:10.5px}
.pulse{stroke-dasharray:64 900;animation:flow 7s linear infinite}
@keyframes flow{to{stroke-dashoffset:-964}}

/* ---------------- divisions ---------------- */
.divs{margin-top:64px;border-top:1px solid var(--line2)}
.div{position:relative;display:grid;grid-template-columns:1fr 1.25fr auto;gap:48px;
     align-items:start;padding:46px 0;border-bottom:1px solid var(--line2)}
.div::before{content:"";position:absolute;inset-block:0;inset-inline-start:calc(var(--pad) * -1);
  width:2px;background:var(--green);transform:scaleY(0);transform-origin:top;
  transition:transform .42s var(--ease-out)}
.div:hover::before{transform:scaleY(1)}
.div h3{font-size:var(--t-h3);transition:transform .42s var(--ease-out)}
.div:hover h3{transform:translateX(10px)}
html[dir="rtl"] .div:hover h3{transform:translateX(-10px)}
.div p{color:var(--ink2);font-size:1rem;line-height:1.72}
.div .go{align-self:center;width:50px;height:50px;border:1px solid var(--line2);border-radius:50%;
  display:grid;place-items:center;color:var(--ink3);position:relative;overflow:hidden;
  transition:border-color .3s,color .3s}
.div .go::before{content:"";position:absolute;inset:0;background:var(--green);border-radius:50%;
  transform:scale(0);transition:transform .42s var(--ease-out)}
.div:hover .go{border-color:var(--green);color:#fff}
.div:hover .go::before{transform:scale(1)}
.div .go i{font-style:normal;position:relative;z-index:1}
html[dir="rtl"] .div .go i{display:inline-block;transform:scaleX(-1)}
@media(max-width:900px){.div{grid-template-columns:1fr;gap:14px}
  .div .go{justify-self:start;margin-top:6px}}

/* closing line under the strategy band — a figure, so it sits closer to the
   display face than to body copy, but stays quiet enough not to read as a stat */
.nsfoot{margin-top:38px;max-width:60ch;font-family:var(--disp);font-weight:300;
        font-size:1.12rem;line-height:1.6;color:var(--ink2)}
.nsfoot::before{content:"";display:block;width:34px;height:2px;background:var(--green);
        margin-bottom:18px}
html[dir="rtl"] .nsfoot{font-family:var(--ar-disp);font-weight:400;font-size:1.05rem}
@media(max-width:700px){.nsfoot{font-size:1rem}}

/* ---------------- timeline ---------------- */
.tl{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line2)}
.tlc{position:relative;padding:44px 34px 0 0}
.tlc::before{content:"";position:absolute;top:6px;inset-inline-start:0;width:11px;height:11px;
  border-radius:50%;background:var(--gA);border:1.5px solid var(--line3)}
.tlc.build::before{background:var(--gold);border-color:var(--gold)}
.tlc.live::before{background:var(--vivid);border-color:var(--vivid)}
.tlc .yr{font-family:var(--disp);font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:300;
  letter-spacing:-.03em;line-height:1.16;color:var(--ink);font-variant-numeric:tabular-nums}
html[dir="rtl"] .tlc .yr{font-family:var(--ar-disp);font-weight:400;letter-spacing:0}
.tlc h3{font-size:1.14rem;margin-top:18px}
.tlc .place{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
            color:var(--ink3);margin:8px 0 14px}
html[dir="rtl"] .tlc .place{letter-spacing:.02em;text-transform:none}
.tlc p{color:var(--ink2);font-size:.97rem;line-height:1.72;margin-top:10px}
@media(max-width:900px){.tl{grid-template-columns:1fr}.tl::before{display:none}
  .tlc{padding:0 0 42px 26px;border-inline-start:1px solid var(--line2)}
  .tlc::before{inset-inline-start:-6px;top:4px}}

.pill{display:inline-block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;padding:6px 14px;border-radius:99px;border:1px solid var(--line2);color:var(--ink2)}
.pill.build{color:#8A6A2E;border-color:rgba(184,149,90,.5);background:rgba(184,149,90,.08)}
html[dir="rtl"] .pill{letter-spacing:.02em;text-transform:none;font-size:.82rem}


.capt{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
       color:var(--ink3);margin:38px 0 4px}
html[dir="rtl"] .capt{letter-spacing:.02em;text-transform:none;font-size:.86rem}
.caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
      gap:0;border-top:1px solid var(--line2)}
.caps.wide{grid-template-columns:repeat(3,1fr);margin-top:56px}
@media(max-width:820px){.caps,.caps.wide{grid-template-columns:1fr}}
.caps li{position:relative;padding:17px 2px 17px 26px;border-bottom:1px solid var(--line);
         font-size:.98rem;color:var(--ink2)}
html[dir="rtl"] .caps li{padding:17px 26px 17px 2px}
.caps li::before{content:"";position:absolute;inset-inline-start:2px;top:26px;width:10px;height:1px;
                 background:var(--green)}
.caps.wide li{font-size:1rem}

/* ---------------- photo band ---------------- */
.pband{position:relative;min-height:580px;display:grid;align-items:end;color:#fff;overflow:hidden}
.pband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82)}
.pband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,35,26,.08) 0%,rgba(12,35,26,.58) 56%,rgba(12,35,26,.92) 100%)}
.pband .wrap{position:relative;z-index:1;padding-bottom:68px;padding-top:124px}
.pband .eyebrow{color:var(--mint)}
.pband h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);max-width:20ch}
.pband p{color:#BDD0C5;margin-top:20px;max-width:56ch;font-size:1.04rem}
.pband.tall{min-height:660px}
.pband .btns{margin-top:28px}

/* ---------------- partners ---------------- */
.marq{overflow:hidden;margin:52px 0 0;
      mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:12px;width:max-content;animation:slide 56s linear infinite}
.marq:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{display:flex;align-items:center;padding:18px 30px;white-space:nowrap;
  border:1px solid var(--line2);background:#fff;font-family:var(--disp);font-weight:500;
  font-size:.95rem;letter-spacing:-.01em;color:var(--ink)}

/* ranked list — the numbering is real: partners are ordered by scale */
.plist{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
       border:1px solid var(--line);margin-top:44px}
@media(max-width:760px){.plist{grid-template-columns:1fr}}
.prow{background:#fff;padding:26px 30px;display:flex;align-items:center;gap:24px;
      position:relative;transition:background .3s}
.prow::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--green);transform:scaleY(0);transition:transform .34s var(--ease-out)}
.prow:hover{background:var(--gC)}
.prow:hover::before{transform:scaleY(1)}
.pi{font-family:var(--disp);font-size:.76rem;font-weight:600;color:var(--ink3);letter-spacing:.1em;
    min-width:26px;font-variant-numeric:tabular-nums}
.prow h3{font-size:1.04rem;font-weight:600}
.prow > div{display:grid;gap:5px}
.prow .muted{font-size:.9rem}

/* ---------------- partner belt ----------------
   A continuous strip rather than a grid. The per-logo widths computed by
   tools/logo_sizes.py matter MORE here than they did in the grid: on a belt
   the eye compares each logo against the one sliding past next to it, so
   uneven optical weight would read as a fault rather than as variety.

   The animation is scoped to html.js because the seamless loop depends on the
   strip being duplicated by script. Without JS it degrades to a plain
   horizontally scrollable strip, which is honest rather than broken. */
.pbelt{overflow:hidden;margin-top:52px;background:#fff;
       border-block:1px solid var(--line);
       -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
       mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pbelt-track{display:flex;width:max-content}
html.js .pbelt-track{animation:beltL 70s linear infinite}
html.js[dir="rtl"] .pbelt-track{animation-name:beltR}
@keyframes beltL{to{transform:translateX(-50%)}}
@keyframes beltR{to{transform:translateX(50%)}}
/* stop it when someone wants to read or click a cell, including by keyboard */
.pbelt:hover .pbelt-track,.pbelt:focus-within .pbelt-track{animation-play-state:paused}

.pcell{flex:0 0 234px;min-height:156px;display:grid;grid-template-rows:66px 1fr;
  justify-items:center;text-align:center;padding:26px 20px 22px;position:relative;
  border-inline-end:1px solid var(--line);transition:background .3s,opacity .35s var(--ease)}
.pbelt:hover .pcell{opacity:.42}
.pbelt:hover .pcell:hover{opacity:1}
.pc-m{align-self:center;display:grid;place-items:center;width:100%}
.pc-m img{width:var(--w,120px);max-width:100%;height:auto;
  filter:grayscale(1) contrast(1.04);opacity:.78;transition:filter .4s,opacity .4s}
.pcell:hover .pc-m img{filter:none;opacity:1}
.pc-t{align-self:start;padding-top:4px;font-family:var(--disp);font-weight:600;
  font-size:.82rem;letter-spacing:-.01em;color:var(--ink2);line-height:1.4;transition:color .3s}
html[dir="rtl"] .pc-t{font-family:var(--ar-disp);letter-spacing:0;font-size:.86rem}
.pcell.has-link{cursor:pointer}
.pcell.has-link:hover{background:var(--gC)}
.pcell.has-link:hover .pc-t{color:var(--green)}
.pc-go{position:absolute;top:10px;inset-inline-end:11px;font-size:.78rem;color:var(--green);
  opacity:0;transform:translateY(3px);transition:opacity .28s,transform .3s var(--ease-out)}
.pcell.has-link:hover .pc-go,.pcell.has-link:focus-visible .pc-go{opacity:1;transform:none}
@media(max-width:600px){.pcell{flex-basis:186px;min-height:142px}}

/* Someone who has asked for less motion gets a strip they scroll themselves. */
@media(prefers-reduced-motion:reduce){
  html.js .pbelt-track{animation:none}
  .pbelt{overflow-x:auto}
}

.wrap > .logowall:first-child,.wrap > .plist:first-child,
.wrap > .mlist:first-child,.wrap > .board:first-child,
.wrap > .cos:first-child,.wrap > .tl:first-child{margin-top:0}

/* ---------------- cards ---------------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:#fff;padding:32px 30px;position:relative}
.card::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .45s var(--ease-out)}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:1.02rem;margin-bottom:12px;color:var(--green)}
.card p{color:var(--ink2);font-size:.98rem;line-height:1.72}
.card p+p{margin-top:10px}

.board{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);margin-top:48px}
@media(max-width:860px){.board{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.board{grid-template-columns:1fr}}
.bcell{background:#fff;padding:32px 26px;transition:background .3s}
.bcell:hover{background:var(--gC)}
.bcell b{display:block;font-family:var(--disp);font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.bcell b.ar{display:none;font-family:var(--ar-disp)}
html[dir="rtl"] .bcell b{display:none}
html[dir="rtl"] .bcell b.ar{display:block}
.bcell span{display:block;margin-top:10px;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
            font-weight:700;color:var(--ink3)}
html[dir="rtl"] .bcell span{letter-spacing:.02em;text-transform:none;font-size:.84rem}

/* group companies */
.cos{display:flex;flex-wrap:wrap;gap:1px;margin-top:44px;background:var(--line);
     border:1px solid var(--line)}
.co{flex:1 1 380px;max-width:620px;background:#fff;padding:32px 34px;display:grid;
    grid-template-columns:auto 1fr;gap:28px;align-items:center;position:relative}
.co::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .45s var(--ease-out)}
.co:hover::before{transform:scaleX(1)}
.co-mark{flex:0 0 auto;width:88px;height:88px;display:grid;place-items:center;background:var(--gC)}
.co-mark img{max-width:58px;max-height:58px;width:auto;object-fit:contain;
             filter:grayscale(1);opacity:.8;transition:filter .4s,opacity .4s}
.co:hover .co-mark img{filter:none;opacity:1}
.co h3{font-size:1.06rem;margin-bottom:7px}

/* ---------------- the team ---------------- */
/* No cards and no borders — portrait, name, title sitting on the page ground.
   Six across so the whole company fits in four clean rows. */
.lead{display:grid;grid-template-columns:repeat(6,1fr);gap:38px 24px;margin-top:56px}
@media(max-width:1180px){.lead{grid-template-columns:repeat(5,1fr);gap:34px 22px}}
@media(max-width:980px){.lead{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.lead{grid-template-columns:repeat(3,1fr);gap:28px 18px}}
@media(max-width:460px){.lead{grid-template-columns:repeat(2,1fr)}}
.ld{margin:0;display:flex;flex-direction:column}
.ld-p{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(180deg,var(--gC) 0%,var(--stone2) 100%);
  transition:background .5s var(--ease)}
.ld:hover .ld-p{background:linear-gradient(180deg,var(--pale) 0%,#DCEAE1 100%)}
.ld-p img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  transition:transform .9s var(--ease-out)}
.ld:hover .ld-p img{transform:scale(1.035)}
.ld-p::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease-out);z-index:1}
.ld:hover .ld-p::after{transform:scaleX(1)}
.noface{position:absolute;inset:0;display:grid;place-items:center}
.noface img{width:58%;height:auto;object-fit:contain;opacity:.26;transform:none}
.ld:hover .noface img{opacity:.4;transform:none}
.ld figcaption{padding-top:15px;flex:1;display:flex;flex-direction:column}
.ld b{display:block;font-family:var(--disp);font-size:.97rem;font-weight:600;letter-spacing:-.02em;
      line-height:1.28;transition:color .3s}
html[dir="rtl"] .ld b{font-family:var(--ar-disp);letter-spacing:0}
.ld:hover b{color:var(--green)}
.ld figcaption span{display:block;padding-top:7px;font-size:.79rem;
                    color:var(--ink3);line-height:1.45}
.ld .li{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;align-self:flex-start;font-size:.74rem;
  font-weight:700;letter-spacing:.04em;color:var(--green);transition:opacity .25s}
.ld .li:hover{opacity:.66}
.ld .li svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
.subh{font-size:var(--t-h3)}

/* ---------------- gallery ---------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;margin-top:44px}
.gal figure{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--pale)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.gal figure:hover img{transform:scale(1.045)}

.fgal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
@media(max-width:1000px){.fgal{grid-template-columns:repeat(2,1fr)}}
.fgal figure{margin:0;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--stone2)}
.fgal figure:nth-child(1),.fgal figure:nth-child(6){grid-column:span 2;aspect-ratio:8/5}
.fgal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.fgal figure:hover img{transform:scale(1.035)}
.fgal figcaption{position:absolute;inset:auto 0 0 0;padding:48px 18px 16px;font-size:.8rem;
  font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(12,35,26,.8));
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .45s var(--ease-out)}
.fgal figure:hover figcaption{opacity:1;transform:none}

/* ---------------- media list ---------------- */
.mlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.mitem{background:#fff;padding:32px;display:block;position:relative;transition:background .3s}
.mitem::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--green);transform:scaleY(0);transition:transform .34s var(--ease-out)}
.mitem:hover{background:var(--gC)}
.mitem:hover::before{transform:scaleY(1)}
.outlet{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--green)}
html[dir="rtl"] .outlet{letter-spacing:.02em;text-transform:none;font-size:.8rem}
.mitem h3{font-size:1.16rem;margin:12px 0 16px;max-width:62ch;font-weight:600}
.more{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
      color:var(--green);display:inline-flex;align-items:center;gap:8px}
html[dir="rtl"] .more{letter-spacing:.02em;text-transform:none;font-size:.86rem}
.more i{font-style:normal;transition:transform .28s var(--ease-out)}
.mitem:hover .more i{transform:translateX(5px)}
html[dir="rtl"] .more i{transform:scaleX(-1)}
html[dir="rtl"] .mitem:hover .more i{transform:scaleX(-1) translateX(5px)}

/* ---------------- forms ---------------- */
.form{max-width:600px;margin-top:32px}
.field{margin-bottom:24px}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:9px}
.req{color:#B03A26;font-style:normal}
.field input,.field select,.field textarea{width:100%;padding:15px 16px;font:inherit;font-size:.97rem;
  border:1px solid var(--line2);border-radius:2px;background:#fff;color:var(--ink);
  transition:border-color .25s,box-shadow .25s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(46,107,67,.13)}
.field textarea{resize:vertical}
.hint{font-size:.83rem;color:var(--ink3);margin-top:8px}
.consent{font-size:.83rem;color:var(--ink3);margin-top:22px;max-width:52ch;line-height:1.62}
.mail{color:var(--green);font-weight:700;position:relative}
.mail::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1px;
  background:currentColor;opacity:.35;transition:opacity .25s}
.mail:hover::after{opacity:1}

/* ---------------- cta ---------------- */
.cta{position:relative;background:var(--night);color:#fff;padding:132px 0;overflow:hidden;text-align:center}
#girih2{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.cta::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 82% at 50% 100%,rgba(38,162,105,.26),transparent 66%)}
.cta .wrap{position:relative;z-index:1}
.cta .rule{width:56px;height:1px;background:var(--gold);margin:0 auto 32px}
.cta h2{color:#fff;font-size:clamp(2rem,4.2vw,3.3rem);max-width:18ch;margin-inline:auto;font-weight:300}
html[dir="rtl"] .cta h2{font-weight:500}
.cta p{color:#A5BBAF;max-width:54ch;margin:24px auto 0;font-size:1.04rem}
.cta .btns{justify-content:center}

/* ---------------- footer ---------------- */
.foot{background:var(--night);color:#A5BBAF;padding:84px 0 34px;border-top:1px solid rgba(255,255,255,.07)}
.fgrid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px}
@media(max-width:880px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
/* The mark is dark-green artwork on transparency, so on the night ground it
   disappears. It used to sit on a white plate, which read as a printing error
   floating in the footer. Knocked out to solid white instead — the standard
   treatment for a logo on a dark field. */
.flogo{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.93}
.faddr{margin-top:20px;font-size:.92rem;line-height:1.9;max-width:34ch;color:#86A093}
.foot h4{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#7E9C8B;
         margin-bottom:20px;font-weight:700;font-family:var(--sans)}
html[dir="rtl"] .foot h4{letter-spacing:.02em;font-size:.84rem;font-family:var(--ar);text-transform:none}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:12px}
.foot li a{font-size:.93rem;color:#A5BBAF;transition:color .22s,padding-inline-start .28s var(--ease-out)}
.foot li a:hover{color:var(--mint);padding-inline-start:6px}
.foot .mail{color:var(--mint)}
.social{display:flex;gap:10px;margin-top:24px}
.social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;
          transition:background .25s,border-color .25s}
.social a:hover{background:rgba(131,206,166,.14);border-color:var(--mint)}
.social svg{width:16px;height:16px;fill:#A5BBAF;transition:fill .25s}
.social a:hover svg{fill:var(--mint)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:64px;
       padding-top:26px;border-top:1px solid rgba(255,255,255,.09);font-size:.76rem;color:#7E9C8B}

/* ---------------- motion: one load moment, then meaning only ---------------- */
.js .lift > *{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease-out) var(--d,0ms),transform .7s var(--ease-out) var(--d,0ms)}
.js .lift.in > *{opacity:1;transform:none}
.js .chain.lift{opacity:0;transition:opacity .9s var(--ease-out)}
.js .chain.lift.in{opacity:1}
.js .chain.lift > *{opacity:1;transform:none}

/* hero load sequence */
.js .hero .est,.js .hero h1,.js .hero .lede,.js .hero .btns,.js .hero-index{opacity:0}
.js .hero.ready .est{animation:rise .8s var(--ease-out) .05s forwards}
.js .hero.ready h1{animation:rise .95s var(--ease-out) .16s forwards}
.js .hero.ready .lede{animation:rise .9s var(--ease-out) .34s forwards}
.js .hero.ready .btns{animation:rise .9s var(--ease-out) .46s forwards}
.js .hero.ready .hero-index{animation:rise 1s var(--ease-out) .56s forwards}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.route[hidden]{display:none!important}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .js .lift > *,.js .chain.lift{opacity:1;transform:none}
  .js .hero .est,.js .hero h1,.js .hero .lede,.js .hero .btns,.js .hero-index{opacity:1}
}

/* Skip link. One page, eighteen thousand pixels, nine nav items in front of
   the content — a keyboard user should not have to tab through all of it.
   Hidden until focused, then it slides down over the header. */
.skip{position:fixed;inset-inline-start:0;top:0;z-index:200;
      padding:13px 20px;background:var(--deep);color:#fff;
      font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:-.01em;
      border-end-end-radius:8px;text-decoration:none;
      transform:translateY(-130%);transition:transform .22s var(--ease-out)}
.skip:focus{transform:none;outline:2px solid var(--vivid);outline-offset:-2px}
html[dir="rtl"] .skip{font-family:var(--ar-disp);font-weight:500}

/* Footer column headings: h3 for a correct heading order, sized as before. */
.fh{font-family:var(--disp);font-weight:600;font-size:.82rem;letter-spacing:.04em;
    text-transform:uppercase}

/* ---------------- team: two rows, then the rest on demand ----------------
   The collapse is applied by JS on load and scoped to html.js, so with
   scripting off every person is visible and the button never appears. That is
   the right fallback for a section whose whole job is to show the team.
   "Two rows" tracks the column count: 6 / 5 / 4 / 3 / 2 columns => 12 / 10 /
   8 / 6 / 4 people. display:none also takes the hidden figures out of the tab
   order, which is what we want while they are collapsed. */
html.js .lead[data-collapsed="true"] .ld:nth-child(n+13){display:none}
@media(max-width:1180px){html.js .lead[data-collapsed="true"] .ld:nth-child(n+11){display:none}}
@media(max-width:980px) {html.js .lead[data-collapsed="true"] .ld:nth-child(n+9){display:none}}
@media(max-width:720px) {html.js .lead[data-collapsed="true"] .ld:nth-child(n+7){display:none}}
@media(max-width:460px) {html.js .lead[data-collapsed="true"] .ld:nth-child(n+5){display:none}}

.morewrap{display:flex;justify-content:center;margin-top:44px;
          padding-top:38px;border-top:1px solid var(--line)}
.moreb{display:inline-flex;align-items:center;gap:11px;padding:13px 26px;
  border:1px solid var(--line2);border-radius:99px;background:transparent;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:.88rem;letter-spacing:-.01em;
  color:var(--ink2);transition:border-color .26s,color .26s}
html[dir="rtl"] .moreb{font-family:var(--ar-disp);font-weight:500}
.moreb:hover{border-color:var(--green);color:var(--green)}
/* chevron, drawn rather than shipped as an icon; it flips when expanded */
.moreb i{width:7px;height:7px;border-right:1.7px solid currentColor;
  border-bottom:1.7px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease-out)}
.moreb[aria-expanded="true"] i{transform:rotate(225deg) translate(-2px,-2px)}
.moreb .mb-b{display:none}
.moreb[aria-expanded="true"] .mb-a{display:none}
.moreb[aria-expanded="true"] .mb-b{display:inline}