/* 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}}
.nssrc{margin-top:14px;font-size:.82rem;letter-spacing:.01em}
.nssrc a{color:var(--ink3);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s}
.nssrc a:hover{color:var(--green);border-bottom-color:var(--green)}

/* ---------------- 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;align-items:center;flex-wrap:wrap}
.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}

/* A page that is not the home page starts straight under the sticky header,
   so it needs air the home page gets from the hero. */
.pagetop{padding-top:78px}
@media(max-width:760px){.pagetop{padding-top:48px}}

/* ---------------- patient safety ----------------
   No form on this page by design; the routes are two plain cards. */
.pvnote{margin-top:48px;border-inline-start:3px solid var(--green);background:var(--gC);
  padding:22px 26px}
.pvnote h2{font-family:var(--disp);font-weight:500;font-size:1.12rem;letter-spacing:-.01em}
.pvnote p{margin-top:8px;color:var(--ink2);max-width:70ch}
.pvlist{list-style:none;margin-top:18px;display:grid;gap:12px}
/* the marker is the short green rule in ::before, so the native bullet goes */
.pv-sec p, .pvinc > p, .pvpriv > p, .two > div > .subh + p{margin-top:12px;color:var(--ink2);max-width:62ch}
.pvinc .subh, .pvpriv .subh, .two .subh{margin-bottom:0}
.pvlist.cols{grid-template-columns:1fr 1fr;gap:12px 40px;margin-top:22px}
@media(max-width:760px){.pvlist.cols{grid-template-columns:1fr}}
.pvlist li{position:relative;padding-inline-start:22px;color:var(--ink2);line-height:1.6}
.pvlist li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:8px;height:1px;
  background:var(--green)}
.pvinc{margin-top:64px;border-top:1px solid var(--line);padding-top:38px}
.pvroutes{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:860px){.pvroutes{grid-template-columns:1fr}}
.pvroutes .card{background:#fff;padding:30px 32px;margin:0}
.pvroutes .card h2{font-family:var(--disp);font-weight:500;font-size:1.18rem;letter-spacing:-.01em}
.pvroutes .card p{margin-top:12px;max-width:52ch}
.pvpriv{margin-top:64px;max-width:72ch}

/* The About photograph. An arch rather than the old hexagon: the hexagon was
   cutting heads off at the top corners and reading as a decoration in its own
   right. Radius is reserved for pills everywhere else on the site; this is the
   one deliberate exception, and it is a shape, not a rounded box. */
.archphoto{aspect-ratio:4/5;overflow:hidden;
  border-start-start-radius:999px;border-start-end-radius:999px}
.archphoto img{width:100%;height:100%;object-fit:cover}

/* ---------------- academy ---------------- */
.acstrip{margin-top:48px;grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.acstrip{grid-template-columns:1fr}}
.acplaces{grid-template-columns:repeat(2,1fr);margin-top:26px}
@media(max-width:860px){.acplaces{grid-template-columns:1fr}}
.acplaces .card{padding:28px 30px}
.acplaces .card h3{font-family:var(--disp);font-weight:500;font-size:1.12rem;letter-spacing:-.01em}
.acplaces .card p{margin-top:10px;color:var(--ink2);max-width:46ch}

/* ---------------- media: LinkedIn block ---------------- */
.liblock{margin-top:72px;padding-top:44px;border-top:1px solid var(--line)}
.lihead{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
@media(max-width:860px){.lihead{grid-template-columns:1fr;gap:22px;align-items:start}}

/* LinkedIn's own embeds. Each is a live window onto the real post, so it
   carries its own chrome and its own scrollbar; the cell only sets the box. */
.lifeed{margin-top:36px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.liframe{height:var(--h,620px);background:var(--gC);border:1px solid var(--line);overflow:hidden}
.liframe iframe{width:100%;height:100%;display:block;border:0}
.liblock p{margin-top:12px;color:var(--ink2);max-width:52ch}
.liblock .eyebrow{margin-bottom:18px}
.lipost{margin-top:0}

/* ---------------- ISO line in the footer ---------------- */
/* The certification mark rides in the social row at icon height. It carries
   its own white panel, which it needs: the mark is ISO blue and would vanish
   against the deep green. The certificate number lives in the alt text. */
.fiso{width:40px;height:40px;background:#fff;border-radius:3px;overflow:hidden;
  display:grid;place-items:center}
.fiso img{width:40px;height:auto;display:block}

/* ---------------- the adverse event form ---------------- */
.pvsplit{margin-top:64px}
.fgroup{margin:34px 0 4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--green)}
.form .fgroup:first-child{margin-top:18px}
html[dir="rtl"] .fgroup{letter-spacing:0;text-transform:none;font-size:.9rem}
.consentbox{display:flex;gap:12px;align-items:flex-start;margin-top:26px;
  font-size:.86rem;line-height:1.55;color:var(--ink2);cursor:pointer}
.consentbox input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--green)}

/* ---------------- product formats, in the facility block ---------------- */
.fmt{margin:30px 0 0}
.fmt img{width:100%;max-width:380px;display:block;background:var(--gA)}
.fmt figcaption{margin-top:10px;font-size:.82rem;color:var(--ink3);max-width:380px}

/* The Chairman's cell spans the row above the four directors. */
.board .bcell:first-child{grid-column:1/-1}
.place.area{margin-top:6px;color:var(--ink3)}

/* The Academy gallery reuses the facility grid: three frames, the first
   spanning two columns at 8/5 so the row bottoms out level with the pair of
   4/5 frames beside it. */
.acgal{margin-top:40px}
.acgal figure:nth-child(6){grid-column:auto;aspect-ratio:4/5}

.acbundles{grid-template-columns:repeat(2,1fr);margin-top:26px}
@media(max-width:860px){.acbundles{grid-template-columns:1fr}}
.acbundles .card{padding:30px}
.acbundles .card h3{font-family:var(--disp);font-weight:500;font-size:1.12rem;letter-spacing:-.01em}
.acbundles .card p{margin-top:10px;color:var(--ink2);max-width:46ch}
.mods{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.mods li{padding:11px 0 11px 22px;border-bottom:1px solid var(--line);position:relative;
  font-size:.95rem;color:var(--ink)}
.mods li:last-child{border-bottom:0;padding-bottom:0}
.mods li::before{content:"";position:absolute;left:4px;top:1.15em;width:7px;height:1px;
  background:var(--green)}
html[dir="rtl"] .mods li{padding-left:0;padding-right:22px}
html[dir="rtl"] .mods li::before{left:auto;right:4px}

/* The four talent development programmes. Four across on the desktop grid,
   inheriting .board's own breakpoints. */
.tdcards{margin-top:26px}
.tdcards .card{padding:28px 26px}
.tdcards .card h3{font-family:var(--disp);font-weight:500;font-size:1.06rem;letter-spacing:-.01em}
.tdcards .card p{margin-top:10px;color:var(--ink2);font-size:.95rem}
.tdline{margin-top:30px;font-family:var(--disp);font-weight:500;font-size:1.3rem;
  letter-spacing:-.015em;color:var(--green)}
html[dir="rtl"] .tdline{font-family:var(--ar-disp)}
@media(max-width:620px){.tdline{font-size:1.1rem}}


/* The Academy gallery is two frames from v48, not three. Three columns so the
   8/5 lead and the 4/5 portrait beside it bottom out level; one column below
   1000px, where a half-width orphan would otherwise sit next to a hole. */
.acgal{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){
  .acgal{grid-template-columns:1fr}
  .acgal figure:nth-child(1){grid-column:auto;aspect-ratio:8/5}
  .acgal figure:nth-child(2){aspect-ratio:4/5}
}


/* ---- v51 ---------------------------------------------------------------- */

/* The arch carries the team group photograph from v51. At 4/5 with a full dome
   it cut the people at both ends off; 6/5 holds the whole group, and a fixed
   220px top still reads as an arch rather than a rounded box. */
.archphoto.team{aspect-ratio:6/5;
  border-start-start-radius:220px;border-start-end-radius:220px}

/* Five facility frames: a wide one and two portraits, then two wide. Both rows
   bottom out level and nothing is cropped away from its native shape. */
.fg5 figure:nth-child(4),.fg5 figure:nth-child(5){grid-column:span 2;aspect-ratio:8/5}

/* The team is grouped by department from v51, so the heading carries the
   department and each person carries their job title. */
.tgrp{grid-column:1/-1;margin:14px 0 0;font-family:var(--disp);font-weight:600;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--green);
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.tgrp:first-child{margin-top:0}
html[dir="rtl"] .tgrp{letter-spacing:0;text-transform:none;font-size:.95rem;
  font-family:var(--ar-disp);font-weight:500}


/* ---- v52: the Academy page ---------------------------------------------- */

/* Four pathways read as a set, ten modules read as a sequence. CSS counters,
   so the numerals cannot drift out of step with the content. */
.acways{counter-reset:way}
.acways .card{counter-increment:way}
.acways .card h3::before{content:counter(way,decimal-leading-zero);
  display:block;font-family:var(--disp);font-weight:300;font-size:.78rem;
  letter-spacing:.14em;color:var(--green);opacity:.65;margin-bottom:10px}

.acbundles{counter-reset:mod}
.mods li{counter-increment:mod}
.acbundles .mods li{padding-left:40px}
.acbundles .mods li::before{content:counter(mod,decimal-leading-zero);
  width:auto;height:auto;background:none;top:50%;transform:translateY(-50%);
  left:0;right:auto;
  font-family:var(--disp);font-weight:400;font-size:.72rem;letter-spacing:.1em;
  color:var(--green);opacity:.7;font-variant-numeric:tabular-nums}
/* The sheet's own RTL rules for .mods are (0,2,2) and set left/right and the
   padding explicitly, so logical properties here are simply overridden. These
   have to be written out at (0,3,2) or the numerals land on top of the Arabic,
   which is exactly what they did on the first pass. */
html[dir="rtl"] .acbundles .mods li{padding-left:0;padding-right:40px}
html[dir="rtl"] .acbundles .mods li::before{left:auto;right:0}

/* The strip sits above its section here rather than under a heading, so it
   needs its own top rule to close the gap under the band. */
.acstrip{margin-top:0;grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.acstrip{grid-template-columns:1fr 1fr}}

/* The certificate text and the portrait beside it: the photograph should not
   tower over two short paragraphs. */
.sec.alt .split .photo.tallpic{max-width:360px}
@media(max-width:900px){.sec.alt .split .photo.tallpic{max-width:none}}

/* Gallery captions are revealed on hover, which on a touch screen means
   never: on a phone the only explanation of what each photograph shows is
   invisible. They are painted in whenever the device has no hover, which also
   covers the facility gallery on the home page. */
@media (hover: none){
  .fgal figcaption{opacity:1;transform:none}
}

/* The sheet scopes subheading spacing to `.two > div > .subh + p`. This block
   uses `.split`, so without this its paragraph sits flush against its heading,
   which is exactly how the first pass of this page shipped. Same declarations
   as the original rule, so the two layouts stay identical. */
.split > div > .subh + p{margin-top:12px;color:var(--ink2);max-width:62ch}


/* ---- v53: the team, as flowing department blocks ------------------------ */

/* The six-column grid forced every department onto its own row, so 29 of 54
   cells were empty and the section ran to four screens. Each department is now
   a block sized to the number of people in it, and the blocks flow: two
   two-person departments share a row, Manufacturing takes the width it needs.
   flex-grow is 0 deliberately - letting blocks stretch to fill a row pushes a
   five-person department to four across and orphans the fifth. */
.tflow{display:flex;flex-wrap:wrap;gap:36px 40px;margin-top:52px;align-items:flex-start}
/* A one-person department is 130px wide, which is narrower than its own
   heading; the min-width stops "Clinical Development" wrapping onto two lines
   under a single portrait. */
.tblock{flex:0 1 calc(var(--n) * 130px + (var(--n) - 1) * 18px);
  max-width:100%;min-width:min(100%,200px)}
.tflow .tgrp{grid-column:auto;margin:0 0 18px}
.tpeople{display:flex;flex-wrap:wrap;gap:24px 18px}
.tpeople .ld{flex:0 0 130px;width:130px}
.tpeople figcaption{padding-top:11px}
.tpeople .ld b{font-size:.85rem;line-height:1.3}
.tpeople figcaption span{padding-top:4px;font-size:.72rem;line-height:1.38}
/* icon only: the anchor already carries aria-label="<name> on LinkedIn" */
.tpeople .li{padding-top:8px;gap:0}
.tpeople .li span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(max-width:620px){
  .tflow{gap:30px 26px}
  .tpeople{gap:20px 16px}
  .tpeople .ld{flex:0 0 118px;width:118px}
  .tblock{flex:0 1 calc(var(--n) * 118px + (var(--n) - 1) * 16px)}
}
/* On a phone the blocks each take a row anyway, so the only lever left is how
   many people fit across one. 104px gets three into a 390px viewport where
   118px only gets two, which is a third fewer rows for the whole section. */
@media(max-width:480px){
  .tflow{gap:26px}
  .tpeople{gap:18px 14px}
  .tpeople .ld{flex:0 0 104px;width:104px}
  .tblock{flex:0 1 calc(var(--n) * 104px + (var(--n) - 1) * 14px);min-width:100%}
  .tpeople .ld b{font-size:.8rem}
  .tpeople figcaption span{font-size:.69rem}
}