/* ============================================================
   Tamkeen Center — responsive marketing site
   Design direction: light "futurist" glassmorphism
   Recreated from design_handoff_tamkeen_landing/source/Tamkeen-Landing-Futurist.html
   ============================================================ */

:root{
  --blue:#374e9d; --blue-glow:#5b7bd6; --blue-deep:#2c3f7c;
  --orange:#ec6813; --orange-glow:#ff9142; --orange-deep:#c2530f;
  --ink:#f4f6fb; --panel:#ffffff; --line:rgba(55,78,157,.18);
  --text-dim:#54608a; --text-main:#101830;
  --navy:#0d1430; --navy-line:rgba(120,145,220,.28);

  --wrap:1280px;
  --pad:32px;
  --radius-card:20px;
  --radius-btn:12px;

  --font-head-fr:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --font-body-fr:'Inter','Segoe UI',system-ui,sans-serif;
  --font-head-ar:'Noto Kufi Arabic','Segoe UI',system-ui,sans-serif;
  --font-body-ar:'Noto Sans Arabic','Segoe UI',system-ui,sans-serif;

  --font-head:var(--font-head-fr);
  --font-body:var(--font-body-fr);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:hidden}

body{
  margin:0;
  background:var(--ink);
  color:var(--text-main);
  position:relative;
  overflow-x:hidden;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

body.body-fr{--font-head:var(--font-head-fr);--font-body:var(--font-body-fr)}
body.body-ar{--font-head:var(--font-head-ar);--font-body:var(--font-body-ar)}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;margin:0;line-height:1.15}
p{margin:0}

a{color:var(--orange-deep);text-decoration:none}
a:hover{color:var(--orange)}

img{max-width:100%;display:block}

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

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:100;
  background:var(--orange);color:#fff;padding:10px 18px;border-radius:10px;
  font:600 13px var(--font-head);transform:translateY(-160%);transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);color:#fff}
[dir="rtl"] .skip-link{left:auto;right:8px}

/* ---------- Background blobs ---------- */
.blob{
  position:fixed;border-radius:50%;filter:blur(90px);z-index:-1;opacity:.55;pointer-events:none;
}
.blob-1{width:520px;height:520px;top:-160px;left:-120px;
  background:radial-gradient(circle,var(--orange) 0%,transparent 72%);
  animation:float1 22s ease-in-out infinite}
.blob-2{width:600px;height:600px;top:20%;right:-200px;
  background:radial-gradient(circle,var(--blue) 0%,transparent 72%);
  animation:float2 26s ease-in-out infinite}
.blob-3{width:480px;height:480px;bottom:-180px;left:30%;
  background:radial-gradient(circle,var(--orange-glow) 0%,transparent 72%);
  opacity:.4;animation:float3 30s ease-in-out infinite}

@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,60px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-50px)}}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 6px var(--orange)}50%{opacity:.5;box-shadow:0 0 14px var(--orange)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}

/* prevent grid/flex blow-out from long words */
.grid-stats > *,.grid-cards > *,.testi-grid > *,.contact-3col > *,.offices > *,.hero > *,.process > *{min-width:0}

/* ---------- Vertical rhythm system ---------- */
/* Section padding — breathing room between major sections */
.section-pad{padding-block:48px 56px}

/* Headings */
.section-h2{font-size:30px;margin:12px 0 20px;max-width:600px}

/* Eyebrow → heading — tight 6px */
.eyebrow + .section-h2,.eyebrow + h2{margin-top:6px}

/* Sub-block separators within a section — generous 40px */
.about-top + .section-h2{margin-top:36px}
.grid-mv + .section-h2{margin-top:40px}

/* Subtitle */
.section-sub{font-size:15px;line-height:1.7;color:var(--text-dim);max-width:68ch;margin:0 0 20px}

/* Heading/subtitle → grid — 20px */
.section-h2 + .grid-mv,.section-sub + .grid-services,.grid-prog{margin-top:20px}

.hr-glow{height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);margin:0;border:0}

/* ---------- Page hero (sub-page banners) ---------- */
.page-hero{
  padding:56px 0 56px;
  background:var(--ink);
  color:var(--text-main);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:280px;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(55,78,157,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(55,78,157,.06) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.page-hero::after{
  content:'';position:absolute;top:-50%;right:-10%;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,104,19,.12) 0%,transparent 70%);
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.page-hero h1{font-size:clamp(28px,4vw,42px);color:var(--text-main);max-width:640px;margin:0 0 10px;text-align:left}
.page-hero p{font-size:16px;color:var(--text-dim);max-width:520px;line-height:1.7;text-align:left}
.page-hero .breadcrumb{
  display:flex;gap:8px;align-items:center;
  font:500 13px var(--font-head);color:var(--text-dim);
  margin-bottom:16px;text-align:left;
}
.page-hero .breadcrumb a{color:var(--orange-deep);text-decoration:none;transition:color .2s}
.page-hero .breadcrumb a:hover{color:var(--orange)}
.page-hero .breadcrumb .sep{opacity:.4}
.page-hero .eyebrow{text-align:left;margin-bottom:8px}
@media(max-width:768px){.page-hero h1{font-size:26px}.page-hero{padding:92px 0 32px}}

.eyebrow{
  font:600 11px var(--font-head);
  text-transform:uppercase;letter-spacing:.18em;color:var(--orange-deep);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.eyebrow > span{min-width:0;overflow-wrap:anywhere}
.eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);flex:0 0 auto;
  animation:pulseDot 2.4s ease-in-out infinite;
}
[dir="rtl"] .eyebrow{letter-spacing:0}

.shimmer-text{
  background:linear-gradient(90deg,var(--orange-deep) 0%,var(--blue-deep) 35%,var(--orange-deep) 70%,var(--blue-deep) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
  display:inline-block;
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

/* Arabic script is taller (diacritics) — needs breathing room */
[dir="rtl"] h1,[dir="rtl"] h2{line-height:1.7}
[dir="rtl"] .hero h1{line-height:1.7}

/* ---------- HUD corner brackets ---------- */
.hud-corner{position:absolute;width:22px;height:22px;pointer-events:none;z-index:2}
.hud-corner.tl{top:-1px;left:-1px;border-top:2px solid var(--orange);border-left:2px solid var(--orange);border-radius:20px 0 0 0}
.hud-corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue);border-radius:0 0 20px 0}
[dir="rtl"] .hud-corner.tl{left:auto;right:-1px;border-left:0;border-right:2px solid var(--orange);border-radius:0 20px 0 0}
[dir="rtl"] .hud-corner.br{right:auto;left:-1px;border-right:0;border-left:2px solid var(--blue);border-radius:0 0 0 20px}

/* ---------- Glass panel ---------- */
.panel{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-card);
  position:relative;
  box-shadow:0 12px 32px -14px rgba(20,30,70,.22);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.panel:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px -16px rgba(20,30,70,.3);
  border-color:rgba(236,104,19,.35);
}
.panel::before{
  content:'';position:absolute;top:16px;left:16px;width:8px;height:8px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 10px var(--orange);transition:box-shadow .25s ease;z-index:2;
}
.panel:hover::before{box-shadow:0 0 16px var(--orange)}
[dir="rtl"] .panel::before{left:auto;right:16px}

.panel-topbar{
  position:absolute;top:0;left:20px;right:20px;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  border-radius:0 0 4px 4px;opacity:0;transition:opacity .25s ease;
}
.panel:hover .panel-topbar{opacity:1}

/* ---------- Buttons ---------- */
.btn-f{
  font:600 13px var(--font-head);
  text-transform:uppercase;letter-spacing:.06em;
  padding:15px 30px;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--orange);
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text-main);cursor:pointer;border-radius:var(--radius-btn);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  position:relative;text-align:center;
}
.btn-f.solid{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 8px 22px -8px var(--orange)}
.btn-f:hover{transform:translateY(-2px);box-shadow:0 6px 16px -4px rgba(236,104,19,.5);color:var(--text-main)}
.btn-f.solid:hover{box-shadow:0 12px 26px -8px var(--orange);color:#fff}
.btn-f:active{transform:translateY(0)}
.btn-f.on-navy{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 8px 22px -8px rgba(0,0,0,.5)}
.btn-f.on-navy:hover{color:#fff;box-shadow:0 12px 28px -8px rgba(0,0,0,.6)}
[dir="rtl"] .btn-f{text-transform:none;letter-spacing:0}

/* ---------- Language pills ---------- */
.lang-pill{
  font:600 12px var(--font-head);
  border:1px solid rgba(55,78,157,.3);background:transparent;color:var(--text-dim);
  padding:6px 12px;min-height:32px;border-radius:999px;cursor:pointer;transition:.15s;
}
.lang-pill:hover{border-color:var(--blue)}
.lang-pill.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.lang-switch{display:flex;gap:6px}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(244,246,251,.6);
  border-bottom:1px solid rgba(255,255,255,.5);
}
body.menu-open{overflow:hidden}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;min-width:0}
.nav-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.nav-logo img{height:54px;width:auto;max-width:56vw;background:transparent;border-radius:0;padding:0}

.nav-right{display:flex;gap:24px;align-items:center}
.nav-cta-compact{display:none}
.nav-links{display:flex;gap:24px;align-items:center;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
[dir="rtl"] .nav-links{text-transform:none;letter-spacing:0}
.nav-links a{color:var(--text-dim);position:relative;padding:4px 2px}
.nav-links a:hover{color:var(--text-main)}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--blue));transition:width .25s ease;
}
[dir="rtl"] .nav-links a::after{left:auto;right:0}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--orange);font-weight:600}
.nav-links a.active::after{width:100%;background:var(--orange)}

/* Hamburger */
.nav-toggle{
  display:none;
  width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.5);cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto;
}
.nav-toggle span{
  display:block;width:20px;height:2px;background:var(--text-main);position:relative;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:var(--text-main);
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

/* Mobile drawer */
.nav-drawer{
  position:fixed;inset:0 0 0 auto;width:min(360px,86vw);
  background:rgba(244,246,251,.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-left:1px solid rgba(255,255,255,.6);
  box-shadow:-24px 0 60px -30px rgba(20,30,70,.4);
  transform:translateX(105%);transition:transform .28s ease;
  z-index:40;padding:88px 28px 32px;display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;
}
[dir="rtl"] .nav-drawer{inset:0 auto 0 0;border-left:0;border-right:1px solid rgba(255,255,255,.6);
  transform:translateX(-105%);box-shadow:24px 0 60px -30px rgba(20,30,70,.4)}
body.menu-open .nav-drawer{transform:translateX(0)}
.nav-drawer a{
  color:var(--text-main);font:500 16px var(--font-head);
  text-transform:uppercase;letter-spacing:.04em;
  padding:14px 6px;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center;
}
[dir="rtl"] .nav-drawer a{text-transform:none;letter-spacing:0}
.nav-drawer a.active{color:var(--orange);font-weight:700}
.nav-drawer .lang-switch{margin:20px 0 8px}
.nav-drawer .lang-pill{padding:10px 18px;min-height:44px;font-size:13px}
.nav-drawer .btn-f{width:100%;margin-top:8px}

.nav-scrim{
  position:fixed;inset:0;background:rgba(13,20,48,.32);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;z-index:35;
}
body.menu-open .nav-scrim{opacity:1;visibility:visible}

/* ---------- Image placeholder slots ---------- */
.img-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:18px;
  background:linear-gradient(135deg,rgba(55,78,157,.16),rgba(236,104,19,.16));
  border-radius:14px;color:var(--blue-deep);
  font:600 11.5px var(--font-head);letter-spacing:.02em;
  position:relative;overflow:hidden;width:100%;height:100%;min-height:120px;
}
.img-slot svg{width:26px;height:26px;opacity:.5;stroke:var(--blue-deep)}
.img-slot span{max-width:220px;opacity:.85}
.card-imgwrap{overflow:hidden;border-radius:14px}
.card-img{transition:transform .4s ease;filter:saturate(1.05)}
.card-imgwrap:hover .card-img{transform:scale(1.06)}

/* ---------- Hero ---------- */
.hero{
  padding-block:96px 72px;
  display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;
}
.hero h1{font-size:clamp(38px,5.5vw,66px);line-height:1.15;margin:20px 0 24px}
.hero .lede{max-width:480px;font-size:16px;line-height:1.7;color:var(--text-dim);margin:0 0 32px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.photo-panel{padding:6px;aspect-ratio:4/3}
.photo-panel .img-slot{border-radius:14px}

/* ---------- Hero visual v39: orbit system ----------
   Cards orbit ON a circular path around the central logo.
   Each card is wrapped in a rotating container that spins it
   around the center; a counter-rotation keeps the card upright. */
.hero-visual{position:relative;padding:12px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;box-shadow:none}
.orb-stage{position:relative;width:100%;max-width:440px;aspect-ratio:1/1}
/* decorative SVG concentric circles */
.orb-rings{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.orb-ring{stroke:rgba(236,104,19,.4)}
.or2{stroke:rgba(91,123,214,.3)}
.or3{stroke:rgba(236,104,19,.25)}
.orb-dot{filter:drop-shadow(0 0 8px currentColor);animation:dotPulse 2.5s ease-in-out infinite}
.od1{animation-delay:0s}.od2{animation-delay:.6s}.od3{animation-delay:1.2s}.od4{animation-delay:1.8s}
@keyframes dotPulse{0%,100%{opacity:1;r:5}50%{opacity:.55;r:3}}
/* orbit wrappers — full-size, centered, each rotated to stagger cards */
.orb-wrap{position:absolute;inset:0;z-index:2;animation:orbSpin 40s linear infinite}
.ow1{--start:0deg}.ow2{--start:90deg}.ow3{--start:180deg}.ow4{--start:270deg}
.ow1{transform:rotate(0deg)}.ow2{transform:rotate(90deg)}.ow3{transform:rotate(180deg)}.ow4{transform:rotate(270deg)}
/* the card: positioned near top of wrapper, counter-animated to stay upright */
.orb-card{position:absolute;top:3%;left:50%;width:max-content;animation:orbCounter 40s linear infinite}
.ow1 .orb-card{transform:translate(-50%,-50%) rotate(0deg);--cstart:0deg}
.ow2 .orb-card{transform:translate(-50%,-50%) rotate(0deg);--cstart:-90deg}
.ow3 .orb-card{transform:translate(-50%,-50%) rotate(0deg);--cstart:-180deg}
.ow4 .orb-card{transform:translate(-50%,-50%) rotate(0deg);--cstart:-270deg}
@keyframes orbCounter{from{transform:translate(-50%,-50%) rotate(var(--cstart,0deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--cstart,0deg) - 360deg))}}
/* card inner — circle, high visibility */
.orb-card-inner{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:clamp(100px,22vw,132px);aspect-ratio:1/1;padding:16px 10px;border-radius:50%;
  background:rgba(255,255,255,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:2px solid rgba(236,104,19,.5);
  box-shadow:0 8px 32px -6px rgba(20,30,70,.35),0 0 24px rgba(236,104,19,.15),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
/* orange-blue gradient ring */
.orb-card-inner::before{content:'';position:absolute;inset:-2px;border-radius:50%;border:2.5px solid transparent;
  background:linear-gradient(135deg,var(--orange),var(--blue-glow)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.orb-card-inner:hover{transform:translateY(-3px) scale(1.06);border-color:var(--orange);
  box-shadow:0 14px 40px -6px rgba(20,30,70,.4),0 0 32px rgba(236,104,19,.25)}
[dir="rtl"] .orb-card-inner{text-align:center}
/* icon — circular, bigger */
.chip-ic{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px;
  background:linear-gradient(135deg,rgba(236,104,19,.18),rgba(55,78,157,.18));
  box-shadow:0 2px 8px rgba(236,104,19,.15)}
.chip-ic svg{width:15px;height:15px}
.chip-ic.orange{color:var(--orange-deep)}
.chip-ic.blue{color:var(--blue-deep)}
.chip-tx{min-width:0}
.orb-card-inner b{display:block;font:700 clamp(15px,3vw,18px) var(--font-head);
  background:linear-gradient(90deg,var(--orange),var(--orange-deep) 45%,var(--blue-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;line-height:1.15}
.chip-tx span{display:block;font:600 9px var(--font-head);color:var(--text-dim);margin-top:3px;line-height:1.3;max-width:90px}
/* logo center medallion */
.orb-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;
  width:clamp(140px,30vw,200px);aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.6) 75%,transparent 100%);
  border:2.5px solid rgba(55,78,157,.2);
  outline:3px solid rgba(236,104,19,.5);outline-offset:10px;
  box-shadow:0 0 0 10px rgba(236,104,19,.1),0 36px 72px -20px rgba(20,30,70,.5);
  animation:logoBreath 4s ease-in-out infinite}
.orb-logo img{width:75%;height:auto;display:block;position:relative;z-index:1;animation:logoGlow2 4s ease-in-out infinite}
/* hover — pause orbit + counter + glow */
.hero-visual:hover .orb-wrap,.hero-visual:hover .orb-card,.hero-visual:hover .orb-ring,.hero-visual:hover .orb-dot,.hero-visual:hover .orb-logo img{animation-play-state:paused}
/* keyframes */
@keyframes orbSpin{from{transform:rotate(var(--start,0deg))}to{transform:rotate(calc(var(--start,0deg) + 360deg))}}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes logoBreath{0%,100%{box-shadow:0 0 0 10px rgba(236,104,19,.1),0 36px 72px -20px rgba(20,30,70,.5)}50%{box-shadow:0 0 0 14px rgba(236,104,19,.18),0 36px 72px -20px rgba(20,30,70,.5),0 0 52px rgba(236,104,19,.2)}}
@keyframes logoGlow2{0%,100%{filter:drop-shadow(0 8px 18px rgba(20,30,70,.2)) drop-shadow(0 0 10px rgba(236,104,19,.2))}50%{filter:drop-shadow(0 8px 18px rgba(20,30,70,.2)) drop-shadow(0 0 28px rgba(236,104,19,.55))}}
/* dark overrides */
[data-theme="dark"] .orb-logo{background:radial-gradient(circle,rgba(20,32,80,1) 0%,rgba(20,32,80,.95) 50%,rgba(20,32,80,.6) 75%,transparent 100%);border-color:rgba(120,145,220,.4);box-shadow:0 0 0 10px rgba(255,145,66,.12),0 36px 72px -20px rgba(0,0,0,.7)}
[data-theme="dark"] .orb-card-inner{background:rgba(18,28,68,.96);border-color:rgba(255,145,66,.6);box-shadow:0 8px 32px -6px rgba(0,0,0,.5),0 0 24px rgba(255,145,66,.15),inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="dark"] .orb-card-inner::before{background:linear-gradient(135deg,var(--orange-glow),#9db4ff) border-box;opacity:1}
[data-theme="dark"] .chip-ic{box-shadow:0 2px 8px rgba(255,145,66,.2)}
[data-theme="dark"] .chip-ic.orange{color:var(--orange-glow)}
[data-theme="dark"] .chip-ic.blue{color:#9db4ff}
[data-theme="dark"] .orb-ring{stroke:rgba(255,145,66,.45)}
[data-theme="dark"] .or2{stroke:rgba(157,180,255,.35)}
[data-theme="dark"] .or3{stroke:rgba(255,145,66,.3)}
@media (max-width:640px){
  .orb-stage{max-width:340px}
  .orb-logo{width:clamp(86px,20vw,120px)}
  .orb-card-inner{width:clamp(84px,20vw,104px);padding:12px 8px}
  .orb-card-inner b{font-size:14px}
  .chip-ic{width:26px;height:26px}
  .chip-ic svg{width:12px;height:12px}
  .chip-tx span{font-size:8px}
}

/* ---------- About section top ---------- */
.about-top{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-bottom:0}
.about-logo{width:100%;max-width:380px;justify-self:center}
.about-logo img{width:100%;height:auto;display:block}
@media (max-width:768px){.about-top{grid-template-columns:1fr;text-align:center}.about-logo{margin:0 auto;max-width:200px}}

/* ---------- Mission / Vision ---------- */
.grid-mv{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
@media (max-width:640px){.grid-mv{grid-template-columns:1fr}}

/* ---------- Services grid ---------- */
.grid-services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.svc-card{padding:24px;display:flex;flex-direction:column;gap:12px;border-radius:var(--radius-card);
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 4px 20px -6px rgba(20,30,70,.08);transition:transform .2s ease,box-shadow .2s ease}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -8px rgba(20,30,70,.14)}
.svc-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-icon svg{width:20px;height:20px}
.si-blue{background:rgba(55,78,157,.12);color:var(--blue-deep)}
.si-orange{background:rgba(236,104,19,.12);color:var(--orange-deep)}
.si-teal{background:rgba(236,104,19,.12);color:var(--orange-deep)}
.si-coral{background:rgba(55,78,157,.12);color:var(--blue-deep)}
.si-green{background:rgba(236,104,19,.12);color:var(--orange-deep)}
.si-blue2{background:rgba(55,78,157,.12);color:var(--blue-deep)}
.svc-title{font:700 17px var(--font-head);color:var(--text-main);margin:0}
.svc-desc{font-size:14px;color:var(--text-dim);line-height:1.55;margin:0}
.svc-link{display:none}
.svc-link:hover{color:var(--orange)}
[data-theme="dark"] .svc-card{background:rgba(18,28,68,.9);border-color:rgba(120,145,220,.2)}
[data-theme="dark"] .svc-title{color:#e8ecf6}
@media (max-width:768px){.grid-services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.grid-services{grid-template-columns:1fr}}

/* ---------- Program cards ---------- */
.grid-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;align-items:stretch}
.prog-card{padding:24px;display:flex;flex-direction:column;gap:12px;border-radius:var(--radius-card);
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 4px 20px -6px rgba(20,30,70,.08);transition:transform .2s ease,box-shadow .2s ease}
.prog-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -8px rgba(20,30,70,.14)}
.prog-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prog-status{font:600 11px var(--font-head);padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.prog-open{background:rgba(34,180,100,.12);color:#1a8c52}
.prog-closed{background:rgba(200,60,60,.12);color:#b33}
[data-theme="dark"] .prog-open{background:rgba(34,180,100,.2);color:#3ddc84}
[data-theme="dark"] .prog-closed{background:rgba(200,60,60,.2);color:#f66}
.prog-title{font:700 18px var(--font-head);color:var(--text-main);margin:0;line-height:1.25}
.prog-desc{font-size:14px;color:var(--text-dim);line-height:1.55;margin:0}
.prog-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto}
.prog-meta span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim)}
.prog-meta svg{width:14px;height:14px;flex-shrink:0}
.prog-divider{height:1px;background:var(--line);margin:4px 0}
.prog-cta{display:inline-flex;align-items:center;gap:6px;text-align:center;
  font:600 14px var(--font-head);color:var(--blue-deep);text-decoration:none;
  padding:8px 0;transition:color .15s}
.prog-cta:hover{color:var(--orange)}
[data-theme="dark"] .prog-card{background:rgba(18,28,68,.9);border-color:rgba(120,145,220,.2)}
[data-theme="dark"] .prog-title{color:#e8ecf6}
@media (max-width:768px){.grid-prog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.grid-prog{grid-template-columns:1fr}}

/* ---------- Detail page layout ---------- */
.detail-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.detail-main .info-card{padding:40px}
.detail-features-title{margin-top:28px;font:700 18px var(--font-head);color:var(--text-main)}
.detail-features{margin-top:14px;padding-left:0;list-style:none}
.detail-features li{
  position:relative;padding-left:24px;margin-bottom:12px;
  font-size:15px;line-height:1.7;color:var(--text-dim);
}
.detail-features li::before{
  content:'';position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:50%;background:var(--orange);
}
.detail-sidebar .info-card{padding:24px;margin-bottom:16px}
.sidebar-apply{text-align:center}
.sidebar-apply-title{font:700 17px var(--font-head);margin-bottom:8px;color:var(--text-main)}
.sidebar-apply-desc{font-size:14px;color:var(--text-dim);margin-bottom:16px;line-height:1.5}
.sidebar-info h4{font:600 15px var(--font-head);margin-bottom:14px;color:var(--text-main)}
.sidebar-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:14px;color:var(--text-dim);line-height:1.5}
.sidebar-row svg{width:18px;height:18px;flex-shrink:0;color:var(--orange);margin-top:1px}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}.detail-main .info-card{padding:28px}}

/* ---------- Stats ---------- */
.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card{padding:28px 28px 30px;overflow:hidden}
.stat-card::before{display:none}
.stat-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.stat-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;
  background:linear-gradient(135deg,rgba(236,104,19,.16),rgba(55,78,157,.16));
  display:flex;align-items:center;justify-content:center;
}
.stat-icon svg{width:18px;height:18px}
.stat-icon.blue{color:var(--blue-deep)}
.stat-icon.orange{color:var(--orange-deep)}
.stat-label{font:700 14px var(--font-head);color:var(--text-main)}
.stat{
  display:block;line-height:1.15;margin-top:2px;
  font:700 clamp(22px,3vw,32px) var(--font-head);
  white-space:normal;overflow-wrap:anywhere;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange-deep) 40%,var(--blue-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-bar{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
[dir="rtl"] .stat-bar{transform-origin:right}
.stat-card:hover .stat-bar{transform:scaleX(1)}

/* ---------- Card grids (offers / programmes) ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.info-card{padding:20px;display:flex;flex-direction:column;gap:14px}
.info-card .card-title{font:700 18px var(--font-head)}
.info-card .card-body{font-size:14px;color:var(--text-dim);line-height:1.6;margin:0}
.info-card .img-slot{height:150px;min-height:150px}

.card-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 12px;border-radius:999px;
  background:rgba(236,104,19,.12);color:var(--orange-deep);width:fit-content;
}
.card-tag.blue{background:rgba(55,78,157,.12);color:var(--blue-deep)}
[dir="rtl"] .card-tag{letter-spacing:0}

.node-line{
  position:relative;padding-left:14px;
  font-size:11px;color:var(--orange-deep);text-transform:uppercase;letter-spacing:.06em;
}
.node-line::before{
  content:'';position:absolute;left:0;top:6px;width:8px;height:8px;
  background:var(--orange);border-radius:50%;box-shadow:0 0 8px var(--orange);
}
[dir="rtl"] .node-line{padding-left:0;padding-right:14px;letter-spacing:0}
[dir="rtl"] .node-line::before{left:auto;right:0}

/* ---------- Process / "How it works" animated timeline ---------- */
.timeline-section{padding-block:56px 64px}

.timeline{
  list-style:none;margin:48px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
/* base track */
.timeline::before{
  content:'';position:absolute;top:26px;left:0;right:0;height:2px;
  background:var(--line);z-index:0;
}
/* animated gradient fill, drawn in once the section scrolls into view */
.timeline::after{
  content:'';position:absolute;top:26px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.16,.8,.3,1);
  z-index:0;
}
.timeline.is-visible::after{transform:scaleX(1)}
@media (min-width:901px){
  [dir="rtl"] .timeline::after{transform-origin:right}
}

.tl-step{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s ease;
}
.timeline.is-visible .tl-step{opacity:1;transform:translateY(0)}
.tl-step:nth-child(1){transition-delay:.05s}
.tl-step:nth-child(2){transition-delay:.2s}
.tl-step:nth-child(3){transition-delay:.35s}
.tl-step:nth-child(4){transition-delay:.5s}

.tl-node{
  width:54px;height:54px;flex:0 0 auto;border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:2px solid var(--line);
  box-shadow:0 8px 20px -10px rgba(20,30,70,.25);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.timeline.is-visible .tl-step .tl-node{
  border-color:var(--orange);
  box-shadow:0 0 0 6px rgba(236,104,19,.14),0 10px 24px -10px rgba(236,104,19,.5);
}
.tl-node::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--orange);opacity:0;
}
.timeline.is-visible .tl-step:nth-child(1) .tl-node::after{animation:tlPulse 1s ease-out .2s}
.timeline.is-visible .tl-step:nth-child(2) .tl-node::after{animation:tlPulse 1s ease-out .35s}
.timeline.is-visible .tl-step:nth-child(3) .tl-node::after{animation:tlPulse 1s ease-out .5s}
.timeline.is-visible .tl-step:nth-child(4) .tl-node::after{animation:tlPulse 1s ease-out .65s}
@keyframes tlPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}

.tl-num{font:700 16px var(--font-head);color:var(--orange-deep)}
.tl-body{max-width:220px}
.tl-body .step-title{font-weight:700;margin-bottom:4px;font-family:var(--font-head)}
.tl-body .step-desc{font-size:13px;color:var(--text-dim);line-height:1.5}
[data-theme="dark"] .tl-node{background:rgba(22,32,74,.9)}

/* ---------- CTA banner ---------- */
.cta-band{background:linear-gradient(120deg,var(--orange) 0%,#c94f0a 100%);padding:56px 0}
.cta-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.cta-inner .cta-text{font:700 clamp(24px,3.6vw,38px) var(--font-head);color:#fff;max-width:640px;text-wrap:pretty}
.cta-inner .btn-f{flex:0 0 auto}

/* ---------- Contact + Map merged layout ---------- */
.contact-3col{display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:stretch}
.contact-left-col{display:flex;flex-direction:column;gap:16px}
.contact-left-col .map-panel{border-radius:var(--radius-card);overflow:hidden;flex:1}
.contact-left-col .office-map{height:100%;min-height:200px}
.contact-info-col .contact-intro{font-size:15px;line-height:1.7;color:var(--text-dim);margin:0 0 14px;max-width:42ch}
.contact-info-col .contact-reach{margin:0}
.contact-form-col .contact-form{height:100%;display:flex;flex-direction:column}
@media(max-width:900px){.contact-3col{grid-template-columns:1fr}.contact-left-col .office-map{height:clamp(280px,40vh,380px)}}
.map-panel{padding:0}
.map-panel::before{display:none}

/* Leaflet map */
.office-map{
  direction:ltr;
  height:clamp(360px,48vh,540px);width:100%;
  border-radius:14px;overflow:hidden;
  background:#e6eaf3;
  position:relative;z-index:0;              /* contain Leaflet's high z-index below the sticky nav */
}
.office-map.is-unavailable{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  font:600 13px var(--font-head);color:var(--text-dim);
}
.leaflet-container{font-family:var(--font-body);background:#e6eaf3}
.leaflet-container a{color:var(--blue-deep)}
.leaflet-bar{border:0;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px -10px rgba(20,30,70,.4)}
.leaflet-bar a{
  background:rgba(255,255,255,.92);color:var(--text-main);
  border-bottom:1px solid var(--line);width:32px;height:32px;line-height:32px;font-size:18px;
}
.leaflet-bar a:hover{background:#fff;color:var(--orange-deep)}
.leaflet-control-attribution{
  background:rgba(255,255,255,.82)!important;font-size:10px;color:var(--text-dim);
  border-radius:8px 0 0 0;padding:2px 6px;
}
.leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 18px 44px -18px rgba(20,30,70,.45)}
.leaflet-popup-content{margin:12px 14px;font-family:var(--font-body)}
.leaflet-popup-content .mp-tag{
  display:block;font:600 10px var(--font-head);text-transform:uppercase;letter-spacing:.09em;
  color:var(--orange-deep);margin-bottom:3px;
}
.leaflet-popup-content .mp-name{display:block;font:700 14px var(--font-head);color:var(--text-main);margin-bottom:3px}
.leaflet-popup-content .mp-addr{display:block;font-size:12px;color:var(--text-dim);line-height:1.5}
.leaflet-popup-content .mp-dir{
  display:inline-block;margin-top:9px;
  font:600 12px var(--font-head);color:var(--orange-deep);
}
.leaflet-popup-content .mp-dir:hover{color:var(--orange)}
.leaflet-popup-content .mp[dir="rtl"]{text-align:right}
.leaflet-popup-content .mp[dir="rtl"] .mp-tag{letter-spacing:0}

/* SVG teardrop markers — the path tip is anchored on the coordinate */
.office-pin{filter:drop-shadow(0 4px 7px rgba(236,104,19,.45))}
.office-pin svg{display:block;transform-origin:50% 100%;transition:transform .15s ease}
.office-pin:hover{z-index:1000!important}
.office-pin:hover svg{transform:scale(1.12)}
.office-pin.is-active{z-index:1000!important}
.office-pin.is-active svg{animation:pinPop .6s ease}
@keyframes pinPop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}

.office.is-clickable{cursor:pointer}
.pinedit-box{
  background:#fff;color:var(--text-main);
  font:500 12px var(--font-head);
  padding:7px 11px;border-radius:8px;max-width:min(90vw,420px);
  box-shadow:0 6px 18px -8px rgba(20,30,70,.4);
}
.pinedit-box b{color:var(--orange-deep)}
.pinedit-box span{color:var(--blue-deep)}

.offices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.office{padding:18px;display:flex;gap:12px;align-items:flex-start}
.office::before{display:none}
.office-num{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--orange);color:#fff;font:700 12px var(--font-head);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(236,104,19,.5);
}
.office-body{min-width:0}
.office .office-tag{
  font-size:11px;color:var(--orange-deep);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:4px;
}
[dir="rtl"] .office .office-tag{letter-spacing:0}
.office .office-name{font-weight:700;font-family:var(--font-head)}
.office .office-addr{font-size:12px;color:var(--text-dim);line-height:1.5;margin-top:2px}
.office.wide{grid-column:span 2}

/* ---------- Contact ---------- */
.contact-intro{font-size:15px;line-height:1.7;color:var(--text-dim);margin:0 0 20px;max-width:42ch}
.contact-reach{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-reach li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.contact-reach .ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,rgba(236,104,19,.16),rgba(55,78,157,.16));
  color:var(--blue-deep);display:flex;align-items:center;justify-content:center;
}
.contact-reach .ic svg{width:17px;height:17px}
.contact-reach b{
  display:block;font:600 11px var(--font-head);text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-dim);margin-bottom:2px;
}
[dir="rtl"] .contact-reach b{letter-spacing:0;text-transform:none}
.contact-reach a{color:var(--text-main)}
.contact-reach a:hover{color:var(--orange-deep)}

.contact-form{position:relative;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form::before{display:none}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1 / -1}
.field label{
  font:600 12px var(--font-head);letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);
}
[dir="rtl"] .field label{letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea{
  font:400 14px var(--font-body);width:100%;
  padding:12px 14px;border:1px solid rgba(55,78,157,.28);border-radius:12px;
  background:rgba(255,255,255,.85);color:var(--text-main);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(236,104,19,.15);
}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{border-color:var(--orange-deep)}
.hp{
  position:absolute!important;left:0;top:0;z-index:-1;
  width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;
}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.form-consent{flex:1;min-width:200px;font-size:11.5px;line-height:1.5;color:var(--text-dim);margin:0}
.form-status{
  grid-column:1 / -1;margin:0;min-height:1.3em;
  font-size:13.5px;font-weight:600;
}
.form-status.ok{color:var(--blue-deep)}
.form-status.err{color:var(--orange-deep)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);position:relative;overflow:hidden;color:#c3cbe8}
.footer-grid{padding-block:64px 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-grid img{height:60px;width:auto;margin-bottom:16px;background:transparent;border-radius:0;padding:0}
.footer-brand p{font-size:13px;color:#9aa6cc;line-height:1.6;max-width:280px}
.foot-h{
  font:600 11px var(--font-head);text-transform:uppercase;letter-spacing:.14em;
  color:var(--orange-glow);margin-bottom:14px;
}
[dir="rtl"] .foot-h{text-transform:none;letter-spacing:0}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13px}
.footer-col a{color:#c3cbe8}
.footer-col a:hover{color:#fff}
.footer-col a.site{color:var(--orange-glow)}
.footer-addr{font-size:13px;color:#c3cbe8;line-height:1.6}
.footer-bar{
  border-top:1px solid var(--navy-line);padding-block:20px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;color:#6a76a0;
}
.footer-legal a{color:#9aa6cc;text-decoration:none;transition:color .15s}
.footer-legal a:hover{color:#fff}

/* ============================================================
   RESPONSIVE
   desktop >=1024 · tablet 641-1023 · mobile <=640
   ============================================================ */

/* Hero stacks earlier than the main tablet breakpoint */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:36px;padding-block:64px 56px}
  .hero .lede{max-width:none}
  .hero h1{font-size:clamp(34px,8vw,46px)}
  .timeline-section{padding-block:40px 48px}

  /* vertical timeline: track runs down the left (right in RTL), steps stack */
  .timeline{display:flex;flex-direction:column;gap:32px;margin-top:36px}
  .timeline::before,.timeline::after{top:0;bottom:0;left:26px;right:auto;width:2px;height:auto}
  .timeline::after{transform:scaleY(0);transform-origin:top}
  .timeline.is-visible::after{transform:scaleY(1)}
  [dir="rtl"] .timeline::before,[dir="rtl"] .timeline::after{left:auto;right:26px}

  .tl-step{flex-direction:row;align-items:flex-start;gap:18px;transform:translateY(0) translateX(-18px)}
  .timeline.is-visible .tl-step{transform:translateX(0)}
  [dir="rtl"] .tl-step{transform:translateX(18px)}
  [dir="rtl"] .timeline.is-visible .tl-step{transform:translateX(0)}
  .tl-body{max-width:none}

  .office-map{height:clamp(320px,52vh,460px)}
}

/* Tablet */
@media (max-width:1023px){
  :root{--pad:24px}
  html{scroll-padding-top:84px}

  .nav-links,
  .nav-right .lang-switch,
  .nav-desktop-cta{display:none}
  .nav-right{gap:12px}
  .nav-toggle{display:flex}
  .nav-cta-compact{display:inline-flex;padding:10px 18px;min-height:44px;font-size:12px}

  .grid-stats{grid-template-columns:repeat(2,1fr)}
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}

  .section-pad{padding-block:48px 56px}
}

/* Mobile */
@media (max-width:640px){
  :root{--pad:18px}

  .section-h2{font-size:24px;margin:10px 0 16px}
  .section-pad{padding-block:40px 48px}

  .grid-stats{grid-template-columns:1fr}
  .grid-cards{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr;padding:20px}

  .nav-cta-compact{display:none}

  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-f{width:100%}

  .cta-inner{flex-direction:column;text-align:center;align-items:center}
  .cta-band{padding:48px 0}

  .offices{grid-template-columns:1fr}
  .office.wide{grid-column:span 1}

  .footer-grid{grid-template-columns:1fr;gap:28px;padding-block:48px 24px}
  .footer-bar{flex-direction:column;text-align:center;align-items:center}

  /* lighten decorative blobs for perf */
  .blob{filter:blur(60px)}
  .blob-1{width:320px;height:320px;opacity:.4}
  .blob-2{width:360px;height:360px;opacity:.4}
  .blob-3{width:300px;height:300px;opacity:.28}

  /* generous touch targets */
  .nav-links a,.card-tag,.node-line{min-height:auto}
}

/* Motion sensitivity */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .blob{animation:none}
}

/* ---------- New structure: theme toggle, about, eligibility, faq, testimonials ---------- */

.theme-toggle{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.5);color:var(--text-main);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}

.testi-card{padding:28px 26px 24px;display:flex;flex-direction:column;gap:20px;opacity:0}
/* keyframes (not transition) for the one-shot reveal, so .panel's own hover
   transition on transform/box-shadow/border-color is left untouched */
@keyframes testiIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.testi-grid.is-visible .testi-card{animation:testiIn .6s ease forwards}
.testi-grid.is-visible .testi-card:nth-child(1){animation-delay:.05s}
.testi-grid.is-visible .testi-card:nth-child(2){animation-delay:.18s}
.testi-grid.is-visible .testi-card:nth-child(3){animation-delay:.31s}

.testi-card::after{
  content:'\201C';position:absolute;top:2px;left:22px;
  font:800 72px/1 Georgia,'Times New Roman',serif;
  color:rgba(236,104,19,.14);pointer-events:none;
}
[dir="rtl"] .testi-card::after{content:'\201D';left:auto;right:22px}

.testi-text{font-size:15px;line-height:1.65;color:var(--text-main);margin:0;font-weight:500;position:relative;z-index:1}

.testi-author{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi-avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--blue));
  box-shadow:0 6px 16px -6px rgba(236,104,19,.55);
}
.testi-avatar svg{width:20px;height:20px}
.testi-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.testi-who b{font:700 14px var(--font-head);color:var(--text-main)}
.testi-who span{font-size:12.5px;color:var(--text-dim)}

/* Responsive column count — declared after the base rule above so it
   actually wins the cascade (this stylesheet's main RESPONSIVE block
   sits earlier in the file than this section, so it would otherwise lose). */
@media (max-width:1023px){
  .testi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .testi-grid{grid-template-columns:1fr}
}

/* ---------- Partner chips ---------- */
.partners-wrap{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.partners-chips{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;
}
.partners-chips.is-visible{opacity:1;transform:translateY(0)}
.partners-chips li{
  font:600 12px var(--font-head);letter-spacing:.04em;color:var(--text-dim);
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
[dir="rtl"] .partners-chips li{letter-spacing:0}
.partners-chips li:hover{border-color:var(--orange);color:var(--orange-deep);transform:translateY(-2px)}
[data-theme="dark"] .partners-chips li{background:rgba(22,32,74,.65);color:#c3cbe8}
[data-theme="dark"] .partners-chips li:hover{border-color:var(--orange);color:var(--orange-glow)}

.elig-panel{padding:26px}
.elig-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px}
@media (max-width:640px){.elig-grid{grid-template-columns:1fr}}

.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px}
.faq-item{padding:0;overflow:hidden}
.faq-item::before{display:none}
.faq-item summary{padding:18px 20px;cursor:pointer;font:700 15px var(--font-head);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 20px 18px;font-size:14px;line-height:1.6;color:var(--text-dim)}

/* ---------- Dark mode ---------- */
[data-theme="dark"]{
  --ink:#0d1430; --panel:#16204a; --line:rgba(120,145,220,.28);
  --text-dim:#a9b4d8; --text-main:#f4f6fb;
}
[data-theme="dark"] body{background:var(--ink);color:var(--text-main)}
[data-theme="dark"] .panel{background:rgba(22,32,74,.72);border-color:rgba(120,145,220,.28)}
[data-theme="dark"] .site-nav{background:rgba(13,20,48,.72)}
[data-theme="dark"] .nav-drawer{background:rgba(13,20,48,.92)}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(120,145,220,.35)}
[data-theme="dark"] .office-map{background:#1a2450}
[data-theme="dark"] .img-slot{color:#dfe6ff}
[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.08)}
[data-theme="dark"] .blob{opacity:.55}
[data-theme="dark"] .blob-1{opacity:.5}
[data-theme="dark"] .blob-2{opacity:.55}
[data-theme="dark"] .blob-3{opacity:.45}

/* Dark-mode buttons: ghost button was grey-on-grey — force white text on tinted fill */
[data-theme="dark"] .btn-f{background:rgba(236,104,19,.10);border-color:var(--orange);color:#fff}
[data-theme="dark"] .btn-f:hover{background:rgba(236,104,19,.24);color:#fff;box-shadow:0 6px 18px -4px rgba(236,104,19,.65)}
[data-theme="dark"] .btn-f.solid{background:var(--orange);border-color:var(--orange);color:#fff}
[data-theme="dark"] .btn-f.solid:hover{background:var(--orange-glow);border-color:var(--orange-glow);color:#fff}
[data-theme="dark"] .btn-f.on-navy{background:var(--orange);border-color:var(--orange);color:#fff}
[data-theme="dark"] .btn-f.on-navy:hover{background:var(--orange-glow);border-color:var(--orange-glow);color:#fff}

/* Dark-mode gradient text: deep tones vanish on navy — use bright stops */
[data-theme="dark"] .shimmer-text{background:linear-gradient(90deg,var(--orange-glow) 0%,#9db4ff 35%,var(--orange-glow) 70%,#9db4ff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .stat{background:linear-gradient(90deg,var(--orange-glow) 0%,var(--orange) 40%,#9db4ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Services detail page ---------- */
.services-detail{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.service-block{padding:32px;border-radius:var(--radius-card);background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 20px -6px rgba(20,30,70,.08);display:flex;flex-direction:column;gap:12px}
.service-block .service-header{display:flex;align-items:center;gap:14px}
.service-block h2{font:700 20px var(--font-head);color:var(--text-main);margin:0}
.service-block p{font-size:15px;color:var(--text-dim);line-height:1.65;margin:0;flex:1}
.service-block .btn-f{align-self:flex-start;margin-top:8px}
@media(max-width:768px){.services-detail{grid-template-columns:1fr}}

/* ---------- About page ---------- */
.about-content{max-width:720px}
.about-content h2{font:700 22px var(--font-head);color:var(--text-main);margin:32px 0 12px}
.about-content h2:first-child{margin-top:0}
.about-content p{font-size:16px;line-height:1.75;color:var(--text-dim);margin:0 0 16px}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0 32px}
@media(max-width:768px){.values-grid{grid-template-columns:1fr}}

/* ============================================================
   Home page v2 — startup accelerator positioning
   (hero headline, mission/funding bullet lists, journey steps,
   4-up values, 5-up key figures, funding CTA, final CTA copy)
   ============================================================ */

/* Longer headline than the original two-word hero — step the clamp
   down so it still fits the left hero column at desktop width */
.hero h1.hero-h1-long{font-size:clamp(30px,4vw,48px)}
.hero .lede p + p{margin-top:12px}

/* ---------- Bullet lists (mission, funding support) ---------- */
.lead-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px}
.lead-list.one-col{grid-template-columns:1fr}
.lead-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.6;color:var(--text-dim)}
.lead-list li::before{
  content:'';position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 10px rgba(236,104,19,.5);
}
[dir="rtl"] .lead-list li{padding-left:0;padding-right:26px}
[dir="rtl"] .lead-list li::before{left:auto;right:0}
@media (max-width:640px){.lead-list{grid-template-columns:1fr}}

.about-text .section-sub + p{font-size:15px;line-height:1.7;color:var(--text-dim);max-width:68ch;margin:0 0 14px}
.about-lists{margin-top:4px}
.about-outro{font-size:15px;line-height:1.7;color:var(--text-dim);max-width:68ch;margin:20px 0 0}

/* ---------- Journey — two vertical rails (parcours d'accompagnement) ----------
   Steps 01-03 and 04-06 run as two rails side by side, which halves the height
   of the section. Each rail's gradient line draws itself and its steps fade up
   once it scrolls into view (.is-visible, set in app.js). */
.jr-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 56px;margin:32px auto 0;max-width:1080px}

.jr-timeline{list-style:none;margin:0;padding:0;position:relative}

.jr-step{
  position:relative;z-index:1;padding:0 0 22px 66px;
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease;
}
/* Rail segment: runs from this node's centre to the next node's centre, so the
   line never dangles past the last step. z-index keeps it under the circles,
   which are opaque and therefore hide it as it passes behind them. */
.jr-step::after{
  content:'';position:absolute;z-index:0;left:21px;top:32px;bottom:-32px;width:2px;
  background:linear-gradient(180deg,rgba(236,104,19,.55),rgba(55,78,157,.55));
}
.jr-step:last-child::after{display:none}
[data-theme="dark"] .jr-step::after{background:linear-gradient(180deg,rgba(255,145,66,.6),rgba(157,180,255,.6))}
.jr-step:last-child{padding-bottom:0}
.jr-timeline.is-visible .jr-step{opacity:1;transform:translateY(0)}
.jr-step:nth-child(1){transition-delay:.05s}
.jr-step:nth-child(2){transition-delay:.17s}
.jr-step:nth-child(3){transition-delay:.29s}

/* connector between the node and the card */
.jr-step::before{content:'';position:absolute;top:31px;left:44px;width:22px;height:2px;background:var(--line)}

/* numbered node — opaque, sits on the rail and covers it */
.jr-num{
  position:absolute;top:10px;left:0;z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:700 15px var(--font-head);color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--blue));
  box-shadow:0 8px 20px -10px rgba(236,104,19,.8);
}

.jr-card{
  position:relative;overflow:hidden;padding:22px 24px;
  border-radius:var(--radius-card);background:var(--panel);border:1px solid var(--line);
  box-shadow:0 4px 20px -6px rgba(20,30,70,.08);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.jr-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px -8px rgba(20,30,70,.14);border-color:rgba(236,104,19,.35)}
.jr-card::after{
  content:'';position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.jr-card:hover::after{transform:scaleX(1)}
.jr-title{font:700 17px var(--font-head);color:var(--text-main);margin:0 0 6px}
.jr-desc{font-size:14px;line-height:1.55;color:var(--text-dim);margin:0}
[data-theme="dark"] .jr-card{background:rgba(18,28,68,.9);border-color:rgba(120,145,220,.2)}

/* RTL — rails on the right edge */
[dir="rtl"] .jr-card::after{transform-origin:right}
[dir="rtl"] .jr-step{padding-left:0;padding-right:66px}
[dir="rtl"] .jr-step::before{left:auto;right:44px}
[dir="rtl"] .jr-step::after{left:auto;right:21px}
[dir="rtl"] .jr-num{left:auto;right:0}

/* One rail below the 2-column breakpoint — the two lists join into one line,
   so the first list's last step grows a segment reaching into the second. */
@media (max-width:760px){
  .jr-cols{grid-template-columns:1fr;gap:0;margin-top:28px}
  .jr-timeline:first-child .jr-step:last-child{padding-bottom:22px}
  .jr-timeline:first-child .jr-step:last-child::after{display:block}
}

/* ---------- Values — 4 up ---------- */
.grid-values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
@media (max-width:900px){.grid-values{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid-values{grid-template-columns:1fr}}

/* ---------- Key figures — 5 up (overrides .grid-stats' 4-col track) ---------- */
.grid-stats.stats-5{grid-template-columns:repeat(5,1fr);margin-top:20px}
/* Labels wrap to 1-3 lines, so pin the figures to the bottom of the card:
   the grid stretches the cards, which puts every number on one line. */
.grid-stats.stats-5 .stat-card{display:flex;flex-direction:column}
.grid-stats.stats-5 .stat-head{align-items:flex-start;margin-bottom:14px}
.grid-stats.stats-5 .stat-label{line-height:1.35}
.grid-stats.stats-5 .stat{margin-top:auto;padding-top:8px}
@media (max-width:1150px){.grid-stats.stats-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid-stats.stats-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid-stats.stats-5{grid-template-columns:1fr}}

/* ---------- Funding section ---------- */
.fin-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;margin-top:20px}
.fin-text p{font-size:15px;line-height:1.7;color:var(--text-dim);margin:0 0 14px;max-width:60ch}

/* Conversion card — tinted so it reads as an action, not another text block.
   The grid centres it against the paragraph block in the left column. */
.fin-cta{
  position:relative;overflow:hidden;
  padding:30px 32px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-start;gap:14px;
  background:linear-gradient(155deg,rgba(236,104,19,.12),rgba(55,78,157,.12));
  border:1px solid rgba(236,104,19,.3);
}
.fin-cta::before{display:none}            /* the panel status dot reads as noise on a CTA */
.fin-cta::after{                          /* soft corner glow */
  content:'';position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,104,19,.25) 0%,transparent 70%);pointer-events:none;
}
[dir="rtl"] .fin-cta::after{right:auto;left:-70px}
.fin-badge{
  width:54px;height:54px;flex:0 0 auto;border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--blue));
  box-shadow:0 12px 26px -12px rgba(236,104,19,.9);
}
.fin-badge svg{width:25px;height:25px}
.fin-cta h3{font:700 21px var(--font-head);color:var(--text-main);line-height:1.32;margin:0;max-width:24ch}
.fin-cta p{font-size:14.5px;line-height:1.65;color:var(--text-dim);margin:0}
.fin-cta .btn-f{width:100%;margin-top:4px}
.fin-note{display:flex;align-items:center;gap:8px;margin:0;font:600 12px var(--font-head);color:var(--text-dim)}
.fin-note svg{width:15px;height:15px;flex:0 0 auto;color:#1a8c52}
[data-theme="dark"] .fin-cta{
  background:linear-gradient(155deg,rgba(255,145,66,.16),rgba(91,123,214,.16));
  border-color:rgba(255,145,66,.38);
}
[data-theme="dark"] .fin-note svg{color:#3ddc84}
@media (max-width:900px){.fin-grid{grid-template-columns:1fr;gap:22px}.fin-cta{padding:28px 24px}}

/* ---------- Final CTA band — headline + supporting copy ---------- */
.cta-copy{min-width:0;max-width:660px}
.cta-inner .cta-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.92);margin:12px 0 0}

/* ---------- Legal pages ---------- */
.legal-content{max-width:720px}
.legal-content h2{font:700 20px var(--font-head);color:var(--text-main);margin:32px 0 10px}
.legal-content h2:first-child{margin-top:0}
.legal-content p{font-size:15px;line-height:1.75;color:var(--text-dim);margin:0 0 14px}
.legal-content ul{margin:0 0 14px;padding-left:20px;color:var(--text-dim);line-height:1.7;font-size:15px}
.legal-content li{margin-bottom:6px}
.legal-content a{color:var(--orange-deep)}
.legal-content a:hover{color:var(--orange)}