@import "design-system/tokens/index.css";

  /* Skip-to-content link — first focusable element; visually hidden until focused. */
  .skip-link{position:absolute;top:8px;inset-inline-start:8px;z-index:200;transform:translateY(-160%);background:var(--primary-700);color:var(--n-0);font-family:var(--font-arabic);font-weight:700;font-size:14px;padding:10px 18px;border-radius:var(--r-sm);text-decoration:none;box-shadow:var(--shadow-lg);transition:transform var(--hover-dur-micro) var(--hover-ease);}
  .skip-link:focus{transform:translateY(0);outline:2px solid var(--secondary-400);outline-offset:2px;}
  main:focus{outline:none;}


  /* ============ DESIGN TOKENS — page aliases mapped to the design-system primitives
     (single source of truth; raw hex lives only in design-system/tokens/colors.css) ============ */
  :root{
    --primary-50:var(--blue-50); --primary-100:var(--blue-100); --primary-500:var(--blue-500);
    --primary-600:var(--blue-600); --primary-700:var(--blue-700); --primary-800:var(--blue-800); --primary-900:var(--blue-900);
    --secondary-50:var(--teal-50); --secondary-300:var(--teal-300); --secondary-400:var(--teal-400);
    --secondary-500:var(--teal-500); --secondary-600:var(--teal-600); --secondary-700:var(--teal-700);
    --coral:var(--coral-300);
    --n-0:var(--neutral-0); --n-50:var(--neutral-50); --n-100:var(--neutral-100); --n-200:var(--neutral-200);
    --n-300:var(--neutral-300); --n-400:var(--neutral-400); --n-500:var(--neutral-500); --n-600:var(--neutral-600);

    --shadow-sm:0 1px 2px rgba(var(--rgb-brand),.05), 0 1px 1px rgba(var(--rgb-brand),.04);
    --shadow-md:0 2px 4px rgba(var(--rgb-brand),.05), 0 8px 20px rgba(var(--rgb-brand),.07);
    --shadow-lg:0 4px 8px rgba(var(--rgb-brand),.06), 0 20px 48px rgba(var(--rgb-brand),.13);
    --shadow-xl:0 12px 24px rgba(var(--rgb-navy),.10), 0 36px 80px rgba(var(--rgb-navy),.20);

    --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-pill:9999px;

    --space-section:118px; --space-section-sm:72px;

    --hero-bg:radial-gradient(140% 120% at 62% 32%, var(--surface-deep-1) 0%, var(--surface-deep-2) 42%, var(--surface-deep-4) 100%);
    --hero-text:var(--n-0); --hero-sub:var(--n-200); --hero-eyebrow:var(--secondary-300);
    --hero-outline:rgba(var(--rgb-white),.5); --hero-outline-hover:rgba(var(--rgb-white),.1);
    /* Hero depth & lighting stack — single source; layered over the (unchanged) photo for readability */
    /* the hero shots are bright studio renders, not a dark factory photo — they need a
       higher opacity than .32 to read at all against the navy radial */
    --hero-photo-op:.72;
    --hero-slide-fade:800ms;    /* cross-fade between the two hero shots */
    --hero-slide-hold:5000ms;   /* how long each shot stays before it hands over */
    --hero-scrim:linear-gradient(to left, rgba(var(--rgb-navy),.80) 0%, rgba(var(--rgb-navy),.46) 34%, rgba(var(--rgb-navy),.14) 62%, rgba(var(--rgb-navy),0) 82%);
    --hero-vignette:radial-gradient(132% 120% at 62% 22%, transparent 46%, rgba(var(--rgb-navy),.52) 100%);
    --hero-glow:radial-gradient(52% 58% at 74% 26%, rgba(var(--rgb-teal-300),.14), transparent 72%);
    --hero-hairline:rgba(var(--rgb-white),.12);
    --deep-bg:radial-gradient(150% 140% at 70% 12%, var(--surface-deep-1) 0%, var(--surface-deep-2) 45%, var(--surface-deep-4) 100%);
    --motif-hero:.08; --motif-band:.08; --motif-cta:.06; --motif-footer:.08;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ============ HOVER DESIGN LANGUAGE — one unified interaction system.
     Every hover across the site resolves to these tokens: two timing tiers,
     ONE easing curve, two lift tiers, restrained scale, and a single directional
     nudge. Durations & easing come straight from the design-system motion tokens;
     the lift/scale/nudge distances are named here so no hover hard-codes a value.
     prefers-reduced-motion is honoured globally by the block near the file end. */
  :root{
    /* Timing — two tiers only. Micro = flat properties, Lift = movement/depth. */
    --hover-ease:var(--ease-standard);       /* cubic-bezier(.4,0,.2,1) — the only hover curve */
    --hover-dur-micro:var(--duration-base);  /* 200ms — color, background, border, opacity, arrow nudge */
    --hover-dur-lift:var(--duration-slow);   /* 300ms — elevation, shadow, scale, image zoom */

    /* Elevation — two lift tiers, nothing in between */
    --hover-lift-sm:-2px;   /* buttons, chips, links, social, inputs, FAB */
    --hover-lift-md:-4px;   /* cards & panels */

    /* Scale — deliberately barely-there */
    --hover-scale-sm:1.04;    /* logo lockup & image zoom */
    --hover-scale-icon:1.05;  /* icon tiles */

    /* Directional nudge — arrows / list links (RTL: negative = toward the reader) */
    --hover-nudge:-4px;

    /* Elevated shadows on hover, mapped onto the page shadow scale */
    --hover-shadow-btn:var(--shadow-md);
    --hover-shadow-card:var(--shadow-lg);
    --hover-shadow-card-strong:var(--shadow-xl);

    /* Composite presets — components write one var instead of re-listing timing */
    --hover-t-colors:color var(--hover-dur-micro) var(--hover-ease),background-color var(--hover-dur-micro) var(--hover-ease),border-color var(--hover-dur-micro) var(--hover-ease);
    --hover-t-card:transform var(--hover-dur-lift) var(--hover-ease),box-shadow var(--hover-dur-lift) var(--hover-ease),border-color var(--hover-dur-lift) var(--hover-ease);
    --hover-t-nudge:transform var(--hover-dur-micro) var(--hover-ease);
  }

  /* ============ ENTRANCE MOTION LANGUAGE — the reveal & choreography layer.
     Interaction motion (above) answers a user action; ENTRANCE motion introduces
     content as it arrives. They are deliberately two families:
       · interaction → --ease-standard  cubic-bezier(.4,0,.2,1)   in-out, symmetric
       · entrance    → --ease-entrance  cubic-bezier(.2,.7,.3,1)   decelerate, "settles"
     Content decelerates into place like a machined part seating into a fixture —
     confident, never bouncy. Every scroll reveal and every staggered sequence on the
     page resolves to these tokens; nothing hard-codes a duration, distance, or curve.
     Honoured by prefers-reduced-motion near the file end. */
  :root{
    /* --ease-entrance, --duration-reveal, --stagger-step come from the design-system
       motion tokens (design-system/tokens/motion.css) — single source of truth.
       Only page-level composition (travel distance, transition preset) is named here. */
    --reveal-shift:   48px;   /* travel of a standalone fade-up (blocks, figures) */
    --reveal-shift-sm:32px;   /* tighter travel for sequenced children (grids, hero) */

    /* Composite preset — one transition string for anything that enters */
    --reveal-t:
      opacity   var(--duration-reveal) var(--ease-entrance),
      transform var(--duration-reveal) var(--ease-entrance);
  }

  /* Unified arrow affordance — one directional cue used by every CTA/link arrow.
     Nudges toward the reader on hover; no layout shift (transform only). */
  .cta-ar{display:inline-block;transition:var(--hover-t-nudge);}
  .btn:hover .cta-ar,
  .cta-ar-host:hover .cta-ar{transform:translateX(var(--hover-nudge));}

  /* ============ BASE ============ */
  *{box-sizing:border-box;}
  /* scroll-behavior kept at auto: smooth scrolling made the browser animate the scroll
     that happens when a form control (e.g. a radio) receives focus — it read as the
     control "jittering" then settling. Anchor jumps are instant instead. */
  html{scroll-behavior:auto;}
  html,body{margin:0;padding:0;background:var(--surface-tint-7);}
  body{font-family:var(--font-arabic),sans-serif;color:var(--n-600);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  img{max-width:100%;}
  .h{font-family:var(--font-arabic),sans-serif;}
  .mono{font-family:var(--font-arabic),monospace;direction:ltr;display:inline-block;text-transform:uppercase;letter-spacing:.16em;}
  section[id]{scroll-margin-top:104px;}
  ::selection{background:var(--secondary-300);color:var(--primary-900);}

  /* overflow-x:clip (not hidden) clips the parallax overflow WITHOUT creating a
     scroll container — so the sticky navbar keeps sticking to the viewport. */
  .page{max-width:none;margin:0 auto;background:var(--surface-tint-3);position:relative;overflow-x:clip;}
  /* Consistent side spacing across the whole site: 100px margin + 40px padding = 140px inset each side. */
  .wrap{max-width:none;margin-left:100px;margin-right:100px;padding-left:40px;padding-right:40px;}

  section{position:relative;}
  .motif{position:absolute;inset:0;background-image:var(--grain);mix-blend-mode:overlay;pointer-events:none;}

  /* Scroll reveal (progressive enhancement; content visible without JS).
     Transform + opacity only → GPU-composited, zero layout shift. */
  body.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-shift));transition:var(--reveal-t);}
  body.js [data-reveal].in{opacity:1;transform:none;}

  /* ---- Coordinated stagger -------------------------------------------------
     A group of items should not each pop on its own intersection; siblings should
     cascade as ONE choreographed sequence, preserving reading order & hierarchy.
     JS marks a container [data-stagger] and numbers its members with --reveal-i.
       · Grid whose CARDS are the reveals (bento, why): the whole set is triggered
         together the moment any member enters, then cascades by index.
       · Container that is itself the reveal (faq list, logo wall, stat strip):
         its inner items are tagged [data-reveal-child] and cascade on the
         container's .in. */
  body.js [data-stagger] > [data-reveal].in{transition-delay:calc(var(--reveal-i, 0) * var(--stagger-step));}

  body.js [data-reveal-child]{opacity:0;transform:translateY(var(--reveal-shift-sm));transition:var(--reveal-t);}
  body.js [data-stagger].in [data-reveal-child]{opacity:1;transform:none;transition-delay:calc(var(--reveal-i, 0) * var(--stagger-step));}

  /* ---- Parallax depth ------------------------------------------------------
     Decorative layers drift as they pass through the viewport, separating from
     the foreground to create depth (the hero photo already does this). JS writes
     a per-layer --py each frame; the transform is transform-only + GPU-composited,
     so it never triggers layout and never fights a hover transform (those elements
     aren't tagged). Layers with a base transform compose --py themselves (see
     .cta-line). Untouched under reduced motion — JS leaves --py at 0. */
  [data-parallax]{transform:translate3d(0, var(--py, 0px), 0);}

  /* ============ LOGO (inline SVG brand lockup) ============ */
  .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--primary-700);}
  .logo svg{display:block;flex-shrink:0;transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .logo:hover svg{transform:scale(var(--hover-scale-sm));}
  .logo .logo-tile{color:var(--secondary-400);}
  .logo-word{display:flex;flex-direction:column;line-height:1;}
  .logo-word b{font-family:var(--font-arabic);font-weight:900;font-size:23px;color:inherit;letter-spacing:-.01em;}
  .logo-word small{font-family:var(--font-arabic);font-weight:600;font-size:9.5px;letter-spacing:.22em;color:var(--secondary-600);margin-top:3px;}
  footer .logo{color:var(--n-0);}
  footer .logo .logo-tile{color:var(--secondary-300);}
  footer .logo-word small{color:var(--coral);}

  /* ============ NAVBAR — translucent blurred bar (from index.html) ============ */
  header.nav{position:sticky;top:0;z-index:50;background:rgba(var(--rgb-white),.62);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid transparent;transition:border-color var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-micro) var(--hover-ease),background var(--hover-dur-micro) var(--hover-ease);}
  header.nav.scrolled{background:rgba(var(--rgb-white),.62);border-bottom-color:rgba(var(--rgb-white),.5);box-shadow:0 6px 20px -8px rgba(var(--rgb-brand),.22);}
  header.nav .nav-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:32px;}
  header.nav .nav-links{display:flex;gap:6px;align-items:center;}
  header.nav .nav-links a{position:relative;font-family:var(--font-arabic);font-size:15px;font-weight:500;color:var(--n-500);text-decoration:none;padding:8px 13px;border-radius:var(--r-sm);transition:var(--hover-t-colors);}
  /* Animated teal-green underline: grows in on hover, stays on the active link. */
  header.nav .nav-links a::after{content:"";position:absolute;bottom:2px;left:50%;width:60%;height:2px;border-radius:2px;background:var(--secondary-400);transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform var(--hover-dur-micro) var(--hover-ease);}
  header.nav .nav-links a:hover{color:var(--primary-700);}
  header.nav .nav-links a:hover::after,
  header.nav .nav-links a.active::after{transform:translateX(-50%) scaleX(1);}
  header.nav .nav-links a.active{font-weight:700;color:var(--primary-700);}
  .nav-right{display:flex;align-items:center;gap:10px;}
  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--primary-700);border-radius:var(--r-sm);transition:background var(--hover-dur-micro) var(--hover-ease);}
  .nav-toggle:hover{background:var(--primary-50);}

  .mobile-menu{display:none;}
  @media (max-width:880px){
    .mobile-menu{display:block;max-height:0;overflow:hidden;margin:10px 0 0;background:rgba(var(--rgb-white),.98);border:1px solid var(--n-100);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);transition:max-height .32s var(--ease-entrance);}
    .mobile-menu.open{max-height:520px;margin-bottom:14px;}
    .mobile-menu .mm-inner{padding:14px 14px 18px;display:flex;flex-direction:column;gap:4px;}
    /* Menu links only — :not(.btn) so the CTA keeps its btn-primary white fill/text
       instead of inheriting the muted link colour (matches the desktop nav CTA). */
    .mobile-menu a:not(.btn){font-family:var(--font-arabic);font-size:16px;font-weight:600;color:var(--n-500);text-decoration:none;padding:13px 14px;border-radius:var(--r-sm);transition:var(--hover-t-colors);}
    .mobile-menu a:not(.btn):hover{background:var(--primary-50);color:var(--primary-700);}
    .mobile-menu .btn{margin-top:12px;width:100%;justify-content:center;}
  }

  /* ============ BUTTONS (preserved) ============ */
  .btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-sm);font-family:var(--font-arabic);font-weight:700;text-decoration:none;cursor:pointer;border:none;transition:background var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-lift) var(--hover-ease),transform var(--hover-dur-lift) var(--hover-ease),border-color var(--hover-dur-micro) var(--hover-ease);white-space:nowrap;}
  .btn:active{transform:translateY(1px);}
  .btn:focus-visible{outline:2px solid var(--secondary-400);outline-offset:2px;}
  .btn-sm{padding:11px 22px;font-size:15px;}
  .btn-md{padding:13px 26px;font-size:15px;}
  .btn-lg{padding:15px 30px;font-size:16px;}
  .btn-primary{background:var(--primary-700);color:var(--n-0);box-shadow:0 4px 14px rgba(var(--rgb-brand),.22);}
  .btn-primary:hover{background:var(--primary-800);box-shadow:0 8px 22px rgba(var(--rgb-brand),.30);transform:translateY(var(--hover-lift-sm));}
  .btn-teal{background:var(--secondary-400);color:var(--primary-900);box-shadow:0 4px 14px rgba(var(--rgb-teal),.30);}
  .btn-teal:hover{background:var(--secondary-500);box-shadow:0 8px 24px rgba(var(--rgb-teal),.38);transform:translateY(var(--hover-lift-sm));}
  .btn-outline-light{background:transparent;border:1.5px solid var(--hero-outline);color:var(--hero-text);}
  .btn-outline-light:hover{background:var(--hero-outline-hover);border-color:var(--n-0);}
  .btn-outline-blue{background:transparent;border:1.5px solid var(--primary-700);color:var(--primary-700);}
  .btn-outline-blue:hover{background:var(--primary-50);}
  .btn-ondark{background:var(--primary-900);color:var(--n-0);}
  .btn-ondark:hover{background:var(--primary-800);transform:translateY(var(--hover-lift-sm));}
  .btn-white{background:var(--n-0);color:var(--primary-700);box-shadow:0 4px 14px rgba(var(--rgb-navy),.16);}
  .btn-white:hover{transform:translateY(var(--hover-lift-sm));box-shadow:0 8px 22px rgba(var(--rgb-navy),.22);}

  /* ============ SHARED ATOMS ============ */
  .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
  .eyebrow span.bar{width:24px;height:2px;background:var(--secondary-400);border-radius:2px;}
  .eyebrow span.txt{font-family:var(--font-arabic);font-size:14px;font-weight:700;color:var(--secondary-700);letter-spacing:.01em;}
  .eyebrow.on-dark span.txt{color:var(--secondary-300);}
  .icon-tile{border-radius:var(--r-md);background:var(--secondary-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--hover-dur-micro) var(--hover-ease),transform var(--hover-dur-lift) var(--hover-ease);}

  .sec-head{max-width:660px;}
  .sec-head h2{margin:0 0 12px;font-family:var(--font-arabic);font-size:40px;font-weight:800;color:var(--primary-700);letter-spacing:-.018em;line-height:1.18;}
  .sec-head p{margin:0;font-size:18px;line-height:1.7;color:var(--n-400);}

  /* ============ HERO — editorial + layered QC readout (new) ============ */
  .hero{overflow:hidden;background:var(--hero-bg);padding:64px 0 96px;}
  .hero .motif{opacity:var(--motif-hero);}
  .hero .blob{position:absolute;width:520px;height:520px;border-radius:50%;inset-inline-start:-160px;top:-180px;background:radial-gradient(circle at 40% 40%, rgba(var(--rgb-teal),.26), transparent 70%);pointer-events:none;}
  .hero .blob2{position:absolute;width:420px;height:420px;border-radius:50%;inset-inline-end:-140px;bottom:-200px;background:radial-gradient(circle at 50% 50%, rgba(var(--rgb-blue-500),.34), transparent 70%);pointer-events:none;}
  .hero-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;}
  .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:var(--r-pill);background:rgba(var(--rgb-white),.07);border:1px solid rgba(var(--rgb-white),.14);margin-bottom:26px;}
  .hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--secondary-300);box-shadow:0 0 0 4px rgba(var(--rgb-teal-300),.18);}
  .hero-eyebrow span{font-family:var(--font-arabic);font-size:13.5px;font-weight:700;color:var(--surface-tint-8);}
  .hero h1{margin:0;font-family:var(--font-arabic);font-size:62px;line-height:1.12;font-weight:800;color:var(--hero-text);letter-spacing:-.02em;}
  .hero h1 .accent{color:var(--secondary-300);}
  .hero p.lead{margin:26px 0 0;font-size:19px;line-height:1.85;color:var(--hero-sub);max-width:520px;}
  .hero-cta{display:flex;gap:var(--space-3-5);margin-top:var(--space-9);flex-wrap:wrap;}
  .hero-points{display:flex;gap:0;margin-top:40px;flex-wrap:wrap;}
  .hero-points span{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--hero-sub);padding-inline-end:26px;margin-inline-end:26px;border-inline-end:1px solid rgba(var(--rgb-white),.12);}
  .hero-points span:last-child{border-inline-end:none;margin-inline-end:0;padding-inline-end:0;}
  .hero-points i{width:7px;height:7px;border-radius:50%;background:var(--secondary-400);box-shadow:0 0 0 4px rgba(var(--rgb-teal),.16);}

  /* layered readout stack */
  .readout{position:relative;min-height:440px;}
  .panel-glass{position:absolute;inset-inline-end:0;top:0;width:330px;background:rgba(var(--rgb-white),.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(var(--rgb-white),.16);border-radius:var(--r-xl);padding:24px;box-shadow:0 24px 60px rgba(var(--rgb-navy),.42);}
  .panel-glass .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
  .panel-glass .ph .lab{font-family:var(--font-arabic);font-size:10.5px;letter-spacing:.18em;color:rgba(var(--rgb-white),.6);direction:ltr;}
  .panel-glass .ph .live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-arabic);font-size:11.5px;font-weight:700;color:var(--secondary-300);}
  .panel-glass .ph .live i{width:7px;height:7px;border-radius:50%;background:var(--secondary-300);box-shadow:0 0 0 4px rgba(var(--rgb-teal-300),.18);}
  .sp-row{margin-bottom:16px;}
  .sp-row:last-child{margin-bottom:0;}
  .sp-row .sp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
  .sp-row .sp-k{font-family:var(--font-arabic);font-size:13px;font-weight:600;color:rgba(var(--rgb-white),.82);}
  .sp-row .sp-v{font-family:var(--font-arabic);font-size:13px;font-weight:700;color:var(--secondary-300);direction:ltr;}
  .sp-bar{height:7px;border-radius:var(--r-pill);background:rgba(var(--rgb-white),.14);overflow:hidden;}
  .sp-bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--secondary-500),var(--secondary-300));transform-origin:right;transform:scaleX(var(--w,1));}
  body.js .sp-bar i{animation:grow 1.1s var(--ease-entrance) both;animation-delay:var(--d,.2s);}
  @keyframes grow{from{transform:scaleX(0);}to{transform:scaleX(var(--w,1));}}

  .panel-badge{position:absolute;inset-inline-start:0;bottom:6px;width:260px;background:var(--n-0);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:14px;}
  .panel-badge .icon-tile{width:46px;height:46px;border-radius:12px;}
  .panel-badge .label{font-family:var(--font-arabic);font-size:14.5px;font-weight:700;color:var(--primary-700);line-height:1.45;}
  .panel-code{position:absolute;inset-inline-start:34px;top:96px;background:rgba(var(--rgb-navy),.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(var(--rgb-white),.14);border-radius:var(--r-pill);padding:9px 16px;font-family:var(--font-arabic);font-size:11px;letter-spacing:.16em;color:var(--coral);direction:ltr;display:flex;align-items:center;gap:8px;}
  .panel-code i{width:6px;height:6px;border-radius:50%;background:var(--coral);}

  /* ============ SECTOR MARQUEE — horizontal ticker (new) ============ */
  /* Brand dot-grid pattern (design-system motif) on white; edges still fade via the mask (side blur kept). */
  .marquee{background:
      radial-gradient(circle, var(--alpha-coral-40) 2.2px, transparent 2.6px) 0 0 / 40px 40px,
      var(--n-0);
    border-bottom:1px solid var(--n-100);padding:24px 0;position:relative;overflow:hidden;
    /* Anchor the track to the LEFT edge (page is RTL): a wider-than-container track would
       otherwise pin to the right and empty the right edge as it scrolls left. Chips keep
       their own direction:rtl so Arabic text stays correct. */
    direction:ltr;
    -webkit-mask-image:linear-gradient(90deg,transparent,var(--neutral-1000) 9%,var(--neutral-1000) 91%,transparent);mask-image:linear-gradient(90deg,transparent,var(--neutral-1000) 9%,var(--neutral-1000) 91%,transparent);}
  .marquee-track{display:flex;direction:ltr;width:max-content;animation:slide 76s linear infinite;}
  /* Each half is one identical group; -50% shifts the track by exactly one group width. */
  .m-group{display:flex;flex-shrink:0;}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  @keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .m-chip{display:inline-flex;direction:rtl;align-items:center;gap:11px;margin-inline-start:14px;padding:11px 22px;border:1px solid var(--n-100);border-radius:var(--r-pill);background:var(--surface-card);font-family:var(--font-arabic);font-weight:700;font-size:15px;color:var(--primary-700);white-space:nowrap;flex-shrink:0;}
  .m-chip i{width:8px;height:8px;border-radius:50%;background:var(--secondary-400);flex-shrink:0;}

  /* ============ TRUSTED BY — client logo wall (new; lightweight credibility) ============ */
  /* Sits calmly between the marquee and About: white ground, a hairline to close it,
     and muted placeholder logos that warm to the brand teal on hover. */
  /* Tinted ground inherited from the retired .quality section above, so the
     page keeps alternating white / tint down its length. */
  /* Back to white now that .quality sits above it again and supplies the tint —
     the two adjacent tinted grounds would otherwise merge into one long band. */
  .trusted{background:var(--n-0);padding:var(--space-section-sm) 0;border-bottom:1px solid var(--n-100);}
  .trusted-head{text-align:center;}
  .trusted-head .eyebrow{margin-bottom:var(--space-3);justify-content:center;}
  .trusted h2{margin:0;font-family:var(--font-arabic);font-size:26px;font-weight:800;color:var(--primary-700);letter-spacing:-.01em;line-height:1.3;}
  /* Logo grid — six across, easing down to keep rows tidy at every width. */
  .tb-grid{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4);}
  .tb-logo{display:flex;align-items:center;justify-content:center;min-height:88px;padding:var(--space-5);background:var(--surface-card);border:1px solid var(--n-100);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);color:var(--n-300);transition:color var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard);}
  .tb-logo svg{width:38px;height:38px;display:block;}
  .tb-logo:hover{color:var(--primary-700);border-color:var(--secondary-300);box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift-sm));}
  .tb-note{margin:var(--space-6) 0 0;text-align:center;font-family:var(--font-arabic);font-size:13px;color:var(--n-400);}

  /* Partner testimony — logo-forward card: a tinted band hands the mark the top
     of the card at a readable size, the partner's own words sit under it, and
     the attribution closes it. Rail — native horizontal scroll with snap points.
     Three cards fill the row; a fourth peeks in and the arrows page through. */
  .pt-swiper{position:relative;margin-top:var(--space-10);}
  .pt-rail{list-style:none;margin:0;padding:var(--space-2) var(--space-1) var(--space-4);display:flex;gap:var(--space-5);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
  .pt-rail::-webkit-scrollbar{display:none;}
  .pt-card{position:relative;flex:0 0 calc((100% - (var(--space-5) * 2)) / 3);scroll-snap-align:start;display:flex;flex-direction:column;padding:0;overflow:hidden;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);transition:border-color var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard);}
  .pt-card:hover{border-color:var(--secondary-300);box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift-sm));}
  /* Logo band — fixed height so marks of wildly different aspect ratios still
     line up across the row. */
  .pt-band{display:grid;place-items:center;min-height:96px;padding:var(--space-5);background:var(--primary-50);border-bottom:1px solid var(--n-100);}
  /* Body — the words, then the attribution pushed to the bottom, so every card
     in the row ends on the same line however long the quote runs. */
  .pt-body{flex:1;display:flex;flex-direction:column;padding:var(--space-5-5) var(--space-6) var(--space-6);text-align:center;}
  .pt-quote{flex:1;margin:0;font-family:var(--font-arabic);font-size:15px;line-height:1.9;color:var(--n-600);}
  .pt-by{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-4-5);padding-top:var(--space-4);border-top:1px solid var(--n-100);}

  /* Arrows — hidden by script when the rail has nothing to scroll. */
  .pt-nav{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-2);}
  .pt-nav[hidden]{display:none;}
  .pt-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--n-100);border-radius:var(--r-pill);background:var(--n-0);color:var(--primary-700);cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color var(--hover-dur-micro) var(--hover-ease),color var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-lift) var(--hover-ease),transform var(--hover-dur-lift) var(--hover-ease);}
  .pt-arrow svg{width:20px;height:20px;display:block;}
  .pt-arrow:hover:not(:disabled){border-color:var(--secondary-300);color:var(--secondary-600);box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift-sm));}
  .pt-arrow:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
  .pt-arrow:disabled{opacity:.38;cursor:default;box-shadow:none;}
  /* The rail is RTL-aware: the "next" chevron must point the way reading runs. */
  [dir="rtl"] .pt-arrow svg{transform:scaleX(-1);}
  .pt-logo{max-width:158px;max-height:50px;width:auto;height:auto;object-fit:contain;display:block;}
  /* No mark uploaded yet — the initial keeps the band from reading as a gap. */
  .pt-initial{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-pill);background:var(--secondary-50);color:var(--secondary-600);font-size:22px;font-weight:800;line-height:1;}
  .pt-name{font-family:var(--font-arabic);font-size:15px;font-weight:800;color:var(--primary-700);}
  .pt-person{font-family:var(--font-arabic);font-size:12.5px;line-height:1.5;color:var(--n-400);}
  /* Stretched link — the anchor keeps the company as its accessible name while
     the whole card becomes the hit area. */
  .pt-link{color:inherit;text-decoration:none;}
  .pt-link::after{content:"";position:absolute;inset:0;border-radius:inherit;}
  .pt-card:hover .pt-link{color:var(--secondary-600);}
  .pt-link:focus-visible{outline:none;}
  .pt-card:has(.pt-link:focus-visible){box-shadow:var(--shadow-focus);border-color:var(--secondary-400);}

  /* ============ ABOUT — editorial split (new) ============ */
  .about{background:var(--n-0);padding:var(--space-section) 0;}
  .about .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center;}
  .about-figure{position:relative;}
  /* من نحن: drop the eyebrow's own bottom gap; the title's 18px top margin is the only spacing. */
  .about .eyebrow{margin-bottom:0;}
  .about-num{font-family:var(--font-arabic);font-size:150px;font-weight:700;line-height:.8;color:var(--primary-50);letter-spacing:-.04em;direction:ltr;}
  .about h2{margin:18px 0 0;font-family:var(--font-arabic);font-size:36px;font-weight:800;line-height:1.32;color:var(--primary-700);letter-spacing:-.012em;}
  .about h2 .hl{color:var(--secondary-600);}
  .about-rule{width:60px;height:3px;background:var(--secondary-400);border-radius:2px;margin-top:var(--space-7);}
  .about p.body{margin:0 0 28px;font-size:19px;line-height:2;color:var(--n-500);}
  /* Lead-in emphasis on the opening clause — editorial entry point, stronger hierarchy */
  .about .lead-in{font-weight:700;color:var(--primary-700);}
  /* Credibility marker — years of experience + manufacturing expertise (editorial, not a dashboard tile) */
  .about-cred{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6);}
  .about-cred .ac-v{font-family:var(--font-arabic),sans-serif;font-size:52px;font-weight:800;line-height:.9;letter-spacing:-.02em;color:var(--secondary-600);}
  .about-cred .ac-t{display:flex;flex-direction:column;gap:var(--space-0-5);}
  .about-cred .ac-k{font-family:var(--font-arabic),sans-serif;font-size:16px;font-weight:800;color:var(--primary-700);line-height:1.3;}
  .about-cred .ac-s{font-size:13.5px;line-height:1.6;color:var(--n-400);max-width:280px;}
  .about-chips{display:flex;gap:12px;flex-wrap:wrap;}
  .a-chip{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid var(--n-100);border-radius:var(--r-pill);background:var(--surface-card);font-family:var(--font-arabic);font-size:14.5px;font-weight:700;color:var(--primary-700);box-shadow:var(--shadow-sm);transition:var(--hover-t-card);}
  .a-chip:hover{border-color:var(--secondary-300);box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift-sm));}
  .a-chip svg{flex-shrink:0;}

  /* ============ PRODUCTS — alternating editorial rows (new) ============ */
  .products{padding:var(--space-section) 0;background:linear-gradient(180deg,var(--n-0) 0%,var(--surface-tint-4) 100%);}
  .products-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px;}
  .link-arrow{font-family:var(--font-arabic);font-size:15px;font-weight:700;color:var(--primary-700);text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .link-arrow span{display:inline-block;transition:var(--hover-t-nudge);}
  .link-arrow:hover{color:var(--primary-800);}
  .link-arrow:hover span{transform:translateX(var(--hover-nudge));}
  .prow{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;padding:46px 0;border-top:1px solid var(--n-100);}
  .prow:last-child{border-bottom:1px solid var(--n-100);}
  .prow.rev .pswatch{order:2;}
  .pswatch{position:relative;height:248px;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(150deg,var(--primary-700),var(--primary-800));box-shadow:var(--shadow-lg);display:flex;align-items:flex-end;padding:26px;transition:transform var(--hover-dur-lift) var(--hover-ease),box-shadow var(--hover-dur-lift) var(--hover-ease);}
  .pswatch::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(var(--rgb-white),.04) 0,rgba(var(--rgb-white),.04) 14px,transparent 14px,transparent 28px);}
  .pswatch::after{content:"";position:absolute;right:-40px;top:-77px;width:220px;height:220px;border-radius:50%;background:var(--secondary-400);}
  .pswatch .p-num{position:absolute;right:24px;top:18px;font-family:'Exo',sans-serif;font-size:64px;font-weight:700;color:var(--n-0);direction:ltr;line-height:1;}
  .pswatch .p-code{position:relative;font-family:'Exo',sans-serif;font-size:12px;letter-spacing:.18em;color:rgba(var(--rgb-white),.7);direction:ltr;}
  .prow:hover .pswatch{transform:translateY(var(--hover-lift-md));box-shadow:var(--shadow-xl);}
  .ptext .prod-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-arabic);font-size:12px;font-weight:700;padding:6px 14px;border-radius:var(--r-pill);background:var(--primary-50);color:var(--primary-600);margin-bottom:16px;}
  .ptext .prod-tag i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--secondary-400);flex-shrink:0;}
  .ptext h3{margin:0;font-family:var(--font-arabic);font-size:30px;font-weight:800;color:var(--primary-700);letter-spacing:-.01em;}
  /* Row image + title link to the product-detail page. */
  a.pswatch{text-decoration:none;cursor:pointer;}
  .ptext h3 a{color:inherit;text-decoration:none;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .ptext h3 a:hover{color:var(--secondary-600);}
  .ptext p{margin:12px 0 22px;font-size:16px;line-height:1.85;color:var(--n-500);max-width:480px;}
  .prod-link{font-family:var(--font-arabic);font-size:15px;font-weight:700;color:var(--secondary-600);text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .prod-link span{display:inline-block;transition:var(--hover-t-nudge);}
  .prod-link:hover{color:var(--secondary-700);}
  .prod-link:hover span{transform:translateX(var(--hover-nudge));}
  /* Industry badge over the product image — instant sector recognition when scanning the rows */
  .pswatch .p-industry{position:absolute;top:18px;left:24px;z-index:2;display:inline-flex;align-items:center;gap:var(--space-2);padding:7px 13px;border-radius:var(--r-pill);background:rgba(var(--rgb-white),.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(var(--rgb-white),.22);font-family:var(--font-arabic),sans-serif;font-size:12.5px;font-weight:700;color:var(--n-0);}
  .pswatch .p-industry i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--secondary-300);flex-shrink:0;}

  /* ============ INDUSTRIES — bento (ported from homepage-v2, class-based) ============ */
  .ind{padding:var(--space-section) 0;background:linear-gradient(180deg,var(--n-50),var(--surface-tint-5));}
  .ind::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(var(--rgb-brand),.04) 1.3px, transparent 1.5px);background-size:32px 32px;pointer-events:none;}
  .ind .wrap{position:relative;}
  .bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:18px;margin-top:40px;}

  /* shared sector card */
  .ind-card{position:relative;overflow:hidden;text-decoration:none;border-radius:var(--r-xl);background:linear-gradient(180deg,var(--n-0),var(--surface-tint-2));border:1px solid var(--surface-tint-6);box-shadow:0 1px 0 rgba(var(--rgb-white),.9) inset,0 16px 34px -20px rgba(var(--rgb-brand),.36);padding:24px;display:flex;}
  .ind-card .nm{font-family:var(--font-arabic);font-size:18px;font-weight:800;color:var(--primary-700);margin:0;}
  /* one step darker than the usual muted text: it now sits over a photo, not flat white */
  .ind-card .ds{margin:5px 0 0;font-size:13px;color:var(--n-500);line-height:1.6;}
  .ind-card .draw{display:block;margin-top:12px;height:2px;width:42px;background:var(--secondary-400);}

  /* sector photo layer — sits behind content; a veil keeps the existing text colors legible */
  .ind-media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
  .ind-media img{width:100%;height:100%;object-fit:cover;object-position:0% 55%;display:block;
    /* brightness<1 gives the very light photos (paper, industrial) tonal body;
       high contrast would clip them to flat white instead */
    filter:saturate(1.14) contrast(1.03) brightness(.93);
    transition:transform var(--duration-slow) var(--ease-standard);}
  /* the photo reads clean; the veil ramps up late, only under the bottom text band */
  .ind-media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(var(--rgb-white),0) 0%,
      rgba(var(--rgb-white),.06) 42%,
      rgba(var(--rgb-white),.58) 64%,
      rgba(var(--rgb-white),.88) 82%,
      rgba(var(--rgb-white),.94) 100%);
    transition:opacity var(--duration-slow) var(--ease-standard);}
  /* content sits above the photo (feat-tile children already carry their own z-index) */
  .ind-card>div{position:relative;z-index:1;}
  .ind-card>.ic-plate{z-index:1;}
  .ind-card:hover .ind-media img,
  .ind-card:focus-visible .ind-media img{transform:scale(1.06);}
  .ind-card:hover .ind-media::after,
  .ind-card:focus-visible .ind-media::after{opacity:.9;}

  /* two-layer "plate" icon */
  .ic-plate{position:relative;width:50px;height:50px;flex-shrink:0;}
  .ic-plate .plate-back{position:absolute;inset:0;border-radius:14px;background:var(--teal-100);transform:translate(5px,5px);}
  .ic-plate .ico-pop{position:absolute;inset:0;border-radius:14px;background:var(--n-0);border:1px solid var(--surface-tint-9);display:flex;align-items:center;justify-content:center;}
  .ic-plate .ico-pop svg{stroke:var(--secondary-700);}

  /* every non-feature sector card: icon on its own row, then title, then description */
  .ind-card.tall{flex-direction:column;justify-content:space-between;}
  /* Photos come in very different color casts (warm wood, pale paper, cool industrial).
     The scrim is WHITE, running RIGHT→LEFT with the reading order: near-opaque where the
     Arabic line starts, opening up to the photo at the far edge. Because a white veil can
     only lift a photo that is already light, the image is brightened and de-saturated
     first — that is what stops the dark tiles (wood, industrial) from muddying it.
     A light bottom pass carries the tail of the description, which spans the full width. */
  .ind-card.tall .ind-media img{filter:saturate(1.02) contrast(1.04) brightness(1.03);}
  .ind-card.tall .ind-media::after{background:
      linear-gradient(to left,
        rgba(var(--rgb-white),.94) 0%,
        rgba(var(--rgb-white),.74) 30%,
        rgba(var(--rgb-white),.30) 64%,
        rgba(var(--rgb-white),.04) 100%),
      linear-gradient(0deg, rgba(var(--rgb-white),.38) 0%, rgba(var(--rgb-white),.10) 42%, rgba(var(--rgb-white),0) 70%);}
  /* hover lifts the scrim slightly instead of dropping it, so text never loses contrast */
  .ind-card.tall:hover .ind-media::after,
  .ind-card.tall:focus-visible .ind-media::after{opacity:1;}

  /* feature tile — dark, spans 2×2 */
  .ind-card.feat{grid-column:span 2;grid-row:span 2;flex-direction:column;justify-content:flex-end;padding:34px;border:none;background:radial-gradient(130% 120% at 70% 18%, var(--surface-deep-1) 0%, var(--surface-deep-3) 46%, var(--surface-deep-4) 100%);box-shadow:0 26px 50px -26px rgba(var(--rgb-navy),.6),0 1px 0 rgba(var(--rgb-white),.08) inset;}
  .ind-card.feat .grain{position:absolute;inset:0;background-image:var(--grain);opacity:.09;mix-blend-mode:overlay;pointer-events:none;}
  .ind-card.feat .dots{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(var(--rgb-teal-300),.4) 2px, transparent 2.3px);background-size:36px 36px;opacity:.28;pointer-events:none;}
  .ind-card.feat .feat-tag{position:absolute;top:30px;inset-inline-end:30px;z-index:1;font-family:var(--font-arabic);font-size:12px;font-weight:700;color:var(--primary-700);background:var(--secondary-300);padding:5px 13px;border-radius:var(--r-pill);}
  .ind-card.feat .ic-feat{position:relative;z-index:1;width:60px;height:60px;border-radius:16px;background:rgba(var(--rgb-teal-300),.13);border:1px solid rgba(var(--rgb-teal-300),.32);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
  .ind-card.feat .nm{position:relative;z-index:1;font-size:27px;color:var(--n-0);line-height:1.3;}
  .ind-card.feat .ds{position:relative;z-index:1;margin-top:10px;font-size:15.5px;line-height:1.75;color:var(--surface-tint-10);max-width:330px;}
  .ind-card.feat .feat-link{position:relative;z-index:1;margin-top:20px;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-arabic);font-size:14.5px;font-weight:700;color:var(--secondary-300);}
  .ind-card.feat .draw{position:absolute;z-index:1;inset-inline-start:34px;bottom:30px;width:54px;margin:0;background:var(--secondary-300);}
  /* feature tile photo — blended into the navy gradient instead of veiled in white */
  /* no filter here: a filter creates a stacking context and would cancel mix-blend-mode */
  .ind-card.feat .ind-media img{object-position:0% 50%;opacity:.92;filter:none;mix-blend-mode:luminosity;}
  .ind-card.feat .ind-media::after{background:linear-gradient(0deg,
      rgba(var(--rgb-navy),.96) 0%,
      rgba(var(--rgb-navy),.86) 30%,
      rgba(var(--rgb-navy),.42) 62%,
      rgba(var(--rgb-navy),.18) 100%);}
  /* the dot pattern would read as noise on top of a photo */
  .ind-card.feat .dots{opacity:.14;}
  .ind-card.feat:hover .ind-media::after,
  .ind-card.feat:focus-visible .ind-media::after{opacity:1;}

  /* ============ WHY — staggered trio (new) ============ */
  .why{padding:var(--space-section) 0;background:var(--n-0);}
  /* align-items:stretch (grid default) keeps every card in a row equal height; the middle
     card is offset DOWN with position:top (not margin-top, which would shrink a stretched
     card) so it stays the same height as its siblings but ends lower. nth-child(5) repeats
     the offset for the middle card of a second row (e.g. the 6-card goals grid). */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-13-5);padding-bottom:var(--space-10);}
  .why-card{position:relative;background:var(--surface-card);border:1px solid var(--n-100);border-radius:var(--r-xl);padding:var(--space-9) var(--space-8);box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard);}
  .why-card:nth-child(2),.why-card:nth-child(5){top:var(--space-10);}
  .why-card:hover{box-shadow:var(--shadow-lg);transform:translateY(var(--hover-lift-md));border-color:var(--secondary-300);}
  /* Step number — a clearer 01→03 marker for the numbered story; deepens on hover */
  .why-card .w-num{font-family:'Exo',sans-serif;font-size:19px;font-weight:700;color:var(--secondary-400);direction:ltr;letter-spacing:.1em;transition:color var(--duration-base) var(--ease-standard);}
  .why-card:hover .w-num{color:var(--secondary-600);}
  .why-card .icon-tile{width:56px;height:56px;margin:var(--space-4-5) 0 var(--space-5-5);}
  /* Icon emphasis — teal fill + a subtle lift/scale on hover */
  .why-card:hover .icon-tile{background:var(--secondary-400);transform:translateY(var(--hover-lift-sm)) scale(var(--hover-scale-icon));}
  .why-card .icon-tile svg{transition:stroke var(--duration-base) var(--ease-standard);}
  .why-card:hover .icon-tile svg{stroke:var(--n-0);}
  .why-card h3{margin:0;font-family:var(--font-arabic);font-size:21px;font-weight:800;color:var(--primary-700);line-height:1.35;}
  /* Storytelling micro — a teal accent that draws under the title on hover (site's accent motif) */
  .why-card h3::after{content:"";display:block;width:40px;height:2px;margin:var(--space-2-5) 0 var(--space-3);background:var(--secondary-400);border-radius:var(--r-pill);transform:scaleX(0);transform-origin:right center;transition:transform var(--duration-slow) var(--ease-standard);}
  .why-card:hover h3::after{transform:scaleX(1);}
  .why-card p{margin:0;font-size:15px;line-height:1.85;color:var(--n-500);}

  /* ============ CONSULTATION — floating layered panel (new) ============ */
  .consult{padding:var(--space-section) 0 var(--space-section);background:var(--n-0);}
  /* Panel depth: max shadow + a subtle inset edge ring for a crisper "floating" read */
  .consult-panel{position:relative;overflow:hidden;background:var(--deep-bg);border-radius:var(--r-2xl);padding:56px 60px;box-shadow:var(--shadow-xl), inset 0 0 0 1px rgba(var(--rgb-white),.06);display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center;}
  .consult-panel .motif{opacity:var(--motif-band);}
  .consult-panel .glow{position:absolute;right:-120px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(var(--rgb-teal),.22),transparent 70%);pointer-events:none;}
  /* Second soft glow spotlighting the CTA column (behind content via ::before) */
  .consult-panel::before{content:"";position:absolute;left:-90px;bottom:-130px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(var(--rgb-teal),.16),transparent 70%);pointer-events:none;z-index:0;}
  .consult-panel .c-body{position:relative;z-index:1;}
  .consult-panel h2{margin:0 0 var(--space-3-5);font-family:var(--font-arabic);font-size:38px;font-weight:900;color:var(--n-0);letter-spacing:-.012em;line-height:1.3;}
  .consult-panel p{margin:0;font-size:18px;line-height:1.8;color:var(--n-300);max-width:560px;}
  /* CTA column — primary leads, secondary is a quiet ghost; reassurance closes the deal */
  .consult-panel .c-action{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-3);min-width:236px;}
  .consult-panel .c-action .btn{justify-content:center;}
  .c-action .cta-ar{font-size:16px;}
  .c-action .btn:hover .cta-ar{transform:translateX(var(--hover-nudge));}
  .c-action .c-assure{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-1);font-size:13px;font-weight:600;color:var(--n-300);}
  .c-action .c-assure svg{flex-shrink:0;}

  /* ============ QUALITY — premium dashboard, layered (new) ============ */
  .quality{padding:var(--space-section) 0;background:var(--primary-50);}
  .quality .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;}
  .quality h2{margin:0 0 18px;font-family:var(--font-arabic);font-size:40px;font-weight:800;color:var(--primary-700);letter-spacing:-.018em;line-height:1.2;}
  .quality p.lead{margin:0 0 28px;font-size:18px;line-height:1.9;color:var(--n-500);}
  .quality .q-actions{display:flex;gap:14px;flex-wrap:wrap;}
  .q-visual{position:relative;}
  .quality-card{position:relative;z-index:2;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-xl);padding:60px 32px 32px;box-shadow:var(--shadow-xl);}
  .quality-card .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
  .quality-card .head .ttl{font-family:var(--font-arabic);font-size:17px;font-weight:800;color:var(--primary-700);display:flex;align-items:center;gap:10px;}
  .quality-card .head .ttl .dot{width:9px;height:9px;border-radius:50%;background:var(--secondary-400);box-shadow:0 0 0 4px rgba(var(--rgb-teal),.18);}
  .pill-draft{font-family:var(--font-arabic);font-size:12px;font-weight:700;color:var(--amber-700);background:var(--surface-warm);padding:5px 12px;border-radius:var(--r-pill);}
  .test-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--primary-50);}
  .test-row:last-of-type{border-bottom:none;}
  .test-row .nm{font-size:15px;font-weight:600;color:var(--n-600);}
  /* inline-block for the same reason as .tm-t-code below: as a block, direction:ltr
     pushed the latin code to the far edge of .nm instead of under the Arabic name. */
  .test-row .nm small{display:inline-block;font-family:var(--font-arabic);font-size:10px;letter-spacing:.12em;color:var(--n-300);direction:ltr;unicode-bidi:isolate;margin-top:3px;}
  .test-row .st{font-family:var(--font-arabic);font-size:13px;font-weight:700;color:var(--n-400);background:var(--n-50);padding:5px 12px;border-radius:var(--r-pill);}
  .quality-card .foot{margin:20px 0 0;font-size:12px;color:var(--n-400);line-height:1.65;}
  .q-float{position:absolute;z-index:3;inset-inline-start:-26px;top:-26px;background:var(--deep-bg);color:var(--n-0);border-radius:var(--r-lg);padding:16px 20px;box-shadow:var(--shadow-xl);min-width:150px;}
  .q-float .qf-k{font-family:var(--font-arabic);font-size:12px;font-weight:600;color:var(--n-300);}
  .q-float .qf-v{font-family:var(--font-arabic);font-size:26px;font-weight:900;color:var(--secondary-300);margin-top:4px;letter-spacing:.02em;}
  .q-blur{position:absolute;inset-inline-end:-30px;bottom:-30px;width:240px;height:240px;border-radius:var(--r-2xl);background:linear-gradient(150deg,var(--secondary-300),var(--primary-100));opacity:.5;z-index:1;}

  /* ============ TRUST — honest draft dashboard, dark (new) ============ */
  .trust{position:relative;overflow:hidden;background:var(--deep-bg);padding:var(--space-section-sm) 0;}
  .trust .motif{opacity:var(--motif-band);}
  /* Background depth — a soft teal glow behind the stat strip */
  .trust::before{content:"";position:absolute;left:-140px;top:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(var(--rgb-teal),.16),transparent 70%);pointer-events:none;}
  .trust .wrap{position:relative;}
  .trust-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:var(--space-10);}
  .trust-top .mono{font-family:var(--font-arabic);font-size:11px;letter-spacing:.2em;color:var(--secondary-300);direction:ltr;}
  .trust-top h2{margin:var(--space-2) 0 0;font-family:var(--font-arabic);font-size:28px;font-weight:800;color:var(--n-0);}
  .trust-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-arabic);font-size:13px;font-weight:700;color:var(--coral);padding:9px 16px;border-radius:var(--r-pill);background:rgba(var(--rgb-coral),.10);border:1px solid rgba(var(--rgb-coral),.22);}
  /* Stat strip — floats with a real shadow + inner top highlight for premium depth */
  .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(var(--rgb-coral),.16);border-radius:var(--r-xl);overflow:hidden;background:var(--primary-900);box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(var(--rgb-white),.07);}
  .trust-item{position:relative;padding:var(--space-8) var(--space-7);border-inline-start:1px solid rgba(var(--rgb-coral),.16);transition:background var(--duration-slow) var(--ease-standard);}
  .trust-item:first-child{border-inline-start:none;}
  .trust-item:hover{background:rgba(var(--rgb-white),.05);}
  /* Hover accent at the top edge of each stat */
  .trust-item::after{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--secondary-400);transform:scaleX(0);transform-origin:center;transition:transform var(--duration-slow) var(--ease-standard);}
  .trust-item:hover::after{transform:scaleX(1);}
  /* Number emphasis — larger, teal, soft glow; sign/percent sized down for clear hierarchy */
  .trust-item .v{direction:ltr;text-align:right;font-family:var(--font-arabic),sans-serif;font-size:54px;font-weight:900;color:var(--secondary-300);line-height:1;letter-spacing:.01em;text-shadow:0 0 26px rgba(var(--rgb-teal-300),.22);}
  .trust-item .v .v-sign{font-size:.56em;font-weight:800;color:var(--secondary-400);margin:0 1px;}
  .trust-item .l{font-family:var(--font-arabic);font-size:15.5px;font-weight:700;color:var(--hero-sub);margin-top:var(--space-3-5);}
  .trust-item .spark{margin-top:var(--space-4);opacity:.5;transition:opacity var(--duration-slow) var(--ease-standard);}
  .trust-item:hover .spark{opacity:.85;}
  .trust-item .n{display:inline-block;font-size:11px;color:var(--coral);margin-top:14px;font-family:var(--font-arabic);font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:rgba(var(--rgb-coral),.12);}
  .trust-note{margin:26px 0 0;font-size:13px;color:var(--n-300);font-family:var(--font-arabic);}

  /* ============ CTA BAND (teal) ============ */
  .cta-band{position:relative;overflow:hidden;background:var(--secondary-400);padding:96px 0;}
  .cta-band .cta-line{position:absolute;z-index:0;top:-20px;left:46%;width:2px;height:400px;background:rgba(var(--rgb-teal-300),.5);box-shadow:0 0 30px rgba(var(--rgb-teal-300),.55);transform:rotate(8deg) translateY(var(--py,0px));transform-origin:center;pointer-events:none;}
  .cta-band .btn .cta-ar{font-size:16px;}
  .cta-band .btn:hover .cta-ar{transform:translateX(var(--hover-nudge));}
  .cta-band .motif{opacity:var(--motif-cta);}
  .cta-band .wrap{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}
  .cta-band .mono{font-family:'Exo',sans-serif;font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--primary-800);direction:ltr;margin-bottom:14px;display:block;opacity:.7;}
  .cta-band h2{margin:0 0 10px;font-family:var(--font-arabic);font-size:38px;font-weight:900;color:var(--primary-900);letter-spacing:-.015em;line-height:1.2;}
  .cta-band p{margin:0;font-size:18px;color:var(--primary-800);font-weight:500;}
  .cta-band .actions{display:flex;gap:14px;flex-wrap:wrap;}

  /* ============ CONTACT — layered split (new) ============ */
  .contact{padding:var(--space-section) 0;background:var(--n-0);}
  .contact .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:0;align-items:stretch;}
  .contact-info{position:relative;overflow:hidden;background:var(--deep-bg);border-radius:0px var(--r-2xl) var(--r-2xl) 0px;padding:48px 44px;color:var(--n-0);z-index:1;}
  .contact-info .motif{opacity:var(--motif-band);}
  .contact-info h2{margin:0 0 14px;font-family:var(--font-arabic);font-size:50px;font-weight:800;color:var(--n-0);letter-spacing:-.02em;line-height:1.1;}
  .contact-info .intro-p{margin:0 0 30px;font-size:17px;line-height:1.85;color:var(--n-300);max-width:459px;}
  .channels{display:flex;flex-direction:column;gap:16px;position:relative;}
  .channel{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;background:rgba(var(--rgb-white),.06);border:1px solid rgba(var(--rgb-white),.12);border-radius:16px;padding:16px 18px;transition:var(--hover-t-card),background var(--hover-dur-micro) var(--hover-ease);}
  .channel:hover{background:rgba(var(--rgb-white),.10);transform:translateY(var(--hover-lift-sm));border-color:rgba(var(--rgb-teal-300),.4);}
  .channel::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:52px;border-radius:3px;background:var(--primary-100);}
  .ch-ic{position:relative;width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .ch-ic svg{position:relative;stroke:var(--secondary-400);}
  .ch-ic::before,.ch-ic::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--secondary-400);}
  .ch-ic::before{top:0;left:0;border-top-width:1.7px;border-left-width:1.7px;}
  .ch-ic::after{bottom:0;right:0;border-bottom-width:1.7px;border-right-width:1.7px;}
  .ch-t{flex:1;min-width:0;text-align:right;}
  .channel .k{font-size:13px;color:var(--n-300);}
  .channel .v{font-family:var(--font-arabic);font-size:17px;font-weight:700;color:var(--n-0);direction:ltr;text-align:right;}
  .contact-addr{margin-top:24px;padding-top:22px;border-top:1px solid rgba(var(--rgb-white),.12);position:relative;font-size:14px;line-height:1.7;color:var(--n-300);display:flex;align-items:center;gap:10px;}

  .form{position:relative;z-index:0;padding:48px;margin-inline-start:-48px;align-self:center;}
  /* white face (front) */
  .form::after{content:"";position:absolute;inset:0;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-2xl) 0px 0px var(--r-2xl);box-shadow:var(--shadow-xl);z-index:-1;}
  /* mint plate (back) — offset peeks out from behind the face */
  .form::before{content:"";position:absolute;inset:0;transform:translate(10px,12px);background:var(--secondary-50);border:1px solid var(--primary-100);border-radius:22px;z-index:-2;}
  /* Equalise the form's corners — the base face is squared on the join side (0 radius on
     two corners) for the overlapping layout; on the homepage contact + the contact page we
     want all four corners rounded. Scoped here only; the shared .form elsewhere is untouched. */
  .contact .form::after,.contact-connect .form::after{border-radius:var(--r-2xl);}
  /* Consultation + quote pages — drop the mint plate behind the form. */
  #consultForm::before,#rfqForm::before{display:none;}
  .form h3{margin:0 0 6px;font-family:var(--font-arabic);font-size:23px;font-weight:800;color:var(--primary-700);}
  .form .form-sub{margin:0 0 26px;font-size:14px;color:var(--n-400);}
  /* Vertical rhythm: rows need the same top spacing as .field.full, otherwise a .row
     sits flush against the field/row above it. Margin collapses with .form-sub above. */
  .form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
  .field{display:flex;flex-direction:column;}
  /* display:flex above outranks the [hidden] UA rule, so the conditional
     contract fields on the RFQ form need it restored explicitly. */
  .field[hidden]{display:none;}
  .field.full{margin-top:16px;}
  .field label{font-family:var(--font-arabic);font-size:14px;font-weight:700;color:var(--primary-700);margin-bottom:8px;}
  /* Sub-label under an input — used for the contract-term guidance. */
  .field .field-hint{margin-top:7px;font-family:var(--font-arabic);font-size:12.5px;line-height:1.6;color:var(--n-400);}
  .field input,.field textarea{width:100%;padding:0 14px;border:1.5px solid var(--n-100);border-radius:12px;font-family:var(--font-arabic);font-size:15px;color:var(--n-600);outline:none;background:var(--primary-50);transition:border-color var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-micro) var(--hover-ease),background var(--hover-dur-micro) var(--hover-ease);}
  .field input::placeholder,.field textarea::placeholder{color:var(--n-300);}
  .field input{height:50px;}
  .field textarea{padding:13px 14px;resize:vertical;}
  .field input:hover,.field textarea:hover{border-color:var(--secondary-300);}
  .field input:focus,.field textarea:focus{border-color:var(--secondary-400);background:var(--n-0);box-shadow:var(--shadow-focus);}
  /* Submit button only — scoped to [type=submit] so the custom-dropdown trigger
     (<button type="button" class="dd-trigger">) never inherits the navy fill,
     24px top margin or 16px padding meant for the primary submit. */
  .form button[type="submit"]{margin-top:24px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:16px;border:none;border-radius:var(--r-sm);background:var(--primary-700);color:var(--n-0);font-family:var(--font-arabic);font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(var(--rgb-brand),.22);transition:background var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-lift) var(--hover-ease),transform var(--hover-dur-lift) var(--hover-ease);}
  .form button[type="submit"] .cta-ar{font-size:16px;}
  .form button[type="submit"]:hover .cta-ar{transform:translateX(var(--hover-nudge));}
  .form button[type="submit"]:hover{background:var(--primary-800);box-shadow:0 8px 22px rgba(var(--rgb-brand),.30);transform:translateY(var(--hover-lift-sm));}
  .form button[type="submit"]:active{transform:translateY(0);}
  /* Sending state — the fetch can take a moment, and without this the button
     just sits there looking unresponsive. The label fades out in place (the
     button keeps its width) and a spinner takes over. */
  .form button[type="submit"]:disabled{cursor:not-allowed;}
  /* The label is a bare text node next to .cta-ar, so it cannot be hidden by
     selecting children — transparent text blanks both at once while the button
     keeps its exact size. .btn-sending re-declares its own colour to stay lit. */
  .form button[type="submit"].is-sending{position:relative;background:var(--primary-800);color:transparent;transform:none;box-shadow:0 4px 14px rgba(var(--rgb-brand),.22);}
  .btn-sending{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--n-0);font-family:var(--font-arabic);font-size:15px;font-weight:700;}
  .form button[type="submit"]:not(.is-sending) .btn-sending{display:none;}
  .btn-spin{width:19px;height:19px;flex-shrink:0;border-radius:var(--r-pill);border:2.5px solid rgba(var(--rgb-white),.32);border-top-color:var(--n-0);animation:btnSpin .7s linear infinite;}
  @keyframes btnSpin{to{transform:rotate(360deg);}}
  /* The whole card dims while in flight, so the freeze reads as "working". */
  .form.sending{position:relative;}
  .form.sending .field,.form.sending .row,.form.sending .rfq-check,.form.sending .pdx-opts,.form.sending .rfq-sep{opacity:.55;pointer-events:none;transition:opacity var(--hover-dur-micro) var(--hover-ease);}
  @media (prefers-reduced-motion: reduce){
    .btn-spin{animation-duration:1.4s;}
  }

  /* ============ FOOTER — redesigned: brand · sitemap · contact.
     Same navy/teal identity; every value maps to an existing token. ============ */
  footer{position:relative;overflow:hidden;background:var(--deep-bg);padding:84px 0 32px;color:var(--n-300);}
  footer .motif{opacity:var(--motif-footer);}
  footer .wrap{position:relative;z-index:1;}

  /* — Three sections: brand · links · contact.
     The large gap SEPARATES the three groups; the tighter gap INSIDE .f-links makes
     the three link columns read as one block, so the footer scans as three sections. — */
  footer .f-cols{display:grid;grid-template-columns:1.6fr 2fr 1.25fr;gap:56px;align-items:start;}
  footer .f-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
  footer .blurb{margin:22px 0 0;font-size:14.5px;line-height:1.9;color:var(--n-300);max-width:340px;}
  footer .col-title{font-family:var(--font-arabic);font-size:14px;font-weight:700;color:var(--secondary-300);margin-bottom:18px;letter-spacing:.02em;}
  footer .links{display:flex;flex-direction:column;gap:2px;}
  footer .links a{font-size:14px;padding-block:7px;color:var(--n-200);text-decoration:none;transition:color var(--hover-dur-micro) var(--hover-ease),transform var(--hover-dur-micro) var(--hover-ease);width:fit-content;}
  footer .links a:hover{color:var(--n-0);transform:translateX(var(--hover-nudge));}
  /* Quick-links span the space freed by the removed sectors column and read as two
     sub-columns: first column fills 4 rows, the rest overflow into the second. */
  footer .f-col-quick{grid-column:span 2;}
  /* Two evenly-distributed sub-columns that align to the f-links grid tracks, so the
     second column reads as its own footer column rather than hugging the first. */
  footer .links-2col{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:2px 30px;align-content:start;}

  /* Contact column — icon-tile rows (mirrors the site's .channel language) */
  footer .f-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
  footer .f-contact-list li{display:flex;align-items:flex-start;gap:12px;}
  footer .f-ic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-sm);color:var(--secondary-300);background:rgba(var(--rgb-coral),.10);border:1px solid rgba(var(--rgb-coral),.18);}
  footer .f-ic svg{width:17px;height:17px;}
  footer .f-ct{display:flex;flex-direction:column;gap:2px;}
  footer .f-ct .ck{font-family:var(--font-arabic);font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--secondary-300);}
  footer .f-ct .cv{font-size:14.5px;line-height:1.55;color:var(--n-200);text-decoration:none;}
  footer .f-ct a.cv{width:fit-content;transition:color var(--hover-dur-micro) var(--hover-ease);}
  footer .f-ct a.cv:hover{color:var(--n-0);}
  footer .f-ct .cv.ltr{direction:ltr;text-align:right;}

  /* — Hairline divider — equal space above and below (uses the larger value) — */
  footer .f-rule{height:1px;border:0;margin:32px 0;background:rgba(var(--rgb-coral),.16);}

  /* Social buttons — sit under the brand blurb */
  footer .f-brand .f-social{margin-top:24px;}
  footer .f-social{display:flex;align-items:center;gap:10px;}
  footer .f-soc{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-sm);color:var(--n-200);background:rgba(var(--rgb-white),.06);border:1px solid rgba(var(--rgb-coral),.16);transition:var(--hover-t-colors),transform var(--hover-dur-lift) var(--hover-ease);}
  footer .f-soc:hover{background:rgba(var(--rgb-coral),.14);color:var(--n-0);border-color:rgba(var(--rgb-coral),.4);transform:translateY(var(--hover-lift-sm));}
  footer .f-soc svg{width:18px;height:18px;}

  /* — Bottom bar: copyright (start) · developer credit (end) — */
  /* Always visible: it is the very last element on the page and can sit permanently inside
     the reveal observer's bottom dead-zone (rootMargin -8%), which left the copyright hidden.
     Force it past the [data-reveal] hidden state instead of relying on scroll. */
  body.js footer .f-bottom[data-reveal]{opacity:1;transform:none;}
  footer .f-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;}
  footer .f-bottom .cp{font-size:13px;color:var(--n-400);}
  footer .f-credit{font-size:13px;color:var(--n-400);}
  footer .f-credit .dev{font-weight:700;color:var(--secondary-300);}

  /* ============ WHATSAPP FAB (preserved) ============ */
  .fab{position:fixed;bottom:26px;inset-inline-end:26px;z-index:80;width:60px;height:60px;border-radius:50%;background:var(--brand-whatsapp);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(var(--rgb-whatsapp),.42);text-decoration:none;transition:transform var(--hover-dur-lift) var(--hover-ease),box-shadow var(--hover-dur-lift) var(--hover-ease);}
  .fab:hover{transform:translateY(var(--hover-lift-sm)) scale(var(--hover-scale-icon));box-shadow:0 14px 34px rgba(var(--rgb-whatsapp),.5);}

  /* — Direction toggle (RTL ⇄ LTR): stacks directly above the WhatsApp FAB.
       Deliberately transparent — a glass disc that lets the page read through, so the
       green WhatsApp button stays the only solid call to action in the corner. */
  .fab-dir{bottom:96px;flex-direction:column;gap:1px;padding:0;cursor:pointer;
    background:rgba(var(--rgb-white),.55);color:var(--primary-700);
    border:1px solid rgba(var(--rgb-navy),.14);
    backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
    box-shadow:0 6px 20px rgba(var(--rgb-navy),.10);}
  /* Icon only, at the WhatsApp mark's 32px — but neutral silver, never teal: the colour is
     what ranks the two buttons, so this one reads as the quiet, secondary action. */
  .fab-dir .fab-dir-ic{color:var(--n-400);transition:color var(--hover-dur-lift) var(--hover-ease);}
  .fab-dir:hover{background:rgba(var(--rgb-white),.78);border-color:rgba(var(--rgb-navy),.22);
    box-shadow:0 10px 26px rgba(var(--rgb-navy),.16);}
  .fab-dir:hover .fab-dir-ic{color:var(--n-600);}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1080px){
    .wrap{margin-left:40px;margin-right:40px;}
    .hero-grid{grid-template-columns:1fr;gap:56px;}
    .readout{min-height:auto;display:flex;flex-direction:column;gap:18px;}
    .panel-glass,.panel-badge{position:relative;inset:auto;width:100%;}
    .panel-code{position:relative;inset:auto;align-self:flex-start;}
    .tb-grid{grid-template-columns:repeat(3,1fr);}
    .pt-card{flex-basis:calc((100% - var(--space-5)) / 2);}
    .about .wrap,.quality .wrap{grid-template-columns:1fr;gap:40px;}
    .about-num{font-size:120px;}
    .consult-panel{grid-template-columns:1fr;gap:28px;}
    .prow{grid-template-columns:1fr;gap:28px;}
    .prow.rev .pswatch{order:0;}
    .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;}
    .ind-card{min-height:172px;}
    .ind-card.feat{grid-column:span 2;grid-row:auto;min-height:320px;}
    .why-grid{grid-template-columns:1fr;gap:18px;padding-bottom:0;}
    .why-card:nth-child(2),.why-card:nth-child(5){top:0;}
    .trust-grid{grid-template-columns:repeat(2,1fr);}
    .trust-item:nth-child(-n+2){border-bottom:1px solid rgba(var(--rgb-white),.10);}
    .trust-item:nth-child(odd){border-inline-start:none;}
    .contact .wrap{grid-template-columns:1fr;gap:0;}
    .contact-info{border-radius:var(--r-2xl) var(--r-2xl) 0 0;}
    .form{margin-inline-start:0;margin-top:-24px;width:calc(100% - 32px);margin-inline:auto;}
    footer .f-cols{grid-template-columns:1.4fr 1fr;gap:44px 56px;}
    footer .f-brand{grid-column:1 / -1;}
    footer .blurb{max-width:560px;}
    footer .f-links{gap:28px;}
  }
  @media (max-width:880px){
    header.nav .nav-links{display:none;}
    .nav-toggle{display:inline-flex;}
    header.nav .nav-cta{display:none;}
  }
  @media (max-width:768px){
    :root{--space-section:72px;--space-section-sm:56px;}
    .wrap{margin-left:0;margin-right:0;padding-left:20px;padding-right:20px;}
    .hero h1{font-size:40px;}
    .hero p.lead{font-size:17px;}
    .hero-points span{border-inline-end:none;margin-inline-end:0;padding-inline-end:0;width:100%;}
    .sec-head h2,.quality h2{font-size:30px;}
    .contact-info h2{font-size:34px;}
    .about h2{font-size:28px;}
    .about-cred .ac-v{font-size:44px;}
    .ptext h3{font-size:25px;}
    .prow{padding:34px 0;}
    .ptext .prod-cta{width:100%;justify-content:center;}
    .consult-panel,.contact-info{padding:34px 26px;}
    .form{padding:28px 22px;}
    .form .row{grid-template-columns:1fr;}
    .tb-grid{grid-template-columns:repeat(2,1fr);}
    .pt-card{flex-basis:88%;}
    .bento{grid-template-columns:1fr;}
    .ind-card.feat{grid-column:span 1;}
    .trust-grid{grid-template-columns:1fr;}
    .trust-item{border-inline-start:none;border-bottom:1px solid rgba(var(--rgb-white),.10);}
    .trust-item:last-child{border-bottom:none;}
    .cta-band h2{font-size:30px;}
    /* Shorter CTA band on mobile. */
    .cta-band{padding:56px 0;}
    /* Contact form spans the full column width like the sections above it. */
    .contact .form{width:100%;margin-inline:0;}
    footer{padding:64px 0 28px;}
    footer .f-cols{grid-template-columns:1fr;gap:34px;}
    footer .f-brand{grid-column:auto;}
    footer .f-links{grid-template-columns:1fr 1fr;gap:26px 22px;}
    footer .links-2col{grid-auto-flow:row;grid-template-rows:none;gap:12px 22px;}
    footer .f-rule{margin:40px 0;}
    footer .f-bottom{flex-direction:column;align-items:flex-start;gap:18px;}
  }
  /* ============ KEYBOARD FOCUS PARITY — every interactive element that only had a
     :hover state now shows the same teal ring on keyboard focus, and directional
     links repeat their hover nudge so keyboard users get the full affordance set.
     (Buttons, .ind-card, .faq-trigger already ship their own :focus-visible.) */
  header.nav .nav-links a:focus-visible,
  .mobile-menu a:focus-visible,
  .link-arrow:focus-visible,
  .prod-link:focus-visible,
  footer .links a:focus-visible,
  footer .f-soc:focus-visible,
  footer .f-ct a.cv:focus-visible,
  .faq-contact .fcc-link:focus-visible,
  .subhero .crumbs a:focus-visible,
  .fab:focus-visible{outline:2px solid var(--secondary-400);outline-offset:2px;border-radius:var(--r-sm);}
  header.nav .nav-links a:focus-visible{color:var(--primary-700);}
  header.nav .nav-links a:focus-visible::after{transform:translateX(-50%) scaleX(1);}
  .link-arrow:focus-visible span,
  .prod-link:focus-visible span,
  .faq-contact .fcc-link:focus-visible .cta-ar{transform:translateX(var(--hover-nudge));}
  footer .links a:focus-visible{color:var(--n-0);transform:translateX(var(--hover-nudge));}
  footer .f-soc:focus-visible{transform:translateY(var(--hover-lift-sm));}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    /* Calm CONTINUOUS / looping motion rather than killing it — the marquee ticker is
       slowed to a gentle, non-distracting crawl (not stopped), and the one-shot entrance
       reveals (fade + slide-up + cascade) still play, so the page's storytelling reads
       even on machines that have "reduce motion" enabled.
       Scroll parallax is already skipped in JS under reduced motion. */
    .marquee-track{animation-duration:160s!important;}
    /* The hero keeps ONE cadence for everybody — the cross-fade changes opacity only, it
       travels nothing. The Ken Burns drift IS real movement, so that single layer stills. */
    body.js .hero-photo img{animation:none;}
    /* Same policy for the new hero layers: the light sweep is a slow opacity wash, so it is
       calmed rather than cut; the scroll cue's travelling dash stills to a steady mark.
       Pointer drift is skipped in JS — it is movement bound directly to input. */
    body.js .hero-sweep::before{animation-duration:26s;}
    body.js .cue-line{animation:none;opacity:.85;}
  }

  /* ============ FIGMA-MATCH OVERRIDES ============ */
  /* Navbar styled to match index.html (translucent blurred bar) above. */
  /* Real brand logo image inside the nav/footer lockup */
  .logo-img{height:44px;width:auto;display:block;flex-shrink:0;transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .logo:hover .logo-img{transform:scale(var(--hover-scale-sm));}
  footer .logo-img{height:52px;}

  /* Hero → dark gradient + real photo, single right-aligned column */
  /* Exact hero background from Figma: radial 70%×70% at 62% 32% (the RADIAL layer). */
  /* min-height tracks the art's own ratio (2077×757 → 0.3645) so the packshot lands uncropped;
     it is a MIN, so a long headline still grows the section. Flex centring keeps the copy
     mid-frame when the ratio wins. Padding is deliberately tighter than the old 96/104: with
     art this short, generous padding alone would push the section past the image height. */
  .hero{position:relative;overflow:hidden;background:radial-gradient(70% 70% at 62% 32%, var(--surface-deep-1) 0%, var(--surface-deep-2) 42%, var(--surface-deep-4) 100%);padding:var(--space-12) 0 var(--space-14);display:flex;align-items:center;min-height:calc(100vw * 0.3645);}
  /* inset:0 — the old ±var(--space-22) overshoot clipped 176px of photo height behind
     overflow:hidden. Parallax stays safe: the drift (0.10×scrollY) is always smaller than the
     scroll itself, so the exposed edge is already above the viewport. */
  /* Scroll drift (--py) and pointer drift (--mx/--my) are composed into ONE transform here.
     They used to fight over .style.transform; whichever wrote last won. */
  .hero-photo{position:absolute;inset:0;pointer-events:none;will-change:transform;
    transform:translate3d(var(--mx,0px), calc(var(--py,0px) + var(--my,0px)), 0);}
  /* Photo sits over the radial — no extra dark overlay. Slides stack and cross-fade in place;
     only .is-active is visible, so there is never a flash of background between them. */
  /* Anchored to the bottom: when the copy makes the section taller than the art, cover has to
     crop somewhere — take it off the empty top, never off the products or the floor line. */
  .hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;opacity:0;
    transition:opacity var(--hero-slide-fade) var(--ease-standard);}
  .hero-photo img.is-active{opacity:var(--hero-photo-op);}
  /* The copy drifts against the photo at a third of the distance — parallax needs the layers
     to move at DIFFERENT rates, otherwise the whole scene just slides and reads as a glitch.
     Applied to the WRAP, never to .hero-copy: that element's transform belongs to the
     data-reveal fade-up, and two owners of one property means one of them silently loses. */
  .hero-wrap{position:relative;flex:1;transform:translate3d(calc(var(--mx,0px) / -3), calc(var(--my,0px) / -3), 0);}

  /* Slow light sweep — a wide teal highlight crossing the navy ground, so the section keeps
     breathing between slide changes. Reuses the hero's own teal; screen blend keeps it airy. */
  .hero-sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
  .hero-sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;width:45%;
    background:linear-gradient(100deg, transparent, rgba(var(--rgb-teal-300),.13) 45%, rgba(var(--rgb-white),.05) 55%, transparent);
    mix-blend-mode:screen;filter:blur(28px);transform:translateX(-60%) rotate(6deg);}
  body.js .hero-sweep::before{animation:hero-sweep 12s var(--ease-standard) infinite;}
  @keyframes hero-sweep{
    0%   {transform:translateX(-60%) rotate(6deg);opacity:0;}
    18%  {opacity:1;}
    72%  {opacity:1;}
    100% {transform:translateX(320%) rotate(6deg);opacity:0;}
  }

  /* Scroll cue — a hairline that fills downward on a loop, not a bouncing arrow. */
  .hero-cue{position:absolute;z-index:2;bottom:var(--space-8);left:50%;transform:translateX(-50%);
    display:block;width:22px;height:44px;border-radius:var(--r-pill);
    border:1px solid rgba(var(--rgb-white),.22);
    transition:border-color var(--hover-dur-micro) var(--hover-ease),opacity var(--duration-slow) var(--ease-standard);}
  .hero-cue:hover{border-color:var(--secondary-300);}
  .hero-cue:focus-visible{outline:2px solid var(--secondary-400);outline-offset:3px;}
  .hero-cue.is-gone{opacity:0;pointer-events:none;}   /* it has done its job once you scroll */
  .cue-line{position:absolute;top:7px;left:50%;width:2px;height:9px;margin-left:-1px;
    border-radius:var(--r-pill);background:var(--secondary-300);}
  body.js .cue-line{animation:hero-cue 1.9s var(--ease-standard) infinite;}
  @keyframes hero-cue{
    0%   {transform:translateY(0);opacity:0;}
    30%  {opacity:1;}
    70%  {opacity:1;}
    100% {transform:translateY(18px);opacity:0;}
  }


  /* Hero slideshow controls — dots + a hairline progress bar, sitting under the copy on the
     reading-start edge. Real <button>s (not the aria-hidden photo layer) so they are reachable. */
  .hero-controls{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-10);}
  .hero-dots{display:flex;align-items:center;gap:var(--space-2-5);}
  .hero-dot{width:9px;height:9px;padding:0;border:0;border-radius:var(--r-pill);cursor:pointer;
    background:rgba(var(--rgb-white),.34);
    transition:background-color var(--hover-dur-micro) var(--hover-ease),width var(--duration-base) var(--ease-standard);}
  .hero-dot:hover{background:rgba(var(--rgb-white),.62);}
  .hero-dot.is-on{width:26px;background:var(--secondary-300);}
  .hero-dot:focus-visible{outline:2px solid var(--secondary-400);outline-offset:3px;}
  .hero-progress{position:relative;width:84px;height:2px;border-radius:var(--r-pill);overflow:hidden;
    background:rgba(var(--rgb-white),.18);}
  /* fills from the reading edge: right in RTL, left in LTR */
  .hero-progress i{position:absolute;inset:0;display:block;background:var(--secondary-300);
    transform:scaleX(0);transform-origin:right;}
  [dir="ltr"] .hero-progress i{transform-origin:left;}
  .hero-copy{max-width:600px;margin-inline-end:auto;display:flex;flex-direction:column;align-items:flex-start;text-align:right;}
  .hero-copy .eyebrow{margin-bottom:var(--space-5);}
  .hero-title{margin:0;font-family:var(--font-arabic);font-size:56px;line-height:1.25;font-weight:800;color:var(--n-0);letter-spacing:-.02em;}
  .hero-title .accent{color:var(--secondary-300);}
  .hero-lead{margin:var(--space-6) 0 0;font-size:19px;line-height:1.85;color:var(--hero-sub);max-width:520px;}
  .hero-copy .hero-cta{justify-content:flex-start;}
  .hero-copy .hero-points{justify-content:flex-start;width:100%;}
  @media(max-width:768px){.hero-title{font-size:36px;} .hero-copy .hero-points span{border-inline-end:none;margin-inline-end:0;padding-inline-end:0;}}

  /* Hero entrance — refine the single fade-up into a gentle staggered cascade.
     Same easing/duration as the site-wide [data-reveal]; the container becomes the
     trigger while its children reveal in sequence. Reduced motion is honoured below. */
  body.js .hero-copy[data-reveal]{opacity:1;transform:none;}
  /* Hero children enter with a touch more travel and a slightly longer curve than the
     in-page reveal, so the opening reads as a deliberate, attention-drawing sequence. */
  body.js .hero-copy>*{opacity:0;transform:translateY(var(--reveal-shift-sm));
    transition:opacity .9s var(--ease-entrance),transform .9s var(--ease-entrance);}
  body.js .hero-copy.in>*{opacity:1;transform:none;}
  /* Choreographed cascade: eyebrow → headline → lead → CTAs, one --stagger-step apart.
     A slight lead-in (half-step) lets the hero photo's settle-zoom read first. */
  body.js .hero-copy.in>*:nth-child(1){transition-delay:calc(var(--stagger-step) * .5);}
  body.js .hero-copy.in>*:nth-child(2){transition-delay:calc(var(--stagger-step) * 1.5);}
  body.js .hero-copy.in>*:nth-child(3){transition-delay:calc(var(--stagger-step) * 2.5);}
  body.js .hero-copy.in>*:nth-child(4){transition-delay:calc(var(--stagger-step) * 3.5);}
  body.js .hero-copy.in>*:nth-child(5){transition-delay:calc(var(--stagger-step) * 4.5);}
  /* Signature detail — the eyebrow accent bar draws in from the reading edge (RTL). */
  body.js .hero-copy .eyebrow .bar{transform-origin:right center;transform:scaleX(0);transition:transform .8s var(--ease-entrance) .6s;}
  body.js .hero-copy.in .eyebrow .bar{transform:scaleX(1);}

  /* Hero depth layers — scrim + vignette + soft light over the (unchanged) photo for readability & depth */
  .hero-scrim{position:absolute;inset:0;pointer-events:none;background:var(--hero-glow),var(--hero-scrim),var(--hero-vignette);}

  /* Slow Ken Burns drift — replaces the old one-shot settle-zoom, which pinned transform:scale(1)
     with fill-mode:both at a specificity this rule could not have beaten.
     Every slide carries the animation but sits PAUSED; only .is-active runs it. That way an
     outgoing slide freezes mid-drift instead of snapping back while it is still fading out.
     JS restarts the animation on the incoming slide so each turn begins at scale(1). */
  @keyframes hero-kenburns{from{transform:scale(1);}to{transform:scale(1.03);}}
  body.js .hero-photo img{animation:hero-kenburns calc(var(--hero-slide-hold) + var(--hero-slide-fade) * 2) linear both paused;}
  body.js .hero-photo img.is-active{animation-play-state:running;}
  body.js .hero.is-paused .hero-photo img{animation-play-state:paused;}

  @keyframes hero-bar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  body.js .hero-progress i{animation:hero-bar calc(var(--hero-slide-hold) + var(--hero-slide-fade)) linear both;}
  body.js .hero.is-paused .hero-progress i{animation-play-state:paused;}

  /* Primary CTA affordance arrow — reuses the site's arrow-link motion so the primary leads */
  .hero-cta .cta-ar{font-size:16px;}
  .hero-cta .btn:hover .cta-ar{transform:translateX(var(--hover-nudge));}

  /* Hero trust bar — lightweight numeric proof + technical-support signal (mirrors the Trust section) */
  .hero-trust{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-10);}
  .hero-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;}
  .hero-stats li{display:flex;flex-direction:column;gap:var(--space-1);padding-inline-end:var(--space-6);margin-inline-end:var(--space-6);border-inline-end:1px solid var(--hero-hairline);}
  .hero-stats li:last-child{border-inline-end:none;margin-inline-end:0;padding-inline-end:0;}
  .hero-stats .hs-v{font-family:var(--font-arabic),sans-serif;font-size:27px;font-weight:900;line-height:1;letter-spacing:.02em;color:var(--secondary-300);}
  .hero-stats .hs-k{font-size:13px;font-weight:600;line-height:1.3;color:var(--hero-sub);}
  .hero-support{display:inline-flex;align-items:center;gap:var(--space-2-5);font-size:14px;font-weight:600;color:var(--hero-sub);}
  .hero-support i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--secondary-400);box-shadow:0 0 0 4px var(--alpha-teal-25);flex-shrink:0;}

  @media (max-width:768px){
    .hero{padding:var(--space-16) 0 var(--space-18);}
    .hero-trust{gap:var(--space-4) var(--space-5);margin-top:var(--space-9);}
    .hero-stats li{border-inline-end:none;margin-inline-end:var(--space-5);padding-inline-end:0;}
    .hero-stats .hs-v{font-size:24px;}
  }

  /* Interaction system for the bento sectors */
  .lift{transition:transform var(--hover-dur-lift) var(--hover-ease),box-shadow var(--hover-dur-lift) var(--hover-ease);}
  .lift:hover{transform:translateY(var(--hover-lift-md));}
  .bond .plate-back{transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .bond:hover .plate-back{transform:translate(0,0)!important;}
  .bond .draw{transform:scaleX(0);transform-origin:right center;transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .bond:hover .draw{transform:scaleX(1)!important;}
  .ico-pop{transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .bond:hover .ico-pop{transform:translateY(var(--hover-lift-sm));}
  .arrowlink{transition:color var(--hover-dur-micro) var(--hover-ease);}
  .arrowlink .ar{display:inline-block;transition:var(--hover-t-nudge);}
  .arrowlink:hover .ar{transform:translateX(var(--hover-nudge));}

  /* ---- Industries polish: real elevation, keyboard parity, premium feature (tokens only) ---- */
  /* Animate elevation + border together (the base card previously had no hover-shadow rule) */
  .ind-card{transition:transform var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard);}
  /* Standard sector cards — lift into a deeper, softer elevation + an interactive teal edge */
  .ind-card:not(.feat):hover,
  .ind-card:not(.feat):focus-visible{border-color:var(--secondary-300);box-shadow:0 1px 0 rgba(var(--rgb-white),.9) inset, var(--shadow-xl);}
  /* Feature tile — slightly more premium: deeper cast shadow + a touch of icon life (composition unchanged) */
  .ind-card.feat:hover,
  .ind-card.feat:focus-visible{box-shadow:var(--shadow-xl), 0 1px 0 rgba(var(--rgb-white),.08) inset;}
  .ind-card.feat .ic-feat{transition:transform var(--duration-slow) var(--ease-standard);}
  .ind-card.feat:hover .ic-feat,
  .ind-card.feat:focus-visible .ic-feat{transform:scale(var(--hover-scale-icon));}
  /* Keyboard focus ring — same token as buttons; keyboard users get the full hover affordance set */
  .ind-card:focus-visible{outline:2px solid var(--secondary-400);outline-offset:3px;}
  .lift:focus-visible{transform:translateY(var(--hover-lift-md));}
  .bond:focus-visible .plate-back{transform:translate(0,0)!important;}
  .bond:focus-visible .draw{transform:scaleX(1)!important;}
  .bond:focus-visible .ico-pop{transform:translateY(var(--hover-lift-sm));}
  .arrowlink:focus-visible .ar{transform:translateX(var(--hover-nudge));}

  @keyframes drift{0%{transform:translate(0,0);}50%{transform:translate(16px,-20px);}100%{transform:translate(0,0);}}
  @media (max-width:1024px){.bento-grid{grid-template-columns:1fr 1fr!important;grid-auto-rows:auto!important;}.bento-feature{grid-column:span 2!important;grid-row:auto!important;min-height:320px;}}
  @media (max-width:560px){.bento-grid{grid-template-columns:1fr!important;}.bento-feature{grid-column:auto!important;}}

  /* Products → real product photos inside the swatch */
  .pswatch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform var(--hover-dur-lift) var(--hover-ease);}
  /* Directional scrim (was a flat veil): darker top & bottom for badge/number/code legibility over any photo */
  /* Veil kept light — just enough contrast for .p-num / .p-code without dulling the packshot. */
  .pswatch .p-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(var(--rgb-navy),.38) 0%, rgba(var(--rgb-navy),.04) 26%, transparent 60%, rgba(var(--rgb-navy),.14) 80%, rgba(var(--rgb-navy),.48) 100%);}
  .pswatch .p-num{z-index:2;color:rgba(var(--rgb-white),.9);}
  .pswatch .p-code{z-index:2;color:rgba(var(--rgb-white),.72);}
  .pswatch::after{z-index:1;}
  .prow:hover .pswatch img{transform:scale(var(--hover-scale-sm));}

  /* Contact (light) form field focus */
  .vfld:focus{border-color:var(--secondary-400)!important;box-shadow:var(--shadow-focus)!important;background:var(--n-0)!important;}
  .contact-grid{max-width:1240px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;}
  @media(max-width:1024px){.contact-grid{grid-template-columns:1fr!important;gap:40px;}}

  /* Contact → light panel (matches Figma), form and info side by side */
  .contact .wrap{align-items:start;gap:48px;}
  .contact .contact-info{background:transparent;color:var(--n-600);padding:0;border-radius:0;overflow:visible;}
  .contact .contact-info .motif{display:none;}
  .contact .contact-info .eyebrow.on-dark span.txt{color:var(--secondary-700);}
  .contact .contact-info h2{color:var(--primary-700);}
  .contact .contact-info .intro-p{color:var(--n-500);}
  .contact .contact-info .channel{background:linear-gradient(180deg,var(--n-0),var(--surface-tint-1));border:1px solid var(--n-100);box-shadow:var(--shadow-sm);}
  .contact .contact-info .channel:hover{border-color:var(--secondary-300);box-shadow:var(--shadow-md);}
  .contact .contact-info .channel .icon-tile{background:var(--primary-50);}
  .contact .contact-info .channel .icon-tile svg{stroke:var(--primary-700);}
  .contact .contact-info .channel .k{color:var(--n-400);}
  .contact .contact-info .channel .v{color:var(--primary-700);}
  .contact .contact-info .contact-addr{display:none;}
  .contact .form{margin-inline-start:0;align-self:start;}
  /* Section backgrounds → match Figma cool-gray (.ind bg is set in its own block above) */
  .why{background:linear-gradient(180deg,var(--n-50),var(--surface-tint-5));}
  /* Why cards: 01 on the left → 03 on the right (matches Figma), keep content RTL */
  .why-grid{direction:ltr;}
  .why-card{direction:rtl;text-align:right;}

  /* ============ OUR PROCESS / JOURNEY — connected timeline (reworked) ============
     The four numbered nodes ride a single teal rail (01→04), turning a flat column
     row into an editorial journey — fitting both the homepage methodology and the
     About-page milestones. Retains the card DNA: --r-xl cards, .icon-tile, Exo
     numerals, the accent-draw and the hover lift. Tokens only. Shared by both pages. */
  .process{padding:var(--space-section) 0;background:var(--primary-50);}
  .proc-track{position:relative;list-style:none;margin:var(--space-16) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);}
  /* The rail — a single line spanning the node centres (first→last), behind the nodes. */
  .proc-track::before{content:"";position:absolute;z-index:0;top:calc(var(--space-14) / 2);inset-inline:calc(100% / 8);height:var(--space-0-5);background:linear-gradient(90deg,transparent,var(--secondary-300) 10%,var(--secondary-300) 90%,transparent);}
  .proc-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}

  /* Numbered node on the rail; the halo punches a clean gap through the rail behind it. */
  .proc-node{width:var(--space-14);height:var(--space-14);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);background:var(--n-0);border:var(--space-0-5) solid var(--secondary-300);box-shadow:0 0 0 var(--space-2) var(--primary-50), var(--shadow-sm);transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),transform var(--duration-slow) var(--ease-standard);}
  .proc-num{font-family:'Exo',sans-serif;font-size:20px;font-weight:700;line-height:1;letter-spacing:.06em;color:var(--secondary-600);direction:ltr;transition:color var(--duration-base) var(--ease-standard);}
  .proc-step:hover .proc-node{background:var(--secondary-400);border-color:var(--secondary-400);transform:translateY(var(--hover-lift-sm)) scale(var(--hover-scale-icon));}
  .proc-step:hover .proc-num{color:var(--n-0);}

  /* Step card hangs beneath its node. */
  .proc-card{position:relative;width:100%;margin-top:var(--space-6);background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-xl);padding:var(--space-8) var(--space-7);box-shadow:var(--shadow-sm);transition:transform var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard);}
  .proc-step:hover .proc-card{transform:translateY(var(--hover-lift-md));box-shadow:var(--shadow-lg);border-color:var(--secondary-300);}
  /* Reuse the WHY-card icon vocabulary: teal-tint tile → teal fill + gentle lift on hover. */
  .proc-icon{width:var(--space-14);height:var(--space-14);color:var(--secondary-700);margin-bottom:var(--space-5);}
  .proc-icon svg{width:var(--space-6-5);height:var(--space-6-5);transition:color var(--duration-base) var(--ease-standard);}
  .proc-step:hover .proc-icon{background:var(--secondary-400);color:var(--n-0);transform:translateY(var(--hover-lift-sm)) scale(var(--hover-scale-icon));}
  .proc-card h3{margin:0;font-family:var(--font-arabic);font-size:20px;font-weight:800;line-height:1.4;color:var(--primary-700);}
  /* Accent draw under the title on hover — the site's storytelling micro-motif. */
  .proc-card h3::after{content:"";display:block;width:var(--space-9);height:var(--space-0-5);margin:var(--space-2-5) 0 var(--space-3);background:var(--secondary-400);border-radius:var(--r-pill);transform:scaleX(0);transform-origin:right center;transition:transform var(--duration-slow) var(--ease-standard);}
  .proc-step:hover .proc-card h3::after{transform:scaleX(1);}
  .proc-card p{margin:0;font-size:15px;line-height:1.85;color:var(--n-500);}

  @media (max-width:900px){
    /* Vertical rail on the reading-start (right) side; nodes stack, cards flow beside them. */
    .proc-track{grid-template-columns:1fr;gap:var(--space-7);margin-top:var(--space-10);}
    .proc-track::before{top:var(--space-14);bottom:var(--space-14);inset-inline-start:auto;inset-inline-end:calc(var(--space-14) / 2 - 1px);width:var(--space-0-5);height:auto;background:linear-gradient(180deg,transparent,var(--secondary-300) 10%,var(--secondary-300) 90%,transparent);}
    .proc-step{flex-direction:row;align-items:flex-start;gap:var(--space-5);}
    .proc-card{margin-top:0;flex:1 1 auto;min-width:0;}
  }

  /* ============ ABOUT PAGE (baraka-about.html) — internal-page sections only
     Extension, not redesign: all shared furniture (navbar, footer, buttons,
     .eyebrow, .sec-head, .why/.why-card, .process/.proc-*, .trust, .cta-band,
     .a-chip, .about-rule, .lead-in, .hl) is reused verbatim from the blocks
     above. The rules below add only the three layouts that don't yet exist —
     each value is a design-system token; no new colors, no magic numbers. ============ */

  /* Compact page header — inherits the homepage hero's dark radial + grain motif
     + eyebrow/.h/.accent vocabulary, sized down for an inner page. */
  .subhero{position:relative;overflow:hidden;background:var(--deep-bg);padding:var(--space-20) 0 var(--space-18);}
  .subhero .motif{opacity:var(--motif-hero);}
  .subhero::before{content:"";position:absolute;inset-inline-end:-120px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(var(--rgb-teal),.16),transparent 70%);pointer-events:none;}
  .subhero .wrap{position:relative;}
  .subhero-copy{max-width:640px;}
  .subhero .crumbs{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-5);font-family:var(--font-arabic);font-size:13.5px;font-weight:600;color:var(--n-300);}
  .subhero .crumbs a{color:var(--n-300);text-decoration:none;transition:color var(--duration-base) var(--ease-standard);}
  .subhero .crumbs a:hover{color:var(--secondary-300);}
  .subhero .crumbs .sep{color:var(--n-400);}
  .subhero .crumbs .cur{color:var(--secondary-300);}
  .subhero h1{margin:0;font-family:var(--font-arabic);font-size:56px;line-height:1.2;font-weight:800;color:var(--n-0);letter-spacing:-.02em;}
  .subhero h1 .accent{color:var(--secondary-300);}
  .subhero p.lead{margin:var(--space-6) 0 0;font-size:19px;line-height:1.85;color:var(--hero-sub);max-width:560px;}

  /* Story — two alternating (zigzag) editorial rows: media + text. The second row reverses
     sides so the long overview reads as two balanced beats instead of one dense column. */
  .story{background:var(--n-0);padding:var(--space-section) 0;}
  .story .wrap{display:flex;flex-direction:column;gap:var(--space-16);}
  .story-row{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--space-16);align-items:center;}
  .story-row.rev .story-media{order:2;}

  /* Frameless figure — the story shots are cut-out product renders, so no card, ring or scrim:
     the shot sits directly on the section. NOTE: the JPEGs are flattened onto #ffffff to match
     .story's background; if that background changes, re-export the assets with transparency. */
  .story-media{position:relative;}
  .story-figure{position:relative;}
  .story-figure img{display:block;width:100%;height:auto;transition:transform var(--duration-slow) var(--ease-standard);}
  .story-figure:hover img{transform:scale(1.03);}
  .story h2{margin:var(--space-4-5) 0 0;font-family:var(--font-arabic);font-size:32px;font-weight:800;line-height:1.32;color:var(--primary-700);letter-spacing:-.012em;}
  .story h2 .hl{color:var(--secondary-600);}
  .story .about-rule{margin-top:var(--space-7);}
  .story p{margin:var(--space-6) 0 0;font-size:17px;line-height:1.95;color:var(--n-500);}
  .story p .lead-in{font-weight:700;color:var(--primary-700);}
  .story .about-chips{margin-top:var(--space-7);}

  /* Vision & Mission — two value cards reusing the .why-card vocabulary verbatim.
     Neutralise the WHY grid's decorative 2nd-child stagger inside this 2-up grid. */
  .vm{background:var(--primary-50);padding:var(--space-section) 0;}
  /* Header aligned to the start (right in RTL) to match every other section on the page. */
  .vm .sec-head{margin-inline:0;text-align:start;}
  .vm .sec-head .eyebrow{justify-content:flex-start;}
  .vm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-13-5);}
  .vm-grid .why-card{margin-top:0;top:0;}

  /* About page — alternate section backgrounds so adjacent sections don't blend.
     Sequence becomes: story (white) · goals (tint) · vision (white) · values (tint) · stats (navy). */
  .why#goals{background:var(--primary-50);}
  .vm#vision{background:var(--n-0);}
  .why#values{background:var(--primary-50);}

  @media (max-width:1080px){
    .story-row{grid-template-columns:1fr;gap:var(--space-10);}
    .story-row.rev .story-media{order:0;}
    .story-media::before{display:none;}
    .vm-grid{grid-template-columns:1fr;}
  }
  @media (max-width:768px){
    .subhero{padding:var(--space-16) 0 var(--space-14);}
    .subhero h1{font-size:36px;}
    .story h2{font-size:28px;}
  }

  /* ============ PRODUCTS CATALOG — filterable grid (baraka-products.html)
     A true "browse products" view: a filter toolbar + a card grid, deliberately
     distinct from the homepage's alternating .prow story so the page reads as a
     catalog, not a landing page. Everything visual is reused — the .pswatch image
     tile (+ p-num / p-code / p-industry / p-veil / img), .prod-tag, the
     .about-chips/.a-chip feature pills and the .btn CTAs are verbatim; the filter
     pills ARE the .a-chip vocabulary with a pressed state; the card lift/shadow/
     border-accent and the teal title-draw are the .why-card hover language. New
     rules add only the grid, the card shell and the toolbar.
     Every value is a design-system token — no new colours, radii, shadows or timings. ============ */

  /* Toolbar — filter pills + a live result count. */
  .cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;margin:var(--space-10) 0 var(--space-9);}
  .cat-filters{display:flex;flex-wrap:wrap;gap:var(--space-3);}
  /* Filter pill — the .a-chip look as a real <button>; teal-fills when pressed. */
  .filter-chip{cursor:pointer;font-family:var(--font-arabic);}
  .filter-chip i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--secondary-400);flex-shrink:0;transition:background var(--hover-dur-micro) var(--hover-ease);}
  .filter-chip[aria-pressed="true"]{background:var(--secondary-400);border-color:var(--secondary-400);color:var(--primary-900);box-shadow:0 4px 14px rgba(var(--rgb-teal),.30);}
  .filter-chip[aria-pressed="true"] i{background:var(--primary-900);}
  .filter-chip[aria-pressed="true"]:hover{border-color:var(--secondary-500);}
  .cat-count{margin:0;font-family:var(--font-arabic);font-size:14.5px;font-weight:700;color:var(--n-500);white-space:nowrap;font-variant-numeric:tabular-nums;}

  /* Grid — three per row (the 4th family drops onto its own row below); steps to 2 then 1. */
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
  .pcard[id]{scroll-margin-top:var(--space-25);}

  /* ---- Product card — the baraka-modern "hot product" card, ported verbatim into the
     site's design tokens: a navy media panel (brand bottle glyph + a corner tag), then
     category / title / copy, spec pills, a rating line, and a price + CTA foot. Filter-aware
     (.is-hidden / .is-enter) and reveal-on-scroll (data-reveal). Tokens only — no raw values. ---- */
  .pcard{position:relative;display:flex;flex-direction:column;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard);}
  /* Hover — the site's unified card language (.why-card): slight lift + deeper shadow + teal border accent. */
  .pcard:hover{transform:translateY(var(--hover-lift-md));box-shadow:var(--shadow-lg);border-color:var(--secondary-300);}
  /* Stretched link — the title anchor covers the whole card so a click anywhere opens the
     product-detail page; the quote button is raised above it and stays independently clickable. */
  .pcard h3 a.pcard-link::after{content:"";position:absolute;inset:0;z-index:3;}
  .pcard-foot .btn{position:relative;z-index:4;}

  /* Media — navy hero ground, brand bottle glyph, grain, corner tag. */
  .pcard-media{position:relative;aspect-ratio:4 / 3;flex-shrink:0;display:grid;place-items:center;overflow:hidden;background:var(--hero-bg);}
  .pcard-media .grain{position:absolute;inset:0;z-index:1;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay;pointer-events:none;}
  .pcard-media svg{position:relative;z-index:1;transition:transform var(--duration-slow) var(--ease-standard);}
  .pcard:hover .pcard-media svg{transform:translateY(var(--hover-lift-sm)) scale(var(--hover-scale-sm));}
  /* Real packshot — fills the media band; the grain + corner tag stay layered above it. */
  .pcard-media img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;transition:filter var(--duration-slow) var(--ease-standard);}
  .pcard:hover .pcard-media img{filter:brightness(1.04);}
  .pcard-tag{position:absolute;top:var(--space-3-5);inset-inline-start:var(--space-3-5);z-index:2;padding:var(--space-1-5) var(--space-3);border-radius:var(--r-pill);background:var(--secondary-400);color:var(--primary-900);font-family:var(--font-arabic);font-size:12px;font-weight:800;}
  .pcard-tag.alt{background:var(--primary-900);color:var(--n-0);}

  /* Body */
  .pcard-body{display:flex;flex-direction:column;flex:1;padding:var(--space-5-5) var(--space-6) var(--space-6-5);}
  .pcard-cat{font-family:var(--font-arabic);font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--secondary-600);text-transform:uppercase;}
  .pcard h3{margin:var(--space-1-5) 0 var(--space-2);font-family:var(--font-arabic);font-size:22px;font-weight:900;color:var(--primary-700);letter-spacing:-.01em;}
  /* Card title may link to the product-detail page — inherits colour, teal on hover. */
  .pcard h3 a{color:inherit;text-decoration:none;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .pcard h3 a:hover{color:var(--secondary-600);}
  .pcard p{margin:0;font-size:14px;line-height:1.8;color:var(--n-500);flex:1;}
  /* Spec pills */
  .spec-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3-5);}
  .spec{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1-5) var(--space-2-5);border-radius:var(--r-xs);background:var(--primary-50);color:var(--primary-600);font-family:var(--font-arabic);font-size:11px;font-weight:700;}
  /* Foot — price label + primary CTA (wraps if the column gets narrow). */
  .pcard-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4-5);padding-top:var(--space-4-5);border-top:1px solid var(--n-100);}
  .pcard-foot .lab{font-family:var(--font-arabic);font-size:12px;font-weight:600;color:var(--n-400);}

  /* Filtering — hidden cards leave the flow; entering cards get a gentle fade-up. */
  .pcard.is-hidden{display:none;}
  body.js .pcard.is-enter{animation:catIn var(--duration-reveal) var(--ease-entrance) both;}
  @keyframes catIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

  /* Empty state (defensive — every current filter matches at least one family). */
  .cat-empty{text-align:center;padding:var(--space-14) var(--space-6);color:var(--n-400);font-size:16px;font-weight:600;}
  .cat-empty[hidden]{display:none;}

  @media (max-width:1024px){
    .pgrid{grid-template-columns:repeat(2,1fr);gap:var(--space-6);}
  }
  @media (max-width:768px){
    .pgrid{grid-template-columns:1fr;}
    .cat-toolbar{margin:var(--space-8) 0 var(--space-7);}
  }

  @media (prefers-reduced-motion: reduce){
    .pcard.is-enter{animation:none;}
  }

  /* ============ COMPACT CATALOG BANNER (baraka-catalog.html)
     A slimmer, cleaner internal header: breadcrumbs + title + a one-line tagline, with a
     mono family-index strip and a teal cover-accent hairline. Reuses .subhero's navy ground,
     grain motif, corner glow, .crumbs and h1 verbatim — this modifier only trims the height
     and layers the two new signatures. The catalog grid, laminated cards and filter toolbar
     live in the block above. Tokens only — no raw hex, spacing or timings. ============ */
  .subhero.subhero-slim{padding:var(--space-12) 0 var(--space-11);}
  .subhero-slim .subhero-copy{max-width:780px;}
  .subhero-slim h1{font-size:46px;line-height:1.16;}
  /* Reference code chip beside a product H1 (e.g. C515 / P18+) — mono, LTR, secondary accent. */
  .code-badge{display:inline-block;vertical-align:middle;margin-inline-start:var(--space-3);padding:2px var(--space-2-5);border-radius:var(--r-pill);background:var(--secondary-400);color:var(--primary-900);font-family:'Exo',sans-serif;font-size:.5em;font-weight:700;letter-spacing:.08em;direction:ltr;}
  /* One-line tagline — compact, sits between the title and the family-index strip. */
  .subhero-slim .lead{margin:var(--space-4) 0 0;font-size:17px;line-height:1.7;color:var(--hero-sub);max-width:640px;}
  /* Teal cover accent — a crisp hairline along the banner foot (identity teal). */
  .subhero-slim::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--secondary-400) 0%,rgba(var(--rgb-teal),.35) 40%,transparent 78%);}
  /* Mono family-index strip — the four product codes as an industrial index line; the
     codes matching the active catalog filter light up teal (wired in the page script). */
  .subhero-index{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-5);}
  .subhero-index .ixlab{font-family:var(--font-arabic);font-size:12.5px;font-weight:700;color:rgba(var(--rgb-white),.55);}
  .subhero-index .ix{font-family:'Exo',sans-serif;font-size:12px;letter-spacing:.16em;color:rgba(var(--rgb-white),.4);direction:ltr;text-transform:uppercase;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .subhero-index .ix.on{color:var(--secondary-300);}
  .subhero-index .dot{width:4px;height:4px;border-radius:var(--r-pill);background:rgba(var(--rgb-white),.22);flex-shrink:0;}

  /* Catalog section with no sec-head — tighten the top gap so the toolbar sits a
     standard section-rhythm below the compact banner (was section 118px + toolbar 40px). */
  .catalog-page{padding-top:var(--space-section-sm);}
  .catalog-page .cat-toolbar{margin-top:0;}

  @media (max-width:768px){
    .subhero.subhero-slim{padding:var(--space-9) 0 var(--space-8);}
    .subhero-slim h1{font-size:31px;}
  }

  /* ============ PRODUCT DETAIL (baraka-product-*.html) — shop-style layout adapted from the
     Velvety/Chicori reference into Baraka's identity (navy + teal, tokens): a gallery (main image +
     thumbnails) beside an info panel (name + flag, meta line, B2B "حسب الكمية" price, trust pill,
     quantity + supply panel, two CTAs, tabbed details), then a "قد يناسبك" strip, the reused
     .cta-band and footer. B2B-honest — no fabricated price / rating / stock; unconfirmed values are
     "حسب الكمية" or "بحاجة إلى تأكيد". Reuses .btn, .about-chips/.a-chip, reveal + hover. Tokens only. */

  /* Light breadcrumb bar (shop pattern) */
  .shop-crumbs{padding:var(--space-6) 0;background:var(--n-0);border-bottom:1px solid var(--n-100);}
  .shop-crumbs nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);font-family:var(--font-arabic);font-size:13.5px;font-weight:600;color:var(--n-400);}
  .shop-crumbs a{color:var(--n-400);text-decoration:none;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .shop-crumbs a:hover{color:var(--secondary-600);}
  .shop-crumbs .sep{color:var(--n-300);}
  .shop-crumbs .cur{color:var(--primary-700);}

  /* Product section */
  .pdx{padding:var(--space-14) 0 var(--space-section);background:var(--n-0);}
  .pdx-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start;}

  /* Gallery */
  .pdx-main{position:relative;aspect-ratio:4 / 3;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-tint-5);border:1px solid var(--n-100);}
  .pdx-main img{width:100%;height:100%;object-fit:contain;}
  .pdx-badge{position:absolute;top:var(--space-5);inset-inline-start:var(--space-5);z-index:2;padding:var(--space-1-5) var(--space-3);border-radius:var(--r-pill);background:var(--secondary-400);color:var(--primary-900);font-family:var(--font-arabic);font-size:12px;font-weight:800;}
  .pdx-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-3);}
  .pdx-thumb{aspect-ratio:4 / 3;border-radius:var(--r-md);overflow:hidden;padding:0;background:var(--surface-tint-5);border:1.5px solid var(--n-100);cursor:pointer;transition:border-color var(--hover-dur-micro) var(--hover-ease),transform var(--hover-dur-lift) var(--ease-standard);}
  .pdx-thumb img{width:100%;height:100%;object-fit:contain;}
  .pdx-thumb:hover{transform:translateY(var(--hover-lift-sm));}
  .pdx-thumb[aria-pressed="true"]{border-color:var(--secondary-400);}

  /* Info column */
  .pdx-info{padding-top:var(--space-2);}
  .pdx-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);}
  .pdx-info h1{margin:0;font-family:var(--font-arabic);font-size:38px;font-weight:800;color:var(--primary-700);letter-spacing:-.02em;line-height:1.12;}
  .pdx-flag{flex-shrink:0;margin-top:var(--space-2);padding:var(--space-1-5) var(--space-3);border-radius:var(--r-sm);background:var(--primary-900);color:var(--n-0);font-family:var(--font-arabic);font-size:12px;font-weight:700;white-space:nowrap;}
  .pdx-sub{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-top:var(--space-3);font-family:var(--font-arabic);font-size:14.5px;font-weight:600;color:var(--n-400);}
  .pdx-sub b{color:var(--primary-700);font-weight:700;}
  .pdx-sub .dv{width:1px;height:14px;background:var(--n-200);}

  .pdx-price{margin:var(--space-6) 0 var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--n-100);}
  .pdx-price .amt{font-family:var(--font-arabic);font-size:24px;font-weight:800;color:var(--primary-700);}
  .pdx-price .sub{margin-top:var(--space-2);font-family:var(--font-arabic);font-size:13.5px;color:var(--n-400);}
  .pdx-trust{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2-5) var(--space-4);border-radius:var(--r-pill);background:var(--secondary-50);border:1px solid var(--secondary-300);color:var(--secondary-700);font-family:var(--font-arabic);font-size:13px;font-weight:700;}
  .pdx-trust svg{flex-shrink:0;}

  /* Quantity + supply panel */
  .pdx-buy{margin-top:var(--space-6);}
  .pdx-buy .lbl{font-family:var(--font-arabic);font-size:13px;font-weight:700;color:var(--n-500);margin-bottom:var(--space-3);}
  .pdx-qtyrow{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap;}
  .pdx-qty{display:inline-flex;align-items:center;border:1px solid var(--n-200);border-radius:var(--r-pill);overflow:hidden;}
  .pdx-qty button{width:40px;height:40px;border:none;background:var(--n-0);color:var(--primary-700);font-size:20px;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:background var(--hover-dur-micro) var(--hover-ease);}
  .pdx-qty button:hover{background:var(--primary-50);}
  .pdx-qty input{width:52px;height:40px;border:none;text-align:center;font-family:var(--font-arabic);font-size:15px;font-weight:700;color:var(--primary-700);background:var(--n-0);-moz-appearance:textfield;appearance:textfield;}
  .pdx-qty input::-webkit-outer-spin-button,.pdx-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .pdx-qtyrow .hint{font-family:var(--font-arabic);font-size:12.5px;color:var(--n-400);}
  .pdx-opts{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5);}
  .pdx-opt{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--n-100);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--hover-dur-micro) var(--hover-ease),background var(--hover-dur-micro) var(--hover-ease);}
  .pdx-opt:hover{border-color:var(--secondary-300);}
  .pdx-opt input{accent-color:var(--secondary-500);width:18px;height:18px;flex-shrink:0;}
  .pdx-opt .ot{flex:1;font-family:var(--font-arabic);font-size:14.5px;font-weight:700;color:var(--primary-700);}
  .pdx-opt .op{font-family:var(--font-arabic);font-size:13px;font-weight:700;color:var(--secondary-700);}
  .pdx-opt.sel{border-color:var(--secondary-400);background:var(--secondary-50);}
  .pdx-cta{display:flex;flex-direction:column;gap:var(--space-3);}
  .pdx-cta .btn{width:100%;justify-content:center;}

  /* Tabbed details */
  .pdx-tabs{margin-top:var(--space-9);}
  .pdx-tablist{display:flex;flex-wrap:wrap;gap:var(--space-6);border-bottom:1px solid var(--n-100);}
  .pdx-tab{position:relative;padding:0 0 var(--space-3);background:none;border:none;cursor:pointer;font-family:var(--font-arabic);font-size:15px;font-weight:700;color:var(--n-400);transition:color var(--hover-dur-micro) var(--hover-ease);}
  .pdx-tab::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--secondary-400);transform:scaleX(0);transition:transform var(--hover-dur-micro) var(--ease-standard);}
  .pdx-tab:hover{color:var(--primary-700);}
  .pdx-tab[aria-selected="true"]{color:var(--primary-700);}
  .pdx-tab[aria-selected="true"]::after{transform:scaleX(1);}
  .pdx-panel{padding-top:var(--space-6);font-family:var(--font-arabic);font-size:15px;line-height:1.95;color:var(--n-500);}
  .pdx-panel[hidden]{display:none;}
  .pdx-panel > p:last-child{margin-bottom:0;}

  /* Honest details reused inside the tabs (specs table / files / to-be-confirmed / note). */
  .pd-specs{width:100%;border-collapse:collapse;background:var(--surface-card);border:1px solid var(--n-100);border-radius:var(--r-lg);overflow:hidden;}
  .pd-specs th,.pd-specs td{padding:var(--space-3-5) var(--space-5);text-align:right;border-bottom:1px solid var(--n-100);font-family:var(--font-arabic);font-size:15px;}
  .pd-specs th{width:44%;background:var(--primary-50);color:var(--primary-700);font-weight:700;}
  .pd-specs td{color:var(--n-500);font-weight:600;}
  .pd-specs tr:last-child th,.pd-specs tr:last-child td{border-bottom:0;}
  /* Isolate Latin product codes (C515 / P18+) so bidi never reorders the trailing +. */
  .pd-specs td .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;font-family:'Exo',sans-serif;font-weight:700;letter-spacing:.03em;}
  .tbd{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--n-400);font-weight:600;font-size:13.5px;}
  .tbd i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--secondary-300);flex-shrink:0;}
  .pd-note{margin-top:var(--space-5);padding:var(--space-4-5) var(--space-5);background:var(--secondary-50);border:1px solid var(--secondary-300);border-radius:var(--r-lg);font-family:var(--font-arabic);font-size:14px;line-height:1.85;color:var(--n-600);}
  .pd-files{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5);}
  .file-soon{display:inline-flex;align-items:center;gap:var(--space-2-5);padding:var(--space-3) var(--space-4-5);border:1px dashed var(--n-200);border-radius:var(--r-md);background:var(--surface-tint-2);color:var(--n-400);font-family:var(--font-arabic);font-size:13.5px;font-weight:700;}
  .file-soon svg{flex-shrink:0;color:var(--n-300);}
  .file-soon .sfx{color:var(--secondary-600);font-size:12px;font-weight:700;}
  /* Live download — the solid, teal-accented counterpart to the dashed "قريباً"
     placeholder beside it, so a real file reads as available at a glance. */
  .file-dl{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4-5);border:1.5px solid var(--secondary-300);border-radius:var(--r-md);background:var(--secondary-50);color:var(--primary-700);font-family:var(--font-arabic);font-size:13.5px;font-weight:700;text-decoration:none;transition:border-color var(--hover-dur-micro) var(--hover-ease),background var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-micro) var(--hover-ease),transform var(--hover-dur-micro) var(--hover-ease);}
  .file-dl:hover{border-color:var(--secondary-400);background:var(--n-0);box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift-sm));}
  .file-dl:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
  /* One line, always: icon · title · size · action. Vertically centred so the
     mono size badge sits on the same baseline band as the Arabic title. */
  .file-dl > .iconsax{flex-shrink:0;color:var(--secondary-600);line-height:1;}
  .file-dl .fd-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;}
  .file-dl .fd-m{flex-shrink:0;font-family:'Exo',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--n-400);direction:ltr;line-height:1.4;white-space:nowrap;}
  .file-dl .fd-go{flex-shrink:0;display:inline-flex;align-items:center;gap:var(--space-1-5);padding-inline-start:var(--space-3);border-inline-start:1px solid var(--secondary-300);color:var(--secondary-600);font-size:13px;line-height:1.4;white-space:nowrap;}
  /* The copy under the gallery spans the column so the row can breathe. */
  .pdx-dl{display:flex;width:100%;margin-top:var(--space-4);}

  /* "قد يناسبك" — related products strip */
  .rel{padding:var(--space-section) 0;background:var(--surface-tint-3);}
  .rel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-9);}
  .rel-head h2{margin:0;font-family:var(--font-arabic);font-size:32px;font-weight:800;color:var(--primary-700);letter-spacing:-.01em;}
  .rel-nav{display:flex;gap:var(--space-2);}
  .rel-nav a{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--n-200);display:grid;place-items:center;color:var(--primary-700);background:var(--n-0);transition:var(--hover-t-card);}
  .rel-nav a:hover{border-color:var(--secondary-300);box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift-sm));}
  .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
  .rel-card{display:block;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard);}
  .rel-card:hover{transform:translateY(var(--hover-lift-md));box-shadow:var(--shadow-lg);border-color:var(--secondary-300);}
  .rel-media{aspect-ratio:4 / 3;background:var(--hero-bg);display:grid;place-items:center;overflow:hidden;}
  .rel-media svg{transition:transform var(--duration-slow) var(--ease-standard);}
  .rel-card:hover .rel-media svg{transform:translateY(var(--hover-lift-sm)) scale(var(--hover-scale-sm));}
  .rel-body{padding:var(--space-4) var(--space-5) var(--space-5);}
  .rel-body .rc{font-family:var(--font-arabic);font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--secondary-600);text-transform:uppercase;}
  .rel-body h3{margin:var(--space-1) 0 var(--space-2);font-family:var(--font-arabic);font-size:18px;font-weight:800;color:var(--primary-700);}
  .rel-body .rl{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-arabic);font-size:13.5px;font-weight:700;color:var(--n-400);}
  .rel-more{display:flex;justify-content:center;margin-top:var(--space-10);}

  @media (max-width:1024px){
    .pdx-grid{grid-template-columns:1fr;gap:var(--space-9);}
    .pdx-main,.pdx-thumbs{max-width:560px;}
    .rel-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
  }
  @media (max-width:768px){
    .pdx-info h1{font-size:30px;}
    .rel-grid{grid-template-columns:1fr;}
    .rel-head h2{font-size:26px;}
  }

  /* ============ FAQ — asymmetric editorial: sticky narrative rail + numbered
     accordion. Inherits the site's DNA: the paired two-column composition of
     Hero/Quality/About, --r-xl premium cards (why-card language), the Exo numeral
     index of Why/Products/Process, the teal accent-draw micro-motif, and the
     .icon-tile affordance. Built on native <details>/<summary> (keyboard + ARIA for
     free); `.faq.js-enhanced` layers on the smooth height + chevron motion.
     Tokens / page aliases only — no hard-coded colours, radii, shadows or timings. */
  .faq{padding:var(--space-section) 0;background:var(--primary-50);}
  .faq .wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:start;}

  /* Left narrative rail — sticky, mirrors the Quality/Hero narrative column. */
  .faq-lead{position:sticky;top:104px;}
  .faq-lead .eyebrow{margin-bottom:18px;}
  .faq-lead h2{margin:0 0 16px;font-family:var(--font-arabic);font-size:40px;font-weight:800;color:var(--primary-700);letter-spacing:-.018em;line-height:1.2;}
  .faq-lead p.lead{margin:0;font-size:18px;line-height:1.9;color:var(--n-500);max-width:420px;}
  /* "Still have a question?" prompt — panel-badge card language, reuses .icon-tile. */
  .faq-contact{display:flex;align-items:center;gap:14px;margin-top:var(--space-8);padding:18px 20px;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-lg);box-shadow:var(--shadow-md);max-width:360px;}
  .faq-contact .icon-tile{width:46px;height:46px;}
  .faq-contact .icon-tile svg{stroke:var(--secondary-600);}
  .faq-contact .fcc-k{font-family:var(--font-arabic);font-size:13px;font-weight:600;color:var(--n-400);}
  .faq-contact .fcc-link{display:inline-flex;align-items:center;gap:7px;margin-top:3px;font-family:var(--font-arabic);font-size:15px;font-weight:700;color:var(--primary-700);text-decoration:none;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .faq-contact .fcc-link:hover{color:var(--secondary-700);}
  .faq-contact .fcc-link:hover .cta-ar{transform:translateX(var(--hover-nudge));}

  /* Accordion column */
  .faq-list{display:flex;flex-direction:column;gap:var(--space-4);}
  .faq-item{
    position:relative;background:var(--surface-card);border:1px solid var(--n-100);border-radius:var(--r-xl);
    box-shadow:var(--shadow-sm);overflow:hidden;
    transition:box-shadow var(--duration-slow) var(--ease-standard),
               border-color var(--duration-slow) var(--ease-standard),
               background var(--duration-base) var(--ease-standard),
               transform var(--duration-slow) var(--ease-standard);
  }
  .faq-item:hover{border-color:var(--secondary-300);box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift-sm));}
  .faq-item[open],.faq-item.is-open{border-color:var(--secondary-300);box-shadow:var(--shadow-lg);background:var(--n-0);transform:none;}

  /* Trigger — the <summary>. Reset the native marker; keep it a flex row. */
  .faq-trigger{
    display:flex;align-items:center;gap:var(--space-5);
    padding:var(--space-5-5) var(--space-7);
    cursor:pointer;list-style:none;
    transition:color var(--duration-base) var(--ease-standard);
  }
  .faq-trigger::-webkit-details-marker{display:none;}
  .faq-trigger::marker{content:"";}
  .faq-trigger:focus-visible{outline:2px solid var(--secondary-400);outline-offset:-3px;border-radius:var(--r-xl);}

  /* Exo numeral index — the site's numbered-story signature (.w-num / .p-num / .proc-num). */
  .faq-index{flex-shrink:0;min-width:20px;font-family:'Exo',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;color:var(--secondary-400);direction:ltr;line-height:1;padding-top:3px;transition:color var(--duration-base) var(--ease-standard);}
  .faq-item[open] .faq-index,.faq-item.is-open .faq-index{color:var(--secondary-600);}

  .faq-q{flex:1;min-width:0;font-family:var(--font-arabic);font-size:var(--font-size-lg);font-weight:800;line-height:var(--line-height-snug);color:var(--primary-700);transition:color var(--duration-base) var(--ease-standard);}
  .faq-trigger:hover .faq-q{color:var(--primary-800);}

  /* Chevron affordance — circular tile echoing .icon-tile; fills teal on open (why-card icon behaviour). */
  .faq-icon-wrap{flex-shrink:0;width:36px;height:36px;border-radius:var(--r-pill);background:var(--secondary-50);border:1px solid var(--n-100);display:flex;align-items:center;justify-content:center;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),transform var(--duration-slow) var(--ease-standard);}
  .faq-item:hover .faq-icon-wrap{border-color:var(--secondary-300);}
  .faq-item[open] .faq-icon-wrap,.faq-item.is-open .faq-icon-wrap{background:var(--secondary-400);border-color:var(--secondary-400);transform:rotate(180deg);}
  .faq-icon{width:18px;height:18px;color:var(--secondary-600);transition:color var(--duration-base) var(--ease-standard);}
  .faq-item[open] .faq-icon,.faq-item.is-open .faq-icon{color:var(--n-0);}

  /* Panel — no-JS: native details reveals it instantly. JS-enhanced: height animated 0→content. */
  .faq-panel{overflow:hidden;}
  .faq.js-enhanced .faq-panel{height:0;transition:height var(--duration-slow) var(--ease-standard);}
  /* Answer aligns under the question (past the Exo index), not the card edge. */
  .faq-panel-inner{padding-block:0 var(--space-6);padding-inline-start:calc(var(--space-7) + 20px + var(--space-5));padding-inline-end:var(--space-7);}
  /* Teal accent-draw — the site's storytelling micro-motif (.ind .draw / .why h3::after). */
  .faq-draw{width:40px;height:2px;background:var(--secondary-400);border-radius:var(--r-pill);margin-bottom:var(--space-4);}
  .faq-panel-inner p{margin:0;font-size:var(--font-size-md);line-height:var(--line-height-relaxed);color:var(--n-500);}

  @media (max-width:1080px){
    .faq .wrap{grid-template-columns:1fr;gap:var(--space-10);}
    .faq-lead{position:static;}
    .faq-lead p.lead{max-width:none;}
    .faq-contact{max-width:none;}
  }
  @media (max-width:768px){
    .faq-lead h2{font-size:30px;}
    .faq-trigger{padding:var(--space-4-5) var(--space-5);gap:var(--space-4);}
    .faq-q{font-size:var(--font-size-md);}
    .faq-icon-wrap{width:32px;height:32px;}
    .faq-panel-inner{padding-inline-start:calc(var(--space-5) + 20px + var(--space-4));padding-inline-end:var(--space-5);}
  }

  /* ============ RFQ — طلب عرض سعر (quote request) ============
     A dedicated conversion page. Reuses the site DNA verbatim: the navy .contact-info
     panel + .channel language on one side, the layered .form card (::before teal offset
     + ::after white) on the other, the .pdx-opt radio pattern for supply type, and the
     reveal/stagger + parallax motion. New here (tokens only): the .rfq grid, select
     styling, the "what happens next" numbered micro-story, consent/sample checkbox, and
     the instant-confirmation overlay (.quote-ok) that the case study asks for. No
     hard-coded colours, radii, shadows or timings — page aliases + DS scale tokens. */
  .rfq{padding:var(--space-section) 0;background:var(--n-0);}
  .rfq .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;align-items:stretch;}

  /* Info rail — the reused navy panel; a touch more vertical padding for the step story. */
  .rfq-aside{align-self:stretch;padding:52px 44px;}
  .rfq-aside .intro-p{margin-bottom:var(--space-8);}

  /* "ماذا يحدث بعد الإرسال" — numbered micro-story (Exo-less, on-dark), site's rail language. */
  .rfq-steps{list-style:none;margin:0 0 var(--space-8);padding:0;display:flex;flex-direction:column;gap:var(--space-5);position:relative;}
  .rfq-steps li{display:flex;align-items:flex-start;gap:var(--space-4);position:relative;}
  .rfq-steps .rs-num{flex-shrink:0;width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;font-family:'Exo',sans-serif;font-size:15px;font-weight:700;color:var(--secondary-300);background:rgba(var(--rgb-white),.06);border:1px solid rgba(var(--rgb-teal),.35);direction:ltr;}
  .rfq-steps .rs-t{display:flex;flex-direction:column;gap:var(--space-1);padding-top:var(--space-1);}
  .rfq-steps .rs-k{font-family:var(--font-arabic);font-size:15px;font-weight:700;color:var(--n-0);}
  .rfq-steps .rs-v{font-family:var(--font-arabic);font-size:13.5px;line-height:1.7;color:var(--n-300);}

  /* Form card — reuse .form; neutralise the homepage overlap offset so it sits cleanly. */
  .rfq .form{margin-inline-start:0;align-self:start;width:100%;}
  .rfq .form .form-sub .req,.rfq .form .field .req{color:var(--coral);font-weight:800;}

  /* Native select styled to match .field input, with a token-drawn caret. */
  .sel-wrap{position:relative;}
  /* Custom dropdown following the design-system SELECT: native <select> with appearance
     reset + the design-system chevron SVG placed on the physical LEFT (inline-end in RTL),
     with matching padding so the text never sits under the icon. */
  .sel-wrap select{width:100%;height:50px;padding-block:0;padding-inline-start:14px;padding-inline-end:42px;border:1.5px solid var(--n-100);border-radius:12px;font-family:var(--font-arabic);font-size:15px;font-weight:600;color:var(--n-600);background-color:var(--primary-50);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 15px center;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-micro) var(--hover-ease),background-color var(--hover-dur-micro) var(--hover-ease);}
  .sel-wrap select:hover{border-color:var(--secondary-300);}
  .sel-wrap select:focus{border-color:var(--secondary-400);background-color:var(--n-0);box-shadow:var(--shadow-focus);}
  /* The old CSS caret is retired in favour of the design-system chevron above. */
  .sel-wrap::after{display:none;}
  .sel-wrap select:invalid,.sel-wrap select option[disabled]{color:var(--n-300);}

  /* ---- Custom dropdown (JS-enhanced) — replaces the native OS popup with a fully styled
     listbox. The native <select> stays in the DOM (form value + required validation) but is
     visually hidden once .ds-dd is applied. Chevron sits on the physical LEFT (RTL). ---- */
  .sel-wrap.ds-dd > select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;}
  .dd-trigger{width:100%;height:50px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-inline:14px;border:1.5px solid var(--n-100);border-radius:12px;background:var(--primary-50);font-family:var(--font-arabic);font-size:15px;font-weight:600;color:var(--n-600);cursor:pointer;text-align:start;transition:border-color var(--hover-dur-micro) var(--hover-ease),box-shadow var(--hover-dur-micro) var(--hover-ease),background var(--hover-dur-micro) var(--hover-ease);}
  .dd-trigger:hover{border-color:var(--secondary-300);}
  .dd-trigger[aria-expanded="true"]{border-color:var(--secondary-400);background:var(--n-0);box-shadow:var(--shadow-focus);}
  .dd-trigger .dd-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dd-trigger .dd-label.is-placeholder{color:var(--n-300);}
  .dd-trigger .dd-caret{flex-shrink:0;width:16px;height:16px;color:var(--n-400);transition:transform var(--hover-dur-micro) var(--hover-ease);}
  .dd-trigger[aria-expanded="true"] .dd-caret{transform:rotate(180deg);}
  .dd-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:30;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:var(--space-2);max-height:264px;overflow-y:auto;display:none;}
  .dd-menu.open{display:block;animation:ddIn var(--duration-base) var(--ease-entrance) both;}
  @keyframes ddIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
  .dd-option{padding:var(--space-3) var(--space-3-5);border-radius:var(--r-sm);font-family:var(--font-arabic);font-size:14.5px;font-weight:600;color:var(--n-600);cursor:pointer;transition:background var(--hover-dur-micro) var(--hover-ease),color var(--hover-dur-micro) var(--hover-ease);}
  .dd-option:hover{background:var(--primary-50);color:var(--primary-700);}
  .dd-option.is-active{background:var(--secondary-50);color:var(--secondary-700);font-weight:700;}
  .dd-option.is-disabled{color:var(--n-300);cursor:default;}
  .dd-option.is-disabled:hover{background:transparent;color:var(--n-300);}
  /* Mirror the native select's invalid state onto the custom trigger. */
  .sel-wrap.ds-dd > select.invalid ~ .dd-trigger{border-color:var(--coral);box-shadow:0 0 0 3px rgba(var(--rgb-coral),.14);}

  /* Quantity + unit compound — number input flexes, unit select hugs its content. */
  .field .compound{display:flex;gap:var(--space-2-5);}
  .field .compound input{flex:1;min-width:0;}
  .field .compound .sel-unit{flex-shrink:0;width:118px;}
  .field .compound .sel-unit select{padding-inline-start:12px;padding-inline-end:32px;background-position:left 11px center;}

  /* Section divider inside the form (بيانات التواصل). */
  .rfq-sep{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-7) 0 var(--space-5);color:var(--n-400);}
  .rfq-sep::before,.rfq-sep::after{content:"";flex:1;height:1px;background:var(--n-100);}
  .rfq-sep span{font-family:var(--font-arabic);font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--secondary-700);text-transform:none;}

  /* Sample checkbox — custom box in the site's teal accent language. */
  .rfq-check{display:flex;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-5);cursor:pointer;}
  .rfq-check input{position:absolute;opacity:0;width:0;height:0;}
  .rfq-check .rc-box{flex-shrink:0;width:22px;height:22px;border:1.5px solid var(--n-200);border-radius:var(--r-xs);background:var(--primary-50);display:grid;place-items:center;color:transparent;transition:background var(--hover-dur-micro) var(--hover-ease),border-color var(--hover-dur-micro) var(--hover-ease),color var(--hover-dur-micro) var(--hover-ease);}
  .rfq-check .rc-box svg{width:14px;height:14px;}
  .rfq-check:hover .rc-box{border-color:var(--secondary-300);}
  .rfq-check input:checked + .rc-box{background:var(--secondary-400);border-color:var(--secondary-400);color:var(--primary-900);}
  .rfq-check input:focus-visible + .rc-box{box-shadow:var(--shadow-focus);}
  .rfq-check .rc-t{font-family:var(--font-arabic);font-size:14px;line-height:1.6;color:var(--n-500);padding-top:var(--space-0-5);}

  /* Invalid state — coral hairline, no layout shift. */
  .rfq .field input.invalid,.rfq .field textarea.invalid,.rfq .sel-wrap select.invalid,
  .rfq-check input.invalid + .rc-box{border-color:var(--coral)!important;box-shadow:0 0 0 3px rgba(var(--rgb-coral),.14);}

  /* Consent microcopy. */
  .rfq-consent{margin:var(--space-4) 0 0;font-family:var(--font-arabic);font-size:12.5px;line-height:1.7;color:var(--n-400);text-align:center;}

  /* Instant confirmation — covers the form card, matching its white ::after face. */
  .quote-ok{position:absolute;inset:0;z-index:2;background:var(--n-0);border:1px solid var(--n-100);border-radius:22px;box-shadow:var(--shadow-xl);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 44px;}
  /* Every section that hosts a .form gets the reveal pair — the homepage's short
     "تحدّث إلينا" block lives in .contact, not .rfq, so it needs naming here too
     or its confirmation stays invisible and the button looks dead. */
  .rfq .form.sent .quote-ok,
  .contact .form.sent .quote-ok{display:flex;animation:qkIn var(--duration-slow) var(--ease-entrance) both;}
  .rfq .form.sent > :not(.quote-ok),
  .contact .form.sent > :not(.quote-ok){visibility:hidden;}
  .quote-ok .qk-ic{width:74px;height:74px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--secondary-50);border:1px solid var(--secondary-300);color:var(--secondary-600);margin-bottom:var(--space-5);}
  .quote-ok h3{margin:0 0 var(--space-3);font-family:var(--font-arabic);font-size:26px;font-weight:800;color:var(--primary-700);}
  .quote-ok p{margin:0 0 var(--space-5);font-family:var(--font-arabic);font-size:15.5px;line-height:1.85;color:var(--n-500);max-width:400px;}
  .quote-ok .qk-ref{font-family:var(--font-arabic);font-size:13.5px;font-weight:600;color:var(--n-500);background:var(--primary-50);border:1px dashed var(--primary-100);border-radius:var(--r-pill);padding:var(--space-2-5) var(--space-5);margin-bottom:var(--space-6);}
  .quote-ok .qk-ref b{font-family:'Exo',sans-serif;letter-spacing:.06em;color:var(--primary-700);direction:ltr;}
  .quote-ok .qk-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;}
  @keyframes qkIn{from{opacity:0;transform:translateY(12px) scale(.985);}to{opacity:1;transform:none;}}

  @media (max-width:960px){
    .rfq .wrap{grid-template-columns:1fr;gap:0;}
    .rfq-aside{border-radius:var(--r-2xl) var(--r-2xl) 0 0;}
    .rfq .form{margin-top:-24px;width:calc(100% - 32px);margin-inline:auto;}
  }
  @media (max-width:560px){
    .rfq{padding:var(--space-section-sm) 0;}
    .rfq-aside{padding:36px 26px;}
    .rfq .form{padding:28px 22px;}
    .rfq .form .row{grid-template-columns:1fr;}
    .field .compound .sel-unit{width:104px;}
    .quote-ok{padding:32px 24px;}
    .quote-ok h3{font-size:22px;}
  }

  /* Reduced motion — the confirmation appears without transform. */
  @media (prefers-reduced-motion: reduce){
    .rfq .form.sent .quote-ok,
    .contact .form.sent .quote-ok{animation:none;}
  }

  /* ============ CONTACT — تواصل معنا (contact page) ============
     A deliberately distinct composition from the RFQ page (no navy rail + form clone).
     Three new movements, all built from existing DNA + tokens only:
       1) .contact-cards — external elevated channel cards using the site's layered .ic-plate
          icon signature + why-card hover (lift + teal top-draw).
       2) .contact-connect — the message .form FUSED beside a live embedded map, with a
          floating navy address/hours card (deep-bg + motif + «تُحدَّث قريباً», never faked).
       3) FAQ — reuses the site's .faq accordion verbatim (see that block).
     Also keeps the compact .pdx-opts-row preferred-channel radios. No raw hex / magic
     numbers beyond the shared DS scale — page aliases + tokens only. */

  /* 1) Channel cards — external, elevated; .ic-plate layered icon + why-card motion. */
  .contact-cards{padding:var(--space-section) 0 0;background:var(--n-0);}
  .contact-cards .cc-head{max-width:640px;margin:0 0 var(--space-8);}
  .contact-cards .cc-head h2{margin:var(--space-3) 0 var(--space-2);font-family:var(--font-arabic);font-size:34px;font-weight:800;color:var(--primary-700);letter-spacing:-.02em;line-height:1.15;}
  .contact-cards .cc-head p{margin:0;font-family:var(--font-arabic);font-size:16px;line-height:1.8;color:var(--n-500);}
  .cc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);}
  .ccard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-4-5);padding:var(--space-6) var(--space-6) var(--space-6-5);background:linear-gradient(180deg,var(--n-0),var(--surface-tint-1));border:1px solid var(--n-100);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);text-decoration:none;transition:transform var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard);}
  .ccard::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--secondary-400);transform:scaleX(0);transform-origin:inline-end;transition:transform var(--duration-slow) var(--ease-standard);}
  .ccard:hover{transform:translateY(var(--hover-lift-md));box-shadow:var(--shadow-lg);border-color:var(--secondary-300);}
  .ccard:hover::before{transform:scaleX(1);}
  .ccard:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--secondary-400);}
  /* Layered icon — .ic-plate teal offset + white pop (site's About/Quality signature). */
  .ccard .ic-plate{width:52px;height:52px;}
  .ccard .ic-plate .plate-back{transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .ccard:hover .ic-plate .plate-back{transform:translate(0,0);}
  /* Brand marks (WhatsApp/Facebook) ride the same plate as the Iconsax UI icons —
     size them to match the 22px webfont glyph and pick up the teal via currentColor. */
  .ccard .ic-plate .ico-pop svg{width:22px;height:22px;color:var(--secondary-700);transition:stroke var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard);}
  .cc-k{font-family:var(--font-arabic);font-size:13px;font-weight:700;color:var(--n-400);}
  .cc-v{font-family:var(--font-arabic);font-size:16px;font-weight:800;color:var(--primary-700);overflow-wrap:anywhere;}
  .cc-v.ltr{direction:ltr;text-align:right;font-size:15px;letter-spacing:.01em;}
  .cc-go{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:auto;font-family:var(--font-arabic);font-size:13px;font-weight:700;color:var(--secondary-600);}
  .cc-go .cta-ar{transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .ccard:hover .cc-go .cta-ar{transform:translateX(var(--hover-nudge));}

  /* 2) Message form fused with a live map. */
  .contact-connect{padding:var(--space-section) 0;background:var(--n-0);}
  .contact-connect .cc-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--space-8);align-items:stretch;}

  /* Form card — reuse .form, but drop the RFQ layered offset for a cleaner paired look. */
  .contact-connect .form{margin:0;width:100%;align-self:stretch;padding:var(--space-9);}
  .contact-connect .form::before{display:none;}
  .contact-connect .form .req{color:var(--coral);font-weight:800;}
  .contact-connect .field input.invalid,.contact-connect .field textarea.invalid,
  .contact-connect .sel-wrap select.invalid{border-color:var(--coral)!important;box-shadow:0 0 0 3px rgba(var(--rgb-coral),.14);}
  /* Instant confirmation overlay — same behaviour as RFQ, scoped to this section. */
  .contact-connect .form.sent .quote-ok{display:flex;animation:qkIn var(--duration-slow) var(--ease-entrance) both;}
  .contact-connect .form.sent > :not(.quote-ok){visibility:hidden;}

  /* Map column — fills the paired row height; floating navy address/hours card. */
  .cc-map{position:relative;border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--n-100);box-shadow:var(--shadow-lg);background:var(--primary-50);min-height:520px;}
  .cc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.14) contrast(1.02);}
  .cc-map-card{position:absolute;inset-inline:var(--space-5);bottom:var(--space-5);z-index:2;overflow:hidden;background:var(--deep-bg);color:var(--n-0);border-radius:var(--r-xl);padding:var(--space-5) var(--space-5-5);box-shadow:var(--shadow-xl);}
  .cc-map-card .motif{opacity:var(--motif-band);}
  .cc-map-row{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-4);}
  .cc-map-card .mb-ic{flex-shrink:0;width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;background:rgba(var(--rgb-white),.06);border:1px solid rgba(var(--rgb-teal),.32);}
  .cc-map-card .mb-t .k{font-family:var(--font-arabic);font-size:13px;color:var(--n-300);}
  .cc-map-card .mb-t .v{font-family:var(--font-arabic);font-size:16.5px;font-weight:700;color:var(--n-0);}
  .cc-hours{position:relative;z-index:1;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid rgba(var(--rgb-white),.12);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-family:var(--font-arabic);font-size:13.5px;color:var(--n-300);}
  .cc-hours .soon{font-size:12px;font-weight:700;color:var(--secondary-300);background:rgba(var(--rgb-teal),.14);border:1px solid rgba(var(--rgb-teal),.34);border-radius:var(--r-pill);padding:2px 10px;white-space:nowrap;}
  .cc-map-card .btn{position:relative;z-index:1;margin-top:var(--space-4-5);width:100%;}

  /* Compact preferred-channel radios — horizontal .pdx-opts variant. */
  .pdx-opts-row{flex-direction:row;flex-wrap:wrap;gap:var(--space-2-5);margin-bottom:0;}
  .pdx-opts-row .pdx-opt{flex:1;min-width:130px;justify-content:flex-start;padding:var(--space-3) var(--space-4);}

  @media (max-width:960px){
    .cc-grid{grid-template-columns:repeat(2,1fr);}
    .contact-connect .cc-inner{grid-template-columns:1fr;gap:var(--space-7);}
    .cc-map{min-height:380px;order:-1;}
  }
  @media (max-width:560px){
    .cc-grid{grid-template-columns:1fr;}
    .contact-cards .cc-head h2{font-size:27px;}
    .contact-connect .form{padding:28px 22px;}
    .contact-connect .form .row{grid-template-columns:1fr;}
    .cc-map{min-height:320px;}
    .cc-map-card{inset-inline:var(--space-3);bottom:var(--space-3);padding:var(--space-4-5);}
    .pdx-opts-row .pdx-opt{min-width:0;flex-basis:100%;}
  }

  /* Reduced motion — the confirmation appears without transform. */
  @media (prefers-reduced-motion: reduce){
    .contact-connect .form.sent .quote-ok{animation:none;}
  }

  /* ============ ICONSAX WEBFONT — icon integration ============
     UI icons are called by name via <i class="iconsax" icon-name="…"></i> (Iconsax by
     Vuesax, linear style, loaded from the CDN stylesheet in each page <head>). Brand marks
     (WhatsApp / Facebook / Instagram) intentionally stay as real inline SVGs — the set has
     no brand logos. This block only maps the font glyph to each container's expected size
     and colour, mirroring the width/stroke the inline SVGs used. Tokens only. */
  .iconsax{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-size:22px;line-height:1;color:currentColor;flex-shrink:0;}

  /* Sizes that differ from the 22px default (mirror the old svg width attributes). */
  .nav-toggle .iconsax{font-size:26px;}
  .qk-ic .iconsax{font-size:34px;}
  .faq-icon-wrap .iconsax,.contact-addr .iconsax,.crumbs .iconsax{font-size:18px;}
  footer .f-ic .iconsax{font-size:17px;}

  /* Inline-with-text + placeholder + plate contexts — mirror the old svg widths. */
  .a-chip .iconsax{font-size:16px;color:var(--secondary-600);}
  .file-soon .iconsax,.file-dl .iconsax,.pdx-trust .iconsax{font-size:16px;}
  .file-dl > .iconsax{font-size:20px;}
  .rel-nav .iconsax{font-size:20px;}
  .tb-logo .iconsax{font-size:34px;}
  .ind-card.feat .ic-feat .iconsax{font-size:30px;color:var(--secondary-300);}

  /* Colours that came from a specific stroke rather than currentColor. */
  .icon-tile .iconsax{color:var(--secondary-600);font-size:24px;}
  .why-card:hover .icon-tile .iconsax{color:var(--n-0);}
  .ch-ic .iconsax{color:var(--secondary-400);}
  .mb-ic .iconsax{color:var(--secondary-300);}
  .ic-plate .ico-pop .iconsax{color:var(--secondary-700);font-size:24px;}
  .faq-icon-wrap .iconsax{color:var(--secondary-600);}
  .faq-item[open] .faq-icon-wrap .iconsax,.faq-item.is-open .faq-icon-wrap .iconsax{color:var(--n-0);}


  /* ============ SMOOTH SCROLL + CUSTOM CURSOR ============
     Both are pure progressive enhancement, switched on per-page by a class the page
     script adds to <body>. With JS off — or on touch, coarse pointers, or
     prefers-reduced-motion — nothing here applies and the page keeps the native
     scroll and the native cursor. ============================================== */

  /* Lenis core rules, mirrored from the library's own lenis.css so we don't add a
     render-blocking third-party stylesheet. Keep in sync with the pinned version
     in baraka-website.html (currently 1.3.25). */
  html.lenis,html.lenis body{height:auto;}
  .lenis.lenis-smooth{scroll-behavior:auto!important;}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
  .lenis.lenis-stopped{overflow:hidden;}
  .lenis.lenis-smooth iframe{pointer-events:none;}

  /* Custom cursor — a solid dot pinned to the pointer plus a ring that lags behind it.
     Position lives on the outer element (JS writes a transform every frame); every
     visual state change scales the inner <i> instead, so the two never fight. */
  @media (hover:hover) and (pointer:fine){
    body.has-cursor,
    body.has-cursor a,body.has-cursor button,body.has-cursor summary,
    body.has-cursor label,body.has-cursor [role="button"],
    body.has-cursor input,body.has-cursor select,body.has-cursor textarea{cursor:none;}

    .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
      opacity:0;transition:opacity var(--hover-dur-lift) var(--hover-ease);will-change:transform;}
    /* Revealed only after the first real pointer move, so it never flashes at 0,0. */
    body.cursor-ready .cursor-dot,body.cursor-ready .cursor-ring{opacity:1;}

    .cursor-dot>i,.cursor-ring>i{display:block;border-radius:var(--r-pill);
      transition:transform var(--hover-dur-lift) var(--hover-ease),
                 background var(--hover-dur-lift) var(--hover-ease),
                 border-color var(--hover-dur-lift) var(--hover-ease),
                 opacity var(--hover-dur-micro) var(--hover-ease);}
    .cursor-dot>i{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--primary-700);}
    .cursor-ring>i{width:32px;height:32px;margin:-16px 0 0 -16px;
      border:1.5px solid rgba(var(--rgb-navy),.42);background:rgba(var(--rgb-navy),0);}

    /* Interactive target — the ring opens up and takes over, the dot steps aside. */
    body.cursor-hover .cursor-ring>i{transform:scale(1.75);
      border-color:rgba(var(--rgb-navy),.6);background:rgba(var(--rgb-navy),.08);}
    body.cursor-hover .cursor-dot>i{transform:scale(0);}

    /* Text / input — the ring gets out of the way of reading. */
    body.cursor-text .cursor-ring>i{opacity:0;transform:scale(.6);}
    body.cursor-text .cursor-dot>i{transform:scale(1.6);}

    /* Pressed. */
    body.cursor-down .cursor-ring>i{transform:scale(1.2);background:rgba(var(--rgb-navy),.14);}

    /* Over the navy/dark movements (hero, trust band, footer) the navy cursor would
       disappear — flip the whole thing to white there. */
    body.cursor-invert .cursor-dot>i{background:var(--n-0);}
    body.cursor-invert .cursor-ring>i{border-color:rgba(var(--rgb-white),.55);}
    body.cursor-invert.cursor-hover .cursor-ring>i{border-color:rgba(var(--rgb-white),.8);background:rgba(var(--rgb-white),.14);}
    body.cursor-invert.cursor-down .cursor-ring>i{background:rgba(var(--rgb-white),.2);}

    /* The pointer left the window. */
    body.cursor-out .cursor-dot,body.cursor-out .cursor-ring{opacity:0;}
  }

  /* Reduced motion — the cursor stays (it's a pointer, not an animation), but every
     bit of movement in it goes: the ring rides the pointer 1:1 instead of trailing it
     (the `lag` variable in the page script) and the state changes snap. */
  @media (prefers-reduced-motion: reduce){
    .cursor-dot,.cursor-ring,.cursor-dot>i,.cursor-ring>i{transition:none;}
  }


  /* ============ TESTING METHOD PAGE (route: testing) — منهجية الفحص والاختبار
     Extension, not redesign. The page furniture is reused verbatim: .subhero for
     the banner, .sec-head/.eyebrow for every section head, .story/.story-row for
     the photo-and-paragraph rows, .a-chip, .about-rule, .icon-tile, .cta-band and
     the footer. Only three layouts are new — the video frame, the stage track and
     the results table — and every value below is a design-system
     token. No new colours, radii, shadows or timings. ============ */

  /* Screen-reader-only text (the results table's <caption>). */
  .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;}

  /* Section grounds alternate white / tinted down the page so no two adjacent
     sections merge into one band:
       subhero (navy) · stages (white) · video (tint) · lab (white) ·
       results (tint) · cta-band (teal). */

  /* --- VIDEO — one 16:9 frame, three possible states -------------------- */
  .tm-video{background:var(--primary-50);padding:var(--space-section) 0;}
  .tm-player{margin:var(--space-13-5) 0 0;}
  .tm-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-xl);background:var(--deep-bg);border:1px solid var(--n-100);box-shadow:var(--shadow-xl);}
  /* `contain`, not `cover`: a film that is not exactly 16:9 letterboxes onto the
     navy ground rather than losing its edges to a crop. */
  .tm-frame iframe,.tm-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:contain;background:var(--surface-deep-2);}

  /* Placeholder state — no video configured yet. Deliberately reads as "being
     produced", not as a broken player: same navy ground, a static play glyph
     that is not a button, and a line of copy from the panel. */
  .tm-frame.is-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);text-align:center;padding:var(--space-8);}
  .tm-frame.is-empty::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:var(--motif-hero);pointer-events:none;}
  .tm-play{position:relative;z-index:1;width:var(--space-16);height:var(--space-16);display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);background:rgba(var(--rgb-white),.08);border:1px solid rgba(var(--rgb-white),.22);color:var(--secondary-300);}
  .tm-play svg{width:var(--space-8);height:var(--space-8);}
  .tm-ph-title{position:relative;z-index:1;font-family:var(--font-arabic);font-size:19px;font-weight:800;color:var(--n-0);}
  .tm-ph-note{position:relative;z-index:1;max-width:46ch;font-size:14.5px;line-height:1.8;color:var(--hero-sub);}
  .tm-player figcaption{margin-top:var(--space-4);font-size:14px;line-height:1.8;color:var(--n-400);text-align:center;}

  /* --- STAGES — the batch's path through the lab ------------------------ */
  .tm-steps{background:var(--n-0);padding:var(--space-section) 0;}
  .tm-track{list-style:none;margin:var(--space-13-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);counter-reset:none;}
  .tm-step{position:relative;background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-xl);padding:var(--space-7);box-shadow:var(--shadow-sm);transition:var(--hover-t-card);}
  .tm-step:hover{transform:translateY(var(--hover-lift-md));box-shadow:var(--shadow-lg);border-color:var(--secondary-300);}
  .tm-step-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
  .tm-num{font-family:'Exo',sans-serif;font-size:32px;font-weight:700;line-height:1;letter-spacing:.06em;color:var(--primary-100);direction:ltr;transition:color var(--hover-dur-micro) var(--hover-ease);}
  .tm-step:hover .tm-num{color:var(--secondary-300);}
  .tm-step .icon-tile{width:var(--space-14);height:var(--space-14);color:var(--secondary-700);}
  .tm-step .icon-tile .iconsax{font-size:26px;}
  .tm-step:hover .icon-tile{background:var(--secondary-400);color:var(--n-0);transform:translateY(var(--hover-lift-sm)) scale(var(--hover-scale-icon));}
  .tm-step h3{margin:var(--space-6) 0 0;font-family:var(--font-arabic);font-size:19px;font-weight:800;line-height:1.45;color:var(--primary-700);}
  .tm-step h3::after{content:"";display:block;width:var(--space-9);height:var(--space-0-5);margin:var(--space-2-5) 0 var(--space-3);background:var(--secondary-400);border-radius:var(--r-pill);transform:scaleX(0);transform-origin:right center;transition:transform var(--hover-dur-lift) var(--hover-ease);}
  .tm-step:hover h3::after{transform:scaleX(1);}
  .tm-step p{margin:0;font-size:15px;line-height:1.85;color:var(--n-500);}

  /* The lab rows reuse .story wholesale, and .story is already white — which is
     the ground this position in the alternation calls for, so nothing to override. */
  .story .tm-story-head{margin-bottom:var(--space-4);}

  /* A published row whose photo has not been shot yet. Same aspect and radius as
     a real .story-figure image, so the layout does not shift when one is added. */
  .tm-figure-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);aspect-ratio:4/3;border-radius:var(--r-xl);background:var(--n-0);border:1px dashed var(--n-200);color:var(--n-300);text-align:center;padding:var(--space-6);}
  .tm-figure-ph .iconsax{font-size:34px;}
  .tm-figure-ph span{font-family:var(--font-arabic);font-size:14px;font-weight:700;color:var(--n-400);max-width:32ch;line-height:1.7;}

  /* --- RESULTS — the lab register --------------------------------------- */
  .tm-results{background:var(--primary-50);padding:var(--space-section) 0;}
  .tm-table-wrap{margin-top:var(--space-13-5);overflow-x:auto;border:1px solid var(--n-100);border-radius:var(--r-xl);box-shadow:var(--shadow-md);background:var(--n-0);}
  .tm-table-wrap:focus-visible{outline:2px solid var(--secondary-400);outline-offset:2px;}
  .tm-table{width:100%;border-collapse:collapse;min-width:760px;}
  .tm-table thead th{background:var(--primary-50);font-family:var(--font-arabic);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--primary-700);text-align:start;padding:var(--space-4-5) var(--space-5);white-space:nowrap;border-bottom:1px solid var(--n-100);}
  .tm-table tbody tr{border-bottom:1px solid var(--primary-50);transition:background var(--hover-dur-micro) var(--hover-ease);}
  .tm-table tbody tr:last-child{border-bottom:none;}
  .tm-table tbody tr:hover{background:var(--surface-card);}
  /* Centred, not top-aligned: the name cell is two or three lines tall (name +
     latin code + optional note) while the rest are one, so `top` left every other
     cell floating above the row's optical middle. */
  .tm-table th[scope="row"]{text-align:start;padding:var(--space-4-5) var(--space-5);font-weight:600;color:var(--n-600);vertical-align:middle;}
  .tm-table td{padding:var(--space-4-5) var(--space-5);font-size:15px;color:var(--n-500);vertical-align:middle;}
  .tm-t-name{display:block;font-family:var(--font-arabic);font-size:15.5px;font-weight:700;color:var(--primary-700);}
  /* inline-block, not block: a block with direction:ltr aligns its text to its
     own left edge, which in RTL parks the latin code away from the Arabic name
     above it. An inline-block is placed by the cell's own text-align, so the code
     sits under the name in both reading directions, while unicode-bidi keeps the
     latin run itself isolated. Same treatment as .pd-specs td .ltr. */
  .tm-t-code{display:inline-block;font-family:'Exo',sans-serif;font-size:10px;letter-spacing:.12em;color:var(--n-300);direction:ltr;unicode-bidi:isolate;margin-top:var(--space-1);}
  .tm-t-note{display:block;font-size:12.5px;line-height:1.7;color:var(--n-400);margin-top:var(--space-1-5);max-width:34ch;}
  .tm-t-value{font-weight:700;color:var(--primary-700);}
  /* Latin values (method, unit) stay LTR inside an RTL table without dragging
     their punctuation to the wrong side. Applied to a span inside the cell — see
     the note in the template about why this must never land on the <td>. */
  .tm-table td .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;font-family:'Exo',sans-serif;font-weight:600;letter-spacing:.03em;font-size:13.5px;}

  .tm-badge{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1-5) var(--space-3);border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:12.5px;font-weight:700;white-space:nowrap;}
  .tm-badge::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:50%;background:currentColor;}
  .tm-badge.is-pass{color:var(--secondary-700);background:var(--secondary-50);}
  .tm-badge.is-watch{color:var(--amber-700);background:var(--surface-warm);}
  .tm-badge.is-pending{color:var(--n-400);background:var(--n-50);}

  .tm-empty{margin:var(--space-13-5) 0 0;padding:var(--space-10);text-align:center;border:1px dashed var(--n-200);border-radius:var(--r-xl);font-size:15.5px;color:var(--n-400);}

  @media (max-width:1080px){
    .tm-track{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:820px){
    /* The table stops being a table: each row becomes a card and every cell
       carries its own header from data-label, so nothing depends on a column
       the reader can no longer see. */
    .tm-table-wrap{overflow-x:visible;border:none;box-shadow:none;background:transparent;}
    .tm-table{min-width:0;}
    .tm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
    .tm-table tbody tr{display:block;margin-bottom:var(--space-4);border:1px solid var(--n-100);border-radius:var(--r-lg);background:var(--n-0);box-shadow:var(--shadow-sm);overflow:hidden;}
    .tm-table tbody tr:hover{background:var(--n-0);}
    .tm-table th[scope="row"]{display:block;background:var(--primary-50);padding:var(--space-4) var(--space-5);}
    .tm-table td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-3) var(--space-5);border-top:1px solid var(--primary-50);}
    .tm-table td::before{content:attr(data-label);font-family:var(--font-arabic);font-size:12.5px;font-weight:700;color:var(--n-400);flex-shrink:0;}
  }
  @media (max-width:768px){
    .tm-track{grid-template-columns:1fr;}
  }