/* I-Safe website styles */

/* Fonts (self-hosted) */
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";src:url("fonts/alexandria-arabic-wght-normal.woff2") format("woff2-variations"),url("fonts/alexandria-arabic-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;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}
@font-face{font-family:"Alexandria";src:url("fonts/alexandria-latin-wght-normal.woff2") format("woff2-variations"),url("fonts/alexandria-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Tokens: colours taken from a sealed concrete floor and its safety markings */
:root{
  --concrete:#ECEDEA;
  --slab:#DFE2DD;
  --joint:#C8CDC7;
  --ink:#1F2629;
  --ink-2:#2D373B;
  --steel:#56636A;
  --marking:#F2B300;
  --stop:#C62828;
  --go:#2E7D4F;
  --paper:#F6F7F5;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --brand:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --section:clamp(64px,9vw,120px);
  --radius:4px;
}
html[lang="ar"]{
  --display:"Alexandria","Segoe UI",Tahoma,sans-serif;
  --body:"Alexandria","Segoe UI",Tahoma,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--concrete);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{font-size:1rem;line-height:1.9}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--marking);outline-offset:3px;border-radius:2px}
.contact :focus-visible{outline-color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;top:10px;inset-inline-start:-9999px;z-index:50;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--radius);text-decoration:none}
.skip:focus{inset-inline-start:10px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* Header */
.top{position:sticky;top:0;z-index:20;background:var(--concrete);border-bottom:1px solid var(--joint)}
.top__row{display:flex;align-items:center;gap:28px;min-height:68px}
.brand{display:inline-flex;align-items:center;direction:ltr;font-family:var(--brand);font-weight:700;font-size:1.95rem;line-height:1;letter-spacing:.005em;text-decoration:none;color:var(--ink)}
.brand__tape{display:inline-block;width:.42em;height:.15em;margin-inline:.07em;background:var(--marking);transform:translateY(.03em)}
.top__nav{display:flex;gap:28px;margin-inline-start:auto}
.top__nav a{text-decoration:none;font-weight:500;color:var(--steel);padding-block:6px}
.top__nav a:hover{color:var(--ink)}
.top__actions{display:flex;align-items:center;gap:16px}
.lang{font-weight:600;text-decoration:none;padding:8px 2px}
.lang:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){
  .top__nav{display:none}
  .top__actions{margin-inline-start:auto;gap:12px}
}

/* Buttons */
.btn{--bg:var(--ink);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border:0;cursor:pointer;border-radius:var(--radius);background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.btn:hover{--bg:#34414A}
.btn svg{width:20px;height:20px;flex:none}
.btn--line{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--line:hover{--bg:var(--slab)}
.btn--marking{--bg:var(--marking);--fg:var(--ink)}
.btn--marking:hover{--bg:#FFC52E}
.btn--small{min-height:42px;padding:0 16px;font-size:.95rem}
.btn--small svg{width:18px;height:18px}

/* Hero */
.hero{padding-block:clamp(36px,6vw,84px) var(--section)}
.hero__grid{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media (min-width:980px){.hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.hero h1{font-size:clamp(2.7rem,1.4rem + 5vw,5.1rem);line-height:.97;letter-spacing:-.01em;max-width:13ch}
html[lang="ar"] .hero h1{font-size:clamp(2rem,1.2rem + 3vw,3.2rem);line-height:1.4;letter-spacing:0;max-width:none}
.lede{margin-top:24px;font-size:1.2rem;line-height:1.55;max-width:33em;color:var(--ink-2)}
html[lang="ar"] .lede{font-size:1.08rem;line-height:1.95}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.creds{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-weight:500;font-size:.95rem;color:var(--steel)}
.creds li{display:flex;align-items:center;gap:9px}
.creds li::before{content:"";width:12px;height:4px;background:var(--marking);flex:none}

/* Hero demo: AI Driver Assistant */
.demo{margin:0}
.demo__floor{background:#D9DCD7;border:1px solid var(--joint);border-radius:6px;overflow:hidden}
.plan{width:100%;height:auto;direction:ltr}
.osd{font-family:var(--body);font-size:10px;font-weight:600;fill:#E6EAEA}
.osd--label{font-size:11px;fill:#AEB8BC;font-weight:500}
.demo figcaption{margin-top:14px;display:grid;gap:6px}
.status{display:grid;font-weight:600;font-size:.98rem}
.status__item{grid-area:1/1;display:flex;align-items:center;gap:10px;opacity:0}
.product__fig{position:relative}
.status--fig{position:absolute;top:10px;left:10px;margin:0;padding:5px 12px 5px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:.8rem;box-shadow:0 1px 2px rgba(31,38,41,.14)}
.status--fig .lamp{width:10px;height:10px}
.lamp{width:12px;height:12px;border-radius:50%;flex:none}
.lamp--go{background:var(--go);box-shadow:0 0 0 3px rgba(46,125,79,.2)}
.lamp--stop{background:var(--stop);box-shadow:0 0 0 3px rgba(198,40,40,.2)}
.lamp--idle{background:#8F999E;box-shadow:0 0 0 3px rgba(143,153,158,.22)}
.demo__note{color:var(--steel);font-size:.95rem;max-width:46em}
.demo__note a{color:var(--ink);font-weight:600;text-underline-offset:3px;white-space:nowrap}

/* Event log shown under the hero plan */
.log{--row:36px;margin-top:12px;background:#fff;border:1px solid var(--joint);border-radius:6px;overflow:hidden;font-size:.88rem}
.log__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:9px 14px;background:var(--ink);color:#fff}
.log__title{font-weight:600}
.log__rec{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#C3CBCD}
.rec{width:9px;height:9px;border-radius:50%;background:#E53935;flex:none}
.log__row{display:grid;grid-template-columns:3.4em 4.4em minmax(0,1fr) 3em 3.4em 2.4em;gap:10px;align-items:center;height:var(--row);padding:0 14px;border-bottom:1px solid #E7E9E5;white-space:nowrap}
.log__cols{height:30px;background:#F3F4F1;color:var(--steel);font-size:.76rem;font-weight:600}
.log__rows{height:calc(var(--row) * 3);overflow:hidden}
.sev{display:inline-block;padding:1px 8px;border-radius:3px;font-size:.76rem;font-weight:600;line-height:1.5}
.sev--c{background:#FCE4E4;color:#B71C1C}
.sev--m{background:#FDEBDD;color:#9A4508}
.sev--n{background:#FFF3C4;color:#6F5200}
.play{color:var(--steel);font-size:.8rem}
html[lang="ar"] .log__row{grid-template-columns:3.6em 4.4em minmax(0,1fr) 3.2em 4.8em 3.8em}
@media (max-width:520px){.c-cam,.c-ppl{display:none}.log__row{grid-template-columns:3.4em minmax(0,1fr) 3em 2.4em}html[lang="ar"] .log__row{grid-template-columns:3.6em minmax(0,1fr) 3.2em 3.8em}}

/* Static frames: shown when reduced motion is on, and the base the animations run from */
.hfk{transform:translateX(300px)}
.hperson{transform:translateY(150px)}
.hzone-alert,.halarm,.scr-person{opacity:1}
.halarm-ring{transform-box:fill-box;transform-origin:center}
.st-2{opacity:1}
.log__new{margin-top:0;opacity:1}
.pw-fk{transform:translateX(40px)}
.pw-person{transform:translateY(238px)}
.pw-cross{opacity:0}
.pw-stop{opacity:1}
.pw-st-2{opacity:1}

@media (prefers-reduced-motion:no-preference){
  .hfk{animation:hfk 10s infinite}
  .hperson{animation:hperson 10s linear infinite}
  .hzone-alert,.halarm,.scr-person{animation:alertWin 10s linear infinite}
  .halarm-ring{animation:ring .8s ease-out infinite}
  .rec-dot,.rec{animation:recBlink 1.2s steps(1) infinite}
  .st-1{animation:st1 10s linear infinite}
  .st-2{animation:st2 10s linear infinite}
  .st-3{animation:st3 10s linear infinite}
  .log__new{animation:logNew 10s ease-out infinite}
  .pw-fk{animation:pwFk 10s linear infinite}
  .pw-person{animation:pwPerson 10s linear infinite}
  .pw-cross{animation:cross 10s ease-in-out infinite}
  .pw-stop{animation:stopsign 10s ease-in-out infinite}
  .pw-st-1{animation:stClear 10s linear infinite}
  .pw-st-2{animation:stStop 10s linear infinite}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@keyframes hfk{
  0%{transform:translateX(700px);animation-timing-function:cubic-bezier(.25,.6,.35,1)}
  20%,50%{transform:translateX(300px);animation-timing-function:cubic-bezier(.55,0,.75,.45)}
  80%,100%{transform:translateX(-170px)}
}
@keyframes hperson{0%{transform:translateY(-30px)}20%{transform:translateY(122px)}24%,32%{transform:translateY(150px)}44%{transform:translateY(226px)}58%,100%{transform:translateY(345px)}}
@keyframes alertWin{0%,19.9%{opacity:0}20%,44.9%{opacity:1}45%,100%{opacity:0}}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@keyframes recBlink{0%{opacity:1}50%{opacity:.2}}
@keyframes st1{0%,19.9%{opacity:1}20%,100%{opacity:0}}
@keyframes st2{0%,19.9%{opacity:0}20%,45.9%{opacity:1}46%,100%{opacity:0}}
@keyframes st3{0%,45.9%{opacity:0}46%,99.9%{opacity:1}100%{opacity:0}}
@keyframes logNew{0%,46%{margin-top:calc(var(--row) * -1);opacity:0;background:transparent}49%{margin-top:0;opacity:1;background:#FFF1C2}75%,95%{margin-top:0;opacity:1;background:transparent}99%,100%{margin-top:calc(var(--row) * -1);opacity:0}}
@keyframes pwFk{0%{transform:translateX(-200px)}75%,100%{transform:translateX(560px)}}
@keyframes pwPerson{0%,10%{transform:translateY(330px)}26%,55%{transform:translateY(238px)}80%{transform:translateY(-30px)}80.01%,100%{transform:translateY(330px)}}
@keyframes cross{0%,19%{opacity:1}22%,52%{opacity:0}55%,100%{opacity:1}}
@keyframes stopsign{0%,19.5%{opacity:0}22.5%,50%{opacity:1}53%,100%{opacity:0}}
@keyframes stClear{0%,19.9%{opacity:1}20%,51.9%{opacity:0}52%,100%{opacity:1}}
@keyframes stStop{0%,19.9%{opacity:0}20%,51.9%{opacity:1}52%,100%{opacity:0}}

/* Drawing labels */
.lbl{font-family:var(--body);font-size:18px;font-weight:500;fill:var(--steel)}
.lbl--strong{fill:var(--ink);font-weight:600}
.lbl--sm{font-size:13px}
@media (max-width:899px){.lbl--sm{font-size:17px}}
.ui{font-family:"Barlow",system-ui,sans-serif;fill:var(--ink)}
html[lang="ar"] .ui{font-family:"Alexandria",sans-serif}
.ui--h{font-size:13px;font-weight:600;fill:#fff}
.ui--pill{font-size:10px;font-weight:600}
.ui--label{font-size:11px;font-weight:600;fill:var(--steel)}
.ui--t{font-size:10.5px}
.ui--chip{font-size:9px;font-weight:600}
.stop-text{font-family:var(--brand);font-weight:700;font-size:17px;letter-spacing:.04em;fill:#fff}
html[lang="ar"] .stop-text{font-family:"Alexandria",sans-serif;font-size:20px;letter-spacing:0}

/* Sections */
.section{padding-block:var(--section)}
.section--slab{background:var(--slab)}
.section h2{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.5rem);line-height:1}
html[lang="ar"] .section h2{font-size:clamp(1.75rem,1.3rem + 1.7vw,2.6rem);line-height:1.4}
.section__head{max-width:40em;margin-bottom:clamp(32px,4vw,56px)}
.section__head p,.split__head p{margin-top:14px;color:var(--steel);max-width:32em}

.split{display:grid;gap:28px 64px}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .split__head{position:sticky;top:110px;align-self:start}
}

/* Services */
.services{border-top:2px solid var(--ink)}
.service{display:grid;gap:10px;padding-block:28px 30px;border-bottom:1px solid var(--joint)}
.service h3{font-size:1.8rem;font-weight:600;line-height:1.1}
html[lang="ar"] .service h3{font-size:1.3rem;font-weight:600;line-height:1.55}
.service p{max-width:40em}
.ticks{display:grid;gap:6px 28px;margin-top:6px}
@media (min-width:640px){.ticks--two{grid-template-columns:1fr 1fr}}
.ticks li{position:relative;padding-inline-start:22px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:12px;height:4px;background:var(--marking)}
html[lang="ar"] .ticks li::before{top:.86em}

/* Products */
.product{display:grid;gap:22px;align-items:center;align-content:start}
.product__fig{margin:0;background:var(--paper);border:1px solid var(--joint);border-radius:6px;overflow:hidden}
.product__fig svg{width:100%;height:auto;direction:ltr}
.product__body{display:grid;gap:12px;align-content:start}
.product h3{font-size:2.1rem;line-height:1.05}
html[lang="ar"] .product h3{font-size:1.45rem;line-height:1.5}
.product__status{display:flex;align-items:center;gap:10px;margin-top:4px;font-weight:600;font-size:.95rem}
.product__media{display:grid;align-content:start}
.product__body .btn{justify-self:start;margin-top:8px}
@media (min-width:900px){.product--lead{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:52px}}
.product-row{display:grid;gap:48px;margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--joint)}
@media (min-width:900px){.product-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.product-row .product{align-items:start}
.product-row h3{font-size:1.7rem}
html[lang="ar"] .product-row h3{font-size:1.25rem}

/* Process: steps sit on a dashed lane line, the way a walkway route is marked */
.steps{display:grid;gap:30px;margin-top:40px}
.steps li{position:relative;padding-top:30px}
.steps li::before{content:"";position:absolute;inset-inline:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--marking) 0 26px,transparent 26px 40px)}
.steps__n{display:block;margin-bottom:10px;font-family:var(--brand);font-weight:700;font-size:3rem;line-height:1}
html[lang="ar"] .steps__n{font-family:"Alexandria",sans-serif;font-size:2.4rem}
.steps h3{font-size:1.55rem;margin-bottom:6px}
html[lang="ar"] .steps h3{font-size:1.2rem;line-height:1.5}
.steps p{color:var(--ink-2)}
@media (min-width:860px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
@media (max-width:859px){
  .steps li{padding-top:0;padding-inline-start:30px}
  .steps li::before{inset-inline:0 auto;top:0;bottom:0;width:6px;height:auto;background:repeating-linear-gradient(180deg,var(--marking) 0 26px,transparent 26px 40px)}
}

/* About */
.about{display:grid;gap:18px;max-width:44em}
.about h3{margin-top:18px;font-size:1.5rem}
html[lang="ar"] .about h3{font-size:1.2rem}
.facts{border-top:2px solid var(--ink)}
.facts li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:4px 24px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--joint)}
.facts b{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.2}
html[lang="ar"] .facts b{font-size:1.02rem;line-height:1.6}
.facts span{color:var(--ink-2)}
@media (max-width:620px){.facts li{grid-template-columns:1fr}}

/* Contact */
.contact{background:var(--ink);color:#E6EAEA;padding-block:var(--section)}
.contact__grid{display:grid;gap:44px}
@media (min-width:900px){.contact__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}
.contact__intro{display:grid;gap:20px;justify-items:start;align-content:start}
.contact h2{color:#fff;font-size:clamp(2.4rem,1.6rem + 3vw,4rem);line-height:.98}
html[lang="ar"] .contact h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);line-height:1.35}
.contact__lede{color:#C3CBCD;max-width:30em}
.contact__phone{margin-top:8px;font-family:var(--brand);font-weight:700;font-size:clamp(2.2rem,1.2rem + 3vw,3.4rem);line-height:1;letter-spacing:.01em;white-space:nowrap;color:#fff;text-decoration:none;direction:ltr;unicode-bidi:isolate}
.contact__phone:hover{color:var(--marking)}
.contact__meta{color:#C3CBCD}
.btn--line-light{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn--line-light:hover{--bg:rgba(255,255,255,.1)}

/* Contact form */
.form{background:#263034;border:1px solid #37444B;border-radius:6px;padding:clamp(20px,3vw,32px)}
.hp{display:none}
.form__grid{display:grid;gap:16px}
@media (min-width:600px){.form__grid{grid-template-columns:1fr 1fr}.field--wide{grid-column:1/-1}}
.field{display:grid;gap:7px;font-weight:600;font-size:.95rem;color:#F1F3F2}
.field small{font-weight:400;color:#9AA5AA}
.field input,.field textarea{width:100%;min-height:48px;padding:11px 14px;border:2px solid transparent;border-radius:var(--radius);background:var(--paper);color:var(--ink);font:400 1rem/1.5 var(--body)}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#89959A}
.field input:focus,.field textarea:focus{outline:3px solid var(--marking);outline-offset:1px}
.field input:user-invalid,.field textarea:user-invalid{border-color:#EF8A8A}
.form__send{margin-top:22px}
.form__send:disabled{opacity:.6;cursor:progress}
.form__status{margin-top:14px;min-height:1.6em;font-weight:500;color:#C3CBCD}
.form__status.is-ok{color:#8FD3A8}
.form__status.is-error{color:#FFB3B3}

.foot{background:var(--ink);color:#99A4A9;border-top:1px solid #34414A;padding-block:22px;font-size:.92rem}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.foot a{color:#C3CBCD;text-underline-offset:4px}