/* ================= FPC BRAND TOKENS (from fpctextile.com) ================= */
:root{
  /* real brand colors sampled from the live site */
  --navy:#104681;          /* FPC logo navy (flips to light blue in dark mode) */
  --navy-solid:#104681;    /* theme-stable navy for surfaces/gradients on gold (never flipped in dark mode) */
  --navy-deep:#0B2D52;     /* deep brand navy: text on gold, gradient start */
  --navy-bright:#1A5A9E;   /* bright navy: gradient end stop */
  --royal:#1F4494;         /* photo-frame royal blue */
  --blue:#1E73BE;          /* link blue */
  --blue-2:#3D66AE;        /* nav blue */
  --gold:#F7CF28;          /* icon gold */
  --gold-2:#FFC307;
  --gold-deep:#7A5A07;     /* deep gold: small eyebrow text on light surfaces */
  --gold-strong:#EFB90F;   /* saturated gold: gradient partner of --gold */

  /* derived rgb triplets for rgba() alpha usage */
  --navy-rgb:16,70,129;
  --navy-deep-rgb:11,45,82;
  --navy-overlay-rgb:9,36,66;
  --ink-deep-rgb:7,30,56;
  --blue-rgb:30,115,190;
  --gold-rgb:247,207,40;
  --gold-strong-rgb:239,185,15;

  --paper:#F5F7FA; --paper-2:#FFFFFF; --card:#FFFFFF;
  --ink-deep:#071E38; --ink:var(--navy-deep,#0B2D52); --ink-2:#0E3560;
  --text:#122A45; --muted:#4E6479; --faint:#5E7488; --danger:#B32D1F;
  /* Status colours are semantic and deliberately outside the brand palette:
     "in force" and "renewal due" must read as state, not as decoration. */
  --ok-fg:#1B5E20; --ok-bg:#E8F5E9; --ok-brd:#A5D6A7;
  --warn-fg:#7A4100; --warn-bg:#FFF3E0; --warn-brd:#FFCC80;
  --line:rgba(var(--navy-rgb,16,70,129),.14); --line-2:rgba(var(--navy-rgb,16,70,129),.08);
  --chip:rgba(var(--navy-rgb,16,70,129),.06);
  --nav-h:72px;              /* bar height; the mobile panel starts where it ends */
  --hero-line:rgba(var(--gold-rgb,247,207,40),.5);
  --nav-bg:rgba(255,255,255,.82); --nav-brd:rgba(var(--navy-rgb,16,70,129),.12);
  --shadow:0 1px 2px rgba(var(--ink-deep-rgb,7,30,56),.05),0 14px 40px -14px rgba(var(--ink-deep-rgb,7,30,56),.22);
  --maxw:1180px;
  --ff:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Code",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --paper:var(--ink-deep,#071E38); --paper-2:var(--navy-deep,#0B2D52); --card:var(--ink-2,#0E3560);
    --text:#E8EFF7; --muted:#9FB4C9; --faint:#A8BCCE; --danger:#FF9A8F;
    --ok-fg:#A5D6A7; --ok-bg:rgba(76,175,80,.14); --ok-brd:rgba(165,214,167,.4);
    --warn-fg:#FFCC80; --warn-bg:rgba(255,167,38,.14); --warn-brd:rgba(255,204,128,.4);
    --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.07);
    --chip:rgba(var(--blue-rgb,30,115,190),.14);
    --nav-bg:rgba(var(--ink-deep-rgb,7,30,56),.8); --nav-brd:rgba(255,255,255,.1);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px -18px rgba(0,0,0,.6);
    /* #5B9BD5 measured 4.18:1 against the card surface, under AA for the
       link and heading text using it. #6FB1E8 is 5.38:1 there and is already
       this theme's link blue, so no new colour enters the palette. */
    --navy:#6FB1E8; --blue:#6FB1E8;
    /* Deep gold is picked to be legible on white; on a dark card it measured
       1.94:1. The accent itself is 8.20:1 there. */
    --gold-deep:var(--gold,#F7CF28);
  }
}
:root[data-theme="dark"]{
  --paper:var(--ink-deep,#071E38); --paper-2:var(--navy-deep,#0B2D52); --card:var(--ink-2,#0E3560);
  --text:#E8EFF7; --muted:#9FB4C9; --faint:#A8BCCE; --danger:#FF9A8F;
  --ok-fg:#A5D6A7; --ok-bg:rgba(76,175,80,.14); --ok-brd:rgba(165,214,167,.4);
  --warn-fg:#FFCC80; --warn-bg:rgba(255,167,38,.14); --warn-brd:rgba(255,204,128,.4);
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.07);
  --chip:rgba(var(--blue-rgb,30,115,190),.14);
  --nav-bg:rgba(var(--ink-deep-rgb,7,30,56),.8); --nav-brd:rgba(255,255,255,.1);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px -18px rgba(0,0,0,.6);
  /* #5B9BD5 measured 4.18:1 against the card surface, under AA for the
       link and heading text using it. #6FB1E8 is 5.38:1 there and is already
       this theme's link blue, so no new colour enters the palette. */
    --navy:#6FB1E8; --blue:#6FB1E8;
    /* Deep gold is picked to be legible on white; on a dark card it measured
       1.94:1. The accent itself is 8.20:1 there. */
    --gold-deep:var(--gold,#F7CF28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--ff);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.btn{white-space:nowrap}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);font-weight:700;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block}
[dir="rtl"] .eyebrow{letter-spacing:.02em}
.section{padding:96px 0;position:relative}
.section-head{max-width:660px;margin-bottom:52px}
.section-head h2,.h2{font-size:clamp(30px,4.2vw,48px);margin-top:16px}
.lead{color:var(--muted);font-size:18px;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;padding:15px 26px;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:transform .18s,box-shadow .2s,background .2s;font-family:var(--ff)}
.btn-navy{background:var(--navy-solid,#104681);color:#fff}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(var(--navy-rgb,16,70,129),.55)}
.btn-gold{background:var(--gold);color:var(--navy-deep,#0B2D52)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(var(--gold-rgb,247,207,40),.55)}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.btn-ghost:hover{transform:translateY(-2px);background:var(--chip)}
.btn svg{width:16px;height:16px}
[dir="rtl"] .btn svg{transform:scaleX(-1)}
/* ============ NAV ============ */
header.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--nav-brd)}
.nav-in{display:flex;align-items:center;gap:26px;height:var(--nav-h);max-width:var(--maxw);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.brand img{height:44px;width:auto;max-width:none;display:block}
.nav-links{display:flex;gap:4px;margin-inline-start:auto;font-size:14.5px;font-weight:600}
.nav-links a{color:var(--muted);padding:8px 12px;border-radius:6px;transition:color .15s,background .15s;white-space:nowrap}
.nav-links a:hover{color:var(--navy);background:var(--chip)}
.nav-links a.act{color:var(--navy);background:var(--chip)}
.nav-tools{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;border-radius:6px;cursor:pointer;color:var(--text);font-family:var(--mono);font-size:13px;font-weight:700;transition:.18s}
.icon-btn:hover{border-color:var(--navy);background:var(--chip)}
.icon-btn svg{width:17px;height:17px}
.menu-btn{display:none}
@media(max-width:1200px){.nav-links{display:none}.menu-btn{display:grid}.nav-tools{margin-inline-start:auto}}
@media(max-width:520px){
  :root{--nav-h:62px}
  .nav-in{padding:0 16px;gap:12px}
  .brand img{height:34px}
  .icon-btn{width:34px;height:34px}
  .nav-tools{gap:6px}
  .wrap{padding:0 18px}
  .hero-in{padding:90px 18px}
  .eyebrow{letter-spacing:.12em;flex-wrap:wrap}
  .hero-dots{inset-inline-start:18px}
}
.mobile-menu{display:none;position:fixed;inset:var(--nav-h) 0 0 0;background:var(--paper);z-index:55;padding:20px 28px;overflow:auto}
.mobile-menu.open{display:block}
/* The panel covers the page; without this the page scrolled behind it. */
html.menu-open,html.menu-open body{overflow:hidden}
.mobile-menu a{display:block;padding:15px 4px;font-size:19px;font-weight:700;border-bottom:1px solid var(--line);color:var(--text)}
/* ============ HERO ============ */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;background:var(--ink-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;z-index:0;transform:scale(1.06)}
.hero .slide.on{opacity:1;animation:kb 9s linear forwards}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(78deg,rgba(var(--ink-deep-rgb,7,30,56),.94) 24%,rgba(var(--navy-deep-rgb,11,45,82),.72) 52%,rgba(var(--navy-deep-rgb,11,45,82),.28));pointer-events:none}
[dir="rtl"] .hero::before{background:linear-gradient(-78deg,rgba(var(--ink-deep-rgb,7,30,56),.94) 24%,rgba(var(--navy-deep-rgb,11,45,82),.72) 52%,rgba(var(--navy-deep-rgb,11,45,82),.28))}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:.5;pointer-events:none}
.hero-in{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:120px 28px;width:100%}
.hero .eyebrow{color:var(--gold)}.hero .eyebrow::before{background:var(--gold)}
.hero h1{font-size:clamp(38px,6.4vw,78px);margin:20px 0 0;max-width:16ch;letter-spacing:-.03em;line-height:1;color:#fff}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{margin-top:24px;max-width:54ch;font-size:19px;color:#C3D3E4;line-height:1.55}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.hero-dots{position:absolute;z-index:4;bottom:26px;inset-inline-start:28px;display:flex;gap:8px}
.hero-dots button{width:34px;height:4px;border-radius:2px;border:0;background:rgba(255,255,255,.25);cursor:pointer;transition:.2s}
.hero-dots button.on{background:var(--gold)}
/* ============ STATS ============ */
.stats{position:relative;z-index:5;margin-top:-56px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.stat{padding:28px 26px;border-inline-start:1px solid var(--line-2)}
.stat:first-child{border-inline-start:none}
.stat .num{font-family:var(--mono);font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--text);line-height:1}
.stat .num b{color:var(--navy);font-weight:700}
.stat .lbl{margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.35}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr}.stat{border-top:1px solid var(--line-2)}}
/* ============ GENERIC BLOCKS ============ */
.split{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:38px}}
.photo{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--ink)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;inset-inline-start:0;bottom:0;background:linear-gradient(0deg,rgba(var(--ink-deep-rgb,7,30,56),.85),transparent);color:#fff;width:100%;padding:38px 18px 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
[dir="rtl"] .photo .cap{letter-spacing:.02em}
.ov-item{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.ov-item .k{font-family:var(--mono);font-size:12.5px;color:var(--navy);min-width:40px;font-weight:700}
.ov-item .v{font-size:15.5px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr}}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;transition:transform .22s,box-shadow .22s,border-color .22s}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--navy)}
.tcard h3{font-size:18px}
.tcard p{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.55}
.tcard .n{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.1em}
/* product cards */
.prod{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column;cursor:pointer}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--navy)}
.prod .top{position:relative;aspect-ratio:16/10;overflow:hidden}
.prod .top img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.prod:hover .top img{transform:scale(1.06)}
.prod .no{position:absolute;top:12px;inset-inline-start:14px;font-family:var(--mono);font-size:11.5px;color:#fff;letter-spacing:.12em;z-index:2;background:rgba(var(--ink-deep-rgb,7,30,56),.55);padding:4px 9px;border-radius:4px;backdrop-filter:blur(4px)}
.prod .body{padding:20px 22px 24px}
.prod h3{font-size:20px;color:var(--text)}
.prod p{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.5}
/* The base rule: `.go` was only ever styled inside `.prod`, so the same class
   used in the grade tables rendered as plain body text with nothing to say it
   was a link. */
.go{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--navy);display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;font-weight:700}
.go:hover{text-decoration:underline;text-underline-offset:3px}
[dir="rtl"] .go{font-family:var(--ff);letter-spacing:normal}
.prod .go{margin-top:14px}
.go svg{width:14px;height:14px;transition:transform .2s}
[dir="rtl"] .go svg{transform:scaleX(-1)}
.prod:hover .go svg,.go:hover svg{transform:translateX(4px)}
[dir="rtl"] .prod:hover .go svg,[dir="rtl"] .go:hover svg{transform:scaleX(-1) translateX(4px)}
/* applications dark band */
.apps{background:var(--ink-deep);color:#E8EFF7}
.apps .eyebrow{color:var(--gold)}.apps .eyebrow::before{background:var(--gold)}
.apps .section-head h2{color:#fff}
.app-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1000px){.app-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.app-grid{grid-template-columns:1fr 1fr}}
.app{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:22px 18px;text-align:center;transition:.22s}
.app:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);border-color:rgba(var(--gold-rgb,247,207,40),.5)}
.app img{height:54px;width:auto;margin:0 auto 14px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.app h3{font-size:14.5px;color:#fff;font-weight:700;line-height:1.3}
/* video */
.video-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vframe{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:16/9;background:#000;cursor:pointer}
.vframe img{width:100%;height:100%;object-fit:cover;opacity:.85}
.vframe .play{position:absolute;inset:0;display:grid;place-items:center}
.vframe .play span{width:84px;height:84px;border-radius:50%;background:rgba(var(--gold-rgb,247,207,40),.95);display:grid;place-items:center;transition:transform .2s;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.vframe:hover .play span{transform:scale(1.1)}
.vframe .play svg{width:30px;height:30px;fill:var(--navy-deep,#0B2D52);margin-inline-start:5px}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* parallax band */
.parallax{min-height:52vh;background-size:cover;background-position:center 70%;background-attachment:fixed;position:relative;display:flex;align-items:flex-end}
@media(max-width:900px),(prefers-reduced-motion:reduce){.parallax{background-attachment:scroll}}
.parallax::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--ink-deep-rgb,7,30,56),.72),transparent 55%)}
.parallax .pcap{position:relative;z-index:1;color:#fff;padding-block:28px}
.parallax .pcap .t1{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
[dir="rtl"] .parallax .pcap .t1{letter-spacing:.02em}
.parallax .pcap .t2{font-size:clamp(20px,2.6vw,30px);font-weight:800;margin-top:6px}
/* qa band */
.qa{background:linear-gradient(120deg,var(--ink) 0%,var(--ink-deep) 100%);color:#E8EFF7;border-radius:16px;padding:58px;position:relative;overflow:hidden}
.qa::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 100% 0,rgba(var(--gold-rgb,247,207,40),.12),transparent 55%);pointer-events:none}
.qa-in{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media(max-width:820px){.qa{padding:36px}.qa-in{grid-template-columns:1fr;gap:30px}}
.qa .eyebrow{color:var(--gold)}.qa .eyebrow::before{background:var(--gold)}
.qa h2{font-size:clamp(26px,3.2vw,36px);color:#fff;margin-top:14px}
.qa p{margin-top:16px;color:#B8CBDE}
.cert-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.cert{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:10px;padding:16px 18px}
.cert .c1{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--gold)}
.cert .c2{font-size:12.5px;color:#9FB4C9;margin-top:4px}
/* page hero (inner pages) */
.phero{background:linear-gradient(100deg,var(--ink-deep) 30%,var(--ink) 100%);color:#fff;padding:92px 0 72px;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 90% -10%,rgba(var(--blue-rgb,30,115,190),.25),transparent 55%);pointer-events:none}
.phero .crumb{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
[dir="rtl"] .phero .crumb{letter-spacing:.02em}
.phero h1{font-size:clamp(34px,5vw,58px);margin-top:14px;color:#fff}
.phero p{margin-top:16px;color:#C3D3E4;max-width:62ch;font-size:18px}
/* contact */
.c-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.c-item .ic{width:42px;height:42px;flex:none;border-radius:9px;background:var(--chip);display:grid;place-items:center;color:var(--navy)}
.c-item .ic svg{width:20px;height:20px}
.c-item h4{font-size:15px}
.c-item p,.c-item a{font-size:14.5px;color:var(--muted);margin-top:3px;display:block;direction:ltr;text-align:start}
.form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow)}
.form label{font-size:13px;font-weight:700;color:var(--muted);display:block;margin:16px 0 6px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.form input,.form textarea,.form select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--text);font-family:var(--ff);font-size:15px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--navy);outline-offset:1px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form .two{grid-template-columns:1fr}}
/* footer */
footer{background:var(--ink-deep);color:#B8CBDE;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
footer .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
footer .fbrand img{height:34px;background:#fff;border-radius:7px;padding:4px}
footer p{font-size:14px;line-height:1.6;color:#8AA2B8;max-width:36ch}
.foot-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:700}
[dir="rtl"] .foot-h{letter-spacing:.02em}
.foot-links{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot-links a{color:#B8CBDE;transition:color .15s;cursor:pointer}.foot-links a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8AA2B8;font-family:var(--mono)}
/* util */
/* Scroll animation. The hidden state is applied only when scripting is
   available, because otherwise the observer that reveals it never runs and
   the page stays blank — 52 elements across 12 templates depend on this. */
.reveal{transition:opacity .65s ease,transform .65s ease}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}.hero .slide.on{animation:none}}
:focus-visible{outline:2px solid var(--navy-deep,#0B2D52);outline-offset:2px;box-shadow:0 0 0 4px #fff}
.pill{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;background:var(--chip);color:var(--navy);border-radius:99px;padding:5px 12px;font-weight:700;text-transform:uppercase}
[dir="rtl"] .pill{letter-spacing:.02em}
/* Available to any element that must be announced but not shown — the
   datasheet's caption, and the grade name inside a repeated "Open" link. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

table.specs{width:100%;border-collapse:collapse;font-size:14.5px}
table.specs th,table.specs td{text-align:start;padding:11px 14px;border-bottom:1px solid var(--line)}
table.specs thead th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
/* The property name was already drawn as a header; this is the same look, now
   attached to a cell that actually is one. */
table.specs td:first-child,
table.specs th[scope="row"]{font-weight:700;color:var(--navy)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}

/* Certificate paperwork — issuer, number and dates.
   A two-column "auto 1fr" list was tried first and does not survive this
   grid: each card sizes its own columns, so the labels landed at 82px in one
   card and 100px in the next, and in Arabic the longer labels won the auto
   column and squeezed the values into 55px. Stacking the label above its
   value costs no height — the side-by-side rows were already wrapping to two
   lines — and every card now aligns with every other. */
/* Two tracks at most. A bare minmax(120px,1fr) fits a third track once the
   card's inner width passes 396px, which happens below the 560px breakpoint
   where .grid-3 becomes a single column and each card gets WIDER, not
   narrower. A third track puts "Issued" and "Valid until" on different rows
   with two empty cells beside the expiry — and those two fields are read
   together or not at all. The 50%-minus-half-gap floor makes three tracks
   arithmetically impossible while 120px still collapses to one on a very
   narrow card. */
.cert-meta{display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(max(120px,calc(50% - 9px)),1fr));margin-top:16px;font-size:14px;line-height:1.45}
.cert-meta div{min-width:0}
.cert-meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.cert-meta dd{margin:0;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* The chip is pushed to the bottom so it lines up across a row of cards whose
   headings wrap to different numbers of lines. The auto margin on the list
   absorbs the slack; the chip keeps its own 16px so the two never touch. */
.tcard--block{display:block}
.tcard:has(.cert-meta){display:flex;flex-direction:column}
.tcard:has(.cert-meta) .cert-meta{margin-bottom:auto}
/* Flex items stretch on the cross axis by default, which would pull the logo,
   the chip and the download pill to the full width of the card. */
.tcard:has(.cert-meta)>img,
.tcard:has(.cert-meta)>.pill{align-self:flex-start}
.cert-status{align-self:flex-start;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:99px;padding:4px 11px;border:1px solid}
.cert-status--current{color:var(--ok-fg);background:var(--ok-bg);border-color:var(--ok-brd)}
.cert-status--expired{color:var(--warn-fg);background:var(--warn-bg);border-color:var(--warn-brd)}
/* "Leaves the page" points up and outward, so outward is up-left in Arabic. */
[dir="rtl"] .ext-arrow{display:inline-block;transform:scaleX(-1)}

/* ================= MEDIA CENTER REDESIGN ================= */
.news-feat{display:grid;grid-template-columns:1.1fr 1fr;border-radius:16px;overflow:hidden;
  background:var(--card,#fff);box-shadow:var(--shadow);border:1px solid var(--line,rgba(var(--navy-rgb,16,70,129),.12))}
.news-feat-media{position:relative;min-height:320px}
.news-feat-media img,.news-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-feat-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.news-feat-body h3{margin:14px 0 0;font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.25;
  letter-spacing:-.015em;color:var(--navy,#104681)}
.news-feat-body p{margin:12px 0 0;color:var(--muted,#4E6479);font-size:16px;line-height:1.65}
.news-feat-body .btn{margin-top:22px}
.news-ph{background:linear-gradient(135deg,var(--navy-deep,#0B2D52),var(--navy,#104681) 55%,var(--navy-bright,#1A5A9E));
  display:flex;align-items:center;justify-content:center;position:absolute}
.news-ph::before{content:"";position:absolute;inset:0;opacity:.16;
  background:radial-gradient(circle at 78% 18%,rgba(var(--gold-rgb,247,207,40),.9),transparent 42%),
  repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.09) 26px 27px)}
.news-ph img{position:static;width:44%;max-width:190px;height:auto;object-fit:contain;opacity:.9}
.badge-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;
  background:var(--gold,#F7CF28);color:var(--navy-deep,#0B2D52);font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
[dir="rtl"] .badge-chip{letter-spacing:.01em}
.date-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono,monospace);
  font-size:12.5px;color:var(--muted,#4E6479)}
.news-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--card,#fff);
  border:1px solid var(--line,rgba(var(--navy-rgb,16,70,129),.12));box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;color:inherit}
.news-card:hover{transform:translateY(-5px)}
.news-card-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.news-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.news-card-media .badge-chip{position:absolute;top:12px;inset-inline-start:12px;z-index:2}
/* placeholder logo: outranks the generic .news-*-media img cover rules */
.news-feat-media .news-ph img,.news-card-media .news-ph img{position:static;width:44%;height:auto;max-width:190px;object-fit:contain}
.news-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-card-body h3{margin:0;font-size:17.5px;font-weight:800;line-height:1.35;color:var(--navy,#104681)}
.news-card-body p{margin:0;font-size:14px;color:var(--muted,#4E6479);line-height:1.6;flex:1}
.news-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px}
.news-card-foot .go{color:var(--navy,#104681);font-weight:700;font-size:13.5px}
.event-row{display:flex;gap:22px;align-items:stretch;padding:20px;border-radius:14px;background:var(--card,#fff);
  border:1px solid var(--line,rgba(var(--navy-rgb,16,70,129),.12));box-shadow:var(--shadow);color:inherit;
  transition:transform .22s ease}
.event-row:hover{transform:translateY(-4px)}
.event-row+.event-row{margin-top:14px}
.date-block{flex:none;width:78px;border-radius:12px;background:linear-gradient(160deg,var(--navy-deep,#0B2D52),var(--navy,#104681));
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px}
.date-block b{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.date-block span{font-size:12px;margin-top:5px;opacity:.85}
.event-row-body h3{margin:0;font-size:17.5px;font-weight:800;color:var(--navy,#104681)}
.event-row-body p{margin:7px 0 0;font-size:14px;color:var(--muted,#4E6479);line-height:1.6}
.press-band{border-radius:16px;padding:40px 44px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;background:linear-gradient(135deg,var(--navy-deep,#0B2D52),var(--navy,#104681) 60%,var(--navy-bright,#1A5A9E));
  color:#fff;position:relative;overflow:hidden}
.press-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 140% at 92% 0%,rgba(var(--gold-rgb,247,207,40),.18),transparent 48%)}
.press-band h3{margin:8px 0 0;font-size:clamp(20px,2.4vw,27px);font-weight:800}
.press-band .eyebrow{color:var(--gold-2,#F6D35C)}
.vcard{border-radius:14px;overflow:hidden;background:var(--card,#fff);border:1px solid var(--line,rgba(var(--navy-rgb,16,70,129),.12));
  box-shadow:var(--shadow)}
.vcard .vframe{border-radius:0;margin:0}
.vcard > h3{margin:0;padding:16px 20px 0;font-size:16.5px;font-weight:800;color:var(--navy,#104681)}
.vcard > p{padding:0 20px 18px;margin:10px 0 0}
@media(max-width:860px){
  .news-feat{grid-template-columns:1fr}
  .news-feat-media{min-height:220px}
  .news-grid{grid-template-columns:1fr}
  .news-feat-body{padding:24px 22px}
  .press-band{padding:28px 24px}
}

/* ---- Media center tabs ---- */
.media-tabs-wrap{position:sticky;top:71px;z-index:40;background:var(--paper,#F5F7FA);
  border-bottom:1px solid var(--line,rgba(var(--navy-rgb,16,70,129),.12));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.media-tabs{display:flex;gap:10px;padding:14px 0;flex-wrap:wrap}
.media-tab{border:1px solid var(--line,rgba(var(--navy-rgb,16,70,129),.16));background:var(--card,#fff);
  color:var(--text,#122A45);font-family:inherit;font-size:14.5px;font-weight:700;padding:10px 20px;
  border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.media-tab:hover{transform:translateY(-1px);border-color:var(--navy,#104681)}
.media-tab.act{background:var(--navy-solid,#104681);border-color:var(--navy-solid,#104681);color:#fff}
.vfeat{max-width:860px}
.vfeat .vframe{border-radius:14px;box-shadow:var(--shadow)}
@media(max-width:640px){.media-tabs{gap:7px;padding:12px 0}.media-tab{padding:8px 14px;font-size:13px}}

/* ---- Floating WhatsApp button ---- */
.wa-float{position:fixed;inset-inline-start:22px;bottom:22px;z-index:120;width:48px;height:48px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(11,45,82,.45);transition:transform .18s ease,box-shadow .18s ease}
.wa-float:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 30px -8px rgba(11,45,82,.55)}
.wa-float svg{width:26px;height:26px;display:block;position:relative;z-index:1}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.6);
  animation:waPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none;display:none}.wa-float{transition:none}}
@media(max-width:640px){.wa-float{inset-inline-start:16px;bottom:16px}}

/* ---- Footer meta: social icons + legal line ---- */
.foot-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.foot-social a{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#B8CBDE;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  transition:color .18s,border-color .18s,transform .18s}
.foot-social a:hover{color:var(--gold,#F7CF28);border-color:rgba(var(--gold-rgb,247,207,40),.6);transform:translateY(-2px)}
.foot-social svg{width:16px;height:16px;fill:currentColor;display:block}
.foot-legal{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:#8AA2B8;
  font-variant-numeric:tabular-nums}
.foot-legal span{white-space:nowrap}

/* ---- Contact map embed ---- */
.map-embed{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-top:22px;
  border:1px solid var(--line,rgba(var(--navy-rgb,16,70,129),.12));box-shadow:var(--shadow);
  background:var(--chip,rgba(16,70,129,.06))}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---- a11y: skip link (anchor added in layout by maintainer) ---- */
.skip-link{position:absolute;inset-inline-start:16px;top:-64px;z-index:1000;background:var(--gold,#F7CF28);
  color:var(--navy-deep,#0B2D52);font-weight:800;font-size:14px;padding:10px 22px;border-radius:99px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);text-decoration:none;transition:top .18s ease}
.skip-link:focus{top:16px}
.skip-link:focus-visible{outline:2px solid var(--navy,#104681);outline-offset:2px}

/* ---- a11y: consistent focus-visible ring on interactive controls ---- */
.btn:focus-visible,
nav a:focus-visible,.nav a:focus-visible,.foot-links a:focus-visible,
.media-tab:focus-visible,
.form input:focus-visible,.form textarea:focus-visible,.form select:focus-visible{
  outline:2px solid var(--gold,#F7CF28);outline-offset:2px}

/* ---- perf: <picture> wrappers must not affect layout of framed images ---- */
.photo picture,.vframe picture{display:contents}

/* Validation messages: one token instead of a hex repeated inline, so the
   dark theme can lift the colour off the dark card. */
.field-error{color:var(--danger,#B32D1F);font-size:12.5px;margin-top:4px;line-height:1.5}

/* Notice above a form. Carries a border and an inline-start bar so the two
   kinds stay distinguishable without relying on colour alone. */
.note{font-weight:700;font-size:14.5px;line-height:1.65;padding:14px 18px;border-radius:8px;border:1px solid var(--line);border-inline-start:4px solid currentColor;margin-bottom:18px}
.note-ok{background:var(--chip);color:var(--navy)}
.note-warn{background:rgba(179,45,31,.07);color:var(--danger,#B32D1F)}

/* Printing: a product page is a document a buyer takes into a meeting. */
@media print{
  .js .reveal{opacity:1;transform:none}
  header.nav,.mobile-menu,.wa-float,.ad-corner,.ad-popup,.ad-banner,.hero-dots,.skip-link{display:none!important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;word-break:break-all}
  .photo,table.specs,.prod{break-inside:avoid}
  section{padding-block:12pt}
}

/* ---------------------------------------------------------------------------
   Arabic typography
   The monospace stack starts with faces that also cover Arabic, so labels,
   captions and table headers were being set in a typewriter face with Latin
   letter-spacing applied to Arabic letterforms. Arabic pages use the body
   family instead, with the spacing removed — Arabic script is joined and
   letter-spacing breaks the joins.
--------------------------------------------------------------------------- */
[dir="rtl"] .form label,
[dir="rtl"] table.specs th,
[dir="rtl"] .prod .go,
[dir="rtl"] .foot-h,
[dir="rtl"] .foot-bottom,
[dir="rtl"] .phero .crumb,
[dir="rtl"] .eyebrow,
[dir="rtl"] .pill,
[dir="rtl"] .cert-meta dt,
[dir="rtl"] .cert-status,
[dir="rtl"] .date-chip,
[dir="rtl"] .tcard .n,
[dir="rtl"] .photo .cap,
[dir="rtl"] .parallax .pcap .t1,
[dir="rtl"] .cert .c1,
[dir="rtl"] .fact span,
[dir="rtl"] .no{
  font-family:var(--ff);
  letter-spacing:normal;
}

/* Latin fragments inside Arabic sentences — product codes, phone numbers,
   quantities — read left to right even on a right-to-left page. */
[dir="rtl"] .ltr,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"]{
  direction:ltr;
  text-align:start;
}