/* assets/css/site.css — Saif Logistics redesign. Lines up to the 'additions' marker are the approved design (index.html <style>) verbatim. */
:root{
  --navy:#0A2342; --navy-2:#122F57; --ink:#1B2A3B; --teal:#0E7C86; --gold:#E8A317; --gold-2:#F5C451;
  --sand:#F4F0E6; --paper:#FFFFFF; --mist:#E6ECF2; --muted:#5B6B7C; --line:#D9E0E8; --ok:#1E9E62;
  --bg:var(--sand); --fg:var(--ink); --card:var(--paper);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0B1A2E; --fg:#E9EEF4; --card:#13284A; --line:#24406A; --mist:#17315A; --muted:#A9B7C6; } }
:root[data-theme="dark"]{ --bg:#0B1A2E; --fg:#E9EEF4; --card:#13284A; --line:#24406A; --mist:#17315A; --muted:#A9B7C6; }
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; font-family:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); line-height:1.55; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0; line-height:1.12; letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,5.2vw,4.2rem); font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800}
h3{font-size:1.2rem; font-weight:700}
p{margin:0}
.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important} }

/* ---------- Top bar + header ---------- */
.topbar{background:var(--navy); color:#C9D6E6; font-size:.82rem}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; min-height:34px; gap:1rem; flex-wrap:wrap}
.topbar a{color:#fff; text-decoration:none}
.topbar span.sep{opacity:.4; margin:0 .5rem}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--navy-2); color:#fff; box-shadow:0 2px 14px rgba(0,0,0,.25)}
header.site .wrap{display:flex; align-items:center; gap:1.5rem; min-height:72px}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; cursor:pointer; background:none; border:0; padding:0}
.brand .mark{width:44px; height:44px}
.brand b{display:block; font-size:1.25rem; font-weight:800; letter-spacing:.01em; line-height:1}
.brand small{display:block; font-size:.68rem; color:#C9D6E6; letter-spacing:.06em; margin-top:3px}
nav.main{margin-left:auto; display:flex; gap:.15rem; flex-wrap:wrap}
nav.main button{background:none; border:0; color:#DCE6F2; padding:.55rem .75rem; border-radius:6px; cursor:pointer; font-weight:600; font-size:.92rem}
nav.main button:hover,nav.main button.active{background:rgba(255,255,255,.1); color:#fff}
nav.main button.active{box-shadow:inset 0 -3px 0 var(--gold)}
.btn{display:inline-flex; align-items:center; gap:.5rem; border:0; border-radius:8px; padding:.8rem 1.25rem; font-weight:700; cursor:pointer; text-decoration:none; transition:transform .15s, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold); color:var(--navy)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55)}
.btn-navy{background:var(--navy); color:#fff}
.btn-teal{background:var(--teal); color:#fff}
.menu-toggle{display:none; margin-left:auto; background:none; border:1.5px solid rgba(255,255,255,.4); color:#fff; border-radius:8px; padding:.45rem .7rem; cursor:pointer}
@media (max-width:900px){
  nav.main{display:none; position:absolute; left:0; right:0; top:100%; background:var(--navy-2); flex-direction:column; padding:.5rem 1rem 1rem; border-top:1px solid rgba(255,255,255,.1)}
  nav.main.open{display:flex}
  .menu-toggle{display:inline-block}
  header.site .cta{display:none}
}

/* ---------- Hero slider ---------- */
.hero{position:relative; min-height:min(84vh,720px); background:var(--navy); color:#fff; overflow:hidden; isolation:isolate}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease; display:grid; align-items:center}
.slide.on{opacity:1; z-index:1}
.slide .bg{position:absolute; inset:0; z-index:-1}
.slide .bg svg{width:100%; height:100%}
.slide .copy{position:relative; padding:4rem 0 7rem; max-width:620px}
.slide .kicker{display:inline-flex; align-items:center; gap:.5rem; background:rgba(232,163,23,.16); border:1px solid rgba(232,163,23,.5); color:var(--gold-2); padding:.35rem .8rem; border-radius:999px; font-size:.82rem; font-weight:700; margin-bottom:1.1rem}
.slide p.lead{font-size:1.12rem; color:#D6E0EC; margin:1.1rem 0 1.8rem; max-width:52ch}
.slide .actions{display:flex; gap:.75rem; flex-wrap:wrap}
.slide.on .copy>*{animation:rise .7s ease both}
.slide.on .copy>*:nth-child(2){animation-delay:.1s}.slide.on .copy>*:nth-child(3){animation-delay:.2s}.slide.on .copy>*:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.dots{position:absolute; left:50%; bottom:5.2rem; transform:translateX(-50%); z-index:3; display:flex; gap:.5rem}
.dots button{width:34px; height:5px; border:0; border-radius:999px; background:rgba(255,255,255,.3); cursor:pointer; padding:0}
.dots button.on{background:var(--gold)}
.arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); background:rgba(10,35,66,.45); color:#fff; cursor:pointer; display:grid; place-items:center}
.arrow.l{left:1rem}.arrow.r{right:1rem}
@media (max-width:700px){.arrow{display:none}}
.strip{position:absolute; left:0; right:0; bottom:0; z-index:3; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); border-top:1px solid rgba(255,255,255,.12)}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:.9rem 0}
.strip div{display:flex; align-items:center; gap:.65rem; font-size:.9rem; color:#E3EAF3}
.strip svg{width:22px; height:22px; color:var(--gold-2); flex:none}
@media (max-width:800px){.strip .wrap{grid-template-columns:1fr 1fr; gap:.5rem} .strip div{font-size:.8rem} .slide .copy{padding-bottom:9rem} .dots{bottom:7.2rem}}

/* route map art */
.map-dot{fill:var(--gold)}
.route{fill:none; stroke:var(--gold); stroke-width:1.6; stroke-dasharray:6 8; opacity:.75; animation:flow 3s linear infinite}
@keyframes flow{to{stroke-dashoffset:-56}}
.pulse{fill:none; stroke:var(--gold-2); stroke-width:2; transform-origin:center; animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{opacity:.9; r:6}100%{opacity:0; r:34}}

/* ---------- Sections ---------- */
section.block{padding:5rem 0}
.sec-head{max-width:720px; margin-bottom:2.5rem}
.sec-head p{color:var(--muted); font-size:1.08rem; margin-top:.8rem}

/* module tiles (ERP-style) */
.modules{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem}
.tile{text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.5rem; cursor:pointer; display:grid; gap:.7rem; position:relative; transition:transform .18s, box-shadow .18s, border-color .18s; color:var(--fg)}
.tile:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(10,35,66,.14); border-color:var(--teal)}
.tile .ic{width:52px; height:52px; border-radius:12px; background:var(--navy); color:var(--gold-2); display:grid; place-items:center}
.tile .ic svg{width:28px; height:28px}
.tile h3{font-size:1.1rem}
.tile p{color:var(--muted); font-size:.93rem}
.tile .open{color:var(--teal); font-weight:700; font-size:.88rem; margin-top:.2rem}

/* origins */
.origins{background:var(--navy); color:#fff}
.origins .sec-head p{color:#C9D6E6}
.flags{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem}
.flag{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:1rem; display:flex; align-items:center; gap:.75rem}
.flag span.e{font-size:1.9rem; line-height:1}
.flag b{display:block; font-size:.98rem}
.flag small{color:#AFC0D3; font-size:.78rem}

/* process */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; counter-reset:s}
.step{background:var(--card); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; padding:1.2rem 1.2rem 1.3rem; counter-increment:s}
.step::before{content:counter(s); display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--navy); color:var(--gold-2); font-weight:800; font-size:.9rem; margin-bottom:.7rem}
.step h3{font-size:1.02rem; margin-bottom:.35rem}
.step p{color:var(--muted); font-size:.9rem}

/* why strip */
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem}
.why div{padding:1.4rem; border-radius:12px; background:var(--mist)}
.why b{display:block; font-size:2rem; color:var(--teal); font-weight:800; letter-spacing:-.02em}
.why span{color:var(--muted); font-size:.92rem}

/* cta band */
.band{background:linear-gradient(100deg,var(--teal),#0A5C66); color:#fff; padding:3.5rem 0}
.band .wrap{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap}
.band h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.band p{color:#D4EFF1; margin-top:.4rem}

/* ---------- Module panel (opens like an ERP module) ---------- */
.overlay{position:fixed; inset:0; background:rgba(5,16,32,.55); backdrop-filter:blur(3px); z-index:80; opacity:0; pointer-events:none; transition:opacity .25s}
.overlay.on{opacity:1; pointer-events:auto}
.panel{position:fixed; top:0; right:0; height:100%; width:min(900px,100%); background:var(--bg); color:var(--fg); z-index:90; transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.35); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.panel.on{transform:none}
.panel-head{position:sticky; top:0; background:var(--navy); color:#fff; padding:1.1rem 1.5rem; display:flex; align-items:center; gap:1rem; z-index:2}
.panel-head .ic{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.1); color:var(--gold-2); display:grid; place-items:center; flex:none}
.panel-head .ic svg{width:22px; height:22px}
.panel-head h2{font-size:1.25rem}
.panel-head small{color:#C9D6E6; display:block; font-size:.8rem}
.panel-head .x{margin-left:auto; background:rgba(255,255,255,.1); border:0; color:#fff; width:38px; height:38px; border-radius:8px; cursor:pointer; font-size:1.3rem}
.panel-body{padding:1.8rem 1.5rem 3rem; max-width:760px}
.panel-body h3{margin:1.6rem 0 .6rem; color:var(--navy)}
:root[data-theme="dark"] .panel-body h3{color:var(--gold-2)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .panel-body h3{color:var(--gold-2)} }
.panel-body p{margin-bottom:.9rem; color:var(--fg)}
.panel-body ul{margin:0 0 1rem; padding-left:1.2rem}
.panel-body li{margin:.3rem 0}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem}
.chip{background:var(--mist); border:1px solid var(--line); padding:.35rem .75rem; border-radius:999px; font-size:.85rem; font-weight:600}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem; margin:.6rem 0 1rem}
.mini{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem}
.mini b{display:block; margin-bottom:.25rem}
.mini span{color:var(--muted); font-size:.88rem}
.note{background:rgba(232,163,23,.14); border-left:4px solid var(--gold); padding:.9rem 1rem; border-radius:0 8px 8px 0; margin:1rem 0}
table{width:100%; border-collapse:collapse; font-size:.92rem; margin:.5rem 0 1rem}
th,td{text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:.82rem}
.tscroll{overflow-x:auto}

/* forms */
form{display:grid; gap:.8rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{display:grid; gap:.3rem; font-size:.86rem; font-weight:600; color:var(--muted)}
input,select,textarea{font:inherit; padding:.7rem .8rem; border:1.5px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--teal); outline:0}
.result{background:var(--navy); color:#fff; border-radius:12px; padding:1.2rem; margin-top:.5rem; display:none}
.result.on{display:block}
.result b{font-size:1.6rem; color:var(--gold-2)}
.track-status{display:grid; gap:0; margin-top:1rem}
.ts{display:grid; grid-template-columns:28px 1fr; gap:.8rem; padding:.6rem 0; position:relative}
.ts::before{content:""; position:absolute; left:13px; top:28px; bottom:-6px; width:2px; background:var(--line)}
.ts:last-child::before{display:none}
.ts i{width:28px; height:28px; border-radius:50%; background:var(--mist); border:2px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:.75rem}
.ts.done i{background:var(--ok); border-color:var(--ok); color:#fff}
.ts.now i{background:var(--gold); border-color:var(--gold); color:var(--navy)}
.ts b{display:block; font-size:.95rem}
.ts small{color:var(--muted)}

/* footer */
footer{background:var(--navy); color:#C9D6E6; padding:3.5rem 0 1.5rem; font-size:.92rem}
footer .cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12)}
footer h4{color:#fff; margin-bottom:.8rem; font-size:1rem}
footer button.lnk,footer a{display:block; background:none; border:0; color:#C9D6E6; padding:.25rem 0; cursor:pointer; text-decoration:none; text-align:left}
footer button.lnk:hover,footer a:hover{color:var(--gold-2)}
footer .copy{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.2rem; font-size:.8rem; color:#8FA4BC}
@media (max-width:800px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:500px){footer .cols{grid-template-columns:1fr}}
.wa{position:fixed; right:1.1rem; bottom:calc(1.1rem + env(safe-area-inset-bottom,0px)); z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.3); text-decoration:none}
.wa svg{width:30px; height:30px}

/* ==================== additions for the live site ==================== */
/* nav items are real links (crawlable) styled exactly like the design's buttons */
nav.main a{background:none; border:0; color:#DCE6F2; padding:.55rem .75rem; border-radius:6px; cursor:pointer; font-weight:600; font-size:.92rem; text-decoration:none}
nav.main a:hover,nav.main a.active{background:rgba(255,255,255,.1); color:#fff}
nav.main a.active{box-shadow:inset 0 -3px 0 var(--gold)}
a.tile{text-decoration:none}
footer a.lnk{display:block}
.topbar .lang{border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.05rem .65rem; margin-inline-start:.6rem}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* form feedback */
.form-msg{border-radius:8px; padding:.8rem 1rem; font-weight:600; display:none}
.form-msg.on{display:block}
.form-msg.ok{background:rgba(30,158,98,.14); color:var(--ok); border-left:4px solid var(--ok)}
.form-msg.err{background:rgba(232,163,23,.14); border-left:4px solid var(--gold)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.result .lines{font-size:.85rem; color:#C9D6E6; margin-top:.5rem}
.result .lines span{display:block}
.guide-link{display:inline-block; margin:.2rem 0 1rem; color:var(--teal); font-weight:700; text-decoration:none}

/* inner pages (services list, quote, track, SEO landing pages) */
.page-hero{background:var(--navy); color:#fff; padding:3.2rem 0 2.6rem}
.page-hero .crumb{font-size:.82rem; color:#AFC0D3; margin-bottom:.8rem}
.page-hero .crumb a{color:#C9D6E6; text-decoration:none}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.9rem)}
.page-hero p.lead{color:#D6E0EC; margin-top:.9rem; max-width:62ch; font-size:1.06rem}
.page-hero .actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem}
.page-body{padding:3rem 0 4rem}
.page-body .panel-body{max-width:820px; padding:0}
.lp-main{display:grid; grid-template-columns:1.6fr 1fr; gap:2.5rem; align-items:start}
.lp-main p{margin-bottom:1rem}
.lp-box{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.5rem}
.lp-box h2,.lp-h2{font-size:1.25rem; margin-bottom:.9rem}
.lp-list{list-style:none; padding:0; margin:0}
.lp-list li{padding:.5rem 0; padding-inline-start:1.7rem; position:relative; border-bottom:1px dashed var(--line); font-size:.95rem}
.lp-list li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--teal); font-weight:800}
.lp-transit{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.5rem 0 .4rem}
.lp-transit div{background:var(--navy); color:#fff; border-radius:12px; padding:1rem; text-align:center}
.lp-transit b{display:block; font-size:1.5rem; color:var(--gold-2)}
.lp-transit span{font-size:.8rem; color:#C9D6E6}
.lp-faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin-bottom:.7rem}
.lp-faq summary{cursor:pointer; font-weight:700}
.lp-faq details p{margin-top:.6rem; color:var(--muted)}
.lp-links{display:flex; flex-wrap:wrap; gap:.5rem}
.lp-links a{background:var(--card); border:1px solid var(--line); padding:.45rem .9rem; border-radius:999px; font-size:.88rem; font-weight:600; text-decoration:none}
.lp-links a:hover{border-color:var(--teal); color:var(--teal)}
.lp-group{font-size:.9rem; color:var(--muted); margin:1.2rem 0 .6rem}
@media (max-width:860px){.lp-main{grid-template-columns:1fr} .lp-transit{grid-template-columns:1fr}}

/* footer coverage links (internal links to every SEO page) */
footer .coverage{padding:1.2rem 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.82rem; line-height:1.9; color:#8FA4BC}
footer .coverage b{color:#C9D6E6; margin-inline-end:.3rem}
footer .coverage a{display:inline; padding:0; color:#AFC0D3}

/* ---------- Arabic / RTL ---------- */
:root[lang="ar"] body{font-family:'Tajawal','Manrope',system-ui,sans-serif; letter-spacing:0}
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="ar"] h3{letter-spacing:0; line-height:1.3}
[dir="rtl"] nav.main{margin-left:0; margin-right:auto}
[dir="rtl"] .menu-toggle{margin-left:0; margin-right:auto}
[dir="rtl"] .tile,[dir="rtl"] th,[dir="rtl"] td,[dir="rtl"] footer button.lnk,[dir="rtl"] footer a{text-align:right}
[dir="rtl"] .step{border-left:0; border-right:4px solid var(--gold); border-radius:12px 0 0 12px}
[dir="rtl"] .note{border-left:0; border-right:4px solid var(--gold); border-radius:8px 0 0 8px}
[dir="rtl"] .form-msg.ok,[dir="rtl"] .form-msg.err{border-left:0; border-right-width:4px; border-right-style:solid}
[dir="rtl"] .panel-body ul{padding-left:0; padding-right:1.2rem}
[dir="rtl"] .panel{right:auto; left:0; transform:translateX(-100%); box-shadow:20px 0 60px rgba(0,0,0,.35)}
[dir="rtl"] .panel.on{transform:none}
[dir="rtl"] .panel-head .x{margin-left:0; margin-right:auto}
[dir="rtl"] .ts::before{left:auto; right:13px}
[dir="rtl"] .wa{right:auto; left:1.1rem}
[dir="rtl"] .arrow.l{left:auto; right:1rem}
[dir="rtl"] .arrow.r{right:auto; left:1rem}
[dir="rtl"] .slide .copy{margin-inline-start:0}
[dir="rtl"] .slide:not(:first-child) .bg svg{transform:scaleX(-1)}
[dir="rtl"] .hp{left:auto; right:-9999px}
[dir="rtl"] .bg svg text.unmirror,[dir="rtl"] .bg svg g.unmirror{transform-box:fill-box; transform-origin:center; transform:scaleX(-1)}
[dir="rtl"] .bg svg g.unmirror text.unmirror,[dir="rtl"] .bg svg g.unmirror text{transform:none}
label.check{display:flex; align-items:center; gap:.5rem; color:var(--fg)}
label.check input{width:auto; margin:0}
header.site .cta,.brand small{white-space:nowrap}
/* accessibility fixes (Lighthouse): footer headings as h2, larger touch targets, same look */
footer h2.fh{color:#fff; margin-bottom:.8rem; font-size:1rem; letter-spacing:0}
footer .coverage{line-height:2.3}
footer .coverage a{padding:.35rem .1rem}
.dots button{height:24px; background:none; position:relative}
.dots button::after{content:""; position:absolute; left:0; right:0; top:50%; height:5px; margin-top:-2.5px; border-radius:999px; background:rgba(255,255,255,.3)}
.dots button.on{background:none}
.dots button.on::after{background:var(--gold)}
/* Arabic: the hero copy sits on the right, so slide 1 route map moves to the left half (geography kept, not mirrored) */
[dir="rtl"] .slide:first-child .bg .map{transform:translateX(-690px)}
[dir="rtl"] .hero .bg .map text{direction:ltr}
/* hero grows to fit its tallest slide (design used fixed height + absolute slides, so long text ran under the strip on short screens) */
.hero{display:grid}
.slide{position:relative; inset:auto; grid-area:1/1}
.slide:not(.on){visibility:hidden; transition:opacity 1s ease, visibility 0s 1s}
.slide.on{visibility:visible; transition:opacity 1s ease}
:root[lang="ar"] .slide h1,:root[lang="ar"] .slide .h1{font-size:clamp(2rem,4.4vw,3.6rem) !important}
/* sliding site notice (admin → Settings) */
.notice{background:var(--gold); color:var(--navy); font-size:.88rem; font-weight:600; overflow:hidden; white-space:nowrap}
.notice-track{display:inline-flex; gap:6rem; padding:.45rem 0; padding-inline-start:100%; animation:notice-slide 28s linear infinite}
.notice:hover .notice-track{animation-play-state:paused}
.notice b{font-weight:800; margin-inline-end:.3rem}
@keyframes notice-slide{from{transform:translateX(0)} to{transform:translateX(-100%)}}
[dir="rtl"] .notice-track{animation-name:notice-slide-rtl}
@keyframes notice-slide-rtl{from{transform:translateX(0)} to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.notice{white-space:normal; text-align:center} .notice-track{animation:none; padding-inline-start:0; display:block} .notice-track span[aria-hidden]{display:none}}
/* logo lockup: icon + SAIF LOGISTICS + Arabic name (same on both language versions) */
.brand b{font-family:Manrope,system-ui,sans-serif; letter-spacing:.02em}
.brand small.brand-ar{font-family:Tajawal,system-ui,sans-serif; font-size:.8rem; letter-spacing:0; color:var(--gold-2); margin-top:4px}
:root[lang="ar"] .brand b{font-size:1.25rem}
.brand b{white-space:nowrap}
/* slide 2 ship: gentle bob/roll at sea, waves flowing past, rising smoke, waving flag */
.ship-bob{transform-box:fill-box; transform-origin:50% 85%; animation:ship-bob 7s ease-in-out infinite}
@keyframes ship-bob{0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(6px,-4px) rotate(-.6deg)} 50%{transform:translate(12px,1px) rotate(0deg)} 75%{transform:translate(6px,4px) rotate(.6deg)}}
.waves{animation:waves 2.6s linear infinite}
@keyframes waves{to{transform:translateX(-60px)}}
.puff{transform-box:fill-box; transform-origin:center; opacity:0; animation:puff 4s ease-out infinite}
.puff:nth-child(2){animation-delay:1s} .puff:nth-child(3){animation-delay:2s} .puff:nth-child(4){animation-delay:3s}
@keyframes puff{0%{opacity:.6; transform:translate(0,0) scale(.5)} 100%{opacity:0; transform:translate(-55px,-95px) scale(2.8)}}
.flag-wave{transform-box:fill-box; transform-origin:0% 50%; animation:flag-wave 1.6s ease-in-out infinite alternate}
@keyframes flag-wave{0%{transform:skewY(2.4deg) scaleX(.97)} 100%{transform:skewY(-2.4deg) scaleX(1)}}
.slide:not(.on) .ship-bob,.slide:not(.on) .waves,.slide:not(.on) .puff,.slide:not(.on) .flag-wave{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ship-bob,.waves,.flag-wave{animation:none} .puff{animation:none; opacity:.3}}