/* PREVARO — Deep Ocean. Layout: dark engineered bands (header, hero, CTA, footer) framing light "mist" reading sheets; spec-sheet details in mono. */
@font-face{font-family:Tajawal;src:url(fonts/Tajawal-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url(fonts/Tajawal-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url(fonts/Tajawal-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Tajawal;src:url(fonts/tajawal-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;src:url(fonts/tajawal-arabic-800-normal.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root{
  --navy:#062B47; --ink:#0A2236; --deep:#041C2F; --blue:#0B5C8A; --cyan:#38C6D9; --coral:#FF7A59;
  --mist:#F2F7F9; --paper:#FFFFFF; --line:#D6E3EA; --muted:#4E6577; --on-dark:#E6F1F6; --on-dark-muted:#9DB6C6;
  --line-dark:rgba(56,198,217,.18);
  --f-body:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  --f-mark:"Tajawal","Segoe UI",sans-serif;
  --f-mono:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  --s-xs:.8125rem; --s-sm:.9375rem; --s-md:1.0625rem; --s-lg:1.3125rem; --s-xl:1.75rem; --s-2xl:2.375rem; --s-3xl:clamp(2.25rem,5vw,3.75rem);
  --wrap:1180px; --read:68ch; --r:6px;
  --fg-strong:#062B47; --tint-coral:#FFF6F3; --coral-text:#B5472A;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--ink);font-family:var(--f-body);font-size:var(--s-md);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--fg-strong)}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4,.h4{line-height:1.2;text-wrap:balance;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;top:8px;inset-inline-start:8px;transform:translateY(-200%)}.skip:focus{transform:none;z-index:99;background:var(--coral);color:var(--deep);padding:8px 12px}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(4,28,47,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark);color:var(--on-dark)}
.head-row{display:flex;align-items:center;gap:24px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-dark);flex-shrink:0}
.brand svg{width:38px;height:38px}
.brand b{font-family:var(--f-mark);font-weight:600;font-size:1.25rem;letter-spacing:.14em}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav>a,.nav .mm>button{font:inherit;font-size:var(--s-sm);font-weight:500;color:var(--on-dark);text-decoration:none;background:none;border:0;padding:10px 12px;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;gap:6px}
.nav>a:hover,.nav .mm>button:hover,.nav>a[aria-current]{color:var(--cyan)}
.nav .mm>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.mm{position:relative}
.mm-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--deep);border:1px solid var(--line-dark);border-radius:10px;padding:22px;display:none;gap:28px;box-shadow:0 24px 60px rgba(0,0,0,.4);width:max-content;max-width:min(860px,92vw)}
.mm.open .mm-panel{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.mm-panel .mm-h{margin-top:0;font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.mm-panel a{display:block;color:var(--on-dark);text-decoration:none;font-size:var(--s-sm);padding:6px 0}
.mm-panel a small{display:block;color:var(--on-dark-muted);font-size:var(--s-xs);line-height:1.4}
.mm-panel a:hover{color:var(--cyan)}
.lang{position:relative;margin-inline-start:8px}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border:1px solid var(--line-dark);border-radius:var(--r);background:none;color:var(--on-dark);font:inherit;font-size:var(--s-xs);font-weight:700;cursor:pointer}
.lang-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;min-width:160px;margin:0;padding:6px;list-style:none;background:var(--deep);border:1px solid var(--line-dark);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.lang-menu[hidden]{display:none}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;color:var(--on-dark);text-decoration:none;font-size:var(--s-sm)}
.lang-menu a:hover,.lang-menu a:focus-visible{background:rgba(56,198,217,.14);outline:none}
.lang-menu a[aria-current]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
.search-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-dark);border-radius:var(--r);background:none;color:var(--on-dark);cursor:pointer;flex-shrink:0;margin-inline-start:4px}
.search-btn:hover{border-color:var(--cyan);color:var(--cyan)}
@media (max-width:1199px){.menu-btn{margin-inline-start:auto}.lang-menu{position:static;margin-top:8px;box-shadow:none}}
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:700;font-size:var(--s-sm);text-decoration:none;padding:12px 20px;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-coral{background:var(--coral);color:var(--deep)}
.btn-coral:hover{background:#ff8f73;color:var(--deep)}
.btn-ghost{border-color:rgba(230,241,246,.35);color:var(--on-dark)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-line{border-color:var(--fg-strong);color:var(--fg-strong)}
.btn-line:hover{background:var(--navy);color:#fff}
.head-cta{margin-inline-start:6px}
.nav>a.btn-coral{background:var(--coral);color:var(--deep);font-weight:700;padding:10px 16px}
.nav>a.btn-coral:hover{background:#ff8f73;color:var(--deep)}
.menu-btn{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line-dark);color:var(--on-dark);border-radius:var(--r);padding:8px 12px;font:inherit;font-size:var(--s-sm)}
@media (max-width:1199px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--deep);flex-direction:column;align-items:stretch;padding:12px max(20px,env(safe-area-inset-right,0px)) 20px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line-dark);max-height:calc(100vh - 70px);overflow:auto;margin:0}
  .nav.open{display:flex}
  .mm-panel{position:static;transform:none;box-shadow:none;border:0;padding:4px 12px 12px;width:auto;max-width:none}
  .mm.open .mm-panel{grid-template-columns:1fr;gap:14px}
  .head-cta,.lang{margin:8px 0 0}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--deep);color:var(--on-dark);overflow:hidden;border-bottom:1px solid var(--line-dark)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(56,198,217,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,198,217,.05) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,28,47,.96) 0%,rgba(4,28,47,.82) 45%,rgba(4,28,47,.2) 100%);pointer-events:none}
[dir=rtl] .hero::after{background:linear-gradient(270deg,rgba(4,28,47,.96) 0%,rgba(4,28,47,.82) 45%,rgba(4,28,47,.2) 100%)}
.hero:not(:has(canvas))::after{display:none}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(36px,5vw,68px)}
.hero h1{font-size:var(--s-3xl);font-weight:800;max-width:15ch;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero .lede{font-size:var(--s-lg);color:var(--on-dark-muted);max-width:52ch;margin-top:22px;line-height:1.55}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor}
.hero-strip{position:relative;z-index:1;border-top:1px solid var(--line-dark);background:rgba(4,28,47,.7)}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:0}
.hero-strip .wrap>div{padding-block:22px;padding-inline:0 18px;border-inline-end:1px solid var(--line-dark)}
.hero-strip .wrap>div:last-child{border-inline-end:0}
.hero-strip b{display:block;font-family:var(--f-mark);font-size:var(--s-xl);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.hero-strip span{font-size:var(--s-xs);color:var(--on-dark-muted);line-height:1.4;display:block}
@media (max-width:760px){.hero-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-strip .wrap>div{padding-block:16px;padding-inline:0 12px}.hero-strip .wrap>div:nth-child(2){border-inline-end:0}}

/* inner page hero */
.page-hero{background:var(--navy);color:var(--on-dark);border-bottom:1px solid var(--line-dark);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);opacity:.6}
.page-hero .wrap{position:relative;padding-block:clamp(44px,7vw,84px)}
.page-hero h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;max-width:22ch}
.page-hero .lede{font-size:var(--s-lg);color:var(--on-dark-muted);max-width:60ch;margin-top:18px;line-height:1.55}
.crumbs{font-family:var(--f-mono);font-size:.75rem;color:var(--on-dark-muted);display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.crumbs a{color:var(--on-dark-muted);text-decoration:none}.crumbs a:hover{color:var(--cyan)}
.crumbs span[aria-hidden]{opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{font-family:var(--f-mono);font-size:.75rem;border:1px solid var(--line-dark);color:var(--on-dark);padding:6px 10px;border-radius:4px;background:rgba(56,198,217,.06)}

/* ---------- reading sections ---------- */
.sec{padding-block:clamp(48px,7vw,88px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec.white{background:var(--paper)}
.sec-head{display:grid;gap:12px;margin-bottom:36px;max-width:var(--read)}
.sec-head h2{font-size:var(--s-2xl);font-weight:800}
.sec-head p{color:var(--muted);font-size:var(--s-lg);line-height:1.55}
.label{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:36px}}
.prose{max-width:var(--read);min-width:0}
.prose h2{font-size:var(--s-xl);font-weight:800;margin:48px 0 14px;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--s-lg);font-weight:700;margin:30px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-inline-start:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--blue)}
.prose strong{color:var(--fg-strong)}
.prose .note{border-inline-start:3px solid var(--coral);background:var(--paper);padding:14px 18px;margin:22px 0;font-size:var(--s-sm);color:var(--ink)}
.sec.white .prose .note{background:var(--mist)}
.table-wrap{overflow-x:auto;margin:20px 0 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:var(--s-sm);min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--mist)}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;font-family:var(--f-mono);font-size:.8125rem;white-space:nowrap}
caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:var(--s-xs);color:var(--muted)}

/* side panel */
.aside{position:sticky;top:96px;display:grid;gap:18px}
.toc{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:18px}
.toc .h4{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:10px}
.toc a{display:block;font-size:var(--s-sm);text-decoration:none;color:var(--ink);padding:5px 0;border-bottom:1px dashed var(--line)}
.toc a:last-child{border-bottom:0}.toc a:hover{color:var(--blue)}
.ask{background:var(--navy);color:var(--on-dark);border-radius:var(--r);padding:20px}
.ask .h4{font-size:var(--s-md);margin-bottom:8px}
.ask p{font-size:var(--s-sm);color:var(--on-dark-muted);margin-bottom:14px}

/* lifecycle (design / install / maintain) */
.cycle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.cycle>div{padding:24px;border-inline-end:1px solid var(--line);min-width:0}
.cycle>div:last-child{border-inline-end:0}
.cycle h3{font-size:var(--s-lg);margin:8px 0 12px}
.cycle ul{margin:0;padding-inline-start:18px;font-size:var(--s-sm)}
.cycle li{margin-bottom:6px}
.cycle .k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--blue)}
.cycle>div:nth-child(3){background:var(--tint-coral)}
.cycle>div:nth-child(3) .k{color:var(--coral-text)}
@media (max-width:820px){.cycle{grid-template-columns:1fr}.cycle>div{border-inline-end:0;border-bottom:1px solid var(--line)}.cycle>div:last-child{border-bottom:0}}

/* checklist */
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.checks li{position:relative;padding-inline-start:30px;font-size:var(--s-sm)}
.checks li::before{content:"";position:absolute;inset-inline-start:0;top:3px;width:18px;height:18px;border:1.5px solid var(--blue);border-radius:3px}
.checks li::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:9px;border-inline-end:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(45deg)}
@media (max-width:700px){.checks{grid-template-columns:1fr}}

/* cards / grids */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:border-color .15s ease,transform .15s ease;min-width:0}
a.card:hover{border-color:var(--blue);--lift:-2px;color:var(--ink)}
.card .code{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;color:var(--blue)}
.card h3{font-size:var(--s-lg)}
.card p{font-size:var(--s-sm);color:var(--muted)}
.card .more{margin-top:auto;font-size:var(--s-sm);font-weight:700;color:var(--blue)}
.card .more::after{content:" →"}
.group-title{display:flex;align-items:baseline;gap:14px;margin:44px 0 18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.group-title:first-child{margin-top:0}
.group-title h3{font-size:var(--s-xl)}
.group-title span{font-family:var(--f-mono);font-size:.75rem;color:var(--muted)}

/* home specifics */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--navy)}
.pillars>a{padding-block:28px 30px;padding-inline:0 26px;margin-inline-end:26px;text-decoration:none;color:var(--ink);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.pillars>a:last-child{border-inline-end:0;margin-inline-end:0}
.pillars .n{font-family:var(--f-mono);font-size:.75rem;color:var(--coral-text);letter-spacing:.12em}
.pillars h3{font-size:var(--s-xl)}
.pillars p{color:var(--muted);font-size:var(--s-sm)}
.pillars ul{margin:0;padding-inline-start:18px;font-size:var(--s-sm)}
.pillars .more{font-weight:700;color:var(--blue);margin-top:auto;font-size:var(--s-sm)}
.pillars>a:hover h3{color:var(--blue)}
@media (max-width:880px){.pillars{grid-template-columns:1fr}.pillars>a{border-inline-end:0;margin-inline-end:0;border-bottom:1px solid var(--line);padding-inline-end:0}}
.dark-band{background:var(--navy);color:var(--on-dark)}
.dark-band .sec-head p{color:var(--on-dark-muted)}
.dark-band .label{color:var(--cyan)}
.promise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.promise div{border-top:1px solid var(--line-dark);padding-top:18px;min-width:0}
.promise h3{font-size:var(--s-md);margin-bottom:8px;color:#fff}
.promise p{font-size:var(--s-sm);color:var(--on-dark-muted)}
@media (max-width:900px){.promise{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.promise{grid-template-columns:1fr}}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s}
.steps li{counter-increment:s;padding-block:0;padding-inline:0 18px;border-top:2px solid var(--line);position:relative;padding-top:22px;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:.75rem;color:var(--blue);display:block;margin-bottom:8px}
.steps li::after{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--coral)}
.steps h3{font-size:var(--s-md);margin-bottom:6px}
.steps p{font-size:var(--s-sm);color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:22px}}
.sector-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sector-list a{background:var(--paper);padding:20px;text-decoration:none;color:var(--ink);display:block;min-width:0}
.sector-list a:hover{background:var(--mist)}
.sector-list b{display:block;font-size:var(--s-md);margin-bottom:4px}
.sector-list span{font-size:var(--s-xs);color:var(--muted);line-height:1.4;display:block}
@media (max-width:900px){.sector-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.sector-list{grid-template-columns:1fr}}

/* calculator */
.calc{background:var(--navy);color:var(--on-dark);border-radius:10px;padding:26px;margin:28px 0}
.calc h3{color:#fff;margin:0 0 6px;font-size:var(--s-lg)}
.calc p.hint{font-size:var(--s-sm);color:var(--on-dark-muted);margin-bottom:18px}
.calc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.calc label{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted);display:grid;gap:6px}
.calc input,.calc select{font:inherit;font-size:var(--s-md);color:#fff;background:var(--deep);border:1px solid var(--line-dark);border-radius:4px;padding:9px 10px;width:100%;color-scheme:dark}
.calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px;border-top:1px solid var(--line-dark);padding-top:18px}
.calc-out b{display:block;font-family:var(--f-mark);font-size:var(--s-xl);color:var(--cyan);font-variant-numeric:tabular-nums}
.calc-out span{font-size:var(--s-xs);color:var(--on-dark-muted)}
@media (max-width:760px){.calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calc-out{grid-template-columns:1fr}}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:var(--s-md);padding:16px 36px 16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:12px;font-family:var(--f-mono);font-size:1.25rem;color:var(--blue)}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding:0 0 18px;color:var(--ink)}
.faq details>div p{margin-bottom:12px}

/* contact */
.form{display:grid;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:26px}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form label{display:grid;gap:6px;font-size:var(--s-sm);font-weight:500}
.form input,.form select,.form textarea{font:inherit;font-size:var(--s-md);border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--mist);color:var(--ink);width:100%}
.form textarea{min-height:140px;resize:vertical}
.form .fine{font-size:var(--s-xs);color:var(--muted)}
.form-status{font-size:var(--s-sm);color:var(--fg-strong);background:var(--mist);border-inline-start:3px solid var(--cyan);padding:10px 14px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.contact-lines{display:grid;gap:14px}
.contact-lines div{border-bottom:1px solid var(--line);padding-bottom:12px}
.contact-lines span{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-lines b{font-size:var(--s-md);user-select:all}

/* CTA + footer */
.cta-band{background:var(--deep);color:var(--on-dark);border-top:1px solid var(--line-dark)}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:clamp(48px,7vw,80px)}
.cta-band h2{font-size:var(--s-2xl);font-weight:800}
.cta-band p{color:var(--on-dark-muted);margin-top:12px;max-width:52ch}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media (max-width:820px){.cta-band .wrap{grid-template-columns:1fr}.cta-band .actions{justify-content:flex-start}}
.site-foot{background:#031626;color:var(--on-dark-muted);font-size:var(--s-sm)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px;padding-block:56px 36px}
.foot-grid .h4{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:500;margin-bottom:12px}
.foot-grid a{display:block;color:var(--on-dark);text-decoration:none;padding:3px 0}
.foot-grid a:hover{color:var(--cyan)}
.foot-grid p{max-width:36ch;margin-top:14px}
.foot-legal{border-top:1px solid var(--line-dark);padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em}
.foot-legal a{color:var(--on-dark-muted)}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}


/* ---------------------------------------------------------------- brand lockup */
.brand-lockup{display:block;height:40px;width:auto}
.site-foot .brand-lockup{height:44px}

/* ---------------------------------------------------------------- images */
picture{display:block}
picture img{display:block;width:100%;height:auto;object-fit:cover;background:var(--navy)}
.page-hero.has-img .ph-img{position:absolute;inset:0}
.page-hero.has-img .ph-img img{width:100%;height:100%;aspect-ratio:auto!important;object-position:70% 50%}
.page-hero .ph-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,28,47,.97) 0%,rgba(4,28,47,.9) 42%,rgba(4,28,47,.45) 100%)}
.page-hero.has-img::before{z-index:1}
.page-hero .wrap{z-index:2}
[dir=rtl] .page-hero .ph-shade{background:linear-gradient(270deg,rgba(4,28,47,.97) 0%,rgba(4,28,47,.9) 42%,rgba(4,28,47,.45) 100%)}
[dir=rtl] .page-hero.has-img .ph-img img{transform:scaleX(-1)}
@media (max-width:760px){.page-hero .ph-shade{background:rgba(4,28,47,.86)}}
/* inner hero: blueprint grid drifts slowly; one device icon draws in once */
@keyframes grid-drift{to{background-position:44px 44px,44px 44px}}
.page-hero::before{animation:grid-drift 24s linear infinite}
.ph-device{position:absolute;inset-inline-end:max(24px,6vw);bottom:22px;width:120px;height:120px;color:var(--cyan);opacity:.55;z-index:2;pointer-events:none}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:760px){.ph-device{display:none}}

.sec-img{margin:22px 0 30px;border-radius:10px;overflow:hidden;background:var(--navy);border:1px solid var(--line)}
.sec-img img{aspect-ratio:16/10}
figcaption{font-size:var(--s-xs);color:var(--muted);padding:10px 14px;background:var(--paper);display:flex;flex-wrap:wrap;gap:8px;align-items:center;line-height:1.45}
.tag-illus{font-size:.6875rem;font-weight:700;letter-spacing:.06em;color:var(--blue);border:1px solid var(--line);border-radius:3px;padding:1px 6px;background:var(--mist)}

/* cards with images: 2px lift, image zoom 1.04 */
.card{position:relative}
.card .card-img{margin:-22px -22px 6px;overflow:hidden;border-radius:var(--r) var(--r) 0 0;border-bottom:1px solid var(--line)}
.card .card-img img{transition:transform .5s ease;aspect-ratio:16/10}
.card:hover,.card:focus-visible{--lift:-2px;border-color:var(--blue)}
.card:hover .card-img img,.card:focus-visible .card-img img{transform:scale(1.04)}
.sector-list a.has-img{padding:0 0 18px;overflow:hidden}
.sector-list a.has-img .card-img{margin-bottom:14px;overflow:hidden}
.sector-list a.has-img .card-img img{aspect-ratio:16/9;transition:transform .5s ease}
.sector-list a.has-img:hover .card-img img{transform:scale(1.04)}
.sector-list a.has-img b,.sector-list a.has-img span{padding-inline:18px}

/* gallery + lightbox */
.gallery-sec{background:var(--paper)}
.g-note{color:var(--muted);font-size:var(--s-sm);margin:8px 0 24px;max-width:70ch}
.gallery-sec h2{font-size:var(--s-2xl);font-weight:800}
.gallery{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}
.g-item{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--navy)}
.g-item img{transition:transform .5s ease;aspect-ratio:16/10}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.04)}
.g-item:focus-visible,.card:focus-visible,.lightbox button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,22,38,.94);display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:8px;padding:56px 12px 24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:grid;gap:10px;justify-items:center;max-height:100%}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:6px;background:var(--navy)}
.lightbox figcaption{background:none;color:var(--on-dark);font-size:var(--s-sm);justify-content:center;text-align:center}
.lightbox button{background:rgba(56,198,217,.12);color:var(--on-dark);border:1px solid var(--line-dark);border-radius:50%;width:48px;height:48px;font-size:1.75rem;line-height:1;cursor:pointer}
.lightbox button:hover{background:var(--cyan);color:var(--deep)}
.lb-close{position:absolute;top:10px;inset-inline-end:12px}
[dir=rtl] .lb-prev,[dir=rtl] .lb-next{transform:scaleX(-1)}
@media (max-width:600px){.lightbox{grid-template-columns:1fr;padding:60px 8px 80px}.lb-prev,.lb-next{position:absolute;bottom:16px}.lb-prev{inset-inline-start:calc(50% - 60px)}.lb-next{inset-inline-end:calc(50% - 60px)}}

/* back to top */
.to-top{position:fixed;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-dark);background:var(--deep);color:var(--cyan);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(4,28,47,.35);opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
.to-top.show{opacity:1;transform:none}
.to-top:hover{background:var(--cyan);color:var(--deep)}

/* reveal: content is visible by default; JS adds .rv-on only to elements below the fold, then animates them in */
.rv-on{translate:0 16px}
.rv-in{translate:0 0;transition:translate .7s cubic-bezier(.2,.7,.2,1)}

/* inline diagrams in insights */
.diagram{margin:24px 0 30px;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{border-top:1px solid var(--line)}

/* Arabic: no tracking, no forced capitals */
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] .eyebrow,[dir=rtl] .label,[dir=rtl] .crumbs,[dir=rtl] .mm-panel .mm-h,[dir=rtl] .foot-grid .h4,[dir=rtl] .toc .h4,[dir=rtl] .calc label,[dir=rtl] .contact-lines span,[dir=rtl] .toc h4{text-transform:none}

/* never scroll sideways */
html,body{overflow-x:clip}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.ph-device path,.ph-device circle,.ph-device rect{stroke-dashoffset:0}.rv-on{translate:none}}
/* home hero scene */
.hero:not(.hero-live){background:var(--deep) url(img/home/hero-static-1600.jpg) right center/cover no-repeat}
[dir=rtl] .hero::after{background:linear-gradient(270deg,rgba(4,28,47,.96) 0%,rgba(4,28,47,.82) 45%,rgba(4,28,47,.2) 100%)}
@media (max-width:760px){.hero::after{background:linear-gradient(180deg,rgba(4,28,47,.35) 0%,rgba(4,28,47,.88) 55%,rgba(4,28,47,.97) 100%)!important}.hero>.wrap{padding-top:clamp(230px,60vw,290px)}}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.h4{font-size:var(--s-md)}
/* hero: keep the scene clear of the text shade; interactive legend */
.hero::after{background:linear-gradient(90deg,rgba(4,28,47,.97) 0%,rgba(4,28,47,.9) 34%,rgba(4,28,47,0) 56%)}
[dir=rtl] .hero::after{background:linear-gradient(270deg,rgba(4,28,47,.97) 0%,rgba(4,28,47,.9) 34%,rgba(4,28,47,0) 56%)}
.hero-legend{position:absolute;z-index:2;inset-inline-end:max(20px,4vw);bottom:110px;display:flex;flex-wrap:wrap;gap:8px;max-width:min(560px,44vw);justify-content:flex-end}
.hero-legend[hidden]{display:none}
.hero-legend button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:var(--s-xs);font-weight:500;color:var(--on-dark);background:rgba(4,28,47,.72);border:1px solid var(--line-dark);border-radius:999px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(6px);transition:border-color .2s,background .2s}
.hero-legend button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.hero-legend button:hover,.hero-legend button[aria-pressed=true]{border-color:var(--cyan);background:rgba(56,198,217,.16)}
.hero-legend button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.hero-legend .reset{color:var(--on-dark-muted)}
@media (max-width:1060px){.hero-legend{bottom:100px;max-width:50vw}}
@media (max-width:760px){.hero-legend{display:none}}

/* ---------------------------------------------------------------- dark mode: follows the system until the visitor chooses */
:root[data-theme=dark]{--mist:#071E31;--paper:#0C2840;--ink:#E6F1F6;--line:#1D4561;--muted:#A3BBC8;--blue:#5BBFE0;--fg-strong:#F2F7F9;--tint-coral:#2B2430;--coral-text:#FF9C80;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--mist:#071E31;--paper:#0C2840;--ink:#E6F1F6;--line:#1D4561;--muted:#A3BBC8;--blue:#5BBFE0;--fg-strong:#F2F7F9;--tint-coral:#2B2430;--coral-text:#FF9C80;color-scheme:dark}}
.theme-btn{background:none;border:1px solid var(--line-dark);color:var(--on-dark);border-radius:var(--r);width:38px;height:38px;display:grid;place-items:center;cursor:pointer;margin-inline-start:4px;flex-shrink:0}
.theme-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.theme-btn .i-sun{display:none}
:root[data-theme=dark] .theme-btn .i-sun{display:block}:root[data-theme=dark] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-btn .i-sun{display:block}:root:not([data-theme=light]) .theme-btn .i-moon{display:none}}

/* reading progress */
.has-ring{position:relative}
.pring,.brand .pring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.brand.has-ring{padding:4px 8px;margin:-4px -8px}
.pring rect{fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .3s}
.ring-on>.pring rect{opacity:1}
[dir=rtl] .pring{transform:scaleX(-1)}
@media (max-width:1199px){.nav .has-ring>.pring{display:none}}
/* spotlight that follows the pointer, with a gentle tilt */
.fx{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .2s ease,border-color .15s ease;background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(56,198,217,0)),transparent 70%)}
.fx:hover{--spot:rgba(56,198,217,.12)}
.dark-band .fx:hover,.promise .fx:hover{--spot:rgba(56,198,217,.16)}
/* process timeline fills as you scroll */
.steps{position:relative}
.steps::after{content:"";position:absolute;top:0;inset-inline-start:0;height:2px;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,var(--cyan),var(--coral));pointer-events:none}
[dir=rtl] .steps::after{background:linear-gradient(270deg,var(--cyan),var(--coral))}
.steps li::before{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.steps li.on::before{transform:scale(1.12)}
@media (max-width:900px){.steps::after{display:none}}
@media (prefers-reduced-motion:reduce){.fx{transform:none}}
.form-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------------------------------------------------------------- security layer (fx.js) */
.sec-layer{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:40;overflow:hidden}
.sec-layer .dev{position:absolute;overflow:visible}
.cam .cam-back{fill:#041C2F;stroke:rgba(56,198,217,.35);stroke-width:1}
.cam .cam-ring{stroke:#E6F1F6}
.cam .cam-dot{fill:#FF7A59}
.cam .cam-cone{opacity:.75;transition:opacity .3s}
.cam .cam-rec{fill:#E5484D;opacity:0}
.cam.lock .cam-cone{opacity:1;filter:brightness(1.35)}
.cam.lock .cam-rec{animation:rec 1s steps(2) infinite}
@keyframes rec{50%{opacity:1}}
.beam .bm-line{stroke:#38C6D9;stroke-width:1.5;stroke-dasharray:2 7;opacity:.45}
.beam .bm-post{fill:#062B47;stroke:rgba(56,198,217,.5);stroke-width:1}
.beam .bm-led{fill:#3BB273}
.beam .bm-siren{fill:#FF7A59;opacity:0}
.beam.alarm .bm-line{stroke:#E5484D;opacity:1;stroke-dasharray:none;stroke-width:2}
.beam.alarm .bm-led{fill:#E5484D}
.beam.alarm .bm-siren{animation:siren .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px #FF3B30) drop-shadow(0 0 16px #FF3B30)}
@keyframes siren{from{opacity:.25}to{opacity:1}}
.pir .pir-body{fill:#E6F1F6;stroke:#062B47;stroke-width:1}
.pir .pir-led{fill:#3BB273}
.pir .pir-arc{fill:none;stroke:#38C6D9;stroke-width:1.5;stroke-dasharray:3 4;opacity:0;transition:opacity .2s}
.pir.on .pir-led{fill:#E5484D;animation:rec .4s steps(2) infinite}
.pir.on .pir-arc{opacity:.7}
@media (max-width:759px){.sec-layer .cam .cam-cone{opacity:.45}}
/* whole-site alarm when an "intruder" is detected */
html.alarm body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;box-shadow:inset 0 0 0 4px rgba(229,72,77,.9),inset 0 0 120px 30px rgba(229,72,77,.45);animation:alarmflash .8s ease-in-out 4}
@keyframes alarmflash{0%,100%{opacity:.15}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.beam.alarm .bm-siren{animation:none;opacity:1}.cam.lock .cam-rec{animation:none;opacity:1}html.alarm body::after{animation:none}}

/* ---------------------------------------------------------------- quick request window */
.qr{position:fixed;inset:0;z-index:100;background:rgba(3,22,38,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.qr[hidden]{display:none}
.qr-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:14px;padding:28px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.45);border-top:4px solid var(--coral)}
.qr-x{position:absolute;top:10px;inset-inline-end:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font-size:1.5rem;cursor:pointer}
.qr h2{font-size:var(--s-xl);font-weight:800;margin-bottom:6px;padding-inline-end:40px}
.qr-sub{color:var(--muted);font-size:var(--s-sm);margin:0 0 16px}
.qr form{display:grid;gap:12px}
.qr label{display:grid;gap:5px;font-size:var(--s-sm);font-weight:500}
.qr input,.qr select,.qr textarea{font:inherit;font-size:var(--s-md);border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--mist);color:var(--ink);width:100%}
.qr-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.qr-row{grid-template-columns:1fr}}
.qr-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.qr-st{font-size:var(--s-sm);color:var(--fg-strong);min-height:1.4em;margin:0}
.qr-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:#fff;background:#E5484D;border-radius:4px;padding:4px 10px;margin:0 0 10px;animation:rec 1s steps(2) 6}
.qr.caught .qr-box{border-top-color:var(--cyan)}
@media (prefers-reduced-motion:reduce){.qr.caught .qr-box,.qr-tag{animation:none}}

/* ---------------------------------------------------------------- documents page */
.docs-h{font-size:var(--s-xl);font-weight:800;margin:34px 0 14px}
.docs-h:first-child{margin-top:0}
.docs-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.doc{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.doc b{display:block;font-size:var(--s-md)}
.doc span{display:block;color:var(--muted);font-size:var(--s-sm)}
.doc small{color:var(--muted);font-size:var(--s-xs)}
.doc-ic{width:40px;height:40px;background:var(--mist);border-radius:10px;position:relative}
.doc-ic::after{content:"";position:absolute;inset:8px;border:2.4px solid var(--fg-strong);border-radius:50%;clip-path:polygon(0 0,62% 0,50% 50%,100% 38%,100% 100%,0 100%)}
.doc-ic::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--coral);top:9px;inset-inline-end:9px}
@media (max-width:600px){.doc{grid-template-columns:auto 1fr}.doc .btn{grid-column:1/-1;justify-self:start}}
.docs-empty{background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:22px;color:var(--muted)}
.docs-more{margin-top:26px}
.nav>a,.head-cta{white-space:nowrap}

/* ---------------------------------------------------------------- full light mode (html.lt): header, heroes and bands turn light too */
.lk-l{display:none}
.lt .site-head .lk-d{display:none}.lt .site-head .lk-l{display:block}
.lt{--on-dark:#0A2236;--on-dark-muted:#4E6577;--line-dark:rgba(6,43,71,.14)}
.lt .site-foot,.lt .lightbox,.lt .to-top{--on-dark:#E6F1F6;--on-dark-muted:#9DB6C6;--line-dark:rgba(56,198,217,.18)}
.lt .site-head{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(6,43,71,.06)}
.lt .mm-panel{background:#fff;box-shadow:0 24px 60px rgba(6,43,71,.18)}
.lt .mm-panel .mm-h,.lt .hero .eyebrow,.lt .page-hero .eyebrow,.lt .dark-band .label,.lt .cta-band .label{color:var(--blue)}
.lt .nav>a:hover,.lt .nav .mm>button:hover,.lt .nav>a[aria-current],.lt .mm-panel a:hover{color:var(--blue)}
@media (max-width:1199px){.lt .nav{background:#fff}}
.lt .btn-ghost{border-color:rgba(6,43,71,.3)}
.lt .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.lt .hero{background:linear-gradient(180deg,#F4F9FB,#E6F0F5)}
.lt .hero::after{background:linear-gradient(90deg,rgba(244,249,251,.97) 0%,rgba(244,249,251,.9) 34%,rgba(244,249,251,0) 56%)}
[dir=rtl].lt .hero::after,.lt[dir=rtl] .hero::after{background:linear-gradient(270deg,rgba(244,249,251,.97) 0%,rgba(244,249,251,.9) 34%,rgba(244,249,251,0) 56%)}
@media (max-width:760px){.lt .hero::after{background:linear-gradient(180deg,rgba(244,249,251,.3) 0%,rgba(244,249,251,.88) 55%,rgba(244,249,251,.97) 100%)!important}}
.lt .hero h1 em{color:var(--blue)}
.lt .hero-strip{background:rgba(255,255,255,.75)}
.lt .hero-strip b{color:var(--navy)}
.lt .hero-legend button{background:rgba(255,255,255,.85)}
.lt .hero-legend button:hover,.lt .hero-legend button[aria-pressed=true]{border-color:var(--blue);background:#E3F2F8}
.lt .page-hero{background:linear-gradient(180deg,#F4F9FB,#E6F0F5)}
.lt .page-hero .ph-shade{background:linear-gradient(90deg,rgba(244,249,251,.97) 0%,rgba(244,249,251,.9) 42%,rgba(244,249,251,.35) 100%)}
.lt[dir=rtl] .page-hero .ph-shade{background:linear-gradient(270deg,rgba(244,249,251,.97) 0%,rgba(244,249,251,.9) 42%,rgba(244,249,251,.35) 100%)}
@media (max-width:760px){.lt .page-hero .ph-shade{background:rgba(244,249,251,.9)}}
.lt .page-hero .ph-device.bi{color:var(--blue)}
.lt .chip{background:#fff}
.lt .dark-band,.lt .cta-band{background:#E8F1F5}
.lt .dark-band h2[style],.lt .cta-band h2{color:var(--ink)!important}
.lt .promise h3{color:var(--ink)}
.lt .calc,.lt .ask{background:#E8F1F5;color:var(--ink)}
.lt .calc h3{color:var(--ink)}
.lt .calc input,.lt .calc select{background:#fff;color:var(--ink);color-scheme:light}
.lt .calc-out b{color:var(--blue)}
/* the theme switch is a power-source switch: solar by day, generator/CBS by night */
html.power-switch body{animation:power .7s steps(1) 1}
@keyframes power{0%{filter:none}12%{filter:brightness(.35)}24%{filter:none}36%{filter:brightness(.55)}48%{filter:none}}
.power-toast{position:fixed;z-index:95;bottom:84px;inset-inline-start:50%;transform:translateX(-50%);background:var(--deep);color:#E6F1F6;border:1px solid rgba(56,198,217,.35);border-radius:999px;padding:10px 18px;font-size:var(--s-sm);display:flex;gap:10px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:ptin .3s ease}
[dir=rtl] .power-toast{transform:translateX(50%)}
@keyframes ptin{from{opacity:0;translate:0 10px}}
@media (prefers-reduced-motion:reduce){html.power-switch body,.power-toast{animation:none}}
/* mega menus open centred under the whole header, so they never run off the screen (also in Arabic) */
@media (min-width:1061px){.head-row{position:relative}.mm{position:static}.mm-panel{top:calc(100% - 4px);max-width:min(1100px,calc(100vw - 32px))}}
/* back to the previous page */
.crumb-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:22px}
.crumb-row .crumbs{margin-bottom:0}
.back{display:inline-flex;align-items:center;gap:6px;font-size:var(--s-sm);font-weight:700;color:var(--on-dark);text-decoration:none;border:1px solid var(--line-dark);border-radius:999px;padding:6px 14px 6px 10px;background:rgba(56,198,217,.08)}
.back:hover{border-color:var(--cyan);color:var(--cyan)}
.lt .back{background:#fff}.lt .back:hover{border-color:var(--blue);color:var(--blue)}
[dir=rtl] .back svg{transform:scaleX(-1)}
.nav-tool{position:relative}
.nav-tool::after{content:"";position:absolute;top:8px;inset-inline-end:4px;width:6px;height:6px;border-radius:50%;background:var(--coral)}
.form details.more summary{cursor:pointer;color:var(--blue);font-size:var(--s-sm);font-weight:700;padding:4px 0}
.form details.more[open] summary{margin-bottom:12px}
.lt .hero-legend [data-k=wifi] i{background:#9DB6C6}

/* ---------------------------------------------------------------- live chat */
.chat-fab{position:fixed;z-index:61;inset-inline-start:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--coral);color:var(--deep);font:inherit;font-weight:700;font-size:var(--s-sm);padding:12px 18px;cursor:pointer;box-shadow:0 10px 26px rgba(4,28,47,.3)}
.chat-fab:hover{background:#ff8f73}
.chat-fab:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.chat-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:22px;height:22px;border-radius:11px;background:#E5484D;color:#fff;font-style:normal;font-size:12px;display:grid;place-items:center;padding:0 6px}
.chat-badge[hidden]{display:none}
@media (max-width:600px){.chat-fab span{display:none}.chat-fab{padding:13px}}
.chat{position:fixed;z-index:96;inset-inline-start:18px;bottom:84px;width:min(370px,calc(100vw - 36px));max-height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:16px;box-shadow:0 30px 70px rgba(4,28,47,.35);overflow:hidden;border:1px solid var(--line)}
.chat[hidden]{display:none}
.chat-head{display:flex;gap:12px;align-items:flex-start;background:var(--deep);color:#E6F1F6;padding:14px 14px 14px 16px}
.chat-head b{display:block;font-size:var(--s-md)}
.chat-head small{display:block;color:#9DB6C6;font-size:var(--s-xs);line-height:1.45}
.chat-ring{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:3px solid #E6F1F6;clip-path:polygon(0 0,62% 0,50% 50%,100% 38%,100% 100%,0 100%);position:relative;margin-top:2px}
.chat-x{margin-inline-start:auto;flex-shrink:0;background:none;border:1px solid rgba(230,241,246,.3);color:#E6F1F6;border-radius:50%;width:34px;height:34px;font-size:1.3rem;cursor:pointer}
.chat-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:60px;background:var(--mist)}
.chat-log:empty{display:none}
.msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:var(--s-sm);line-height:1.5;word-wrap:break-word}
.msg small{display:block;font-size:.7rem;font-weight:700;opacity:.7;margin-bottom:2px}
.msg.me{align-self:flex-end;background:var(--deep);color:#E6F1F6;border-end-end-radius:4px}
.msg.them{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-end-start-radius:4px}
.chat form{display:grid;gap:8px;padding:12px}
.chat form[hidden]{display:none}
.chat input,.chat textarea{font:inherit;font-size:var(--s-sm);border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--mist);color:var(--ink);width:100%;resize:none}
.chat-send{grid-template-columns:1fr auto;align-items:end}
.chat-st{margin:0;padding:0 12px 10px;font-size:var(--s-xs);color:var(--muted)}
.chat-st:empty{display:none}
.page-hero .ph-day{display:none}
.lt .page-hero .ph-day{display:block}
.lt .page-hero .ph-night{display:none}
.lt .page-hero .ph-shade{background:linear-gradient(90deg,rgba(244,249,251,.96) 0%,rgba(244,249,251,.82) 40%,rgba(244,249,251,.05) 100%)}
.lt[dir=rtl] .page-hero .ph-shade{background:linear-gradient(270deg,rgba(244,249,251,.96) 0%,rgba(244,249,251,.82) 40%,rgba(244,249,251,.05) 100%)}
/* phones: a lighter security layer (fx.js mounts fewer devices), small and faint so it never covers text */
@media (max-width:759px){.sec-layer .cam-sm{transform:scale(.62)}.sec-layer .cam-sm .cam-cone{opacity:.22}.sec-layer .beam .bm-line{opacity:.3}}

/* ---------------------------------------------------------------- home hero video (hero-video.js)
   Background = the video's own edge colour (night #052943, day #F2F6FA), and the video fades out at the top and
   bottom, so no "video rectangle" shows. The shade protects the text side only; the building stays clear. */
.hero.has-video{background:#052943}
.lt .hero.has-video{background:#F2F6FA}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%)}
.hero-media img:not([src]){visibility:hidden}
.hero-media video{opacity:0;transition:opacity .7s ease}
.hero-media video.on{opacity:1}
.hero.has-video::after{background:linear-gradient(90deg,rgba(5,41,67,.95) 0%,rgba(5,41,67,.88) 34%,rgba(5,41,67,.5) 46%,rgba(5,41,67,0) 58%)}
[dir=rtl] .hero.has-video::after{background:linear-gradient(270deg,rgba(5,41,67,.95) 0%,rgba(5,41,67,.88) 34%,rgba(5,41,67,.5) 46%,rgba(5,41,67,0) 58%)}
.lt .hero.has-video::after{background:linear-gradient(90deg,rgba(242,246,250,.96) 0%,rgba(242,246,250,.9) 34%,rgba(242,246,250,.5) 46%,rgba(242,246,250,0) 58%)}
.lt[dir=rtl] .hero.has-video::after{background:linear-gradient(270deg,rgba(242,246,250,.96) 0%,rgba(242,246,250,.9) 34%,rgba(242,246,250,.5) 46%,rgba(242,246,250,0) 58%)}
.hero.has-video .hero-strip{background:rgba(5,41,67,.78)}
.lt .hero.has-video .hero-strip{background:rgba(255,255,255,.8)}
/* phones and portrait screens: the 4:5 video sits under the text, its quiet top blending into the headline area */
@media (max-width:860px){
  .hero.has-video>.wrap{padding-top:32px;padding-bottom:0}
  .hero.has-video .hero-media{position:relative;inset:auto;width:100%;aspect-ratio:4/5;margin-top:-30vw}
  .hero.has-video .hero-media img,.hero.has-video .hero-media video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 92%,transparent 100%)}
  .hero.has-video::after,.lt .hero.has-video::after,[dir=rtl] .hero.has-video::after,.lt[dir=rtl] .hero.has-video::after{background:none!important}
}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}}
/* desktop: the video area starts a little away from the text side, so the building never sits under the copy;
   its inner edge fades into the matching background colour */
@media (min-width:861px){
  .hero.has-video .hero-media{inset:0 0 0 14%}
  [dir=rtl] .hero.has-video .hero-media{inset:0 14% 0 0}
  .hero.has-video .hero-media img,.hero.has-video .hero-media video{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 14%);
    mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(90deg,transparent 0,#000 14%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  [dir=rtl] .hero.has-video .hero-media img,[dir=rtl] .hero.has-video .hero-media video{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(270deg,transparent 0,#000 14%);
    mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 86%,transparent 100%),linear-gradient(270deg,transparent 0,#000 14%)}
  .hero.has-video .lede{max-width:27.5rem}
}

/* interactive site scene (hero.js) in its own band under the video hero: system buttons, fence alarm, cameras that
   track the visitor; the band uses the video's edge colour so the two read as one piece */
.scene-sec{position:relative;background:#052943;border-bottom:1px solid var(--line-dark);height:clamp(460px,46vw,640px);overflow:hidden}
.lt .scene-sec{background:#F2F6FA;border-bottom-color:var(--line)}
.scene-sec canvas{position:absolute;inset:0;width:100%;height:100%}
.scene-sec .hero-legend{inset-inline:0;bottom:24px;margin-inline:auto;max-width:min(760px,calc(100% - 32px));justify-content:center}
@media (max-width:760px){
  .scene-sec{height:auto;display:flex;flex-direction:column}
  .scene-sec canvas{position:relative;inset:auto;height:auto;aspect-ratio:1/1;max-height:420px}
  .scene-sec .hero-legend{position:relative;inset:auto;display:flex;bottom:auto;padding:4px 16px 24px;max-width:none}
  .scene-sec .hero-legend[hidden]{display:none}
}

/* request windows: one per kind of request */
.qr-head{display:flex;gap:14px;align-items:flex-start;padding-inline-end:40px;margin-bottom:12px}
.qr-head h2{padding:0;margin:0 0 4px}
.qr-head .qr-sub{margin:0}
.qr-ic{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:var(--cyan)}
.qr-ic svg,.qr-int-i svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qr.caught .qr-ic{background:var(--navy);color:var(--cyan)}
.qr-topic{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px;padding:6px 6px 6px 12px;border-radius:999px;background:rgba(56,198,217,.14);font-size:var(--s-sm)}
[dir=rtl] .qr-topic{padding:6px 12px 6px 6px}
.qr-topic[hidden]{display:none}
.qr-topic button{width:26px;height:26px;border-radius:50%;border:0;background:none;color:inherit;font-size:1.1rem;cursor:pointer;line-height:1}
.qr-q{font-weight:700;font-size:var(--s-sm);margin:0 0 8px}
.qr-chipw{margin-bottom:12px}
.qr-chipw[hidden],.qr-intw[hidden],.qr-gw[hidden],.qr-me[hidden]{display:none}
.qr-chips{display:flex;flex-wrap:wrap;gap:8px}
.qr-chip{font:inherit;font-size:var(--s-sm);padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--mist);color:var(--ink);cursor:pointer;min-height:40px}
.qr-chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.qr-chip[aria-pressed=true]::before{content:"✓ "}
.qr-chip:focus-visible,.qr-int-i:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.qr-l input{font-size:1.05rem;padding:12px 14px}
.qr-l input[aria-invalid=true]{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.2)}
[dir=rtl] .qr-l input::placeholder{text-align:right}
.qr-gw{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qr-or{font-size:var(--s-xs);color:var(--muted)}
.qr-me{font-size:var(--s-sm);margin:0;color:var(--fg-strong)}
.qr-more summary{cursor:pointer;font-size:var(--s-sm);font-weight:700;color:var(--blue);padding:4px 0}
.qr-more[open]{display:grid;gap:8px}
.qr-fine{font-size:var(--s-xs);color:var(--muted);margin:0}
.qr-intw{margin-bottom:14px}
.qr-int{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qr-int-i{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1.5px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-size:var(--s-xs);font-weight:700;text-align:center;line-height:1.3;transition:border-color .2s,transform .2s}
.qr-int-i svg{color:var(--blue)}
.qr-int-i:hover{border-color:var(--coral);transform:translateY(-2px)}
.qr-sf{margin-top:10px}
.qr-sf input{width:100%}

/* site search */
.srch{position:fixed;inset:0;z-index:105;background:rgba(3,22,38,.72);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:min(12vh,90px) 14px 14px}
.srch[hidden]{display:none}
.srch-box{width:min(640px,100%);max-height:calc(100vh - 120px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.srch-f{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper)}
[dir=rtl] .srch-f{padding:10px 16px 10px 12px}
.srch-f svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
.srch-f input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.1rem;color:var(--ink);padding:10px 0;outline:none}
.srch-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font-size:1.4rem;cursor:pointer}
.srch-r{list-style:none;margin:0;padding:6px}
.srch-r a{display:grid;gap:3px;padding:12px 14px;border-radius:10px;color:var(--ink);text-decoration:none}
.srch-r a:hover,.srch-r a:focus-visible{background:var(--mist);outline:none}
.srch-r b{font-size:var(--s-md)}
.srch-r small{font-size:var(--s-xs);color:var(--muted);line-height:1.5}
.srch-none{padding:16px;margin:0;color:var(--muted);font-size:var(--s-sm)}
.srch-none[hidden]{display:none}
.lt .lang-menu{background:#fff;border-color:var(--line)}
.lt .lang-menu a{color:var(--ink)}
.srch-f input::-webkit-search-cancel-button,.qr-sf input::-webkit-search-cancel-button{display:none}
.qr-tag[hidden]{display:none}
.srch-note{margin:10px 12px 4px;padding:12px 14px;border-radius:10px;background:rgba(56,198,217,.12);border-inline-start:3px solid var(--cyan);font-size:var(--s-xs);line-height:1.55;color:var(--ink)}
.srch-note[hidden]{display:none}

/* ---------------------------------------------------------------- engineering standards strip */
.card .card-top{margin-top:4px;margin-bottom:8px}
.std-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:28px}
.std-card,.std-item{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;transition:border-color .2s ease,transform .2s ease}
.std-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.std-top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding-bottom:18px;margin-bottom:4px;border-bottom:1px dashed var(--line)}
.std-top .bi{width:40px;height:40px;color:var(--blue);flex-shrink:0}
.std-code{display:inline-block;font-family:var(--f-mono);font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--blue);background:rgba(56,198,217,.14);padding:6px 12px;border-radius:999px;line-height:1.2}
.std-card h3,.std-item h3{font-size:var(--s-md);font-weight:800;margin:0 0 4px 0;color:var(--fg-strong);line-height:1.4}
.std-card p,.std-item p{font-size:var(--s-xs);color:var(--muted);margin:0;line-height:1.7}
.std-scope{margin-top:26px;padding:22px 26px;border-radius:14px;background:var(--navy);color:#E6F1F6;border-inline-start:4px solid var(--coral);display:grid;gap:8px}
.lt .std-scope{background:#E8F1F5;color:var(--ink)}
.std-scope b{font-size:var(--s-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)}
.lt .std-scope b{color:var(--blue)}
.std-scope p{margin:0;font-size:var(--s-sm);line-height:1.65}

/* ---------------------------------------------------------------- smart ELV solution finder */
.finder-wrap{display:grid;grid-template-columns:1.22fr .98fr;gap:28px;align-items:start}
@media (max-width:960px){.finder-wrap{grid-template-columns:1fr}}
.finder-main{display:grid;gap:20px}
.finder-ai{background:rgba(4,28,47,.68);border:1.5px solid rgba(56,198,217,.3);border-radius:16px;padding:20px 22px;display:grid;gap:12px}
.lt .finder-ai{background:#fff;border-color:var(--line);box-shadow:0 8px 24px rgba(6,43,71,.05)}
.finder-ai label{font-size:var(--s-sm);font-weight:700;color:#fff}
.lt .finder-ai label{color:var(--ink)}
.finder-ai-row{display:flex;gap:10px}
@media (max-width:560px){.finder-ai-row{flex-direction:column}}
.finder-ai-row input{flex:1;min-width:0;font:inherit;font-size:var(--s-sm);padding:12px 14px;border-radius:10px;border:1px solid var(--line-dark);background:rgba(3,18,32,.75);color:var(--on-dark)}
.lt .finder-ai-row input{background:var(--mist);border-color:var(--line);color:var(--ink)}
.finder-ai-row input:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.finder-ex{display:grid;gap:8px;padding-top:4px}
.finder-ex small{font-size:var(--s-xs);color:var(--on-dark-muted);font-weight:600}
.lt .finder-ex small{color:var(--muted)}
.finder-ex-list{display:flex;flex-wrap:wrap;gap:8px}
.f-ex-btn{font:inherit;font-size:.76rem;padding:6px 12px;border-radius:999px;border:1px dashed rgba(56,198,217,.4);background:rgba(56,198,217,.08);color:var(--cyan);cursor:pointer;text-align:start;transition:all .18s}
.lt .f-ex-btn{background:var(--mist);border-color:var(--line);color:var(--blue)}
.f-ex-btn:hover{background:rgba(56,198,217,.2);border-style:solid;color:#fff}
.lt .f-ex-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

.finder-steps{display:grid;gap:22px;background:rgba(4,28,47,.52);border:1px solid var(--line-dark);border-radius:16px;padding:24px}
.lt .finder-steps{background:#fff;border-color:var(--line);box-shadow:0 8px 24px rgba(6,43,71,.05)}
.finder-step{display:grid;gap:10px}
.finder-step + .finder-step{padding-top:18px;border-top:1px solid var(--line-dark)}
.lt .finder-step + .finder-step{border-top-color:var(--line)}
.finder-step-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.finder-q,.finder-step h3{font-size:var(--s-sm);font-weight:700;color:var(--cyan);margin:0}
.lt .finder-q,.lt .finder-step h3{color:var(--blue)}
.finder-reset{font:inherit;font-size:.75rem;font-weight:700;color:var(--on-dark-muted);background:none;border:1px solid var(--line-dark);border-radius:999px;padding:4px 10px;cursor:pointer;transition:all .15s}
.lt .finder-reset{color:var(--muted);border-color:var(--line)}
.finder-reset:hover{color:var(--coral);border-color:var(--coral)}
.finder-chips{display:flex;flex-wrap:wrap;gap:8px}
.f-chip{font:inherit;font-size:var(--s-xs);font-weight:700;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line-dark);background:rgba(3,18,32,.6);color:var(--on-dark);cursor:pointer;transition:border-color .18s,background .18s,transform .15s}
.lt .f-chip{background:var(--mist);border-color:var(--line);color:var(--ink)}
.f-chip:hover{border-color:var(--cyan);transform:translateY(-1px)}
.f-chip[aria-pressed=true]{background:var(--coral);border-color:var(--coral);color:var(--deep);box-shadow:0 4px 14px rgba(255,122,89,.25)}
.lt .f-chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.f-chip[aria-pressed=true]::before{content:"✓ ";font-weight:800}

.finder-out{background:rgba(3,20,35,.9);border:1.5px solid rgba(56,198,217,.4);border-radius:18px;padding:26px;display:grid;gap:18px;position:sticky;top:88px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.lt .finder-out{background:#fff;border-color:var(--line);box-shadow:0 18px 46px rgba(6,43,71,.1)}
.finder-out-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-dark)}
.lt .finder-out-head{border-bottom-color:var(--line)}
.finder-out h3{font-size:var(--s-lg);color:#fff;margin:0}
.lt .finder-out h3{color:var(--ink)}
.finder-badge{font-family:var(--f-mono);font-size:.74rem;font-weight:700;color:var(--deep);background:var(--cyan);padding:4px 11px;border-radius:999px}
.finder-tags{display:flex;flex-wrap:wrap;gap:8px}
.finder-tag{font-size:var(--s-xs);font-weight:700;color:var(--cyan);background:rgba(56,198,217,.12);border:1px solid rgba(56,198,217,.28);padding:5px 12px;border-radius:999px}
.lt .finder-tag{color:var(--blue);background:var(--mist);border-color:var(--line)}
.finder-out-grid{display:grid;gap:16px}
.finder-lbl{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px;font-weight:700}
.lt .finder-lbl{color:var(--blue)}
.finder-svc-link{display:block;padding:12px 16px;border-radius:12px;background:rgba(56,198,217,.12);border:1.5px solid rgba(56,198,217,.32);color:#fff;text-decoration:none;font-weight:700;font-size:var(--s-sm);line-height:1.45;transition:border-color .18s,transform .18s}
.lt .finder-svc-link{background:var(--mist);border-color:var(--line);color:var(--ink)}
.finder-svc-link:hover{border-color:var(--coral);transform:translateY(-1px)}
.finder-deliv{margin:0;padding:12px 15px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);font-size:var(--s-xs);color:var(--on-dark-muted);line-height:1.65}
.lt .finder-deliv{background:var(--mist);border-color:var(--line);color:var(--ink)}
.finder-sys-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0;padding:0}
.finder-sys-list a{display:flex;flex-direction:column;gap:3px;padding:10px 13px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);color:#fff;text-decoration:none;font-size:var(--s-xs);font-weight:700;transition:border-color .18s,background .18s}
.lt .finder-sys-list a{background:var(--mist);border-color:var(--line);color:var(--ink)}
.finder-sys-list a small{font-family:var(--f-mono);font-size:.68rem;color:var(--cyan);font-weight:600}
.lt .finder-sys-list a small{color:var(--blue)}
.finder-sys-list a:hover{border-color:var(--cyan);background:rgba(56,198,217,.12)}
.lt .finder-sys-list a:hover{border-color:var(--blue);background:#E3F2F8}
.finder-fire{margin:0;padding:12px 14px;border-radius:10px;background:rgba(255,122,89,.14);border-inline-start:3px solid var(--coral);font-size:var(--s-xs);line-height:1.6;color:var(--on-dark)}
.lt .finder-fire{color:var(--ink)}
.finder-fire[hidden]{display:none}
.finder-ai-note{margin:0;padding:12px 14px;border-radius:10px;background:rgba(56,198,217,.14);border-inline-start:3px solid var(--cyan);font-size:var(--s-xs);line-height:1.6;color:#fff}
.lt .finder-ai-note{color:var(--ink)}
.finder-ai-note[hidden]{display:none}
.finder-act,.finder-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px;border-top:1px solid var(--line-dark)}
.lt .finder-actions{border-top-color:var(--line)}
.finder-actions .btn-line{border-color:var(--cyan);color:var(--cyan)}
.lt .finder-actions .btn-line{border-color:var(--blue);color:var(--blue)}
.finder-actions .btn-line:hover{background:var(--cyan);color:var(--deep)}
.lt .finder-actions .btn-line:hover{background:var(--navy);color:#fff}

/* home headline: rotating services */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero h1.hero-rot{max-width:16ch}
.rot{display:grid;color:var(--cyan)}
.lt .rot{color:var(--blue)}
.rot-i{grid-area:1/1;opacity:0;transform:translateY(.45em);filter:blur(8px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .6s ease;will-change:transform,opacity}
.rot-i.on{opacity:1;transform:none;filter:none}
.rot-i.out{opacity:0;transform:translateY(-.45em);filter:blur(8px)}
.hero h1.hero-rot em{display:block;color:inherit;font-style:normal}
.rot-i::after{content:"";display:block;height:3px;width:0;margin-top:.12em;border-radius:2px;background:var(--coral);transition:width 2.6s linear}
.rot-i.on::after{width:2.2em}
@media (prefers-reduced-motion:reduce){.rot-i{transition:none}.rot-i::after{display:none}}
.hero h1.hero-rot{max-width:19ch}
.rot{font-size:.82em;line-height:1.15;margin-bottom:.12em}
.rot-i{align-self:end}
.rot-i::after{height:3px;margin-top:.18em}

/* engage.js: search hint (no blur), welcome back, CCTV monitor */
.search-btn.pulse{position:relative;border-color:var(--coral);color:var(--coral)}
.search-btn.pulse::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px solid var(--coral);animation:spulse 1.4s ease-out infinite}
@keyframes spulse{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.5)}}
.shint{position:fixed;z-index:80;width:320px;max-width:calc(100vw - 20px);background:var(--paper);color:var(--ink);border-radius:14px;padding:16px 16px 14px;box-shadow:0 18px 50px rgba(4,28,47,.35);border-top:3px solid var(--coral);display:grid;gap:6px;animation:pop .25s ease}
.shint::before{content:"";position:absolute;top:-9px;left:calc(var(--ax,50%) - 8px);width:16px;height:16px;background:var(--coral);transform:rotate(45deg);border-radius:3px;z-index:-1}
.shint b{font-size:var(--s-md);padding-inline-end:30px}
.shint small{color:var(--muted);font-size:var(--s-xs)}
.shint form{display:flex;gap:8px;margin-top:4px}
.shint input{flex:1;min-width:0;font:inherit;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--mist);color:var(--ink)}
.shint .btn{padding:9px 14px}
.shint-x{position:absolute;top:8px;inset-inline-end:8px;width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--ink);font-size:1.3rem;cursor:pointer}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qr-langs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:var(--s-sm)}
.qr-langs span{font-weight:700}
.qr-langs a{padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none}
.qr-langs a[aria-current]{border-color:var(--navy);background:var(--navy);color:#fff}
.qr.back .qr-box{border-top-color:var(--cyan)}
.cctv-mon{position:fixed;z-index:75;bottom:24px;inset-inline-start:24px;inset-inline-end:auto;display:inline-flex;align-items:center;gap:10px;background:rgba(3,20,34,.94);color:#CFE7F0;border:1px solid rgba(56,198,217,.45);border-radius:999px;padding:7px 16px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.45);backdrop-filter:blur(10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.cctv-mon.out{opacity:0;transform:translateY(8px)}
.cctv-mon[hidden]{display:none}
.cm-h{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em}
.cm-h b{color:#fff}
.cm-h span:not(.cm-rec){color:#FF9B85;flex:1}
.cm-h button{width:26px;height:26px;border:0;border-radius:50%;background:none;color:#CFE7F0;font-size:1.1rem;cursor:pointer}
.cm-rec{color:#fff;background:#E5484D;border-radius:3px;padding:1px 5px;animation:rec 1s steps(2) infinite}
.cm-v{position:relative;height:70px;margin:8px 0 6px;border-radius:6px;background:linear-gradient(rgba(56,198,217,.08) 1px,transparent 1px) 0 0/100% 14px,linear-gradient(90deg,rgba(56,198,217,.08) 1px,transparent 1px) 0 0/14px 100%,#06243A;overflow:hidden}
.cm-v i{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid #FF7A59;border-radius:4px;transition:left .15s linear,top .15s linear;box-shadow:0 0 12px rgba(255,122,89,.6)}
.cm-v .cm-cross{position:absolute;inset:0;background:linear-gradient(transparent 49.5%,rgba(255,255,255,.12) 50%,transparent 50.5%),linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.12) 50%,transparent 50.5%)}
.cm-p{margin:0;font-family:var(--f-mono);font-size:11px;color:#9FC3D1}
.cm-a{margin-top:6px;border-top:1px dashed rgba(56,198,217,.3);padding-top:6px}
.cm-a b{color:#38C6D9;font-size:11.5px}
.cm-t{margin:4px 0 0;white-space:pre-line;color:#E6F1F6;min-height:4.5em}
.cm-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.cm-act[hidden]{display:none}
.cm-act span{font-size:11px;color:#9FC3D1}
.cm-act .btn{padding:7px 12px;font-size:12.5px}
.cm-priv{display:block;margin-top:6px;color:#7FA3B2;font-size:10.5px}
@media (prefers-reduced-motion:reduce){.search-btn.pulse::after,.cm-rec{animation:none}}
.msg.ai{border-color:rgba(56,198,217,.6)}
.msg.ai small::before{content:"✦ ";color:var(--cyan)}
.msg.typing span{display:inline-block;animation:tblink 1.2s ease-in-out infinite}
@keyframes tblink{50%{opacity:.35}}
/* hero video on large screens: the whole frame shows (no zoom or crop); its edges are the hero colour, so it
   blends in; it sits on the side away from the text */
@media (min-width:861px){
  .hero.has-video .hero-media img,.hero.has-video .hero-media video{object-fit:contain;object-position:100% 50%}
  [dir=rtl] .hero.has-video .hero-media img,[dir=rtl] .hero.has-video .hero-media video{object-position:0 50%}
}
/* the chat button sits in the corner away from the reading start and the hero buttons; back-to-top and the
   CCTV monitor take the other corner */
.chat-fab{inset-inline-start:auto;inset-inline-end:18px}
.chat{inset-inline-start:auto;inset-inline-end:18px}
.to-top{inset-inline-end:auto;inset-inline-start:18px}


/* --- restored after the Antigravity update --- */
.hero.has-video::after{display:block}
.hero.has-video::before{opacity:.6}
/* CCTV monitor picture: a magnified copy of the page around the pointer, with a camera look */
.cctv-mon{position:fixed;z-index:75;bottom:84px;inset-inline-start:auto;inset-inline-end:18px;width:340px;max-width:calc(100vw - 36px);display:block;background:rgba(3,20,34,.94);color:#CFE7F0;border:1px solid rgba(56,198,217,.45);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.5;box-shadow:0 18px 50px rgba(0,0,0,.45);backdrop-filter:blur(6px);animation:pop .25s ease;transition:opacity .3s,transform .3s}
.cctv-mon.out{opacity:0;transform:translateY(8px)}
.cm-v{height:170px;background:#06243A;isolation:isolate;position:relative;margin:8px 0 6px;border-radius:6px;overflow:hidden}
.cm-feed{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;transition:transform .12s linear;filter:saturate(.55) contrast(1.08) brightness(.92);z-index:0}
[dir=rtl] .cm-feed{direction:rtl}
.cm-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.cm-v .cm-box{position:absolute;z-index:3;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid #FF7A59;border-radius:4px;box-shadow:0 0 12px rgba(255,122,89,.6)}
.cm-cur{position:absolute;z-index:4;left:50%;top:50%;width:22px;height:22px;margin:-3px 0 0 -5px;fill:#fff;stroke:#041C2F;stroke-width:1.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.cm-ts{position:absolute;z-index:4;bottom:4px;inset-inline-end:6px;font-family:var(--f-mono);font-size:10px;color:#fff;text-shadow:0 1px 2px #000;direction:ltr}
.cm-h{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em}
.cm-h b{color:#fff}
.cm-h span:not(.cm-rec){color:#FF9B85;flex:1}
.cm-h button{width:26px;height:26px;border:0;border-radius:50%;background:none;color:#CFE7F0;font-size:1.1rem;cursor:pointer}
.cm-p{margin:0;font-family:var(--f-mono);font-size:11px;color:#9FC3D1}
.cm-on{margin:2px 0 0;color:#FFD3C7;font-size:12px}
.cm-on:empty{display:none}
.cm-a{margin-top:6px;border-top:1px dashed rgba(56,198,217,.3);padding-top:6px}
.cm-a b{color:#38C6D9;font-size:11.5px}
.cm-t{margin:4px 0 0;white-space:pre-line;color:#E6F1F6;min-height:4.5em}
.cm-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.cm-act[hidden]{display:none}
.cm-act span{font-size:11px;color:#9FC3D1}
.cm-act .btn{padding:7px 12px;font-size:12.5px}
.cm-priv{display:block;margin-top:6px;color:#7FA3B2;font-size:10.5px}
/* header: the search button sits outside the folding menu, so phones keep it */
.search-btn{order:3}
.nav{order:2}
@media (max-width:1199px){.search-btn{margin-inline-start:auto}.menu-btn{margin-inline-start:8px;order:4}}

/* ---------------------------------------------------------------- guide dialogs and the four-screen CCTV monitor */
.eg{position:fixed;z-index:98;inset-inline:0;margin-inline:auto;bottom:22px;width:min(392px,calc(100vw - 24px));background:var(--paper);color:var(--ink);border-radius:16px;padding:16px 16px 12px;box-shadow:0 24px 70px rgba(3,22,38,.42);border-top:3px solid var(--cyan);display:grid;gap:12px;opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s}
.eg.in{opacity:1;transform:none}
.eg.out{opacity:0;transform:translateY(14px)}
.eg-x{position:absolute;top:8px;inset-inline-end:8px;width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--ink);font-size:1.4rem;cursor:pointer}
.eg-h{display:flex;gap:11px;align-items:center;padding-inline-end:30px}
.eg-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--navy);color:var(--cyan);display:grid;place-items:center}
.eg-ic svg,.eg-chip svg,.eg-s button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eg-h b{display:block;font-size:var(--s-md);line-height:1.3}
.eg-h small{display:block;color:var(--muted);font-size:var(--s-xs);line-height:1.4;margin-top:2px}
.eg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.eg-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;padding:8px 4px;border:1.5px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);font-size:12px;font-weight:700;text-align:center;line-height:1.25;transition:border-color .2s,transform .2s}
.eg-chip svg{color:var(--blue)}
.eg-chip:hover,.eg-chip:focus-visible{border-color:var(--coral);transform:translateY(-1px);outline:none}
.eg-s{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--mist)}
.eg-s input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--s-sm);color:var(--ink);padding:10px 12px;outline:none}
.eg-s button{flex:none;width:44px;border:0;background:var(--navy);color:#fff;cursor:pointer;display:grid;place-items:center}
.eg-c{display:flex;gap:8px}
.eg-c input{flex:1;min-width:0;font:inherit;font-size:var(--s-sm);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--mist);color:var(--ink)}
.eg-c input[aria-invalid=true]{border-color:#E5484D}
.eg-c .btn{padding:10px 16px}
.eg-st{margin:0;font-size:12px;color:var(--fg-strong)}
.eg-st:empty{display:none}
.eg-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:9px}
.eg-l a{padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.eg-l a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.eg-acts{display:flex;gap:8px}
.eg-acts .btn{flex:1;justify-content:center;padding:11px 10px}
.eg .btn-ghost{border-color:var(--line);color:var(--ink)}
.eg-done .eg-grid,.eg-done .eg-s,.eg-done .eg-c{display:none}
@media (max-width:520px){.eg{inset-inline:8px;margin:0;bottom:8px;width:auto}}
@media (prefers-reduced-motion:reduce){.eg{transition:none}}
/* the monitor */
.cctv-mon.cm4{width:316px;padding:8px 10px;bottom:84px}
.cm4 .cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:6px 0 4px}
.cm4 .cm-cell{position:relative;aspect-ratio:16/10;background:#06243A;border-radius:5px;overflow:hidden;border:1px solid rgba(56,198,217,.25);transition:opacity .35s,border-color .3s,filter .3s}
.cm4 .cm-vp{position:absolute;inset:0;overflow:hidden}
.cm4 .cm-cell::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
.cm4 .cm-lab{position:absolute;left:4px;top:3px;z-index:3;font:600 9px var(--f-mono);color:#fff;text-shadow:0 1px 2px #000;direction:ltr}
.cm4 .cm-ts{position:absolute;right:4px;bottom:2px;z-index:3;font:9px var(--f-mono);color:#fff;text-shadow:0 1px 2px #000;direction:ltr}
.cm4 .cm-box{display:none;position:absolute;z-index:3;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid #FF7A59;border-radius:3px;box-shadow:0 0 10px rgba(255,122,89,.7)}
.cm4 .cm-cur{display:none;position:absolute;z-index:4;left:50%;top:50%;width:15px;height:15px;margin:-2px 0 0 -4px;fill:#fff;stroke:#041C2F;stroke-width:1.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.cm4 .cm-cell.on .cm-box,.cm4 .cm-cell.on .cm-cur{display:block}
.cm4 .cm-cell.on{border-color:#FF7A59;box-shadow:0 0 10px rgba(255,122,89,.45)}
.cm4 .cm-cell.off{opacity:.42;filter:grayscale(1)}
.cm4 .cm-cell.scan::before{content:"";position:absolute;left:0;right:0;height:2px;z-index:3;background:rgba(56,198,217,.75);animation:cmsweep 1.2s linear infinite}
@keyframes cmsweep{from{top:0}to{top:100%}}
.cm4 .cm-p{font-size:10px;margin:2px 0 0;min-height:1.4em}
.cm4 .cm-a[hidden],.cm4 .cm-act[hidden]{display:none}
.cm4 .cm-a{margin-top:4px;padding-top:5px}
.cm4 .cm-t{font-size:11.5px;min-height:3.6em;margin:3px 0 0}
.cm4 .cm-act{margin-top:6px}
.cm4 .cm-act .btn{padding:6px 12px;font-size:12px}
.cm4 .cm-priv{margin-top:5px;font-size:10px}
@media (prefers-reduced-motion:reduce){.cm4 .cm-cell.scan::before{animation:none}}
.cctv-mon.cm4{width:300px}
.cm4 .cm-cell{aspect-ratio:16/9}
.cm4 .cm-cell.off{opacity:.6}
.cm4 .cm-p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}
.cm4 .cm-p:empty{display:none}
.cm4 .cm-t{min-height:0}
.cm4 .cm-priv{display:none}
.cm4:hover .cm-priv{display:block}
.cm4 .cm-lab{font-size:8.5px}

/* strip with the other division (low-current / contracting & decor) */
.divbar{background:#02121e;color:#9fbccc;font-size:.8125rem}.divbar .wrap{display:flex;align-items:center;gap:10px;min-height:36px}.divbar a{text-decoration:none;color:#cfe3ee}.divbar a:hover{color:#fff}.divbar .on{color:#fff;font-weight:700}.divbar .other{margin-inline-start:auto}