/* responsive.css — all @media breakpoints, deduplicated */

/* ------------------------------------------------------------
   Premium mobile drawer elements (.mnav-header / .mnav-actions /
   .mnav-icon), injected by js/main.js into every header variant.
   Neutralized here by default so desktop/tablet — which reuse the
   very same .nav__links / .sticky-header__links / .page-header__links
   markup for their horizontal nav bar — render exactly as before.
   The @media (max-width:1024px) drawer block further down switches
   them back on for the off-canvas panel only.
   ------------------------------------------------------------ */
.mnav-header,
.mnav-actions{ display:none; }

.mnav-icon{ display:none; }

/* The wrapper wasn't part of the original markup — make it invisible
   to layout at desktop/tablet so .sticky-header__links etc. still lay
   its <a> / .nav-dropdown children out exactly as they did before. */
.mnav-nav-scroll{ display:contents; }

@media (prefers-reduced-motion: reduce){
    .preloader__ring{ animation:none; border-top-color:rgba(255,255,255,0.15); }
    .preloader__name{ animation:none; opacity:1; }
  }

@media (prefers-reduced-motion: reduce){
    .leaves span{ animation:none !important; }
  }

@media (prefers-reduced-motion: reduce){
    .hero__badge, .hero__title-line, .hero__desc, .hero__actions > *{
      animation:none !important; opacity:1 !important; transform:none !important;
    }
  }

@media (prefers-reduced-motion: reduce){
    .scroll-indicator{ opacity:1; animation:none; }
  }

@media (prefers-reduced-motion: reduce){
    .service-card{ opacity:1 !important; filter:none !important; transform:none !important; transition:border-color .3s ease; }
    .service-card__emoji, .service-card__title, .service-card__desc, .service-card__more{
      opacity:1 !important; transform:none !important;
    }
    .service-card__emoji{ animation:none !important; }
    .service-card::before, .service-card__shine, .service-card__glow-ring{ display:none; }
    #services .section-eyebrow, #services .section-title, #services .section-sub{
      opacity:1; transform:none; transition:none;
    }
  }

@media (max-width: 1024px){
    .about-grid, .value-grid, .value-section .value-grid{ grid-template-columns:1fr; }
    .services-grid, .features-grid, .sectors-grid, .method-grid{ grid-template-columns:repeat(2,1fr); }
    .stats__grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .footer-brand{ grid-column:1 / span 2; order:-1; }
    .hero__title{ font-size:52px; line-height:64px; }
    .cta-title{ font-size:44px; line-height:56px; }
  }

@media (max-width: 640px){
    .services-grid, .features-grid, .method-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .hero__content{ padding-top:0px; }
    .hero__title{ font-size:36px; line-height:44px; margin-top:8px; }
    .hero__desc{ font-size:16px; line-height:24px; padding-top:20px; }
    .hero__actions{ padding-top:24px; }
    .scroll-indicator{ margin:0 auto 20px; }
    .scroll-indicator .line{ height:28px; }
    .stats__grid{ grid-template-columns:1fr 1fr; gap:28px 16px; }
    .stats__grid > div:nth-child(1){ order:3; }
    .stats__grid > div:nth-child(2){ order:4; }
    .stats__grid > div:nth-child(3){ order:1; }
    .stats__grid > div:nth-child(4){ order:2; }
    .services-grid > .service-card:nth-child(1){ order:2; }
    .services-grid > .service-card:nth-child(2){ order:1; }
    .services-grid > .service-card:nth-child(3){ order:4; }
    .services-grid > .service-card:nth-child(4){ order:3; }
    .about-media{ order:1; }
    .about-text{ order:2; }
    .features-grid > .feature-card:nth-child(1){ order:4; }
    .features-grid > .feature-card:nth-child(2){ order:3; }
    .features-grid > .feature-card:nth-child(3){ order:2; }
    .features-grid > .feature-card:nth-child(4){ order:1; }
    .sectors-grid{ grid-template-columns:1fr 1fr; }
    .method-grid > .method-card:nth-child(1){ order:4; }
    .method-grid > .method-card:nth-child(2){ order:3; }
    .method-grid > .method-card:nth-child(3){ order:2; }
    .method-grid > .method-card:nth-child(4){ order:1; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-title{ font-size:32px; line-height:42px; }
    .cta-actions{ flex-direction:row; flex-wrap:nowrap; gap:10px; }
    .cta-actions .cta-btn-outline, .cta-actions .cta-btn-solid{ padding-left:14px; padding-right:14px; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
    .nav__brand{
    gap:16px;
}

.nav__brand-text{
    width:210px;
}

.nav__brand-tag{
    font-size:11px;
    line-height:1.4;
}
  }

/* ============================================================
   CROSS-PAGE MOBILE RHYTHM — shared by every page. Scales down
   the desktop section/footer/card spacing scale by roughly the
   same ratio everywhere so vertical rhythm stays consistent
   without touching each page's own responsive block above.
   ============================================================ */
@media (max-width: 640px){
    .section, .value-section, .vision-section, .contact-section{ padding:56px 0; }
    .stats{ padding:40px 0; }
    .cta-about, .cta-green, .cta-white, .cta-simple, .cta-plain{ padding:48px 0; }
    .method-section, .sectors-section, .intro{ padding:48px 0; }
    .stats-green{ padding:32px 0; }
    .location-section{ padding:24px 0; }
    .value-section-fix{ padding:56px 0; }
    .section-sub{ font-size:16px; line-height:25px; margin-top:12px; }

    .footer__main{ padding:40px 24px 24px; }
    .footer-grid{ gap:28px; }

    .about-grid{ gap:32px; }
    .story-card{ padding:28px; margin-top:40px; }

    .contact-form-card{ padding:24px; }
  }


@media (max-width: 1024px){
    .about-grid{ grid-template-columns:1fr; }
    .team-grid{ grid-template-columns:repeat(2,1fr); }
    .story-card{ padding:40px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .team-grid{ grid-template-columns:1fr; }
    .team-grid > .team-card:nth-child(1){ order:3; }
    .team-grid > .team-card:nth-child(2){ order:2; }
    .team-grid > .team-card:nth-child(3){ order:1; }
    .team-grid > .team-card:nth-child(4){ order:6; }
    .team-grid > .team-card:nth-child(5){ order:5; }
    .team-grid > .team-card:nth-child(6){ order:4; }
    .about-hero__title{ font-size:36px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-about__title{ font-size:24px; line-height:32px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 900px){
    .feature-row{ flex-wrap:wrap; padding:28px; gap:16px; }
    .feature-row__num{ order:1; font-size:44px; line-height:44px; }
    .feature-row__icon{ order:2; }
    .feature-row__text{ order:3; flex-basis:100%; }
  }

@media (max-width: 640px){
    .feature-row__icon{ order:1; }
    .feature-row__num{ order:2; }
    .feature-row{ justify-content:flex-end; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .page-hero-short__title{ font-size:36px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-green__title{ font-size:28px; line-height:36px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .value-section-fix .value-grid,
    .value-section .value-grid,
    .value-grid{ grid-template-columns:1fr; gap: 48px; }
    .value-section-fix .wrap{ width: 95% !important; padding: 0 24px !important; }
    .page-hero-short__title{ font-size:44px; line-height:52px; }
  }

@media (max-width: 900px){
    .method-row{ flex-wrap:wrap; padding:28px; gap:16px; }
    .method-row__icon-wrap{ order:1; }
    .method-row__text{ order:2; flex-basis:100%; }
  }

/* ============================================================
   METHODOLOGY CARD — icon + ghost number (mobile only)
   At the 900px breakpoint above, the icon and the giant background
   step number both keep their desktop sizing/position (the number
   absolutely positioned to bleed out from behind a 64px icon box).
   On phones that positioning pushes the number on top of the icon
   instead of behind it, since there's no longer a wide row of text
   next to it to bleed into — it visually crowds/overlaps the icon.
   Below, the number leaves absolute positioning entirely and becomes
   a normal, smaller, static sibling next to the icon (own decorative
   element, never overlapping), with generous gap between them and
   more breathing room before the title/description.
   ============================================================ */
@media (max-width: 640px){
    .method-row{ padding:26px 24px; gap:22px; }
    .method-row__icon-wrap{
      display:flex;
      align-items:center;
      gap:18px;
      width:auto;
      height:auto;
    }
    .method-row__icon{
      order:-1;
      width:56px; height:56px;
      font-size:26px;
      border-radius:14px;
    }
    .method-row__ghost-num{
      position:static;
      order:2;
      font-size:48px;
      line-height:1;
      color:rgba(45,106,79,0.14);
    }
    .method-row__title{ margin-top:2px; }
    .method-row__desc{ margin-top:14px; }
  }

/* ============================================================
   "VALUE WE CREATE" CARDS (methodology.html) — mobile only.
   These were rendering 2-up on phones because a more specific
   desktop rule (.value-section .value-grid, repeat(3,1fr)) was
   quietly outranking the single-column mobile override elsewhere
   in this file — fixed at the @media(max-width:1024px) rule above.
   With that corrected, one card per row is real again; the rest
   below is the premium spacing/typography pass: bigger radius,
   generous padding, a real shadow to lift each card off the dark
   background, larger title with proper line-height, and more air
   between the section title/description/cards.
   ============================================================ */
@media (max-width: 640px){
    .value-section .section-sub{ margin-top:20px; }
    .value-section .value-grid{ margin-top:40px; gap:28px; }

    .value-card{
      padding:32px 28px;
      border-radius:26px;
      border-color:rgba(255,255,255,.12);
      box-shadow:0 12px 32px rgba(0,0,0,.20);
    }
    .value-card__bar{ width:6px; height:28px; }
    .value-card__title{ font-size:22px; line-height:1.4; margin-top:22px; }
    .value-card__desc{ font-size:15px; line-height:1.7; margin-top:14px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .page-hero-short__title{ font-size:36px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-white__title{ font-size:28px; line-height:36px; }
    .value-stats__grid{ grid-template-columns:1fr 1fr; gap:16px; }
    .value-stat{ padding:24px 20px; border-radius:20px; }
    .value-title{ font-size:32px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .sector-grid{ grid-template-columns:1fr; }
    .partners-grid{ grid-template-columns:repeat(2,1fr); }
    .vision-grid{ grid-template-columns:1fr; }
    .page-hero-short__title{ font-size:44px; line-height:52px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .sector-card__row{ flex-wrap:wrap; }
    .sector-grid > .sector-card:nth-child(1){ order:2; }
    .sector-grid > .sector-card:nth-child(2){ order:1; }
    .sector-grid > .sector-card:nth-child(3){ order:4; }
    .sector-grid > .sector-card:nth-child(4){ order:3; }
    .sector-grid > .sector-card:nth-child(5){ order:6; }
    .sector-grid > .sector-card:nth-child(6){ order:5; }
    .sector-grid > .sector-card:nth-child(7){ order:8; }
    .sector-grid > .sector-card:nth-child(8){ order:7; }
    .partners-grid{ grid-template-columns:1fr; }
    .partners-grid > .partner-cell:nth-child(1){ order:4; }
    .partners-grid > .partner-cell:nth-child(2){ order:3; }
    .partners-grid > .partner-cell:nth-child(3){ order:2; }
    .partners-grid > .partner-cell:nth-child(4){ order:1; }
    .partners-grid > .partner-cell:nth-child(5){ order:8; }
    .partners-grid > .partner-cell:nth-child(6){ order:7; }
    .partners-grid > .partner-cell:nth-child(7){ order:6; }
    .partners-grid > .partner-cell:nth-child(8){ order:5; }
    .page-hero-short__title{ font-size:36px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-white__title{ font-size:28px; line-height:36px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .about-grid{ grid-template-columns:1fr; }
    .icard-grid{ grid-template-columns:repeat(2,1fr); }
    .page-hero__title{ font-size:44px; line-height:52px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .icard-grid{ grid-template-columns:1fr; }
    .icard--empty{ display:none; }
    .page-hero__title{ font-size:32px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-simple__title{ font-size:28px; line-height:36px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .about-grid{ grid-template-columns:1fr; }
    .ecard-grid{ grid-template-columns:repeat(2,1fr); }
    .vision-grid{ grid-template-columns:1fr; }
    .page-hero__title{ font-size:44px; line-height:52px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .ecard-grid{ grid-template-columns:1fr; }
    .vision-grid > .vision-card:nth-child(1){ order:3; }
    .vision-grid > .vision-card:nth-child(2){ order:2; }
    .vision-grid > .vision-card:nth-child(3){ order:1; }
    .page-hero__title{ font-size:32px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-plain__title{ font-size:28px; line-height:36px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .about-grid{ grid-template-columns:1fr; }
    .scard-grid{ grid-template-columns:1fr; }
    .stats-green__grid{ grid-template-columns:1fr; gap:24px; }
    .page-hero__title{ font-size:44px; line-height:52px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .page-hero__title{ font-size:32px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-simple__title{ font-size:28px; line-height:36px; }
    .scard{ flex-direction:column; align-items:flex-end; }
    .scard__icon{ order:-1; }
    .scard__text{ width:100%; }
    .stats-green__grid > *:nth-child(1){ order:3; }
    .stats-green__grid > *:nth-child(2){ order:2; }
    .stats-green__grid > *:nth-child(3){ order:1; }
    .pyramid-wrap{ padding-top:28px; }
    .pyramid-col{ max-width:100%; }
    .pyramid-row{ justify-content:center; padding-top:10px; }
    .pyramid-row:first-child{ padding-top:0; }
    .pyramid-bar{
      box-sizing:border-box;
      padding:9px 14px;
      gap:6px;
      flex-shrink:0;
    }
    .pyramid-bar__label{ min-width:0; white-space:normal; line-height:19px; }
    .pyramid-row:nth-child(1) .pyramid-bar{ width:100% !important; }
    .pyramid-row:nth-child(2) .pyramid-bar{ width:85% !important; }
    .pyramid-row:nth-child(3) .pyramid-bar{ width:70% !important; }
    .pyramid-row:nth-child(4) .pyramid-bar{ width:55% !important; }
    .pyramid-row:nth-child(5) .pyramid-bar{ width:40% !important; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .about-grid{ grid-template-columns:1fr; }
    .ccard-grid{ grid-template-columns:repeat(2,1fr); }
    .journey-grid{ grid-template-columns:repeat(2,1fr); gap:32px 24px; }
    .journey-line{ display:none; }
    .page-hero__title{ font-size:44px; line-height:52px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .ccard-grid{ grid-template-columns:1fr; }
    .ccard-grid > .ccard:nth-child(1){ order:4; }
    .ccard-grid > .ccard:nth-child(2){ order:3; }
    .ccard-grid > .ccard:nth-child(3){ order:2; }
    .ccard-grid > .ccard:nth-child(4){ order:1; }
    .ccard-grid > .ccard:nth-child(5){ order:8; }
    .ccard-grid > .ccard:nth-child(6){ order:7; }
    .ccard-grid > .ccard:nth-child(7){ order:6; }
    .ccard-grid > .ccard:nth-child(8){ order:5; }
    .journey-grid{ grid-template-columns:1fr; }
    .journey-grid > .journey-step:nth-child(1){ order:4; }
    .journey-grid > .journey-step:nth-child(2){ order:3; }
    .journey-grid > .journey-step:nth-child(3){ order:2; }
    .journey-grid > .journey-step:nth-child(4){ order:1; }
    .page-hero__title{ font-size:32px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .cta-green__title{ font-size:28px; line-height:36px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .contact-grid{ grid-template-columns:1fr; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .contact-hero__title{ font-size:36px; line-height:40px; }
    .form-row{ grid-template-columns:1fr; }
    .form-row + .form-row{ margin-top:0; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

@media (max-width: 1024px){
    .vm-grid{ grid-template-columns:1fr; }
    .values-grid{ grid-template-columns:1fr 1fr; }
    .page-hero-short__title{ font-size:44px; line-height:52px; }
  }

@media (max-width: 640px){
    .page-header__spacer{ display:none; }
    .values-grid{ grid-template-columns:1fr; }
    .vm-grid > .vm-card:nth-child(1){ order:2; }
    .vm-grid > .vm-card:nth-child(2){ order:1; }
    .values-grid > .value-item-card:nth-child(1){ order:3; }
    .values-grid > .value-item-card:nth-child(2){ order:2; }
    .values-grid > .value-item-card:nth-child(3){ order:1; }
    .values-grid > .value-item-card:nth-child(4){ order:6; }
    .values-grid > .value-item-card:nth-child(5){ order:5; }
    .values-grid > .value-item-card:nth-child(6){ order:4; }
    .page-hero-short__title{ font-size:36px; line-height:40px; }
    .section-title{ font-size:32px; line-height:40px; }
    .footer-grid{ grid-template-columns:1fr; }
    .footer-brand{ grid-column:1; order:-1; }
    .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  }

/* ============================================================
   MOBILE NAVIGATION — hamburger toggle, off-canvas drawer,
   backdrop overlay, body scroll lock, and accordion dropdowns.
   Everything here only takes effect at <=1024px; desktop nav
   (.nav__links / .sticky-header__links / .page-header__links
   as hover dropdowns) is completely untouched above that width.
   ============================================================ */

.mobile-nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px;
    height:40px;
    border-radius:10px;
    flex-shrink:0;
  }

.mobile-nav-toggle__bar{
    display:block;
    width:22px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .3s ease, opacity .3s ease;
  }

.nav__row .mobile-nav-toggle,
.sticky-header__row .mobile-nav-toggle{ color:#fff; }

.page-header__row .mobile-nav-toggle{ color:var(--text-dark); }

.mobile-nav-toggle.is-open .mobile-nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-open .mobile-nav-toggle__bar:nth-child(2){ opacity:0; }
.mobile-nav-toggle.is-open .mobile-nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(10,20,15,.55);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:1400;
  }

body.mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

body.mobile-nav-open{ overflow:hidden; }

@media (max-width: 1024px){
    .mobile-nav-toggle{ display:flex; }

    /* Lift the active header above the backdrop (and everything
       else) while its drawer is open — desktop stacking (z-index
       100/1000) is untouched since this rule only applies here. */
    .hero .nav, .sticky-header, .page-header{ z-index:1500 !important; }

    /* The header's own empty space shouldn't block backdrop taps while
       the drawer is open — only the toggle and the drawer panel itself
       need to stay clickable above the backdrop. */
    body.mobile-nav-open .hero .nav,
    body.mobile-nav-open .sticky-header,
    body.mobile-nav-open .page-header{
      pointer-events:none;
    }

    body.mobile-nav-open .mobile-nav-toggle,
    body.mobile-nav-open .nav__links,
    body.mobile-nav-open .sticky-header__links,
    body.mobile-nav-open .page-header__links{
      pointer-events:auto;
    }

    /* Subtle frosted blur behind the drawer, layered on the dark scrim. */
    .mobile-nav-backdrop{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

    /* ============================================================
       PREMIUM DRAWER SHELL
       Layered background (base tint + soft top-right glass highlight +
       a barely-there botanical linework, in the brand green at ~3%
       opacity) instead of a flat panel color. A gentle spring easing
       on the slide-in gives the open/close motion some life without
       being bouncy.
       ============================================================ */
    .nav__links, .sticky-header__links, .page-header__links{
      position:fixed;
      top:0; right:0;
      height:100vh; height:100dvh;
      width:min(86vw, 360px);
      margin:0;
      display:flex;
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:0;
      padding:0;
      overflow-y:auto;
      overflow-x:hidden;
      background-color:#f6faf7;
      background-image:
        radial-gradient(130% 55% at 100% 0%, rgba(255,255,255,.65), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,247,.98) 55%, rgba(240,247,242,.98) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%232d6a4f' stroke-width='1' opacity='0.035'%3E%3Cpath d='M24 118C24 78 62 78 62 38'/%3E%3Cpath d='M62 38C62 56 44 64 26 70'/%3E%3Cpath d='M110 30C110 62 80 66 80 98'/%3E%3Cpath d='M80 98C80 84 96 78 112 74'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat:no-repeat, no-repeat, repeat;
      background-size:auto, auto, 140px 140px;
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
      border-radius:28px 0 0 28px;
      box-shadow:-28px 0 60px rgba(15,40,28,.28), -6px 0 18px rgba(15,40,28,.12);
      transform:translateX(100%);
      transition:transform .5s cubic-bezier(.33,1.28,.55,1);
      z-index:20;
      direction:rtl;
    }

    .nav__links.is-nav-open,
    .sticky-header__links.is-nav-open,
    .page-header__links.is-nav-open{
      transform:translateX(0);
    }

    /* ---- Header: logo + name + subtitle + close button ---- */
    .mnav-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-shrink:0;
      padding:28px 22px 22px;
      background:linear-gradient(135deg, var(--dark-green) 0%, var(--green-800) 100%);
      opacity:0;
      transform:translateY(-10px);
      transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
    }
    .is-nav-open .mnav-header{ opacity:1; transform:translateY(0); transition-delay:.06s; }

    .mnav-header__brand{ display:flex; align-items:center; gap:14px; min-width:0; }
    .mnav-header__logo{ width:50px; height:50px; border-radius:14px; object-fit:contain; background:rgba(255,255,255,.14); padding:7px; flex-shrink:0; }
    .mnav-header__text{ min-width:0; }
    .mnav-header__name{ font-weight:800; font-size:17px; letter-spacing:.15px; color:#fff; white-space:nowrap; }
    .mnav-header__tag{
      font-size:11px; line-height:1.55; color:rgba(255,255,255,.72); margin-top:3px;
      overflow:hidden; text-overflow:ellipsis;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    }

    .mnav-close{
      width:36px; height:36px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.14);
      color:#fff;
      flex-shrink:0;
      transition:background .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
    }
    .mnav-close:hover{ background:rgba(255,255,255,.26); transform:rotate(90deg); }
    .mnav-close:active{ background:rgba(255,255,255,.32); transform:rotate(90deg) scale(.9); }
    .mnav-close svg{ width:16px; height:16px; }

    /* ---- Quick actions: language / theme / contact ----
       Colors are driven by tokens (--mnav-action-bg / --mnav-action-fg /
       --mnav-action-icon-bg) so every quick-action button — lang pill,
       theme toggle, contact link — repaints together on theme switch,
       with one definition per theme instead of one-off colors per
       button. Light-mode values here; html.dark-mode redefines the
       same tokens below.
       Scoped through the panel class (not just .mnav-action alone) so
       this reliably outranks the pre-existing .nav__links a{color:#fff}
       desktop-hero-nav rule once .mnav-actions <a> is nested inside it —
       otherwise that older, higher-specificity rule (class+element vs.
       our single class) wins and turns the Contact link white. ---- */
    .mnav-actions{
      --mnav-action-bg: rgba(255,255,255,.72);
      --mnav-action-fg: var(--text-dark);
      --mnav-action-active-chip: #fff;
      --mnav-action-icon-bg: rgba(45,106,79,.08);
      --mnav-action-border: rgba(255,255,255,.6);
      display:flex;
      align-items:stretch;
      gap:8px;
      flex-shrink:0;
      padding:18px 20px;
      border-bottom:1px solid var(--border-light);
      opacity:0;
      transform:translateY(-8px);
      transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
    }
    .is-nav-open .mnav-actions{ opacity:1; transform:translateY(0); transition-delay:.12s; }

    .mnav-lang{
      flex:1.3;
      display:flex;
      gap:2px;
      padding:4px;
      border-radius:14px;
      background:var(--mnav-action-bg);
      border:1px solid var(--mnav-action-border);
      box-shadow:0 1px 2px rgba(15,40,28,.05), 0 6px 16px rgba(15,40,28,.06);
    }
    .mnav-lang__opt{
      flex:1;
      padding:9px 4px;
      border-radius:11px;
      font-family:inherit;
      font-size:12px;
      font-weight:700;
      color:var(--mnav-action-fg);
      opacity:.55;
      transition:background .25s ease, color .25s ease, opacity .25s ease, transform .15s ease;
    }
    .mnav-lang__opt.is-active{ background:var(--mnav-action-active-chip); color:var(--green-800); opacity:1; box-shadow:0 2px 8px rgba(45,106,79,.18); }
    .mnav-lang__opt:active{ transform:scale(.94); }

    .nav__links .mnav-action, .sticky-header__links .mnav-action, .page-header__links .mnav-action{
      flex:1;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:5px;
      padding:10px 6px;
      border-radius:16px;
      background:var(--mnav-action-bg);
      border:1px solid var(--mnav-action-border);
      box-shadow:0 1px 2px rgba(15,40,28,.05), 0 6px 16px rgba(15,40,28,.06);
      color:var(--mnav-action-fg);
      font-size:10.5px;
      font-weight:600;
      text-align:center;
      transition:background .2s ease, color .2s ease, box-shadow .25s ease, transform .2s cubic-bezier(.22,1,.36,1);
    }
    .mnav-action:hover{ transform:translateY(-1px); box-shadow:0 2px 4px rgba(15,40,28,.06), 0 10px 22px rgba(15,40,28,.10); }
    .mnav-action:active{ transform:translateY(0) scale(.96); }
    .mnav-action[aria-pressed="true"]{
      background:linear-gradient(135deg, var(--green-800), var(--green-600));
      border-color:transparent;
      color:#fff;
      box-shadow:0 4px 16px rgba(45,106,79,.35);
    }
    .mnav-action[aria-pressed="true"] .mnav-action__icon{ background:rgba(255,255,255,.18); }
    .mnav-action__icon{
      width:26px; height:26px;
      display:flex; align-items:center; justify-content:center;
      border-radius:50%;
      background:var(--mnav-action-icon-bg);
      color:inherit;
      transition:background .2s ease;
    }
    .mnav-action__icon svg{ width:15px; height:15px; }

    /* ---- Nav list ---- */
    .mnav-nav-scroll{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:16px 14px 28px;
    }

    /* The desktop utility cluster (AR/EN + theme toggle) rides into
       the drawer along with the real nav links (js/main.js moves every
       child of the panel together) — hidden here since the drawer
       already has its own AR/EN + theme controls in the actions bar
       above; both stay in sync via the same shared controller either
       way. */
    .mnav-nav-scroll > .header-utility{ display:none; }

    .mnav-nav-scroll > *{
      opacity:0;
      transform:translateY(14px);
      transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
    }
    .is-nav-open .mnav-nav-scroll > *{ opacity:1; transform:translateY(0); }
    .is-nav-open .mnav-nav-scroll > *:nth-child(1){ transition-delay:.18s; }
    .is-nav-open .mnav-nav-scroll > *:nth-child(2){ transition-delay:.24s; }
    .is-nav-open .mnav-nav-scroll > *:nth-child(3){ transition-delay:.30s; }
    .is-nav-open .mnav-nav-scroll > *:nth-child(4){ transition-delay:.36s; }
    .is-nav-open .mnav-nav-scroll > *:nth-child(5){ transition-delay:.42s; }
    .is-nav-open .mnav-nav-scroll > *:nth-child(6){ transition-delay:.48s; }
    .is-nav-open .mnav-nav-scroll > *:nth-child(7){ transition-delay:.54s; }

    .nav__links .mnav-nav-scroll > a, .sticky-header__links .mnav-nav-scroll > a, .page-header__links .mnav-nav-scroll > a,
    .nav__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger, .sticky-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger, .page-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger{
      position:relative;
      display:flex;
      align-items:center;
      gap:13px;
      color:var(--text-dark) !important;
      width:100%;
      justify-content:flex-start;
      font-size:15.5px;
      font-weight:600;
      padding:14px 16px;
      border-radius:16px;
      border-bottom:none;
      transition:background .25s ease, color .2s ease, transform .15s ease, box-shadow .25s ease;
    }

    .nav__links .mnav-nav-scroll > a:hover, .sticky-header__links .mnav-nav-scroll > a:hover, .page-header__links .mnav-nav-scroll > a:hover,
    .nav__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:hover, .sticky-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:hover, .page-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:hover{
      background:var(--bg-light);
    }
    .nav__links .mnav-nav-scroll > a:hover .mnav-icon, .sticky-header__links .mnav-nav-scroll > a:hover .mnav-icon, .page-header__links .mnav-nav-scroll > a:hover .mnav-icon,
    .nav__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:hover .mnav-icon, .sticky-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:hover .mnav-icon, .page-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:hover .mnav-icon{
      transform:translateX(-3px);
      color:var(--green-800);
    }
    .nav__links .mnav-nav-scroll > a:active, .sticky-header__links .mnav-nav-scroll > a:active, .page-header__links .mnav-nav-scroll > a:active,
    .nav__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:active, .sticky-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:active, .page-header__links .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger:active{
      transform:scale(.98);
    }
    .nav__links .mnav-nav-scroll > a.is-active, .sticky-header__links .mnav-nav-scroll > a.is-active, .page-header__links .mnav-nav-scroll > a.is-active{
      background:linear-gradient(135deg, rgba(45,106,79,.14), rgba(82,183,136,.14));
      color:var(--green-800) !important;
      box-shadow:0 0 0 1px rgba(82,183,136,.16), 0 6px 18px rgba(45,106,79,.14);
    }
    .nav__links .mnav-nav-scroll > a.is-active::before, .sticky-header__links .mnav-nav-scroll > a.is-active::before, .page-header__links .mnav-nav-scroll > a.is-active::before{
      content:'';
      position:absolute;
      right:2px; top:50%;
      transform:translateY(-50%);
      width:3px; height:20px;
      border-radius:3px;
      background:var(--green-600);
    }

    .mnav-icon{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--green-700); flex-shrink:0; transition:transform .25s cubic-bezier(.22,1,.36,1), color .2s ease; }
    .mnav-icon svg{ width:100%; height:100%; }

    /* The shared .chev <img> (also used by the desktop trigger, left
       untouched) points at a placeholder asset URL that never resolves,
       so no arrow renders next to "خدماتنا" / "من نحن" in the drawer.
       Scoped to the drawer only: hide that broken image here and draw
       a small black chevron instead, flipping open exactly like the
       image was meant to — no change to the existing open/close
       transition or timing. */
    .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger .chev{
      display:none;
    }
    .mnav-nav-scroll > .nav-dropdown > .nav-dropdown__trigger::after{
      content:'';
      width:7px;
      height:7px;
      border-right:1.6px solid #1a1a1a;
      border-bottom:1.6px solid #1a1a1a;
      transform:rotate(45deg);
      flex-shrink:0;
      margin-inline-start:auto;
      transition:transform .2s ease;
    }
    .mnav-nav-scroll > .nav-dropdown.is-open > .nav-dropdown__trigger::after{
      transform:rotate(225deg);
    }

    .mnav-nav-scroll > .nav-dropdown{
      width:100%;
    }

    .nav__links .nav-dropdown__menu, .sticky-header__links .nav-dropdown__menu, .page-header__links .nav-dropdown__menu{
      position:static;
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:none;
      min-width:0;
      padding-top:0;
      max-height:0;
      overflow:hidden;
      transition:max-height .4s cubic-bezier(.22,1,.36,1);
    }

    .nav__links .nav-dropdown.is-open .nav-dropdown__menu,
    .sticky-header__links .nav-dropdown.is-open .nav-dropdown__menu,
    .page-header__links .nav-dropdown.is-open .nav-dropdown__menu{
      max-height:400px;
    }

    .nav__links .nav-dropdown__menu-inner, .sticky-header__links .nav-dropdown__menu-inner, .page-header__links .nav-dropdown__menu-inner{
      position:relative;
      box-shadow:none;
      background:transparent;
      border-radius:0;
      margin:4px 0 8px;
      padding-right:20px;
      gap:2px;
    }

    .nav__links .nav-dropdown__menu-inner::before, .sticky-header__links .nav-dropdown__menu-inner::before, .page-header__links .nav-dropdown__menu-inner::before{
      content:'';
      position:absolute;
      right:38px; top:6px; bottom:6px;
      width:1px;
      background:var(--border-light);
    }

    .nav__links .nav-dropdown__menu-inner a, .sticky-header__links .nav-dropdown__menu-inner a, .page-header__links .nav-dropdown__menu-inner a{
      padding:10px 14px !important;
      font-size:13.5px !important;
      font-weight:500;
      border-radius:12px;
    }
  }

/* ============================================================
   MOBILE HEADER CTA — the "تواصل معنا" pill in the sticky header
   was wrapping onto two lines below ~640px (no room next to the
   hamburger/logo), which doubled its height. Force a single line
   and trim it into a compact pill; desktop/tablet (>640px) keep
   the original button untouched.
   ============================================================ */
@media (max-width: 640px){
    .page-header__cta,
    .nav__cta,
    .sticky-header__cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      padding:11px 18px;
      font-size:13px;
      line-height:1;
      border-radius:999px;
    }
  }


/* ============================================================
   CONTACT PAGE — "تابعونا على" (Follow Us) social pills were
   wrapping onto two rows on mobile because their combined width
   exceeded the viewport. Force a single centered row and trim
   padding/gap just enough to fit; desktop (>640px) is untouched.
   ============================================================ */
@media (max-width: 640px){
    .social-pills{
      flex-wrap:nowrap;
      justify-content:center;
      gap:6px;
    }
    .social-pill{
      padding:8px 10px;
      font-size:11px;
    }
  }

@media (max-width: 380px){
    .social-pill{
      padding:7px 7px;
      font-size:10px;
    }
  }



/* ============================================================
   Mobile header branding fix (AR/EN) — the header row's height
   was a fixed 84px, sized for the Arabic brand text. English
   copy ("Athar Company" / "Food, Environmental & Occupational
   Safety Consulting") is longer and wraps onto more lines,
   overflowing that fixed height and visually separating the
   logo from the text block. Letting the row grow to fit its
   content (min-height instead of a hard height) and giving the
   text block a controlled max-width fixes this for both
   languages without touching desktop, the logo, the CTA, the
   hamburger, or the page's RTL layout (no dir/direction change).
   ============================================================ */
@media (max-width: 640px){
    .page-header__row{ height:auto; min-height:84px; }
    .page-header__brand-text{ max-width:190px; }
  }

/* English-only: the subtitle is noticeably longer than its Arabic
   counterpart, so it benefits from a touch less size/line-height
   on small screens to stay visually tidy next to the logo.
   Scoped to html[lang="en"] (set by js/i18n.js) so Arabic
   typography is completely unaffected. */
@media (max-width: 640px){
    html[lang="en"] .page-header__brand-tag{ font-size:10px; line-height:14px; }
  }

/* Respect reduced-motion preferences: keep the drawer fully functional,
   just skip the slide/fade/stagger choreography and hover/press motion
   (state changes still apply instantly — only the animated transition
   between states is removed). */
@media (prefers-reduced-motion: reduce){
  .nav__links, .sticky-header__links, .page-header__links,
  .mnav-header, .mnav-actions, .mnav-nav-scroll > *,
  .mnav-close, .mnav-action, .mnav-lang__opt, .mnav-icon,
  .nav-dropdown__menu{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .mnav-close:hover, .mnav-close:active{ transform:none !important; }
}