/* =========================================================
   Infinite Excellence (ie4): ULTRAMODERN Edition
   Dual theme (light / dark) + RTL-ready + single-page app styles
   Brand core sampled from logo: Blue #0505C5  Green #5FBF5F
   ========================================================= */

:root{
  --brand-blue:  #0505C5;   /* brand core */
  --brand-green: #68BD68;   /* brand core */
  --brand-blue-deep: #03037E;
  --brand-green-deep: #3E8C46;
  --brand-blue-lift: #3B3BE8;
  --brand-green-lift: #8FD28F;

  /* Brand font is Gotham. It is licensed, so it cannot be served from a public
     CDN: drop the .woff2 files into assets/fonts/ and uncomment the @font-face
     block at the foot of this file to switch the whole site over. Until then the
     stack falls back to Montserrat, the closest widely available geometric sans. */
  --font-display: 'Gotham', 'Gotham HTF', 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Gotham', 'Gotham HTF', 'Montserrat', 'Segoe UI', sans-serif;
  --font-ar: 'Tajawal', 'Gotham', 'Montserrat', sans-serif;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1280px;
}

/* ---------------- DARK THEME (default) ---------------- */
:root,
[data-theme="dark"]{
  --bg:            #05070f;
  --bg-alt:        #0a0e1c;
  --surface:       #10152b;
  --surface-2:     #161c38;
  --border:        rgba(255,255,255,0.09);
  --text:          #f3f5ff;
  --text-dim:      #aab0c8;
  --text-faint:    #6b7290;
  --glass-bg:      rgba(255,255,255,0.05);
  --glass-border:  rgba(255,255,255,0.12);
  --shadow-card:   0 30px 70px -30px rgba(0,0,0,0.65);
  --shadow-soft:   0 14px 34px -16px rgba(0,0,0,0.55);
  --shadow-glow:   0 0 0 1px rgba(104,189,104,0.25), 0 20px 50px -20px rgba(5,5,197,0.56);
  --grad-hero:     radial-gradient(ellipse 65% 55% at 80% 15%, rgba(5,5,197,0.44), transparent 60%),
                    radial-gradient(ellipse 45% 45% at 10% 90%, rgba(104,189,104,0.16), transparent 60%),
                    linear-gradient(160deg, #03040a 0%, #05070f 55%, #070a18 100%);
  --scrollbar:     #1c2340;
  --brand-blue-ink:  #7A7AF7;   /* brand blue, lightened for text on dark */
  --brand-green-ink: #68BD68;   /* brand green reads fine on dark */
}

/* =========================================================================
   HERO BACKGROUND IMAGE: removed
   The supplied network/glow photo that sat behind the dark-theme hero has been
   taken back out at the client's request. The hero now uses the plain
   --grad-hero gradient again in both themes, exactly as it did before that
   image was added. The extracted asset itself (assets/images/hero-network-bg.jpg)
   is left in place in case it is wanted again; only this override is gone.
   ========================================================================= */

/* ---------------- LIGHT THEME ---------------- */
[data-theme="light"]{
  --brand-blue-ink:  #0505C5;   /* exact brand blue on light */
  --brand-green-ink: #37803C;   /* brand green darkened for text on light (AA on white) */
  --bg:            #f6f7fb;
  --bg-alt:        #ffffff;
  --surface:       #ffffff;
  --surface-2:     #eef0fa;
  --border:        rgba(10,15,40,0.08);
  --text:          #0c1024;
  --text-dim:      #4a516b;
  --text-faint:    #838aa6;
  --glass-bg:      rgba(255,255,255,0.65);
  --glass-border:  rgba(10,15,40,0.08);
  --shadow-card:   0 30px 60px -28px rgba(20,25,60,0.22);
  --shadow-soft:   0 12px 28px -16px rgba(20,25,60,0.16);
  --shadow-glow:   0 0 0 1px rgba(5,5,197,0.19), 0 20px 45px -22px rgba(5,5,197,0.31);
  --grad-hero:     radial-gradient(ellipse 65% 55% at 80% 10%, rgba(5,5,197,0.18), transparent 60%),
                    radial-gradient(ellipse 45% 45% at 10% 90%, rgba(104,189,104,0.14), transparent 60%),
                    linear-gradient(160deg, #eef1fb 0%, #f6f7fb 55%, #eef4f1 100%);
  --scrollbar:     #d7dbee;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html[dir="rtl"] body{ font-family: var(--font-ar); }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition: background .4s ease, color .4s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.14; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:var(--font-body); cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background: var(--brand-green); color:#04140c; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--scrollbar); border-radius:8px; }

:focus-visible{ outline:3px solid var(--brand-green); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 32px; }

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:999;
  background:var(--brand-blue); color:#fff; padding:12px 20px;
  border-radius:var(--radius-sm); font-weight:700; font-size:.9rem;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

/* ---------------- Gradient text + chips ---------------- */
.grad-text{
  background: linear-gradient(100deg, var(--brand-green), var(--brand-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chip{ margin-bottom:20px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:1.4px; text-transform:uppercase;
  /* A fixed, very light tint of #68BD68 rather than the previous glass/
     translucent fill: deliberately the same in both themes, since a pale
     pill needs dark-on-light text to stay readable, and that only works if
     the fill itself does not follow the page's light/dark state. */
  color:#2F7034;
  background:#EAF6EA;
  border:1px solid rgba(104,189,104,.38);
  padding:8px 16px; border-radius:var(--radius-pill);
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-green); flex-shrink:0; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 30px; border-radius:var(--radius-pill);
  font-weight:600; font-size:.97rem; font-family:var(--font-body);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
html[dir="rtl"] .btn svg{ transform:scaleX(-1); }
.btn:hover svg{ transform:translateX(3px); }
html[dir="rtl"] .btn:hover svg{ transform:translateX(-3px) scaleX(-1); }

.btn-solid{
  background: linear-gradient(100deg, var(--brand-blue), var(--brand-blue-deep));
  color:#fff; box-shadow: 0 16px 34px -16px rgba(5,5,197,0.75);
}
.btn-solid:hover{ box-shadow:0 20px 40px -14px rgba(5,5,197,0.94); }
.btn-glow{
  background: linear-gradient(100deg, var(--brand-blue), var(--brand-blue-lift));
  color:#fff; box-shadow: 0 16px 34px -16px rgba(5,5,197,0.55);
}
.btn-glow:hover{ box-shadow:0 20px 40px -14px rgba(5,5,197,0.7); }
.btn-ghost{
  background: var(--glass-bg);
  color: var(--text);
  border:1.5px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{ border-color: var(--brand-green); }
.btn-sm{ padding:11px 22px; font-size:.85rem; }

/* =========================================================================
   MODERN LINK: replaces the "Learn More" pill/ghost button on the home
   page teaser sections. No border, no background, no pill shape: a bold
   text link with an animated underline and a sliding arrow, in the manner
   of current SaaS design (Linear, Stripe) rather than a boxed button.
   ========================================================================= */
.link-modern{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  margin-top:24px;
  color:var(--brand-blue-ink);
  padding-bottom:3px; position:relative; width:fit-content;
}
.link-modern::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:currentColor; border-radius:2px;
  transition:right .3s var(--ease);
}
.link-modern:hover::after{ right:0; }
.link-modern svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.link-modern:hover svg{ transform:translateX(4px); }
html[dir="rtl"] .link-modern svg{ transform:scaleX(-1); }
html[dir="rtl"] .link-modern:hover svg{ transform:translateX(-4px) scaleX(-1); }
html[dir="rtl"] .link-modern::after{ left:100%; right:0; }
html[dir="rtl"] .link-modern:hover::after{ left:0; }

/* ---------------- Topbar (desktop) + burger (mobile) ---------------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.topbar.scrolled{
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  padding:11px 0;
  box-shadow: 0 12px 34px -22px rgba(0,0,0,0.5);
  border-bottom:1px solid var(--border);
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:11px; }
.brand .mark{ height:36px; width:auto; flex-shrink:0; }
[data-theme="light"] .brand .mark{ filter: invert(1) hue-rotate(180deg) brightness(0.4); }
.brand .word{ display:flex; flex-direction:column; line-height:1.05; }
.brand .word .ie4{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.brand .word small{ font-size:.6rem; letter-spacing:1.6px; text-transform:uppercase; opacity:.65; font-weight:600; margin-top:2px; }

/* Desktop inline nav: hidden on mobile */
.desktop-nav{ display:flex; align-items:center; gap:2px; }
.desktop-nav > .dn-item{ position:relative; }
.desktop-nav > .dn-item > a,
.desktop-nav > .dn-item > button{
  display:flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:var(--radius-pill);
  font-size:.9rem; font-weight:600; color:var(--text-dim);
  transition: background .2s ease, color .2s ease;
}
.desktop-nav > .dn-item > a:hover,
.desktop-nav > .dn-item > button:hover,
.desktop-nav > .dn-item > a.active{ color:var(--text); background:var(--glass-bg); }
.desktop-nav > .dn-item > button svg{ width:14px; height:14px; transition:transform .25s ease; }
.desktop-nav > .dn-item.open > button svg{ transform:rotate(180deg); }
.desktop-nav > .dn-item.open > button{ color:#fff; background:var(--brand-blue); }

.dn-dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  width:280px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:10px; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:50;
  max-height:calc(100vh - 96px); overflow-y:auto;
}
.desktop-nav > .dn-item.open .dn-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.dn-dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:var(--radius-md);
  font-size:.88rem; font-weight:600; color:var(--text-dim);
  transition: background .2s ease, color .2s ease;
}
.dn-dropdown a:hover, .dn-dropdown a.active{ background:var(--glass-bg); color:var(--brand-green-ink); }
.dn-dropdown a .bullet{ width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.dn-dropdown .dn-foot{ border-top:1px solid var(--border); margin-top:6px; padding-top:8px; }
.dn-section-title{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); padding:10px 14px 4px;
}
.dn-section-title-2{ border-top:1px solid var(--border); margin-top:6px; padding-top:12px; }
.dn-foot-nomargin{ border-top:0; margin-top:0; padding-top:0; }
.dn-dropdown .dn-foot a{ color:var(--brand-blue-ink); font-weight:700; }

.topbar-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:32px; }

/* ---- the consolidated "more" circle: About Us + Contact ---- */
.more-dropdown{ position:relative; }
.more-toggle{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--text);
  transition: background .2s ease, border-color .2s ease;
}
.more-toggle:hover{ background:var(--glass-border); }
.more-toggle svg{ width:19px; height:19px; }
.more-dropdown.open .more-toggle{ background:var(--brand-blue); border-color:transparent; color:#fff; }
.more-dropdown-panel{
  right:0; left:auto; transform:translateY(6px);
}
html[dir="rtl"] .more-dropdown-panel{ right:auto; left:0; }
.more-dropdown.open .more-dropdown-panel{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.more-dropdown.open .more-toggle svg{ transform:none; }

/* Theme + language controls */
.theme-toggle{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--text);
  transition: background .2s ease, transform .3s ease;
}
.theme-toggle:hover{ transform:rotate(15deg); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
[data-theme="light"] .theme-toggle .icon-sun{ display:block; }

/* ---- language switch: a round flag, nothing else ---- */
.lang-switch{ position:relative; }
.lang-current{
  width:42px; height:42px; border-radius:50%; padding:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); border:1px solid var(--glass-border);
}
.lang-current span[class^="flag-"]{
  display:none; width:100%; height:100%; border-radius:50%; overflow:hidden;
}
.lang-current span[class^="flag-"] svg{ width:100%; height:100%; display:block; }
html[lang="en"] .lang-current .flag-ie{ display:block; }
html[lang="es"] .lang-current .flag-es{ display:block; }
html[lang="ar"] .lang-current .flag-ae{ display:block; }
html[lang="fr"] .lang-current .flag-fr{ display:block; }
.lang-menu button span[class^="flag-"]{
  display:inline-block; width:18px; height:18px; border-radius:50%; overflow:hidden;
  margin-inline-end:9px; flex:none; vertical-align:middle;
}
.lang-menu button span[class^="flag-"] svg{ width:100%; height:100%; display:block; }
.lang-menu button{ display:flex; align-items:center; }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; left:auto;
  min-width:160px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:60;
}
html[dir="rtl"] .lang-menu{ right:auto; left:0; }
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu button{
  width:100%; text-align:start;
  padding:9px 12px; border-radius:var(--radius-sm);
  font-size:.86rem; font-weight:600; color:var(--text-dim);
  display:flex; align-items:center; justify-content:space-between;
}
.lang-menu button:hover{ background:var(--glass-bg); color:var(--text); }
.lang-menu button.active{ color:var(--brand-green-ink); }

.burger{
  display:none;
  flex-direction:column; gap:5px; padding:8px;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
}
.burger span{ width:20px; height:2.5px; background:var(--text); border-radius:2px; }

/* ---------------- Mobile slide-out nav ---------------- */
.site-nav{
  position:fixed; inset:0; z-index:200;
  background:var(--bg-alt);
  display:flex; flex-direction:column;
  padding:26px 28px;
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  overflow-y:auto;
}
html[dir="rtl"] .site-nav{ transform:translateX(-100%); }
.site-nav.open{ transform:translateX(0); }
.site-nav .mnav-top{ display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.site-nav .close-btn{ font-size:1.8rem; padding:6px 10px; color:var(--text); }
.site-nav .nav-list{ margin-top:20px; }
.site-nav a.nav-link{
  display:block; padding:16px 2px; font-family:var(--font-display); font-size:1.2rem; font-weight:600;
  color:var(--text); border-bottom:1px solid var(--border);
}
.site-nav a.nav-link:hover, .site-nav a.nav-link.active{ color:var(--brand-green-ink); }

.nav-expand{ border-bottom:1px solid var(--border); }
.nav-expand-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 2px; font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--text);
}
.nav-expand-trigger.active{ color:var(--brand-green-ink); }
.nav-expand-trigger .chev{ width:18px; height:18px; transition:transform .3s var(--ease); }
.nav-expand[data-open="true"] .nav-expand-trigger .chev{ transform:rotate(180deg); }
.nav-expand[data-open="true"] .nav-expand-trigger{ color:var(--brand-green); }
.nav-submenu{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.nav-expand[data-open="true"] .nav-submenu{ max-height:420px; }
.nav-submenu a{ display:flex; align-items:center; gap:10px; padding:11px 2px 11px 10px; font-size:1rem; font-weight:600; color:var(--text-dim); }
.nav-submenu a:hover, .nav-submenu a.active{ color:var(--brand-green-ink); }
.nav-submenu a .bullet{ width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.site-nav .mnav-cta{ margin-top:22px; flex-shrink:0; }
.mobile-controls{ display:none; align-items:center; gap:10px; margin-top:22px; flex-shrink:0; }
.mobile-controls .theme-toggle, .mobile-controls .lang-switch{ display:flex; }

@media (max-width: 900px){
  .desktop-nav{ display:none; }
  .topbar-actions .theme-toggle, .topbar-actions .lang-switch{ display:none; }
  .burger{ display:flex; }
  .mobile-controls{ display:flex; }
}

/* ---------------- Section shells ---------------- */
.route-section{ display:block; }
.route-section[hidden]{ display:none !important; }
section{ position:relative; }
.section-pad{ padding:110px 0; }
.surface{ background:var(--surface); }
.bg-alt{ background:var(--bg-alt); }

.section-head{ max-width:680px; margin:0 auto 60px; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.section-head p{ margin-top:16px; color:var(--text-dim); font-size:1.05rem; line-height:1.7; }
.section-head.start{ margin:0 0 48px; text-align:start; }

.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal.d1.in-view{ transition-delay:.08s; }
.reveal.d2.in-view{ transition-delay:.16s; }
.reveal.d3.in-view{ transition-delay:.24s; }

/* ---------------- Glass card base ---------------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:var(--grad-hero);
  overflow:hidden; padding-top:120px;
}
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.8; }
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.85fr); gap:50px; align-items:center; }
.hero-copy{ max-width:640px; padding:40px 0; }
.hero-copy h1{ font-size:clamp(2.5rem,5vw,4.1rem); font-weight:700; margin-top:0; }
.hero-copy p.lede{ margin-top:22px; font-size:1.18rem; color:var(--text-dim); max-width:520px; line-height:1.65; }
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:38px; }

.hero-card{
  position:relative;
  padding:34px;
  display:flex; flex-direction:column; gap:22px;
}
.hero-card .hc-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hero-card .hc-stat strong{ display:block; font-family:var(--font-display); font-size:1.9rem; font-weight:700; }
.hero-card .hc-stat span{ font-size:.78rem; color:var(--text-faint); }
.hero-card .hc-divider{ height:1px; background:var(--border); }
.hero-card .hc-pillars{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-card .hc-pillars span{
  font-size:.72rem; font-weight:700; padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-dim);
}

.scroll-cue{
  position:absolute; bottom:26px; inset-inline-start:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-faint); font-size:.68rem; letter-spacing:1.6px; text-transform:uppercase; z-index:2;
}
.scroll-cue .stick{ width:1px; height:32px; background:linear-gradient(var(--text-faint), transparent); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{transform:scaleY(.3);opacity:.2;transform-origin:top;} 50%{transform:scaleY(1);opacity:1;transform-origin:top;} 100%{transform:scaleY(.3);opacity:.2;transform-origin:top;} }

/* ---------------- Suite intro (bento layout) ---------------- */
.bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:22px; align-items:stretch; }
.bento-media{ grid-column:span 5; border-radius:var(--radius-xl); overflow:hidden; position:relative; box-shadow:var(--shadow-card); min-height:380px; }
.bento-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.bento-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg, rgba(5,7,15,0.75), transparent 60%); }
.bento-copy{ grid-column:span 7; display:flex; flex-direction:column; justify-content:center; }
.bento-copy h2{ font-size:clamp(1.9rem,3vw,2.5rem); margin-top:0; }
.bento-copy p{ margin-top:18px; color:var(--text-dim); font-size:1.08rem; line-height:1.75; max-width:600px; }

.pillars-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.pillar-tile{
  padding:22px 20px; border-radius:var(--radius-lg);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.pillar-tile:hover{ transform:translateY(-6px); border-color:var(--brand-green); }
.pillar-tile .pt-name{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; display:block; }
.pillar-tile .pt-name .a{ color:var(--brand-green-ink); }
.pillar-tile .pt-name .b{ color:var(--brand-blue-ink); }
.pillar-tile small{ display:block; margin-top:6px; font-size:.76rem; color:var(--text-faint); font-weight:500; }

/* ---------------- Stats (single authoritative source) ---------------- */
.stats-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.stat-card{ padding:38px 26px; text-align:center; transition:transform .3s var(--ease); }
.stat-card:hover{ transform:translateY(-8px); }
.stat-number{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; }
.stat-card p{ margin-top:10px; color:var(--text-dim); font-size:1rem; font-weight:500; line-height:1.5; }

/* ---------------- Service cards ---------------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.service-card{
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-card); }
.service-card .thumb{ height:200px; overflow:hidden; position:relative; }
.service-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.service-card:hover .thumb img{ transform:scale(1.06); }
.service-card .body{ padding:28px 26px; flex:1; display:flex; flex-direction:column; }
.service-card h3{ font-size:1.18rem; margin-bottom:12px; }
.service-card p{ color:var(--text-dim); line-height:1.6; flex:1; font-size:.95rem; }
.service-card .btn{ margin-top:20px; align-self:flex-start; }

/* ---------------- Feature split ---------------- */
.feature-split{ display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.feature-split.reverse{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); }
.feature-split.reverse .feature-media{ order:2; }
.feature-split.reverse .feature-copy{ order:1; }
html[dir="rtl"] .feature-split.reverse .feature-media{ order:1; }
html[dir="rtl"] .feature-split.reverse .feature-copy{ order:2; }

.feature-media{ position:relative; }
.device-frame{ background:#0b0d16; border-radius:18px; padding:10px 10px 0; box-shadow:var(--shadow-card); }
.device-frame .bar{ display:flex; align-items:center; gap:6px; background:#161a26; border-radius:10px 10px 0 0; padding:11px 14px; }
.device-frame .bar span{ width:9px; height:9px; border-radius:50%; }
.device-frame .bar span:nth-child(1){ background:#ff5f57; }
.device-frame .bar span:nth-child(2){ background:#ffbd2e; }
.device-frame .bar span:nth-child(3){ background:#28c840; }
.device-frame .url{ margin-inline-start:12px; background:#20263a; color:#8891ab; font-size:.74rem; padding:5px 12px; border-radius:6px; flex:1; }
.device-screen{ background:#0e1120; padding:16px; border-radius:0 0 10px 10px; }

.orb-photo{ border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-card); position:relative; aspect-ratio:5/4; }
.orb-photo img{ width:100%; height:100%; object-fit:cover; }
.orb-photo::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--glass-border); }

/* This particular photo (the EVOLVE login screen) is much wider than the
   shared 5:4 card ratio; forcing it into that box would crop the screen.
   Match the container to the image's own ratio instead, so nothing is cut. */
.orb-photo.platform-shot{
  aspect-ratio:1000/574; background:transparent; box-shadow:none; overflow:visible;
}
.orb-photo.platform-shot img{ object-fit:contain; }
.orb-photo.platform-shot::after{ content:none; }

.feature-copy .kicker{ font-size:clamp(1.5rem,2.4vw,2rem); margin-top:0; }
.feature-copy .question{ font-size:clamp(1.2rem,1.9vw,1.45rem); margin-top:14px; color:var(--text-dim); font-weight:500; font-family:var(--font-body); }
.feature-copy p.desc{ margin-top:16px; color:var(--text-dim); font-size:1.03rem; line-height:1.75; max-width:520px; }
.feature-copy .btn{ margin-top:26px; }

.module-chip-row{ margin-top:32px; display:flex; flex-wrap:wrap; gap:10px; }
.module-chip-row a{
  font-size:.82rem; font-weight:700; padding:9px 16px; border-radius:var(--radius-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-dim);
  transition: color .2s ease, border-color .2s ease;
}
.module-chip-row a:hover{ color:var(--brand-green-ink); border-color:var(--brand-green-ink); }

/* ---------------- Value props ---------------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.value-item{ padding:34px 26px; text-align:center; transition:transform .3s var(--ease); }
.value-item:hover{ transform:translateY(-6px); }
.value-item .icon-ring{
  width:104px; height:104px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  /* fixed white circle with a brand-green ring, matching the reference design
     in both themes rather than following the page's light/dark background */
  background:#fff; border:2px solid #68BD68;
  box-shadow:0 10px 26px -18px rgba(5,5,197,.35);
}
.value-item h3{ font-size:1.22rem; margin-bottom:8px; }
.value-item p{ color:var(--text-dim); font-weight:500; font-size:.95rem; }

/* ---------------- Contact teaser + page ---------------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:50px; align-items:center; }
.contact-copy p{ margin-top:14px; color:var(--text-dim); max-width:440px; font-size:1.05rem; line-height:1.6; }
.contact-copy .btn{ margin-top:26px; }

/* =========================================================================
   CONTACT TEASER: redesign
   Two things changed from the previous version: (1) the icon badges are real
   coloured circles with line-icon SVGs instead of emoji-in-a-box, and (2) the
   flat blue "network" stock photo is replaced with a custom on-brand
   illustration: a connection/handshake motif with two floating stat badges,
   which is directly about the section's subject (getting in touch) rather
   than a generic tech photo reused from the hero.
   ========================================================================= */
.contact-teaser{ position:relative; overflow:hidden; isolation:isolate; }
.ct-glow{ position:absolute; border-radius:50%; filter:blur(70px); z-index:-1; pointer-events:none; }
.ct-glow-a{ width:420px; height:420px; left:-160px; top:-120px; background:rgba(104,189,104,.14); }
.ct-glow-b{ width:460px; height:460px; right:-180px; bottom:-160px; background:rgba(5,5,197,.12); }
[data-theme="dark"] .ct-glow-a{ background:rgba(104,189,104,.16); }
[data-theme="dark"] .ct-glow-b{ background:rgba(5,5,197,.22); }

/* icon badges */
.contact-card .ic{
  width:42px; height:42px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-card .ic svg{ width:20px; height:20px; }
.ic-mail{ background:rgba(5,5,197,.10); color:#0505C5; }
.ic-phone{ background:#EAF6EA; color:#2F7034; }
.ic-pin{ background:rgba(242,166,62,.15); color:#B9761F; }
[data-theme="dark"] .ic-mail{ background:rgba(122,122,247,.16); color:#B7BAF2; }
[data-theme="dark"] .ic-phone{ background:rgba(104,189,104,.16); color:#8FD28F; }
[data-theme="dark"] .ic-pin{ background:rgba(242,166,62,.16); color:#F2A63E; }

/* custom illustration replacing the photo: a message-preview mockup that
   reuses the site's own glass-card, radius and shadow tokens rather than
   introducing a one-off illustration style. */
.contact-visual{ position:relative; min-height:320px; display:flex; align-items:center; justify-content:center; }
.ct-panel{ position:relative; width:100%; max-width:420px; }
.ct-panel-glow{
  position:absolute; inset:-14% -10%; z-index:-1; border-radius:40%;
  background:radial-gradient(closest-side, rgba(5,5,197,.16), transparent 70%),
             radial-gradient(closest-side, rgba(104,189,104,.14), transparent 70%);
  filter:blur(30px);
}
.ct-mock{ border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-card); }
.ct-mock-body{ padding:22px 20px 24px; display:flex; flex-direction:column; gap:14px; }
.ct-msg{ display:flex; gap:10px; align-items:flex-end; max-width:88%; }
.ct-msg-you{ align-self:flex-end; flex-direction:row-reverse; }
.ct-msg-them{ align-self:flex-start; }
.ct-avatar{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.66rem; font-weight:800; letter-spacing:.02em;
  color:#fff; background:linear-gradient(135deg,#0505C5,#68BD68);
}
.ct-bubble{
  border-radius:16px; padding:12px 15px;
  background:var(--bg-alt); border:1px solid var(--border);
}
.ct-msg-you .ct-bubble{ background:var(--brand-blue); border-color:transparent; border-bottom-right-radius:5px; }
html[dir="rtl"] .ct-msg-you .ct-bubble{ border-bottom-right-radius:16px; border-bottom-left-radius:5px; }
.ct-msg-you .ct-bubble p{ color:#fff; }
.ct-bubble-them{ border-bottom-left-radius:5px; }
html[dir="rtl"] .ct-bubble-them{ border-bottom-left-radius:16px; border-bottom-right-radius:5px; }
.ct-bubble p{ margin:0; font-size:.88rem; line-height:1.5; color:var(--text); }
.ct-bubble .ct-time{ display:block; margin-top:7px; font-size:.68rem; color:var(--text-faint); }
.ct-typing{
  align-self:flex-start; display:flex; gap:4px; padding:11px 15px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:16px; border-bottom-left-radius:5px;
}
.ct-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--text-faint);
  animation:ct-bounce 1.3s ease-in-out infinite;
}
.ct-typing span:nth-child(2){ animation-delay:.15s; }
.ct-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ct-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.ct-stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.ct-stat{
  text-align:center; padding:14px 10px; border-radius:var(--radius-md);
  background:var(--glass-bg); border:1px solid var(--glass-border);
}
.ct-stat strong{ display:block; font-family:var(--font-display); font-size:1.02rem; font-weight:800; color:var(--text); }
.ct-stat small{ display:block; margin-top:3px; font-size:.72rem; color:var(--text-faint); }

@media (prefers-reduced-motion:reduce){ .ct-typing span{ animation:none; opacity:.7; } }
.contact-cards{ margin-top:32px; display:flex; flex-direction:column; gap:14px; }
.contact-card{ display:grid; grid-template-columns:44px 1fr 1fr; align-items:center; gap:16px; padding:14px 20px; border-radius:var(--radius-md); transition:transform .25s ease; }
.contact-card:hover{ transform: translateX(4px); }
html[dir="rtl"] .contact-card:hover{ transform: translateX(-4px); }
.contact-card .ic{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--bg-alt); font-size:1.1rem; flex-shrink:0; }
.contact-card .lbl{ font-size:.74rem; color:var(--text-faint); }
.contact-card .val{ font-size:.9rem; font-weight:700; }

.contact-visual{ position:relative; min-height:320px; display:flex; align-items:center; justify-content:center; }
.contact-visual .photo{ width:100%; max-width:420px; aspect-ratio:4/3.3; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-card); position:relative; }
.contact-visual .photo img{ width:100%; height:100%; object-fit:cover; }
.contact-visual .photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg, rgba(5,7,15,0.7), transparent 55%); }

.page-hero{ position:relative; padding:170px 0 90px; overflow:hidden; background:var(--grad-hero); }
.page-hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.65; }
.page-hero .container{ position:relative; z-index:2; max-width:760px; }
.page-hero h1{ font-size:clamp(2.1rem,4vw,3rem); margin-top:0; }
.page-hero p{ margin-top:18px; font-size:1.08rem; color:var(--text-dim); max-width:560px; line-height:1.65; }

.contact-page-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:52px; align-items:flex-start; }
.contact-form-card{ padding:40px; }
.contact-form-card h2{ font-size:1.55rem; }
.contact-form-card > p{ margin-top:10px; color:var(--text-dim); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:.85rem; font-weight:700; }
.form-field label .req{ color:var(--brand-blue-ink); }
.form-field input, .form-field select, .form-field textarea{
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:13px 16px;
  font-family:var(--font-body); font-size:.95rem; color:var(--text); background:var(--bg-alt);
  transition:border-color .25s ease, box-shadow .25s ease; width:100%;
}
.form-field textarea{ resize:vertical; min-height:126px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(5,5,197,0.19);
}
.form-hint{ font-size:.76rem; color:var(--text-faint); }
.form-honeypot{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; opacity:0; }
.form-submit-row{ display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap; }
.form-status{ font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.form-status.success{ color:var(--brand-green-ink); }
.form-status.error{ color:#e0616e; }
.spinner{ width:16px; height:16px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--brand-blue); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.contact-side{ display:flex; flex-direction:column; gap:16px; }
.side-card{ padding:24px 26px; }
.side-card h3{ font-size:1.02rem; margin-bottom:14px; }
.side-card .row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:15px; }
.side-card .row:last-child{ margin-bottom:0; }
.side-card .row .ic{ width:40px; height:40px; border-radius:11px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.side-card .row .lbl{ font-size:.74rem; color:var(--text-faint); }
.side-card .row .val{ font-size:.92rem; font-weight:700; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{ cursor:pointer; list-style:none; padding:15px 0; font-weight:600; font-size:.94rem; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.25rem; color:var(--brand-blue-ink); flex-shrink:0; transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ padding:0 0 16px; color:var(--text-dim); font-size:.88rem; line-height:1.6; }

/* ---------------- Module page (benefits / features / cta) ---------------- */
.module-hero-grid{ display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1fr); gap:56px; align-items:center; }
.module-photo{ border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:3/3.5; position:relative; }
.module-photo img{ width:100%; height:100%; object-fit:cover; }
.module-logo{ display:flex; align-items:flex-end; gap:14px; margin:0 0 24px; }
.module-logo svg{ width:60px; height:60px; flex-shrink:0; }
.module-logo .lockup{ display:flex; flex-direction:column; line-height:1.1; }
.module-logo .name{ font-family:var(--font-display); font-weight:800; font-size:2rem; }
.module-logo .tagline{ font-family:var(--font-display); font-weight:600; font-size:.7rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-faint); }
.module-copy > p.lede{ color:var(--text-dim); font-size:1.05rem; line-height:1.75; max-width:560px; }

.benefits-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.benefit-card{ display:flex; align-items:flex-start; gap:16px; padding:22px; transition:transform .3s var(--ease); }
.benefit-card:hover{ transform:translateY(-6px); }
.benefit-card .b-icon{ width:50px; height:50px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.benefit-card:nth-child(3n+1) .b-icon{ background:linear-gradient(155deg, var(--brand-blue), var(--brand-blue-deep)); }
.benefit-card:nth-child(3n+2) .b-icon{ background:linear-gradient(155deg, var(--brand-green), var(--brand-green-deep)); }
.benefit-card:nth-child(3n) .b-icon{ background:linear-gradient(155deg, #a78bfa, #7c5ce0); }
.benefit-card .b-icon svg{ width:24px; height:24px; }
.benefit-card .b-num{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1.1; }
.benefit-card .b-label{ font-family:var(--font-display); font-weight:700; font-size:.68rem; letter-spacing:1px; text-transform:uppercase; color:var(--brand-blue-ink); margin:3px 0 6px; }
.benefit-card .b-desc{ font-size:.85rem; color:var(--text-dim); line-height:1.5; }

.features-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:54px; align-items:center; }
.features-card{
  grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:54px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:28px;
  box-shadow:var(--shadow-card); padding:clamp(28px,4vw,52px);
}
.features-list{ display:flex; flex-direction:column; gap:15px; margin-top:24px; }
.features-list li{ display:flex; align-items:flex-start; gap:13px; font-size:.98rem; line-height:1.5; }
.features-list .chk{ width:25px; height:25px; border-radius:50%; flex-shrink:0; margin-top:2px; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--brand-green); display:flex; align-items:center; justify-content:center; }
.features-list .chk svg{ width:13px; height:13px; }

/* Module page "Solution Features" screenshots: real laptop screenshots of
   each module's own interface, at their own aspect ratio (1000:574) so
   nothing gets cropped, with no card framing since these are transparent
   cutouts, not rectangular photos. */
.features-row .orb-photo.module-shot{
  aspect-ratio:1000/574; box-shadow:none; background:transparent; overflow:visible;
}
.features-row .orb-photo.module-shot::after{ content:none; }
.features-row .orb-photo.module-shot img{ object-fit:contain; }

.module-cta{ position:relative; overflow:hidden; text-align:center; padding:90px 0 70px; color:#f3f5ff; }
.module-cta .backdrop{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.18; filter:saturate(.5); }
.module-cta .backdrop::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(3,4,10,0.95), rgba(5,7,15,0.85)); }
.module-cta .container{ position:relative; z-index:2; max-width:720px; }
.module-cta h2{ font-size:clamp(1.85rem,3.2vw,2.5rem); }
.module-cta p{ margin-top:16px; color:rgba(243,245,255,0.78); font-size:1.03rem; }
.module-cta .btn{ margin-top:28px; }
.module-carousel{ margin-top:44px; display:flex; align-items:center; justify-content:center; gap:14px; }
.module-carousel a.nav-arrow{ width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:#fff; }
.module-carousel a.nav-arrow:hover{ background:rgba(255,255,255,0.1); border-color:#fff; }
html[dir="rtl"] .module-carousel a.nav-arrow svg{ transform:scaleX(-1); }
.module-carousel .dots{ display:flex; align-items:center; gap:9px; }
.module-carousel .dots a{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.3); transition:background .25s ease, transform .25s ease; }
.module-carousel .dots a.current{ background:var(--brand-green); transform:scale(1.3); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--bg-alt); padding-top:70px; border-top:1px solid var(--border); }
.footer-top{ display:grid; grid-template-columns:minmax(0,1.1fr) repeat(5,minmax(0,0.75fr)); gap:28px; padding-bottom:46px; border-bottom:1px solid var(--border); }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ font-size:.88rem; color:var(--text-faint); line-height:1.6; max-width:260px; }
.footer-tagline{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; grid-column:2/-1; margin-bottom:28px; }
.footer-col h4{ font-size:.92rem; margin-bottom:15px; font-weight:700; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{ font-size:.86rem; color:var(--text-faint); transition:color .2s ease; }
.footer-col ul li a:hover{ color:var(--brand-green-ink); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:20px 0; font-size:.8rem; color:var(--text-faint); }
.footer-bottom .legal-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-bottom .legal-links a:hover{ color:var(--text); }

.back-to-top{
  position:fixed; inset-inline-end:24px; bottom:24px; z-index:95;
  width:48px; height:48px; border-radius:50%;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
html[dir="rtl"] .back-to-top svg{ transform:scaleX(-1) rotate(0deg); }

/* ---------------- Accessibility widget ---------------- */
.a11y-widget{ position:fixed; inset-inline-start:24px; bottom:24px; z-index:95; }
.a11y-toggle{
  width:42px; height:42px; border-radius:50%;
  background:#0505C5;
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
}
.a11y-toggle svg{ width:20px; height:20px; }
.a11y-panel{
  position:absolute; inset-inline-start:0; bottom:64px; width:310px; max-width:calc(100vw - 48px); max-height:70vh; overflow-y:auto;
  padding:20px;
}
.a11y-panel[hidden]{ display:none; }
.a11y-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.a11y-panel-head h3{ font-size:1rem; }
.a11y-close{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-alt); }
.a11y-group{ padding:13px 0; border-top:1px solid var(--border); }
.a11y-group:first-of-type{ border-top:none; padding-top:0; }
.a11y-label{ display:block; font-size:.84rem; font-weight:700; margin-bottom:9px; }
.a11y-btn-row{ display:flex; gap:8px; }
.a11y-btn-row button{ flex:1; padding:9px 0; border-radius:var(--radius-sm); background:var(--bg-alt); border:1.5px solid var(--border); font-weight:700; }
.a11y-switch{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 2px; font-size:.9rem; font-weight:600; }
.a11y-switch input{ appearance:none; -webkit-appearance:none; width:40px; height:23px; background:var(--border); border-radius:var(--radius-pill); position:relative; flex-shrink:0; cursor:pointer; }
.a11y-switch input::after{ content:''; position:absolute; top:2.5px; inset-inline-start:2.5px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s ease; }
html[dir="rtl"] .a11y-switch input:checked::after{ transform:translateX(-17px); }
.a11y-switch input:checked{ background:var(--brand-blue); }
.a11y-switch input:checked::after{ transform:translateX(17px); }
.a11y-reset-all{ width:100%; margin-top:6px; padding:11px 0; border-radius:var(--radius-pill); background:var(--text); color:var(--bg); font-weight:700; font-size:.86rem; }
.a11y-note{ margin-top:12px; font-size:.72rem; color:var(--text-faint); line-height:1.5; }
.a11y-readaloud-btn{
  display:flex; align-items:center; gap:9px; width:100%; padding:10px 14px;
  border-radius:10px; border:1px solid var(--border); background:var(--bg-alt);
  color:var(--text); font-size:.85rem; font-weight:600; cursor:pointer;
}
.a11y-readaloud-btn svg{ width:18px; height:18px; flex:none; }
.a11y-readaloud-btn.is-reading{ background:var(--brand-blue); color:#fff; border-color:transparent; }
.a11y-readaloud-btn:disabled{ opacity:.5; cursor:not-allowed; }
.a11y-hint{ font-size:.72rem; color:var(--text-faint); line-height:1.5; margin-top:8px; }
.a11y-signlang{ border-top:1px solid var(--border); padding-top:14px; margin-top:4px; }
.a11y-signlang-link{
  display:inline-block; margin-top:8px; font-size:.8rem; font-weight:700;
  color:var(--brand-blue-ink); text-decoration:underline;
}

@media (max-width:480px){ .a11y-widget{ inset-inline-start:14px; bottom:14px; } .back-to-top{ inset-inline-end:14px; bottom:14px; } }

/* ---------------- Accessibility modes ---------------- */
html.a11y-font-1{ font-size:100%; }
html.a11y-font-2{ font-size:112.5%; }
html.a11y-font-3{ font-size:125%; }
html.a11y-font-4{ font-size:137.5%; }
body.a11y-underline a:not(.btn){ text-decoration:underline !important; text-underline-offset:3px; }
body.a11y-cursor, body.a11y-cursor *{ cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M3 2l7.07 18 2.51-7.39L20 10.07z" fill="black" stroke="white" stroke-width="1.5"/></svg>') 4 4, auto !important; }
body.a11y-reduce-motion *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
body.a11y-reduce-motion .hero canvas, body.a11y-reduce-motion .page-hero canvas{ display:none; }
body.a11y-reduce-motion .reveal{ opacity:1 !important; transform:none !important; }
body.a11y-grayscale{ filter:grayscale(1); }
body.a11y-contrast{ --bg:#000; --bg-alt:#000; --surface:#000; --text:#fff; --text-dim:#fff; --text-faint:#ddd; --border:#fff; --glass-bg:#000; --glass-border:#fff; }
body.a11y-contrast :focus-visible{ outline:4px solid #ff0 !important; }
body.a11y-contrast a{ color:#8fd6ff; }
body.a11y-contrast .btn-solid, body.a11y-contrast .btn-glow{ background:#fff !important; color:#000 !important; }

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){
  .bento-media{ grid-column:span 12; min-height:280px; }
  .bento-copy{ grid-column:span 12; }
  .pillars-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1024px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-card{ display:none; }
  .feature-split, .feature-split.reverse{ grid-template-columns:1fr; }
  .feature-split.reverse .feature-media{ order:1; }
  .feature-split.reverse .feature-copy{ order:2; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-tagline{ grid-column:1/-1; }
  .contact-page-grid{ grid-template-columns:1fr; }
  .module-hero-grid{ grid-template-columns:1fr; }
  .module-photo{ max-width:420px; margin:0 auto; }
  .features-row{ grid-template-columns:1fr; }
  .features-card{ grid-template-columns:1fr; padding:24px; border-radius:22px; }
  .features-card .feature-media{ order:-1; }
}
@media (max-width:860px){
  .services-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .container{ padding:0 20px; }
  .section-pad{ padding:70px 0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .contact-card{ grid-template-columns:38px 1fr; row-gap:4px; }
  .contact-card .val.second{ grid-column:2; }
  .contact-form-card{ padding:26px 20px; }
  .page-hero{ padding:150px 0 70px; }
  .benefits-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .pillars-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }


/* =========================================================================
   BRAND FONT: Gotham
   Drop the licensed files into assets/fonts/ and uncomment this block.
   Nothing else needs to change; the whole site already asks for Gotham first.

@font-face{ font-family:'Gotham'; src:url('../assets/fonts/Gotham-Book.woff2') format('woff2');
            font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Gotham'; src:url('../assets/fonts/Gotham-Medium.woff2') format('woff2');
            font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Gotham'; src:url('../assets/fonts/Gotham-Bold.woff2') format('woff2');
            font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Gotham'; src:url('../assets/fonts/Gotham-Black.woff2') format('woff2');
            font-weight:800; font-style:normal; font-display:swap; }
   ========================================================================= */

/* =========================================================================
   SUPPLIED BRAND ARTWORK
   Sizing only: the logo files themselves are used unaltered. The light plate
   keeps the blue elements inside the logos legible on the dark theme; on the
   light theme it sits flush with the surface and reads as no plate at all.
   ========================================================================= */
.logo-plate{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:12px; padding:12px 16px;
  box-shadow:0 6px 18px -12px rgba(0,0,0,.45);
}
[data-theme="light"] .logo-plate{ box-shadow:none; border:0; }

/* Dark theme: no white plate. The logos themselves swap to a recoloured
   variant (blue -> white, green untouched) so they read clearly straight
   against the dark page background instead of needing a white card behind
   them. Light theme is unaffected: original blue/green artwork on its
   white plate, exactly as before. */
[data-theme="dark"] .logo-plate{
  background:transparent; box-shadow:none; padding:0;
}
.logo-on-light{ display:inline-block; }
.logo-on-dark{ display:none; }
[data-theme="dark"] .logo-on-light{ display:none; }
[data-theme="dark"] .logo-on-dark{ display:inline-block; }

.pillar-tile .pt-logo{ width:100%; max-width:190px; height:auto; }
.pillars-grid .pillar-tile .logo-plate{ padding:14px 10px; }
.pillar-tile .logo-plate{ padding:14px 16px; margin-bottom:4px; width:100%; }

.module-logo .mod-logo-img{ width:100%; max-width:240px; height:auto; }
.module-logo{ align-items:center; }
.module-logo .logo-plate{ padding:14px 18px; }

.evolve-logo{ width:100%; max-width:220px; height:auto; }
.evolve-plate{ margin-bottom:16px; }
.bento-copy .evolve-plate{ max-width:260px; }

@media (max-width:640px){
  .module-logo .mod-logo-img{ max-width:192px; }
  .evolve-logo{ max-width:180px; }
}


/* Consulting pages: reuse the module page components; these two lines are the
   only additions, for the page title and tagline that consulting pages carry. */
.consult-title{ font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.7rem); margin:0 0 8px; letter-spacing:-0.02em; }
.consult-tagline{ font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.5vw,1.15rem); color:var(--brand-green-ink); margin:0 0 16px; }

/* ie4 brand lockup: the supplied artwork used whole, never split or redrawn.
   Only the white / colour version is swapped, so it stays legible when the
   light theme turns the header and footer white. */
.brand .lockup{ height:52px; width:auto; flex-shrink:0; }
.brand .lockup-on-light{ display:none; }
[data-theme="light"] .brand .lockup-on-dark{ display:none; }
[data-theme="light"] .brand .lockup-on-light{ display:block; }
.site-nav .brand .lockup{ height:38px; }
.footer-brand .brand .lockup{ height:62px; }
@media (max-width:640px){ .brand .lockup{ height:36px; } }


/* =========================================================================
   MOTION LAYER: pacing and easing in the manner of large healthcare-sector
   marketing sites (long expo-out easing, masked reveals, staggered entrances).
   Techniques only; no third-party assets or copy.
   ========================================================================= */
:root{
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
}

/* ---- scroll progress rail ---- */
.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1200;
  pointer-events:none; background:transparent;
}
.scroll-rail span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-green));
  transition:width .12s linear;
}

/* ---- masked, word-by-word headline ---- */
.hero h1 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; }
.hero h1 .w > span{
  display:inline-block; transform:translateY(115%); opacity:0;
  transition:transform 1.05s var(--ease-expo), opacity .7s ease;
  transition-delay:calc(var(--i) * 65ms);
}
.hero h1.lit .w > span{ transform:none; opacity:1; }

/* ---- clip-wipe scroll reveal (upgrades the existing .reveal) ---- */
.reveal{
  opacity:0; transform:translateY(34px) scale(.995);
  clip-path:inset(0 0 16% 0);
  transition:opacity .9s var(--ease-soft), transform 1.05s var(--ease-expo),
             clip-path 1.05s var(--ease-expo);
}
.reveal.in-view{ opacity:1; transform:none; clip-path:inset(-30% -30% -30% -30%); }
.reveal.d1.in-view{ transition-delay:.10s; }
.reveal.d2.in-view{ transition-delay:.20s; }
.reveal.d3.in-view{ transition-delay:.30s; }

/* children of a grid stagger themselves */
.benefits-grid > .reveal.in-view:nth-child(2){ transition-delay:.09s; }
.benefits-grid > .reveal.in-view:nth-child(3){ transition-delay:.18s; }
.benefits-grid > .reveal.in-view:nth-child(4){ transition-delay:.27s; }

/* ---- logo marquee ---- */

.mq-caption{
  font-size:.7rem; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--text-dim); margin:0 0 18px; font-weight:700;
}
.marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:45px; width:max-content;
  height:51px; /* fixed row height -> every logo centres with equal top/bottom space (20% smaller than before) */
  animation:mq 78s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.mq-item{
  flex:none; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.mq-item img{
  height:27px; width:auto; opacity:.55; /* identical size in both themes, 20% smaller than before */
  transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.mq-item img:hover{ opacity:1; transform:translateY(-2px); }

/* Theme-swapped artwork: dark theme shows the blue-recoloured-to-white variant
   on a transparent background (no padded white pill), light theme shows the
   original two-tone logo. Same file dimensions either way. */
.mq-item .mq-on-dark{ display:none; }
[data-theme="dark"] .mq-item .mq-on-dark{ display:block; }
[data-theme="dark"] .mq-item .mq-on-light{ display:none; }
[data-theme="dark"] .mq-item img{ opacity:.82; }

@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
[dir="rtl"] .marquee-track{ animation-direction:reverse; }

/* ---- mega-menu panels ---- */
.dn-dropdown{ min-width:430px; padding:14px; }
.dn-dropdown a{ align-items:flex-start; gap:11px; padding:11px 12px; border-radius:10px; }
.dn-dropdown a .bullet{ margin-top:8px; }
.dn-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dn-label{ font-weight:700; }
.dn-desc{
  font-size:.78rem; line-height:1.4; color:var(--text-dim);
  font-weight:400; white-space:normal;
}
.dn-dropdown a:hover .dn-desc{ color:var(--text); }
.nav-submenu a{ align-items:flex-start; }
.nav-submenu .dn-desc{ display:none; }

/* ---- image parallax + hover zoom ---- */
.module-photo{ overflow:hidden; }
.module-photo img{
  transform:translate3d(0,var(--py,0px),0) scale(1.07);
  transition:transform 1.1s var(--ease-expo); will-change:transform;
}
.module-photo:hover img{ transform:translate3d(0,var(--py,0px),0) scale(1.12); }
.module-cta .backdrop{
  transform:translate3d(0,var(--py,0px),0) scale(1.14); will-change:transform;
}

/* ---- sticky speak-to-an-expert bar ---- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:var(--surface); border-top:1px solid var(--border);
  backdrop-filter:blur(14px);
  transform:translateY(110%); transition:transform .7s var(--ease-expo);
  box-shadow:0 -18px 40px -34px rgba(0,0,0,.8);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .container{
  display:flex; align-items:center; gap:18px; padding-block:13px;
}
.sticky-cta p{ margin:0; font-weight:700; font-size:.95rem; }
.sticky-cta .btn{ margin-inline-start:auto; flex:none; }
.sticky-close{
  background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer;
  color:var(--text-dim); padding:0 4px; flex:none;
}
.sticky-close:hover{ color:var(--text); }
@media (max-width:640px){
  .sticky-cta p{ display:none; }
  .sticky-cta .btn{ margin-inline-start:0; flex:1; }
  .dn-dropdown{ min-width:auto; }
}

/* ---- respect reduced motion everywhere ---- */
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  .hero h1 .w > span{ transform:none; opacity:1; transition:none; }
  .reveal{ opacity:1; transform:none; clip-path:none; transition:none; }
  .sticky-cta{ transition:none; }
}
body.a11y-reduce-motion .marquee-track{ animation:none; }
body.a11y-reduce-motion .hero h1 .w > span{ transform:none !important; opacity:1 !important; }
body.a11y-reduce-motion .reveal{ clip-path:none !important; }


/* =========================================================================
   CLOSING CTA: merged into the final content section
   Previously this was a full-bleed dark band with its own carousel, which read
   as a second page ending before the footer. It is now a card that closes the
   section above it, with the page-to-page control demoted to a quiet pager.

   It also fixes a contrast fault: the old overlay lived inside an element with
   opacity:.18, so the darkening was faded too and white text sat on the page
   background. The gradient is now on the card itself; only the photo is faded.
   ========================================================================= */
.section-cta{
  /* the last section on module pages is a two-column grid: span it.
     Fixed light colors, not theme variables: the footer directly below
     this card is intentionally dark in both site themes (see the footer
     comment above), so this card needs to stay light in both themes too,
     or the two dark sections stack again in dark mode. */
  grid-column:1 / -1; flex:1 0 100%; width:100%;
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:clamp(46px,6vw,74px);
  padding:clamp(38px,5vw,60px) clamp(24px,5vw,56px);
  border-radius:26px; text-align:center; color:#161a2e;
  background:linear-gradient(125deg,#eef1fb 0%, #f8f9fd 60%, #eef1fb 100%);
  border:1px solid #e2e6f2;
  box-shadow:0 30px 60px -44px rgba(5,5,197,.22);
}
.section-cta .sc-media{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  opacity:.10; filter:saturate(.5);
  transform:translate3d(0,var(--py,0px),0) scale(1.12);
  will-change:transform;
}
.section-cta .sc-body{ position:relative; max-width:660px; margin-inline:auto; }
.section-cta h2{ color:#161a2e; font-size:clamp(1.55rem,2.7vw,2.1rem); }
.section-cta p{ margin-top:14px; color:#4a4f66; font-size:1rem; }
.section-cta .btn{ margin-top:26px; }
.section-cta .btn-solid{ background:var(--brand-blue); color:#fff; }
.section-cta .btn-solid:hover{ background:var(--brand-blue-deep); color:#fff; }

/* quiet in-section pager: navigation, not a second ending */
.page-pager{
  grid-column:1 / -1; flex:1 0 100%; width:100%;
  margin-top:30px; display:flex; align-items:center; justify-content:center; gap:14px;
}
.page-pager a.nav-arrow{
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.page-pager a.nav-arrow:hover{
  border-color:var(--brand-green-ink); color:var(--brand-green-ink); background:var(--glass-bg);
}
.page-pager .dots{ display:flex; align-items:center; gap:8px; }
.page-pager .dots a{
  width:8px; height:8px; border-radius:50%; background:var(--border);
  transition:background .25s ease, transform .25s ease;
}
.page-pager .dots a:hover{ background:var(--text-faint); }
.page-pager .dots a.current{ background:var(--brand-green); transform:scale(1.35); }
html[dir="rtl"] .page-pager a.nav-arrow svg{ transform:scaleX(-1); }


/* =========================================================================
   FOOTER: rebalanced after the EVOLVE description paragraph was removed.
   The brand column previously carried logo + paragraph; with only the logo
   left it no longer needs a wide column, and the five link columns were
   landing one column short, leaving dead space on the right. The brand and
   the tagline now share one header row, and the links sit on a clean
   five-column row beneath it.
   ========================================================================= */
.footer-top{
  grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:28px; row-gap:0;
}
.footer-brand{ grid-column:1 / 3; display:flex; align-items:center; }
.footer-brand .brand{ margin-bottom:0; }
.footer-tagline{
  grid-column:3 / -1; align-self:center;
  margin:0 0 0 auto; text-align:end; max-width:32ch;
  font-size:clamp(1rem,1.35vw,1.28rem); line-height:1.4;
  color:var(--text-dim);
}
.footer-col{ margin-top:48px; }

@media (max-width:1024px){
  .footer-top{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-brand{ grid-column:1 / -1; }
  .footer-tagline{
    grid-column:1 / -1; text-align:start; margin:14px 0 0; max-width:46ch;
  }
  .footer-col{ margin-top:34px; }
}
@media (max-width:640px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-col{ margin-top:28px; }
}


/* =========================================================================
   HERO: single column; the EVOLVE summary card and, later, a photo collage
   both lived in the second column at different points and were removed.
   ========================================================================= */
.hero .container{ grid-template-columns:minmax(0,1fr); gap:0; }
.hero-copy{ max-width:880px; }
.hero-copy p.lede{ max-width:620px; }

/* =========================================================================
   LOGOS: no outlines on any brand or product artwork
   ========================================================================= */
.logo-plate,
.mq-item img,
.pillar-tile .logo-plate,
.module-logo .logo-plate,
.evolve-plate,
.footer-brand .lockup,
.brand .lockup{
  border:0 !important;
  outline:0 !important;
}
.logo-plate{ box-shadow:none; }
[data-theme="dark"] .mq-item img{ box-shadow:none; }

/* =========================================================================
   FOOTER: dark gradient band, brand lockup left, tagline across the top of
   the link columns, five link columns beneath. Dark in both themes, so the
   ie4 lockup is pinned to the white version here.
   ========================================================================= */
.site-footer{
  background:linear-gradient(103deg,#04050e 0%, #0a0b2c 40%, var(--brand-blue-deep) 78%, var(--brand-blue) 100%);
  color:#fff; border-top:0; padding-top:78px;
}
.site-footer .footer-top{
  grid-template-columns:1.5fr repeat(5,minmax(0,1fr));
  column-gap:28px; row-gap:0;
  padding-bottom:52px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.site-footer .footer-brand{ grid-column:1; grid-row:1 / 3; align-self:start; display:block; }
.site-footer .footer-brand .lockup{ height:96px; }

.site-footer .footer-tagline{
  grid-column:2 / -1; grid-row:1;
  margin:0 0 8px; text-align:start; max-width:none;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.35rem,2.3vw,2.05rem); line-height:1.25;
  color:#68BD68;
}
.site-footer .footer-col{ grid-row:2; margin-top:28px; }
.site-footer .footer-col h4{
  color:#68BD68; font-size:1.02rem; font-weight:700; margin-bottom:16px;
}
.site-footer .footer-col ul li a{ color:rgba(255,255,255,.86); font-size:.9rem; }
.site-footer .footer-col ul li a:hover{ color:var(--brand-green); }

.site-footer .footer-bottom{ color:rgba(255,255,255,.58); }
.site-footer .footer-bottom a{ color:rgba(255,255,255,.72); }
.site-footer .footer-bottom a:hover{ color:var(--brand-green); }

/* the footer is dark in both themes: always use the white lockup here */
[data-theme="light"] .site-footer .brand .lockup-on-dark{ display:block; }
[data-theme="light"] .site-footer .brand .lockup-on-light{ display:none; }

@media (max-width:1024px){
  .site-footer .footer-top{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .site-footer .footer-brand{ grid-column:1 / -1; grid-row:auto; }
  .site-footer .footer-brand .lockup{ height:74px; }
  .site-footer .footer-tagline{ grid-column:1 / -1; grid-row:auto; margin:18px 0 0; }
  .site-footer .footer-col{ grid-row:auto; margin-top:34px; }
}
@media (max-width:640px){
  .site-footer .footer-top{ grid-template-columns:1fr 1fr; }
  .site-footer .footer-brand .lockup{ height:62px; }
  .site-footer .footer-col{ margin-top:26px; }
}


/* =========================================================================
   "ONE Platform · Infinite Potential": the supplied lockups replace what was
   a text chip. Plates keep the blue artwork legible on the dark theme; the
   separator dot stands in for the middot that joined the two phrases.
   ========================================================================= */
.statement-lockup{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:18px;
}
.statement-lockup .logo-plate{ padding:10px 16px; border-radius:12px; max-width:100%; }
.statement-lockup img{ height:28px; width:auto; max-width:100%; vertical-align:middle; }
@media (max-width:820px){ .statement-lockup img{ height:23px; } }
@media (max-width:520px){ .statement-lockup img{ height:18px; } }

/* pillar tiles now carry the logo alone */
.pillar-tile{ justify-content:center; }
.pillar-tile .logo-plate{ margin-bottom:0; }

/* the ticker now sits under the pillar cards */


/* Ticker sits directly under the pillar logos now that its caption is gone. */
.suite-section{ padding-bottom:26px; }
.marquee-band{ padding:28px 0; overflow:hidden; }  /* symmetric: was 0 top / 46 bottom */



/* =========================================================================
   IE4 ASSISTANT: floating chat widget
   Reuses the site's own glass-card, radius, shadow and gradient tokens, and
   the typing-indicator animation already built for the contact-teaser mockup,
   so this reads as a native part of the site rather than a bolted-on plugin.
   ========================================================================= */
.iebot{ position:fixed; right:22px; bottom:22px; z-index:1300; }
html[dir="rtl"] .iebot{ right:auto; left:22px; }

.iebot-launcher{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#0505C5;
  box-shadow:0 16px 34px -14px rgba(5,5,197,.55);
  transition:transform .25s var(--ease-soft,ease);
}
.iebot-launcher:hover{ transform:translateY(-2px) scale(1.04); }
.iebot-launcher svg{ width:20px; height:20px; position:absolute; transition:opacity .2s, transform .2s; }
.iebot-launcher .iebot-ic-close{ opacity:0; transform:rotate(-40deg) scale(.6); }
.iebot.is-open .iebot-launcher .iebot-ic-chat{ opacity:0; transform:rotate(40deg) scale(.6); }
.iebot.is-open .iebot-launcher .iebot-ic-close{ opacity:1; transform:none; }

.iebot-panel{
  position:absolute; right:0; bottom:58px;
  width:min(380px, calc(100vw - 44px)); max-height:min(600px, calc(100vh - 120px));
  display:flex; flex-direction:column;
  border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.97); opacity:0; pointer-events:none;
  transition:transform .28s var(--ease-soft,ease), opacity .22s ease;
}
html[dir="rtl"] .iebot-panel{ right:auto; left:0; }
.iebot.is-open .iebot-panel{ transform:none; opacity:1; pointer-events:auto; }
.iebot-panel[hidden]{ display:flex; } /* keep transition working; JS also toggles [hidden] pre-layout */

.iebot-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 16px 14px; border-bottom:1px solid var(--glass-border);
  background:var(--surface);
}
.iebot-avatar{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.68rem; font-weight:800;
  color:#fff; background:linear-gradient(135deg,#0505C5,#68BD68);
  overflow:hidden;
}
.iebot-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.iebot-head-text{ display:flex; flex-direction:column; min-width:0; }
.iebot-head-text strong{ font-size:.92rem; font-weight:700; color:var(--text); }
.iebot-head-text span{ font-size:.72rem; color:var(--text-faint); }
.iebot-min{
  margin-inline-start:auto; background:none; border:0; cursor:pointer;
  color:var(--text-faint); padding:6px; border-radius:8px; transition:color .2s, background .2s;
}
.iebot-min:hover{ color:var(--text); background:var(--glass-bg); }
.iebot-min svg{ width:18px; height:18px; }

.iebot-body{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;
  background:var(--bg); min-height:220px;
  scrollbar-width:thin; scrollbar-color:var(--scrollbar) transparent;
}
.iebot-body::-webkit-scrollbar{ width:6px; }
.iebot-body::-webkit-scrollbar-track{ background:transparent; }
.iebot-body::-webkit-scrollbar-thumb{ background:var(--scrollbar); border-radius:8px; }
.iebot-body::-webkit-scrollbar-thumb:hover{ background:var(--text-faint); }
.iebot-msg{ display:flex; gap:8px; align-items:flex-end; max-width:88%; }
.iebot-msg-user{ align-self:flex-end; flex-direction:row-reverse; }
.iebot-msg-bot{ align-self:flex-start; }
.iebot-msg-avatar{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.52rem; font-weight:800;
  color:#fff; background:linear-gradient(135deg,#0505C5,#68BD68);
}
.iebot-bubble{
  border-radius:16px; padding:10px 13px; font-size:.86rem; line-height:1.5;
  background:var(--bg-alt); border:1px solid var(--border); color:var(--text);
  word-break:break-word;
}
.iebot-msg-user .iebot-bubble{
  background:var(--brand-blue); border-color:transparent; color:#fff;
  border-bottom-right-radius:5px;
}
html[dir="rtl"] .iebot-msg-user .iebot-bubble{ border-bottom-right-radius:16px; border-bottom-left-radius:5px; }
.iebot-msg-bot .iebot-bubble{ border-bottom-left-radius:5px; }
html[dir="rtl"] .iebot-msg-bot .iebot-bubble{ border-bottom-left-radius:16px; border-bottom-right-radius:5px; }
.iebot-bubble .iebot-link{
  color:var(--brand-blue-ink); font-weight:700; text-decoration:underline;
  text-underline-offset:2px;
}
[data-theme="dark"] .iebot-bubble .iebot-link{ color:#8ea4ff; }
.iebot-bubble .iebot-link:hover{ text-decoration-thickness:2px; }

.iebot-typing{ display:flex; gap:4px; padding:12px 14px; }
.iebot-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--text-faint);
  animation:ct-bounce 1.3s ease-in-out infinite;
}
.iebot-typing span:nth-child(2){ animation-delay:.15s; }
.iebot-typing span:nth-child(3){ animation-delay:.3s; }

.iebot-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 12px; }
.iebot-chip{
  font-size:.74rem; font-weight:600; padding:7px 12px; border-radius:100px;
  background:#EAF6EA; color:#2F7034; border:1px solid rgba(104,189,104,.38);
  cursor:pointer; transition:background .2s, transform .2s;
}
.iebot-chip:hover{ background:#DCF0DC; transform:translateY(-1px); }

.iebot-form{
  display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--glass-border);
  background:var(--surface);
}
.iebot-input{
  flex:1; min-width:0; border:1px solid var(--border); border-radius:100px;
  padding:10px 15px; font-size:.86rem; background:var(--bg); color:var(--text);
}
.iebot-input:focus{ outline:2px solid var(--brand-green); outline-offset:1px; }
.iebot-send{
  flex:none; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-blue); transition:background .2s;
}
.iebot-send:hover{ background:var(--brand-blue-lift); }
.iebot-send svg{ width:16px; height:16px; }
html[dir="rtl"] .iebot-send svg{ transform:scaleX(-1); }

.iebot-disclaimer{
  margin:0; padding:8px 14px 12px; font-size:.66rem; color:var(--text-faint);
  text-align:center; background:var(--surface);
}

@media (max-width:480px){
  .iebot{ right:14px; bottom:14px; }
  html[dir="rtl"] .iebot{ left:14px; }
  .iebot-panel{ width:calc(100vw - 28px); bottom:70px; }
}

@media (prefers-reduced-motion:reduce){
  .iebot-launcher, .iebot-panel, .iebot-chip{ transition:none; }
  .iebot-typing span{ animation:none; opacity:.7; }
}
body.a11y-reduce-motion .iebot-typing span{ animation:none; opacity:.7; }

/* =========================================================================
   BLOG / ARTICLE SYSTEM: landing pages (Blogs & Articles, Whitepapers,
   Case Studies, News & Reports) and the six full long-form article pages.
   Built from the site's own tokens (glass, radius, shadow, brand gradient)
   rather than a new visual language.
   ========================================================================= */

/* ---- resource landing hero ---- */
.res-hero{ padding-top:150px; padding-bottom:40px; }
.res-hero p.lede{ font-size:1.05rem; line-height:1.75; color:var(--text-dim); max-width:800px; margin-top:14px; }
.res-hero p.lede + p.lede{ margin-top:18px; }
.res-hero + .section-pad{ padding-top:40px; }
.res-hero .lede{ max-width:60ch; }

/* ---- article/resource preview cards (landing grids) ---- */
.res-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
}
.res-card{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.res-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); }
.res-card .res-thumb{ aspect-ratio:16/10; overflow:hidden; }
.res-card .res-thumb img{ width:100%; height:100%; object-fit:cover; }
.res-card .res-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.res-card .res-tag{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-green-ink);
}
.res-card h3{ font-size:1.08rem; line-height:1.35; margin:0; }
.res-card p{ font-size:.88rem; color:var(--text-dim); line-height:1.55; margin:0; flex:1; }
.res-card .res-meta{
  display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--text-faint);
  padding-top:8px; border-top:1px solid var(--border); margin-top:4px;
}
.res-card .res-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-faint); }
.res-card a.res-cover{ position:absolute; inset:0; }
.res-card{ position:relative; }

/* sample/placeholder landing cards (Whitepapers, Case Studies, News & Reports) */
.res-sample-note{
  display:flex; align-items:flex-start; gap:12px; padding:16px 18px;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md);
  font-size:.86rem; color:var(--text-dim); margin-bottom:28px; max-width:70ch;
}
.res-sample-note svg{ flex:none; width:19px; height:19px; color:var(--brand-blue); margin-top:1px; }
.res-card.is-sample{ opacity:.94; }
.res-card.is-sample .res-tag{ color:var(--text-faint); }
.res-card .res-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:100px; background:rgba(6,8,26,.66); color:#fff; backdrop-filter:blur(4px);
}
html[dir="rtl"] .res-card .res-badge{ left:auto; right:12px; }

/* ---- resource landing nav switcher (mirrors mod-switch) ---- */
.res-switch{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.res-switch a{
  padding:9px 16px; border-radius:100px; font-size:.86rem; font-weight:600;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-dim);
  transition:background .2s, color .2s;
}
.res-switch a:hover{ color:var(--text); }
.res-switch a.is-current{ background:var(--brand-blue); border-color:transparent; color:#fff; }

/* ---- article page ---- */
.article-hero{ padding-top:150px; padding-bottom:0; }
.article-crumb{
  font-size:.76rem; color:var(--text-faint); display:flex; gap:8px; align-items:center; margin-bottom:18px;
}
.article-crumb a:hover{ color:var(--brand-green-ink); }
.article-tags{ font-size:.82rem; font-weight:600; color:var(--brand-green-ink); margin-bottom:14px; }
.article-hero h1{ font-size:clamp(1.9rem,3.6vw,2.9rem); max-width:20ch; margin-bottom:16px; }
.article-hero .article-sub{ font-size:1.08rem; color:var(--text-dim); max-width:62ch; line-height:1.6; margin-bottom:22px; }
.article-meta-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; font-size:.84rem; color:var(--text-faint);
  padding-bottom:22px; margin-bottom:26px; border-bottom:1px solid var(--border);
}
.article-meta-row span{ display:inline-flex; align-items:center; gap:6px; }
.article-author-card{
  display:flex; align-items:center; gap:12px; padding:16px 0 30px;
}
.article-author-avatar{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:.9rem;
  background:linear-gradient(135deg,#0505C5,#68BD68);
}
.article-author-card strong{ display:block; font-size:.95rem; color:var(--text); }
.article-author-card span{ display:block; font-size:.8rem; color:var(--text-faint); }

.article-hero-photo{
  aspect-ratio:16/8; border-radius:var(--radius-xl); overflow:hidden; margin-bottom:0;
  box-shadow:var(--shadow-card);
}
.article-hero-photo img{ width:100%; height:100%; object-fit:cover; }

.article-body{ max-width:74ch; margin-inline:auto; padding-top:44px; }
.article-body .lede-block{
  font-size:1.14rem; line-height:1.7; color:var(--text); font-weight:500;
  padding-bottom:8px; margin-bottom:8px;
}
.article-body h2{ font-size:clamp(1.35rem,2.2vw,1.65rem); margin:44px 0 16px; }
.article-body h3{ font-size:clamp(1.1rem,1.7vw,1.28rem); margin:28px 0 12px; color:var(--brand-blue-ink); }
.article-body p{ font-size:1rem; line-height:1.75; color:var(--text-dim); margin:0 0 18px; }
.article-body p:last-child{ margin-bottom:0; }

.article-quote{
  margin:30px 0; padding:22px 26px; border-radius:var(--radius-md);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-inline-start:4px solid var(--brand-green);
  font-size:1.05rem; line-height:1.6; font-style:italic; color:var(--text);
}
.article-quote cite{
  display:block; margin-top:12px; font-size:.8rem; font-style:normal; font-weight:600; color:var(--text-faint);
}

.article-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  margin:30px 0; padding:22px; border-radius:var(--radius-md);
  background:var(--bg-alt); border:1px solid var(--border);
}
.article-stats div{ text-align:center; }
.article-stats strong{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--brand-blue-ink); line-height:1.1;
}
[data-theme="dark"] .article-stats strong{ color:#7A7AF7; }
.article-stats span{ display:block; margin-top:6px; font-size:.76rem; color:var(--text-faint); line-height:1.4; }
.article-stats small{ display:block; margin-top:4px; font-size:.68rem; color:var(--text-faint); opacity:.8; }

.article-panels{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:30px 0;
}
.article-panels > div{
  padding:18px 20px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
}
.article-panels .panel-num{
  font-family:var(--font-mono, monospace); font-size:.7rem; font-weight:700;
  color:var(--brand-green-ink); letter-spacing:.06em; margin-bottom:8px; display:block;
}
.article-panels h4{ font-size:.94rem; margin:0 0 8px; }
.article-panels p{ font-size:.88rem; margin:0; color:var(--text-dim); line-height:1.6; }

.article-table-wrap{ margin:30px 0; overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border); }
.article-table{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:520px; }
.article-table caption{
  text-align:left; padding:14px 16px 4px; font-size:.76rem; color:var(--text-faint);
  caption-side:top; font-style:italic;
}
.article-table th{
  text-align:left; padding:11px 14px; background:var(--bg-alt); color:var(--text);
  font-weight:700; font-size:.78rem; border-bottom:1px solid var(--border);
}
.article-table td{ padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text-dim); vertical-align:top; }
.article-table tr:last-child td{ border-bottom:0; }

.article-refs{
  margin:36px 0 0; padding-top:26px; border-top:1px solid var(--border);
}
.article-refs h3{ font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:14px; }
.article-refs ol{ margin:0; padding-inline-start:20px; display:flex; flex-direction:column; gap:9px; }
.article-refs li{ font-size:.8rem; color:var(--text-faint); line-height:1.6; }

.article-keywords{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; }
.article-keywords span{
  font-size:.72rem; padding:6px 12px; border-radius:100px;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-dim);
}

.article-about{
  margin-top:40px; padding:24px; border-radius:var(--radius-md);
  background:var(--bg-alt); border:1px solid var(--border); font-size:.88rem; color:var(--text-dim); line-height:1.65;
}
.article-about strong{ display:block; color:var(--text); font-size:.95rem; margin-bottom:8px; }

.article-related{ margin-top:56px; }
.article-related h3{ font-size:1.1rem; margin-bottom:20px; }

@media (max-width:960px){
  .res-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .res-grid{ grid-template-columns:1fr; }
  .article-panels{ grid-template-columns:1fr; }
}

/* =========================================================================
   ABOUT US, LEGAL PAGES, SITE MAP
   Reuses the .article-* system built for the blog, plus a handful of
   About-specific components (mission/vision cards, values grid, team cards).
   ========================================================================= */

/* ---- About Us ---- */
.about-hero-photo{
  aspect-ratio:16/9; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-card);
  margin:36px 0 8px;
}
.about-hero-photo img{ width:100%; height:100%; object-fit:cover; }

.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:8px 0 32px; }
.mv-card{
  padding:26px 24px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border);
}
.mv-card .mv-label{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-green-ink); margin-bottom:10px; display:block;
}
.mv-card p{ margin:0; font-size:1rem; line-height:1.6; color:var(--text); }

.values-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:8px 0 8px; }
.value-card{
  padding:20px 18px; border-radius:var(--radius-md);
  background:var(--bg-alt); border:1px solid var(--border); text-align:center;
}
.value-card h4{ font-size:.94rem; margin:0 0 6px; }
.value-card p{ font-size:.82rem; color:var(--text-dim); margin:0; line-height:1.5; }

.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:8px 0; }
.team-card{
  display:flex; gap:18px; padding:22px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border);
}
.team-card .team-photo{
  flex:none; width:88px; height:88px; border-radius:50%; overflow:hidden;
  border:2px solid var(--brand-green);
}
.team-card .team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-card h4{ font-size:1.02rem; margin:0 0 2px; }
.team-card .team-role{ font-size:.8rem; color:var(--brand-green-ink); font-weight:600; margin-bottom:9px; display:block; }
.team-card p{ font-size:.86rem; color:var(--text-dim); line-height:1.55; margin:0; }

/* ---- Legal pages (Privacy / Terms) ---- */
.legal-updated{
  font-size:.78rem; color:var(--text-faint); margin-bottom:10px; display:block;
}
.legal-toc{
  display:flex; flex-wrap:wrap; gap:8px; padding:18px; margin:28px 0 8px;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md);
}
.legal-toc a{
  font-size:.78rem; padding:6px 12px; border-radius:100px;
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
}
.legal-toc a:hover{ color:var(--brand-green-ink); }
.article-body h2{ scroll-margin-top:100px; }
.article-body ul{ margin:0 0 18px; padding-inline-start:22px; }
.article-body ul li{ font-size:1rem; line-height:1.7; color:var(--text-dim); margin-bottom:6px; }
.article-body strong{ color:var(--text); }

/* ---- Site Map ---- */
.sitemap-grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px;
}
.sitemap-col h4{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-green-ink); margin-bottom:14px;
}
.sitemap-col ul{ display:flex; flex-direction:column; gap:9px; }
.sitemap-col a{ font-size:.88rem; color:var(--text-dim); }
.sitemap-col a:hover{ color:var(--text); }
.sitemap-utility{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px 24px;
}
.sitemap-utility a{ font-size:.88rem; color:var(--text-dim); }
.sitemap-utility a:hover{ color:var(--brand-green-ink); }

@media (max-width:960px){
  .mv-grid, .team-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .sitemap-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .values-grid{ grid-template-columns:1fr; }
  .sitemap-grid{ grid-template-columns:1fr; }
  .team-card{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================================
   CARA PREVIEW: the home page's animated preview of the real Cara widget.
   Reuses the same .ct-msg/.ct-bubble/.ct-typing components already used for
   the (now removed) static mockup; only the avatar styling and hint line
   below are new.
   ========================================================================= */
.ct-avatar.cara-avatar{
  background:linear-gradient(135deg,#0505C5,#68BD68);
  font-size:.6rem; font-weight:800;
}
.ct-mock-body{ min-height:190px; }

/* =========================================================================
   FOOTER SOCIAL ICONS: modest, not flashy: small outlined circles matching
   the site's own icon-button language, sitting in the footer's bottom bar
   between the legal links and the copyright line.
   ========================================================================= */
.footer-social{ display:flex; align-items:center; gap:10px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a:hover{ background:#0505C5; border-color:transparent; color:#fff; transform:translateY(-2px); }
.footer-social a.is-soon{ opacity:.4; cursor:default; }
.footer-social a.is-soon:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.72); transform:none; }
.footer-social a svg{ width:16px; height:16px; }

/* =========================================================================
   ARTICLE INLINE FIGURES: diagrams/charts embedded mid-body, distinct from
   the full-bleed hero photo at the top of each article.
   ========================================================================= */
.article-inline-fig{ margin:28px 0; }
.article-inline-fig img{
  width:100%; display:block; border-radius:var(--radius-lg);
}
.article-inline-fig figcaption{
  margin-top:10px; font-size:.82rem; color:var(--text-faint); text-align:center;
}
.article-inline-fig .fig-source{
  display:block; margin-top:4px; font-size:.74rem; color:var(--text-faint); opacity:.85;
}
.article-inline-fig .fig-source a{ color:inherit; text-decoration:underline; }

/* =========================================================================
   MEGA-MENU DROPDOWN: the 2-column icon-grid style used for Platform,
   Expertise, Analytics, Resources, and the Company/Contact menu, replacing
   the single-column bullet list. Icon color: blue/green in light theme,
   white/green in dark theme, alternating per item via .ic-a / .ic-b.
   ========================================================================= */
.dn-dropdown.dn-mega{
  width:860px; padding:24px 28px;
}
.dn-item.resources-dropdown .dn-dropdown{
  left:auto; right:0; transform:translateY(6px);
}
html[dir="rtl"] .dn-item.resources-dropdown .dn-dropdown{ right:auto; left:0; }
.desktop-nav > .dn-item.resources-dropdown.open .dn-dropdown{
  transform:translateY(0);
}
.dn-mega-title{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:12px;
}
.dn-mega-rule{ height:1px; background:var(--border); margin-bottom:18px; }
.dn-mega-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px 26px;
}
.dn-mega-item{
  display:flex; flex-direction:column; gap:9px; padding:8px; border-radius:12px;
  transition:background .18s ease;
}
.dn-mega-item:hover{ background:var(--bg-alt); }
.dn-mega-icon{ width:22px; height:22px; flex:none; }
.dn-mega-icon.ic-a{ color:var(--brand-blue-ink); }
.dn-mega-icon.ic-b{ color:var(--brand-green-ink); }
[data-theme="dark"] .dn-mega-icon.ic-a{ color:#fff; }
.dn-mega-item h5{ font-size:.96rem; font-weight:700; margin:0; color:var(--text); }
.dn-mega-item p{ font-size:.79rem; line-height:1.4; color:var(--text-dim); margin:0; }
.dn-mega-item .platform-icon-img{ width:100%; height:100%; object-fit:contain; }

@media (max-width:1300px){
  .dn-dropdown.dn-mega{ width:720px; }
  .dn-mega-grid{ grid-template-columns:1fr 1fr; }
}

/* =========================================================================
   WHITEPAPER DOWNLOAD: CTA box at the end of a whitepaper summary page,
   and the modal form it opens (name / email / organization / terms).
   ========================================================================= */
.whitepaper-cta-box{
  margin-top:40px; padding:32px; border-radius:var(--radius-xl);
  background:var(--bg-alt); border:1px solid var(--border); text-align:center;
}
.whitepaper-cta-box h3{ font-size:1.3rem; margin-bottom:10px; }
.whitepaper-cta-box p{ color:var(--text-dim); max-width:560px; margin:0 auto 20px; }

.wp-modal-backdrop{
  position:fixed; inset:0; background:rgba(5,7,20,.6); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.wp-modal-backdrop.open{ opacity:1; visibility:visible; }
.wp-modal{
  background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-card);
  width:100%; max-width:460px; padding:32px; position:relative;
  transform:translateY(12px); transition:transform .25s ease;
}
.wp-modal-backdrop.open .wp-modal{ transform:translateY(0); }
.wp-modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background:transparent; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.wp-modal-close svg{ width:16px; height:16px; }
.wp-modal h3{ font-size:1.15rem; margin-bottom:6px; padding-right:30px; }
.wp-modal p.wp-modal-sub{ color:var(--text-dim); font-size:.9rem; margin-bottom:20px; }
.wp-modal label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:5px; }
.wp-modal input[type="text"], .wp-modal input[type="email"]{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.92rem; margin-bottom:16px;
}
.wp-modal .wp-check-row{ display:flex; align-items:flex-start; gap:9px; margin-bottom:18px; }
.wp-modal .wp-check-row input{ margin-top:3px; flex:none; }
.wp-modal .wp-check-row label{ font-size:.8rem; font-weight:400; margin:0; color:var(--text-dim); }
.wp-modal .wp-check-row a{ color:var(--brand-blue-ink); text-decoration:underline; }
.wp-modal button[type="submit"]{ width:100%; }
.wp-modal .form-status{ margin-top:12px; font-size:.85rem; text-align:center; }
.wp-modal .form-status.success{ color:var(--brand-green-ink); }
.wp-modal .form-status.error{ color:#c0392b; }

/* =========================================================================
   SUSTAINABILITY POLICY — green-themed hero and section treatment, distinct
   from the standard blue-accented legal/policy page look.
   ========================================================================= */
.sustainability-hero{
  background:linear-gradient(160deg, color-mix(in srgb, var(--brand-green) 14%, var(--bg)) 0%, var(--bg) 65%);
}
.sustainability-hero .legal-updated{ color:var(--brand-green-ink); }
.sustainability-hero h1{ color:var(--brand-green-ink); }
.sustainability-body-section .article-body h2{ color:var(--brand-green-ink); }
.sustainability-toc a{ border-color:var(--brand-green); }
.sustainability-toc a:hover, .sustainability-toc a:focus{
  background:var(--brand-green); color:#fff; border-color:var(--brand-green);
}

/* Subtle scrollbar for dropdown panels, in the rare case content needs to
   scroll (very short browser windows, extreme zoom levels, etc.) */
.dn-dropdown::-webkit-scrollbar{ width:7px; }
.dn-dropdown::-webkit-scrollbar-track{ background:transparent; }
.dn-dropdown::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; }
.dn-dropdown::-webkit-scrollbar-thumb:hover{ background:var(--text-faint); }

/* content created in admin.html */
.article-body blockquote{ margin:22px 0; padding:4px 0 4px 18px; border-inline-start:3px solid var(--brand-green); color:var(--text-dim); font-style:italic; }
.article-body ol, .article-body ul{ color:var(--text-dim); line-height:1.75; margin:0 0 18px; padding-inline-start:1.4em; }
.article-body a{ color:var(--brand-blue-ink); text-decoration:underline; }

.article-cta{ display:flex; flex-wrap:wrap; gap:14px; margin:36px 0 8px; }
#read-hero{ margin-bottom:32px; }
#read-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-body .article-cta .btn{ text-decoration:none; }
.article-body .article-cta .btn-solid{ color:#fff; }
.article-body .article-cta .btn-ghost{ color:var(--text); }
.article-body .res-card h3, .article-body .res-card .res-tag{ text-decoration:none; }
#read-hero{ max-width:1180px; margin-left:auto; margin-right:auto; }
/* News page banner: sits in the same column as the text */
#read-hero{ max-width:74ch; width:100%; aspect-ratio:2/1; margin:40px auto 0; border-radius:var(--radius-lg, 20px); }
#read-hero + .article-body{ padding-top:32px; }
@media (max-width:640px){ #read-hero{ margin-top:28px; } }
[data-route="read"] .section-pad.surface > .container{ display:flow-root; }

.apply-panel{ margin-top:48px; padding:32px; border:1px solid var(--border); border-radius:var(--radius-lg, 20px); background:var(--bg-alt); }
.apply-panel h2{ font-size:1.4rem; margin:0 0 8px; }
.apply-lead{ color:var(--text-dim); margin:0 0 20px; }
.apply-li{ gap:10px; text-decoration:none !important; color:var(--text) !important; }
.apply-or{ display:flex; align-items:center; gap:14px; margin:26px 0 0; color:var(--text-faint); font-size:.85rem; }
.apply-or::before,.apply-or::after{ content:""; flex:1; height:1px; background:var(--border); }
.apply-panel .form-grid{ margin-top:20px; }
.apply-panel .form-field input[type=file]{ padding:10px 12px; }
.form-consent{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--text-dim); }
.form-consent input{ width:auto; margin-top:4px; }
.apply-email{ margin:18px 0 0; font-size:.9rem; color:var(--text-dim); }
.article-body .apply-panel .btn-solid{ color:#fff; text-decoration:none; }
@media (max-width:640px){ .apply-panel{ padding:22px 18px; } }
.article-body ul{ list-style:disc; padding-left:1.4em; }
.article-body ul li::marker{ color:var(--brand-green); }

/* ===== Shared: breadcrumbs ===== */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.85rem; color:var(--text-faint); margin-bottom:22px; }
.crumbs a{ color:var(--text-dim); text-decoration:none; }
.crumbs a:hover{ color:var(--brand-green-ink, var(--brand-green)); }

/* ===== Media centre (News, Articles, Whitepapers) ===== */
.media-hub{ display:block; }
.mc-bar{ display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 16px; }
.mc-search{ position:relative; flex:1 1 280px; display:block; }
.mc-search svg{ position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-faint); }
.mc-search input, .mc-year, .cr-filter select{
  width:100%; border:1.5px solid var(--border); border-radius:999px; background:var(--bg-alt); color:var(--text);
  padding:13px 18px 13px 46px; font:inherit; font-size:.95rem;
}
html[dir="rtl"] .mc-search input{ padding:13px 46px 13px 18px; }
.mc-year, .cr-filter select{ width:auto; padding:13px 20px; }
.mc-search input:focus, .mc-year:focus, .cr-filter select:focus{ outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(5,5,197,.19); }
.mc-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.mc-chips button{ border:1.5px solid var(--border); background:transparent; color:var(--text-dim); border-radius:999px; padding:8px 18px; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; transition:all .2s ease; }
.mc-chips button:hover{ color:var(--text); border-color:var(--brand-green); }
.mc-chips button.is-on{ background:var(--brand-blue); border-color:transparent; color:#fff; }
.mc-card{ position:relative; display:flex; flex-direction:column; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-lg, 20px); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--brand-green); }
.mc-cover{ position:absolute; inset:0; z-index:2; }
.mc-img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#fff; }
.mc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mc-card:hover .mc-img img{ transform:scale(1.04); }
.mc-badge{ position:absolute; top:12px; inset-inline-start:12px; background:rgba(0,0,0,.65); color:#fff; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.mc-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.mc-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-size:.8rem; color:var(--text-faint); }
.mc-meta span{ display:inline-flex; align-items:center; gap:6px; }
.mc-meta svg{ width:14px; height:14px; }
.mc-meta .mc-tag{ color:var(--brand-green-ink, var(--brand-green)); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }
.mc-body h3{ font-size:1.12rem; line-height:1.35; margin:0; color:var(--text); }
.mc-body p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--text-dim); }
.mc-more{ margin-top:auto; font-weight:700; font-size:.88rem; color:var(--brand-blue-lift, var(--brand-blue)); display:inline-flex; gap:8px; align-items:center; }
.mc-more b{ transition:transform .2s ease; }
.mc-card:hover .mc-more b{ transform:translateX(4px); }
.mc-feature{ flex-direction:row; margin-bottom:32px; }
.mc-feature .mc-img{ flex:1.15; aspect-ratio:auto; min-height:340px; }
.mc-feature .mc-body{ flex:1; justify-content:center; padding:38px; gap:16px; }
.mc-feature h3{ font-size:1.7rem; line-height:1.25; }
.mc-feature p{ font-size:1rem; }
.mc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.mc-empty{ padding:40px 0; color:var(--text-dim); }
@media (max-width:960px){ .mc-grid{ grid-template-columns:1fr 1fr; } .mc-feature{ flex-direction:column; } .mc-feature .mc-img{ min-height:0; aspect-ratio:16/9; } .mc-feature .mc-body{ padding:26px; } }
@media (max-width:640px){ .mc-grid{ grid-template-columns:1fr; } .mc-feature h3{ font-size:1.35rem; } }

/* ===== News detail ===== */
.nd-wrap{ padding:130px 0 80px; }
.nd-main{ max-width:860px; margin:0 auto; }
.nd-wrap .crumbs{ max-width:860px; margin-inline:auto; }
.nd-tag{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-green-ink, var(--brand-green)); margin-bottom:14px; }
.nd-main h1{ font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.15; margin:0 0 22px; }
.nd-meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; padding:16px 0; border-block:1px solid var(--border); margin-bottom:30px; }
.nd-meta > div:first-child{ display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--text-dim); font-size:.92rem; }
.nd-meta span{ display:inline-flex; align-items:center; gap:8px; }
.nd-meta svg{ width:16px; height:16px; color:var(--text-faint); }
.nd-share{ display:flex; align-items:center; gap:8px; }
.nd-share > span{ font-size:.8rem; color:var(--text-faint); margin-inline-end:4px; }
.nd-share-btn{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border); display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--text-dim); cursor:pointer; transition:all .2s ease; }
.nd-share-btn svg{ width:16px; height:16px; }
.nd-share-btn:hover{ color:#fff; background:var(--brand-blue); border-color:transparent; }
.nd-share-btn.is-done{ background:var(--brand-green); color:#04210a; border-color:transparent; }
.nd-figure{ margin:0 0 34px; border-radius:var(--radius-lg, 20px); overflow:hidden; box-shadow:var(--shadow-card); background:#fff; }
.nd-figure img{ width:100%; display:block; aspect-ratio:2/1; object-fit:cover; }
.nd-body{ font-size:1.06rem; line-height:1.85; color:var(--text-dim); }
.nd-body p{ margin:0 0 20px; }
.nd-body h2, .nd-body h3{ color:var(--text); margin:34px 0 12px; font-size:1.3rem; }
.nd-body .nd-lead{ font-weight:700; color:var(--text); font-size:1.14rem; }
.nd-dateline{ color:var(--brand-green-ink, var(--brand-green)); }
.nd-body blockquote{ margin:28px 0; padding:6px 0 6px 22px; border-inline-start:4px solid var(--brand-green); color:var(--text); font-style:italic; }
.nd-body ul, .nd-body ol{ padding-inline-start:1.4em; margin:0 0 20px; } .nd-body ul{ list-style:disc; }
.nd-body a{ color:var(--brand-blue-lift, var(--brand-blue)); text-decoration:underline; }
.nd-main .article-cta .btn{ text-decoration:none; }
.nd-main .article-cta .btn-solid{ color:#fff; } .nd-main .article-cta .btn-ghost{ color:var(--text); }
.nd-pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; }
.nd-pn{ display:block; border:1px solid var(--border); border-radius:var(--radius-sm, 12px); padding:16px 20px; text-decoration:none; transition:border-color .2s ease; }
.nd-pn:hover{ border-color:var(--brand-green); }
.nd-pn small{ display:block; color:var(--text-faint); margin-bottom:6px; }
.nd-pn strong{ color:var(--text); font-size:.95rem; line-height:1.4; display:block; }
.nd-pn:last-child{ text-align:end; }
.nd-more{ margin-top:70px; }
.nd-more-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:24px; }
.nd-more-head h2{ font-size:1.5rem; margin:0; }
.nd-more-head a{ font-weight:700; font-size:.9rem; text-decoration:none; color:var(--brand-blue-lift, var(--brand-blue)); }
@media (max-width:640px){ .nd-wrap{ padding-top:110px; } .nd-pager{ grid-template-columns:1fr; } }

/* ===== Careers ===== */
.cr-hero{ padding:150px 0 70px; background:linear-gradient(135deg, rgba(5,5,197,.16), rgba(104,189,104,.10)); }
.cr-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.cr-eyebrow{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-green-ink, var(--brand-green)); margin-bottom:14px; }
.cr-hero h1{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin:0 0 20px; }
.cr-lede{ font-size:1.1rem; line-height:1.75; color:var(--text-dim); max-width:56ch; margin:0 0 30px; }
.cr-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.cr-actions .btn{ text-decoration:none; cursor:pointer; }
.cr-hero-visual{ position:relative; border-radius:28px 28px 120px 28px; overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow-card); }
.cr-hero-visual img{ width:100%; height:100%; object-fit:cover; }
.cr-hero-badge{ position:absolute; inset-inline-start:20px; bottom:20px; background:var(--brand-blue); color:#fff; border-radius:18px; padding:14px 22px; display:flex; flex-direction:column; line-height:1.1; }
.cr-hero-badge strong{ font-size:2rem; } .cr-hero-badge span{ font-size:.8rem; opacity:.85; }
.cr-two{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cr-impact h2, .cr-values-sec h2, .cr-roles-sec h2, .cr-people h2, .cr-cta h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 14px; }
.cr-impact p{ color:var(--text-dim); font-size:1.05rem; line-height:1.8; }
.cr-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cr-stats div{ border:1px solid var(--border); border-radius:var(--radius-lg, 20px); padding:26px 20px; background:var(--bg-alt); }
.cr-stats strong{ display:block; font-size:2.6rem; line-height:1; color:var(--brand-blue-lift, var(--brand-blue)); }
.cr-stats span{ display:block; margin-top:10px; font-size:.88rem; color:var(--text-dim); }
.cr-sub{ color:var(--text-dim); margin:0 0 34px; }
.cr-values{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.cr-values > div{ padding:24px 20px; border-top:3px solid var(--brand-green); background:var(--bg-alt); border-radius:0 0 var(--radius-sm, 12px) var(--radius-sm, 12px); }
.cr-values span{ font-size:.8rem; font-weight:700; color:var(--text-faint); letter-spacing:.1em; }
.cr-values h3{ font-size:1.05rem; margin:10px 0 8px; } .cr-values p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--text-dim); }
.cr-filter{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.cr-count{ color:var(--text-faint); font-size:.88rem; margin:0 0 14px; }
.cr-list{ border-top:1px solid var(--border); }
.cr-role{ display:grid; grid-template-columns:1.6fr 1.2fr auto; gap:24px; align-items:center; padding:24px 8px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; transition:background .2s ease, padding .2s ease; }
.cr-role:hover{ background:rgba(104,189,104,.08); padding-inline:18px; }
.cr-role h3{ margin:0 0 6px; font-size:1.2rem; color:var(--text); } .cr-role p{ margin:0; color:var(--text-dim); font-size:.92rem; line-height:1.55; }
.cr-role-tags{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:.85rem; color:var(--text-dim); }
.cr-role-tags span{ display:inline-flex; align-items:center; gap:6px; } .cr-role-tags svg{ width:14px; height:14px; }
.cr-pill{ background:rgba(5,5,197,.18); color:var(--text); padding:4px 12px; border-radius:999px; font-weight:600; font-size:.78rem !important; }
.cr-pill.is-closed{ background:rgba(224,97,110,.2); }
.cr-go{ width:42px; height:42px; border-radius:50%; background:var(--brand-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; transition:transform .2s ease; }
.cr-role:hover .cr-go{ transform:translateX(4px); }
.cr-faces{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px; }
.cr-face{ text-align:center; } .cr-face img{ width:110px; height:110px; border-radius:50%; object-fit:cover; border:3px solid var(--brand-green); margin-bottom:12px; }
.cr-face strong{ display:block; font-size:.95rem; } .cr-face span{ font-size:.8rem; color:var(--text-dim); }
.cr-cta{ background:linear-gradient(100deg, var(--brand-blue-deep, #0808a0), var(--brand-blue)); color:#fff; }
.cr-cta p{ color:rgba(255,255,255,.85); margin:0; }
.cr-cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.cr-cta .btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4); }
@media (max-width:960px){ .cr-hero-grid, .cr-two{ grid-template-columns:1fr; } .cr-values{ grid-template-columns:1fr 1fr; } .cr-role{ grid-template-columns:1fr auto; } .cr-role-tags{ grid-column:1; } .cr-go{ grid-row:1; grid-column:2; } }
@media (max-width:640px){ .cr-stats{ grid-template-columns:1fr; } .cr-values{ grid-template-columns:1fr; } .cr-hero{ padding-top:120px; } }
.mc-img img{ object-position:center 22%; }

/* News detail: image beside title (media-centre style) */
.nd-wrap .crumbs, .nd-main{ max-width:1180px; }
.nd-head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:44px; align-items:center; margin-bottom:36px; }
.nd-head:not(:has(.nd-figure)){ grid-template-columns:1fr; }
.nd-figure{ margin:0; box-shadow:none; border-radius:20px; overflow:hidden; background:#fff; }
.nd-figure img{ aspect-ratio:4/3; width:100%; object-fit:cover; object-position:center 20%; display:block; }
.nd-chip{ display:inline-block; background:var(--bg-alt); border:1px solid var(--border); color:var(--text-dim); padding:10px 18px; border-radius:14px; font-size:.95rem; margin-bottom:20px; }
.nd-head h1{ font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.2; margin:0 0 16px; }
.nd-sub{ margin:0 0 20px; color:var(--text-dim); font-size:.95rem; }
.nd-head .nd-share{ margin:0; }
.nd-body{ max-width:none; }
@media (max-width:860px){ .nd-head{ grid-template-columns:1fr; gap:24px; } }

/* Cara chat: keep header and input fixed, let only the messages scroll */
#iebot-embed-content{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.iebot-body{ flex:1 1 auto; min-height:0; overflow-y:scroll; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--text-faint) transparent; }
.iebot-body::-webkit-scrollbar{ width:8px; }
.iebot-body::-webkit-scrollbar-thumb{ background:var(--text-faint); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
.iebot-quick, .iebot-form, .iebot-disclaimer{ flex:none; }
.iebot-panel{ height:min(600px, calc(100vh - 120px)); }


/* =========================================================================
   ZOOM / SMALL-SCREEN RESILIENCE
   Browser zoom shrinks the CSS viewport (e.g. 400% on a laptop = ~340x190),
   so fixed UI (header, floating buttons, sticky bar) must not collide and
   headings must not overflow. Width and height are handled independently.
   ========================================================================= */
.hero-copy h1{ font-size:clamp(1.9rem, 4vw + 1.2rem, 4.1rem); overflow-wrap:break-word; }
@media (max-width:360px){
  .hero-copy h1{ font-size:1.65rem; }
  .hero h1 .w{ max-width:100%; }
}
h1, h2, h3{ overflow-wrap:break-word; }

/* Short viewports (zoomed in, landscape phones, small windows) */
@media (max-height:560px){
  .topbar{ padding:8px 0; }
  .topbar.scrolled{ padding:6px 0; }
  .brand .lockup, .site-nav .brand .lockup{ height:32px; }
  .a11y-widget{ bottom:10px; inset-inline-start:10px; }
  .iebot{ bottom:10px; right:10px; }
  html[dir="rtl"] .iebot{ right:auto; left:10px; }
  .a11y-toggle, .iebot-launcher{ width:36px; height:36px; }
  .a11y-toggle svg, .iebot-launcher svg{ width:17px; height:17px; }
  .a11y-panel{ bottom:46px; max-height:calc(100vh - 70px); }
  .iebot-panel{ bottom:46px; max-height:calc(100vh - 66px); }
  .sticky-cta .container{ padding-block:6px; }
  .sticky-cta .btn{ padding-block:8px; font-size:.85rem; }
  .sticky-cta p{ font-size:.85rem; }
  .hero-copy h1{ font-size:clamp(1.6rem, 3vw + 1rem, 3rem); }
}

/* Very short viewports: drop the sticky bar, keep floating buttons clear of the header */
@media (max-height:340px){
  .sticky-cta{ display:none; }
  .topbar{ padding:5px 0; }
  .brand .lockup, .site-nav .brand .lockup{ height:28px; }
  .a11y-toggle, .iebot-launcher{ width:32px; height:32px; }
  .a11y-toggle svg, .iebot-launcher svg{ width:15px; height:15px; }
  .a11y-widget{ bottom:6px; inset-inline-start:6px; }
  .iebot{ bottom:6px; right:6px; }
  html[dir="rtl"] .iebot{ right:auto; left:6px; }
  .a11y-panel{ bottom:40px; max-height:calc(100vh - 52px); }
  .iebot-panel{ bottom:40px; max-height:calc(100vh - 50px); }
}
@media (max-height:560px){
  .more-toggle, .theme-toggle{ width:36px; height:36px; }
  .burger{ padding:6px; gap:4px; }
  .lang-switch > button{ width:36px; height:36px; }
  .more-dropdown-panel, .dn-dropdown, .lang-menu{ max-height:calc(100vh - 60px); overflow-y:auto; }
}
@media (max-height:340px){
  .more-toggle, .theme-toggle, .lang-switch > button{ width:30px; height:30px; }
  .more-toggle svg{ width:16px; height:16px; }
  .burger{ padding:5px; gap:3px; }
  .burger span{ width:16px; height:2px; }
}

/* ---- Floating buttons: one shared system so they never collide ----
   --fab    button size          --fab-b  distance from the bottom edge
   --fab-x  distance from side   --cta-h  height of the sticky bar, lifted over when it shows */
:root{ --fab:42px; --fab-b:22px; --fab-x:22px; --cta-h:78px; --cta-lift:0px; }
html:has(.sticky-cta.show){ --cta-lift:var(--cta-h); }
.a11y-widget{ bottom:calc(var(--fab-b) + var(--cta-lift)); inset-inline-start:var(--fab-x); transition:bottom .5s var(--ease-expo, ease); }
.iebot{ bottom:calc(var(--fab-b) + var(--cta-lift)); right:var(--fab-x); transition:bottom .5s var(--ease-expo, ease); }
html[dir="rtl"] .iebot{ right:auto; left:var(--fab-x); }
.a11y-toggle, .iebot-launcher{ width:var(--fab); height:var(--fab); }
.back-to-top{
  width:var(--fab); height:var(--fab);
  inset-inline-end:var(--fab-x);
  bottom:calc(var(--fab-b) + var(--cta-lift) + var(--fab) + 10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, bottom .5s var(--ease-expo, ease);
}
.back-to-top svg{ width:45%; height:45%; }
.a11y-panel{ bottom:calc(var(--fab) + 12px); max-height:calc(100vh - var(--fab-b) - var(--cta-lift) - var(--fab) - 24px); }
.iebot-panel{ bottom:calc(var(--fab) + 12px); max-height:min(600px, calc(100vh - var(--fab-b) - var(--cta-lift) - var(--fab) - 24px)); }
@media (max-width:480px){ :root{ --fab-b:14px; --fab-x:14px; } }
@media (max-height:560px){
  :root{ --fab:36px; --fab-b:10px; --fab-x:10px; --cta-h:46px; }
  .hero{ min-height:auto; padding-top:72px; padding-bottom:48px; }
}
@media (max-height:340px){
  :root{ --fab:32px; --fab-b:6px; --fab-x:6px; --cta-h:0px; }
  .hero{ padding-top:56px; padding-bottom:32px; }
}

/* EVOLVE section photo: keep the HOSPITAL sign (lower right) in frame when the slot turns into a wide strip */
.bento-media img{ object-position:65% 100%; }

/* "What Infinite Excellence means": illustrated artwork replaces the small icon rings */
.value-item .value-art{ width:130px; height:130px; margin:-4px auto 12px; }
.value-item .value-art img{ width:100%; height:100%; object-fit:contain; display:block; }
@media (max-width:640px){ .value-item .value-art{ width:110px; height:110px; } }

/* About ie4: ONE Platform · Infinite Potential lockup under the intro text */
.article-body .about-lockup{ display:flex; justify-content:center; margin:28px 0 36px; }
.article-body .about-lockup img{ height:34px; }
@media (max-width:820px){ .article-body .about-lockup img{ height:26px; } }
@media (max-width:520px){ .article-body .about-lockup img{ height:20px; } }

/* Phone / WhatsApp numbers always read left-to-right, including on the Arabic (RTL) site */
a[href^="tel:"], a[href*="wa.me"]{ direction:ltr; unicode-bidi:isolate; display:inline-block; }
input[type="tel"]{ direction:ltr; }
html[dir="rtl"] input[type="tel"]{ text-align:right; }

/* =========================================================================
   TOP BAR: clover "About ie4" button (replaces the three dots) with a
   hover label, and the module counter under the module page pager
   ========================================================================= */
.more-toggle{ position:relative; }
.more-toggle .more-clover{ width:22px; height:22px; display:block; transition:transform .25s ease; }
.more-toggle:hover .more-clover{ transform:rotate(-12deg) scale(1.06); }
.more-toggle::after{
  content:attr(data-tip);
  position:absolute; top:calc(100% + 9px); left:50%;
  transform:translate(-50%, -4px);
  white-space:nowrap; pointer-events:none;
  padding:6px 11px; border-radius:8px;
  background:var(--text); color:var(--bg);
  font-size:.78rem; font-weight:600; line-height:1.2; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(10, 14, 40, .18);
  opacity:0; transition:opacity .18s ease, transform .18s ease;
  z-index:60;
}
.more-toggle:hover::after, .more-toggle:focus-visible::after{ opacity:1; transform:translate(-50%, 0); }
.more-dropdown.open .more-toggle::after{ opacity:0; }
@media (hover:none){ .more-toggle::after{ display:none; } }

.page-pager:has(.pager-count){ flex-wrap:wrap; row-gap:10px; }
.pager-count{
  flex:1 0 100%; width:100%;
  margin:0; text-align:center;
  font-size:.85rem; color:var(--text-dim); letter-spacing:.01em;
}

/* =========================================================================
   MENU CARDS STAY INSIDE THE WINDOW
   js/app.js placeDropdown() sets --dd-shift (sideways nudge) and max-height
   when a menu opens. Cards keep three columns and shrink to the window width.
   ========================================================================= */
.dn-dropdown{ transform:translateX(calc(-50% + var(--dd-shift, 0px))) translateY(6px); }
.desktop-nav > .dn-item.open .dn-dropdown{ transform:translateX(calc(-50% + var(--dd-shift, 0px))) translateY(0); }
.dn-item.resources-dropdown .dn-dropdown,
.more-dropdown-panel{ transform:translateX(var(--dd-shift, 0px)) translateY(6px); }
.desktop-nav > .dn-item.resources-dropdown.open .dn-dropdown,
.more-dropdown.open .more-dropdown-panel{ transform:translateX(var(--dd-shift, 0px)) translateY(0); }
.dn-dropdown.dn-mega{ width:860px; max-width:calc(100vw - 32px); }
@media (max-width:1300px){
  .dn-dropdown.dn-mega{ width:860px; }
  .dn-mega-grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:640px){ .dn-mega-grid{ grid-template-columns:1fr 1fr; } }
/* short windows: tighter cards before falling back to scrolling */
.dn-dropdown.dn-mega.dd-compact{ padding:16px 22px; }
.dd-compact .dn-mega-title{ margin-bottom:8px; }
.dd-compact .dn-mega-rule{ margin-bottom:10px; }
.dd-compact .dn-mega-grid{ gap:8px 22px; }
.dd-compact .dn-mega-item{ gap:5px; padding:6px 8px; }
.dd-compact .dn-mega-item p{ font-size:.75rem; line-height:1.3; }

/* =========================================================================
   LANGUAGE FLAGS: two overlapping round flags per language
   English: UK + Ireland · Arabic: Saudi Arabia + UAE · French: France + Canada
   · Spanish: Spain + United States (flag images from flag-icons, MIT licence,
   assets/flags/). The round button shows the pair for the current language.
   ========================================================================= */
.flag-pair{ display:inline-flex; align-items:center; flex:none; }
.flag-pair img{
  width:var(--fp-size, 20px); height:var(--fp-size, 20px); border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 0 0 1.5px var(--surface), 0 1px 3px rgba(10, 14, 40, .18);
}
.flag-pair img + img{ margin-inline-start:calc(var(--fp-size, 20px) * -0.32); }
.lang-current{ overflow:visible; }
.lang-current .flag-pair{ display:none; --fp-size:21px; }
html[lang="en"] .lang-current .fp-en,
html[lang="es"] .lang-current .fp-es,
html[lang="ar"] .lang-current .fp-ar,
html[lang="fr"] .lang-current .fp-fr{ display:inline-flex; }
.lang-menu button .flag-pair{ --fp-size:18px; margin-inline-end:10px; }
.lang-menu{ min-width:178px; }
/* keep the first flag on the reading-start side in Arabic too */
html[dir="rtl"] .flag-pair{ flex-direction:row; }

/* =========================================================================
   THEME BUTTON: coloured icon to sit with the clover and flag circles
   (gold sun in light theme, indigo moon in dark theme)
   ========================================================================= */
.theme-toggle svg{ width:21px; height:21px; }
.theme-toggle .icon-sun circle{ fill:#FFC53D; stroke:#F2A10C; stroke-width:1.6; }
.theme-toggle .icon-sun path{ stroke:#F2A10C; stroke-width:2.2; }
.theme-toggle .icon-moon path{ fill:#AEB7FF; stroke:#8F9BFF; stroke-width:1.4; }
.theme-toggle:hover{ transform:rotate(20deg); }
.theme-toggle:hover .icon-sun circle{ fill:#FFB703; }
.theme-toggle:hover .icon-moon path{ fill:#C3CAFF; }
/* compact cards: icon beside the name, and four columns where there is room */
.dd-compact .dn-mega-item{ display:grid; grid-template-columns:22px 1fr; column-gap:10px; row-gap:2px; align-items:start; }
.dd-compact .dn-mega-icon{ grid-row:1 / span 2; margin-top:1px; }
@media (min-width:1100px){
  .dn-dropdown.dn-mega.dd-compact{ width:1060px; }
  .dd-compact .dn-mega-grid{ grid-template-columns:repeat(4, 1fr); }
}
/* the older single-flag rules match "flag-pair" too: undo their clipping */
.lang-menu button span.flag-pair, .lang-current span.flag-pair{ width:auto; height:auto; border-radius:0; overflow:visible; }
.lang-menu button span.flag-pair{ display:inline-flex; }

/* =========================================================================
   LANGUAGE FLAGS, split style: one circle divided diagonally, first flag in
   the top-left half, second flag in the bottom-right half, thin white seam
   (replaces the two overlapping circles above)
   ========================================================================= */
span.flag-pair, .lang-menu button span.flag-pair, .lang-current span.flag-pair{
  position:relative; display:inline-block; flex:none;
  width:var(--fp-size, 22px); height:var(--fp-size, 22px);
  border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 1px rgba(10, 14, 40, .12), 0 1px 3px rgba(10, 14, 40, .18);
}
span.flag-pair img, span.flag-pair img + img{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; border-radius:0; box-shadow:none; object-fit:cover;
}
span.flag-pair img + img{ clip-path:polygon(100% 0, 100% 100%, 0 100%); }
span.flag-pair::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:50%;
  background:linear-gradient(to bottom right,
    transparent calc(50% - .7px), rgba(255, 255, 255, .95) calc(50% - .7px),
    rgba(255, 255, 255, .95) calc(50% + .7px), transparent calc(50% + .7px));
}
/* the language button: the split flag fills the whole circle */
.lang-current{ overflow:hidden; }
.lang-current span.flag-pair{ display:none; width:100%; height:100%; box-shadow:none; }
html[lang="en"] .lang-current span.fp-en,
html[lang="es"] .lang-current span.fp-es,
html[lang="ar"] .lang-current span.fp-ar,
html[lang="fr"] .lang-current span.fp-fr{ display:block; }
.lang-menu button span.flag-pair{ --fp-size:22px; margin-inline-end:10px; }
/* centre each flag in its own half (first: top-left, second: bottom-right) */
span.flag-pair img{ transform:translate(-14%, -14%) scale(1.3); }
span.flag-pair img + img{ transform:translate(14%, 14%) scale(1.3); }
/* the split is drawn into one image per language (assets/flags/pair-xx.png):
   show it whole, without the two-image clipping and seam above */
span.flag-pair img, span.flag-pair img + img{ transform:none; clip-path:none; }
span.flag-pair::after{ content:none; }

/* =========================================================================
   10% SMALLER TEXT AND LOGOS (owner request, 3 Nov 2026)
   All text sizes are in rem, so the base size sets them all; the four
   accessibility text-size steps keep their ratios (100/112.5/125/137.5% x 0.9).
   Logos and brand images are scaled with zoom so every breakpoint size
   above shrinks by the same 10%.
   ========================================================================= */
html{ font-size:90%; }
html.a11y-font-1{ font-size:90%; }
html.a11y-font-2{ font-size:101.25%; }
html.a11y-font-3{ font-size:112.5%; }
html.a11y-font-4{ font-size:123.75%; }
.brand .lockup, .footer-brand .lockup, .module-logo .mod-logo-img, .module-logo svg,
.evolve-logo, .pillar-tile .pt-logo, .statement-lockup img, .about-lockup img,
.value-item .value-art, .marquee-track img{ zoom:.9; }

/* =========================================================================
   RESOURCES PAGES: tabs right under the page title, no introduction text
   ========================================================================= */
.res-hero.res-hero-tabs{ padding-top:128px; padding-bottom:26px; }
.res-hero-tabs h1{ margin-bottom:0; }
.res-hero-tabs .res-switch{ margin:20px 0 0; }
.res-hero-tabs + .section-pad{ padding-top:18px; }

/* =========================================================================
   ABOUT PAGE: title only above the photo, photo as a shorter banner
   ========================================================================= */
.about-top{ padding-bottom:0; }
.about-top h1{ margin-bottom:0; }
.about-hero-photo{ aspect-ratio:21/8; max-height:420px; margin:26px 0 8px; }
.about-hero-photo img{ object-position:center 42%; }
@media (max-width:640px){ .about-hero-photo{ aspect-ratio:16/9; } }

/* =========================================================================
   ABOUT PAGE: "Our Philosophy" and "Our Core Values", two equal sections
   of icon cards (lift, accent line and icon tilt on hover; fade in on scroll)
   ========================================================================= */
.pv-section{ margin-top:46px; }
.article-body .pv-section h2{ margin:0 0 4px; }
.article-body .pv-sub{ margin:0 0 18px; color:var(--text-dim); }
.pv-grid{ display:grid; gap:18px; }
.pv-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.pv-grid-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pv-card{
  position:relative; overflow:hidden;
  padding:24px 22px 22px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border);
  transition:transform .35s var(--ease, ease), box-shadow .35s ease, border-color .35s ease;
}
.pv-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  transform:scaleX(0); transform-origin:left center; transition:transform .45s ease;
}
html[dir="rtl"] .pv-card::before{ transform-origin:right center; }
.pv-card:hover, .pv-card:focus-within{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:transparent; }
.pv-card:hover::before, .pv-card:focus-within::before{ transform:scaleX(1); }
.pv-icon{
  width:48px; height:48px; border-radius:14px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s ease;
}
.pv-icon svg{ width:24px; height:24px; }
.pv-blue{ background:rgba(10, 15, 180, .08); color:var(--brand-blue-ink); }
.pv-green{ background:rgba(63, 143, 58, .12); color:var(--brand-green-ink); }
[data-theme="dark"] .pv-blue{ background:rgba(140, 150, 255, .14); color:#c3caff; }
[data-theme="dark"] .pv-green{ background:rgba(110, 200, 110, .14); color:#9be29b; }
.pv-card:hover .pv-icon{ transform:rotate(-8deg) scale(1.08); }
.pv-card .mv-label{
  display:block; margin-bottom:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-green-ink);
}
.article-body .pv-card h3{ font-size:1rem; line-height:1.35; margin:0 0 8px; color:var(--text); }
.article-body .pv-card p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--text-dim); }
.article-body .pv-grid-2 .pv-card p{ font-size:1rem; color:var(--text); }
@media (max-width:900px){ .pv-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .pv-grid-2, .pv-grid-4{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .pv-card, .pv-card::before, .pv-icon{ transition:none; } .pv-card:hover{ transform:none; } }
.a11y-reduce-motion .pv-card, .a11y-reduce-motion .pv-icon{ transition:none; }
.a11y-reduce-motion .pv-card:hover{ transform:none; }
/* equal treatment: values use the same two-column cards as mission/vision,
   and the photo lines up with the text column below it */
.pv-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.about-hero-photo{ max-width:74ch; margin-inline:auto; aspect-ratio:16/7; max-height:none; }
.about-top .container{ max-width:calc(74ch + 64px); }
@media (max-width:560px){ .pv-grid-4{ grid-template-columns:1fr; } }

/* =========================================================================
   LANGUAGE BUTTON: language icon (no flags) with a "Select language" label
   on hover, matching the clover button's label
   ========================================================================= */
.lang-current{ overflow:visible; position:relative; color:var(--brand-blue-ink); }
.lang-current .lang-icon{ width:21px; height:21px; display:block; transition:transform .25s ease; }
.lang-current:hover .lang-icon{ transform:scale(1.08); }
[data-theme="dark"] .lang-current{ color:#aeb7ff; }
.lang-current::after{
  content:attr(data-tip);
  position:absolute; top:calc(100% + 9px); left:50%;
  transform:translate(-50%, -4px);
  white-space:nowrap; pointer-events:none;
  padding:6px 11px; border-radius:8px;
  background:var(--text); color:var(--bg);
  font-size:.78rem; font-weight:600; line-height:1.2; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(10, 14, 40, .18);
  opacity:0; transition:opacity .18s ease, transform .18s ease; z-index:60;
}
.lang-current:hover::after, .lang-current:focus-visible::after{ opacity:1; transform:translate(-50%, 0); }
.lang-switch.open .lang-current::after{ opacity:0; }
@media (hover:none){ .lang-current::after{ display:none; } }
/* keep the label inside the window at the right-hand edge */
.topbar-actions .lang-current::after{ left:auto; right:0; transform:translateY(-4px); }
.topbar-actions .lang-current:hover::after, .topbar-actions .lang-current:focus-visible::after{ transform:none; }
html[dir="rtl"] .topbar-actions .lang-current::after{ right:auto; left:0; }
.lang-menu{ min-width:150px; }

/* =========================================================================
   MODULE, EXPERTISE AND ANALYTICS PAGES (pages with the photo hero)
   - the hero photo always fits in the window, whole picture visible
   - the space between sections is half of what it was
   ========================================================================= */
.module-photo{
  width:min(100%, calc((100vh - 200px) * 0.857)); /* keeps the 3:3.5 shape within the window height */
  min-width:min(100%, 260px); justify-self:center;
}
.route-section:has(.module-hero-grid) > section.section-pad{ padding-top:55px; padding-bottom:55px; }
.route-section:has(.module-hero-grid) > section.section-pad:first-child{ padding-top:120px !important; }
@media (max-width:900px){
  .route-section:has(.module-hero-grid) > section.section-pad{ padding-top:35px; padding-bottom:35px; }
  .route-section:has(.module-hero-grid) > section.section-pad:first-child{ padding-top:100px !important; }
}

/* =========================================================================
   FLOATING BUTTONS on dark backgrounds: white circle, brand-blue icon
   (js/app.js adds .fab-on-dark when the page behind the button is dark)
   ========================================================================= */
.a11y-toggle, .iebot-launcher{ transition:background-color .3s ease, color .3s ease, transform .25s ease; }
.a11y-toggle.fab-on-dark{ background:#fff; color:#0505C5; }
.iebot-launcher.fab-on-dark{ background:#fff; box-shadow:0 10px 26px -12px rgba(0, 0, 0, .55); }
.iebot-launcher.fab-on-dark svg{ stroke:#0505C5; }

/* =========================================================================
   TOP-BAR CIRCLES: one shared hover effect (the icon gently moves forward)
   ========================================================================= */
.more-toggle .more-clover, .theme-toggle svg, .lang-current .lang-icon{ transition:transform .25s ease; }
.theme-toggle:hover{ transform:none; }
.more-toggle:hover .more-clover, .theme-toggle:hover svg, .lang-current:hover .lang-icon{ transform:scale(1.12); }
.more-toggle:hover, .theme-toggle:hover, .lang-current:hover{ background:var(--glass-border); }

/* =========================================================================
   LEADERSHIP AND ADVISORY BOARD CARDS: name and role beside the bottom of
   the photo, introduction text below the photo across the full card width
   ========================================================================= */
.team-card{ display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:18px; row-gap:16px; align-items:end; align-content:start; }
.team-card .team-photo{ grid-column:1; grid-row:1; }
.team-card .team-id{ grid-column:2; grid-row:1; align-self:end; padding-bottom:6px; }
.team-card .team-id h4{ margin:0 0 3px; }
.team-card .team-id .team-role{ margin:0; }
.team-card > p{ grid-column:1 / -1; grid-row:2; align-self:start; margin:0; }
@media (max-width:900px){ .team-card{ flex-direction:initial; } }

/* =========================================================================
   ABOUT PAGE (rebuilt 3 Nov 2026)
   Top in the style of the Careers page; "Our Philosophy" with a round photo
   and "Our Core Values" with a framed photo, as two matching bands.
   ========================================================================= */
.about-hero .cr-hero-visual{ aspect-ratio:5/4; }
.about-hero h1{ margin-bottom:18px; }
.about-hero-lockup{ margin:0 0 30px; }
.about-hero-lockup .statement-lockup img{ height:32px; }
.about-intro{ padding-top:40px; padding-bottom:40px; }
.about-intro .article-body{ padding-top:0; }

.about-pv{ padding-top:64px; padding-bottom:64px; }
.about-pv-grid{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:64px; align-items:center; }
.about-pv-grid-rev{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); }
.about-pv-title{ font-size:clamp(1.8rem, 2.6vw, 2.4rem); line-height:1.15; margin:0 0 6px; }
.about-pv-title{ background:linear-gradient(90deg, var(--text) 0 45%, var(--brand-blue-ink) 75%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.about-pv-sub{ margin:0 0 26px; color:var(--text-dim); font-size:1.02rem; }
.about-pv .pv-grid{ gap:18px; }
.about-pv .pv-stack{ grid-template-columns:1fr; }
.about-pv .pv-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.about-pv .pv-card p{ font-size:.92rem; line-height:1.6; color:var(--text-dim); margin:0; }
.about-pv .pv-stack .pv-card p{ font-size:1rem; color:var(--text); }
.about-pv .pv-card h3{ font-size:1.02rem; line-height:1.35; margin:0 0 8px; color:var(--text); }
.about-pv .pv-stack .pv-card{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:start; }
.about-pv .pv-stack .pv-card .pv-icon{ grid-row:1 / span 2; margin:0; }
.about-pv .pv-stack .pv-card .mv-label{ margin-top:4px; }

/* round photo with a brand ring, like the earlier site */
.about-pv-round{ position:relative; width:min(100%, 440px); aspect-ratio:1; justify-self:center; }
.about-pv-round::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--brand-blue), var(--brand-green), transparent 62%, transparent);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation:pvSpin 26s linear infinite;
}
.about-pv-round img{ position:relative; width:100%; height:100%; object-fit:cover; object-position:42% center; border-radius:50%; box-shadow:var(--shadow-card); }
@keyframes pvSpin{ to{ transform:rotate(360deg); } }

/* framed photo with an offset backing panel, like the earlier site */
.about-pv-framed{ position:relative; width:min(100%, 460px); justify-self:center; margin:18px 0 0 18px; }
.about-pv-framed::before{
  content:""; position:absolute; inset:18px auto auto -18px; width:100%; height:100%;
  border-radius:24px; background:linear-gradient(135deg, var(--brand-blue), #0a1a4a);
}
.about-pv-framed img{ position:relative; display:block; width:100%; aspect-ratio:1 / 1.02; object-fit:cover; border-radius:24px; border:6px solid var(--surface); box-shadow:var(--shadow-card); }
html[dir="rtl"] .about-pv-framed{ margin:18px 18px 0 0; }
html[dir="rtl"] .about-pv-framed::before{ inset:18px -18px auto auto; }

@media (max-width:960px){
  .about-pv-grid, .about-pv-grid-rev{ grid-template-columns:1fr; gap:40px; }
  .about-values .about-pv-media{ order:2; }
  .about-pv-round{ width:min(80%, 360px); }
}
@media (max-width:560px){ .about-pv .pv-grid-4{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .about-pv-round::before{ animation:none; } }
.a11y-reduce-motion .about-pv-round::before{ animation:none; }

/* =========================================================================
   TOP BAR: the clover circle keeps the same look when its menu is open
   (no blue fill), like the theme and language circles
   ========================================================================= */
.more-dropdown.open .more-toggle{ background:var(--glass-border); border-color:var(--glass-border); color:var(--text); }

/* =========================================================================
   MENU CARDS: one roomy layout for every top-bar menu (Platform, Expertise,
   Analytics, Resources, Company): icon beside the name, three columns,
   generous spacing. Replaces the tight "compact" layout.
   ========================================================================= */
.dn-dropdown.dn-mega, .dn-dropdown.dn-mega.dd-compact{ width:960px; padding:24px 26px 18px; }
.dn-mega-grid, .dd-compact .dn-mega-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px 18px; }
.dn-mega-item, .dd-compact .dn-mega-item{
  display:grid; grid-template-columns:24px minmax(0, 1fr); column-gap:14px; row-gap:4px; align-items:start; align-content:start;
  padding:12px 14px; border-radius:12px;
}
.dn-mega-item .dn-mega-icon, .dd-compact .dn-mega-icon{ grid-row:1 / span 2; width:24px; height:24px; margin-top:1px; }
.dn-mega-item h5, .dd-compact .dn-mega-item h5{ font-size:.95rem; line-height:1.3; margin:0; }
.dn-mega-item p, .dd-compact .dn-mega-item p{ font-size:.8rem; line-height:1.5; margin:0; }
.dn-mega-title, .dd-compact .dn-mega-title{ margin-bottom:12px; }
.dn-mega-rule, .dd-compact .dn-mega-rule{ margin-bottom:12px; }
@media (max-width:1100px){ .dn-dropdown.dn-mega, .dn-dropdown.dn-mega.dd-compact{ width:840px; } }
/* About page: no subtitle under the band headings, no lockup in the top area */
.about-pv-title{ margin-bottom:22px; }
.about-hero h1{ margin-bottom:28px; }

/* =========================================================================
   WHITEPAPER PAGES: small "Download Whitepaper" capsule in the info row at
   the top (opens the same form as the big button at the bottom)
   ========================================================================= */
.article-meta-row .wp-capsule{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px 6px 12px; border-radius:999px; border:0; cursor:pointer;
  background:var(--brand-blue); color:#fff;
  font:inherit; font-size:.82rem; font-weight:700; line-height:1.2; white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(5, 5, 197, .6);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.article-meta-row .wp-capsule::before{
  content:""; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.article-meta-row .wp-capsule:hover{ transform:translateY(-1px); background:var(--brand-blue-deep, #0303a0); box-shadow:0 10px 22px -10px rgba(5, 5, 197, .75); }
.article-meta-row .wp-capsule:focus-visible{ outline:2px solid var(--brand-green); outline-offset:2px; }

/* =========================================================================
   HOME PAGE "What Infinite Excellence means in practice": gently animated
   artworks (slow float, soft glow, a slowly turning dashed ring; the art
   lifts a little on hover). Off when the visitor asks for less motion.
   ========================================================================= */
.value-item .value-art{ position:relative; isolation:isolate; }
.value-item .value-art::before{
  content:""; position:absolute; inset:8%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(104, 189, 104, .28), rgba(104, 189, 104, 0) 70%);
  animation:artGlow 5s ease-in-out infinite;
}
.value-item .value-art::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
  border:1.5px dashed rgba(104, 189, 104, .45);
  animation:artSpin 22s linear infinite;
}
.value-item .value-art img{ animation:artFloat 6s ease-in-out infinite; transition:transform .35s ease; }
.value-item:nth-child(2) .value-art img, .value-item:nth-child(2) .value-art::before{ animation-delay:-2s; }
.value-item:nth-child(3) .value-art img, .value-item:nth-child(3) .value-art::before{ animation-delay:-4s; }
.value-item:nth-child(2) .value-art::after{ animation-direction:reverse; }
.value-item:hover .value-art img{ animation-play-state:paused; transform:translateY(-4px) scale(1.07); }
@keyframes artFloat{ 0%, 100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-7px) rotate(-1.5deg); } }
@keyframes artGlow{ 0%, 100%{ opacity:.55; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.06); } }
@keyframes artSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .value-item .value-art img, .value-item .value-art::before, .value-item .value-art::after{ animation:none; } }
.a11y-reduce-motion .value-item .value-art img, .a11y-reduce-motion .value-item .value-art::before, .a11y-reduce-motion .value-item .value-art::after{ animation:none; }

/* =========================================================================
   MENU ICONS IN THE EXACT BRAND COLOURS (light theme): blue #0505C5,
   green #68BD68; "Explore all ..." links in brand blue. In the dark theme
   the blue icons stay white for contrast and green stays #68BD68.
   ========================================================================= */
.dn-mega-icon.ic-a{ color:#0505C5; }
.dn-mega-icon.ic-b{ color:#68BD68; }
[data-theme="dark"] .dn-mega-icon.ic-a{ color:#fff; }
[data-theme="dark"] .dn-mega-icon.ic-b{ color:#68BD68; }
.dn-dropdown .dn-foot a, .dn-dropdown .nav-submenu-foot a{ color:#0505C5; }
[data-theme="dark"] .dn-dropdown .dn-foot a{ color:var(--brand-blue-ink); }

/* =========================================================================
   CARA: window 10% wider and taller (380 -> 418px, 600 -> 660px), and the
   light-green suggestion buttons smaller so they sit on one row (they scroll
   sideways in the rare case a language's labels are longer)
   ========================================================================= */
.iebot-panel{ width:min(418px, calc(100vw - 44px)); height:min(660px, calc(100vh - 120px)); max-height:min(660px, calc(100vh - var(--fab-b) - var(--cta-lift) - var(--fab) - 24px)); }
@media (max-width:480px){ .iebot-panel{ width:calc(100vw - 28px); } }
.iebot-quick{ flex-wrap:nowrap; gap:4px; padding:0 9px 10px; overflow-x:auto; scrollbar-width:none; }
.iebot-quick::-webkit-scrollbar{ display:none; }
.iebot-chip{ flex:none; font-size:.66rem; padding:5px 8px; white-space:nowrap; }
@media (max-width:480px){ .iebot-quick{ padding:0 8px 10px; gap:3px; } .iebot-chip{ font-size:.62rem; padding:4px 7px; } }

/* ===== Interoperability & accreditation logos (Platform page), Nov 2026 =====
   Markup: components/Standards.jsx. Logos sit on white tiles in both themes. */
.std-band{ scroll-margin-top:80px; }
.lg-grid{ display:grid; gap:14px; }
.lg-tile{
  background:#fff; border:1px solid rgba(10,15,60,.09); border-radius:14px;
  height:84px; display:flex; align-items:center; justify-content:center; padding:12px 16px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lg-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(5,5,197,.45); }
.lg-tile img{ display:block; max-width:100%; max-height:46px; width:auto; height:auto; object-fit:contain; zoom:1; }
[data-theme="dark"] .lg-tile{ border-color:transparent; }
.ix-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:56px; align-items:stretch; }
.ix-wrap .section-head{ margin-bottom:6px; }
.ix-photo{ border-radius:24px; overflow:hidden; min-height:420px; background:#03037E center/cover no-repeat; position:relative; }
.ix-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,5,197,0) 55%,rgba(5,5,197,.6)); }
.ix-photo span{ position:absolute; inset-inline:22px; bottom:20px; z-index:1; color:#fff; font-weight:700; font-size:1.05rem; line-height:1.35; }
.ix-group h3{ font-size:1.05rem; color:var(--brand-green-ink); margin:34px 0 14px; font-weight:700; }
.ix-sys{ grid-template-columns:repeat(3,1fr); }
.ix-std{ grid-template-columns:repeat(5,1fr); }
.ix-std .lg-tile{ height:72px; }
.ix-std .lg-tile img{ max-height:42px; }
.acc-grid{ grid-template-columns:repeat(7,1fr); }
.acc-grid .lg-tile{ height:92px; padding:10px 12px; }
.acc-grid .lg-tile img{ max-height:56px; }
.acc-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:40px; }
.acc-badges > span{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); font-weight:600; font-size:.92rem; color:var(--text);
}
.acc-badges svg{ flex:none; }

@media (max-width:1100px){ .acc-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){
  .ix-wrap{ grid-template-columns:1fr; }
  .ix-photo{ display:none; }
  .ix-sys{ grid-template-columns:repeat(2,1fr); }
  .ix-std{ grid-template-columns:repeat(3,1fr); }
  .acc-grid{ grid-template-columns:repeat(3,1fr); }
  .lg-grid{ gap:10px; }
  .lg-tile, .ix-std .lg-tile{ height:68px; padding:10px; }
  .acc-grid .lg-tile{ height:76px; padding:8px; }
  .lg-tile img, .ix-std .lg-tile img{ max-height:38px; }
  .acc-grid .lg-tile img{ max-height:48px; }
}

/* ===== Pictures never stretch (4 Nov 2026) =====
   Safari squashed the "ONE Platform · Infinite Potential" lockup: it was given a
   fixed height while its width could shrink. The lockup is now sized by width
   (height follows the picture), and every picture keeps its shape inside its box.
   Rules that crop photos on purpose (object-fit:cover on a class) still win. */
img{ object-fit:contain; }
.statement-lockup img{ height:auto; width:365px; max-width:100%; flex:none; }
@media (max-width:820px){ .statement-lockup img{ height:auto; width:300px; } }
@media (max-width:520px){ .statement-lockup img{ height:auto; width:235px; } }
.statement-lockup .logo-plate{ min-width:0; }

/* ===== Leadership welcome messages (link on each card, pop-up) ===== */
.wm-row{ display:contents; }
.wm-link{
  grid-column:1 / -1; justify-self:start; margin-top:-2px; padding:0; border:0; background:none; font:inherit; font-weight:600; font-size:.92rem;
  color:var(--brand-blue-ink, #0505C5); cursor:pointer;
}
[data-theme="light"] .wm-link{ color:#0505C5; }
.wm-link::after{ content:" →"; }
[dir="rtl"] .wm-link::after{ content:" ←"; }
.wm-link:hover{ text-decoration:underline; }
.wm-dialog{
  width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; border:0; border-radius:24px;
  background:var(--surface); color:var(--text); box-shadow:0 40px 90px -30px rgba(0,0,40,.6); overflow:auto;
}
.wm-dialog::backdrop{ background:rgba(5,7,30,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.wm-dialog[open]{ animation:wmIn .28s var(--ease); }
@keyframes wmIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .wm-dialog[open]{ animation:none; } }
body.a11y-reduce-motion .wm-dialog[open]{ animation:none; }
html:has(.wm-dialog[open]){ overflow:hidden; }
.wm-inner{ position:relative; padding:34px 36px 30px; }
.wm-inner::before{ content:""; position:absolute; inset:0 0 auto 0; height:6px; background:linear-gradient(90deg,#0505C5,#68BD68); }
.wm-close{
  position:absolute; top:16px; inset-inline-end:16px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.wm-close svg{ width:18px; height:18px; }
.wm-close:hover{ background:var(--bg-alt); }
.wm-head{ display:flex; align-items:center; gap:18px; padding-inline-end:40px; }
.wm-head img{ width:84px; height:84px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 4px rgba(104,189,104,.35); }
.wm-eyebrow{ margin:0 0 4px; font-size:.72rem; letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--brand-green-ink); }
.wm-head h2{ margin:0; font-size:1.45rem; line-height:1.25; }
.wm-body{ position:relative; margin-top:18px; padding-top:30px; }
.wm-body .wm-q{ position:absolute; top:0; inset-inline-start:-4px; width:34px; height:34px; color:rgba(5,5,197,.16); }
[data-theme="dark"] .wm-body .wm-q{ color:rgba(122,122,247,.18); }
.wm-body p{ position:relative; margin:0 0 14px; font-size:1.02rem; line-height:1.75; color:var(--text); }
.wm-sign{ display:flex; flex-direction:column; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.wm-sign strong{ font-size:1rem; }
.wm-sign span{ font-size:.86rem; color:var(--text-dim); }
@media (max-width:600px){
  .wm-inner{ padding:28px 22px 24px; }
  .wm-head img{ width:64px; height:64px; }
  .wm-head h2{ font-size:1.2rem; }
}

/* Leadership/Advisory cards: name on one line, role on the line below */
.team-card .team-id h4{ white-space:nowrap; }
.team-card .team-id .team-role{ display:block; white-space:nowrap; }
@media (max-width:359px){ .team-card .team-id h4, .team-card .team-id .team-role{ white-space:normal; } }

/* ===== Smooth page changes (5 Nov 2026) =====
   1. The browser keeps the old page on screen and cross-fades to the new one
      (Chrome, Edge, Safari 18.2+; other browsers just change page as before).
      The top bar has its own name, so it stays still instead of fading.
   2. Content that is on screen when a page opens is shown at once; the fade-in
      only plays for content further down, as it scrolls into view (js/app.js).
   3. Visitors using Spanish, Arabic or French: the page stays invisible for the
      moment it takes to translate it (html.i18n-wait, set in <head>), then fades
      in, instead of flashing up in English first. */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.24s; animation-timing-function:ease; }
.topbar{ view-transition-name:ie4-topbar; }
::view-transition-group(ie4-topbar){ animation-duration:0s; }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } }

html:not(.rv) .reveal{ opacity:1; transform:none; clip-path:none; transition:none; }
html.rv-instant .reveal{ transition:none !important; }

body{ transition:opacity .2s ease; }
html.i18n-wait body{ opacity:0; transition:none; }

/* ===== Share row on article and whitepaper pages (5 Nov 2026) =====
   Sits at the right end of the date / type / reading-time line; on narrow
   screens it moves to its own line under it. */
.article-meta-row .article-share{ margin-inline-start:auto; gap:8px; position:relative; }
.article-meta-row .article-share .share-label{ display:inline; font-size:.8rem; color:var(--text-faint); margin-inline-end:4px; }
.article-share .share-done{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; display:block; white-space:nowrap;
  font-size:.76rem; font-weight:600; color:#fff; background:var(--brand-green-ink); padding:5px 10px; border-radius:8px;
  opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s; pointer-events:none;
}
.article-share .share-done:empty{ padding:0; }
.article-share .share-done.on{ opacity:1; transform:none; }
.article-share .nd-share-btn{ color:var(--text-dim); }
[data-theme="light"] .article-share .nd-share-btn:hover{ background:#0505C5; color:#fff; }
@media (max-width:700px){ .article-meta-row .article-share{ margin-inline-start:0; flex-basis:100%; } }

/* Cara: the sources under each answer (5 Nov 2026) */
.iebot-src{ margin-top:8px; padding-top:7px; border-top:1px solid rgba(120,130,170,.25); font-size:.74rem; line-height:1.5; opacity:.85; }
.iebot-src > span{ font-weight:700; margin-inline-end:2px; }
.iebot-src .iebot-link{ font-weight:600; }
/* the WhatsApp share button is a round icon button, not a phone-number link */
a.nd-share-btn[href*="wa.me"]{ display:inline-flex; }

/* News & article cards: the type (Product release, Company news...) on its own
   line, date and place together on the line below (owner request, 6 Nov 2026) */
.mc-meta .mc-tag{ flex-basis:100%; }

/* Admin content can be written in any language: each paragraph takes its own
   reading direction from its text, so Arabic text shown on an English page (or
   English text on an Arabic page) still reads and aligns the right way. */
.mc-card h3, .mc-card p, .mc-meta, .res-card h3, .res-card p, .res-tag, .nd-main h1, .nd-sub, .nd-body p, .nd-body li, .nd-body h2, .nd-body h3,
.article-body p, .article-body li, .team-card p, .team-id h4, .team-role, .wm-head h2, .wm-body p, .cr-face strong, .cr-face span{ unicode-bidi:plaintext; }