/* ==========================================================================
   EL FATH GROUP FOR SPECIFIC CHEMICALS
   Design system — "Platinum & Ember"
   Light, hi-tech, ultra-elegant. Ember (#FF6900) is taken from the original
   company logotype and is the only chromatic accent in the system.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* ember — the single accent */
  --ember:#FF6900;
  --ember-600:#E85E00;
  --ember-300:#FFA05C;
  --ember-050:#FFEDE0;
  --ember-glow:rgba(255,105,0,.20);
  --ember-text:#B44800;   /* AA-compliant ember for small text (5.4:1 on white) */

  /* platinum ground */
  --white:#FFFFFF;
  --canvas:#EFF3F9;
  --surface:#E7EDF4;
  --surface-2:#DBE3EE;
  --hair:#D8DFE9;
  --hair-soft:#E4EAF2;

  /* graphite ink */
  --ink:#0E1116;
  --ink-2:#2C333D;
  --muted:#4F5A69;
  --faint:#626D7B;
  --ghost:#A6B0BE;

  /* plated metal */
  --metal:linear-gradient(160deg,#FFFFFF 0%,#E9EDF1 28%,#C3CBD4 55%,#FFFFFF 74%,#A8B2BE 100%);
  --metal-text:linear-gradient(150deg,#454E5A 0%,#0B0E13 28%,#7A8797 56%,#0B0E13 86%);
  --sheen:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);

  /* glass */
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.9);
  --blur:saturate(180%) blur(20px);

  /* elevation — light, wide, almost colourless */
  --e1:0 1px 2px rgba(14,17,22,.04), 0 4px 14px -6px rgba(14,17,22,.06);
  --e2:0 2px 4px rgba(14,17,22,.03), 0 18px 40px -20px rgba(14,17,22,.14);
  --e3:0 4px 8px rgba(14,17,22,.03), 0 40px 80px -32px rgba(14,17,22,.20);
  --e-ember:0 18px 44px -20px rgba(255,105,0,.42);

  /* type */
  --f-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-ar:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;

  /* metrics */
  --wrap:1280px;
  --gutter:clamp(20px,5vw,72px);
  --r-sm:6px;
  --r:12px;
  --r-lg:20px;
  --r-xl:28px;

  --spring:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);

  --hdr-h:72px;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 28px)}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f-body);font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.03em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}
::selection{background:var(--ember);color:#fff}

/* thin, elegant scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--ghost) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--ghost);border-radius:9px;border:3px solid var(--white)}
*::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------ arabic/rtl -- */
html[lang="ar"] body{font-family:var(--f-ar);line-height:1.95;font-size:17px}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] h4,html[lang="ar"] h5{font-family:var(--f-ar);letter-spacing:0;line-height:1.4;font-weight:700}
html[lang="ar"] .mono,html[lang="ar"] .kicker,html[lang="ar"] .lbl,
html[lang="ar"] .tag,html[lang="ar"] .idx{font-family:var(--f-ar);letter-spacing:0;text-transform:none}
html[dir="rtl"] .i-flip{transform:scaleX(-1)}

/* --------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:960px}
.sec{padding-block:clamp(76px,9.5vw,144px);position:relative}
.sec--tight{padding-block:clamp(52px,6vw,88px)}
.sec--canvas{background:linear-gradient(180deg,var(--canvas) 0%,#EDF2F8 55%,var(--canvas) 100%)}
.sec--surface{background:var(--surface)}
.sec--flush{padding-top:0}

.grid{display:grid;gap:clamp(20px,2.4vw,34px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ambient light — soft ember bloom, barely there */
.aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aura::before,.aura::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.aura::before{width:52vw;height:52vw;top:-22vw;inset-inline-end:-14vw;background:rgba(255,105,0,.17)}
.aura::after{width:40vw;height:40vw;bottom:-20vw;inset-inline-start:-12vw;background:rgba(120,150,200,.16)}
.sec>.wrap{position:relative;z-index:1}

/* hairline grid texture */
.gridlines{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--hair-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair-soft) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 78%);
  opacity:1}

/* ----------------------------------------------------------------- type -- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember-text);margin-bottom:20px;
}
.kicker::before{content:"";width:22px;height:1px;background:var(--ember);flex:none}
.kicker--plain::before{display:none}
.kicker--muted{color:var(--faint)}
.kicker--muted::before{background:var(--ghost)}

.d1{font-size:clamp(40px,6.6vw,88px);letter-spacing:-.045em;line-height:.98;font-weight:600}
.d2{font-size:clamp(32px,4.6vw,60px);letter-spacing:-.04em;line-height:1.04}
.h2{font-size:clamp(27px,3.4vw,44px);letter-spacing:-.035em;line-height:1.08}
.h3{font-size:clamp(19px,1.9vw,25px);letter-spacing:-.025em;line-height:1.2}
.h4{font-size:16.5px;letter-spacing:-.015em;line-height:1.3}
.h5{font-size:14px;letter-spacing:-.01em}

.lead{font-size:clamp(16.5px,1.45vw,19.5px);line-height:1.68;color:var(--muted);font-weight:400}
.sm{font-size:14.5px;line-height:1.6}
.xs{font-size:13px;line-height:1.55}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.measure{max-width:64ch}
.measure-s{max-width:48ch}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* metal-etched display text */
.etch{background:var(--metal-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ember{color:var(--ember)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:100px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .4s var(--spring),background .3s,color .3s,border-color .3s,box-shadow .4s var(--spring);
  overflow:hidden;isolation:isolate;
}
html[lang="ar"] .btn{font-family:var(--f-ar);font-weight:700}
.btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--spring)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:hover svg:last-child{transform:translateX(3px)}
html[dir="rtl"] .btn:hover svg:last-child{transform:translateX(-3px)}

.btn--ember{background:var(--ember);color:#fff;box-shadow:var(--e-ember)}
.btn--ember:hover{background:var(--ember-600);box-shadow:0 22px 52px -20px rgba(255,105,0,.55)}
.btn--ember::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--sheen);
  transform:translateX(-120%);transition:transform .8s var(--spring)}
.btn--ember:hover::after{transform:translateX(120%)}

.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}

.btn--line{border-color:var(--hair);color:var(--ink);background:var(--white)}
.btn--line:hover{border-color:var(--ink);box-shadow:var(--e1)}

.btn--glass{background:var(--glass);border-color:var(--hair);color:var(--ink);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn--glass:hover{background:#fff;box-shadow:var(--e1)}

.btn--sm{padding:9px 16px;font-size:12.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.alink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ember-text);
  transition:gap .35s var(--spring)}
.alink svg{width:14px;height:14px}
.alink:hover{gap:14px}

/* ---------------------------------------------------------------- topbar -- */
.topbar{background:var(--ink);color:#98A2AF;font-size:12px;position:relative;z-index:90}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px}
.topbar ul{display:flex;align-items:center;gap:24px}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:color .25s}
.topbar a:hover{color:#fff}
.topbar svg{width:12px;height:12px;color:var(--ember);flex:none}
@media(max-width:820px){.topbar .thide{display:none}}

.langs{display:flex;align-items:center;gap:1px;background:rgba(255,255,255,.07);border-radius:100px;padding:2px}
.langs button{padding:4px 12px;font-size:10.5px;font-weight:600;letter-spacing:.1em;color:#98A2AF;
  border-radius:100px;transition:.25s;text-transform:uppercase}
.langs button:hover{color:#fff}
.langs button[aria-pressed="true"]{background:var(--ember);color:#fff}

/* ---------------------------------------------------------------- header -- */
.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s,background .4s}
.hdr.stuck{border-color:var(--hair);box-shadow:0 1px 30px -12px rgba(14,17,22,.16);background:rgba(255,255,255,.9)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hdr-h)}
.brand{display:flex;align-items:center;flex:none;transition:opacity .3s}
.brand:hover{opacity:.75}
.brand img{height:34px;width:auto}

.nav{display:flex;align-items:center;gap:4px}
.nav a{position:relative;padding:9px 15px;font-size:14px;font-weight:500;color:var(--muted);
  border-radius:100px;transition:color .28s,background .28s}
.nav a:hover{color:var(--ink);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:14px;height:2px;border-radius:2px;background:var(--ember)}

.hdr__act{display:flex;align-items:center;gap:10px}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hair);
  border-radius:100px;color:var(--ink);transition:.3s var(--spring);background:var(--white)}
.iconbtn:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--e1)}
.iconbtn svg{width:17px;height:17px}
.burger{display:none}
.burger i{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;position:relative;transition:.3s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--ink);
  border-radius:2px;transition:.35s var(--spring)}
.burger i::before{top:-5px}.burger i::after{top:5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

@media(max-width:1120px){
  .nav{position:fixed;inset:calc(36px + var(--hdr-h)) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    padding:10px var(--gutter) 26px;border-bottom:1px solid var(--hair);
    opacity:0;transform:translateY(-10px);pointer-events:none;transition:.35s var(--spring);
    max-height:calc(100vh - 108px);overflow:auto}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:15px 4px;border-radius:0;border-bottom:1px solid var(--hair-soft);font-size:16px}
  .nav a[aria-current="page"]::after{left:4px;transform:none;bottom:12px}
  .burger{display:grid}
  .hdr__act .btn{display:none}
}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(170deg,#FFFFFF 0%,#F7FAFD 62%,#EFF4FA 100%)}
.hero__mesh{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__mesh::before,.hero__mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(100px)}
.hero__mesh::before{width:60vw;height:60vw;top:-26vw;inset-inline-end:-16vw;background:rgba(255,105,0,.20);
  animation:drift 22s var(--ease) infinite alternate}
.hero__mesh::after{width:46vw;height:46vw;top:18vw;inset-inline-start:-18vw;background:rgba(110,140,190,.19);
  animation:drift 28s var(--ease) infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(4vw,3vw,0) scale(1.12)}}

.hero__in{padding-block:clamp(64px,9vw,116px) clamp(56px,7vw,92px);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,5vw,72px);align-items:center}
@media(max-width:1040px){.hero__in{grid-template-columns:1fr;gap:44px}}
.hero h1{max-width:14ch}
.hero .lead{max-width:50ch;margin-top:24px}

/* live status pill */
.pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;border-radius:100px;
  background:var(--white);border:1px solid var(--hair);box-shadow:var(--e1);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:26px}
html[lang="ar"] .pill{font-family:var(--f-ar);letter-spacing:0;font-size:12px}
.pill b{color:var(--ink);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ember);position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ember);
  animation:ping 2.4s var(--ease) infinite;opacity:0}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* hero visual */
.hviz{position:relative}
.hviz__frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e3);
  border:1px solid var(--hair);background:var(--surface)}
.hviz__frame img{width:100%;aspect-ratio:4/3.35;object-fit:cover;filter:saturate(.9) contrast(1.02) brightness(1.04)}
.hviz__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(255,255,255,.28) 0%,transparent 34%,rgba(255,105,0,.10) 100%)}
.hviz__cap{position:absolute;bottom:14px;inset-inline-start:14px;z-index:2;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);border-radius:100px;padding:8px 16px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
html[lang="ar"] .hviz__cap{font-family:var(--f-ar);letter-spacing:0;font-size:12px}

/* floating glass readout */
.hchip{position:absolute;z-index:3;background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--e2);
  animation:float 7s var(--ease) infinite alternate}
.hchip b{display:block;font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1}
html[lang="ar"] .hchip b{font-family:var(--f-ar)}
.hchip span{display:block;margin-top:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
html[lang="ar"] .hchip span{font-family:var(--f-ar);letter-spacing:0;font-size:11px}
.hchip--a{top:8%;inset-inline-start:-26px;animation-delay:-1s}
.hchip--b{bottom:14%;inset-inline-end:-22px;animation-delay:-3.5s}
@keyframes float{to{transform:translateY(-10px)}}
@media(max-width:1040px){.hchip--a{inset-inline-start:10px}.hchip--b{inset-inline-end:10px}}

/* hero metrics rail */
.rail{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--canvas)}
.rail ul{display:grid;grid-template-columns:repeat(4,1fr)}
.rail li{padding:26px 28px;border-inline-end:1px solid var(--hair)}
.rail li:last-child{border-inline-end:0}
.rail b{display:block;font-family:var(--f-display);font-size:clamp(24px,2.7vw,34px);font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--ink)}
html[lang="ar"] .rail b{font-family:var(--f-ar)}
.rail span{display:block;margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.45}
@media(max-width:820px){
  .rail ul{grid-template-columns:repeat(2,1fr)}
  .rail li{border-bottom:1px solid var(--hair)}
  .rail li:nth-child(2n){border-inline-end:0}
  .rail li:nth-last-child(-n+2){border-bottom:0}
}

/* -------------------------------------------------------------- page top -- */
.ptop{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(170deg,#FFFFFF 0%,#F5F8FC 100%);
  border-bottom:1px solid var(--hair)}
.ptop__in{padding-block:clamp(48px,6.5vw,88px)}
.ptop h1{max-width:19ch}
.ptop .lead{max-width:60ch;margin-top:18px}
.crumbs{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:22px}
.crumbs a{transition:color .25s}
.crumbs a:hover{color:var(--ember)}
html[lang="ar"] .crumbs{font-family:var(--f-ar);letter-spacing:0;font-size:12px}

/* --------------------------------------------------------- section heads -- */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(22px,4vw,64px);
  align-items:end;margin-bottom:clamp(36px,4.5vw,60px)}
.shead--mid{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:760px;margin-inline:auto}
.shead--mid .kicker{justify-content:center}
@media(max-width:860px){.shead{grid-template-columns:1fr;align-items:start}}

/* ---------------------------------------------------------------- cards -- */
.card{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 100%);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,32px);height:100%;display:flex;flex-direction:column;
  transition:transform .5s var(--spring),box-shadow .5s var(--spring),border-color .4s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,var(--ember-glow),transparent 70%);
  opacity:0;transition:opacity .5s}
.card:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:#DADFE7}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card h3{margin-bottom:10px}
.card p{font-size:14.8px;line-height:1.62;color:var(--muted)}
.card__ico{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;margin-bottom:20px;flex:none;
  background:var(--ember-050);color:var(--ember);border:1px solid rgba(255,105,0,.16)}
.card__ico svg{width:19px;height:19px}
.card__n{position:absolute;top:22px;inset-inline-end:24px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.12em;color:var(--ghost)}

/* glass card */
.gcard{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--e1)}

/* -------------------------------------------------------- division tiles -- */
.dtile{position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);
  border:1px solid var(--hair);min-height:400px;isolation:isolate;
  transition:transform .6s var(--spring),box-shadow .6s var(--spring)}
.dtile:hover{transform:translateY(-5px);box-shadow:var(--e3)}
.dtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.4s var(--spring);filter:saturate(.85) brightness(1.06)}
.dtile:hover img{transform:scale(1.06)}
.dtile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.94) 34%,rgba(255,255,255,.7) 62%,rgba(255,255,255,.18) 100%)}
.dtile__in{padding:clamp(26px,2.8vw,38px);display:flex;flex-direction:column;height:100%;min-height:400px}
.dtile__tag{align-self:flex-start;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember-text);border:1px solid rgba(255,105,0,.28);background:var(--ember-050);
  padding:6px 12px;border-radius:100px;margin-bottom:22px}
html[lang="ar"] .dtile__tag{font-family:var(--f-ar);letter-spacing:0;font-size:11.5px}
.dtile h3{font-size:clamp(23px,2.5vw,31px);margin-bottom:12px}
.dtile p{color:var(--muted);font-size:15px;max-width:42ch}
.dtile .alink{margin-top:auto;padding-top:24px}

/* --------------------------------------------------------- feature rows -- */
.frow{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.frow--rev .fimg{order:2}
@media(max-width:920px){.frow{grid-template-columns:1fr}.frow--rev .fimg{order:0}}
.fimg{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair);
  box-shadow:var(--e2);background:var(--surface)}
.fimg img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9) brightness(1.04)}
.fimg--tall img{aspect-ratio:3/3.6}
.fimg__cap{position:absolute;bottom:12px;inset-inline-start:12px;background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);
  border-radius:100px;padding:7px 15px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
html[lang="ar"] .fimg__cap{font-family:var(--f-ar);letter-spacing:0;font-size:11.5px}

/* ------------------------------------------------------------- pillars --- */
.pill-list{border-top:1px solid var(--hair)}
.prow{display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(18px,3vw,44px);
  padding-block:30px;border-bottom:1px solid var(--hair);align-items:start;
  transition:background .4s;position:relative}
.prow::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;width:0;height:1px;background:var(--ember);
  transition:width .6s var(--spring)}
.prow:hover::after{width:100%}
.prow__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ember-text);padding-top:4px}
.prow h3{font-size:19px}
.prow p{font-size:14.8px;color:var(--muted);line-height:1.62}
@media(max-width:860px){.prow{grid-template-columns:40px minmax(0,1fr)}.prow p{grid-column:2/-1}}

/* --------------------------------------------------------------- family -- */
.fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
.fam a{background:var(--white);padding:26px 24px 30px;transition:background .4s var(--spring);position:relative}
.fam a::after{content:"";position:absolute;inset-inline-start:0;top:0;width:2px;height:0;background:var(--ember);
  transition:height .5s var(--spring)}
.fam a:hover{background:var(--canvas)}
.fam a:hover::after{height:100%}
.fam .idx{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ember-text);display:block;margin-bottom:14px}
.fam h3{font-size:16.5px;margin-bottom:7px;letter-spacing:-.02em}
.fam p{font-size:13px;color:var(--faint);line-height:1.5}
@media(max-width:1000px){.fam{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.fam{grid-template-columns:1fr}}

/* ------------------------------------------------------------- catalogue -- */
.subnav{position:sticky;top:var(--hdr-h);z-index:60;background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--hair)}
.subnav ul{display:flex;overflow-x:auto;scrollbar-width:none;gap:2px;padding-block:9px}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;padding:8px 15px;font-size:12.8px;font-weight:500;color:var(--muted);
  white-space:nowrap;border-radius:100px;transition:.28s}
.subnav a:hover{color:var(--ink);background:var(--surface)}
.subnav a.on{color:#fff;background:var(--ink)}

.pgroup{scroll-margin-top:calc(var(--hdr-h) + 76px)}
.pgroup+.pgroup{margin-top:clamp(56px,6vw,92px)}
.pgroup__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(20px,4vw,56px);
  align-items:start;padding-top:26px;border-top:1.5px solid var(--ink);margin-bottom:12px}
@media(max-width:860px){.pgroup__head{grid-template-columns:1fr}}
.psub{display:flex;align-items:center;gap:12px;margin:34px 0 4px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-text)}
.psub::after{content:"";flex:1;height:1px;background:var(--hair)}
html[lang="ar"] .psub{font-family:var(--f-ar);letter-spacing:0;font-size:13px;font-weight:700}

.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.6vw,56px)}
@media(max-width:820px){.plist{grid-template-columns:1fr}}
.pitem{padding-block:20px;border-bottom:1px solid var(--hair-soft);transition:.3s}
.pitem h4{font-family:var(--f-display);font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  margin-bottom:6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
html[lang="ar"] .pitem h4{font-family:var(--f-ar)}
.pitem p{font-size:14.2px;line-height:1.58;color:var(--muted)}
.tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-text);
  background:var(--ember-050);border:1px solid rgba(255,105,0,.2);padding:2px 7px;border-radius:100px;flex:none}
.tag--ghost{color:var(--faint);background:var(--surface);border-color:var(--hair)}

/* spec strip (salts / anodes) */
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;margin-top:8px}
.spec div{background:var(--white);padding:16px 18px}
.spec b{display:block;font-family:var(--f-display);font-size:14.5px;font-weight:600;letter-spacing:-.02em}
html[lang="ar"] .spec b{font-family:var(--f-ar)}
.spec span{display:block;margin-top:3px;font-size:12.5px;color:var(--faint)}
@media(max-width:820px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.spec{grid-template-columns:1fr}}

/* ------------------------------------------------------------- timeline -- */
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.tl::before{content:"";position:absolute;inset-inline:0;top:7px;height:1px;
  background:linear-gradient(90deg,var(--ember),var(--hair) 70%)}
html[dir="rtl"] .tl::before{background:linear-gradient(270deg,var(--ember),var(--hair) 70%)}
.tl li{position:relative;padding:34px clamp(14px,2vw,28px) 0 0;padding-inline-end:clamp(14px,2vw,28px)}
.tl li::before{content:"";position:absolute;inset-inline-start:0;top:0;width:15px;height:15px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--ember);box-shadow:0 0 0 4px rgba(255,105,0,.09)}
.tl li:not(:first-child)::before{border-color:var(--ghost);box-shadow:0 0 0 4px rgba(14,17,22,.04)}
.tl__y{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-text);margin-bottom:10px}
html[lang="ar"] .tl__y{font-family:var(--f-ar);letter-spacing:0;font-size:13px;text-transform:none}
.tl h3{font-size:17px;letter-spacing:-.02em;margin-bottom:9px}
.tl p{font-size:14.2px;line-height:1.6;color:var(--muted)}
@media(max-width:940px){
  .tl{grid-template-columns:1fr;gap:0}
  .tl::before{inset-inline:7px auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,var(--ember),var(--hair) 70%)}
  .tl li{padding:0 0 30px 34px;padding-inline:34px 0}
  html[dir="rtl"] .tl li{padding-inline:34px 0}
  .tl li::before{top:3px}
}

/* ---------------------------------------------------------------- chips -- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips li{border:1px solid var(--hair);background:var(--white);border-radius:100px;padding:8px 17px;
  font-size:13.5px;color:var(--muted);transition:.35s var(--spring)}
.chips li:hover{border-color:var(--ember);color:var(--ember);transform:translateY(-2px);box-shadow:var(--e1)}

.bul li{position:relative;padding-inline-start:24px;padding-block:8px;font-size:15px;color:var(--muted);
  border-bottom:1px solid var(--hair-soft)}
.bul li::before{content:"";position:absolute;inset-inline-start:0;top:17px;width:6px;height:6px;border-radius:50%;
  background:var(--ember)}
.bul li:last-child{border-bottom:0}

/* ----------------------------------------------------------- principals -- */
.plogos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
.plogos div{background:var(--white);display:grid;place-items:center;padding:38px 28px;min-height:132px;transition:.4s}
.plogos div:hover{background:var(--canvas)}
.plogos img{max-height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:.45s var(--spring)}
.plogos div:hover img{filter:none;opacity:1;transform:scale(1.04)}
@media(max-width:720px){.plogos{grid-template-columns:1fr}}

.pcard{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start;
  border:1px solid var(--hair);border-radius:var(--r-lg);padding:clamp(26px,3.2vw,44px);background:var(--white);
  transition:box-shadow .5s var(--spring),border-color .4s}
.pcard:hover{box-shadow:var(--e2);border-color:#DADFE7}
.pcard__logo{display:grid;place-items:center;padding:26px;background:var(--canvas);border:1px solid var(--hair);
  border-radius:var(--r)}
.pcard__logo img{max-height:58px;width:auto;object-fit:contain}
.pcard+.pcard{margin-top:22px}
@media(max-width:800px){.pcard{grid-template-columns:1fr}}

/* -------------------------------------------------------------- contact -- */
.cgrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,76px);align-items:start}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}
.cblock{padding-top:20px;border-top:1px solid var(--hair);margin-bottom:30px}
.cblock .mono{color:var(--ember-text);display:block;margin-bottom:11px}
.cblock p,.cblock li{font-size:15.5px;line-height:1.72;color:var(--muted)}
.cblock strong{color:var(--ink);font-weight:600}
.cblock a:hover{color:var(--ember)}

.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
html[lang="ar"] .field label{font-family:var(--f-ar);letter-spacing:0;font-size:12.5px}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;font-size:15px;
  background:var(--white);border:1px solid var(--hair);border-radius:var(--r-sm);transition:.28s}
.field textarea{min-height:126px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ember);
  box-shadow:0 0 0 3px var(--ember-glow)}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.frow2{grid-template-columns:1fr}}
.map{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.map iframe{display:block;width:100%;height:330px;border:0;filter:grayscale(.4) contrast(1.03)}

/* ------------------------------------------------------------------ cta -- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 130% at 88% 46%,rgba(255,105,0,.30) 0%,transparent 62%)}
.cta__in{padding-block:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.15fr) auto;
  gap:34px;align-items:center}
@media(max-width:860px){.cta__in{grid-template-columns:1fr}}
.cta h2{max-width:19ch}
.cta p{color:#A3ADBA;margin-top:14px;max-width:52ch}
.cta .kicker{color:var(--ember-300)}
.cta .kicker::before{background:var(--ember-300)}
.cta .btn--line{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.cta .btn--line:hover{background:#fff;color:var(--ink);border-color:#fff}

/* --------------------------------------------------------------- footer -- */
.ftr{background:linear-gradient(180deg,#EDF2F8 0%,#E6EDF5 100%);border-top:1px solid var(--hair);color:var(--muted);font-size:14.5px}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:clamp(26px,4vw,54px);
  padding-block:clamp(50px,6vw,76px)}
@media(max-width:960px){.ftr__top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftr__top{grid-template-columns:1fr}}
.ftr h4{color:var(--ink);font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;margin-bottom:18px}
html[lang="ar"] .ftr h4{font-family:var(--f-ar);letter-spacing:0;font-size:13px;font-weight:700}
.ftr li{padding-block:5px}
.ftr a:hover{color:var(--ember)}
.ftr__brand img{height:36px;margin-bottom:18px}
.ftr__brand p{max-width:32ch;line-height:1.68}
.social{display:flex;gap:8px;margin-top:20px}
.social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:100px;
  background:var(--white);transition:.35s var(--spring)}
.social a:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:translateY(-2px)}
.social svg{width:15px;height:15px}
.ftr__bot{border-top:1px solid var(--hair);padding-block:20px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:12.5px;color:var(--faint)}

/* ---------------------------------------------------------------- misc --- */
.note{background:var(--ember-050);border:1px solid rgba(255,105,0,.18);border-radius:var(--r);
  padding:18px 22px;font-size:14.6px;line-height:1.6;color:var(--ink-2)}
.note strong{color:var(--ink)}

.divider{height:1px;background:var(--hair);border:0;margin:0}

/* ------------------------------------------------------- workshop reel -- */
.vcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:260px;padding:24px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:var(--ink);color:#fff;border:1px solid var(--hair);
  transition:transform .55s var(--spring),box-shadow .55s var(--spring)}
.vcard::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(150deg,#1A2432 0%,#0E1116 55%,#2A1a0d 100%)}
.vcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 70% at 78% 22%,rgba(255,105,0,.30) 0%,transparent 62%)}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.vcard__play{position:absolute;top:24px;inset-inline-start:24px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.45s var(--spring)}
.vcard:hover .vcard__play{background:var(--ember);border-color:var(--ember);transform:scale(1.06)}
.vcard__play svg{width:15px;height:15px;fill:#fff;margin-inline-start:2px}
html[dir="rtl"] .vcard__play svg{transform:scaleX(-1);margin-inline-start:0;margin-inline-end:2px}
.vcard h3{font-size:17.5px;letter-spacing:-.02em;margin-bottom:9px;color:#fff}
.vcard p{font-size:13.8px;line-height:1.55;color:#A3ADBA}
.vcard__meta{display:flex;align-items:center;gap:10px;margin-top:14px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#7A8698}
html[lang="ar"] .vcard__meta{font-family:var(--f-ar);letter-spacing:0;font-size:11.5px;text-transform:none}
.vcard__meta span{display:inline-flex;align-items:center;gap:5px}
.vcard__meta i{width:3px;height:3px;border-radius:50%;background:#7A8698;font-style:normal}


/* ---------------------------------------------------- mobile density -- */
/* Desktop rhythm applied at phone width leaves the page feeling empty:
   ~76px of padding above and below every band, plus tiles holding a
   desktop min-height they no longer need. Tighten the vertical scale
   below 760px without cramping the type. */
@media(max-width:760px){
  .sec{padding-block:46px}
  .sec--tight{padding-block:34px}
  .sec--flush{padding-top:0}
  .hero__in{padding-block:40px 34px;gap:30px}
  .ptop__in{padding-block:34px}
  .shead{margin-bottom:26px;gap:14px}
  .grid{gap:14px}

  /* division tiles: drop the desktop min-height, size to their content */
  .dtile,.dtile__in{min-height:0}
  .dtile__in{padding:24px}
  .dtile__tag{margin-bottom:16px}
  .dtile .alink{padding-top:18px}

  .card{padding:22px}
  .card__ico{margin-bottom:16px;width:38px;height:38px}
  .fam a{padding:22px 20px 24px}
  .fam .idx{margin-bottom:10px}
  .prow{padding-block:22px;gap:10px 16px}
  .pill-list{margin-top:4px}
  .tl li{padding-bottom:22px}
  .rail li{padding:18px 20px}
  .plogos div{min-height:92px;padding:26px 22px}
  .pcard{padding:24px;gap:20px}
  .pcard__logo{padding:20px}
  .pcard+.pcard{margin-top:16px}
  .vcard{min-height:0;padding:22px;padding-top:78px}
  .vcard__play{top:20px;inset-inline-start:20px}
  .pgroup+.pgroup{margin-top:40px}
  .pgroup__head{padding-top:20px;margin-bottom:6px;gap:12px}
  .psub{margin-top:24px}
  .pitem{padding-block:16px}
  .cblock{margin-bottom:24px;padding-top:16px}
  .cta__in{padding-block:44px;gap:24px}
  .ftr__top{padding-block:40px;gap:26px}
  .btn-row{margin-top:24px;gap:10px}
  .frow{gap:26px}
  .lead{margin-top:14px!important}
  .advisor__in,.advisor__out{padding:20px}
  .map iframe{height:260px}
  .aura::before,.aura::after{filter:blur(60px)}
}
@media(max-width:520px){
  /* the eight catalogue tiles: the family names carry the meaning on their own,
     so the supporting line is dropped rather than stacking 8 tall cards */
  .fam a{padding:16px 18px 18px}
  .fam .idx{margin-bottom:6px;font-size:9.5px}
  .fam h3{font-size:15.5px;margin-bottom:0}
  .fam p{display:none}
}
@media(max-width:440px){
  .sec{padding-block:40px}
  .sec--tight{padding-block:30px}
  .hviz{margin-top:4px}
  .hchip{display:none}          /* the floating readouts crowd a 375px hero */
}

/* ------------------------------------------------------- touch targets -- */
/* Coarse pointers get comfortable hit areas without changing the desktop
   rhythm — utility rows and footer links are the tight ones. */
@media(hover:none),(max-width:640px){
  .topbar__in{height:auto;padding-block:4px}
  .topbar a{padding-block:9px}
  .langs button{min-height:32px;display:inline-flex;align-items:center}
  .ftr li{padding-block:4px}
  .ftr li a{display:inline-block;padding-block:6px}
  .ftr__brand p{max-width:none}
  .crumbs a{padding-block:6px}
  .subnav a{padding-block:11px}
  .btn{padding:14px 24px}
  .btn-row .btn{flex:1 1 auto;justify-content:center}
  .ai-launch{inset-block-end:16px;inset-inline-end:16px}
  .chips li{padding:10px 17px}
}
@media(max-width:420px){
  .rail li{padding:20px 18px}
  .hchip{padding:11px 14px}
  .hchip b{font-size:17px}
  .pgroup__head{padding-top:20px}
  .plist{gap:0}
}

.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--spring),transform .8s var(--spring)}
.reveal[data-d="1"].in{transition-delay:.07s}
.reveal[data-d="2"].in{transition-delay:.14s}
.reveal[data-d="3"].in{transition-delay:.21s}

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

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