/* =====================================================================
   سپهر بستر — Design System v3 "Navy Glass"
   Subject: road & infrastructure construction.
   Palette: corporate navy / slate-gray scale (client-supplied).
   Direction: light, airy, glassmorphism — floating frosted cards,
   soft blurred navy glow, pill navigation, layered depth.
   ===================================================================== */

:root{
  /* ---- brand navy scale (fixed) --------------------------------------- */
  --brand-900:#081C2E;     /* darkest — header/footer bg, dark-section hover */
  --brand-800:#0D2B45;     /* PRIMARY — buttons, links, heading accents      */
  --brand-700:#163A5A;     /* hover state for buttons/links                  */
  --brand-600:#234E70;     /* icons, active elements, light primary          */

  /* ---- text / neutral scale (fixed) ------------------------------------ */
  --text-900:#111827;      /* boldest text / headings                        */
  --text-800:#1F2937;      /* main headings                                  */
  --text-700:#374151;      /* body text                                      */
  --text-600:#4B5563;      /* secondary text                                 */
  --text-500:#6B7280;      /* descriptions, muted text                       */
  --text-400:#9CA3AF;      /* placeholder / disabled text                    */

  --border-300:#D1D5DB;    /* light borders                                  */
  --border-200:#E5E7EB;    /* divider lines, card borders                    */

  --surface-100:#F3F4F6;   /* gray section background                        */
  --surface-card:#F8F9FA;  /* card background                                */
  --surface-hover:#F9FAFB; /* hover background / light sections              */
  --white:#FFFFFF;

  /* ---- glass surfaces ------------------------------------------------ */
  --glass-100:rgba(255,255,255,.46);
  --glass-200:rgba(255,255,255,.66);
  --glass-300:rgba(255,255,255,.85);
  --glass-border:rgba(255,255,255,.7);
  --glass-dark:rgba(8,28,46,.92);
  --glass-dark-border:rgba(255,255,255,.14);

  /* ---- accent — engineered bronze-gold, used sparingly (~5% of surface) - */
  --accent-500:#C8A971;
  --accent-600:#A9884E;
  --accent-glow:rgba(200,169,113,.35);

  /* ---- type ------------------------------------------------------------ */
  --font-main:'Vazirmatn','Segoe UI',Tahoma,sans-serif;

  /* ---- type scale (modular, replaces ad-hoc clamp() per component) ----- */
  --fs-display:clamp(2.5rem,6vw,5rem);
  --fs-h1:clamp(1.9rem,4.4vw,3.2rem);
  --fs-h2:clamp(1.65rem,3.4vw,2.65rem);
  --fs-h3:clamp(1.25rem,1.8vw,1.5rem);
  --fs-lead:clamp(1.05rem,1.7vw,1.2rem);
  --fs-body:1.0625rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;

  /* ---- spacing scale (4px base) ----------------------------------------- */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-8:32px;  --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --section-pad:clamp(64px,8vw,140px);

  /* ---- layout ----------------------------------------------------------- */
  --container-w:1240px;
  --container-wide:1440px;
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:32px;
  --radius-xl:44px;
  --ease:cubic-bezier(.22,1,.36,1);
  --blur:blur(20px) saturate(180%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-main);
  color:var(--text-700);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(680px circle at 88% -8%, rgba(35,78,112,.10), transparent 62%),
    radial-gradient(560px circle at -8% 24%, rgba(13,43,69,.07), transparent 60%),
    radial-gradient(520px circle at 50% 100%, rgba(35,78,112,.06), transparent 55%),
    var(--surface-100);
  background-attachment:fixed;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* =====================================================================
   English typography — Montserrat for body/UI text, Playfair Display
   reserved for headings (per explicit request). Persian pages keep
   Vazirmatn untouched — this rule only fires on html[lang="en"].
   ===================================================================== */
html[lang="en"]{
  --font-main:'Montserrat',sans-serif;
  --font-heading:'Playfair Display',serif;
}

/* Arabic typography — Cairo throughout (body + headings). A clean,
   modern Naskh-based grotesque with excellent legibility at both UI and
   display sizes, and full weight range (400–900) for the heading scale
   already used across the site. */
html[lang="ar"]{
  --font-main:'Cairo',sans-serif;
  --font-heading:'Cairo',sans-serif;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading,var(--font-main));}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--container-w);margin:0 auto;padding:0 24px;}
h1,h2,h3{color:var(--text-800);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

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

/* =====================================================================
   Scroll progress — smooth gradient glow bar
   ===================================================================== */
.road-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:9999;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-700),var(--brand-800));
  box-shadow:0 0 14px rgba(13,43,69,.45);
  transition:width .1s linear;
}

/* =====================================================================
   Top utility bar — emaar.com-style slim strip above the main header.
   Not sticky: it scrolls away, and .site-header slides up to top:0 to
   take its place (driven by body.page-scrolled, toggled in main.js).
   ===================================================================== */
.header-topbar{
  position:fixed;top:0;left:0;right:0;z-index:901;height:40px;
  background:var(--brand-900);color:rgba(255,255,255,.78);
  transform:translateY(0);opacity:1;
  transition:transform .35s var(--ease), opacity .3s;
}
body.page-scrolled .header-topbar{transform:translateY(-100%);opacity:0;pointer-events:none;}
.header-topbar-inner{
  max-width:var(--container-w);margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:12.5px;
}
.topbar-contact{display:flex;align-items:center;gap:18px;}
.topbar-contact a{display:inline-flex;align-items:center;gap:6px;color:inherit;opacity:.85;transition:opacity .2s;}
.topbar-contact a:hover{opacity:1;color:var(--white);}
.topbar-contact .nav-tile-icon{display:flex;}
.topbar-contact .nav-tile-icon svg{width:14px;height:14px;}
.topbar-email{display:none;}
.topbar-actions{display:flex;align-items:center;gap:16px;}
.topbar-social{display:flex;align-items:center;gap:8px;}
.topbar-social a{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-size:10px;font-weight:700;letter-spacing:0;
  transition:background .2s;
}
.topbar-social a:hover{background:rgba(255,255,255,.22);}
.topbar-lang-switch{
  display:flex;align-items:center;gap:2px;
  padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
}
.topbar-lang{
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.7);
  padding:4px 10px;border-radius:999px;
  transition:background .2s, color .2s;
}
.topbar-lang:hover{background:rgba(255,255,255,.14);color:var(--white);}
.topbar-lang.is-active{background:rgba(255,255,255,.9);color:var(--brand-800);}
@media (max-width:767px){.header-topbar{display:none;}}
@media (min-width:1080px){.topbar-email{display:inline;opacity:.65;}}

/* =====================================================================
   Header — floating frosted pill nav
   ===================================================================== */
.site-header{
  position:fixed;top:40px;left:0;right:0;z-index:900;
  padding:18px 16px 0;
  transition:padding .35s var(--ease), top .35s var(--ease);
}
body.page-scrolled .site-header{top:0;}
@media (max-width:767px){.site-header{top:0;}} /* no topbar on mobile, nothing to offset for */
.site-header.scrolled{padding:10px 16px 0;}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--container-w);margin:0 auto;
  background:var(--glass-200);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  border-radius:999px;
  padding:13px 14px 13px 28px;
  box-shadow:0 12px 34px -14px rgba(8,28,46,.20);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .3s var(--ease);
}
.site-header.scrolled .header-inner{
  background:var(--glass-300);
  box-shadow:0 16px 40px -14px rgba(8,28,46,.26);
  padding:10px 12px 10px 24px;
}
.brand{display:flex;align-items:center;gap:14px;color:var(--text-800);min-width:0;flex:1 1 auto;}
.brand-logo{height:72px;width:auto;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.3;min-width:0;overflow:hidden;}
.brand-text strong{font-size:21px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--brand-800);}

.main-nav{position:relative;}
.nav-list{display:flex;gap:4px;position:relative;}
/* Sliding "liquid" indicator — glides smoothly between nav items on hover
   instead of an instant background swap. Position/width set by JS
   (main.js) from each link's actual box; CSS only handles the glide. */
.nav-indicator{
  position:absolute;top:0;height:100%;left:0;border-radius:999px;
  background:rgba(13,43,69,.07);z-index:0;pointer-events:none;opacity:0;
  transition:transform .4s var(--ease), width .4s var(--ease), opacity .25s var(--ease);
}
.main-nav a{
  display:inline-flex;align-items:center;gap:6px;padding:11px 17px;border-radius:999px;
  color:var(--text-700);font-size:16.5px;font-weight:600;opacity:.85;position:relative;z-index:1;
  transition:opacity .2s, color .2s;
}
.main-nav a:hover{opacity:1;color:var(--brand-800);}
.nav-tile-icon{display:none;} /* icons are for the mobile dashboard grid only */
.caret{font-size:10px;opacity:.6;transition:transform .25s var(--ease);}

/* ---- "About" dropdown (Certificates / Awards / Subsidiaries) ---- */
@media (min-width:960px){
  .has-dropdown{position:relative;}
  .dropdown-menu{
    position:absolute;top:calc(100% + 18px);inset-inline-start:0;min-width:210px;
    display:flex;flex-direction:column;gap:2px;
    background:var(--glass-300);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    border:1px solid var(--glass-border);border-radius:var(--radius-md);
    padding:8px;box-shadow:0 24px 44px -18px rgba(8,28,46,.32);
    opacity:0;visibility:hidden;--dd-shift:0px;transform:translateY(6px) translateX(var(--dd-shift));
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    z-index:970;
  }
  .dropdown-menu a{display:flex;width:100%;padding:9px 12px;border-radius:10px;font-size:13.5px;position:relative;}
  .dropdown-menu a::before{
    content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%) scaleY(0);
    width:2px;height:60%;background:var(--accent-500);transition:transform .2s var(--ease);
  }
  .dropdown-menu a:hover::before{transform:translateY(-50%) scaleY(1);}
  .dropdown-menu-end{inset-inline-start:auto;inset-inline-end:0;}
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu,
  .has-dropdown.dropdown-open .dropdown-menu{
    opacity:1;visibility:visible;transform:translateY(0) translateX(var(--dd-shift));
  }
  /* Cascade — items step in one after another instead of the whole
     panel appearing at once. Capped at 9 items (no dropdown here has
     more), each item just delays its own opacity/transform slightly
     longer than the one before it. */
  .dropdown-menu li{opacity:0;transform:translateY(4px);transition:opacity .22s var(--ease), transform .22s var(--ease);}
  .has-dropdown:hover .dropdown-menu li,
  .has-dropdown:focus-within .dropdown-menu li,
  .has-dropdown.dropdown-open .dropdown-menu li{opacity:1;transform:translateY(0);}
  .dropdown-menu li:nth-child(1){transition-delay:.02s;}
  .dropdown-menu li:nth-child(2){transition-delay:.05s;}
  .dropdown-menu li:nth-child(3){transition-delay:.08s;}
  .dropdown-menu li:nth-child(4){transition-delay:.11s;}
  .dropdown-menu li:nth-child(5){transition-delay:.14s;}
  .dropdown-menu li:nth-child(6){transition-delay:.17s;}
  .dropdown-menu li:nth-child(7){transition-delay:.20s;}
  .dropdown-menu li:nth-child(8){transition-delay:.23s;}
  .dropdown-menu li:nth-child(9){transition-delay:.26s;}
  .has-dropdown:hover .caret,
  .has-dropdown.dropdown-open .caret{transform:rotate(180deg);}
}

.header-actions{display:flex;align-items:center;gap:8px;flex:none;}
.header-contact-btn{display:none;}
@media (min-width:960px){
  .btn.header-contact-btn{
    display:inline-flex;padding:11px 22px;font-size:13.5px;
    border-color:var(--accent-600);color:var(--accent-600);background:transparent;backdrop-filter:none;
  }
  .btn.header-contact-btn:hover{background:var(--accent-500);border-color:var(--accent-500);color:var(--white);transform:translateY(-2px);}
}

.menu-toggle{
  flex:none;width:40px;height:40px;border:none;background:rgba(13,43,69,.08);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;
  z-index:960;
  transition:transform .2s var(--ease), background .2s;
}
.menu-toggle:active{transform:scale(.88);background:rgba(13,43,69,.14);}
.menu-toggle span{width:18px;height:2px;border-radius:2px;background:var(--brand-800);transition:transform .3s var(--ease), opacity .3s;}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (min-width:960px){.menu-toggle{display:none;}}

@media (max-width:480px){
  .site-header{padding:12px 10px 0;}
  .header-inner{gap:10px;padding:8px 8px 8px 18px;}
  .brand-logo{height:54px;}
}

/* =====================================================================
   Mobile menu — a plain, self-contained full-screen accordion.
   No position:fixed-inside-a-filtered-ancestor tricks, no
   display:contents flattening — just a sibling of <header>, fixed to
   the viewport, with simple class toggles for open/close and each
   group's expand/collapse. See the big comment above the markup in
   header.php for why this replaced the previous approach.
   ===================================================================== */
@media (min-width:960px){
  .mobile-menu{display:none;}
}
@media (max-width:959px){
  .main-nav{display:none;} /* desktop-only pill nav; mobile uses .mobile-menu below */

  .mobile-menu{
    position:fixed;inset:0;z-index:895; /* just under .site-header's z-index:900, so the header (and its now-X toggle button) always stays visible/clickable above the panel */
    background:linear-gradient(180deg,var(--brand-900),var(--brand-800) 60%,var(--brand-900));
    opacity:0;visibility:hidden;transform:translateY(-14px) scale(.99);
    transition:opacity .35s var(--ease), transform .45s cubic-bezier(.22,1,.36,1), visibility .35s;
    overflow-y:auto;
  }
  .mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
  body.menu-open{overflow:hidden;}

  /* Cascade-in — each row/CTA/lang-link fades and rises into place in a
     quick staggered sequence right after the panel appears, instead of
     the whole menu just popping in at once. Re-plays every time the
     menu is opened (closing removes .open, which drops the animation
     and resets items to their hidden starting state). */
  .mobile-menu-inner>*{opacity:0;}
  @keyframes mmCascadeIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  .mobile-menu.open .mobile-menu-inner>*{animation:mmCascadeIn .5s var(--ease) forwards;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(1){animation-delay:.06s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(2){animation-delay:.11s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(3){animation-delay:.16s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(4){animation-delay:.21s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(5){animation-delay:.26s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(6){animation-delay:.31s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(7){animation-delay:.36s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(8){animation-delay:.41s;}
  .mobile-menu.open .mobile-menu-inner>*:nth-child(9){animation-delay:.46s;}

  .mobile-menu-inner{padding:96px 16px 32px;max-width:520px;margin:0 auto;}

  .mm-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.1);}
  .mm-row-link, .mm-row-label{
    flex:1;display:flex;align-items:center;gap:11px;
    padding:13px 4px;color:var(--white);font-size:14px;font-weight:700;
    background:none;border:none;text-align:start;font-family:inherit;cursor:pointer;
  }
  .mm-single{border-bottom:1px solid rgba(255,255,255,.1);}
  .mm-row-link .nav-tile-icon,
  .mm-row-label .nav-tile-icon,
  .mm-sublink .nav-tile-icon{display:flex;color:rgba(255,255,255,.75);flex:none;transition:transform .25s var(--ease);}
  .mm-row-link .nav-tile-icon svg,
  .mm-row-label .nav-tile-icon svg{width:18px;height:18px;}
  .mm-sublink .nav-tile-icon svg{width:15.5px;height:15.5px;}
  .mm-row-link:hover .nav-tile-icon,
  .mm-row-label:hover .nav-tile-icon{transform:scale(1.12);color:var(--white);}
  .mm-row-link:active .nav-tile-icon,
  .mm-row-label:active .nav-tile-icon{transform:scale(.86);}

  .mm-group-toggle{
    flex:none;width:44px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;color:rgba(255,255,255,.65);cursor:pointer;
    transition:background .2s;
  }
  .mm-group-toggle:hover{background:rgba(255,255,255,.07);border-radius:50%;}
  .mm-chevron{display:inline-block;font-size:14px;transition:transform .25s var(--ease);}
  .mm-group-toggle[aria-expanded="true"] .mm-chevron{transform:rotate(180deg);color:var(--accent-500);}

  .mm-submenu{
    display:grid;grid-template-rows:0fr;opacity:0;
    transition:grid-template-rows .4s var(--ease), opacity .3s var(--ease);
    background:rgba(0,0,0,.14);border-radius:12px;
    border-inline-start:2px solid transparent;
  }
  .mm-submenu.open{grid-template-rows:1fr;opacity:1;margin:2px 0 8px;border-inline-start-color:var(--accent-500);}
  .mm-submenu-inner{overflow:hidden;min-height:0;}
  .mm-sublink{
    display:flex;align-items:center;gap:9px;
    padding:10px 12px 10px 18px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;
  }
  .mm-sublink:hover{color:var(--white);}

  .mm-cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:22px;padding:14px;border-radius:999px;
    background:var(--white);color:var(--brand-800);font-weight:700;font-size:14px;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  }

  /* Small, quiet language toggle — tucked under the CTA at the very
     bottom of the mobile menu rather than crowding the header bar. */
  .mm-lang-switch{
    display:flex;align-items:center;justify-content:center;gap:4px;
    width:fit-content;margin:14px auto 0;padding:4px;border-radius:999px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  }
  .mm-lang-switch a{
    padding:7px 16px;border-radius:999px;
    color:rgba(255,255,255,.7);font-size:12px;font-weight:600;letter-spacing:.02em;
    transition:background .2s, color .2s;
  }
  .mm-lang-switch a:hover{background:rgba(255,255,255,.16);color:var(--white);}
  .mm-lang-switch a.is-active{background:rgba(255,255,255,.9);color:var(--brand-800);}
}

/* =====================================================================
   Buttons — pill, subtle glow on hover
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;
  border-radius:999px;font-weight:700;font-size:14.5px;border:2px solid transparent;
  position:relative;overflow:hidden;--tx:0px;--ty:0px;
  transition:transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s var(--ease);
}
/* Magnetic pull — main.js nudges --tx/--ty toward the cursor while
   hovering; merged into the same transform as the hover lift below so
   both animate together with one easing curve. */
.btn::before{
  content:"";position:absolute;top:0;inset-inline-start:-30%;height:100%;width:55%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform:translateX(-140%) skewX(-15deg);transition:transform .75s var(--ease);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(260%) skewX(-15deg);}
.btn-solid{background:linear-gradient(135deg,var(--brand-800),var(--brand-700));color:var(--white);box-shadow:0 10px 24px -10px rgba(13,43,69,.55);}
.btn-solid:hover{transform:translate(var(--tx),var(--ty)) translateY(-3px) scale(1.02);background:linear-gradient(135deg,var(--brand-700),var(--brand-600));box-shadow:0 16px 32px -10px rgba(13,43,69,.65);}
.btn-outline{border-color:rgba(255,255,255,.55);color:var(--white);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);}
.btn-outline:hover{background:rgba(255,255,255,.16);transform:translate(var(--tx),var(--ty)) translateY(-3px);}
/* Modifier for outline buttons placed on light sections — the base
   .btn-outline above is styled for sitting on the dark hero/section-dark
   backgrounds (white text/border), so it reads as invisible on a plain
   light .section without this override. */
.btn-outline-dark{border-color:var(--brand-800);color:var(--brand-800);background:transparent;backdrop-filter:none;}
.btn-outline-dark:hover{background:var(--brand-800);color:var(--white);}
.btn-filter{padding:10px 20px;font-size:13px;}
.btn-dark{background:linear-gradient(135deg,var(--brand-900),var(--brand-800));color:var(--white);}
.btn-dark:hover{transform:translate(var(--tx),var(--ty)) translateY(-3px);box-shadow:0 16px 30px -12px rgba(8,28,46,.5);}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--white);overflow:hidden;background:var(--brand-900);
}
.hero-slides{position:absolute;inset:0;}
.hero::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(35,78,112,.45),transparent 68%);
  filter:blur(10px);top:-140px;inset-inline-end:-120px;
  animation:float 9s ease-in-out infinite;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(8,28,46,.28) 0%, rgba(8,28,46,.4) 40%, rgba(8,28,46,.92) 100%);
}
@keyframes float{0%,100%{transform:translate(0,0);}50%{transform:translate(-24px,26px);}}
.hero-content{position:relative;z-index:2;width:100%;padding-bottom:150px;}

/* Liquid-glass panel wrapping just the eyebrow/title/subtitle/actions —
   sized to its own content (inline-block) rather than guessed offsets,
   so it hugs the text no matter how long the tagline/subtitle run.
   Kept genuinely translucent (light blur, low-opacity tint) so the
   hero image reads clearly through it, with a soft top highlight and
   thin bright edge to sell the glass/refraction look instead of a
   flat frosted panel. */
.hero-glass{
  position:relative;display:inline-block;max-width:100%;
  padding:26px 32px;border-radius:22px;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 40%, rgba(8,28,46,.05));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px) saturate(180%);
  -webkit-backdrop-filter:blur(6px) saturate(180%);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.03);
}
/* Top sheen — a soft light band across the upper edge, like light
   catching curved glass. Purely decorative, sits above the content. */
.hero-glass::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-500);margin-bottom:12px;
}
.hero-eyebrow::before{content:"";width:24px;height:1.5px;border-radius:0;background:var(--accent-500);}
.hero h1{
  font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:800;line-height:1.18;letter-spacing:-.02em;max-width:620px;color:var(--white);
  text-shadow:0 4px 28px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35);
}
[lang="fa"] .hero h1{letter-spacing:-.01em;}
.hero p{
  margin-top:22px;font-size:clamp(16px,1.9vw,21px);max-width:560px;color:rgba(255,255,255,.9);
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.hero-actions{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;}

.hero-slide-caption{
  position:absolute;bottom:113px;inset-inline-end:24px;max-width:320px;text-align:end;
  z-index:2;color:rgba(255,255,255,.75);font-size:15.5px;font-weight:500;
  padding:14px 18px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:var(--blur);
  display:none;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero-slide-caption.active{opacity:1;transform:translateY(0);pointer-events:auto;}
@media (min-width:1100px){.hero-slide-caption{display:block;}}

.hero-dots{position:absolute;bottom:113px;inset-inline-start:24px;z-index:3;display:flex;gap:9px;}
.hero-dots button{
  width:26px;height:4px;border-radius:2px;border:none;background:rgba(255,255,255,.35);flex:none;
  transition:background .3s, width .3s;
}
.hero-dots button.active{background:var(--white);width:42px;box-shadow:0 0 10px rgba(255,255,255,.5);}

/* Mobile gets its own, smaller downward nudge — proportional to the
   more compact hero on small screens rather than the full ~1cm shift
   used on desktop. */
@media (max-width:767px){
  .hero-slide-caption{bottom:127px;}
  .hero-dots{bottom:127px;}
  .section-tinted{width:calc(100% - 20px);border-radius:var(--radius-lg);}
  .about-stats-row{gap:20px 28px;}
}

/* Mobile hero text: slightly smaller than the desktop clamp ceiling
   (small screens don't have the width for the full 5.5rem headline),
   but still noticeably bigger than the original sizing — and the scrim
   is pulled in tighter and made a touch stronger since the cropped
   mobile slider image sits closer behind the text. */
@media (max-width:767px){
  .hero-content{padding-bottom:130px;}
  .hero-glass{
    display:block;padding:18px 18px;border-radius:18px;
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 40%, rgba(8,28,46,.07));
    backdrop-filter:blur(5px) saturate(180%);
    -webkit-backdrop-filter:blur(5px) saturate(180%);
    box-shadow:0 10px 28px -16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.26);
  }
  .hero-eyebrow{font-size:11px;margin-bottom:10px;}
  .hero h1{font-size:clamp(1.3rem,6vw,1.7rem);line-height:1.22;}
  .hero p{margin-top:14px;font-size:15.5px;}
  .hero-actions{margin-top:22px;}
}

.scroll-cue{
  position:absolute;bottom:170px;inset-inline-end:0;z-index:3;color:rgba(255,255,255,.7);
  display:none;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em;
}
.scroll-cue .line{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:scrollLine 1.8s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* =====================================================================
   Section divider — topographic contour line (signature element)
   ===================================================================== */
.road-divider{position:relative;height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.road-divider svg{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);opacity:0;transition:opacity 1s var(--ease);}
.road-divider .contour-main{stroke:var(--brand-600);stroke-width:2;fill:none;}
.road-divider .contour-accent{stroke:var(--accent-500);stroke-width:1.5;fill:none;stroke-dasharray:3 7;opacity:.75;}
.road-divider.in-view svg{opacity:1;}
.road-divider::after{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--accent-500);box-shadow:0 0 0 6px var(--accent-glow), 0 0 22px rgba(169,136,78,.55);
  opacity:0;transform:scale(.4);transition:opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s;
}
.road-divider.in-view::after{opacity:1;transform:scale(1);}

/* =====================================================================
   Reveal-on-scroll utility
   ===================================================================== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-delay-1.in-view{transition-delay:.1s;}
.reveal-delay-2.in-view{transition-delay:.2s;}
.reveal-delay-3.in-view{transition-delay:.3s;}
.reveal-delay-4.in-view{transition-delay:.4s;}

/* =====================================================================
   Section headers
   ===================================================================== */
.section{padding:var(--section-pad) 0;position:relative;}
.section-tight{padding:calc(var(--section-pad) * .55) 0;}
.section-dark{
  width:calc(100% - 32px);max-width:1320px;margin:0 auto;
  background:linear-gradient(155deg,var(--brand-800),var(--brand-900));
  color:var(--white);border-radius:var(--radius-xl);
  position:relative;overflow:hidden;
}
.section-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 420px at calc(100% + 100px) -160px, rgba(35,78,112,.35), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 42px);
}
.section-head{max-width:640px;margin-bottom:52px;position:relative;z-index:1;}
/* Word-mask reveal — main.js wraps each word of the h2 in a masked span;
   they slide up into place with a short stagger once .section-head
   (the .reveal ancestor) enters the viewport. Degrades gracefully to
   the plain .reveal fade if JS doesn't run. */
.section-head h2 .word-mask{display:inline-block;overflow:hidden;vertical-align:top;}
.section-head h2 .word-mask>span{display:inline-block;transform:translateY(112%);transition:transform .8s var(--ease);}
.section-head.in-view h2 .word-mask>span{transform:translateY(0);}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-600);margin-bottom:14px;
}
.section-dark .eyebrow{color:var(--accent-500);}
.eyebrow::before{content:"";width:24px;height:1.5px;border-radius:0;background:var(--accent-600);}
.section-dark .eyebrow::before{background:var(--accent-500);}
.section-head h2{font-size:var(--fs-h2);font-weight:800;line-height:1.22;letter-spacing:-.015em;color:var(--text-800);}
[lang="fa"] .section-head h2{letter-spacing:0;}
.section-head p{margin-top:14px;color:var(--text-600);font-size:var(--fs-body);}
.section-dark .section-head h2{color:var(--white);}
.section-dark .section-head p{color:rgba(255,255,255,.68);}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}

/* =====================================================================
   Stats — floating glass cards, overlapping hero
   ===================================================================== */
.stats-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  max-width:1160px;margin:-56px auto 0;position:relative;z-index:6;padding:0 20px;
}
@media (min-width:760px){.stats-strip{grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-64px;}}
.stats-strip-note{grid-column:1/-1;text-align:center;font-size:11.5px;color:var(--text-500);margin-top:2px;}
.stat-item{
  background:var(--glass-300);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  padding:28px 18px;text-align:center;
  box-shadow:0 24px 44px -22px rgba(8,28,46,.28);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stat-item:hover{transform:translateY(-6px);box-shadow:0 30px 54px -20px rgba(8,28,46,.34);}
.stat-num{font-size:var(--fs-h2);font-weight:800;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:center;gap:4px;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-label{margin-top:8px;font-size:var(--fs-sm);color:var(--text-600);font-weight:600;}

/* =====================================================================
   Services grid — glass cards
   ===================================================================== */
.services-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:680px){.services-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1080px){.services-grid{grid-template-columns:repeat(4,1fr);}}

/* Team/board grid (leadership.php) — a flex-wrap layout instead of a
   fixed-column grid so a partial row (e.g. 3 members) stays centered
   instead of stretching to fill unused grid tracks / sitting flush to
   one side. Cards keep roughly the same width the 4-column .services-grid
   would have given them. Scoped to its own class so services.php (which
   usually has a full grid) is unaffected. */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.team-grid .service-card{flex:0 1 240px;padding:17px 13px;}
.service-card{
  background:var(--glass-200);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  padding:34px 26px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  box-shadow:0 20px 40px -26px rgba(8,28,46,.22);
}
.service-card::after{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;
  background:var(--accent-500);transform:scaleX(0);transform-origin:inset-inline-start;
  transition:transform .4s var(--ease);
}
.service-card:hover::after{transform:scaleX(1);}
.service-card:hover{transform:translateY(-8px);box-shadow:0 28px 50px -20px rgba(8,28,46,.28);background:var(--glass-300);}
/* Cursor-tracked spotlight — a soft halo that follows the pointer inside
   the card. --mx/--my are set by main.js on mousemove (falls back to a
   centered glow if JS/reduced-motion skips it). */
.service-card{--mx:50%;--my:35%;}
.service-card::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my), rgba(35,78,112,.22), transparent 72%);
  transition:opacity .5s var(--ease);
}
.service-card:hover::before{opacity:1;}
.service-icon{
  flex:none;width:52px;height:52px;border-radius:16px;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-700));
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--white);
  box-shadow:0 10px 20px -8px rgba(13,43,69,.5);
  position:relative;z-index:1;
}
.service-card h3{font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text-800);position:relative;z-index:1;}
.service-card p{font-size:14.5px;color:var(--text-500);position:relative;z-index:1;}
.service-num{
  position:absolute;top:20px;inset-inline-end:22px;font-size:var(--fs-sm);font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--border-300);z-index:1;
}
.service-card[data-service-modal]{cursor:pointer;}
.service-card[data-service-modal]:focus-visible{outline:2px solid var(--accent-500);outline-offset:4px;}
.service-card-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;font-weight:700;
  color:var(--brand-700);position:relative;z-index:1;transition:gap .3s var(--ease),color .3s;
}
.service-card:hover .service-card-more{gap:10px;color:var(--accent-600);}
.service-card-more svg{transition:transform .3s var(--ease);}
html[dir="rtl"] .service-card-more svg{transform:scaleX(-1);}

/* =====================================================================
   Service detail modal — opened from a click on any .service-card,
   populated from that card's hidden <template>. Centered dialog on
   desktop; on narrow screens it becomes a bottom sheet instead (see
   the max-width:680px block below) so it's reachable one-handed and
   doesn't cover the whole viewport abruptly.
   ===================================================================== */
.service-modal-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,28,46,.72);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease), visibility .35s;
}
.service-modal-overlay.open{opacity:1;visibility:visible;}
body.service-modal-open{overflow:hidden;}
.service-modal{
  background:var(--white);border-radius:var(--radius-lg);max-width:620px;width:100%;
  max-height:85vh;overflow-y:auto;position:relative;padding:44px 34px 34px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  transform:scale(.94) translateY(10px);opacity:0;
  transition:transform .4s var(--ease), opacity .35s var(--ease);
}
.service-modal-overlay.open .service-modal{transform:scale(1) translateY(0);opacity:1;}
.service-modal-close{
  position:absolute;top:18px;inset-inline-end:18px;width:40px;height:40px;border-radius:50%;
  border:none;background:var(--surface-100);color:var(--text-600);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;
  transition:background .25s, color .25s, transform .25s var(--ease);
}
.service-modal-close:hover{background:var(--brand-800);color:var(--white);transform:rotate(90deg);}
.service-modal-icon{
  width:56px;height:56px;border-radius:16px;flex:none;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-700));color:var(--white);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  box-shadow:0 10px 20px -8px rgba(13,43,69,.5);
}
.service-modal-image{width:100%;max-height:240px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:22px;display:block;}
.service-modal-content h3{font-size:22px;font-weight:800;color:var(--text-800);margin-bottom:14px;letter-spacing:-.01em;}
.service-modal-body{font-size:15px;line-height:1.95;color:var(--text-600);}

@media (max-width:680px){
  .service-modal-overlay{align-items:flex-end;padding:0;}
  .service-modal{
    max-width:100%;max-height:88vh;border-radius:26px 26px 0 0;padding:32px 22px 28px;
    transform:translateY(100%);opacity:1;
  }
  .service-modal-overlay.open .service-modal{transform:translateY(0);}
  .service-modal::before{
    content:"";position:absolute;top:11px;inset-inline-start:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--border-300);
  }
  .service-modal-close{top:18px;inset-inline-end:16px;}
  .service-modal-content h3{font-size:19px;}
  .service-modal-image{max-height:180px;}
}

/* =====================================================================
   Projects grid + cards
   ===================================================================== */
.projects-grid{display:grid;grid-template-columns:1fr;gap:26px;}
@media (min-width:680px){.projects-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1080px){.projects-grid{grid-template-columns:repeat(3,1fr);}}

.project-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
  background:var(--brand-900);box-shadow:0 20px 40px -24px rgba(8,28,46,.38);
  transition:box-shadow .35s var(--ease);
}
.project-card:hover{box-shadow:0 30px 54px -20px rgba(8,28,46,.48);}
.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.project-card:hover img{transform:scale(1.08);}
.project-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,28,46,0) 30%, rgba(8,28,46,.92) 100%);
}
/* Index badge — sits under the shutter panel below, so it's revealed
   (and stays revealed) the moment the gate lifts. */
.project-index{
  position:absolute;top:22px;inset-inline-start:24px;z-index:1;
  font-size:13px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.6);
}
/* Gate-lift reveal — a solid navy panel that rises away like a
   construction-site gate the moment the card scrolls into view,
   uncovering the project beneath in one confident motion instead of a
   plain fade. Triggered by the same .in-view class the rest of the
   .reveal system already uses, so it needs no extra JS. */
.project-card-shutter{
  position:absolute;inset:0;z-index:4;
  background:linear-gradient(155deg,var(--brand-900) 0%,var(--brand-800) 55%,var(--brand-700) 100%);
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.65,0,.16,1) .18s;
}
.project-card.in-view .project-card-shutter{transform:translateY(-101%);}
.reveal-delay-1.in-view .project-card-shutter{transition-delay:.28s;}
.reveal-delay-2.in-view .project-card-shutter{transition-delay:.4s;}
.reveal-delay-3.in-view .project-card-shutter{transition-delay:.52s;}
.reveal-delay-4.in-view .project-card-shutter{transition-delay:.64s;}

/* Pinned badge — small red pin sticker marking a project as
   admin-featured (same is_featured flag that also selects the 3
   homepage projects). Opposite corner from .project-origin-badge and
   .project-index so nothing collides. */
.project-pin-badge{
  position:absolute;top:18px;inset-inline-start:18px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:#d64545;box-shadow:0 10px 20px -8px rgba(8,28,46,.55);
}
.project-pin-badge svg{width:16px;height:16px;color:var(--white);}

.project-card-body{
  position:absolute;inset-inline:12px;bottom:12px;padding:20px;color:var(--white);z-index:2;
  background:rgba(255,255,255,.08);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);
}
.project-tag{
  display:inline-block;background:var(--accent-500);color:var(--brand-900);font-size:11.5px;font-weight:800;
  padding:5px 12px;border-radius:999px;margin-bottom:12px;
}
.project-card-body h3{font-size:19px;font-weight:700;margin-bottom:6px;color:var(--white);}
.project-card-body span{
    color:rgba(255,255,255,.78);
}
.project-card-link{position:absolute;inset:0;z-index:3;}

/* Project origin badge — "Employer Project" vs "Consultant Company",
   sticker-style so it reads at a glance without opening the project.
   On cards it's pinned to the top corner (opposite the .project-index
   number on the homepage, so the two never collide); on the single
   project page it sits inline just above the title instead. */
.project-origin-badge{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 20px -10px rgba(8,28,46,.5);
}
.project-origin-badge.is-employer{background:var(--accent-500);color:var(--brand-900);}
.project-origin-badge.is-consultant{background:var(--brand-800);color:var(--white);}
.project-card .project-origin-badge{position:absolute;top:18px;inset-inline-end:18px;z-index:2;}
.project-hero .project-origin-badge{margin-top:14px;}


/* Project single */
.project-hero{
  position:relative;min-height:58vh;display:flex;align-items:flex-end;color:var(--white);
  background-size:cover;background-position:center;margin-top:0;
}
.project-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,28,46,.25),rgba(8,28,46,.94));}
.project-hero-inner{position:relative;z-index:1;padding:110px 0 48px;}
.project-hero-inner h1{color:var(--white);}
.project-meta-bar{
  display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  overflow:hidden;margin:-46px 0 48px;position:relative;z-index:2;
  background:var(--glass-300);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 30px 60px -28px rgba(8,28,46,.38);
}
.project-meta-item{flex:1 1 150px;padding:22px 24px;border-inline-end:1px solid var(--border-200);}
.project-meta-item:last-child{border-inline-end:none;}
.project-meta-item span{display:block;font-size:12px;color:var(--text-500);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.project-meta-item strong{font-size:15.5px;font-weight:700;color:var(--text-800);}
.project-code-stamp{
  display:inline-block;margin-top:14px;font-family:monospace;font-size:12.5px;
  letter-spacing:.06em;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.25);
  padding:4px 10px;border-radius:6px;
}

/* ---- Project datasheet (Track A.3) ---- */
.datasheet{
  border:1px solid var(--border-200);border-radius:var(--radius-lg);
  margin-bottom:48px;overflow:hidden;background:var(--white);
  box-shadow:0 20px 40px -30px rgba(8,28,46,.2);
}
.datasheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 28px;background:var(--brand-900);color:var(--white);
}
.datasheet-head h2{font-size:var(--fs-h3);font-weight:800;margin:0;color:var(--white);}
.datasheet-head .btn-outline-dark{border-color:rgba(255,255,255,.4);color:var(--white);}
.datasheet-head .btn-outline-dark:hover{background:var(--accent-500);border-color:var(--accent-500);color:var(--brand-900);}
.datasheet-block{padding:26px 28px;border-top:1px solid var(--border-200);}
.datasheet-block h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-600);margin-bottom:16px;}

.datasheet-dl{display:block;}
.dl-row{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--border-200);}
.dl-row:last-child{border-bottom:none;}
.dl-row dt{font-size:13.5px;color:var(--text-500);flex:none;margin:0;}
.dl-row dd{font-size:14.5px;font-weight:700;color:var(--text-800);text-align:end;margin:0;}
.tabular{font-variant-numeric:tabular-nums;}

.progress-track{position:relative;height:8px;background:var(--border-200);border-radius:999px;margin:20px 0 8px;overflow:hidden;}
.progress-track-fill{
  position:absolute;inset-inline-start:0;top:0;height:100%;width:var(--pct);
  background:linear-gradient(90deg,var(--brand-600),var(--accent-500));border-radius:999px;
  transition:width 1.2s var(--ease);
}
.progress-track-label{display:block;font-size:12.5px;color:var(--text-600);margin-top:4px;}

.milestone-timeline{list-style:none;margin:22px 0 0;padding:0;position:relative;}
.milestone-timeline::before{content:"";position:absolute;top:6px;bottom:6px;inset-inline-start:5px;width:1.5px;background:var(--border-200);}
.milestone-timeline li{position:relative;padding-inline-start:26px;padding-bottom:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;}
.milestone-timeline li:last-child{padding-bottom:0;}
.milestone-dot{position:absolute;inset-inline-start:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--border-300);}
.milestone-timeline li.is-done .milestone-dot{background:var(--accent-500);border-color:var(--accent-500);}
.milestone-title{font-size:14px;font-weight:600;color:var(--text-800);}
.milestone-timeline li.is-done .milestone-title{color:var(--text-500);text-decoration:line-through;text-decoration-color:var(--border-300);}
.milestone-date{font-size:12.5px;color:var(--text-500);}

.specs-table{width:100%;border-collapse:collapse;}
.specs-table tr.is-even{background:var(--surface-100);}
.specs-table td{padding:11px 14px;font-size:14px;border-bottom:1px solid var(--border-200);}
.specs-label{color:var(--text-600);width:45%;}
.specs-value{font-weight:700;color:var(--text-800);}
.specs-unit{font-weight:400;color:var(--text-500);font-size:12.5px;margin-inline-start:4px;}

.datasheet-scope{font-size:14.5px;line-height:1.8;color:var(--text-600);}

.project-body-text{max-width:820px;font-size:16.5px;color:var(--text-600);}
.project-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px;}
@media (min-width:760px){.project-gallery-grid{grid-template-columns:repeat(3,1fr);}}
.gallery-item{border-radius:var(--radius-md);aspect-ratio:1;overflow:hidden;cursor:zoom-in;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.gallery-item:hover img{transform:scale(1.06);}

/* =====================================================================
   Lightbox — built by main.js when a .gallery-item is clicked.
   The open transition is a FLIP animation (image grows from the exact
   thumbnail that was clicked); prev/next use a lighter crossfade.
   Closes on backdrop click, the close button, Escape, arrow keys, or
   a left/right swipe on touch.
   ===================================================================== */
.lightbox-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,28,46,.86);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox-overlay.open{opacity:1;visibility:visible;}
body.lightbox-open{overflow:hidden;}
.lightbox-overlay img{
  max-width:min(1100px,92vw);max-height:88vh;border-radius:var(--radius-md);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  transition:transform .45s var(--ease-spring,var(--ease)), opacity .3s var(--ease);
}
.lightbox-close{
  position:absolute;top:20px;inset-inline-end:24px;width:44px;height:44px;border-radius:50%;
  border:none;background:rgba(255,255,255,.12);color:var(--white);font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s, transform .25s var(--ease);
}
.lightbox-close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:none;background:rgba(255,255,255,.12);color:var(--white);font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s, transform .25s var(--ease);
}
.lightbox-nav:hover{background:var(--accent-500);color:var(--brand-900);}
.lightbox-prev{inset-inline-start:20px;}
.lightbox-next{inset-inline-end:20px;}
/* Nav arrow glyphs are authored for LTR (‹ prev / next ›); flip them
   in RTL so "prev" still visually points toward where the previous
   image would be, and swap which side each button sits on. */
html[dir="rtl"] .lightbox-nav{transform:translateY(-50%) scaleX(-1);}
html[dir="rtl"] .lightbox-prev{inset-inline-start:auto;inset-inline-end:20px;}
html[dir="rtl"] .lightbox-next{inset-inline-end:auto;inset-inline-start:20px;}
.lightbox-counter{
  position:absolute;bottom:24px;inset-inline-start:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
@media (max-width:640px){
  .lightbox-nav{width:44px;height:44px;font-size:22px;}
  .lightbox-prev{inset-inline-start:10px;}
  .lightbox-next{inset-inline-end:10px;}
}

/* =====================================================================
   News cards
   ===================================================================== */
.news-grid{display:grid;grid-template-columns:1fr;gap:26px;}
@media (min-width:680px){.news-grid{grid-template-columns:repeat(3,1fr);}}
.news-card{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:var(--glass-200);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 20px 40px -26px rgba(8,28,46,.22);
}
.news-card::after{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;z-index:2;
  background:var(--accent-500);transform:scaleX(0);transform-origin:inset-inline-start;
  transition:transform .4s var(--ease);
}
.news-card:hover::after{transform:scaleX(1);}
.news-card:hover{transform:translateY(-6px);box-shadow:0 28px 48px -22px rgba(8,28,46,.28);}
.news-card-img{aspect-ratio:16/10;overflow:hidden;}
.news-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.news-card:hover .news-card-img img{transform:scale(1.06);}
.news-card-body{padding:22px 22px 26px;}
.news-date{font-size:12.5px;color:var(--brand-600);font-weight:700;margin-bottom:10px;display:block;}
.news-card-body h3{font-size:17px;font-weight:700;line-height:1.4;margin-bottom:10px;color:var(--text-800);}
.news-card-body p{font-size:14px;color:var(--text-500);}
.news-readmore{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--brand-800);display:inline-flex;align-items:center;gap:6px;}

/* =====================================================================
   Clients / logos grid
   ===================================================================== */
.clients-strip{
  position:relative;isolation:isolate;
  padding:56px 0;
}
/* The frosted-glass background lives on this ::before instead of directly
   on .clients-strip, just to keep the same layered-glass look used
   elsewhere on the site (frosted panel behind, content on top). */
.clients-strip::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--glass-100);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);
}

/* Clients / partners grid — static, no animation. flex-direction:column
   keeps phones strictly single-column (each tile full width, one under
   another); from 640px up it switches to a centered, wrapping row so
   all tiles sit side by side with even spacing between them. */
.clients-grid{
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:640px){
  .clients-grid{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:22px;}
  .client-tile{flex:1 1 160px;max-width:190px;}
}

/* Client tile — bigger logo + the company name underneath it, in a
   glass tile with the same cursor-tracked spotlight used on the
   service/cert cards elsewhere on the site. */
.client-tile{
  position:relative;width:100%;border-radius:var(--radius-md);overflow:hidden;
  background:var(--glass-200);border:1px solid var(--glass-border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px 18px;--mx:50%;--my:50%;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.client-tile::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(160px circle at var(--mx) var(--my), rgba(35,78,112,.16), transparent 72%);
  transition:opacity .4s var(--ease);
}
.client-tile:hover::before{opacity:1;}
.client-tile:hover{transform:translateY(-4px);box-shadow:0 20px 34px -18px rgba(8,28,46,.24);}
.client-tile img{
  position:relative;z-index:1;max-height:64px;width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1);opacity:.6;
  transition:opacity .3s, filter .3s, transform .35s var(--ease);
}
.client-tile:hover img{filter:grayscale(0);opacity:1;transform:scale(1.08);}
.client-tile-name{
  position:relative;z-index:1;font-size:12.5px;font-weight:600;color:var(--text-500);
  text-align:center;line-height:1.4;
}

/* =====================================================================
   About split
   ===================================================================== */
/* A warm, non-white decorative panel for the About sections — a soft
   navy/gold-tinted gradient with a faint engineering blueprint grid,
   echoing .section-dark's pattern language (radial glows + grid lines)
   but in light tones, so it reads as "premium" rather than empty white
   without repeating the dark navy treatment used right above it on the
   homepage (Projects section). Used as an extra class alongside
   .section, same pattern as .section-dark. */
.section-tinted{
  width:calc(100% - 32px);max-width:1320px;margin:0 auto;
  background:linear-gradient(155deg,var(--surface-card),rgba(200,169,113,.12) 55%,var(--surface-100));
  border:1px solid var(--border-200);
  border-radius:var(--radius-xl);
  position:relative;overflow:hidden;
}
.section-tinted::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 420px at -120px -140px, rgba(13,43,69,.07), transparent 70%),
    radial-gradient(circle 380px at calc(100% + 100px) calc(100% + 120px), var(--accent-glow), transparent 70%),
    repeating-linear-gradient(0deg, rgba(13,43,69,.04) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(13,43,69,.04) 0 1px, transparent 1px 42px);
}
.about-lead{font-size:var(--fs-lead);font-weight:700;color:var(--brand-800);line-height:1.65;margin-bottom:14px;overflow-wrap:break-word;word-break:break-word;}
.about-stats-row{display:flex;flex-wrap:wrap;gap:30px;margin-top:28px;padding-top:22px;border-top:1px solid var(--border-200);}
.about-stats-row .stat-chip strong{font-size:24px;font-weight:800;color:var(--brand-800);display:block;}
.about-stats-row .stat-chip span{font-size:12.5px;color:var(--text-500);}

/* Homepage About-teaser highlight chips (icon + short value prop) —
   replaces the numeric stats row on the homepage only; the numeric
   stats still live in the hero and on about.php. */
.about-highlights-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:28px;padding-top:22px;border-top:1px solid var(--border-200);max-width:100%;}
.about-highlight-chip{display:flex;align-items:flex-start;gap:12px;flex:1 1 180px;min-width:0;}
.about-highlight-icon{
  flex:none;width:40px;height:40px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,169,113,.15);color:var(--accent-600);
}
.about-highlight-icon svg{width:20px;height:20px;}
.about-highlight-chip strong{font-size:14.5px;font-weight:800;color:var(--brand-800);display:block;margin-bottom:2px;}
.about-highlight-chip > div{min-width:0;}
.about-highlight-chip > div span{font-size:12.5px;color:var(--text-500);line-height:1.5;display:block;overflow-wrap:break-word;word-break:break-word;}
/* Below ~560px, three 180px-min chips can no longer fit even wrapped
   two-per-row without squeezing — stack one per row instead so the
   row's own intrinsic width can never exceed the phone's viewport. */
@media (max-width:560px){
  .about-highlight-chip{flex-basis:100%;}
}

/* Lightweight variant used on the homepage highlight chips: opacity-only
   fade (no translateY) so it doesn't compound with the parent .about-text
   block's own translate-reveal — avoids the "double motion"/jank feel of
   two nested transforms animating at once. Uses the shared motion tokens
   from motion.css. */
.reveal.reveal-icon{transform:none;transition:opacity var(--dur-base) var(--ease-out);}
.reveal.reveal-icon.in-view{opacity:1;transform:none;}
.about-split{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;}
@media (min-width:900px){.about-split{grid-template-columns:1fr 1fr;}}
/* min-width:0 lets this grid item shrink below its content's intrinsic
   width — without it, a grid item defaults to min-width:auto, so any
   long unbroken word/URL or a wide nested flex row (e.g. the highlight
   chips above) can silently force the whole grid track — and the page
   — wider than the viewport on mobile ("grid blowout"). */
.about-text{min-width:0;}
.about-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px -30px rgba(8,28,46,.32);}
.about-media img{width:100%;height:100%;object-fit:cover;}
.about-media-badge{
  position:absolute;bottom:24px;inset-inline-start:24px;
  background:var(--glass-300);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);padding:18px 22px;box-shadow:0 20px 40px -18px rgba(8,28,46,.28);
}
.about-media-badge strong{font-size:26px;color:var(--brand-800);display:block;}
.about-media-badge span{font-size:12.5px;color:var(--text-500);}

/* Platform logo emblem floated on the About media image — opposite
   corner from the years-active badge so the two never collide. Solid
   white backing (not the glass/blur style) so the logo reads cleanly
   regardless of whether the uploaded file has its own transparency or
   background color. Shared between the homepage About-teaser and the
   about.php page — both use the exact same .about-media markup. */
.about-media-logo-badge{
  position:absolute;top:22px;inset-inline-end:22px;
  width:72px;height:72px;border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  padding:13px;box-shadow:0 16px 34px -14px rgba(8,28,46,.4);
  border:1px solid rgba(255,255,255,.8);
}
.about-media-logo-badge img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:520px){
  .about-media-logo-badge{width:58px;height:58px;padding:10px;top:16px;inset-inline-end:16px;}
}
.about-text p{color:var(--text-600);margin-bottom:18px;font-size:16px;overflow-wrap:break-word;word-break:break-word;}
.about-text-title{font-size:var(--fs-h2);font-weight:800;line-height:1.22;margin-bottom:18px;color:var(--text-800);overflow-wrap:break-word;word-break:break-word;}
.about-list{margin-top:26px;display:grid;gap:14px;}
.about-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-700);}
.about-list li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--brand-600);margin-top:7px;}

/* Timeline (kept for compatibility, restyled) */
.timeline-track{position:relative;display:flex;overflow-x:auto;gap:0;padding:20px 4px 30px;scroll-snap-type:x proximity;}
.timeline-track::before{content:"";position:absolute;top:34px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brand-600),transparent);}
.timeline-item{flex:0 0 220px;scroll-snap-align:start;position:relative;padding-inline-end:20px;}
.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--brand-700);border:3px solid var(--white);box-shadow:0 0 0 2px var(--brand-700);margin-bottom:16px;}
.timeline-item strong{display:block;font-size:15px;margin-bottom:4px;color:var(--text-800);}
.timeline-item span{font-size:13px;color:var(--text-500);}

/* =====================================================================
   Certificates grid
   ===================================================================== */
.certs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media (min-width:680px){.certs-grid{grid-template-columns:repeat(4,1fr);}}
.cert-card{
  background:var(--glass-200);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  padding:18px;text-align:center;transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 16px 32px -22px rgba(8,28,46,.22);
  position:relative;overflow:hidden;--mx:50%;--my:50%;min-width:0;
}
.cert-card::after{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;z-index:1;
  background:var(--accent-500);transform:scaleX(0);transform-origin:inset-inline-start;
  transition:transform .4s var(--ease);
}
.cert-card:hover::after{transform:scaleX(1);}
.cert-card::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(35,78,112,.20), transparent 72%);
  transition:opacity .5s var(--ease);
}
.cert-card:hover::before{opacity:1;}
.cert-card:hover{transform:translateY(-6px);box-shadow:0 22px 38px -18px rgba(8,28,46,.28);}
.cert-card-zoomable{cursor:zoom-in;}
.cert-card-media{position:relative;z-index:1;overflow:hidden;border-radius:var(--radius-sm);margin-bottom:12px;}
.cert-card-media img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:0;display:block;position:static;transition:transform .5s var(--ease);}
.cert-card:hover .cert-card-media img{transform:scale(1.07);}
.cert-card-zoom-icon{
  position:absolute;inset-inline-end:8px;bottom:8px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--white);
  background:rgba(8,28,46,.55);backdrop-filter:blur(3px);
  opacity:.9;transform:scale(.85);transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s;
}
.cert-card:hover .cert-card-zoom-icon{opacity:1;transform:scale(1);background:var(--accent-500);color:var(--brand-900);}
/* Devices without hover (phones/tablets) never get the hover state above,
   so the icon must already read as tappable at rest rather than relying
   on a hover reveal that will never fire. */
@media (hover:none){
  .cert-card-zoom-icon{opacity:.95;transform:scale(1);}
}
.cert-card img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:12px;position:relative;z-index:1;}
.cert-card span{font-size:13px;font-weight:600;color:var(--text-700);position:relative;z-index:1;}
.cert-card small{display:block;margin-top:4px;font-size:11.5px;color:var(--text-500);position:relative;z-index:1;}

/* "Download PDF" button on Article cards (optional per-article — only
   rendered when an admin has uploaded a PDF for that article). Sits
   below the title inside the same card on the homepage; on the
   Articles page the card is also a lightbox trigger, so this link's
   click is excluded from opening the viewer (see main.js) rather than
   restructuring the DOM, which would otherwise break the lightbox's
   prev/next grouping across the grid. */
.article-pdf-btn{
  position:relative;z-index:1;width:100%;max-width:100%;margin-top:12px;
  padding:9px 10px;font-size:12px;gap:6px;justify-content:center;
  flex-wrap:wrap;row-gap:2px;box-sizing:border-box;
}
.article-pdf-btn svg{width:15px;height:15px;flex:none;}
/* The generic .cert-card span rule below (font-size/color for the
   article title) also matches this button's own text span since it's
   nested inside .cert-card — reset it back explicitly so the button
   keeps its own compact size/color instead of inheriting the title's
   styling, and let it wrap/shrink instead of forcing the button wider
   than the card on narrow phones. */
.article-pdf-btn span{
  font-size:inherit;font-weight:inherit;color:inherit;
  overflow-wrap:break-word;word-break:break-word;white-space:normal;
  min-width:0;
}

/* =====================================================================
   Company Resume — chic document-download cards
   ===================================================================== */
.resume-grid{display:grid;grid-template-columns:1fr;gap:22px;}
@media (min-width:680px){.resume-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.resume-grid{grid-template-columns:repeat(3,1fr);}}
.resume-card{
  display:flex;flex-direction:column;gap:18px;padding:30px 26px;
  background:var(--surface-card);border:1px solid var(--border-200);border-radius:var(--radius-md);
  position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.resume-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--accent-500),var(--accent-600));
  transform:scaleX(0);transform-origin:inset-inline-start;transition:transform .45s var(--ease);
}
.resume-card:hover::before{transform:scaleX(1);}
.resume-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -20px rgba(8,28,46,.22);border-color:transparent;}
.resume-card-icon{
  width:52px;height:52px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-700));color:var(--accent-500);flex-shrink:0;
}
.resume-card-body h3{font-size:17px;font-weight:800;color:var(--text-800);line-height:1.4;}
.resume-card-body p{margin-top:8px;font-size:13.5px;color:var(--text-500);line-height:1.75;}
.resume-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px;}
.resume-card-size{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--text-400);}
.resume-card-btn{padding:10px 20px;font-size:13px;gap:8px;}
.resume-card-btn svg{width:16px;height:16px;}
.resume-card-pending{opacity:.6;}
.resume-card-pending .resume-card-icon{background:var(--border-200);color:var(--text-400);}
.resume-card-pending .resume-card-btn{cursor:not-allowed;pointer-events:none;opacity:.7;}
.resume-card-pending:hover{transform:none;box-shadow:none;border-color:var(--border-200);}
.resume-card-pending:hover::before{transform:scaleX(0);}

/* =====================================================================
   Subsidiaries / group companies grid
   ===================================================================== */
.subsidiaries-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:680px){.subsidiaries-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.subsidiaries-grid{grid-template-columns:repeat(3,1fr);}}
.subsidiary-card{
  background:var(--surface-card);border:1px solid var(--border-200);border-radius:var(--radius-md);
  padding:26px 22px;text-align:center;position:relative;overflow:hidden;--mx:50%;--my:50%;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.subsidiary-card::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(35,78,112,.14), transparent 72%);
  transition:opacity .5s var(--ease);
}
.subsidiary-card:hover::before{opacity:1;}
.subsidiary-card:hover{transform:translateY(-6px);box-shadow:0 20px 38px -20px rgba(8,28,46,.24);}
.subsidiary-card img{height:84px;width:auto;max-width:78%;object-fit:contain;margin:0 auto 16px;position:relative;z-index:1;}
.subsidiary-card h3{font-size:16px;font-weight:700;margin-bottom:8px;position:relative;z-index:1;}
.subsidiary-card p{font-size:13.5px;color:var(--text-500);line-height:1.7;position:relative;z-index:1;}
.subsidiary-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--brand-700);position:relative;z-index:1;}
.subsidiary-link:hover{color:var(--brand-800);}

/* =====================================================================
   Core values grid (mission-vision.php)
   ===================================================================== */
.values-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:680px){.values-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.values-grid{grid-template-columns:repeat(3,1fr);}}
.value-card{
  background:var(--surface-card);border:1px solid var(--border-200);border-radius:var(--radius-md);
  padding:28px 24px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.value-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--accent-500),var(--accent-600));
  transform:scaleX(0);transform-origin:inset-inline-start;transition:transform .45s var(--ease);
}
.value-card:hover::before{transform:scaleX(1);}
.value-card:hover{transform:translateY(-5px);box-shadow:0 22px 38px -20px rgba(8,28,46,.24);border-color:transparent;}
.value-card-icon{
  width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-700));color:var(--accent-500);margin-bottom:16px;
}
.value-card h3{font-size:16px;font-weight:800;color:var(--text-800);margin-bottom:10px;}
.value-card p{font-size:13.5px;line-height:1.85;color:var(--text-500);}

/* =====================================================================
   Generic static content pages (policies, resources, mission, etc.)
   ===================================================================== */
.static-page-content{max-width:820px;margin:0 auto;font-size:15.5px;line-height:2;color:var(--text-600);}
.static-page-content h2{font-size:22px;font-weight:800;color:var(--text-800);margin:32px 0 14px;}
.static-page-content h2:first-child{margin-top:0;}
.static-page-content p{margin-bottom:16px;}
.static-page-content ul{margin:0 0 16px;padding-inline-start:22px;list-style:disc;}
.static-page-content li{margin-bottom:8px;}
.static-page-note{
  margin-top:36px;padding:16px 18px;border-radius:var(--radius-md);
  background:rgba(13,43,69,.06);border:1px dashed rgba(13,43,69,.25);
  font-size:13px;color:var(--text-500);
}
.static-page-image{
  position:relative;max-width:820px;margin:28px auto 0;border-radius:var(--radius-md);
  overflow:hidden;cursor:zoom-in;box-shadow:0 24px 48px -28px rgba(8,28,46,.35);
}
.static-page-image img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
.static-page-image-zoom-icon{
  position:absolute;inset-inline-end:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(13,43,69,.55);color:var(--white);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.85);transition:opacity .2s ease,transform .2s ease,background .2s ease;
  backdrop-filter:blur(4px);
}
.static-page-image:hover .static-page-image-zoom-icon{opacity:1;transform:scale(1);background:var(--accent-500);color:var(--brand-900);}
@media (max-width:768px){
  .static-page-image-zoom-icon{opacity:.95;transform:scale(1);}
}

/* =====================================================================
   Projects-on-map page
   ===================================================================== */
.map-shell{border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 30px 60px -30px rgba(8,28,46,.32);border:1px solid var(--border-200);}
#projectsMap{height:520px;width:100%;}
.map-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:13.5px;color:var(--text-500);}
.map-legend span{display:inline-flex;align-items:center;gap:7px;}
.map-legend i{width:10px;height:10px;border-radius:50%;background:var(--brand-700);display:inline-block;}

/* =====================================================================
   Category showcase (homepage "Fields of Activity" grid)
   ===================================================================== */
.cats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (min-width:680px){.cats-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1080px){.cats-grid{grid-template-columns:repeat(4,1fr);}}
.cat-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface-card);border:1px solid var(--border-200);border-radius:var(--radius-md);
  padding:24px 20px;color:var(--text-800);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.cat-card-icon{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(13,43,69,.08);color:var(--brand-700);flex:none;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.cat-card h3{font-size:16px;font-weight:700;}
.cat-card span{font-size:var(--fs-sm);color:var(--text-600);}
.cat-card:hover{
  transform:translateY(-6px);box-shadow:0 20px 38px -20px rgba(8,28,46,.28);
  border-color:transparent;background:var(--brand-800);color:var(--white);
}
.cat-card:hover span{color:rgba(255,255,255,.7);}
.cat-card:hover .cat-card-icon{background:rgba(255,255,255,.14);color:var(--white);}

/* =====================================================================
   CTA banner
   ===================================================================== */
.cta-banner{
  margin:0 24px;border-radius:var(--radius-xl);
  background:linear-gradient(120deg,var(--brand-900),var(--brand-700));
  color:var(--white);
}
.cta-banner-inner{
  display:flex;flex-direction:column;gap:24px;align-items:flex-start;
  padding:52px 32px;
}
@media (min-width:820px){
  .cta-banner-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:56px 48px;}
}
.cta-banner h2{color:var(--white);font-size:clamp(22px,2.6vw,30px);font-weight:800;margin-bottom:10px;}
.cta-banner p{color:rgba(255,255,255,.72);max-width:520px;font-size:14.5px;}
.cta-banner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;flex:none;}
.cta-banner-phone{display:flex;flex-direction:column;gap:2px;color:var(--white);}
.cta-banner-phone span{font-size:12px;color:rgba(255,255,255,.65);}
.cta-banner-phone strong{font-size:17px;font-weight:800;}

/* =====================================================================
   Contact page
   ===================================================================== */
.contact-wrap{display:grid;grid-template-columns:1fr;gap:40px;}
@media (min-width:960px){.contact-wrap{grid-template-columns:1.1fr 1fr;}}
.contact-info-card{
  background:linear-gradient(155deg,var(--brand-800),var(--brand-900));color:var(--white);
  border-radius:var(--radius-xl);padding:40px;
  position:relative;overflow:hidden;
}
.contact-info-card::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(35,78,112,.35),transparent 70%);
  bottom:-140px;inset-inline-start:-100px;pointer-events:none;
}
.contact-info-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:1;}
.contact-info-item:last-child{border-bottom:none;}
.contact-info-item .ico{
  flex:none;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.14);color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.contact-info-item span{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:4px;}
.contact-info-item strong{font-size:15px;font-weight:600;}
.contact-map{border-radius:var(--radius-md);overflow:hidden;margin-top:26px;min-height:200px;border:0;width:100%;position:relative;z-index:1;}

.form-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:600px){.form-grid{grid-template-columns:1fr 1fr;}}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:13.5px;font-weight:600;color:var(--text-600);}
.form-field input,.form-field textarea{
  border:1.5px solid var(--border-300);border-radius:var(--radius-sm);padding:13px 16px;
  font-family:inherit;font-size:14.5px;color:var(--text-800);
  background:var(--surface-card);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--text-400);}
.form-field input:focus,.form-field textarea:focus{
  outline:none;border-color:var(--brand-600);background:var(--white);
  box-shadow:0 0 0 4px rgba(35,78,112,.18);
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-success{
  background:rgba(35,78,112,.08);border:1px solid rgba(35,78,112,.28);color:var(--brand-800);padding:16px 20px;border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:600;margin-bottom:20px;
}

/* =====================================================================
   Page hero (interior pages) — breadcrumb + title header used on every
   inner page (About, Certificates, Articles, Leadership, etc).
   ===================================================================== */
.page-hero{
  position:relative;min-height:42vh;display:flex;align-items:center;color:var(--white);
  background:linear-gradient(160deg,var(--brand-900),var(--brand-600) 150%);overflow:hidden;
}
.page-hero-pattern{
  position:absolute;pointer-events:none;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(35,78,112,.4),transparent 68%);
  top:-160px;inset-inline-end:-100px;
}
.page-hero-inner{position:relative;z-index:1;padding-top:130px;}
@media (min-width:768px){.page-hero-inner{padding-top:180px;}} /* clear of the fixed pill nav + 40px top utility bar, with generous breathing room */

/* Breadcrumb — contained in a small glass pill instead of floating loose
   text directly on the gradient; a gold chevron separates each step and
   the current page is picked out in the accent-gold color so it reads
   as a clear "you are here", rather than the same white as its links. */
.breadcrumb{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:0;
  font-size:12.5px;color:rgba(255,255,255,.85);margin-bottom:22px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:8px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.breadcrumb a{
  display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.85);
  font-weight:600;white-space:nowrap;transition:color .2s var(--ease);
}
.breadcrumb a svg{width:13px;height:13px;flex:none;opacity:.8;}
.breadcrumb a:hover{color:var(--accent-500);}
.breadcrumb span{color:var(--accent-500);font-weight:700;white-space:nowrap;}
.breadcrumb a:not(:first-child)::before,
.breadcrumb span::before{
  content:"";display:inline-block;width:4px;height:4px;margin:0 10px;
  border-radius:50%;background:rgba(255,255,255,.4);flex:none;vertical-align:middle;
}

/* Small gold kicker bar above the title — same visual language as the
   .eyebrow accent used throughout the rest of the site, so the page
   hero reads as one consistent design system rather than a plain
   navy block. */
.page-hero-kicker{width:34px;height:3px;border-radius:2px;background:var(--accent-500);margin-bottom:16px;}

.page-hero h1{font-size:var(--fs-h1);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--white);}
[lang="fa"] .page-hero h1{letter-spacing:0;}
.page-hero p{margin-top:14px;max-width:600px;color:rgba(255,255,255,.72);}

/* =====================================================================
   Empty states
   ===================================================================== */
.empty-state{
  text-align:center;padding:80px 20px;color:var(--text-500);
  border:1.5px dashed var(--border-300);background:var(--glass-100);
  border-radius:var(--radius-md);
}
.empty-state-icon{font-size:36px;margin-bottom:14px;opacity:.6;}
.empty-state p{margin-bottom:18px;font-size:15px;}

/* =====================================================================
   Projects listing — filters, toolbar, view toggle, table (Track A.4)
   ===================================================================== */
.project-filter-form{margin-bottom:26px;}
.filter-row{display:flex;flex-wrap:wrap;align-items:end;gap:14px;}
.filter-field{display:flex;flex-direction:column;gap:6px;min-width:150px;}
.filter-field label{font-size:12px;font-weight:700;color:var(--text-500);text-transform:uppercase;letter-spacing:.05em;}
.filter-field select{
  border:1.5px solid var(--border-300);border-radius:8px;padding:9px 12px;font-size:13.5px;
  font-family:inherit;color:var(--text-800);background:var(--white);
}
.filter-field select:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--accent-glow);}

.projects-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;margin-bottom:26px;border-top:1px solid var(--border-200);border-bottom:1px solid var(--border-200);
}
.projects-count{font-size:13.5px;font-weight:700;color:var(--text-700);}
.projects-toolbar-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.projects-clear-link{font-size:13px;color:var(--accent-600);text-decoration:underline;}
.view-toggle{display:flex;border:1px solid var(--border-300);border-radius:8px;overflow:hidden;}
.view-toggle a{padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--text-600);}
.view-toggle a.active{background:var(--brand-800);color:var(--white);}

.projects-table-wrap{overflow-x:auto;border:1px solid var(--border-200);border-radius:var(--radius-md);}
.projects-table{width:100%;border-collapse:collapse;min-width:640px;}
.projects-table th{
  text-align:start;padding:12px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-500);background:var(--surface-100);border-bottom:1px solid var(--border-200);
}
.projects-table td{padding:13px 16px;font-size:14px;border-bottom:1px solid var(--border-200);color:var(--text-700);}
.projects-table tbody tr:hover{background:var(--surface-100);}
.projects-table tbody tr:last-child td{border-bottom:none;}
.projects-table-code{color:var(--text-500);font-size:12.5px;}
.projects-table a{color:var(--brand-800);font-weight:700;}
.projects-table a:hover{color:var(--accent-600);}
.badge-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;}
.badge-status.is-ongoing{background:#FEF3C7;color:#92400E;}
.badge-status.is-completed{background:#DCFCE7;color:#166534;}

/* =====================================================================
   Footer — rounded island
   ===================================================================== */
.site-footer{
  background:linear-gradient(160deg,var(--brand-900),var(--brand-800));color:rgba(255,255,255,.8);
  position:relative;margin-top:40px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden;
}
.footer-road-line{height:2px;background:linear-gradient(90deg,transparent,var(--accent-500),transparent);opacity:.7;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10);padding:var(--sp-16) 0 var(--sp-10);}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-logo{height:38px;margin-bottom:16px;filter:brightness(0) invert(1);}
.footer-col p{font-size:var(--fs-sm);line-height:1.8;color:rgba(255,255,255,.6);}
.footer-col h4{
  color:var(--white);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);position:relative;
}
.footer-col h4::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:28px;height:1px;background:var(--accent-500);}
.footer-col ul{display:grid;gap:11px;}
.footer-col a{font-size:var(--fs-sm);color:rgba(255,255,255,.68);transition:color .2s;}
.footer-col a:hover{color:var(--accent-500);}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social a{
  flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  transition:background .2s, border-color .2s, transform .2s, color .2s;
}
.footer-social a:hover{background:var(--accent-500);color:var(--brand-900);border-color:var(--accent-500);transform:translateY(-2px);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);}
.footer-bottom-inner{padding:22px 0;font-size:var(--fs-xs);color:rgba(255,255,255,.55);text-align:center;}

/* Center every footer column on mobile — by default it inherited the
   page's RTL/LTR text-align (start), which made the single-column
   mobile footer look fully right- or left-aligned instead of centered. */
@media (max-width:759px){
  .footer-col{text-align:center;}
  .footer-logo{margin-inline:auto;}
  .footer-col p{max-width:340px;margin-inline:auto;}
  .footer-social{justify-content:center;}
  .footer-col ul{justify-items:center;}
  .footer-map{display:flex;flex-direction:column;align-items:center;}
  .footer-col h4::after{inset-inline-start:50%;transform:translateX(-50%);}
}

/* =====================================================================
   Utility
   ===================================================================== */
.text-center{text-align:center;}
.mt-40{margin-top:40px;}
.upload-hint{
  font-size:12.5px;color:var(--text-500);background:var(--surface-100);
  border:1px dashed var(--border-300);border-radius:var(--radius-sm);padding:10px 14px;margin-top:8px;
}