/* ============================================================
   White Stone — unified site stylesheet
   Composed from the former per-page inline styles + upgrade.css.
   Load order per page: site.css → small page-specific <style>.
   ============================================================ */

/* ---- Design tokens (dark default) ---- */
:root{
  --or:#D04E1C;--or2:#b84218;--or-hot:#FF6B2C;
  --bg:#08080A;--bg2:#15140F;--bg3:#1F1D17;--bg-slate:#0D1117;--bg-rust:#1A0E08;
  --bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);
  --mt:rgba(255,255,255,.52);--bt:rgba(255,255,255,.74);--tx:#F2F0EC;
  --wa:#25D366;--wa-bg:rgba(37,211,102,.12);--wa-bd:rgba(37,211,102,.30);
  --band:#C04413; /* stat band: slightly deeper orange so white text passes AA */
  --fd:'Archivo Black','Arial Black',sans-serif;
  --fb:'Archivo',system-ui,-apple-system,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,'Menlo',monospace;
  --fd2:var(--fd);--fb2:var(--fb); /* legacy aliases */
  --ease:cubic-bezier(.16,1,.3,1);
  --edge:linear-gradient(90deg,transparent 0%,rgba(208,78,28,.35) 18%,rgba(208,78,28,.55) 50%,rgba(208,78,28,.35) 82%,transparent 100%);
}
body.light{
  --bg:#FAFAF8;--bg2:#F0EDE6;--bg3:#E2DDD2;--bg-slate:#ECE9E2;--bg-rust:#F5E8DE;
  --bd:rgba(0,0,0,.09);--bd2:rgba(0,0,0,.16);
  --mt:rgba(0,0,0,.54);--bt:rgba(0,0,0,.72);--tx:#141412;
  --wa:#0E8C46;--wa-bg:rgba(14,140,70,.10);--wa-bd:rgba(14,140,70,.35);
}
/* Arabic: Cairo carries both display and body (Archivo has no Arabic glyphs).
   Override the aliases at the root too — --fd2/--fb2 are resolved from --fd/--fb
   at :root, so they must be re-set here or the display headings stay Latin. */
html[lang="ar"]{
  --fd:'Cairo','Archivo Black',sans-serif;
  --fb:'Cairo','Archivo',system-ui,sans-serif;
  --fd2:'Cairo','Archivo Black',sans-serif;
  --fb2:'Cairo','Archivo',system-ui,sans-serif;
}
html[lang="ar"] body{ letter-spacing:0; }

/* ---- Shared rules (formerly inline on every page) ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--tx);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
a{text-decoration:none;color:inherit}
button{font-family:var(--fb);cursor:pointer;border:none;background:none}
.lang-btn{height:28px;padding:0 9px;font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:4px;color:var(--mt);background:transparent;border:none;cursor:pointer;transition:all .2s;font-family:var(--fb)}
.lang-btn:hover{color:var(--tx)}
.lang-btn--active{background:var(--bg);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.25)}
body.light .lang-btn--active{box-shadow:0 1px 3px rgba(0,0,0,.12)}
.nav.scrolled{background:rgba(10,10,9,.95);border-bottom:1px solid var(--bd);backdrop-filter:blur(20px)}
body.light .nav.scrolled{background:rgba(250,250,248,.95)}
.nav__logo{display:flex;align-items:center;line-height:0}
.nav__logo img{display:block;height:32px;width:auto}
.nav__menu{display:flex;align-items:center;gap:28px;list-style:none}
.nav__menu a{font-size:13px;font-weight:500;color:var(--mt);transition:color .2s;position:relative;padding-bottom:2px}
.nav__menu a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--or);transition:width .25s;border-radius:2px}
.nav__menu a:hover{color:var(--tx)}
.nav__menu a:hover::after,.nav__menu a.active::after{width:100%}
.nav__menu a.active{color:var(--tx)}
.nav__right{display:flex;align-items:center;gap:8px}
.theme-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;color:var(--mt);transition:all .2s;flex-shrink:0}
.theme-btn:hover{border-color:var(--or);color:var(--or)}
.theme-btn svg{width:14px;height:14px}
.ham-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:34px;height:34px;background:transparent;border:1px solid var(--bd2);border-radius:6px}
.ham-btn span{display:block;width:15px;height:1.5px;background:var(--tx);border-radius:2px}
.nav-drawer{display:none;position:fixed;top:62px;left:0;right:0;bottom:0;z-index:199;background:var(--bg);border-top:1px solid var(--bd);padding:16px 20px 32px;flex-direction:column;overflow-y:auto}
.nav-drawer a{display:block;padding:14px 12px;font-size:15px;font-weight:600;color:var(--tx);border-bottom:1px solid var(--bd)}
.nav-drawer a.active{color:var(--or)}
.d-cta{margin-top:20px!important;height:52px;display:flex!important;align-items:center;justify-content:center;background:var(--or);color:#fff!important;font-size:14px;font-weight:700;border-radius:4px;border-bottom:none!important}
.d-wa{margin-top:10px!important;height:52px;display:flex!important;align-items:center;justify-content:center;background:rgba(37,211,102,.10);color:#25D366!important;font-size:14px;font-weight:700;border-radius:4px;border:1px solid rgba(37,211,102,.3)!important}
.nav-cta{height:36px;padding:0 16px;background:var(--or);color:#fff!important;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:4px;display:inline-flex;align-items:center;transition:background .2s;white-space:nowrap}
.nav-cta:hover{background:var(--or2)}
.btn-p:hover{background:var(--or2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(208,78,28,.35)}
.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;background:transparent;color:var(--tx);font-size:14px;font-weight:600;border:1px solid var(--bd2);border-radius:4px;transition:all .2s}
.btn-o:hover{border-color:var(--or);color:var(--or)}
.d-xl{font-family:var(--fd);font-size:clamp(56px,8vw,110px);line-height:.93;letter-spacing:.03em;color:var(--tx)}
.d-lg{font-family:var(--fd);font-size:clamp(40px,5.5vw,76px);line-height:.93;letter-spacing:.02em;color:var(--tx)}
.d-md{font-family:var(--fd);font-size:clamp(26px,3.5vw,44px);line-height:1.05;letter-spacing:.02em;color:var(--tx)}
.body{font-size:15px;font-weight:400;color:var(--bt);line-height:1.8}
.body-sm{font-size:13px;color:var(--bt);line-height:1.75}
.sec{padding:80px 48px;border-bottom:1px solid var(--bd)}
.sec--alt{background:var(--bg2)}
.ph{padding:80px 48px 64px;border-bottom:1px solid var(--bd);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.sh{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:44px}
.sh .d-lg,.sh h2{overflow-wrap:break-word;max-width:100%}
.ticker__track{display:flex;width:max-content;animation:tick 32s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker__item{display:flex;align-items:center;gap:16px;padding:0 28px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mt);white-space:nowrap}
.ticker__item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--or);flex-shrink:0}
.tag{font-size:10px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--or);border:1px solid rgba(208,78,28,.30);background:rgba(208,78,28,.06);padding:4px 10px;border-radius:3px}
.cs__item{padding:28px 36px;border-right:1px solid var(--bd);display:flex;flex-direction:column;gap:4px}
.cs__item:last-child{border-right:none}
.cs__lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
.cs__val{font-size:14px;font-weight:600;color:var(--tx)}
.cs__sub{font-size:12px;color:var(--mt)}
.footer__g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--bd);margin-bottom:22px}
.footer__b p{font-size:13px;color:var(--mt);line-height:1.8;max-width:250px;margin-top:14px}
.footer__c h4{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.footer__c a{display:block;font-size:13px;color:var(--mt);margin-bottom:9px;transition:color .2s}
.footer__c a:hover{color:var(--tx)}
.footer__bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer__bot span{font-size:11px;letter-spacing:.08em;color:var(--mt);text-transform:uppercase}
.reveal.on{opacity:1;transform:translateY(0)}
.rev-l{opacity:0;transform:translateX(-36px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev-l.on{opacity:1;transform:translateX(0)}
.rev-r{opacity:0;transform:translateX(36px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev-r.on{opacity:1;transform:translateX(0)}
/* On narrow screens the pre-reveal X offsets poke past the viewport edge
   (26px horizontal overflow on contact.html) — slide up instead. */
@media(max-width:820px){
  .rev-l,.rev-r{transform:translateY(28px)}
  .rev-l.on,.rev-r.on{transform:translateY(0)}
}
.d1{transition-delay:.05s}
.d2{transition-delay:.15s}
.d3{transition-delay:.25s}
.d4{transition-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.r1{animation:rise .9s var(--ease) .1s both}
.r2{animation:rise .9s var(--ease) .25s both}
.r3{animation:rise .9s var(--ease) .4s both}
.r4{animation:rise .9s var(--ease) .55s both}
.r5{animation:rise .9s var(--ease) .7s both}
[dir=rtl] .nav__menu a::after{left:auto;right:0}
[dir=rtl] .nav__right{flex-direction:row-reverse}
[dir=rtl] .cs{direction:rtl}
[dir=rtl] .footer__g{direction:rtl}
[dir=rtl] .footer__bot{direction:rtl}
[dir=rtl] .sh{direction:rtl}
[dir=rtl] .ph{direction:rtl}
.no-flip{direction:ltr!important;unicode-bidi:isolate!important}
@media(max-width:768px){.nav{padding:0 14px;height:58px}.nav__menu{display:none}.nav-cta{display:none}.ham-btn{display:flex}.ph{padding:52px 20px 44px;grid-template-columns:1fr}.sec{padding:52px 20px}.footer{padding:40px 20px 22px}.footer__g{grid-template-columns:1fr;gap:24px}.footer__bot{flex-direction:column;align-items:flex-start}.cs{grid-template-columns:1fr}.cs__item{border-right:none!important;border-top:none!important;border-bottom:1px solid var(--bd);padding:18px 20px}.cs__item:last-child{border-bottom:none}}
@media(max-width:480px){.nav{padding:0 10px}.ph{padding:44px 14px 36px}.sec{padding:44px 14px}.footer{padding:32px 14px 18px}}
/* ── CERTIFICATION BADGE ──────────────────────────────── */
.cert-strip{padding:52px 48px;background:var(--bg2);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cert-strip__left{display:flex;flex-direction:column;gap:6px}
.cert-strip__lbl{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.cert-strip__title{font-family:var(--fd);font-size:clamp(28px,3vw,42px);color:var(--tx);letter-spacing:.02em;line-height:1}
.cert-strip__sub{font-size:13px;color:var(--mt);line-height:1.6;max-width:380px}
.cert-strip__badges{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cert-card{position:relative;display:flex;align-items:center;gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--bd2);background:var(--bg);transition:all .3s var(--ease);box-shadow:0 2px 12px rgba(0,0,0,.15)}
.cert-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.25);border-color:rgba(255,255,255,.22)}
body.light .cert-card{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 2px 10px rgba(0,0,0,.08)}
body.light .cert-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.14)}
.cert-card__accent{width:4px;height:100%;position:absolute;left:0;top:0;background:linear-gradient(to bottom,#003087,#1a56db)}
.cert-card__img-wrap{padding:14px 16px 14px 20px;display:flex;align-items:center;justify-content:center}
.cert-card__img{height:64px;width:auto;display:block;filter:none;border-radius:8px}
body:not(.light) .cert-card__img{filter:brightness(1.08) contrast(1.02)}
.cert-card__divider{width:1px;height:56px;background:var(--bd);align-self:center}
.cert-card__text{padding:12px 20px 12px 16px;display:flex;flex-direction:column;gap:3px}
.cert-card__name{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx);white-space:nowrap}
.cert-card__desc{font-size:10px;color:var(--mt);letter-spacing:.04em;white-space:nowrap}
.cert-card__check{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#22c55e}
.cert-card__check::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0}
/* inline cert in facts section */
.cert-inline{display:flex;align-items:center;gap:12px;padding:20px 24px;border:1px solid var(--bd2);border-radius:8px;background:var(--bg);transition:all .25s;width:fit-content}
.cert-inline:hover{border-color:rgba(255,255,255,.2);background:var(--bg3)}
body.light .cert-inline{background:#fff;border-color:rgba(0,0,0,.1)}
.cert-inline__img{height:48px;width:auto;display:block;border-radius:8px}
body:not(.light) .cert-inline__img{filter:brightness(1.06)}
.cert-inline__sep{width:1px;height:36px;background:var(--bd)}
.cert-inline__text{display:flex;flex-direction:column;gap:2px}
.cert-inline__n{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--tx)}
.cert-inline__s{font-size:10px;color:var(--mt);letter-spacing:.04em}
@media(max-width:1024px){.cert-strip{padding:44px 32px;flex-direction:column;align-items:flex-start;gap:28px}}
@media(max-width:768px){.cert-strip{padding:36px 20px;gap:24px}}
/* ── FLOATING WHATSAPP ─────────────────────────────── */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
[dir=rtl] .wa-float{right:auto;left:28px;align-items:flex-start}
.wa-float__btn{width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.45);transition:all .3s;cursor:pointer;border:none;text-decoration:none}
.wa-float__btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.6)}
.wa-float__btn svg{width:28px;height:28px;fill:#fff}
.wa-float__tooltip{background:var(--bg2);border:1px solid var(--bd2);color:var(--tx);font-size:12px;font-weight:600;padding:7px 14px;border-radius:6px;white-space:nowrap;opacity:0;transform:translateX(8px);transition:all .25s;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.2)}
[dir=rtl] .wa-float__tooltip{transform:translateX(-8px)}
.wa-float:hover .wa-float__tooltip{opacity:1;transform:translateX(0)}
.wa-float__pulse{position:absolute;top:0;right:0;width:14px;height:14px;border-radius:50%;background:#ff4444;border:2px solid var(--bg);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
/* ── BACK TO TOP ───────────────────────────────────── */
.btt{position:fixed;bottom:96px;right:28px;z-index:9998;width:40px;height:40px;border-radius:50%;background:var(--bg2);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(10px);transition:all .3s;color:var(--mt)}
[dir=rtl] .btt{right:auto;left:28px}
.btt.visible{opacity:1;transform:translateY(0)}
.btt:hover{border-color:var(--or);color:var(--or);transform:translateY(-2px)}
.btt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* ── COOKIE BANNER ─────────────────────────────────── */









@media(max-width:768px){.wa-float{bottom:20px;right:16px}.btt{bottom:84px;right:16px}}

/* ---- Industrial Premium layer (formerly upgrade.css) ---- */
/* =============================================================
   White Stone — Industrial Premium upgrade
   Loaded AFTER each page's inline <style>; overrides via specificity
   ============================================================= */

/* (A mangled @import remnant + a :root token block from the old upgrade.css
   used to sit here. The parse error meant the :root block NEVER applied —
   the live tokens are the ones at the top of this file — so both were removed
   rather than "repaired", which would have changed the approved look.) */
/* Body: replace Outfit with Archivo, keep Outfit as fallback */
body { font-family: var(--fb2); letter-spacing: -0.003em; }
/* Display class additions — Archivo Black for section heads (wider, more
   industrial-modern), Bebas Neue retained for the giant hero word
   (it's already iconic + condensed so it fits long words like CARBONATE).
   This gives us a deliberate two-tone display system. */
.d-xl, .d-lg, .d-md,
.kv, .sv, .mv, .dv, .fnum, .cp__t {
  font-family: var(--fd2);
  font-weight: 900;
  letter-spacing: 0.005em;
  line-height: 0.95;
}
/* H1 page titles get Archivo Black except inside hero */
h1.d-xl, h2.d-lg, h3.d-md {
  font-family: var(--fd2);
  font-weight: 900;
}
/* Mono utility for technical data — applied via JS to tickers,
   stat labels, contact strip phone numbers, chemical formulas */
.mono, .ticker__item, .cs__val, .kpi-label, .ml, .flb,
[data-mono], .rfml, .ai-s {
  font-family: var(--fm);
  font-feature-settings: 'tnum' 1, 'zero' 1, 'cv11' 1;
  letter-spacing: 0;
}
.ticker__item { font-weight: 500; }
.cs__val { font-weight: 600; font-size: 13px; }
.rfml { /* CaCO₃ formula in hero core — mono fits the engineering tone */
  font-family: var(--fm);
  font-weight: 700;
}
/* --- Section gravity — bigger background deltas + edge accents */
.sec, .ph, .facts, .footer { position: relative; }
/* Top hairline accent between consecutive major sections */
.sec + .sec::before,
.sec--alt + .sec::before,
.sec + .sec--alt::before,
.sec + .facts::before,
.facts + .sec::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--edge);
  opacity: 0.55;
  pointer-events: none;
}
/* Reinforce the .dom orange CTA strip with a top + bottom hairline */
.dom { box-shadow: inset 0 1px 0 rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.18); }
/* --- Card hover refinement — "showroom" feel ---------------- */
.ip, .fc, .cp {
  transition: background .35s var(--ease, ease),
              border-color .25s,
              transform .35s var(--ease, ease);
}
.ip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(208,78,28,.18) 130%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.ip:hover::after { opacity: 1; }
.ip:hover { border-color: rgba(208,78,28,.30) !important; }
/* Ghost numeral bigger and more present (was bottom:-20 / 120px / 4%) */
.ip::before {
  font-family: var(--fd2);
  font-size: clamp(140px, 18vw, 240px) !important;
  bottom: -36px !important;
  right: 8px !important;
  color: rgba(208,78,28,.05) !important;
  transition: color .4s var(--ease, ease), transform .5s var(--ease, ease);
}
.ip:hover::before {
  color: rgba(208,78,28,.13) !important;
  transform: translate(-6px, -6px);
}
/* Buttons get tactile press feedback (native-app feel) */
.btn-p, .btn-o, .btn-wa, .nav-cta, .cp__btn, .lang-btn, .theme-btn, .ham-btn {
  transition: background .2s, color .2s, border-color .2s,
              transform .12s ease-out, box-shadow .2s;
}
.btn-p:active, .btn-o:active, .btn-wa:active,
.nav-cta:active, .cp__btn:active, .lang-btn:active,
.theme-btn:active, .ham-btn:active {
  transform: scale(.97);
}
/* --- KPI tiles: mono label, tighter rhythm ----------------- */
.kpi { padding: 20px 18px; }
.kv  { font-size: clamp(22px, 2vw, 28px); }
.kv + .kpi-label, .kv + .ml, .kv + .flb {
  margin-top: 6px;
}
/* --- Kinetic hero typography ------------------------------- */
.htitle .hl { overflow: hidden; }
/* Arabic (Cairo) glyphs are far taller than the .95 Latin line box —
   the kinetic clip cuts them off. No per-char animation runs in AR anyway. */
[dir=rtl] .htitle .hl { overflow: visible; line-height: 1.32; letter-spacing: 0; }
/* Phone/WhatsApp numbers are LTR-isolated blocks; in RTL they resolve
   text-align:start to LEFT and drift off the Arabic label edge — pin them right. */
[dir=rtl] .qci__val, [dir=rtl] .cs__val { text-align: right; }
a.qci__val{display:block;text-decoration:none;color:var(--tx)}
a.qci__val:hover{color:var(--or)}
/* Long email addresses must never widen the contact cards on phones */
.qci>div{min-width:0}
.iblk>div{min-width:0}
.qci__val,.iblk__val{overflow-wrap:anywhere}
.kchar {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em) skewY(2deg);
  animation: kineticIn .45s cubic-bezier(.2,.85,.25,1) forwards;
  animation-delay: calc(var(--i, 0) * 16ms + 40ms);
  will-change: transform, opacity;
}
@keyframes kineticIn {
  to { opacity: 1; transform: translateY(0) skewY(0); }
}
/* Stagger a slow tint pulse on the orange word */
.hl-or .kchar {
  animation-name: kineticInOr;
}
@keyframes kineticInOr {
  0%   { opacity: 0; transform: translateY(0.5em) skewY(3deg); color: var(--or); }
  60%  { opacity: 1; transform: translateY(0) skewY(0);       color: #FF8A3C; }
  100% { opacity: 1; transform: translateY(0) skewY(0);       color: var(--or); }
}
/* --- Film viewer controls (scroll-pause / seek / mute) ------ */
.film__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:12px;padding:22px 18px 12px;background:linear-gradient(transparent,rgba(0,0,0,.45) 30%,rgba(0,0,0,.82));opacity:0;pointer-events:none;transition:opacity .25s;direction:ltr}
.film__bar.show{opacity:1;pointer-events:auto}
.film__bar:focus-within{opacity:1;pointer-events:auto}
@media(hover:hover){.film:hover .film__bar{opacity:1;pointer-events:auto}}
@media(pointer:coarse){.film__ctl{padding:12px}}
.film__bar--off{display:none!important}
.film__ctl{background:none;border:0;padding:6px;cursor:pointer;line-height:0;color:#fff;flex-shrink:0}
.film__ctl svg{width:20px;height:20px;fill:#fff;display:inline}
.film__ctl:hover svg{fill:#FF6B2C}
.film__ctl--mute .i-muted svg, .film__ctl--mute .i-muted{color:#fff}
.film__bar .i-play{display:none}
.film__bar.is-paused .i-pause{display:none}
.film__bar.is-paused .i-play{display:inline}
.film__bar .i-muted{display:none}
.film__bar.is-muted .i-vol{display:none}
.film__bar.is-muted .i-muted{display:inline}
.film__time{font:600 12px/1 'Archivo',system-ui,sans-serif;color:rgba(255,255,255,.85);min-width:36px;text-align:center;letter-spacing:.03em;flex-shrink:0}
/* 26px hit box; the visible 4px track is painted as a centered background
   strip (JS keeps repainting it with the orange progress). */
.film__seek{flex:1;height:26px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,rgba(255,255,255,.28),rgba(255,255,255,.28)) center/100% 4px no-repeat;border-radius:99px;outline:none;cursor:pointer;min-width:0}
.film__seek::-webkit-slider-runnable-track{height:26px;background:transparent}
.film__seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:6px;border-radius:50%;background:#FF6B2C;border:none;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.film__seek::-moz-range-track{height:4px;background:transparent}
.film__seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#FF6B2C;border:none}
.film__seek:focus-visible{outline:2px solid #FF6B2C;outline-offset:4px}
@media(max-width:560px){.film__bar{gap:8px;padding:12px 12px 10px}.film__time{min-width:32px;font-size:11px}}
/* --- WhatsApp number chooser ------------------------------- */
.wa-choose{position:fixed;inset:0;z-index:400;background:rgba(10,10,10,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;animation:waFade .18s ease-out}
@keyframes waFade{from{opacity:0}to{opacity:1}}
.wa-choose__card{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:26px 24px 18px;width:100%;max-width:340px;box-shadow:0 24px 64px rgba(0,0,0,.35);text-align:center}
.wa-choose__t{font-family:var(--fd);font-size:22px;color:var(--tx);margin-bottom:4px}
.wa-choose__s{font-size:13px;color:var(--mt);margin-bottom:18px}
.wa-choose__n{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;margin-bottom:10px;background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.35);border-radius:8px;color:var(--tx);font-size:16px;font-weight:700;text-decoration:none;transition:background .15s}
.wa-choose__n:hover{background:rgba(37,211,102,.22)}
.wa-choose__n svg{width:18px;height:18px;fill:#25D366;flex-shrink:0}
.wa-choose__x{margin-top:4px;background:none;border:none;color:var(--mt);font-size:13px;cursor:pointer;padding:8px 16px;font-family:inherit}
.wa-choose__x:hover{color:var(--tx)}
/* --- Better focus rings — accessibility ------------------- */
a:focus-visible, button:focus-visible, .btn-p:focus-visible,
.btn-o:focus-visible, .nav-cta:focus-visible, .lang-btn:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}
/* --- Mobile: bottom-fixed CTA bar (native-app feel) ------- */
.mobile-cta {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 250;
  height: 56px;
  background: var(--bg);
  border-top: 1px solid var(--bd2);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
  align-items: stretch;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
.mobile-cta a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  height: 100%;
  transition: transform .12s ease-out;
}
.mobile-cta a:active { transform: scale(.97); }
.mobile-cta__q { background: var(--or); color: #fff; }
.mobile-cta__w { background: rgba(37,211,102,.14); color: #25D366; border: 1px solid rgba(37,211,102,.30); }
@media (max-width: 768px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 60px; }
}
/* --- Mobile: stat row should never wrap awkwardly --------- */
@media (max-width: 640px) {
  .kpis,
  .dom,
  .mets,
  .srow {
    grid-template-columns: 1fr 1fr !important;
  }
  .kpi, .dom__i, .met, .sc {
    border-right: none !important;
  }
  .kpi:nth-child(odd), .dom__i:nth-child(odd),
  .met:nth-child(odd), .sc:nth-child(odd) {
    border-right: 1px solid var(--bd) !important;
  }
  .kpi:nth-child(n+3), .dom__i:nth-child(n+3),
  .met:nth-child(n+3), .sc:nth-child(n+3) {
    border-top: 1px solid var(--bd);
  }
  .dom__i:nth-child(odd) { border-right-color: rgba(0,0,0,.18) !important; }
  .dom__i:nth-child(n+3) { border-top-color: rgba(0,0,0,.18); }
}
/* --- Mobile: hero choreography ---------------------------- */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__l {
    padding: 90px 20px 40px;
  }
  .hero__r {
    border-left: none;
    border-top: 1px solid var(--bd);
    min-height: 60vh;
  }
  .hl {
    font-size: clamp(48px, 14vw, 72px);
    letter-spacing: -0.015em;
  }
}
/* --- Reduced motion respect ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kchar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .rg1, .rg2, .rg3 { animation: none !important; }
  .ticker__track { animation: none !important; }
  .badge-dot { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}
/* --- Smoother scroll bar (subtle but premium) ------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--bd2);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--or); }
/* --- Selection color matches brand ----------------------- */
::selection { background: var(--or); color: #fff; }
/* --- WhatsApp FAB: tuck better on mobile so it doesn't collide
       with the new bottom CTA bar ----------------------- */
@media (max-width: 768px) {
  .wa-float {
    bottom: 72px !important;
  }
}
/* --- Section visited indicator (subtle scroll progress) -- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--or);
  z-index: 300;
  transition: width .15s linear;
  pointer-events: none;
}
/* ============================================================
   Fixes & components layer (2026-07 overhaul)
   ============================================================ */

/* Headings carry the same classes the old divs had — neutralise UA styles */
h1,h2,h3,h4{margin:0;font-size:inherit;font-weight:inherit}

/* Skip link */
/* Hidden via translate, not left:-9999px — a huge left offset becomes
   scrollable overflow in RTL documents (Arabic pages could pan sideways). */
.skip-link{position:absolute;left:0;top:0;z-index:400;background:var(--or);color:#fff;padding:10px 18px;font:700 13px/1 var(--fb);border-radius:0 0 6px 0;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* Screen-reader-only utility */
.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}

/* Stat band: deeper orange + full-opacity text for AA contrast */
.dom{background:var(--band) !important}
.dom .ml,.dom .dv+div,.dom__i .ml{color:#FFE3D6 !important;opacity:1 !important}

/* WhatsApp elements route through theme-aware tokens (text/outline only —
   the floating button keeps its solid brand green for recognisability) */
.btn-wa,.d-wa{color:var(--wa) !important;border-color:var(--wa-bd) !important;background:var(--wa-bg) !important}

/* Back-to-top: no ghost tab-stop while hidden */
.btt{visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.btt.visible{visibility:visible;opacity:1}

/* Mobile: FAB folds into the bottom CTA bar (bar has its own WhatsApp button) */
@media (max-width:768px){.wa-float{display:none !important}}

/* Nav drawer: CSS owns responsive visibility; JS only toggles [data-open] */
.ham-btn{display:none}
@media (max-width:768px){
  .ham-btn{display:flex}
  .nav__menu{display:none}
}
.nav-drawer{display:none}
.nav-drawer[data-open="true"]{display:flex}

/* Media placeholder — factory imagery in production */
.media-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:300px;border:1px dashed var(--bd2);border-radius:8px;background:repeating-linear-gradient(-45deg,transparent 0 14px,color-mix(in srgb,var(--or) 4%,transparent) 14px 15px),var(--bg2);text-align:center;padding:40px 24px;overflow:hidden}
.media-slot__badge{font:700 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--or);border:1px solid color-mix(in srgb,var(--or) 40%,transparent);border-radius:99px;padding:7px 14px;background:color-mix(in srgb,var(--or) 7%,transparent)}
.media-slot__t{font-family:var(--fd);font-size:clamp(20px,2.4vw,30px);color:var(--tx);line-height:1.05}
.media-slot__s{font-size:14px;color:var(--mt);max-width:420px;line-height:1.7}

/* Form status line (aria-live) */
.form-status{display:none;margin-top:14px;padding:12px 16px;border-radius:6px;font:600 13px/1.5 var(--fb)}
.form-status.ok{display:block;background:rgba(22,163,74,.12);color:#4ade80;border:1px solid rgba(22,163,74,.4)}
.form-status.err{display:block;background:rgba(239,68,68,.10);color:#f87171;border:1px solid rgba(239,68,68,.4)}
body.light .form-status.ok{color:#15803d}
body.light .form-status.err{color:#b91c1c}

/* RTL adjustments */
[dir="rtl"] .nav__menu,[dir="rtl"] .footer__g{direction:rtl}
[dir="rtl"] .ticker__track{direction:ltr}
.no-flip{direction:ltr;unicode-bidi:isolate}

/* Focus ring for inputs (contact form removed outline before) */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* Reduced motion — complete coverage */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal,.rev-l,.rev-r{opacity:1 !important;transform:none !important}
  .kchar{opacity:1 !important;transform:none !important}
}

/* ── Facility photo mosaic (real media) ─────────────────────── */
.pm-intro{font-size:15px;color:var(--bt);line-height:1.75;max-width:640px;margin:0 0 26px}
.pmosaic{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;gap:14px}
.pm{position:relative;display:block;margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--bd);background:var(--bg2)}
.pm--wide{grid-row:1/3}
.pm img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pm:hover img{transform:scale(1.03)}
.pm figcaption{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(180deg,transparent,rgba(8,8,10,.82) 55%);color:#fff}
.pm__k{font:700 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:#FF8A3C}
.pm__v{font-size:12px;font-weight:600;color:rgba(255,255,255,.92);text-align:end}
.pm--video .pm__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(208,78,28,.92);display:grid;place-items:center;color:#fff;box-shadow:0 10px 32px rgba(208,78,28,.5);transition:transform .25s var(--ease)}
.pm--video:hover .pm__play{transform:translate(-50%,-50%) scale(1.1)}
.pm--wide img{min-height:100%}
@media (max-width:860px){.pmosaic{grid-template-columns:1fr}.pm--wide{grid-row:auto}.pm img{aspect-ratio:16/10}}
@media (prefers-reduced-motion: reduce){.pm img,.pm--video .pm__play{transition:none}.pm:hover img{transform:none}}

/* shell: language switch */
.lang-switch{display:flex;align-items:center;gap:2px;background:var(--bd2);border-radius:6px;padding:2px}

/* page photo banner */
.pgban-wrap{max-width:1200px;margin:6px auto 0;padding:0 24px}
.pgban-wrap .pm img{aspect-ratio:21/9;object-fit:cover;object-position:center 40%}

/* ── photo features & visit section ─────────────────────────── */
.pm-feature{margin:0}
.pm-feature img{aspect-ratio:21/10;object-fit:cover;object-position:center 35%}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.vgrid .pm img{aspect-ratio:3/2;object-fit:cover}
@media(max-width:700px){.vgrid{grid-template-columns:1fr}}
.vrow{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:16px}
.vrow .pm img{aspect-ratio:16/10;object-fit:cover;height:100%}
.vcard{display:flex;flex-direction:column;justify-content:center;border:1px solid color-mix(in srgb,var(--or) 35%,transparent);border-radius:8px;background:color-mix(in srgb,var(--or) 6%,var(--bg2));padding:34px 34px 30px;position:relative}
.vcard__mark{font-family:var(--fd);font-size:84px;line-height:.6;color:color-mix(in srgb,var(--or) 55%,transparent);margin-bottom:18px}
.vcard__t{font-family:var(--fd);font-size:clamp(18px,1.9vw,25px);line-height:1.3;color:var(--tx);margin:0 0 16px}
.vcard__s{font:700 10px/1.5 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
@media(max-width:860px){.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.vgrid .pm img{aspect-ratio:3/2;object-fit:cover}
@media(max-width:700px){.vgrid{grid-template-columns:1fr}}
.vrow{grid-template-columns:1fr}.pm-feature img{aspect-ratio:16/9}}

/* ── responsive hardening ───────────────────────────────────── */
html,body{overflow-x:clip}
form,form *{min-width:0}
input,select,textarea{max-width:100%}
@media(max-width:560px){
  .cert-card{flex-wrap:wrap;max-width:100%}
  .cert-card__img{height:44px}
  .pgban-wrap .pm img{aspect-ratio:16/9}
}