@charset "utf-8";
/* ==========================================================================
   ORGANIX — Design System  "Clinical Precision"
   --------------------------------------------------------------------------
   Colour discipline (the rule that keeps this from looking generic):
     BLUE  = the brand, structure, interaction.
     GREEN = verification only — certificates, checks, "approved" states.
   Never blend the two into a gradient. Never use green as decoration.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* ink & paper */
  --ink:        #0A1F2E;
  --ink-2:      #05141E;
  --ink-3:      #0F2C3E;
  --slate:      #4A6572;
  --slate-2:    #587080;   /* AA on paper, white and tint */
  --paper:      #FBFBF9;
  --surface:    #FFFFFF;
  --surface-2:  #F1F5F4;
  --line:       #E3E8E6;
  --line-strong:#CBD5D2;
  --line-dk:    rgba(255,255,255,.13);
  --line-dk-2:  rgba(255,255,255,.28);

  /* brand */
  --blue:       #0E76BC;
  --blue-dk:    #0A5A91;
  --blue-lt:    #E9F3FA;
  --blue-glow:  #5FB8F0;   /* the halo from the Organix wordmark */

  /* verification */
  --verify:     #16A34A;
  --verify-lt:  #E9F6ED;

  /* type */
  --f-en:  'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --f-ar:  'IBM Plex Sans Arabic', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f:     var(--f-en);

  /* geometry — small radii read as precision, not consumer-app friendliness */
  --r-xs: 3px;
  --r:    6px;
  --r-lg: 10px;

  /* elevation — used sparingly; borders do most of the work */
  --lift:   0 1px 2px rgba(10,31,46,.05), 0 8px 24px -12px rgba(10,31,46,.18);
  --lift-2: 0 2px 4px rgba(10,31,46,.06), 0 22px 48px -20px rgba(10,31,46,.30);

  --shell: 1280px;
  --gut:   clamp(20px, 4.4vw, 56px);
  --pad:   clamp(76px, 9.5vw, 140px);
  --ease:  cubic-bezier(.22,.68,.32,1);
}
html[lang="ar"]{ --f: var(--f-ar); }

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html:focus-within{ scroll-behavior:smooth; }
body{
  font-family:var(--f);
  background:var(--paper);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
svg{ fill:none; }
:where(h1,h2,h3,h4,h5){ font-weight:600; line-height:1.1; letter-spacing:-.022em; }
html[dir="rtl"] :where(h1,h2,h3,h4,h5){ letter-spacing:0; font-weight:700; }

/* focus — visible and on-brand, never removed */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.on-dark :focus-visible, .dark :focus-visible{ outline-color:var(--blue-glow); }

::selection{ background:var(--blue); color:#fff; }

/* ---------- 3. Layout primitives ---------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:var(--pad); position:relative; }
.sec--tight{ padding-block:clamp(52px,6vw,86px); }
.dark{ background:var(--ink); color:#fff; }
.dark p{ color:rgba(255,255,255,.68); }
.tint{ background:var(--surface-2); }
.rule{ height:1px; background:var(--line); border:0; }
.dark .rule{ background:var(--line-dk); }

/* section marker: 01 —— ABOUT   (technical documentation cue) */
.mark{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:22px;
}
html[dir="rtl"] .mark{ letter-spacing:.06em; }
.mark b{ color:var(--blue); font-weight:600; }
.mark::after{ content:""; flex:1; height:1px; background:var(--line); max-width:88px; }
.dark .mark{ color:rgba(255,255,255,.5); }
.dark .mark b{ color:var(--blue-glow); }
.dark .mark::after{ background:var(--line-dk); }

.h-xl{ font-size:clamp(38px,5.6vw,72px); line-height:1.02; }
.h-lg{ font-size:clamp(29px,3.9vw,50px); line-height:1.06; }
.h-md{ font-size:clamp(21px,2.3vw,29px); line-height:1.16; }
.h-sm{ font-size:clamp(17px,1.5vw,20px); line-height:1.3; }
.lead{ font-size:clamp(16.5px,1.35vw,19.5px); line-height:1.62; color:var(--slate); max-width:62ch; }
.dark .lead{ color:rgba(255,255,255,.7); }
.muted{ color:var(--slate); }
.sec-head{ max-width:760px; margin-bottom:clamp(40px,4.6vw,66px); }
.sec-head .lead{ margin-top:18px; }

/* ---------- 4. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--r);
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap; text-align:center;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
html[dir="rtl"] .btn{ letter-spacing:0; }
.btn svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.9; flex:none; }
html[dir="rtl"] .btn .ico-arrow{ transform:scaleX(-1); }

.btn--pri{ background:var(--blue); color:#fff; }
.btn--pri:hover{ background:var(--blue-dk); transform:translateY(-1px); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:var(--ink-3); transform:translateY(-1px); }
.btn--line{ border-color:var(--line-strong); color:var(--ink); background:var(--surface); }
.btn--line:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn--onDark{ border-color:var(--line-dk-2); color:#fff; }
.btn--onDark:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:var(--blue-lt); }
.btn--sm{ padding:10px 18px; font-size:13.5px; }
.btn--block{ width:100%; }

/* text link with rule */
.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:14.5px; color:var(--blue);
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:gap .25s var(--ease), color .25s;
}
.tlink:hover{ gap:13px; color:var(--blue-dk); }
.tlink svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2; }
html[dir="rtl"] .tlink svg{ transform:scaleX(-1); }
.dark .tlink{ color:var(--blue-glow); }

/* ---------- 5. Header ---------------------------------------------------- */
.skip{
  position:absolute; inset-inline-start:-9999px; top:12px; z-index:999;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--r);
}
.skip:focus{ inset-inline-start:16px; }

.hdr{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:120;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding-block:16px;
}
.hdr .shell{ display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); }
.hdr.is-stuck{
  background:rgba(251,251,249,.86);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 1px 0 var(--line);
  padding-block:9px;
}
/* header sitting over the dark hero */
.hdr:not(.is-stuck) .nav a{ color:rgba(255,255,255,.76); }
.hdr:not(.is-stuck) .nav a:hover{ color:#fff; }
.hdr:not(.is-stuck) .lang{ border-color:var(--line-dk-2); }
.hdr:not(.is-stuck) .lang button{ color:rgba(255,255,255,.7); }
.hdr:not(.is-stuck) .lang button[aria-pressed="true"]{ background:#fff; color:var(--ink); }
.hdr:not(.is-stuck) .burger{ border-color:var(--line-dk-2); }
.hdr:not(.is-stuck) .burger span{ background:#fff; }
.hdr:not(.is-stuck) .brand-name{ color:#fff; }
.hdr:not(.is-stuck) .brand-tag{ color:rgba(255,255,255,.55); }
.hdr:not(.is-stuck) .logo-img{ filter:none; }
/* on light pages the wordmark's white fill needs the dark treatment */
.hdr.is-stuck .logo-img,
.page-light .hdr .logo-img{ filter:none; }

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.logo-img{ width:auto; height:34px; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-family:var(--f-mono); font-size:15px; font-weight:600;
  letter-spacing:.14em; color:var(--ink);
}
.brand-tag{
  font-family:var(--f-mono); font-size:9.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate-2); margin-top:2px;
}
html[dir="rtl"] .brand-tag{ letter-spacing:.02em; }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); margin-inline-start:auto; }
.nav a{
  font-size:14px; font-weight:500; color:var(--slate);
  position:relative; padding-block:6px; transition:color .22s;
}
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0;
  height:1.5px; background:var(--blue);
}
.hdr-actions{ display:flex; align-items:center; gap:10px; flex:none; margin-inline-start:auto; }
.nav + .hdr-actions{ margin-inline-start:0; }

.lang{
  display:flex; border:1px solid var(--line-strong); border-radius:var(--r);
  overflow:hidden; font-family:var(--f-mono); font-size:11.5px; font-weight:600;
}
.lang button{
  padding:7px 11px; color:var(--slate); letter-spacing:.06em;
  transition:background .22s, color .22s;
}
.lang button[aria-pressed="true"]{ background:var(--ink); color:#fff; }

.burger{
  display:none; width:40px; height:40px; border:1px solid var(--line-strong);
  border-radius:var(--r); flex-direction:column; align-items:center;
  justify-content:center; gap:4.5px;
}
.burger span{ width:16px; height:1.5px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:130; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; padding:96px var(--gut) 40px;
  transform:translateY(-101%); transition:transform .5s var(--ease);
  overflow-y:auto;
}
.drawer[data-open="true"]{ transform:translateY(0); }
.drawer a{
  font-size:clamp(24px,6vw,34px); font-weight:600; padding-block:13px;
  border-bottom:1px solid var(--line-dk);
}
.drawer .btn{ margin-top:28px; }
.drawer-x{
  position:absolute; inset-block-start:22px; inset-inline-end:var(--gut);
  width:40px; height:40px; border:1px solid var(--line-dk-2); border-radius:var(--r);
  display:grid; place-items:center; color:#fff;
}
.drawer-x svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.8; }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero{
  background:var(--ink); color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(130px,15vw,180px) 0;
}
.hero::before{ /* soft brand halo, echoing the logo glow */
  content:""; position:absolute; inset-block-start:-18%; inset-inline-start:-8%;
  width:min(760px,78vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(95,184,240,.20),transparent 66%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px); align-items:center; position:relative; z-index:2;
}
.hero h1{ margin-block:20px 22px; }
.hero h1 .hl{ color:var(--blue-glow); }
.hero .lead{ max-width:53ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-block:34px 40px; }

/* certification chips under the fold-line */
.hero-certs{ display:flex; flex-wrap:wrap; gap:8px; }
.cchip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.07em;
  padding:6px 12px; border:1px solid var(--line-dk); border-radius:100px;
  color:rgba(255,255,255,.82); background:rgba(255,255,255,.04);
}
.cchip svg{ width:12px; height:12px; stroke:var(--verify); stroke-width:2.6; }

/* stat strip pinned to the bottom of the hero */
.hero-stats{
  border-block-start:1px solid var(--line-dk);
  margin-top:clamp(48px,6vw,84px);
  display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:2;
}
.hstat{ padding:clamp(22px,2.6vw,34px) 0; }
.hstat + .hstat{ border-inline-start:1px solid var(--line-dk); padding-inline-start:clamp(16px,2.4vw,34px); }
.hstat b{
  display:block; font-family:var(--f-mono); font-weight:500;
  font-size:clamp(27px,3.4vw,44px); line-height:1; letter-spacing:-.03em; color:#fff;
}
.hstat span{
  display:block; margin-top:9px; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.55); line-height:1.35;
}

/* the product wall — real product photography, slow parallax drift */
.wall{
  position:relative; height:clamp(400px,50vw,580px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 13%,#000 84%,transparent);
}
.wall-col{ display:flex; flex-direction:column; gap:12px; will-change:transform; }
.wall-col--a{ animation:drift-up 52s linear infinite; }
.wall-col--b{ animation:drift-down 62s linear infinite; }
.wall-col--c{ animation:drift-up 46s linear infinite; }
.wall-col img{
  width:100%; aspect-ratio:1/1; object-fit:contain;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-dk); border-radius:var(--r);
  padding:12px;
}
@keyframes drift-up  { from{ transform:translateY(0); }    to{ transform:translateY(-50%); } }
@keyframes drift-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

/* ---------- 7. Trust bar (certificate logos) ----------------------------- */
.trust{ background:var(--surface); border-block-end:1px solid var(--line); }
.trust .shell{
  display:flex; align-items:center; gap:clamp(20px,3.4vw,52px);
  padding-block:26px; flex-wrap:wrap;
}
.trust-lbl{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--slate-2);
  max-width:150px; line-height:1.5; flex:none;
}
html[dir="rtl"] .trust-lbl{ letter-spacing:.03em; }
.trust-row{ display:flex; align-items:center; gap:clamp(18px,3vw,44px); flex-wrap:wrap; flex:1; }
.trust-row img{
  height:clamp(40px,4.4vw,54px); width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.62; transition:filter .3s, opacity .3s;
}
.trust-row img:hover{ filter:none; opacity:1; }

/* ---------- 8. Cards & grids -------------------------------------------- */
.grid{ display:grid; gap:clamp(14px,1.6vw,22px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-5{ grid-template-columns:repeat(5,1fr); }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,2.3vw,30px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover{ border-color:var(--line-strong); box-shadow:var(--lift); transform:translateY(-3px); }
.card h3{ margin-block:16px 9px; font-size:17.5px; }
.card p{ font-size:14.5px; color:var(--slate); line-height:1.6; }
.dark .card{ background:rgba(255,255,255,.035); border-color:var(--line-dk); }
.dark .card:hover{ background:rgba(255,255,255,.06); border-color:var(--line-dk-2); box-shadow:none; }
.dark .card p{ color:rgba(255,255,255,.62); }

.ico{
  width:42px; height:42px; border-radius:var(--r);
  display:grid; place-items:center;
  background:var(--blue-lt); color:var(--blue);
}
.ico svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.7; }
.dark .ico{ background:rgba(95,184,240,.13); color:var(--blue-glow); }

/* numbered process steps */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-block-start:1px solid var(--line); }
.step{
  padding:30px clamp(14px,1.7vw,26px) 8px;
  border-inline-end:1px solid var(--line); position:relative;
}
.step:last-child{ border-inline-end:0; }
.step::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0;
  width:0; height:2px; background:var(--blue); transition:width .5s var(--ease);
}
.step:hover::before{ width:100%; }
.step-n{
  font-family:var(--f-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; color:var(--blue); margin-bottom:16px; display:block;
}
.step h3{ font-size:16.5px; margin-bottom:8px; }
.step p{ font-size:14px; color:var(--slate); }

/* dosage-form capability tiles */
.forms{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.form-tile{
  background:var(--surface); padding:24px 20px 22px;
  transition:background .28s var(--ease);
}
.form-tile:hover{ background:var(--blue-lt); }
.form-tile svg{ width:30px; height:30px; stroke:var(--blue); stroke-width:1.5; margin-bottom:16px; }
.form-tile b{ display:block; font-size:15px; font-weight:600; margin-bottom:3px; }
.form-tile span{ font-family:var(--f-mono); font-size:11.5px; color:var(--slate-2); letter-spacing:.03em; }

/* certificates — presented as documents, not floating orbs */
.certs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,22px); }
.cert{
  background:rgba(255,255,255,.04); border:1px solid var(--line-dk);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.cert:hover{ background:rgba(255,255,255,.07); border-color:var(--line-dk-2); transform:translateY(-3px); }
.cert-img{ background:#fff; padding:26px; display:grid; place-items:center; }
.cert-img img{ height:128px; width:auto; object-fit:contain; }
.cert-body{ padding:20px 22px 22px; }
.cert-body b{ display:block; font-size:16px; font-weight:600; margin-bottom:5px; }
.cert-body span{ font-size:13.5px; color:rgba(255,255,255,.58); line-height:1.5; }
.cert-vfy{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--verify);
}
html[dir="rtl"] .cert-vfy{ letter-spacing:.02em; }
.cert-vfy svg{ width:12px; height:12px; stroke:currentColor; stroke-width:2.8; }

/* facility items */
.fac{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-dk); border:1px solid var(--line-dk); border-radius:var(--r-lg); overflow:hidden; }
.fac-item{ background:var(--ink); padding:clamp(22px,2.4vw,30px); display:flex; gap:17px; transition:background .28s; }
.fac-item:hover{ background:var(--ink-3); }
.fac-item svg{ width:23px; height:23px; stroke:var(--blue-glow); stroke-width:1.6; flex:none; margin-top:2px; }
.fac-item b{ display:block; font-size:16px; font-weight:600; margin-bottom:6px; }
.fac-item p{ font-size:14px; color:rgba(255,255,255,.6); line-height:1.58; }

/* values / pills */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  padding:7px 15px; border:1px solid var(--line); border-radius:100px;
  font-size:13.5px; font-weight:500; color:var(--slate); background:var(--surface);
}
.dark .pill{ border-color:var(--line-dk); color:rgba(255,255,255,.72); background:rgba(255,255,255,.04); }

/* ---------- 9. Partner marquee ------------------------------------------ */
.marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee + .marquee{ margin-top:14px; }
.mq-track{ display:flex; align-items:center; gap:14px; width:max-content; animation:mq 64s linear infinite; }
.marquee:hover .mq-track{ animation-play-state:paused; }
.mq-track--rev{ animation-direction:reverse; animation-duration:74s; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .mq-track{ animation-name:mq-rtl; }
html[dir="rtl"] .mq-track--rev{ animation-name:mq-rtl; animation-direction:reverse; }
@keyframes mq-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
.mq-logo{
  flex:0 0 auto; height:74px; width:158px;
  display:grid; place-items:center; padding:14px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .3s, box-shadow .3s;
}
.mq-logo:hover{ border-color:var(--line-strong); box-shadow:var(--lift); }
.mq-logo img{
  max-height:100%; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.66; transition:filter .3s, opacity .3s;
}
.mq-logo:hover img{ filter:none; opacity:1; }

/* ---------- 10. Export markets ------------------------------------------ */
.markets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:1px; background:var(--line-dk); border:1px solid var(--line-dk); border-radius:var(--r-lg); overflow:hidden; }
.market{
  background:var(--ink); padding:20px 22px;
  display:flex; align-items:center; gap:11px; transition:background .28s;
}
.market:hover{ background:var(--ink-3); }
.market .flag{ font-size:20px; line-height:1; filter:saturate(1.05); }
.market b{ font-size:14.5px; font-weight:500; }

/* ---------- 11. FAQ ------------------------------------------------------ */
.faq{ border-block-start:1px solid var(--line); }
.faq details{ border-block-end:1px solid var(--line); }
.faq summary{
  display:flex; align-items:flex-start; gap:18px; cursor:pointer;
  padding-block:24px; list-style:none;
  font-size:clamp(16px,1.5vw,19px); font-weight:600; line-height:1.42;
  transition:color .22s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--blue); }
.faq summary .q{
  font-family:var(--f-mono); font-size:12px; font-weight:500;
  color:var(--blue); flex:none; margin-top:4px; letter-spacing:.06em;
}
.faq summary .plus{
  margin-inline-start:auto; flex:none; width:20px; height:20px; margin-top:3px;
  position:relative; transition:transform .35s var(--ease);
}
.faq summary .plus::before,
.faq summary .plus::after{
  content:""; position:absolute; inset-block-start:50%; inset-inline-start:0;
  width:100%; height:1.5px; background:var(--ink); transform:translateY(-50%);
}
.faq summary .plus::after{ transform:translateY(-50%) rotate(90deg); transition:transform .35s var(--ease); }
.faq details[open] summary .plus{ transform:rotate(180deg); }
.faq details[open] summary .plus::after{ transform:translateY(-50%) rotate(0deg); }
.faq-a{ padding:0 0 26px; }
.faq-a p{ color:var(--slate); font-size:15.5px; max-width:74ch; padding-inline-start:38px; }
html[dir="rtl"] .faq-a p{ padding-inline-start:34px; }

/* ---------- 12. RFQ form ------------------------------------------------- */
.rfq{
  background:rgba(255,255,255,.04); border:1px solid var(--line-dk);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,38px);
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ margin-bottom:15px; }
.field label{
  display:block; font-size:12px; font-weight:600; margin-bottom:7px;
  color:rgba(255,255,255,.62); letter-spacing:.02em;
}
.field .req{ color:var(--blue-glow); }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-dk);
  border-radius:var(--r); color:#fff; font-size:14.5px;
  transition:border-color .25s, background .25s;
}
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--ink); color:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.32); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue-glow); background:rgba(255,255,255,.08);
}
.field textarea{ resize:vertical; min-height:104px; }
.field-note{ font-size:12.5px; color:rgba(255,255,255,.45); margin-top:14px; line-height:1.55; }
.form-msg{
  margin-top:14px; padding:13px 16px; border-radius:var(--r); font-size:14px;
  display:none; border:1px solid transparent;
}
.form-msg[data-show="ok"]{ display:block; background:var(--verify-lt); color:#14532D; border-color:#BBE6C8; }
.form-msg[data-show="err"]{ display:block; background:#FEE9E7; color:#7F1D1D; border-color:#F6C9C4; }

/* contact detail rows */
.cinfo{ display:flex; gap:15px; padding-block:18px; border-block-end:1px solid var(--line-dk); }
.cinfo:first-of-type{ border-block-start:1px solid var(--line-dk); }
.cinfo svg{ width:19px; height:19px; stroke:var(--blue-glow); stroke-width:1.7; flex:none; margin-top:3px; }
.cinfo b{ display:block; font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:5px; font-family:var(--f-mono); }
html[dir="rtl"] .cinfo b{ letter-spacing:.02em; }
.cinfo a,.cinfo p{ font-size:15.5px; font-weight:500; color:#fff; }
.cinfo a:hover{ color:var(--blue-glow); }

.socials{ display:flex; gap:9px; margin-top:26px; }
.socials a{
  width:40px; height:40px; border:1px solid var(--line-dk); border-radius:var(--r);
  display:grid; place-items:center; transition:background .25s, border-color .25s, color .25s;
}
.socials svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.7; }
.socials a:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---------- 13. Footer --------------------------------------------------- */
.ftr{ background:var(--ink-2); color:rgba(255,255,255,.55); padding-block:clamp(52px,6vw,76px) 30px; }
.ftr-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,3vw,44px); padding-bottom:44px; }
.ftr h4{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:17px;
}
html[dir="rtl"] .ftr h4{ letter-spacing:.03em; }
.ftr li{ margin-bottom:10px; }
.ftr a{ font-size:14.5px; transition:color .22s; }
.ftr a:hover{ color:#fff; }
.ftr-about p{ font-size:14.5px; line-height:1.65; margin-top:16px; max-width:38ch; }
.ftr-btm{
  border-block-start:1px solid var(--line-dk); padding-top:26px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px;
}
.ftr-btm .qi{ display:flex; align-items:center; gap:9px; }
.ftr-btm .qi img{ height:34px; width:auto; opacity:.8; }

/* ---------- 14. Floating actions ----------------------------------------- */
.fabs{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:110;
  display:flex; flex-direction:column; gap:10px;
}
.fab{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--lift-2); transition:transform .28s var(--ease), opacity .28s, background .25s;
}
.fab svg{ width:22px; height:22px; stroke-width:1.9; }
.fab--wa{ background:#25D366; color:#fff; }
.fab--wa svg{ fill:currentColor; stroke:none; }
.fab--wa:hover{ transform:scale(1.07); }
.fab--top{ background:var(--ink); color:#fff; opacity:0; pointer-events:none; }
.fab--top svg{ stroke:currentColor; }
.fab--top[data-show="1"]{ opacity:1; pointer-events:auto; }
.fab--top:hover{ background:var(--blue); }

/* ---------- 15. Scroll reveal -------------------------------------------- */
html.js .rv{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js .rv.in{ opacity:1; transform:none; }

/* ---------- 16. Products page -------------------------------------------- */
.page-hero{ background:var(--ink); color:#fff; padding-block:clamp(126px,14vw,168px) clamp(44px,5vw,68px); position:relative; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset-block-start:-30%; inset-inline-end:-10%;
  width:min(620px,70vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(95,184,240,.17),transparent 66%);
}
.page-hero .shell{ position:relative; z-index:2; }
.crumbs{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:20px; }
html[dir="rtl"] .crumbs{ letter-spacing:.03em; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ margin-inline:8px; }

/* catalog controls */
.cat-bar{
  position:sticky; inset-block-start:0; z-index:60;
  background:rgba(251,251,249,.93);
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  border-block-end:1px solid var(--line);
  padding-block:14px;
}
.cat-bar-in{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.segs{ display:flex; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; flex:none; }
.seg{
  padding:9px 18px; font-size:13.5px; font-weight:600; color:var(--slate);
  transition:background .24s, color .24s; white-space:nowrap;
}
.seg[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.seg .n{ font-family:var(--f-mono); font-size:11px; opacity:.6; margin-inline-start:6px; }

.search{ position:relative; flex:1; min-width:190px; }
.search svg{
  position:absolute; inset-inline-start:13px; inset-block-start:50%;
  transform:translateY(-50%); width:16px; height:16px;
  stroke:var(--slate-2); stroke-width:1.9; pointer-events:none;
}
.search input{
  width:100%; padding:10px 14px; padding-inline-start:38px;
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); font-size:14px;
}
.search input:focus{ outline:none; border-color:var(--blue); }

.filters{ display:flex; gap:7px; flex-wrap:wrap; padding-block:16px 4px; }
.filt{
  padding:7px 14px; border:1px solid var(--line); border-radius:100px;
  font-size:13px; font-weight:500; color:var(--slate); background:var(--surface);
  transition:border-color .24s, color .24s, background .24s;
}
.filt:hover{ border-color:var(--line-strong); color:var(--ink); }
.filt[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }

.count{ font-family:var(--f-mono); font-size:12px; color:var(--slate-2); padding-block:14px; letter-spacing:.05em; }

/* product cards */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:clamp(12px,1.5vw,20px); }
.pcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; text-align:start; display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pcard:hover{ border-color:var(--line-strong); box-shadow:var(--lift); transform:translateY(-3px); }
.pcard-img{ background:var(--surface-2); aspect-ratio:4/3; display:grid; place-items:center; padding:14px; position:relative; }
.pcard-img img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.pcard-body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.pcard b{ font-size:15.5px; font-weight:600; line-height:1.32; }
.pcard .pc-tag{ font-size:13px; color:var(--slate); line-height:1.5; }
.pcard .pc-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:auto; padding-top:9px; }
.tag{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; background:var(--surface-2); color:var(--slate);
}
html[dir="rtl"] .tag{ letter-spacing:.02em; }
.tag--form{ background:var(--blue-lt); color:var(--blue-dk); }
.tag--co{ background:var(--ink); color:#fff; }

.empty{ padding:64px 0; text-align:center; color:var(--slate); }
.empty svg{ width:34px; height:34px; stroke:var(--line-strong); stroke-width:1.4; margin:0 auto 16px; }

/* modal */
.modal{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.modal[data-open="true"]{ display:flex; }
.modal-bg{ position:absolute; inset:0; background:rgba(5,20,30,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.modal-box{
  position:relative; background:var(--surface); border-radius:var(--r-lg);
  width:min(760px,100%); max-height:88vh; overflow-y:auto; box-shadow:var(--lift-2);
}
.modal-x{
  position:absolute; inset-block-start:14px; inset-inline-end:14px; z-index:3;
  width:36px; height:36px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line); display:grid; place-items:center;
}
.modal-x svg{ width:16px; height:16px; stroke:var(--ink); stroke-width:1.9; }
.modal-x:hover{ background:var(--surface-2); }
.modal-hd{ background:var(--surface-2); padding:34px; display:grid; place-items:center; }
.modal-hd img{ max-height:230px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.modal-bd{ padding:clamp(22px,3vw,34px); }
.modal-bd h3{ font-size:clamp(20px,2.3vw,27px); margin-bottom:9px; }
.modal-bd .m-tag{ color:var(--slate); font-size:15.5px; margin-bottom:20px; }
.modal-bd h4{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--slate-2); margin-block:22px 12px; font-weight:500;
}
html[dir="rtl"] .modal-bd h4{ letter-spacing:.03em; }
.mlist li{ display:flex; gap:11px; padding-block:7px; font-size:15px; line-height:1.55; }
.mlist svg{ width:15px; height:15px; stroke:var(--verify); stroke-width:2.6; flex:none; margin-top:5px; }
.ing{ display:flex; flex-wrap:wrap; gap:7px; }
.ing span{ padding:6px 12px; background:var(--surface-2); border-radius:100px; font-size:13px; color:var(--slate); }

/* ---------- 17. Responsive ---------------------------------------------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .wall{ height:330px; grid-template-columns:repeat(4,1fr); }
  .ftr-top{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step{ border-block-end:1px solid var(--line); }
  .step:nth-child(2n){ border-inline-end:0; }
  .certs{ grid-template-columns:repeat(2,1fr); }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .g-5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hstat{ padding:20px 0; }
  .hstat:nth-child(n+3){ border-block-start:1px solid var(--line-dk); }
  .hstat:nth-child(odd){ border-inline-start:0; padding-inline-start:0; }
  .hstat:nth-child(even){ border-inline-start:1px solid var(--line-dk); padding-inline-start:20px; }
  .g-2,.g-3,.g-4,.g-5,.fac,.certs{ grid-template-columns:1fr; }
  .f-row{ grid-template-columns:1fr; }
  .ftr-top{ grid-template-columns:1fr; }
  .trust .shell{ gap:16px; }
  .trust-lbl{ max-width:none; }
  .modal{ padding:0; align-items:flex-end; }
  .modal-box{ max-height:92vh; border-end-start-radius:0; border-end-end-radius:0; }
  .cinfo:first-of-type{ border-block-start:0; }
  .wall{ height:270px; grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .step{ border-inline-end:0; }
  .pgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .segs{ width:100%; }
  .seg{ flex:1; text-align:center; padding-inline:10px; }
}

/* ---------- 18. Motion & print ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:focus-within{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html.js .rv{ opacity:1; transform:none; }
  .wall-col{ animation:none !important; }
  .mq-track{ animation:none !important; }
}
@media print{
  .hdr,.fabs,.drawer,.marquee,.cat-bar,.modal{ display:none !important; }
  body{ background:#fff; color:#000; }
  .dark,.hero,.page-hero{ background:#fff !important; color:#000 !important; }
  .rv{ opacity:1 !important; transform:none !important; }
}

/* ---------- 19. Marquee controls -----------------------------------------
   UX guideline #108 (HIGH): auto-rotating content needs a keyboard-operable
   play/pause control, and must stop on focus, hover and reduced motion.     */
.mq-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.mq-pause{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:8px 14px; border:1px solid var(--line-strong); border-radius:var(--r);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); background:var(--surface); transition:border-color .24s, color .24s;
}
html[dir="rtl"] .mq-pause{ letter-spacing:.02em; }
.mq-pause:hover{ border-color:var(--ink); color:var(--ink); }
.mq-pause svg{ width:13px; height:13px; stroke:currentColor; stroke-width:2; }
.mq-pause .i-play{ display:none; }
.mq-pause[aria-pressed="true"] .i-play{ display:block; }
.mq-pause[aria-pressed="true"] .i-pause{ display:none; }
/* paused state drives the tracks */
.marquee[data-paused="true"] .mq-track{ animation-play-state:paused; }
/* stop while any logo inside has keyboard focus */
.marquee:focus-within .mq-track{ animation-play-state:paused; }

/* ---------- 20. Header fit on small screens -------------------------------
   The brand block + actions overflowed the bar below ~560px, pushing the
   burger off-canvas in RTL. Let the row shrink and drop non-essentials.     */
.brand{ min-width:0; }
.brand-txt{ min-width:0; }
.hdr .shell{ flex-wrap:nowrap; }

@media (max-width:1080px){
  /* .nav is display:none here, but the adjacent-sibling rule still matched,
     so the actions lost their auto margin and stopped hugging the edge. */
  .nav + .hdr-actions{ margin-inline-start:auto; }
}
@media (max-width:600px){
  .brand-txt{ display:none; }             /* the wordmark carries the brand */
  .hdr .shell{ gap:10px; }
  .hdr-actions{ gap:8px; }
  .hdr-actions .btn--pri{ display:none; } /* the CTA lives in the drawer */
}

/* sticky catalogue bar must clear the fixed header */
:root{ --hdr-h:60px; }
.cat-bar{ inset-block-start:var(--hdr-h); }
@media (max-width:600px){ :root{ --hdr-h:58px; } }

/* ==========================================================================
   21. Revision pass
   ========================================================================== */

/* ---- 21a. Process steps -------------------------------------------------
   Were hairline cells on a near-white section, so "How We Work" disappeared.
   Now discrete white cards on a tinted section, with a solid number badge.  */
.steps{
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.4vw,18px);
  border-block-start:0;
}
.step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,28px);
  border-inline-end:1px solid var(--line);
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.step:last-child{ border-inline-end:1px solid var(--line); }
.step:hover{ border-color:var(--line-strong); box-shadow:var(--lift); transform:translateY(-3px); }
/* the old ::before was a 2px hairline on the section edge; make it a card accent */
.step::before{
  inset-block-start:0; inset-inline:0; width:auto; height:3px;
  background:var(--blue);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
html[dir="rtl"] .step::before{ transform-origin:right center; }
.step:hover::before{ width:auto; transform:scaleX(1); }
.step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--blue-lt); color:var(--blue-dk);
  font-size:13px; letter-spacing:0; margin-bottom:18px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.step:hover .step-n{ background:var(--blue); color:#fff; }

/* ---- 21b. Certificates: now 7, so let the grid choose its own columns ---- */
.certs{ grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }

/* ---- 21c. Product cards with photography -------------------------------- */
.pfeat{
  padding:0; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:stretch;
}
.pfeat-img{
  position:relative; display:block;
  background:var(--surface-2); min-height:206px;
  border-inline-end:1px solid var(--line);
}
.pfeat-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .6s var(--ease);
}
.pfeat:hover .pfeat-img img{ transform:scale(1.04); }
.pfeat-body{ display:flex; flex-direction:column; padding:clamp(22px,2.3vw,30px); }
.pfeat-body h3{ margin-block:16px 9px; font-size:17.5px; }
.pfeat-body p{ font-size:14.5px; color:var(--slate); line-height:1.6; }
.pfeat-foot{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}

/* ---- 21d. Partner logos --------------------------------------------------
   Two problems with the source set: every logo is 110px tall but widths run
   94-476px, and each carries a different amount of built-in whitespace.

   Fix has two halves:
   1. A TALLER box, so tall/square logos are no longer strangled by height.
   2. Correction factors that only ever shrink (k <= 1), so a logo can never
      overflow its card and get clipped. Measured by build/measure-logos.js.  */
.mq-logo{ height:102px; width:190px; padding:14px 20px; }
.mq-logo img{
  /* Pixel limits, not percentages: .mq-logo is a grid whose implicit row is
     auto-sized, so a percentage max-height resolves against the row (which
     sizes to the image) and never constrains anything. That was the clipping. */
  max-height:74px; max-width:150px;
  width:auto; height:auto;
  transform:scale(var(--k,1));
  transform-origin:center;
  filter:grayscale(1) contrast(1.12);
  opacity:.8;
}
.mq-logo:hover img{ filter:none; opacity:1; }

@media (max-width:1080px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step, .step:last-child{ border-inline-end:1px solid var(--line); border-block-end:1px solid var(--line); }
}
@media (max-width:1080px){
  .pfeat{ grid-template-columns:1fr; }
  .pfeat-img{ aspect-ratio:16/6.4; min-height:0; border-inline-end:0; border-block-end:1px solid var(--line); }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .mq-logo{ height:80px; width:150px; padding:11px 15px; }
  .mq-logo img{ max-height:58px; max-width:120px; }
}