@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;450;500;600;700&display=swap');
:root{--ink:#142448;--blue:#173990;--deep:#101d43;--aqua:#40d3c6;--teal:#007f7e;--muted:#637086;--pale:#f1f5fa;--line:#dce3ed;--white:#fff;--max:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:white;color:var(--ink);font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{font-family:inherit;font-weight:500;line-height:1.14;letter-spacing:-.045em}h1{font-size:clamp(42px,5.2vw,76px);margin-bottom:25px}h2{font-size:clamp(32px,3.2vw,48px);margin-bottom:23px}h3{font-size:27px;margin-bottom:18px}h4{font-size:21px;margin-bottom:14px}p{margin-bottom:22px}a{color:inherit;text-decoration:none}a,button{touch-action:manipulation}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}img{display:block;max-width:100%}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #15aaa9;outline-offset:4px}a:hover{color:var(--teal)}[hidden]{display:none!important}::selection{color:var(--deep);background:var(--aqua)}.wrap{width:min(var(--max),calc(100% - 144px));margin-inline:auto}.section{padding-block:100px}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:.13em;font-weight:600;line-height:1.7;color:var(--blue);margin-bottom:24px}.eyebrow:before{content:'';display:inline-block;width:19px;height:2px;background:currentColor;vertical-align:middle;margin-inline-end:11px}.index{font-size:12px;letter-spacing:.08em;color:var(--blue)}em{font-style:normal;color:var(--aqua)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-height:55px;padding:14px 23px;border:1px solid transparent;border-radius:5px;background:var(--aqua);color:var(--deep);font-size:12px;font-weight:600;transition:background .2s,transform .2s}.button>span{font-size:25px;line-height:1}.button:hover{background:#8ee7d9;transform:translateY(-2px);color:var(--deep)}.button.dark{background:var(--blue);color:white}.button.dark:hover{background:var(--deep)}.text-link,.hero-link{display:inline-flex;align-items:center;gap:30px;min-height:40px;font-size:12px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:4px}.text-link>span,.hero-link>span{font-size:23px;transition:transform .2s}.text-link:hover>span{transform:translate(3px,-3px)}.skip-link{position:fixed;z-index:100;top:-90px;left:20px;background:white;padding:12px}.skip-link:focus{top:10px}.tiny-dot{width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--aqua)}
/* Compact navigation shell */
.site-header{position:fixed;inset:0 0 auto;height:84px;background:white;display:flex;align-items:center;justify-content:space-between;padding-inline:5vw;z-index:40;box-shadow:0 1px 0 #102a3a12}.site-header:after{content:'';height:2px;background:var(--aqua);position:absolute;bottom:0;left:0;width:calc(var(--scroll,0)*100%)}.logo{width:120px;height:auto}.header-actions{display:flex;align-items:center;gap:32px}.languages{display:flex;align-items:center;gap:11px;font-size:10px}.languages a{opacity:.45;padding-block:10px}.languages a[aria-current]{opacity:1;font-weight:600}.languages span{opacity:.2}.menu-button{border:0;border-radius:5px;background:var(--pale);padding:12px 17px;font-size:12px;display:flex;gap:24px;align-items:center}.menu-mark{width:23px;display:grid;gap:5px}.menu-mark i{height:1px;background:var(--ink)}.menu-mark i:last-child{width:16px;justify-self:end;transition:width .2s}.menu-button:hover .menu-mark i:last-child{width:23px}main{padding-top:84px}.contact-rail{position:fixed;left:13px;top:50%;transform:translateY(-50%);z-index:30;display:grid;gap:8px;padding:6px;background:#ffffffcc;backdrop-filter:blur(8px);border:1px solid #dce3ed99;border-radius:30px;box-shadow:0 5px 25px #111e4312}.contact-rail a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;transition:transform .2s}.contact-rail a:hover{transform:scale(1.12)}.contact-rail svg{width:16px;height:16px}.rail-whatsapp{background:#208455;color:white}.rail-call{background:#008b91;color:white}.rail-mail{background:#e5b966;color:var(--deep)}dialog{margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;border:0;background:var(--blue);color:white;overflow:auto}dialog::backdrop{background:var(--blue)}.menu-top{height:84px;display:flex;align-items:center;justify-content:space-between;padding-inline:5vw;border-bottom:1px solid #ffffff28}.menu-close{border:1px solid #ffffff55;border-radius:5px;background:none;color:white;padding:8px 20px;font-size:12px}.menu-body{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;padding:7vh 10vw}.menu-intro{padding-top:35px}.menu-intro .eyebrow{color:var(--aqua)}.menu-intro>p:not(.eyebrow){font-size:55px;line-height:1.15;letter-spacing:-.04em}.teal-dot{color:var(--aqua);font-size:25px;margin-inline-start:10px}.menu-intro>a{font-size:12px}.menu-body nav>a{display:flex;gap:25px;align-items:center;border-bottom:1px solid #ffffff30;font-size:35px;padding:16px 0;line-height:1.3}.menu-body nav>a[aria-current],.menu-body nav>a:hover{color:var(--aqua)}.nav-number{font-size:10px;opacity:.5}.menu-body nav>a>span:last-child{margin-inline-start:auto}
/* Immersive classroom hero */
.home-hero{position:relative;min-height:690px;min-height:min(780px,calc(100svh - 84px));background:var(--deep);color:white;display:flex;flex-direction:column;justify-content:center;isolation:isolate}.hero-image,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%;z-index:-3}.hero-image{opacity:1}.hero-video{opacity:0;transition:opacity .5s}.hero-video.ready{opacity:1}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,21,50,.94) 0%,rgba(10,21,50,.84) 29%,rgba(10,21,50,.32) 69%,rgba(10,21,50,.14));z-index:-1}.hero-copy{padding-block:90px 110px}.hero-copy .eyebrow{color:#d1e6ed;font-size:10px;margin-bottom:25px}.hero-copy h1{font-size:clamp(45px,4.8vw,70px);max-width:780px;line-height:1.1;letter-spacing:-.045em}.hero-copy h1 em{display:block}.hero-description{font-size:14px;max-width:475px;line-height:1.9;color:#d8e0eb;margin-bottom:30px}.hero-actions{display:flex;gap:30px;align-items:center}.hero-link{font-size:11px;color:white;border-color:#ffffff50}.hero-link:hover{color:var(--aqua)}.hero-bottom{position:absolute;inset-inline:0;bottom:0;border-top:1px solid #ffffff35;display:flex;justify-content:space-between;align-items:center;gap:25px;padding-block:19px;font-size:10px;color:#d3dfeb}.hero-trust{display:flex;align-items:center;gap:9px}.hero-trust i{width:6px;height:6px;background:var(--aqua);border-radius:50%}.hero-bottom>a{font-size:24px}.video-control{position:absolute;bottom:83px;right:5vw;display:flex;gap:12px;align-items:center;background:#0b153b66;backdrop-filter:blur(8px);color:white;border:1px solid #ffffff70;border-radius:25px;padding:9px 16px;font-size:10px;z-index:2}.video-control:hover{background:#0b153bb3}.trust-section{padding:25px 0;background:#f7f9fc;border-bottom:1px solid var(--line)}.logo-row{display:flex;gap:35px;align-items:center;padding-block:17px;padding-inline-start:max(72px,calc((100vw - 1280px)/2))}.logo-row>p{font-size:10px;letter-spacing:.08em;text-transform:uppercase;min-width:110px;margin:0;color:var(--muted)}.marquee{overflow:hidden;direction:ltr;mask-image:linear-gradient(90deg,transparent,black 4%,black 95%,transparent)}.marquee-track{display:flex;width:max-content;animation:marquee 45s linear infinite}.logo-set{display:flex;align-items:center;gap:62px;padding-inline:31px;flex-shrink:0}.logo-set>img{width:100px;height:40px;object-fit:contain;mix-blend-mode:multiply}.logo-window{display:block;position:relative;overflow:hidden;flex-shrink:0;mix-blend-mode:multiply}.logo-window img{position:absolute;max-width:none;height:auto}.reverse .marquee-track{animation-direction:reverse;animation-duration:36s}.marquee:hover .marquee-track{animation-play-state:paused}@keyframes marquee{to{transform:translateX(-50%)}}
/* Large photographic capability cards */
.heading-row{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:40px}.section-heading h2:last-child{margin-bottom:0}.section-heading>p:not(.eyebrow){color:var(--muted);max-width:620px}.heading-row .section-heading{max-width:800px}.side-note{max-width:280px;font-size:13px;color:var(--muted);margin-bottom:0}.heading-row>.text-link{flex-shrink:0}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.solution-card{position:relative;min-height:440px;display:flex;flex-direction:column;overflow:hidden;border-radius:9px;background:var(--deep);color:white;isolation:isolate;padding:28px;transition:transform .3s}.service-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transition:transform .6s}.solution-card:nth-child(2) .service-photo{object-position:70% center}.service-shade{position:absolute;inset:0;background:linear-gradient(180deg,#08153910 20%,#081539bd 58%,#081539f2);z-index:-1}.solution-card>.index{color:white;border:1px solid #ffffff70;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:11px}.service-copy{margin-top:auto;padding-top:90px}.service-copy h3{font-size:29px;max-width:280px;color:white;margin-bottom:15px}.service-copy p{font-size:12px;max-width:275px;line-height:1.8;color:#d8e3ed;margin-bottom:21px}.card-link{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:500;border-top:1px solid #ffffff3a;padding-top:16px;gap:20px}.card-link>span{font-size:24px}.solution-card:hover{color:white;transform:translateY(-6px)}.solution-card:hover .service-photo{transform:scale(1.055)}.impact-band{background:var(--blue);color:white;padding-block:72px}.impact-band>.wrap{display:grid;grid-template-columns:1fr 1.7fr;gap:60px;align-items:center}.impact-intro .eyebrow{color:var(--aqua);margin-bottom:20px}.impact-intro h2{font-size:33px;line-height:1.2}.impact-intro .text-link{font-size:11px;color:#dae9fd}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.metrics>div{display:flex;flex-direction:column;border-inline-start:1px solid #ffffff30;padding-inline:30px}.metrics strong{font-size:clamp(38px,3.6vw,54px);font-weight:400;line-height:1.2;letter-spacing:-.06em;align-self:start}.metrics span{font-size:11px;color:#d1dcf3;line-height:1.7;max-width:165px;margin-top:16px}.metrics.five{grid-template-columns:repeat(5,1fr);grid-column:1/-1;width:100%}.metrics.five>div:first-child{border:0;padding-inline-start:0}.metrics.five strong{font-size:45px}.impact-band>.wrap>.eyebrow{grid-column:1/-1;color:var(--aqua);margin:0}.feature{padding-block:100px}.feature-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.feature-header .eyebrow{margin:0}.feature-header>span{font-size:11px;color:var(--muted)}.feature-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:0;align-items:stretch;border-radius:10px;overflow:hidden;background:var(--pale)}.feature-photo{position:relative;overflow:hidden;min-height:490px;background:#e8edf3}.feature-photo>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.feature-photo.case-photo-0>img{object-position:top}.photo-tag{position:absolute;bottom:24px;inset-inline-start:24px;border-radius:7px;padding:14px 20px;background:white;display:flex;align-items:center;gap:20px;box-shadow:0 8px 25px #102a3a18}.photo-tag img{width:74px;height:34px;object-fit:contain}.photo-tag span{font-size:10px;color:var(--muted)}.feature-content{padding:48px}.feature-content h2{font-size:39px;line-height:1.18}.feature-content>p:not(.eyebrow){color:var(--muted);font-size:13px}.feature-numbers{display:flex;gap:45px;margin:30px 0;border-top:1px solid #cad4e3;padding-top:25px}.feature-numbers>div{display:flex;flex-direction:column;max-width:170px}.feature-numbers strong{font-size:44px;line-height:1.2;font-weight:400;color:var(--blue);letter-spacing:-.05em}.feature-numbers span{font-size:10px;color:var(--muted);margin-top:7px}.feature-content .button{font-size:11px;min-height:49px}.insights-preview{background:var(--pale)}.insight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.insight-teaser{display:flex;flex-direction:column;overflow:hidden;border-radius:8px;background:white;box-shadow:0 4px 16px #14244805;transition:transform .25s}.insight-teaser:hover{transform:translateY(-5px);color:var(--blue)}.insight-photo{height:195px;position:relative;overflow:hidden}.insight-photo>img{height:100%;width:100%;object-fit:cover;transition:transform .5s}.insight-teaser:hover .insight-photo>img{transform:scale(1.06)}.insight-photo .round-arrow{width:30px;height:30px;font-size:18px;bottom:13px;right:13px}.insight-copy{padding:24px;display:flex;flex-direction:column;flex:1}.insight-copy .eyebrow{font-size:8px;letter-spacing:.07em;margin-bottom:16px}.insight-copy .eyebrow:before{display:none}.insight-copy h3{font-size:21px;line-height:1.3;letter-spacing:-.03em}.insight-copy .card-link{margin-top:auto;border-color:var(--line);font-size:10px}.closing-cta{background:var(--deep);color:white;padding:60px 0;position:relative;overflow:hidden}.closing-cta:before{content:'';position:absolute;right:-10px;top:-150px;width:480px;height:480px;border:1px solid #8292c333;border-radius:50%;box-shadow:0 0 0 70px #ffffff03,0 0 0 71px #8292c322}.closing-cta>.wrap{display:flex;justify-content:space-between;align-items:center;gap:65px;position:relative}.closing-cta .eyebrow{color:var(--aqua);margin-bottom:15px}.closing-cta h2{font-size:39px;margin-bottom:16px}.closing-cta p:not(.eyebrow){max-width:640px;font-size:13px;color:#bfc9df;margin:0}.closing-cta .button{flex-shrink:0}.site-footer{background:white;padding:35px max(72px,calc((100vw - 1280px)/2)) 0;color:var(--ink)}.footer-grid{display:grid;grid-template-columns:1.3fr 1.25fr 1fr;gap:65px;padding-bottom:25px}.footer-logo{width:108px;filter:brightness(0) saturate(100%) invert(10%) sepia(29%) saturate(2200%) hue-rotate(188deg);margin-bottom:15px}.footer-grid p{font-size:10px;line-height:1.8;margin-bottom:12px;max-width:290px}.footer-grid h3{font-size:11px;letter-spacing:0;font-weight:600;margin-block:4px 16px}.footer-map{width:185px;height:55px;object-fit:cover;border-radius:4px}.footer-grid a{font-size:11px}.footer-phone{display:block;margin-top:2px}.social-links{display:flex;gap:9px;margin-bottom:15px}.social-links a{display:grid;place-items:center;width:29px;height:29px;background:var(--pale);border-radius:50%;color:var(--blue)}.social-links svg{width:13px;height:13px}.footer-bottom{border-top:1px solid var(--line);display:flex;align-items:center;gap:30px;padding:12px 0;font-size:9px}.footer-bottom small{font-size:9px}.footer-bottom .languages{margin-inline-start:auto;font-size:9px}
/* Interior pages use cinematic headers and structured white panels. */
.page-hero{position:relative;isolation:isolate;background:var(--deep);color:white;min-height:420px;display:flex;align-items:center;overflow:hidden}.page-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}.page-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#101d43ed 0%,#101d43bd 50%,#101d4330);z-index:-1}.page-hero-content{padding-block:65px}.page-hero-content .eyebrow{color:#b5dfdf;margin-bottom:22px}.page-hero h1{max-width:870px;font-size:58px;line-height:1.1}.page-hero p:not(.eyebrow){max-width:650px;font-size:14px;line-height:1.85;color:#d6e0ed;margin-bottom:0}.split{display:grid;grid-template-columns:1fr 1.3fr;gap:90px}.prose{font-size:15px;line-height:1.95;color:var(--muted)}.prose h3,.prose h4{color:var(--ink)}.split>.prose{border-inline-start:3px solid var(--aqua);padding-inline-start:35px}.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.vision-grid article{padding:45px;border:1px solid var(--line);border-radius:10px;position:relative;overflow:hidden;background:var(--pale)}.vision-grid article:first-child{background:var(--blue);color:white;border-color:var(--blue)}.vision-grid article:first-child .eyebrow{color:var(--aqua)}.vision-grid article:after{content:'';position:absolute;right:-50px;top:-45px;width:175px;height:175px;border:1px solid #a4b3d633;border-radius:50%;box-shadow:0 0 0 28px #a4b3d610}.vision-grid h2{font-size:37px}.vision-grid p:not(.eyebrow){font-size:13px;margin:0;max-width:430px;opacity:.8}.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;margin-top:38px}.values-grid>div{padding:30px;border-radius:9px;background:var(--pale);border-bottom:3px solid var(--aqua)}.values-grid>div:nth-child(2){background:#eaf1ff;border-color:var(--blue)}.values-grid>div:nth-child(3){background:#e6f6f3;border-color:#087f7b}.values-grid .index{font-size:40px;font-weight:400;letter-spacing:-.05em;opacity:.25}.values-grid h3{font-size:25px;margin-top:30px;margin-bottom:8px}.local-value{background:#eaf2f9;padding-block:85px}.local-value .section-heading>p:not(.eyebrow){font-size:13px}.local-value .split{align-items:center}.icv-visual{display:flex;align-items:center;justify-content:center;gap:40px}.icv-ring{height:220px;min-width:220px;border-radius:50%;padding:12px;background:conic-gradient(var(--aqua) 50%,#cad8e9 50%);box-shadow:0 0 0 9px #eaf2f9,0 0 0 12px var(--blue),0 0 0 20px #eaf2f9,0 0 0 23px #8cbbe1}.icv-ring>div{background:#eaf2f9;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.icv-ring b{font-size:33px;font-weight:500;color:var(--blue);letter-spacing:-.05em}.icv-ring span{font-size:10px;color:var(--muted)}.icv-legend{font-size:10px}.icv-legend b{font-size:24px;font-weight:500;display:block;color:var(--blue)}.icv-legend p{margin-bottom:15px}.steps{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;padding:0;margin:55px 0 0;gap:0}.steps li{position:relative;padding:0 25px 0 0}.steps li:before{content:'';position:absolute;top:21px;inset-inline:0;background:#b4c8e2;height:2px;z-index:0}.steps li:last-child:before{width:45px}.steps li>span{position:relative;width:43px;height:43px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--blue);background:white;color:var(--blue);font-size:12px;margin-bottom:26px;z-index:1}.steps li:first-child>span{background:var(--blue);color:white}.steps h3,.steps h4{font-size:19px;letter-spacing:-.02em}.steps p{font-size:12px;color:var(--muted);max-width:190px;line-height:1.8}.anchor-nav{display:flex;justify-content:space-between;gap:25px;padding-block:25px;border-bottom:1px solid var(--line);font-size:12px}.solution-detail{padding-block:65px;border-bottom:1px solid var(--line)}.solution-banner{position:relative;min-height:310px;border-radius:10px;overflow:hidden;color:white;background:var(--deep);display:flex;align-items:center;margin-bottom:38px;isolation:isolate}.solution-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#111d43ee,#111d4380 65%,#111d431a);z-index:-1}.solution-banner>img{position:absolute;inset:0;z-index:-2;height:100%;width:100%;object-fit:cover;object-position:center 40%}.solution-title{display:flex;align-items:start;gap:30px;padding:40px;max-width:780px}.solution-title .eyebrow{color:#b2e1df;margin-bottom:17px}.solution-title h2{font-size:43px;margin-bottom:15px}.solution-title p:not(.eyebrow){font-size:13px;color:#d6e2ee;margin-bottom:0}.large-index{font-size:65px;font-weight:400;color:var(--aqua);line-height:1;letter-spacing:-.06em}.service-columns{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-inline:20px}.service-columns h3{font-size:17px;letter-spacing:-.02em}.clean-list{list-style:none;padding:0;margin:0 0 20px}.clean-list li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}.clean-list li:before{content:'↗';position:absolute;left:0;color:var(--teal);font-size:15px}.related-strip{padding:20px 24px;background:var(--pale);border-radius:6px;display:flex;align-items:center;gap:25px;font-size:11px;margin:25px 0}.related-strip>.text-link{margin-inline-start:auto;font-size:11px}.impact-ecosystem{padding-block:90px;background:var(--pale)}.ecosystem{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0}.ecosystem-core{grid-column:1/-1;background:var(--blue);border-radius:7px;padding:23px 30px;color:white;display:flex;justify-content:space-between;align-items:center;font-size:28px}.ecosystem-core span{font-size:11px;color:var(--aqua);letter-spacing:.12em}.ecosystem article{padding:28px;border:1px solid var(--line);border-radius:8px;background:white}.ecosystem article h3{font-size:26px;margin-top:24px}.ecosystem article p{font-size:13px;color:var(--muted);margin:0}.ecosystem-note{max-width:700px;font-size:15px;color:var(--muted);margin:0}.case-list{padding-block:35px 90px}.filter-bar{display:flex;gap:10px;flex-wrap:wrap}.filter-bar button{border:1px solid var(--line);border-radius:5px;background:white;padding:11px 20px;font-size:12px;color:var(--muted)}.filter-bar button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:white}.result-count{font-size:11px;color:var(--muted);margin:23px 0}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.case-grid.two{grid-template-columns:1fr 1fr}.case-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:white;transition:box-shadow .25s,transform .25s}.case-card:hover{box-shadow:0 15px 35px #14244810;transform:translateY(-4px)}.case-visual{height:255px;position:relative;overflow:hidden;background:var(--pale)}.case-image{width:100%;height:100%;object-fit:cover;transition:transform .5s}.case-card-0 .case-image{object-position:top}.case-card:hover .case-image{transform:scale(1.045)}.round-arrow{position:absolute;width:39px;height:39px;right:18px;bottom:18px;border-radius:50%;background:white;color:var(--blue);display:grid;place-items:center;font-size:24px;z-index:2}.case-copy{padding:27px;display:flex;flex-direction:column;flex:1}.case-copy .eyebrow{font-size:9px;letter-spacing:.08em;margin-bottom:14px}.case-copy h3{font-size:26px;line-height:1.25}.case-copy p{font-size:12px;color:var(--muted)}.case-copy .text-link{align-self:start;margin-top:auto;font-size:11px}.breadcrumb{padding-block:20px}.breadcrumb .text-link{font-size:10px;min-height:30px}.case-detail-layout{display:grid;grid-template-columns:270px 1fr;gap:75px;padding-block:70px}.case-summary{position:sticky;top:115px;padding:30px;background:var(--pale);border-top:3px solid var(--blue);border-radius:6px}.case-summary h2{font-size:26px}.case-summary p{font-size:12px;color:var(--muted)}.case-summary strong{font-size:51px;font-weight:400;color:var(--blue)}.case-summary .text-link{font-size:11px}.narrative-block{padding-bottom:28px;margin-bottom:33px;border-bottom:1px solid var(--line)}.narrative-block .eyebrow{margin-bottom:15px}.narrative-block h2{font-size:33px}.narrative-block p{font-size:14px;line-height:1.9;color:var(--muted)}.takeaway{padding:30px;border:0;border-inline-start:4px solid var(--aqua);background:#eaf6f5;border-radius:5px}.insights-section{padding-bottom:75px}.insight-tabs{display:flex;gap:35px;border-bottom:1px solid var(--line)}.insight-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:25px 0;font-size:12px;color:var(--muted)}.insight-tabs button[aria-selected=true]{border-color:var(--blue);color:var(--blue);font-weight:600}.insight-panel{padding-top:55px;scroll-margin-top:130px;animation:panel-in .3s ease}.insight-panel>h2{max-width:850px}.insight-panel>h3{font-size:27px;margin-top:45px}.editorial-split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;margin-top:40px}.editorial-split>img{width:100%;height:390px;object-fit:cover;border-radius:10px}.lead{font-size:19px;color:var(--muted);line-height:1.8;max-width:880px}.article-body{max-width:840px}.article-body h3{font-size:28px;margin-top:40px}.article-body .takeaway h3{margin-top:0}.source-note{font-size:11px!important;line-height:1.8;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;max-width:870px}.research-stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--blue);color:white;padding:36px;border-radius:8px;gap:40px;margin:35px 0}.research-stats strong{font-size:58px;line-height:1.1;font-weight:400;letter-spacing:-.05em}.research-stats p{font-size:12px;color:#d0e0f6;margin:14px 0 0;max-width:230px}.priority{display:flex;gap:25px;margin-block:30px}.priority>span{color:var(--blue);font-size:12px}.priority h4{margin-bottom:12px}.priority p{font-size:14px;margin:0}.article-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:30px}.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:35px 0}.benefits-grid article{background:var(--pale);padding:28px;border-radius:7px}.benefits-grid h4{margin-top:16px}.benefits-grid p{font-size:13px;color:var(--muted);margin-bottom:0}.resource-box{display:grid;grid-template-columns:1fr 1fr;background:var(--pale);border:1px solid var(--line);border-radius:10px;margin-top:45px;overflow:hidden}.resource-information{padding:40px;background:var(--blue);color:white}.resource-information .eyebrow{color:var(--aqua)}.resource-information h3{font-size:32px}.resource-information p{font-size:13px;color:#d7e2f4}.resource-information .button{background:white;color:var(--blue);font-size:11px}.resource-form{padding:35px}.resource-form h4{font-size:23px}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;padding-block:70px}.contact-layout>div>h2{font-size:35px;margin-bottom:35px}.contact-item{margin-bottom:27px}.contact-item .eyebrow{font-size:9px;margin-bottom:9px}.contact-item p,.contact-item a{font-size:17px}.contact-form{padding:38px;border:1px solid var(--line);border-radius:10px;background:var(--pale)}.contact-form h2{font-size:30px;margin-bottom:30px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}form label{font-size:11px;display:flex;flex-direction:column;gap:7px;margin-bottom:20px;color:#48566e}form input,form textarea,form select{border:1px solid #cdd8e5;border-radius:5px;min-height:44px;width:100%;padding:10px 12px;background:white;color:var(--ink);font-size:13px}form textarea{resize:vertical}.form-note,.form-status{font-size:10px;line-height:1.8;color:var(--muted);margin-top:15px}.form-status{margin-bottom:0}.consent{display:flex;flex-direction:row;align-items:start;gap:10px;font-size:10px}.consent input{min-height:16px;width:16px;height:16px;margin-top:3px;flex-shrink:0;accent-color:var(--blue)}.location-map{margin-bottom:65px}.location-map>a{display:block;position:relative;border-radius:10px;overflow:hidden}.location-map img{width:100%;height:310px;object-fit:cover}.location-map span{position:absolute;left:22px;bottom:22px;padding:14px 20px;background:white;color:var(--blue);border-radius:5px;font-size:11px}.enhanced .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.enhanced .reveal.is-revealed{opacity:1;transform:none}@keyframes panel-in{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] h4{letter-spacing:0;line-height:1.4}html[dir=rtl] .eyebrow{letter-spacing:0}html[dir=rtl] .hero-overlay,html[dir=rtl] .page-hero-shade{background:linear-gradient(270deg,#101d43ed 0%,#101d43c9 35%,#101d4330)}html[dir=rtl] .hero-copy h1{line-height:1.35}html[dir=rtl] .clean-list li{padding:12px 24px 12px 0}html[dir=rtl] .clean-list li:before{left:auto;right:0}html[dir=rtl] .steps li{padding:0 0 0 25px}html[dir=rtl] .feature-content h2{font-size:35px}html[dir=rtl] .solution-banner:after{background:linear-gradient(270deg,#111d43ee,#111d4380 65%,#111d431a)}
@media(max-width:1100px){.wrap{width:calc(100% - 112px)}.hero-copy h1{font-size:58px;max-width:690px}.home-hero{min-height:650px}.hero-overlay{background:linear-gradient(90deg,#101d43eb,#101d43bd 45%,#101d4340)}.solution-card{min-height:420px;padding:24px}.service-copy h3{font-size:26px}.impact-band>.wrap{gap:30px;grid-template-columns:1fr 1.8fr}.impact-intro h2{font-size:27px}.metrics>div{padding-inline:20px}.metrics strong{font-size:39px}.feature-content{padding:35px}.feature-content h2{font-size:32px}.feature-photo{min-height:460px}.insight-grid{gap:15px}.insight-copy{padding:20px}.insight-copy h3{font-size:19px}.insight-photo{height:170px}.footer-grid{gap:35px}.site-footer{padding-inline:56px}.split{gap:50px}.icv-visual{flex-direction:column;gap:35px}.icv-legend{display:flex;gap:25px}.case-visual{height:230px}.case-copy{padding:23px}.case-copy h3{font-size:23px}.case-detail-layout{grid-template-columns:230px 1fr;gap:45px}.ecosystem{grid-template-columns:1fr 1fr}.contact-layout{gap:45px}.resource-information,.resource-form{padding:30px}.metrics.five strong{font-size:36px}.hero-bottom{font-size:9px}}
@media(max-width:760px){.wrap{width:calc(100% - 48px)}.section{padding-block:65px}h2{font-size:33px}.site-header{height:72px;padding-inline:24px}.logo{width:102px}.header-actions{gap:20px}.menu-button{font-size:11px;padding:10px 13px;gap:17px}.languages{font-size:9px;gap:8px}main{padding-top:72px}.contact-rail{left:7px;top:auto;bottom:16px;transform:none;padding:4px;gap:6px}.contact-rail a{width:28px;height:28px}.contact-rail svg{width:14px;height:14px}.home-hero{min-height:720px;min-height:calc(100svh - 72px);justify-content:center}.hero-copy{padding-block:85px 155px}.hero-copy .eyebrow{font-size:8px;max-width:310px;line-height:1.9;margin-bottom:24px}.hero-copy h1{font-size:clamp(38px,7.9vw,57px);line-height:1.16;max-width:540px}.hero-description{font-size:12px;line-height:1.9;max-width:410px;margin-bottom:27px}.hero-overlay{background:linear-gradient(90deg,#0b1735dc,#0b1735a1),linear-gradient(0deg,#0b1735b3,transparent)}.hero-video,.hero-image{object-position:46% center}.hero-actions{gap:20px;flex-wrap:wrap}.hero-actions .button{font-size:11px;min-height:48px;padding:12px 18px;gap:24px}.hero-link{font-size:10px;gap:15px}.hero-bottom{padding:17px 0;gap:15px;font-size:8px}.hero-bottom>span:nth-child(2){display:none}.hero-bottom>a{font-size:21px}.video-control{bottom:76px;right:24px;font-size:9px;padding:8px 12px}.logo-row{padding-inline-start:24px;gap:15px;padding-block:15px}.logo-row>p{min-width:73px;font-size:8px}.logo-set{gap:35px;padding-inline:18px}.logo-set>img{width:76px;height:30px}.logo-window{zoom:.8}.trust-section{padding-block:12px}.heading-row{display:block;margin-bottom:30px}.heading-row>.text-link{margin-top:22px}.side-note{margin-top:20px;max-width:380px;font-size:12px}.eyebrow{font-size:9px;margin-bottom:18px}.solution-grid{grid-template-columns:1fr;gap:20px}.solution-card{min-height:395px;padding:26px}.service-copy h3{font-size:30px;max-width:330px}.service-copy p{font-size:12px;max-width:320px}.service-copy{padding-top:80px}.solution-card:hover{transform:none}.impact-band{padding-block:50px}.impact-band>.wrap{grid-template-columns:1fr;gap:25px}.impact-intro h2{font-size:32px}.impact-intro .text-link{margin-bottom:5px}.metrics{grid-template-columns:1fr;gap:0}.metrics>div{padding:22px 0;border-inline-start:0;border-top:1px solid #ffffff35;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px}.metrics strong{font-size:46px}.metrics span{font-size:11px;margin:0}.metrics.five{grid-template-columns:1fr}.metrics.five>div:first-child{border-top:1px solid #ffffff35}.metrics.five strong{font-size:43px}.feature{padding-block:65px}.feature-header>span{font-size:9px}.feature-layout{grid-template-columns:1fr}.feature-photo{min-height:300px}.feature-content{padding:30px}.feature-content h2{font-size:33px}.photo-tag{bottom:18px;inset-inline-start:18px;padding:10px 15px;gap:15px}.photo-tag img{width:60px;height:27px}.photo-tag span{font-size:9px}.feature-numbers{gap:32px;margin:25px 0}.feature-numbers strong{font-size:40px}.insight-grid{grid-template-columns:1fr 1fr;gap:18px}.insight-photo{height:155px}.insight-copy{padding:18px}.insight-copy h3{font-size:19px;line-height:1.3}.insight-copy .eyebrow{font-size:8px;line-height:1.6}.insight-copy .card-link{font-size:9px;gap:8px}.closing-cta{padding-block:48px}.closing-cta>.wrap{display:block}.closing-cta h2{font-size:33px}.closing-cta p:not(.eyebrow){font-size:12px}.closing-cta .button{margin-top:25px}.site-footer{padding:30px 24px 0}.footer-grid{grid-template-columns:1fr 1fr;gap:22px}.footer-grid>div:first-child{grid-column:1/-1;display:grid;grid-template-columns:85px 1fr;gap:22px;align-items:start}.footer-logo{width:85px;margin:3px 0 0}.footer-grid p{font-size:9px;margin-bottom:8px}.footer-grid h3{font-size:10px;margin-bottom:12px}.footer-grid a{font-size:10px}.footer-map{height:45px;width:155px}.social-links{gap:6px}.social-links a{width:26px;height:26px}.footer-bottom{flex-wrap:wrap;gap:5px 15px;font-size:8px;padding-bottom:22px}.footer-bottom small{font-size:8px;width:100%}.footer-bottom .languages{margin-inline-start:0;margin-inline-end:auto}.menu-top{height:72px;padding-inline:24px}.menu-body{display:block;padding:25px 30px}.menu-intro{display:none}.menu-body nav>a{font-size:27px;padding-block:17px}.page-hero{min-height:375px}.page-hero-content{padding-block:50px}.page-hero h1{font-size:42px;line-height:1.14}.page-hero p:not(.eyebrow){font-size:12px}.page-hero-shade{background:linear-gradient(90deg,#101d43ec,#101d438f)}.split{grid-template-columns:1fr;gap:23px}.split>.prose{padding-inline-start:22px;font-size:13px}.vision-grid{grid-template-columns:1fr;gap:20px}.vision-grid article{padding:32px}.vision-grid h2{font-size:32px}.vision-grid p:not(.eyebrow){font-size:12px}.values-grid{grid-template-columns:1fr;gap:16px;margin-top:25px}.values-grid>div{padding:24px;display:flex;align-items:center;gap:25px}.values-grid .index{font-size:40px}.values-grid h3{margin:0;font-size:25px}.local-value{padding-block:65px}.icv-visual{padding-top:24px}.icv-legend{gap:22px;font-size:9px}.icv-legend b{font-size:23px}.steps{grid-template-columns:1fr;gap:0;margin-top:32px}.steps li{padding:0 0 30px 65px;min-height:113px}.steps li:before{top:20px;left:20px;width:2px;bottom:0;height:auto}.steps li:last-child:before{display:none}.steps li>span{position:absolute;left:0;top:0;margin:0}.steps h3,.steps h4{font-size:21px;margin-bottom:9px}.steps p{font-size:12px;max-width:none;margin:0}.anchor-nav{flex-direction:column;font-size:11px;gap:15px;padding-block:23px}.solution-detail{padding-block:40px}.solution-banner{min-height:320px;margin-bottom:27px}.solution-title{padding:25px;gap:17px;flex-direction:column}.solution-title h2{font-size:31px}.large-index{font-size:39px}.solution-title p:not(.eyebrow){font-size:12px}.service-columns{grid-template-columns:1fr;gap:25px;padding:0}.related-strip{align-items:start;flex-direction:column;gap:10px;padding:20px}.related-strip>.text-link{margin-inline-start:0}.clean-list li{font-size:12px}.ecosystem{grid-template-columns:1fr 1fr;gap:15px}.ecosystem-core{font-size:24px;padding:20px}.ecosystem article{padding:20px}.ecosystem article h3{font-size:23px}.ecosystem article p{font-size:11px}.ecosystem-note{font-size:13px}.impact-ecosystem{padding-block:65px}.filter-bar{gap:8px}.filter-bar button{padding:9px 12px;font-size:10px}.case-list{padding-block:25px 65px}.case-grid,.case-grid.two{grid-template-columns:1fr;gap:25px}.case-visual{height:260px}.case-copy{padding:25px}.case-copy h3{font-size:28px}.case-detail-layout{grid-template-columns:1fr;gap:35px;padding-block:45px}.case-summary{position:static;padding:25px}.narrative-block h2{font-size:29px}.narrative-block p{font-size:13px}.insight-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.insight-tabs button{text-align:start;font-size:10px;padding-block:18px}.insight-panel{padding-top:40px}.insight-panel>h2{font-size:31px}.editorial-split{grid-template-columns:1fr;gap:25px;margin-top:28px}.editorial-split>img{height:270px}.prose{font-size:13px}.lead{font-size:17px}.research-stats{grid-template-columns:1fr;gap:25px;padding:28px}.research-stats>div{display:flex;gap:25px;align-items:center}.research-stats strong{font-size:44px;min-width:90px}.research-stats p{font-size:11px;margin:0}.article-body h3{font-size:26px}.benefits-grid{grid-template-columns:1fr;gap:15px}.benefits-grid article{padding:24px}.resource-box{grid-template-columns:1fr}.resource-information h3{font-size:29px}.resource-information,.resource-form{padding:26px}.resource-form h4{font-size:23px}.contact-layout{grid-template-columns:1fr;gap:30px;padding-block:45px}.contact-form{padding:25px}.form-row{grid-template-columns:1fr;gap:0}.contact-form h2{font-size:28px}.contact-item p,.contact-item a{font-size:16px}.location-map img{height:250px}.location-map span{left:12px;bottom:12px;font-size:9px;padding:12px}.location-map{margin-bottom:45px}html[dir=rtl] .steps li{padding:0 65px 30px 0}html[dir=rtl] .steps li>span{left:auto;right:0}html[dir=rtl] .steps li:before{left:auto;right:20px;width:2px}html[dir=rtl] .page-hero h1{font-size:36px}html[dir=rtl] .hero-copy h1{font-size:44px}html[dir=rtl] .feature-content h2{font-size:31px}}
@media(max-width:370px){.hero-copy h1{font-size:35px}.hero-description{font-size:11px}.hero-actions{gap:12px}.hero-link{font-size:9px}.insight-grid{grid-template-columns:1fr}.insight-photo{height:190px}.insight-copy h3{font-size:24px}.ecosystem{grid-template-columns:1fr}.footer-grid>div:first-child{gap:15px;grid-template-columns:75px 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.enhanced .reveal{opacity:1;transform:none}.marquee{overflow-x:auto;mask-image:none}.marquee-track>.logo-set[aria-hidden]{display:none}}
@media print{.site-header,.contact-rail,.site-footer,.closing-cta,.insight-tabs,.article-actions,.resource-form,.video-control{display:none}main{padding:0}.wrap{width:100%}.page-hero,.home-hero{background:white;color:var(--ink);min-height:0}.page-hero-photo,.page-hero-shade,.hero-video,.hero-image,.hero-overlay,.hero-bottom{display:none}.page-hero p:not(.eyebrow),.hero-description{color:var(--muted)}.insight-panel[hidden]{display:block!important}.case-detail-layout{display:block}.case-summary{position:static}.enhanced .reveal{opacity:1;transform:none}}

/* Keep the supplied OXY collage focused on its upper workshop photograph. */
.feature-photo.case-photo-0>img{height:auto;min-height:100%;width:100%;object-fit:unset;transform:scale(1.4);transform-origin:50% 0}
@media(max-width:760px){.hero-image{object-position:92% center}.hero-bottom .hero-trust{padding-left:28px}.footer-bottom{padding-left:28px}}

/* ==========================================================================
   Our approach — animated journey infographic (about page)
   Strictly on the SIMAT ramp: --deep -> --blue -> (blue/teal blend) -> --teal
   -> --aqua. No colour outside those tokens and blends of them.
   ========================================================================== */
.journey-section{padding-bottom:110px}
.journey{
  --node:150px;
  list-style:none;margin:70px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  counter-reset:journey;
}
.journey-step{--c:var(--blue);position:relative;text-align:center;padding-inline:12px}
.journey-step:nth-child(1){--c:#101d43}
.journey-step:nth-child(2){--c:#173990}
.journey-step:nth-child(3){--c:#0c5c87}   /* blue -> teal, midpoint */
.journey-step:nth-child(4){--c:#007f7e}
.journey-step:nth-child(5){--c:#40d3c6}

.journey-node{
  position:relative;width:var(--node);height:var(--node);margin-inline:auto;
  display:grid;place-items:center;
}
.journey-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.journey-ring circle{fill:none;stroke-width:1.5}
.journey-ring .ring-track{stroke:var(--line)}
.journey-ring .ring-draw{
  stroke:var(--c);stroke-linecap:round;
  stroke-dasharray:352;stroke-dashoffset:352;
  transform:rotate(-90deg);transform-origin:50% 50%;
}
.journey-icon{position:relative;display:grid;place-items:center;color:var(--c)}
.journey-icon svg{width:42px;height:42px;stroke-width:1.4;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* numbered pin, sitting on the ring like the reference's tag */
.journey-pin{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  min-width:46px;height:46px;padding:0 10px;
  display:grid;place-items:center;border-radius:23px;
  background:var(--c);color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1;
  box-shadow:0 6px 18px #101d4326;
}
.journey-pin:after{
  content:'';position:absolute;bottom:-5px;left:50%;
  width:12px;height:12px;background:var(--c);
  transform:translateX(-50%) rotate(45deg);border-radius:2px;z-index:-1;
}
.journey-step:nth-child(5) .journey-pin{color:var(--deep)}

/* connector between nodes */
.journey-arrow{
  position:absolute;top:calc(var(--node)/2);inset-inline-start:100%;
  transform:translateY(-50%);margin-inline-start:10px;
  width:clamp(30px,4.4vw,62px);color:#a9bad4;pointer-events:none;
}
.journey-arrow svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .journey-arrow{transform:translateY(-50%) scaleX(-1)}
.journey-step:last-child .journey-arrow{display:none}

.journey-copy{margin-top:26px}
.journey-copy h3{font-size:20px;margin-bottom:9px;letter-spacing:-.02em;color:var(--ink)}
.journey-copy p{font-size:12px;line-height:1.85;color:var(--muted);margin:0;max-width:200px;margin-inline:auto}

/* progress rail beneath, aligned to the five nodes */
.journey-rail{
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  margin-top:46px;position:relative;
}
.journey-rail:before{
  content:'';position:absolute;inset-inline:10%;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,#b9c7dd 0 3px,transparent 3px 9px);
  transform:translateY(-50%);
}
.journey-rail span{
  justify-self:center;position:relative;z-index:1;
  width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px var(--rc,var(--blue)),0 0 0 6px #fff;
}
.journey-rail span:nth-child(1){--rc:#101d43}
.journey-rail span:nth-child(2){--rc:#173990}
.journey-rail span:nth-child(3){--rc:#0c5c87}
.journey-rail span:nth-child(4){--rc:#007f7e}
.journey-rail span:nth-child(5){--rc:#40d3c6}

/* ---- motion: everything starts settled, then plays once on scroll-in ---- */
.journey[data-journey] .journey-node,
.journey[data-journey] .journey-pin,
.journey[data-journey] .journey-copy,
.journey[data-journey] .journey-arrow,
.journey-rail span{transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}

.js .journey[data-journey] .journey-icon{opacity:0;transform:scale(.72)}
.js .journey[data-journey] .journey-pin{opacity:0;transform:translateX(-50%) translateY(-12px)}
.js .journey[data-journey] .journey-copy{opacity:0;transform:translateY(14px)}
.js .journey[data-journey] .journey-arrow{opacity:0;transform:translateY(-50%) translateX(-8px)}
html[dir=rtl].js .journey[data-journey] .journey-arrow{transform:translateY(-50%) scaleX(-1) translateX(-8px)}
.js .journey-rail span{opacity:0;transform:scale(.4)}

.js .journey[data-journey].is-live .journey-icon{opacity:1;transform:none;transition:opacity .5s ease var(--d),transform .5s cubic-bezier(.16,1,.3,1) var(--d)}
.js .journey[data-journey].is-live .journey-pin{opacity:1;transform:translateX(-50%);transition:opacity .5s ease var(--d),transform .55s cubic-bezier(.34,1.56,.64,1) var(--d)}
.js .journey[data-journey].is-live .journey-copy{opacity:1;transform:none;transition:opacity .55s ease calc(var(--d) + .1s),transform .55s cubic-bezier(.16,1,.3,1) calc(var(--d) + .1s)}
.js .journey[data-journey].is-live .journey-arrow{opacity:1;transform:translateY(-50%);transition:opacity .5s ease calc(var(--d) + .22s),transform .5s ease calc(var(--d) + .22s)}
html[dir=rtl].js .journey[data-journey].is-live .journey-arrow{transform:translateY(-50%) scaleX(-1)}
.journey[data-journey].is-live .ring-draw{animation:ring-draw .95s cubic-bezier(.16,1,.3,1) var(--d) forwards}
@keyframes ring-draw{to{stroke-dashoffset:0}}
.journey-rail.is-live span{opacity:1;transform:none;transition:opacity .4s ease var(--d),transform .5s cubic-bezier(.34,1.56,.64,1) var(--d)}

/* a slow travelling pulse keeps the rail alive once everything has landed */
.journey-rail.is-live:after{
  content:'';position:absolute;top:50%;inset-inline-start:10%;
  width:7px;height:7px;border-radius:50%;background:var(--aqua);
  transform:translateY(-50%);
  animation:rail-travel 5.5s cubic-bezier(.65,0,.35,1) 1.6s infinite;
}
@keyframes rail-travel{
  0%{inset-inline-start:10%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{inset-inline-start:90%;opacity:0}
}
.journey-step:hover .journey-icon{transform:scale(1.08);transition:transform .3s ease}
.journey-step:hover .journey-pin{box-shadow:0 8px 22px #101d433d}

@media(max-width:1100px){
  .journey{--node:124px}
  .journey-icon svg{width:36px;height:36px}
  .journey-copy h3{font-size:18px}
}
@media(max-width:760px){
  .journey{--node:74px;grid-template-columns:1fr;gap:0;margin-top:40px}
  .journey-step{display:grid;grid-template-columns:var(--node) 1fr;gap:22px;
                text-align:start;padding:0 0 34px;align-items:start}
  .journey-step:before{content:'';position:absolute;inset-inline-start:calc(var(--node)/2);
                       top:var(--node);bottom:0;width:1px;
                       background:repeating-linear-gradient(180deg,#b9c7dd 0 3px,transparent 3px 9px)}
  .journey-step:last-child:before{display:none}
  .journey-step:last-child{padding-bottom:0}
  .journey-icon svg{width:28px;height:28px}
  .journey-pin{top:-11px;min-width:34px;height:34px;font-size:11px;border-radius:17px}
  .journey-arrow{display:none}
  .journey-copy{margin-top:6px}
  .journey-copy p{max-width:none;font-size:12px}
  .journey-copy h3{font-size:19px}
  .journey-rail{display:none}
  .journey-section{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){
  .js .journey[data-journey] .journey-icon,
  .js .journey[data-journey] .journey-pin,
  .js .journey[data-journey] .journey-copy,
  .js .journey[data-journey] .journey-arrow,
  .js .journey-rail span{opacity:1!important;transform:none!important}
  .js .journey[data-journey] .journey-pin{transform:translateX(-50%)!important}
  .journey-ring .ring-draw{stroke-dashoffset:0}
  .journey-rail.is-live:after{display:none}
}

/* ==========================================================================
   Footer on brand navy + quieter contact rail
   ========================================================================== */
.site-footer{background:#13274d;color:#cfd6e4}
/* the asset is already the white lockup — no filter, or it turns navy on navy */
.site-footer .footer-logo{filter:none;width:124px;margin-bottom:18px}
.footer-grid p{color:#cfd6e4}
.footer-grid h3{color:#fff}
.footer-grid a{color:#e4eaf5}
.site-footer a:hover{color:var(--aqua)}
.footer-map{
  width:265px;height:112px;border-radius:7px;
  border:1px solid #ffffff24;
  transition:transform .3s ease,border-color .3s ease;
}
.footer-grid a:hover .footer-map{transform:scale(1.03);border-color:var(--aqua)}
.social-links a{background:#ffffff14;color:#fff;transition:background .2s ease,color .2s ease}
.social-links a:hover{background:var(--aqua);color:var(--deep)}
.footer-bottom{border-top:1px solid #ffffff1f;color:#93a3c0}
.footer-bottom small{color:#93a3c0}
.footer-bottom a{color:#cfd6e4}
.site-footer .languages a{opacity:.55}
.site-footer .languages a[aria-current]{opacity:1;color:var(--aqua)}
.site-footer .languages span{opacity:.3}
@media(max-width:760px){
  .footer-map{width:100%;max-width:280px;height:96px}
  .site-footer .footer-logo{width:96px}
}

/* Contact rail: let the pill almost disappear, and carry the icons on contrast */
.contact-rail{
  background:#ffffff12;
  border:1px solid #ffffff1c;
  box-shadow:none;
  backdrop-filter:blur(5px);
}
.contact-rail a{color:#000;transition:transform .2s ease,color .2s ease}
.contact-rail a:hover,.contact-rail a:focus-visible{color:#fff}
.rail-mail{color:#000}

/* Video control: compact icon button rather than a labelled pill */
.video-control{
  width:38px;height:38px;padding:0;gap:0;border-radius:50%;
  display:grid;place-items:center;
  background:#0b153b59;border:1px solid #ffffff59;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.video-control svg{width:17px;height:17px;fill:currentColor;stroke:none;display:block}
.video-control:hover{background:#0b153bcc;border-color:#fff;transform:scale(1.06)}
@media(max-width:760px){
  .video-control{width:34px;height:34px;bottom:76px;right:24px}
  .video-control svg{width:15px;height:15px}
}
html[dir=rtl] .video-control{right:auto;left:5vw}
@media(max-width:760px){html[dir=rtl] .video-control{left:24px;right:auto}}

/* Footer map, one more step up */
.footer-map{width:330px;height:150px}
@media(max-width:1100px){.footer-map{width:290px;height:132px}}
@media(max-width:760px){.footer-map{width:100%;max-width:330px;height:150px}}

/* Interior hero can carry film behind the shade, same as the home hero */
.page-hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:-2;opacity:0;transition:opacity .6s}
.page-hero .hero-video.ready{opacity:1}
.page-hero .video-control{bottom:22px;right:5vw}
html[dir=rtl] .page-hero .video-control{right:auto;left:5vw}
@media(max-width:760px){.page-hero .video-control{bottom:16px;right:24px}html[dir=rtl] .page-hero .video-control{left:24px;right:auto}}

/* ==========================================================================
   Scroll reveals — one shared, subtle motion language for every page.
   JS tags elements with data-reveal and a per-element --rv-d stagger.
   ========================================================================== */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(var(--rv-x,0),var(--rv-y,24px),0);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--rv-d,0s),
             transform .7s cubic-bezier(.16,1,.3,1) var(--rv-d,0s);
}
.js [data-reveal].is-revealed{opacity:1;transform:none}
.js [data-reveal="start"]{--rv-x:-28px;--rv-y:0}
.js [data-reveal="end"]{--rv-x:28px;--rv-y:0}
.js [data-reveal="scale"]{--rv-y:16px;transform:translate3d(0,var(--rv-y),0) scale(.975)}
html[dir=rtl].js [data-reveal="start"]{--rv-x:28px}
html[dir=rtl].js [data-reveal="end"]{--rv-x:-28px}
/* no sideways travel where the container already hugs the viewport edge */
@media(max-width:760px){
  .js [data-reveal="start"],.js [data-reveal="end"]{--rv-x:0;--rv-y:22px}
}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   Typography — Effra, self-hosted so every visitor gets it
   Two weights only (400 / 700), so every 500 and 600 in the sheet is
   remapped below rather than left for the browser to fake.
   ========================================================================== */
@font-face{
  font-family:'Effra';
  src:url('../fonts/effra-regular.woff2') format('woff2'),
      url('../fonts/effra-regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Effra';
  src:url('../fonts/effra-bold.woff2') format('woff2'),
      url('../fonts/effra-bold.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}
:root{--font:'Effra',system-ui,-apple-system,'Segoe UI',sans-serif}
body,button,input,select,textarea{font-family:var(--font)}
body{font-synthesis-weight:none}
h1,h2,h3,h4{font-family:var(--font);font-weight:400}
.eyebrow,.button,.text-link,.hero-link,.menu-button,.languages a[aria-current],
.footer-grid h3,.filter-bar button[aria-pressed=true],.insight-tabs button[aria-selected=true],
.card-link,.footer-bottom small,strong,b{font-weight:700}
.metrics strong,.feature-numbers strong,.research-stats strong,.case-summary strong,
.icv-ring b,.icv-legend b,.glance-num,.large-index{font-weight:400}

/* ==========================================================================
   Sidebar menu — slides in from the inline edge instead of taking the screen
   ========================================================================== */
dialog#site-menu{
  inset:0;margin:0;margin-inline-start:auto;
  width:min(430px,92vw);max-width:none;
  height:100dvh;max-height:none;
  background:linear-gradient(165deg,var(--deep) 0%,var(--blue) 55%,#0b5f6b 100%);
  border-radius:0;box-shadow:-30px 0 90px #0a142d59;
  overflow-y:auto;overscroll-behavior:contain;
}
/* margin-inline-start:auto already flips the panel to the left in RTL —
   only the shadow needs mirroring */
html[dir=rtl] dialog#site-menu{box-shadow:30px 0 90px #0a142d59}
dialog#site-menu::backdrop{background:#0a142db8;backdrop-filter:blur(3px);animation:menu-veil .4s ease}
dialog#site-menu[open]{animation:menu-in .45s cubic-bezier(.16,1,.3,1)}
dialog#site-menu.is-closing{animation:menu-out .3s cubic-bezier(.7,0,.84,0) forwards}
dialog#site-menu.is-closing::backdrop{animation:menu-veil .3s ease reverse forwards}
@keyframes menu-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes menu-out{from{transform:none}to{transform:translateX(100%)}}
html[dir=rtl] dialog#site-menu[open]{animation-name:menu-in-rtl}
html[dir=rtl] dialog#site-menu.is-closing{animation-name:menu-out-rtl}
@keyframes menu-in-rtl{from{transform:translateX(-100%)}to{transform:none}}
@keyframes menu-out-rtl{from{transform:none}to{transform:translateX(-100%)}}
@keyframes menu-veil{from{opacity:0}to{opacity:1}}

dialog#site-menu .menu-top{height:auto;padding:24px 30px;border-bottom:1px solid #ffffff26}
dialog#site-menu .menu-top .logo{width:96px}
dialog#site-menu .menu-close{padding:7px 15px;font-size:11px;border-radius:20px}
dialog#site-menu .menu-body{display:block;padding:26px 30px 38px}
dialog#site-menu .menu-intro{padding-top:0;margin-bottom:26px}
dialog#site-menu .menu-intro>p:not(.eyebrow){font-size:26px;line-height:1.25;margin-bottom:14px}
dialog#site-menu .menu-intro .eyebrow{margin-bottom:14px}
dialog#site-menu .menu-intro>a{font-size:12px;color:#cfe4ea}
dialog#site-menu nav>a{font-size:21px;padding:14px 0;gap:16px}
dialog#site-menu .nav-number{font-size:9px;min-width:18px}
@media(max-width:760px){
  dialog#site-menu{width:min(360px,100vw)}
  dialog#site-menu .menu-intro{display:block}
  dialog#site-menu .menu-intro>p:not(.eyebrow){font-size:22px}
  dialog#site-menu nav>a{font-size:19px;padding-block:13px}
  dialog#site-menu .menu-body{padding:22px 24px 32px}
}
@media(prefers-reduced-motion:reduce){
  dialog#site-menu[open],dialog#site-menu.is-closing,dialog#site-menu::backdrop{animation:none}
}

/* ==========================================================================
   Wider use of the brand ramp — teal and aqua were barely appearing outside
   the case-study pages. These are the same tokens, just applied further.
   ========================================================================== */
.impact-band{background:linear-gradient(115deg,var(--blue) 0%,#12557f 58%,var(--teal) 100%)}
.research-stats{background:linear-gradient(120deg,var(--deep) 0%,var(--blue) 55%,#0b6a76 100%)}
.ecosystem-core{background:linear-gradient(100deg,var(--blue),#0b6a76)}
.resource-information{background:linear-gradient(150deg,var(--blue) 0%,#0b6a76 100%)}
.solution-banner:after{background:linear-gradient(90deg,#111d43ee,#0d3f5cb3 55%,#0b6a761a)}
html[dir=rtl] .solution-banner:after{background:linear-gradient(270deg,#111d43ee,#0d3f5cb3 55%,#0b6a761a)}
.case-summary{border-top-color:var(--teal)}
.narrative-block .eyebrow{color:var(--teal)}
.metrics>div{border-inline-start-color:#ffffff3d}
.closing-cta:before{border-color:#40d3c62e;box-shadow:0 0 0 70px #40d3c605,0 0 0 71px #40d3c61f}
.page-hero-shade{background:linear-gradient(90deg,#101d43ed 0%,#0f2c4ebd 50%,#0b6a7626)}
html[dir=rtl] .page-hero-shade{background:linear-gradient(270deg,#101d43ed 0%,#0f2c4ebd 50%,#0b6a7626)}
.footer-grid h3{color:var(--aqua)}
.contact-item .eyebrow{color:var(--teal)}
.priority>span{color:var(--teal)}
.filter-bar button:hover{border-color:var(--teal);color:var(--teal)}

/* client tag, now beside the photo rather than sitting on it */
.client-tag{
  display:inline-flex;align-items:center;gap:16px;
  padding:11px 18px;margin-bottom:22px;
  background:#fff;border:1px solid var(--line);
  border-inline-start:3px solid var(--teal);
  border-radius:7px;
}
.client-tag img{width:64px;height:30px;object-fit:contain}
.client-tag span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.client-tag{margin-bottom:18px;padding:9px 14px;gap:12px}.client-tag img{width:54px;height:26px}}

/* ==========================================================================
   Brand yellow for interaction states.
   SIMAT_Website_Content_Final.docx names the palette as #13274D navy,
   #1EAA95 green, #FFC038 yellow — so hover/focus is #FFC038.
   ========================================================================== */
:root{--gold:#ffc038}
a:hover{color:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:4px;
}
/* on white, the brand yellow is light — keep an underline so the hover state
   still reads even where the colour alone would be faint */
.prose a:hover,.clean-list a:hover,.article-body a:hover,.footer-grid a:hover,
.contact-item a:hover,.insight-copy a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer a:hover{color:var(--gold)}
.hero-link:hover{color:var(--gold)}
dialog#site-menu nav>a:hover,dialog#site-menu nav>a:focus-visible{color:var(--gold)}
dialog#site-menu nav>a[aria-current]{color:var(--aqua)}
.text-link:hover,.card-link:hover{color:var(--gold)}
.solution-card:hover .card-link{color:var(--gold)}
.filter-bar button:hover{border-color:var(--gold);color:var(--ink)}
.insight-teaser:hover{color:var(--gold)}
.round-arrow{transition:background .2s ease,color .2s ease}
a:hover .round-arrow,.case-card:hover .round-arrow,.insight-teaser:hover .round-arrow{
  background:var(--gold);color:var(--deep);
}

/* ==========================================================================
   Hero foot — coloured separator across the brand ramp, and a shadow that
   lifts the hero off the section beneath it
   ========================================================================== */
.home-hero,.page-hero{position:relative;z-index:1;box-shadow:0 18px 38px #101d4326}
.home-hero:after,.page-hero:after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:4px;z-index:4;
  background:linear-gradient(90deg,var(--blue) 0%,var(--teal) 38%,var(--aqua) 68%,var(--gold) 100%);
}
html[dir=rtl] .home-hero:after,html[dir=rtl] .page-hero:after{
  background:linear-gradient(270deg,var(--blue) 0%,var(--teal) 38%,var(--aqua) 68%,var(--gold) 100%);
}
/* the home hero already draws a rule above its footer strip — keep them apart */
.home-hero .hero-bottom{padding-bottom:23px}
@media(max-width:760px){
  .home-hero,.page-hero{box-shadow:0 12px 26px #101d431f}
  .home-hero:after,.page-hero:after{height:3px}
}

/* the menu is nav-only now that the intro block is gone */
dialog#site-menu .menu-body{padding-top:30px}

/* ==========================================================================
   No decorative dash before eyebrows — anywhere
   ========================================================================== */
.eyebrow:before{display:none}

/* ==========================================================================
   Footer separator — same treatment as the hero foot
   ========================================================================== */
.site-footer{position:relative;z-index:1;box-shadow:0 -18px 38px #101d431f}
.site-footer:before{
  content:'';position:absolute;inset-inline:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--teal) 38%,var(--aqua) 68%,var(--gold) 100%);
}
html[dir=rtl] .site-footer:before{
  background:linear-gradient(270deg,var(--blue) 0%,var(--teal) 38%,var(--aqua) 68%,var(--gold) 100%);
}
@media(max-width:760px){.site-footer:before{height:3px}.site-footer{box-shadow:0 -12px 26px #101d4317}}

/* ==========================================================================
   Impact ecosystem — hub-and-spokes infographic
   Flat single-colour icons on tinted tiles, one brand colour per level.
   ========================================================================== */
.impact-ecosystem .section-heading{margin-bottom:10px}
.eco-map{
  position:relative;
  display:grid;grid-template-columns:1fr minmax(190px,224px) 1fr;
  gap:26px 34px;align-items:center;
  margin:46px 0 34px;
}
.eco-spokes{position:absolute;inset:0;pointer-events:none;z-index:0}
.eco-spokes svg{width:100%;height:100%;overflow:visible}
.eco-spokes .spoke{
  fill:none;stroke:#b9cadd;stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:1 0;
}

.eco-hub{
  grid-column:2;grid-row:1/3;position:relative;z-index:1;
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;border-radius:50%;color:#fff;text-align:center;
  background:linear-gradient(150deg,var(--deep) 0%,var(--blue) 55%,var(--teal) 100%);
  box-shadow:0 18px 42px #101d4333,0 0 0 10px #ffffff,0 0 0 12px #dfe7f1;
}
.eco-hub-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:2px}
.eco-hub-icon svg{width:100%;height:100%;fill:var(--aqua)}
.eco-hub b{font-size:23px;font-weight:700;letter-spacing:.02em;line-height:1}
.eco-hub span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#a9e6df}

.eco-card{
  position:relative;z-index:1;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:24px 26px 22px;
  box-shadow:0 6px 22px #101d430a;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.eco-card:nth-of-type(1){grid-column:1;grid-row:1}
.eco-card:nth-of-type(2){grid-column:3;grid-row:1}
.eco-card:nth-of-type(3){grid-column:1;grid-row:2}
.eco-card:nth-of-type(4){grid-column:3;grid-row:2}
.eco-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #101d4314;border-color:var(--c)}
.eco-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:11px;
  background:var(--tint);margin-bottom:16px;
}
.eco-icon svg{width:24px;height:24px;fill:var(--c)}
.eco-index{
  position:absolute;top:22px;inset-inline-end:24px;
  font-size:12px;letter-spacing:.08em;color:var(--c);opacity:.55;
}
.eco-card h3{font-size:23px;margin-bottom:8px;letter-spacing:-.02em}
.eco-card p{font-size:12.5px;line-height:1.8;color:var(--muted);margin:0}
.eco-1{--c:#101d43;--tint:#e7ebf4}
.eco-2{--c:#173990;--tint:#e6ecfb}
.eco-3{--c:#007f7e;--tint:#e0f2f1}
.eco-4{--c:#0b6a76;--tint:#e0f0f3}
.ecosystem-note{margin-top:4px}

/* ---- motion ---- */
.js .eco-map[data-eco] .eco-card{opacity:0;transform:translateY(20px)}
.js .eco-map[data-eco] .eco-hub{opacity:0;transform:scale(.86)}
.js .eco-map[data-eco] .spoke{stroke-dasharray:260;stroke-dashoffset:260}
.js .eco-map[data-eco].is-live .eco-card{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--d),transform .6s cubic-bezier(.16,1,.3,1) var(--d);
}
.js .eco-map[data-eco].is-live .eco-hub{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.4,.64,1);
}
.js .eco-map[data-eco].is-live .spoke{animation:spoke-draw .9s ease-out .35s forwards}
@keyframes spoke-draw{to{stroke-dashoffset:0}}
.eco-map.is-live .eco-hub:after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid #40d3c655;animation:hub-pulse 3.4s ease-out 1.1s infinite;
}
@keyframes hub-pulse{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(1.18);opacity:0}}

@media(max-width:1100px){
  .eco-map{grid-template-columns:1fr minmax(160px,190px) 1fr;gap:20px 24px}
  .eco-card{padding:20px 22px}
  .eco-card h3{font-size:20px}
  .eco-hub b{font-size:20px}
}
@media(max-width:760px){
  .eco-map{grid-template-columns:1fr;gap:16px;margin:32px 0 26px}
  .eco-spokes{display:none}
  .eco-hub{grid-column:1;grid-row:1;aspect-ratio:auto;border-radius:12px;
           flex-direction:row;gap:14px;padding:20px 24px;justify-content:flex-start;
           box-shadow:0 12px 30px #101d4326}
  .eco-hub b{font-size:21px}
  .eco-hub span{margin-inline-start:auto}
  .eco-card:nth-of-type(1),.eco-card:nth-of-type(2),
  .eco-card:nth-of-type(3),.eco-card:nth-of-type(4){grid-column:1;grid-row:auto}
  .eco-icon{width:40px;height:40px;margin-bottom:12px}
  .eco-card h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .js .eco-map[data-eco] .eco-card,.js .eco-map[data-eco] .eco-hub{opacity:1!important;transform:none!important}
  .js .eco-map[data-eco] .spoke{stroke-dashoffset:0}
  .eco-map.is-live .eco-hub:after{display:none}
}

/* ==========================================================================
   Impact hub: SIMAT logo at the centre; each card on its own brand colour
   ========================================================================== */
.eco-hub-icon{width:auto;height:auto;margin-bottom:10px}
.eco-hub-icon img{width:118px;height:auto;filter:none}
.eco-hub span{font-size:10.5px;letter-spacing:.2em}

.eco-card{color:#fff;border:0}
.eco-card h3{color:inherit}
.eco-card p{color:#ffffffd9}
.eco-card .eco-index{color:#ffffff;opacity:.6}
.eco-icon{background:#ffffff24}
.eco-icon svg{fill:#fff}
.eco-1{background:#101d43}
.eco-2{background:#173990}
.eco-3{background:#007f7e}
.eco-4{background:#ffc038}
/* white on the brand yellow is ~1.7:1 — this card carries navy instead */
.eco-4,.eco-4 h3{color:var(--deep)}
.eco-4 p{color:#101d43cc}
.eco-4 .eco-index{color:var(--deep);opacity:.55}
.eco-4 .eco-icon{background:#101d431f}
.eco-4 .eco-icon svg{fill:var(--deep)}
.eco-card:hover{border-color:transparent;box-shadow:0 18px 38px #101d4326}
.eco-spokes .spoke{stroke:#c2cfdd}

/* ==========================================================================
   "A clear path" — chevron process flow (replaces the ringed-node journey)
   ========================================================================== */
.path{
  list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 6px;
}
.path-step{--c:var(--blue);position:relative}
.path-step:nth-child(1){--c:#101d43}
.path-step:nth-child(2){--c:#16357f}
.path-step:nth-child(3){--c:#0c5c87}
.path-step:nth-child(4){--c:#007f7e}
.path-step:nth-child(5){--c:#0b8f86}

.path-chip{
  position:relative;background:var(--c);color:#fff;
  padding:26px 40px 24px 30px;min-height:172px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%,24px 50%);
}
.path-step:first-child .path-chip{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%)}
.path-step:last-child .path-chip{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,24px 50%)}
html[dir=rtl] .path-chip{
  padding:26px 30px 24px 40px;
  clip-path:polygon(100% 0,24px 0,0 50%,24px 100%,100% 100%,calc(100% - 24px) 50%);
}
html[dir=rtl] .path-step:first-child .path-chip{clip-path:polygon(100% 0,24px 0,0 50%,24px 100%,100% 100%)}
html[dir=rtl] .path-step:last-child .path-chip{clip-path:polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - 24px) 50%)}

.path-icon{display:block;width:38px;height:38px;margin-bottom:10px}
.path-icon svg{width:100%;height:100%;display:block}
.path-num{font-size:10.5px;letter-spacing:.16em;opacity:.7;line-height:1}
.path-chip h3{font-size:19px;margin:0;color:#fff;letter-spacing:-.02em;line-height:1.2}
.path-step>p{
  font-size:12.5px;line-height:1.8;color:var(--muted);margin:18px 0 0;
  padding-inline:30px 24px;max-width:250px;
}
html[dir=rtl] .path-step>p{padding-inline:24px 30px}
.path-step:first-child>p{padding-inline-start:30px}

/* motion: each chevron slides in along the direction of travel */
.js .path[data-path] .path-step{opacity:0;transform:translateX(-26px)}
html[dir=rtl].js .path[data-path] .path-step{transform:translateX(26px)}
.js .path[data-path].is-live .path-step{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1) var(--d),transform .6s cubic-bezier(.16,1,.3,1) var(--d);
}
.js .path[data-path] .path-icon{opacity:0;transform:scale(.7)}
.js .path[data-path].is-live .path-icon{
  opacity:1;transform:none;
  transition:opacity .45s ease calc(var(--d) + .2s),transform .5s cubic-bezier(.34,1.5,.64,1) calc(var(--d) + .2s);
}

@media(max-width:1100px){
  .path{grid-template-columns:repeat(5,1fr)}
  .path-chip{padding:22px 32px 20px 24px;min-height:158px}
  .path-chip h3{font-size:16px}
  .path-icon{width:32px;height:32px}
  .path-step>p{font-size:11.5px;padding-inline:24px 18px}
}
@media(max-width:760px){
  .path{grid-template-columns:1fr;gap:14px;margin-top:34px}
  .path-chip{min-height:0;padding:20px 24px;flex-direction:row;align-items:center;gap:16px;
             clip-path:none!important;border-radius:9px}
  .path-icon{width:30px;height:30px;margin:0;flex:0 0 auto}
  .path-chip h3{font-size:18px}
  .path-num{position:absolute;top:12px;inset-inline-end:16px}
  .path-step>p{margin-top:10px;padding-inline:6px;max-width:none;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .js .path[data-path] .path-step,.js .path[data-path] .path-icon{opacity:1!important;transform:none!important}
}

/* ---- menu close button ---- */
.menu-close{display:inline-flex;align-items:center;gap:9px;line-height:1;padding:9px 16px 9px 18px;font-size:12px;letter-spacing:.06em}
.menu-close .x{font-size:15px;line-height:1;font-weight:400;transform:translateY(-1px);opacity:.85}
.menu-close:hover .x{opacity:1}

/* ---- contact page: quick buttons ---- */
.contact-quick{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;padding-block:56px 0}
.qbtn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--deep);font-weight:600;font-size:14px;box-shadow:0 8px 20px #101d430d;transition:transform .25s,box-shadow .25s,border-color .25s,color .25s}
.qbtn svg{width:20px;height:20px;flex:none;color:var(--teal)}
.qbtn:hover{transform:translateY(-2px);box-shadow:0 14px 28px #101d4317;border-color:var(--teal);color:var(--deep)}
.qbtn:hover svg{color:var(--gold)}

/* ---- contact page: form + map panel ---- */
.contact-block{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:stretch;padding-block:40px 70px}
.form-card{padding:38px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 14px 34px #101d430f}
.form-card h2{font-size:26px;margin:0 0 26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.form-grid label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#5b6780}
.form-grid label.full{grid-column:1/-1}
.form-grid input,.form-grid textarea{width:100%;font:inherit;font-size:14px;color:var(--deep);padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--pale);transition:border-color .2s,background .2s}
.form-grid textarea{resize:vertical;min-height:110px}
.form-grid input:focus,.form-grid textarea:focus{outline:none;border-color:var(--teal);background:#fff}
.form-card .form-note{margin:20px 0 0;font-size:11px;color:#7b8598}
.form-card .button{margin-top:18px}
.map-panel{padding:32px;border-radius:10px;background:var(--deep);color:#fff;align-self:stretch;display:flex;flex-direction:column}
.map-panel .eyebrow{color:var(--aqua);margin:0 0 18px}
.map-visual{display:block;position:relative;border-radius:8px;overflow:hidden;flex:0 0 auto}
.map-visual img{display:block;width:100%;height:300px;object-fit:cover}
.map-visual span{position:absolute;inset-inline-start:14px;bottom:14px;padding:10px 14px;background:#fff;color:var(--blue);border-radius:5px;font-size:10px;font-weight:600}
.map-panel .info-stack{list-style:none;flex:0 0 auto;margin:26px 0 auto;padding:0;display:grid;gap:16px}
.map-panel .info-stack li{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.6;color:#dbe3f2}
.map-panel .info-stack svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--aqua)}
.map-panel .info-stack a{color:#fff}
.map-panel .info-stack a:hover{color:var(--gold)}
@media (max-width:900px){
  .contact-block{grid-template-columns:1fr;gap:24px;padding-block:30px 50px}
  .form-card,.map-panel{padding:24px}
  .contact-quick{padding-block:40px 0;gap:12px}
  .qbtn{padding:14px 20px;font-size:13px}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .qbtn{flex:1 1 100%;justify-content:center}
  .map-visual img{height:190px}
}

/* ---- solutions: related case-study strip with client logo ---- */
.related-strip{gap:22px}
.related-logo{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:112px;height:56px;padding:6px 14px;background:#fff;border:1px solid var(--line);border-radius:6px}
.related-logo img{max-width:96px;max-height:44px;width:auto;height:auto;object-fit:contain}
.related-logo.is-text{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--blue);text-align:center;line-height:1.3;padding:8px 14px;height:auto;min-height:44px;max-width:210px}

/* ---- home closing CTA ---- */
.home-cta{position:relative;z-index:1;background:linear-gradient(115deg,var(--deep) 0%,var(--blue) 52%,var(--teal) 100%);color:#fff}
.home-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:50px;padding-block:64px}
.home-cta .eyebrow{color:var(--aqua);margin:0 0 14px}
.home-cta h2{font-size:36px;line-height:1.15;margin:0 0 16px;color:#fff}
.home-cta p{max-width:620px;margin:0;font-size:15px;line-height:1.75;color:#dbe3f2}
.home-cta .button{flex:none;background:#fff;color:var(--blue)}
.home-cta .button:hover{background:var(--gold);color:var(--deep)}
@media (max-width:900px){
  .home-cta-inner{flex-direction:column;align-items:flex-start;gap:28px;padding-block:46px}
  .home-cta h2{font-size:28px}
  .related-logo{min-width:96px;height:40px}
}

/* ---- about: hero title, intro, promise ---- */
.page-hero h1.hero-title-long{font-size:40px;line-height:1.18;max-width:none}
.about-intro{display:grid;grid-template-columns:230px minmax(0,1fr);gap:60px;padding-block:78px 60px}
.about-intro-label{position:relative;padding-top:9px}
.about-intro-label .eyebrow{margin:0}
.about-intro-label:after{content:'';display:block;width:46px;height:3px;margin-top:16px;background:var(--gold)}
.about-lede{max-width:70ch;margin:0;font-size:18px;line-height:1.8;color:#2c3958;letter-spacing:-.005em}
.about-lede:first-letter{font-size:1em}
.about-promise{background:var(--pale);border-block:1px solid var(--line)}
.about-promise>.wrap{padding-block:58px 62px}
.about-promise .eyebrow{margin:0 0 26px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{position:relative;padding:30px 28px 28px;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 22px #101d430a;transition:transform .3s,box-shadow .3s}
.pillar:hover{transform:translateY(-3px);box-shadow:0 16px 32px #101d4314}
.pillar-rule{display:block;width:40px;height:4px;border-radius:99px;background:var(--c,var(--blue))}
.pillar h3{margin:20px 0 0;font-size:21px;line-height:1.25;color:var(--deep)}
.pillar.p1{--c:var(--blue)} .pillar.p2{--c:var(--teal)} .pillar.p3{--c:var(--gold)}
.about-promise .promise-body{max-width:92ch;margin:30px 0 0;font-size:15px;line-height:1.8;color:#4a5773}
/* ---- about: value cards ---- */
.values-grid>.value-card{position:relative;overflow:hidden;padding:34px 30px 30px;border-radius:10px;
  background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--gold);
  box-shadow:0 10px 26px #101d430d;transition:transform .3s,box-shadow .3s}
.values-grid>.value-card:nth-child(2),.values-grid>.value-card:nth-child(3){background:#fff;border-color:var(--line);border-bottom-color:var(--gold)}
.values-grid>.value-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px #101d4317}
.values-grid>.value-card:after{content:'';position:absolute;inset-inline-end:-40px;top:-40px;width:130px;height:130px;
  border-radius:50%;background:#ffc0380f}
.value-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:14px;background:#ffc0381f;color:var(--gold)}
.value-icon svg{width:32px;height:32px}
.value-icon lord-icon{width:42px;height:42px;display:block}
.values-grid>.value-card .index{display:block;margin-top:26px;font-size:12px;font-weight:600;letter-spacing:.16em;
  color:var(--gold);opacity:1}
.values-grid>.value-card h3{margin:8px 0 0;font-size:22px;color:var(--deep)}

/* ---- about: in-country value figures ---- */
.icv-visual{display:block;width:100%;max-width:470px;margin-inline-start:auto}
.icv-total{padding:26px 30px;border-radius:10px;color:#fff;
  background:linear-gradient(120deg,var(--deep) 0%,var(--blue) 58%,var(--teal) 100%)}
.icv-total b{display:block;unicode-bidi:isolate;font-size:44px;font-weight:500;letter-spacing:-.04em;line-height:1}
.icv-total span{display:block;margin-top:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cfe0ee}
.icv-bars{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:20px}
.icv-bar-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:9px}
.icv-bar-head span{font-size:13px;color:#3d4a63}
.icv-bar-head b{font-size:22px;font-weight:500;color:var(--blue);letter-spacing:-.02em}
.icv-track{height:9px;border-radius:99px;background:#d6e2ee;overflow:hidden}
.icv-track>i{display:block;height:100%;width:var(--w);border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--teal))}
.icv-bars li:nth-child(2) .icv-track>i{background:linear-gradient(90deg,var(--teal),var(--aqua))}
.icv-bars li:nth-child(3) .icv-track>i{background:linear-gradient(90deg,#b9820b,var(--gold))}
.icv-bars li:nth-child(3) .icv-bar-head b{color:#9a6c06}
.js .icv-visual[data-icv] .icv-track>i{width:0}
.js .icv-visual[data-icv].is-live .icv-track>i{width:var(--w);transition:width 1.1s cubic-bezier(.16,1,.3,1) .15s}
.js .icv-bars li:nth-child(2) .icv-track>i{transition-delay:.3s}
.js .icv-bars li:nth-child(3) .icv-track>i{transition-delay:.45s}
@media (max-width:900px){
  .page-hero h1.hero-title-long{font-size:32px;max-width:none}
  .about-intro{grid-template-columns:1fr;gap:18px;padding-block:44px 34px}
  .about-intro-label:after{margin-top:12px}
  .about-lede{font-size:15.5px;max-width:none}
  .pillars{grid-template-columns:1fr;gap:14px}
  .pillar{padding:22px}
  .pillar h3{font-size:18px}
  .about-promise>.wrap{padding-block:40px 44px}
  .icv-visual{max-width:none;margin-top:26px}
  .icv-total b{font-size:34px}
  .values-grid>.value-card{padding:26px 22px}
}

/* ---- insights: article pages ---- */
.insight-article{padding-block:46px 70px}
.insight-panel.is-page{display:block}
.insight-panel.is-page>.eyebrow{margin:0 0 26px}
@media (max-width:900px){.insight-article{padding-block:32px 50px}}

/* ---- insights: PDF download ---- */
.insight-download{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.insight-download .button{gap:18px}
.insight-download .button svg{width:19px;height:19px;flex:none}

/* ---- insights: interview video + form-less resource panel ---- */
.insight-video{margin:34px 0 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.insight-video video{width:100%;max-width:360px;border-radius:12px;background:#0b1530;box-shadow:0 18px 40px #101d4326}
.insight-video figcaption{max-width:520px;text-align:center;font-size:12px;color:var(--muted)}
.resource-box.single{grid-template-columns:1fr}
.resource-box.single .resource-information{padding:44px}
.resource-box.single .resource-information h3{max-width:22ch}
.resource-box.single .resource-information p{max-width:70ch;font-size:14px}
@media (max-width:900px){.resource-box.single .resource-information{padding:26px}}
.resource-information .text-link{display:inline-flex;margin-inline-start:22px;color:#fff}
.resource-information .text-link:hover{color:var(--gold)}
@media (max-width:700px){.resource-information .text-link{margin:16px 0 0}}

/* ---- Arabic typeface: Rubik (English keeps Effra) ---- */
@font-face{
  font-family:'Rubik';
  src:url('../fonts/rubik-regular.woff2') format('woff2'),
      url('../fonts/rubik-regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Rubik';
  src:url('../fonts/rubik-bold.woff2') format('woff2'),
      url('../fonts/rubik-bold.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}
html[lang="ar"]{--font:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif}
html[lang="ar"] body,html[lang="ar"] button,html[lang="ar"] input,
html[lang="ar"] select,html[lang="ar"] textarea,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{font-family:var(--font)}
/* Rubik carries a slightly larger x-height than Effra, so the big display
   sizes are eased back a touch to keep the Arabic pages balanced */
html[lang="ar"] .home-hero h1,html[lang="ar"] .page-hero h1{letter-spacing:0}

/* ---- logo marquees: real transparent logos, cross-browser safe ---- */
/* the logos now carry their own transparency, so the multiply blend that used
   to hide white boxes is gone (it also darkened marks over the pale band) */
.logo-set>img{width:112px;height:52px;object-fit:contain;mix-blend-mode:normal}
.logo-set{align-items:center}
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,black 4%,black 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 4%,black 95%,transparent);
}
/* Blink/WebKit need the transform promoted, otherwise the duplicated set can
   land a fraction of a pixel out and the row visibly stutters or gaps */
.marquee-track{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
@media (max-width:900px){
  .logo-set>img{width:88px;height:42px}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- client tag: plain logo + company name, no chip ---- */
.client-tag{background:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:14px;margin-bottom:20px}
.client-tag img{width:92px;height:42px}
.client-tag span{font-size:14px;letter-spacing:0;text-transform:none;color:var(--deep);font-weight:600}
@media (max-width:900px){
  .client-tag{gap:12px;padding:0}
  .client-tag img{width:78px;height:36px}
  .client-tag span{font-size:11px}
}

/* ---- English sets in Effra Bold throughout ----
   The bold cut is mapped onto the normal weight as well, so every English
   string renders in Effra Bold. Arabic is unaffected — it runs on Rubik. */
@font-face{
  font-family:'Effra';
  src:url('../fonts/effra-bold.woff2') format('woff2'),
      url('../fonts/effra-bold.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---- contact: even split, tighter form ---- */
.contact-block{grid-template-columns:1fr 1fr}
.form-card{padding:30px}
.form-card h2{font-size:24px;margin:0 0 18px}
.form-card .eyebrow{margin-bottom:10px}
.form-grid{gap:12px 16px}
.form-grid label{gap:5px}
.form-grid input,.form-grid textarea{padding:9px 12px}
.form-grid textarea{min-height:84px}
.form-card .form-note{margin-top:14px}
.form-card .button{margin-top:12px;min-height:46px}
.map-panel{padding:26px}
.map-visual img{height:250px}
.map-panel .info-stack{margin-top:20px;gap:13px}
@media (max-width:900px){
  .contact-block{grid-template-columns:1fr}
  .form-card,.map-panel{padding:22px}
}
/* let the map take up the height the form no longer uses */
.map-visual{flex:1 1 auto;min-height:250px}
.map-visual img{height:100%;min-height:250px}
@media (max-width:900px){.map-visual{flex:0 0 auto}.map-visual img{height:220px;min-height:0}}

/* ---- footer: keep the contact links on the reading edge in RTL ----
   the phone number carries dir="ltr" so the digits read correctly; as a full
   width block that pinned its text to the left edge in Arabic, so the box is
   shrunk to its content and left to sit where the RTL flow places it */
.site-footer .footer-grid a[href^="mailto"],.site-footer .footer-phone{display:block;width:fit-content;margin-inline:0}
.site-footer .footer-phone{unicode-bidi:isolate;text-align:start}

/* ---- case studies: client logo in the hero and the overview panel ---- */
.case-hero-logo{display:inline-flex;align-items:center;margin-bottom:20px;padding:0;background:none;box-shadow:none}
.case-hero-logo img{width:auto;height:52px;max-width:180px;object-fit:contain;display:block;
  /* no plate behind the mark; a soft white halo keeps dark logos legible on the hero */
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(255,255,255,.45))}
.case-summary .case-logo{display:block;margin:0 0 16px}
.case-summary .case-logo img{width:auto;height:46px;max-width:170px;object-fit:contain;display:block}
@media (max-width:900px){
  .case-hero-logo{margin-bottom:14px}
  .case-hero-logo img{height:40px;max-width:140px}
  .case-summary .case-logo img{height:38px}
}

/* ---- solutions: logo plate removed, mark sits on the strip itself ---- */
.related-logo{background:none;border:0;padding:0;min-width:0}
.related-strip{gap:26px}

/* ---- about: promise pillars carry their brand colour across the card ----
   each card takes the full brand colour with a faint line drawing behind the
   type: a globe for global standards, a located pin for local intelligence,
   a rising measure for measurable impact. Single colour, low opacity. */
.pillar{position:relative;overflow:hidden;border:0;color:#fff;
  background-image:var(--mark);background-repeat:no-repeat;
  background-position:right -26px bottom -30px,center;background-size:190px 190px,cover;
  box-shadow:0 10px 26px #101d4318}
html[dir=rtl] .pillar{background-position:left -26px bottom -30px,center}
.pillar h3{color:inherit}
.pillar-rule{background:#ffffffb3}
.pillar.p1{background-color:var(--deep);background-image:var(--mark),linear-gradient(135deg,var(--deep) 0%,var(--blue) 100%)}
.pillar.p2{background-color:var(--teal);background-image:var(--mark),linear-gradient(135deg,#00615f 0%,var(--teal) 62%,#12a79a 100%)}
/* white on brand yellow measures ~1.7:1, so this card carries navy instead */
.pillar.p3{background-color:var(--gold);color:var(--deep);
  background-image:var(--mark),linear-gradient(135deg,#f0a81f 0%,var(--gold) 70%,#ffd071 100%)}
.pillar.p3 .pillar-rule{background:#101d4359}
.pillar.p1{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Cellipse cx='50' cy='50' rx='14' ry='34'/%3E%3Cpath d='M16 50h68M22 32h56M22 68h56'/%3E%3C/svg%3E")}
.pillar.p2{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-opacity='0.17' stroke-width='2'%3E%3Cpath d='M50 84S26 60 26 42a24 24 0 0 1 48 0c0 18-24 42-24 42z'/%3E%3Ccircle cx='50' cy='42' r='9'/%3E%3Cpath d='M12 74c10 6 24 9 38 9s28-3 38-9'/%3E%3C/svg%3E")}
.pillar.p3{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23101d43' stroke-opacity='0.17' stroke-width='2'%3E%3Cpath d='M16 84h68'/%3E%3Cpath d='M28 84V60M46 84V46M64 84V54M82 84V30'/%3E%3Cpath d='M22 40l20-14 18 10 22-18'/%3E%3Cpath d='M72 18h12v12'/%3E%3C/svg%3E")}
.pillar:hover{transform:translateY(-3px);box-shadow:0 18px 38px #101d4326}
@media (max-width:900px){.pillar{background-size:150px 150px,cover}}

/* ---- about: vision & mission carry a faint photograph ---- */
.vision-grid article{isolation:isolate}
.vision-grid article:before{content:'';position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;pointer-events:none}
.vision-grid article>*{position:relative;z-index:1}
.vision-grid article:after{z-index:0}
.vision-grid article:first-child:before{background-image:url('../img/meeting-consultation.webp');
  background-position:60% 40%;opacity:.11;filter:grayscale(.55)}
.vision-grid article:last-child:before{background-image:url('../img/workshop-session.webp');
  background-position:55% 45%;opacity:.07;filter:grayscale(1)}

/* ---- about: the approach chevrons now carry their copy inside ---- */
.path-chip{display:flex;flex-direction:column;padding:26px 46px 26px 28px;min-height:212px}
html[dir=rtl] .path-chip{padding:26px 28px 26px 46px}
.path-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.path-icon{width:46px;height:46px;flex:0 0 auto;margin:0}
.path-chip h3{font-size:18px;line-height:1.2}
.path-text{margin:0;font-size:12.5px;line-height:1.65;color:#ffffffdb}
.path-num{position:absolute;top:18px;inset-inline-end:34px;opacity:.55}
html[dir=rtl] .path-num{inset-inline-end:30px}
.path-step>p{display:none}   /* nothing should sit outside the shape any more */
@media (max-width:1100px){
  .path-chip{padding:22px 40px 22px 22px;min-height:236px}
  .path-icon{width:38px;height:38px}
  .path-chip h3{font-size:16px}
  .path-text{font-size:12px}
}
@media (max-width:900px){
  .path-chip{min-height:0;padding:20px 34px 20px 22px}
  .path-head{gap:12px}
  .path-icon{width:36px;height:36px}
  .path-num{top:14px;inset-inline-end:26px}
}
/* the stacked mobile chevrons inherited a centred box; keep everything on the
   reading edge so the icon, heading and copy line up */
@media (max-width:900px){
  .path-chip{align-items:stretch}
  .path-head{justify-content:flex-start}
}

/* ---- impact: capability framework laid out as a cross ---- */
.eco-intro{max-width:64ch;margin:0 0 34px;font-size:16px;line-height:1.8;color:#3d4a63}
.eco-map.eco-cross{display:grid;grid-template-columns:1fr minmax(210px,250px) 1fr;
  grid-template-rows:auto auto auto;gap:34px 46px;align-items:center;margin:0 0 34px}
.eco-cross .pos-top{grid-column:2;grid-row:1}
.eco-cross .pos-start{grid-column:1;grid-row:2}
.eco-cross .pos-end{grid-column:3;grid-row:2}
.eco-cross .pos-bottom{grid-column:2;grid-row:3}
.eco-cross .eco-hub{grid-column:2;grid-row:2;aspect-ratio:1}
.eco-card{position:relative}
/* connectors: a rule out of each card with a head pointing at the centre */
.eco-arrow{position:absolute;display:block;color:#b9c6d8}
.eco-arrow:after{content:'';position:absolute;width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor}
.pos-top .eco-arrow{left:50%;top:100%;width:2px;height:34px;margin-left:-1px;background:currentColor}
.pos-top .eco-arrow:after{left:-4px;bottom:0;transform:rotate(45deg)}
.pos-bottom .eco-arrow{left:50%;bottom:100%;width:2px;height:34px;margin-left:-1px;background:currentColor}
.pos-bottom .eco-arrow:after{left:-4px;top:0;transform:rotate(-135deg)}
.pos-start .eco-arrow{top:50%;inset-inline-end:-46px;width:46px;height:2px;margin-top:-1px;background:currentColor}
.pos-start .eco-arrow:after{inset-inline-end:0;top:-4px;transform:rotate(-45deg)}
html[dir=rtl] .pos-start .eco-arrow:after{transform:rotate(135deg)}
.pos-end .eco-arrow{top:50%;inset-inline-start:-46px;width:46px;height:2px;margin-top:-1px;background:currentColor}
.pos-end .eco-arrow:after{inset-inline-start:0;top:-4px;transform:rotate(135deg)}
html[dir=rtl] .pos-end .eco-arrow:after{transform:rotate(-45deg)}
.js .eco-map[data-eco] .eco-arrow{opacity:0}
.js .eco-map[data-eco].is-live .eco-arrow{opacity:1;transition:opacity .5s ease .7s}
.eco-quote{margin:0 0 14px;padding-inline-start:22px;border-inline-start:3px solid var(--gold);
  max-width:72ch;font-size:17px;line-height:1.7;color:var(--deep)}
.impact-ecosystem .ecosystem-note{max-width:78ch;font-size:13px;line-height:1.75}
.impact-ecosystem .button{margin-top:26px}
@media (max-width:900px){
  .eco-map.eco-cross{grid-template-columns:1fr;gap:14px}
  .eco-cross .pos-top,.eco-cross .pos-start,.eco-cross .pos-end,.eco-cross .pos-bottom,
  .eco-cross .eco-hub{grid-column:1;grid-row:auto}
  .eco-cross .eco-hub{aspect-ratio:auto}
  .eco-arrow{display:none}
  .eco-intro{font-size:15px;margin-bottom:24px}
  .eco-quote{font-size:15px}
}
/* the hub carries the outcome in three readable lines under the logo */
.eco-hub-core{display:flex;flex-direction:column;gap:2px;margin:10px 0 0;max-width:15ch}
.eco-hub .eco-hub-core span{font-size:13px;line-height:1.35;letter-spacing:0;text-transform:none;
  color:#eaf2ff;font-weight:700;margin:0}
.eco-cross .eco-hub-icon img{width:96px}
.eco-arrow{color:#9fb0c6}
@media (max-width:900px){.eco-hub-core{max-width:none;margin:6px 0 0}}
/* stop each connector short of the hub ring so the head stays visible */
.pos-top .eco-arrow,.pos-bottom .eco-arrow{height:22px}
.pos-start .eco-arrow{inset-inline-end:-34px;width:34px}
.pos-end .eco-arrow{inset-inline-start:-34px;width:34px}
.eco-arrow{color:#8ea3bd}

/* ---- capability framework page ---- */
.fw-hero{min-height:auto;background:linear-gradient(120deg,var(--deep) 0%,var(--blue) 58%,var(--teal) 100%)}
.fw-hero .wrap{padding-block:78px 70px}
.section.fw-lede{padding-block:60px 10px}
.section.fw-lede p{max-width:70ch;font-size:16px;line-height:1.85;color:#3d4a63;margin:0 0 16px}
.fw-areas{margin-top:34px;border-top:1px solid var(--line)}
.fw-area{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;padding:30px 0;border-bottom:1px solid var(--line)}
.fw-tag{display:inline-block;padding:4px 11px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.1em;margin-bottom:12px}
.fw-a1 .fw-tag{background:#eaf1ff;color:var(--blue)} .fw-a2 .fw-tag{background:#e6f6f3;color:#00615f}
.fw-a3 .fw-tag{background:#e4fbf7;color:#076c65}   .fw-a4 .fw-tag{background:#fff4de;color:#8a6106}
.fw-area h3{margin:0 0 4px;font-size:22px;color:var(--deep)}
.fw-sub{margin:0;font-size:13px;color:var(--muted)}
.fw-area-body>p{margin:0 0 16px;font-size:15px;line-height:1.75;color:#3d4a63;max-width:68ch}
.fw-themes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.fw-themes li{position:relative;padding-inline-start:17px;font-size:13.5px;color:var(--deep)}
.fw-themes li:before{content:'';position:absolute;inset-inline-start:0;top:8px;width:7px;height:7px;border-radius:50%}
.fw-a1 .fw-themes li:before{background:var(--blue)} .fw-a2 .fw-themes li:before{background:var(--teal)}
.fw-a3 .fw-themes li:before{background:#0b8f86}     .fw-a4 .fw-themes li:before{background:var(--gold)}
.fw-note{max-width:70ch;margin:0 0 28px;font-size:15px;line-height:1.8;color:#3d4a63}
.fw-flow{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.fw-flow-a{grid-template-columns:repeat(4,1fr)} .fw-flow-b{grid-template-columns:repeat(3,1fr)}
.fw-step{position:relative;padding-inline-end:22px}
.fw-step:not(:last-child):after{content:'';position:absolute;top:19px;inset-inline-end:0;width:16px;height:1px;background:var(--line)}
.fw-num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--deep);color:#fff;font-size:15px;margin-bottom:14px}
.fw-flow-b .fw-num{background:var(--teal)}
.fw-step h3{margin:0 0 6px;font-size:17px;color:var(--deep)}
.fw-step p{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.fw-evidence{padding:26px 30px;background:var(--pale);border:1px solid var(--line);border-radius:10px;margin-bottom:26px}
.fw-evidence p{margin:0 0 12px;font-size:14px;line-height:1.8;color:#3d4a63}
.fw-evidence p:last-child{margin:0}
.fw-sources{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fw-sources li{padding:18px 0;border-bottom:1px solid var(--line)}
.fw-source-name{margin:0 0 5px;font-size:17px;color:var(--deep)}
.fw-source-link{font-size:13px;color:var(--teal);word-break:break-word}
.fw-source-link:hover{color:var(--gold)}
.fw-notes{padding-block:10px 70px}
.fw-notes h2{font-size:22px;margin-bottom:16px}
.fw-notes p{max-width:74ch;margin:0 0 12px;font-size:13.5px;line-height:1.8;color:var(--muted)}
.fw-notes .button{margin-top:20px}
@media (max-width:900px){
  .fw-area{grid-template-columns:1fr;gap:16px;padding:24px 0}
  .fw-flow-a,.fw-flow-b{grid-template-columns:1fr 1fr;gap:22px}
  .fw-step:not(:last-child):after{display:none}
  .fw-hero .wrap{padding-block:56px 50px}
}
@media (max-width:560px){
  .fw-themes{grid-template-columns:1fr}
  .fw-flow-a,.fw-flow-b{grid-template-columns:1fr}
}

/* ---- framework page: brought in line with the rest of the site ---- */
.fw-hero{background:none}
.fw-hero .wrap{padding-block:96px 84px}
.fw-hero .page-hero-content p{max-width:58ch}
/* opening statement beside a photograph */
.fw-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.fw-intro-copy p{max-width:60ch;font-size:16px;line-height:1.85;color:#3d4a63;margin:0 0 16px}
.fw-intro-copy p:last-child{margin-bottom:0}
.fw-intro-figure{margin:0;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 20px 44px #101d431f}
.fw-intro-figure img{display:block;width:100%;height:420px;object-fit:cover}
.fw-intro-figure:after{content:'';position:absolute;inset-inline:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--teal) 38%,var(--aqua) 68%,var(--gold) 100%)}
/* the four areas read as brand cards rather than plain rows */
.fw-areas{border:0;margin-top:34px;display:grid;gap:18px}
.fw-area{border:1px solid var(--line);border-radius:12px;background:#fff;padding:26px 30px;
  border-top:4px solid var(--c,var(--blue));box-shadow:0 10px 26px #101d430d;
  transition:transform .3s,box-shadow .3s}
.fw-area:hover{transform:translateY(-3px);box-shadow:0 18px 38px #101d4317}
.fw-a1{--c:var(--deep)} .fw-a2{--c:var(--blue)} .fw-a3{--c:var(--teal)} .fw-a4{--c:var(--gold)}
.fw-tag{background:var(--c);color:#fff;letter-spacing:.14em}
.fw-a4 .fw-tag{color:var(--deep)}
.fw-area h3{font-size:24px}
.fw-themes li:before{background:var(--c)}
.fw-a1 .fw-themes li:before,.fw-a2 .fw-themes li:before,
.fw-a3 .fw-themes li:before,.fw-a4 .fw-themes li:before{background:var(--c)}
/* numbered flows pick up the brand ramp */
.fw-flow-a .fw-step:nth-child(1) .fw-num{background:var(--deep)}
.fw-flow-a .fw-step:nth-child(2) .fw-num{background:var(--blue)}
.fw-flow-a .fw-step:nth-child(3) .fw-num{background:var(--teal)}
.fw-flow-a .fw-step:nth-child(4) .fw-num{background:var(--gold);color:var(--deep)}
.fw-flow-b .fw-step:nth-child(1) .fw-num{background:var(--deep)}
.fw-flow-b .fw-step:nth-child(2) .fw-num{background:var(--teal)}
.fw-flow-b .fw-step:nth-child(3) .fw-num{background:var(--gold);color:var(--deep)}
.fw-num{font-weight:700;box-shadow:0 8px 18px #101d431f}
/* sources and notes */
.fw-evidence{border-inline-start:4px solid var(--gold)}
.fw-sources li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.fw-source-name{flex:1 1 320px}
.fw-notes{background:var(--pale);border-radius:12px;padding:30px 34px;margin-bottom:70px}
.fw-notes h2{font-size:20px}
.fw-cta{margin-top:0}
@media (max-width:900px){
  .fw-intro{grid-template-columns:1fr;gap:26px}
  .fw-intro-figure img{height:280px}
  .fw-hero .wrap{padding-block:64px 56px}
  .fw-area{padding:22px}
  .fw-area h3{font-size:20px}
  .fw-notes{padding:22px;margin-bottom:0}
}
/* the featured case photo is a normal cover crop again — the zoom below was
   tuned to hide a logo burned into the previous image */
.feature-photo.case-photo-0>img{height:100%;min-height:0;width:100%;object-fit:cover;
  object-position:50% 0;transform:none}
/* the featured case photo is a two-frame composite: show it whole rather than
   cropping the lower frame away */
.feature-photo.case-photo-0{min-height:0;background:#fff;align-self:start}
.feature-photo.case-photo-0>img{position:static;inset:auto;width:100%;height:auto;
  min-height:0;object-fit:contain;object-position:center;transform:none;display:block}
/* with the composite shown in full the photo column is the taller one, so the
   copy beside it sits centred rather than stranded at the top */
.case-photo-0 ~ .feature-content{align-self:center}
@media (max-width:900px){.case-photo-0 ~ .feature-content{align-self:auto}}
/* client tag without a logo file yet: the name carries it on its own */
.client-tag.is-wordmark span{font-size:18px;font-weight:700;color:var(--deep);letter-spacing:-.01em}
/* a year range is not a headline figure: keep it on one line at a calmer size */
.feature-numbers .is-range strong{font-size:26px;white-space:nowrap;letter-spacing:0}
/* emblem-style client marks (Oman Arab Bank) need more height than a wordmark;
   the wordmarks stay capped by their max-width so nothing else grows */
.client-tag img{width:auto;max-width:112px;height:52px}
.case-summary .case-logo img{height:58px;max-width:180px}
.case-hero-logo img{height:64px;max-width:190px}
@media (max-width:900px){
  .client-tag img{max-width:92px;height:42px}
  .case-summary .case-logo img{height:46px}
  .case-hero-logo img{height:46px;max-width:150px}
}

/* ---- about: step copy reveals on hover ----
   The layout is unchanged: the text keeps its space and only fades, rising a
   little as it comes in. Devices without hover, and anyone tabbing through,
   always see it. */
.path-text{opacity:0;transform:translateY(14px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.path-step:hover .path-text,.path-step:focus-within .path-text{opacity:1;transform:none}
@media (hover:none){.path-text{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.path-text{opacity:1;transform:none;transition:none}}

/* ---- about: value cards carry the brand colours, like the promise pillars ---- */
.values-grid>.value-card{color:#fff;border:0;border-bottom:0;
  box-shadow:0 12px 30px #101d4319}
.values-grid>.value-card:nth-child(1),
.values-grid>.value-card.v1{background:linear-gradient(135deg,var(--deep) 0%,var(--blue) 100%)}
.values-grid>.value-card:nth-child(2){background:linear-gradient(135deg,#00615f 0%,var(--teal) 62%,#12a79a 100%)}
.values-grid>.value-card:nth-child(3){background:linear-gradient(135deg,#f0a81f 0%,var(--gold) 70%,#ffd071 100%);
  color:var(--deep)}
.values-grid>.value-card:after{background:#ffffff1f}
.values-grid>.value-card:nth-child(3):after{background:#101d430f}
.value-icon{background:#ffffff26;color:#fff}
.values-grid>.value-card:nth-child(3) .value-icon{background:#101d4314;color:var(--deep)}
.values-grid>.value-card .index{color:#ffffffb8}
.values-grid>.value-card:nth-child(3) .index{color:#101d4399}
.values-grid>.value-card h3{color:inherit}
.values-grid>.value-card:hover{box-shadow:0 20px 42px #101d4326}


/* ---- case card foot: the link on one side, the client mark on the other --- */
.case-foot{margin-top:auto;padding-top:18px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px}
.case-foot .text-link{margin-top:0;align-self:flex-end}
.case-card-logo{height:34px;width:auto;max-width:132px;object-fit:contain;object-position:right bottom;
  background:none;border:0;flex:none;opacity:.92}
html[dir=rtl] .case-card-logo{object-position:left bottom}
.case-client{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted,#637086);text-align:end;line-height:1.3;max-width:132px}
@media (max-width:640px){
  .case-card-logo{height:28px;max-width:104px}
}


/* ------- the two figures beside a feature read as one row: same sizes ----- */
.feature-numbers{align-items:flex-start}
.feature-numbers>div{max-width:none}
.feature-numbers>div:first-child{max-width:170px}
.feature-numbers .is-range{max-width:280px}
.feature-numbers>div>strong,
.feature-numbers .is-range strong{font-size:40px;line-height:1.2;letter-spacing:-.05em;white-space:nowrap}
.feature-numbers .is-range span{font-size:10px;margin-top:7px}
@media (max-width:1100px){
  .feature-numbers>div>strong,
  .feature-numbers .is-range strong{font-size:30px}
}
@media (max-width:640px){
  .feature-numbers{gap:22px}
  .feature-numbers>div>strong,
  .feature-numbers .is-range strong{font-size:26px}
}


/* --- impact hero: raise the framing so the speaker's head is not clipped --- */
body[data-page="impact"] .page-hero-photo,
body[data-page="impact"] .hero-video{object-position:center 14%}


/* ------------------------- lead capture -------------------------------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status.is-good{color:var(--teal);font-weight:700}
.form-status.is-bad{color:#a4442f;font-weight:700}

dialog.lead-gate{margin:auto;width:min(430px,calc(100vw - 32px));max-width:none;height:fit-content;
  max-height:calc(100dvh - 48px);border:0;padding:0;border-radius:16px;overflow:auto;
  box-shadow:0 34px 80px #0b132c52;background:#fff;color:var(--ink)}
.lead-gate::backdrop{background:#0b132ccc;backdrop-filter:blur(3px)}
.lead-gate-form{padding:30px 30px 26px;display:flex;flex-direction:column;gap:12px}
.lead-gate h2{font-size:22px;line-height:1.25;margin:0}
.lead-gate-note{margin:0 0 4px;font-size:13px;line-height:1.6;color:var(--muted)}
.lead-gate label{display:block}
.lead-gate label>span{display:block;margin-bottom:5px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.lead-gate input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  background:var(--pale);font:inherit;color:inherit}
.lead-gate input:focus{outline:none;border-color:var(--teal);background:#fff}
.lead-gate-consent{margin:2px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.lead-gate-actions{display:flex;align-items:center;gap:14px;margin-top:6px}
.lead-gate-actions .button{flex:1;justify-content:center}
.lead-gate-cancel{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;
  padding:8px 4px}
.lead-gate-cancel:hover{color:var(--deep);text-decoration:underline}
.lead-gate .form-status{margin:2px 0 0;font-size:12.5px;min-height:18px}
html[dir=rtl] .lead-gate-form{text-align:right}


/* ------- footer at a readable size: it was set for a much smaller block --- */
.site-footer .footer-logo{width:190px;margin-bottom:34px}
.site-footer .footer-grid h3{font-size:19px;letter-spacing:-.01em;margin-block:2px 26px}
.site-footer .footer-grid p{font-size:14px;line-height:1.85;max-width:340px;margin-bottom:14px}
.site-footer .footer-grid a{font-size:15px}
.site-footer .footer-phone{margin-top:6px}
.site-footer .social-links{gap:11px;margin-bottom:28px}
.site-footer .social-links a{width:36px;height:36px}
.site-footer .social-links svg{width:16px;height:16px}

@media (max-width:980px){
  .site-footer .footer-logo{width:150px;margin-bottom:24px}
  .site-footer .footer-grid h3{font-size:16px;margin-block:2px 20px}
  .site-footer .social-links{margin-bottom:22px}
  .site-footer .footer-grid p{font-size:13px}
  .site-footer .footer-grid a{font-size:13.5px}
}
@media (max-width:640px){
  .site-footer .footer-logo{width:132px;margin-bottom:18px}
  .site-footer .footer-grid h3{font-size:15px;margin-block:2px 16px}
  .site-footer .social-links{margin-bottom:18px}
  .site-footer .footer-grid p{font-size:12.5px;margin-bottom:10px}
  .site-footer .footer-grid a{font-size:13px}
  .site-footer .social-links a{width:32px;height:32px}
}


/* the footer's own link colour was winning over the hover state */
.site-footer .social-links a{color:#fff}
.site-footer .social-links a:hover,
.site-footer .social-links a:focus-visible{background:var(--aqua);color:var(--deep)}


/* the map reads better a little larger, without pushing its column */
.site-footer .footer-map{width:100%;max-width:340px;height:158px}
@media (max-width:980px){ .site-footer .footer-map{max-width:330px;height:155px} }
@media (max-width:640px){ .site-footer .footer-map{max-width:100%;height:150px} }


/* the sector and dates sit under the figures, in the same small style */
.feature-content .feature-meta{margin:0 0 22px}


/* ---- capability framework: a trunk with four branches, SIMAT colours ---- */
.eco-tree{display:block;position:relative;margin:40px 0 32px}
.eco-crown{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:30px 34px;border-radius:14px;color:#fff;text-align:center;
  background:linear-gradient(100deg,var(--deep) 0%,var(--blue) 52%,var(--teal) 100%)}
.eco-crown .eco-crown-logo{width:150px;height:auto;flex:none}
.eco-crown p{margin:0;font-size:27px;font-weight:700;line-height:1.2;letter-spacing:-.02em;max-width:18ch}

.eco-branches{position:relative;display:flex;flex-direction:column;gap:52px;padding-top:52px}
.eco-row{position:relative;display:flex;align-items:stretch}
.eco-row::before{content:'';position:absolute;left:50%;transform:translateX(-50%);width:3px;
  background:#b3c1d6;top:-52px;bottom:-52px;z-index:0}
.eco-row:last-child::before{bottom:50%}

.eco-tree .eco-card{flex:1;display:flex;flex-direction:column;justify-content:center;
  background:var(--c);color:#fff;border:0;border-radius:10px;padding:26px 30px;min-height:112px}
.eco-tree .eco-card h3{color:#fff;margin:0 0 6px;font-size:22px;letter-spacing:-.02em}
.eco-tree .eco-card p{color:#ffffffd1;font-size:13px;line-height:1.7;margin:0}
.eco-tree .eco-card:hover{transform:translateY(-3px)}

.eco-link{position:relative;align-self:center;flex:0 0 clamp(90px,16vw,200px);height:3px;
  background:#b3c1d6;z-index:1}
.eco-link::before,.eco-link::after{content:'';position:absolute;top:50%;width:0;height:0;
  border-top:9px solid transparent;border-bottom:9px solid transparent;transform:translateY(-50%)}
.eco-link::before{left:0;border-right:14px solid #3f5572}
.eco-link::after{right:0;border-left:14px solid #3f5572}

@media (max-width:900px){
  .eco-crown{gap:18px;padding:24px 22px}
  .eco-crown .eco-crown-logo{width:120px}
  .eco-crown p{font-size:22px}
  .eco-branches{gap:34px;padding-top:34px}
  .eco-row::before{top:-34px;bottom:-34px}
  .eco-tree .eco-card{padding:20px 22px;min-height:96px}
  .eco-tree .eco-card h3{font-size:19px}
  .eco-link{flex-basis:clamp(60px,10vw,110px)}
}
@media (max-width:640px){
  .eco-branches{gap:14px;padding-top:22px}
  .eco-row{flex-direction:column;gap:14px}
  .eco-row::before,.eco-row:last-child::before{display:none}
  .eco-link{display:none}
  .eco-crown p{font-size:19px;max-width:none}
}


/* the impact band now carries four figures */
.metrics.four{grid-template-columns:repeat(4,1fr);grid-column:1/-1;width:100%}
.metrics.four>div:first-child{border:0;padding-inline-start:0}
.metrics.four strong{font-size:45px}
@media (max-width:1100px){
  .metrics.four{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .metrics.four strong{font-size:36px}
}
@media (max-width:560px){
  .metrics.four{grid-template-columns:1fr;row-gap:20px}
  .metrics.four>div{border:0;padding-inline-start:0}
}


/* the four marks come back inside the boxes, and the diagram gets room below */
.eco-tree{margin-bottom:58px}
.eco-tree .eco-card{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}
.eco-tree .eco-text{min-width:0}
.eco-tree .eco-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;margin:0;
  border-radius:12px;background:#ffffff1f}
.eco-tree .eco-icon svg{width:26px;height:26px;fill:#fff}
@media (max-width:900px){
  .eco-tree{margin-bottom:40px}
  .eco-tree .eco-card{gap:14px}
  .eco-tree .eco-icon{width:44px;height:44px;border-radius:10px}
  .eco-tree .eco-icon svg{width:22px;height:22px}
}
@media (max-width:640px){ .eco-tree{margin-bottom:30px} }


/* ---- case study: fuller hero, one full-width panel for the narrative ---- */
.page-hero .page-hero-content.case-hero{max-width:1120px;padding-block:60px}
.page-hero .case-hero h1{margin-bottom:26px}
.page-hero .case-hero .case-hero-line{margin:0 0 4px;font-weight:700;font-size:18px;color:#fff;letter-spacing:-.01em}
.page-hero .case-hero .case-hero-text{margin:10px 0 0;font-size:14.5px;line-height:1.95;color:#ffffffdb;max-width:none}
.page-hero .case-hero .case-hero-figure{margin:22px 0 0;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em}
.page-hero .case-hero .case-hero-figure + .case-hero-figure{margin-top:5px}
.page-hero .case-hero .button{margin-top:40px}

.case-detail-layout.is-full{display:block;grid-template-columns:none;gap:0;padding-block:70px}
.case-paper{background:var(--pale);border-top:3px solid var(--teal);border-radius:6px;padding:52px 58px 44px}
.case-paper .narrative-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

@media (max-width:900px){
  .page-hero .page-hero-content.case-hero{padding-block:44px}
  .page-hero .case-hero h1{margin-bottom:20px}
  .page-hero .case-hero .case-hero-line{font-size:16px}
  .page-hero .case-hero .case-hero-text{font-size:13.5px}
  .page-hero .case-hero .case-hero-figure{font-size:16px}
  .page-hero .case-hero .button{margin-top:30px}
  .case-detail-layout.is-full{padding-block:45px}
  .case-paper{padding:34px 26px 26px}
}
@media (max-width:640px){
  .case-paper{padding:26px 20px 18px;border-radius:5px}
  .page-hero .case-hero .case-hero-line,
  .page-hero .case-hero .case-hero-figure{font-size:15px}
}


/* insights hero: lift the framing so the speaker is clear from the first frame */
body[data-page="insights"] .page-hero-photo,
body[data-page="insights"] .hero-video{object-position:center 4%}


/* the feature photograph fills its half: no gap under it */
.feature-photo.case-photo-0{min-height:490px;align-self:stretch;background:#e8edf3}
.feature-photo.case-photo-0>img{position:absolute;inset:0;width:100%;height:100%;min-height:0;
  object-fit:cover;object-position:center;transform:none}
@media (max-width:1100px){ .feature-photo.case-photo-0{min-height:460px} }
@media (max-width:860px){ .feature-photo.case-photo-0{min-height:300px} }


/* case studies hero: lift the framing so both faces sit clear of the edge */
body[data-page="case-studies"] .page-hero-photo,
body[data-page="case-studies"] .hero-video{object-position:center 10%}


/* solution banners: keep heads inside the band, not cropped at the top */
.solution-banner>img{object-position:center 15%}
@media (max-width:860px){ .solution-banner>img{object-position:center 12%} }

/* case-study heroes: anchor the crop near the top so faces are never cut off */
body[data-page="case-oxy"] .page-hero-photo{object-position:center 10%}
body[data-page="case-mutamad"] .page-hero-photo{object-position:center top}