/* Fonts: css/fonts.css (hosted with the site in media/fonts) */
/* PRJ X portal styles. Colors and fonts are tokens on :root at the top. */
/* Layout: dark control-room showroom. Full-bleed live 3D rig on the right, left-aligned copy, frosted teal glass panels and HUD hairlines. Single dark theme by choice. */
:root{
  --void:#F3F8FA;
  --deep:#E4F1F4;
  --glass:rgba(255,255,255,.72);
  --line:rgba(11,127,174,.18);
  --line-strong:rgba(11,127,174,.45);
  --text:#0B1A20;
  --muted:#4A626B;
  --teal:#087A73;
  --cyan:#1E9FD8;
  --blue:#1F6FE5;
  --grad:linear-gradient(90deg,#1F6FE5 0%,#1E9FD8 45%,#11B5A4 100%);
  /* Official typography: display = Michroma, body = Poppins, technical accents = IBM Plex Mono (replaces Courier New, which renders thin and blurry on screens) */
  --font-display:'Michroma', 'Tektur', 'Eurostile', 'Arial Black', sans-serif;
  --font-body:'Poppins', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-display:var(--font-display);
  --f-body:var(--font-body);
  --f-spec:var(--font-mono);
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:24px}
.label{font-family:var(--f-spec);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{text-wrap:balance}
.display{font-family:var(--f-display);font-weight:400;letter-spacing:.02em;line-height:1.18;margin:0}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}

/* NAV */
.nav{position:absolute;inset:0 0 auto 0;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--text)}
.brand b{font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.12em}
.brand span{font-size:13px;color:var(--muted)}
.links{display:flex;gap:30px;font-size:14px;font-weight:500}
.links a{color:var(--muted);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent}
.links a:hover,.links a[aria-current]{color:var(--text);border-color:var(--teal)}
.pill{height:46px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.pill.primary{background:linear-gradient(90deg,#35B6F0,#2BD4C8);color:#03161B;box-shadow:0 0 28px rgba(43,212,200,.35)}
.pill.primary:hover{box-shadow:0 0 40px rgba(43,212,200,.55)}
.pill.outline{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.pill.outline:hover{border-color:var(--teal);color:var(--teal)}
.me{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 6px;border-radius:999px;color:var(--text);text-decoration:none;font-size:14px;font-weight:600}
.me i{width:30px;height:30px;border-radius:50%;background:var(--grad);display:block}

/* HERO */
.hero{position:relative;height:min(900px,94svh);min-height:680px;background:var(--void);overflow:hidden}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(243,248,250,.85) 0%,rgba(243,248,250,.45) 38%,rgba(243,248,250,0) 60%),
  linear-gradient(0deg,rgba(243,248,250,1) 0%,rgba(243,248,250,0) 18%);z-index:1}
.cross{position:absolute;z-index:2;color:var(--muted);font:300 22px var(--f-spec);pointer-events:none;opacity:.7}
.where{position:absolute;z-index:3;right:28px;top:110px;text-align:right;font-size:13px;line-height:1.6;color:var(--muted);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.where svg{opacity:.8}
.hero-copy{position:relative;z-index:3;padding-top:180px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:1280px}
.hero-copy .kicker{margin:0;font-size:15px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-copy .kicker b{color:var(--text);font-weight:600}
.tag{font-family:var(--f-spec);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px}
.hero-copy h1{font-size:clamp(28px,4.2vw,58px);max-width:15ch}
.hero-copy .sub{margin:0;max-width:44ch;font-size:17px;color:var(--muted)}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;width:min(680px,100%)}
.search{flex:1 1 320px;display:flex;gap:8px;align-items:center;border-radius:999px;padding:5px 5px 5px 22px}
.search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:500 15px var(--f-body);color:var(--text);height:44px}
.search input::placeholder{color:#5F7780}
.search button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hud{position:absolute;z-index:3;left:0;right:0;bottom:26px}
.hud .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.looks{display:flex;flex-direction:column;gap:8px}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px}
.seg button{height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:600 14px var(--f-body);color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:8px}
.seg button i{width:10px;height:10px;border-radius:50%;display:block}
.seg button[aria-pressed="true"]{background:rgba(43,212,200,.14);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.spec{font-family:var(--f-spec);font-size:12px;letter-spacing:.08em;color:var(--muted);text-align:right;border-radius:12px;padding:10px 14px;line-height:1.75}
.spec b{color:var(--teal);font-weight:500}

/* MARQUEE */
.band{border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(46,124,246,.10),rgba(43,212,200,.10));overflow:hidden;white-space:nowrap;padding-block:20px}
.band-track{display:inline-flex;gap:56px;font-family:var(--f-display);font-size:17px;letter-spacing:.12em;color:var(--text);animation:roll 42s linear infinite}
.band-track em{font-style:normal;color:var(--teal)}
@keyframes roll{to{transform:translateX(-50%)}}

/* SECTIONS */
.sections{background:
  radial-gradient(900px 500px at 85% 0%,rgba(43,212,200,.22),transparent 70%),
  radial-gradient(800px 600px at 0% 60%,rgba(46,124,246,.22),transparent 70%),
  var(--void)}
section.block{padding-block:96px;position:relative}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.head h2{font-size:clamp(24px,2.8vw,36px)}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.path{position:relative;border-radius:22px;padding:36px;display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.path:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 0 60px rgba(43,212,200,.12)}
.path h3{font-family:var(--f-display);font-weight:400;font-size:24px;margin:0}
.path p{margin:0;color:var(--muted);max-width:46ch}
.path .pill{align-self:flex-start;margin-top:8px}
.path .glow{position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(53,182,240,.35),transparent 70%);pointer-events:none}
.path.alt .glow{background:radial-gradient(circle,rgba(43,212,200,.35),transparent 70%)}
.path svg{position:absolute;right:-20px;top:10px;opacity:.5}
.path,.item,.seg,.spec,.search{box-shadow:0 18px 40px rgba(11,60,80,.08)}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:18px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;scrollbar-color:var(--line-strong) transparent}
.item{scroll-snap-align:start;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .2s ease,box-shadow .2s ease}
.item:hover{border-color:var(--line-strong);box-shadow:0 0 40px rgba(43,212,200,.12)}
.item canvas{width:100%;height:150px;border-radius:12px;background:radial-gradient(circle at 50% 40%,#FFFFFF,#D3E7EC 80%);display:block}
.item h3{margin:0;font-size:15px;font-weight:600;line-height:1.35}
.item .row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:10px;font-variant-numeric:tabular-nums}
.item .price{display:flex;flex-direction:column}
.item .price b{font-size:18px}
.item .price span{font-family:var(--f-spec);font-size:11px;color:var(--muted)}
.item .add{height:36px;padding:0 16px;border-radius:999px;border:0;background:linear-gradient(90deg,#35B6F0,#2BD4C8);color:#03161B;font:600 13px var(--f-body);cursor:pointer}
.stock{font-family:var(--f-spec);font-size:11px;color:var(--teal);border:1px solid var(--line);border-radius:999px;padding:3px 10px;align-self:flex-start}

.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.process div{border-top:1px solid var(--line-strong);padding-top:20px}
.process h3{margin:0 0 8px;font-size:18px;font-weight:600}
.process p{margin:0;color:var(--muted)}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

footer{border-top:1px solid var(--line);padding-block:56px 36px;background:var(--void)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
footer b{font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:.12em}
footer .col{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--muted)}
footer .col strong{color:var(--text)}
footer a{color:var(--muted)}

@media (max-width:860px){
  .links,.where,.spec,.cross{display:none}
  .paths,.duo,.process{grid-template-columns:minmax(0,1fr)}
  .hero::after{background:linear-gradient(180deg,rgba(243,248,250,.85) 0%,rgba(243,248,250,.25) 55%,rgba(243,248,250,1) 100%)}
  .hero-copy{padding-top:110px}
}
@media (prefers-reduced-motion:reduce){
  .band-track{animation:none}
  .path,.item{transition:none}
}


/* ===== Multi-page app additions ===== */
.view{display:none}
.view.on{display:block}
.nav{position:fixed;background:rgba(243,248,250,.0);transition:background .25s ease,box-shadow .25s ease}
.nav.solid{background:rgba(243,248,250,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{padding-block:16px}
.nav-right{display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;border:1px solid var(--line)}
.icon-btn .count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:linear-gradient(90deg,#1E9FD8,#11B5A4);color:#03161B;font:600 11px var(--f-body);display:flex;align-items:center;justify-content:center}
.page{padding-top:110px;padding-bottom:96px;min-height:80vh;background:
  radial-gradient(900px 500px at 90% 0%,rgba(17,181,164,.14),transparent 70%),
  radial-gradient(800px 600px at 0% 40%,rgba(31,111,229,.10),transparent 70%),var(--void)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-block:24px 32px}
.page-head h1{font-size:clamp(26px,3.4vw,42px)}
.page-head p{margin:8px 0 0;color:var(--muted);max-width:56ch}
.crumbs{font-family:var(--f-spec);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--teal)}

.status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;border-radius:999px;padding:5px 12px;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st-pending{color:#8A5A00;background:#FFF2D6}
.st-approved{color:#0B5FA8;background:#DDEEFF}
.st-prepping{color:#5B3FB0;background:#ECE6FF}
.st-out{color:#087A73;background:#D8F5F1}
.st-returned{color:#3F5059;background:#E6ECEF}
.st-cancelled{color:#A3261D;background:#FDE3E0}
.example{font-family:var(--f-spec);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line-strong);border-radius:6px;padding:2px 6px}

.account{border-radius:18px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start;max-width:440px}
.account p{margin:4px 0 0;font-size:14px;color:var(--muted)}

.bar{border-radius:18px;padding:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;flex:0 1 180px;min-width:0}
.field.grow{flex:1 1 280px}
.field label{font-family:var(--f-spec);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.input{height:46px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(255,255,255,.9);padding:0 14px;font:500 15px var(--f-body);color:var(--text);width:100%}
.input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.days{font-family:var(--f-spec);font-size:13px;color:var(--teal);align-self:center;padding-inline:6px}

.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.cat{border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--text);cursor:pointer;text-align:left;font:inherit;transition:transform .2s ease,border-color .2s ease}
.cat:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.cat canvas{width:100%;height:110px;border-radius:12px;background:radial-gradient(circle at 50% 40%,#FFFFFF,#D3E7EC 80%)}
.cat b{font-size:16px}
.cat span{font-family:var(--f-spec);font-size:12px;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{list-style:none;border-top:1px solid var(--line-strong);padding-top:16px}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-display);font-size:14px;color:var(--teal);display:block;margin-bottom:8px}
.steps h3{margin:0 0 6px;font-size:17px}
.steps p{margin:0;color:var(--muted);font-size:15px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-block:20px}
.chip{height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.7);font:500 14px var(--f-body);color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px}
.chip small{font-family:var(--f-spec);font-size:11px;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text)}
.chip[aria-pressed="true"] small{color:#B9D3DA}
.cat-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cat-tools .meta{color:var(--muted);font-size:14px}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:#087A73}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{position:relative;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:border-color .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--line-strong);box-shadow:0 22px 48px rgba(11,60,80,.12)}
.card.sel{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(30,159,216,.35)}
.card canvas{width:100%;height:140px;border-radius:12px;background:radial-gradient(circle at 50% 40%,#FFFFFF,#D3E7EC 80%);display:block}
.card h3{margin:0;font-size:14.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card .pick{position:absolute;top:22px;left:22px;width:22px;height:22px;accent-color:#087A73}
.nums{display:flex;gap:12px;font-family:var(--f-spec);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.avail{font-family:var(--f-spec);font-size:11.5px;font-weight:500;border-radius:999px;padding:3px 10px;align-self:flex-start;color:#087A73;background:#D8F5F1}
.avail.low{color:#8A5A00;background:#FFF2D6}
.avail.none{color:#A3261D;background:#FDE3E0}
.card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.rate b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.rate span{font-family:var(--f-spec);font-size:11px;color:var(--muted)}
.btns{display:flex;gap:6px;align-items:center}
.sm{height:36px;padding:0 14px;border-radius:999px;font:600 13px var(--f-body);cursor:pointer;border:1px solid var(--line-strong);background:transparent;color:var(--text)}
.sm.go{border:0;background:linear-gradient(90deg,#1E9FD8,#11B5A4);color:#03161B}
.stepper{display:flex;align-items:center;border:1px solid var(--text);border-radius:999px;padding:2px}
.stepper button{width:32px;height:32px;border-radius:50%;border:0;background:transparent;font-size:17px;cursor:pointer;color:var(--text)}
.stepper button:last-child{background:var(--text);color:#fff}
.stepper span{min-width:28px;text-align:center;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.empty{padding:64px 24px;text-align:center;border:1px dashed var(--line-strong);border-radius:18px;color:var(--muted)}

.selbar,.cartbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;width:min(760px,calc(100% - 32px));border-radius:18px;padding:12px 12px 12px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#0B1A20;color:#fff;box-shadow:0 24px 50px rgba(0,0,0,.25)}
.selbar span,.cartbar span{font-size:14px}
.cartbar small{display:block;color:#9FB6BE;font-size:12px}

.scrim{position:fixed;inset:0;background:rgba(11,26,32,.35);z-index:40;backdrop-filter:blur(2px)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:41;background:var(--void);border-left:1px solid var(--line);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer header,.modal header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer h2,.modal h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:18px}
.drawer .body{flex:1;overflow:auto;padding:16px 22px;display:flex;flex-direction:column;gap:12px}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px;border-radius:14px}
.line b{font-size:14px;line-height:1.35}
.line .sub{font-family:var(--f-spec);font-size:11.5px;color:var(--muted)}
.line .amt{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.line .ctl{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
.link{background:none;border:0;color:var(--teal);font:600 13px var(--f-body);cursor:pointer;padding:6px 0}
.drawer footer{border-top:1px solid var(--line);padding:16px 22px;display:flex;flex-direction:column;gap:10px}
.sum{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.sum.total{color:var(--text);font-size:18px;font-weight:600}
.err{color:#A3261D;font-size:13px;margin:0}
.modal{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto;background:var(--void);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px rgba(11,26,32,.25)}
.modal .content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:22px}
.modal canvas{width:100%;height:240px;border-radius:16px;background:radial-gradient(circle at 50% 40%,#FFFFFF,#D3E7EC 80%)}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table td{padding:9px 0;border-bottom:1px solid var(--line)}
.spec-table td:last-child{text-align:right;font-family:var(--f-spec);font-variant-numeric:tabular-nums}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
.tile{border-radius:18px;padding:18px 20px}
.tile b{display:block;font-family:var(--f-display);font-weight:400;font-size:28px;margin-top:6px;font-variant-numeric:tabular-nums}
.tile small{color:var(--muted);font-size:13px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:12px}
.rental{border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.r-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.r-id{font-family:var(--f-spec);font-size:12px;letter-spacing:.1em;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.r-top h3{margin:4px 0 0;font-size:19px}
.r-meta{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.r-meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.track div{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.track div::before{content:"";height:5px;border-radius:3px;background:var(--line)}
.track div.done::before{background:linear-gradient(90deg,#1E9FD8,#11B5A4)}
.track div.done{color:var(--text)}
.track.cancel div::before{background:#F3C9C4}
.r-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.items-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.items-table th{text-align:left;font-family:var(--f-spec);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 0;border-bottom:1px solid var(--line-strong)}
.items-table td{padding:10px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.items-table td:not(:first-child),.items-table th:not(:first-child){text-align:right}
.scroll-x{overflow-x:auto}
.confirm{display:flex;gap:8px;align-items:center;font-size:14px;color:#A3261D;flex-wrap:wrap}

.toast{position:fixed;top:calc(84px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:60;background:#0B1A20;color:#fff;border-radius:14px;padding:12px 18px;font-size:14px;box-shadow:0 18px 40px rgba(0,0,0,.2);max-width:calc(100% - 32px)}

@media (max-width:860px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal .content{grid-template-columns:minmax(0,1fr)}
  .nav-right .me span{display:none}
}
@media (max-width:480px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .nav .wrap{flex-wrap:wrap;row-gap:10px}
  .links{display:flex !important;order:3;width:100%;overflow-x:auto;gap:22px;white-space:nowrap}
  .hero-copy{padding-top:150px !important}
  .page{padding-top:150px}
}

/* ===== My profile ===== */
.me i{display:flex;align-items:center;justify-content:center;font:600 12px var(--f-body);color:#03161B}
.who{display:flex;gap:18px;align-items:center}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font:400 22px var(--f-display);color:#fff;flex:none;box-shadow:0 12px 30px rgba(17,181,164,.3)}
.prof{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.pnav{position:sticky;top:96px;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:2px}
.pnav a{padding:10px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pnav a:hover{color:var(--text);background:rgba(30,159,216,.08)}
.pnav a[aria-current]{color:var(--text);background:rgba(17,181,164,.14)}
.pnav a .dot{width:8px;height:8px;border-radius:50%;background:#E8A23A;flex:none}
.pnav a .dot.ok{background:#11B5A4}
.pcol{display:flex;flex-direction:column;gap:20px;min-width:0}
.psec{border-radius:20px;padding:24px;scroll-margin-top:96px;display:flex;flex-direction:column;gap:16px}
.psec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.psec h2{margin:4px 0 0;font-size:20px;font-weight:600}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fgrid .field{flex:none}
.span2{grid-column:1/-1}
.field small{text-transform:none;letter-spacing:0;color:var(--muted)}
.input[aria-invalid="true"]{border-color:#C0392B;outline-color:#C0392B}
.row-end{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}
.row-end .hint{margin-right:auto}
.hint{margin:0;font-size:13px;color:var(--muted)}
.pct{font-family:var(--f-display);font-weight:400;font-size:24px}
.meter{height:8px;border-radius:4px;background:var(--line)}
.meter span{display:block;height:100%;border-radius:4px;background:var(--grad);transition:width .4s ease}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.checklist li{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--line);font-size:14px}
.checklist li i{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;color:#fff}
.checklist li.ok i{background:#11B5A4;border-color:#11B5A4}
.checklist li a{margin-left:auto;font-size:13px;font-weight:600;color:var(--teal);text-decoration:none}
.docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.doc{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;border:1px dashed var(--line-strong);cursor:pointer;background:rgba(255,255,255,.6)}
.doc:hover,.doc:focus-within{border-color:var(--cyan)}
.doc.has{border-style:solid;border-color:#11B5A4;background:rgba(17,181,164,.08)}
.doc input{position:absolute;width:1px;height:1px;opacity:0}
.doc span{display:flex;flex-direction:column;min-width:0}
.doc small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-ic{width:44px;height:44px;border-radius:10px;background:var(--text);color:#fff;font:600 11px var(--f-spec)!important;display:flex!important;align-items:center;justify-content:center;flex:none}
.addr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.addr{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:14px;background:rgba(255,255,255,.6)}
.addr b{display:flex;justify-content:space-between;gap:8px;align-items:center}
.addr .tag{font-family:var(--f-spec);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#087A73;background:#D8F5F1;border-radius:6px;padding:2px 6px}
.addr p{margin:0;color:var(--muted)}
.addr .acts{display:flex;gap:14px;margin-top:4px}
.sub-form{border-top:1px solid var(--line);padding-top:16px}
.team{display:flex;flex-direction:column;gap:8px}
.member{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.6);flex-wrap:wrap}
.member .avatar{width:38px;height:38px;font-size:12px;box-shadow:none}
.member .who2{flex:1;min-width:160px;display:flex;flex-direction:column}
.member .who2 small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.member select{height:36px;width:auto}
.invite{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.credit-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.credit-top b.big{display:block;font-family:var(--f-display);font-weight:400;font-size:34px;margin-block:4px}
.credit-top small{color:var(--muted);font-size:13px}
.bank{height:46px;border-radius:12px;border:1px solid var(--line);padding:4px 14px;display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.6)}
.bank b{font-size:14px}.bank small{font-family:var(--f-spec);font-size:11px;color:var(--muted)}
.notify{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
.notify th{font-family:var(--f-spec);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:8px 0;border-bottom:1px solid var(--line-strong);text-align:center}
.notify th:first-child{text-align:left}
.notify td{padding:12px 0;border-bottom:1px solid var(--line);text-align:center}
.notify td:first-child{text-align:left}
.notify td small{display:block;color:var(--muted);font-size:12.5px}
.switch{position:relative;display:inline-block;width:44px;height:26px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:13px;background:#C7D6DC;transition:background .2s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + span{background:#11B5A4}
.switch input:checked + span::after{transform:translateX(18px)}
.switch input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.st-incomplete{color:#3F5059;background:#E6ECEF}
.st-review{color:#8A5A00;background:#FFF2D6}
.st-verified{color:#087A73;background:#D8F5F1}
@media (max-width:860px){
  .prof{grid-template-columns:minmax(0,1fr)}
  .pnav{position:static;flex-direction:row;overflow-x:auto;white-space:nowrap}
  .fgrid,.checklist,.docs{grid-template-columns:minmax(0,1fr)}
  .who{align-items:flex-start}
  .avatar{width:56px;height:56px;font-size:18px}
}

/* ===== Motion: pop-ups, hotspots, stats ===== */
@keyframes popIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes popScale{0%{opacity:0;transform:scale(.82)}70%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
@keyframes shimmer{to{background-position:200% 50%}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}65%{transform:scale(.94)}100%{transform:scale(1)}}

.intro .hero-copy > *{animation:popIn .9s cubic-bezier(.22,1.2,.36,1) both}
.intro .hero-copy > :nth-child(1){animation-delay:.10s}
.intro .hero-copy > :nth-child(2){animation-delay:.22s}
.intro .hero-copy > :nth-child(3){animation-delay:.36s}
.intro .hero-copy > :nth-child(4){animation-delay:.50s}
.intro .hud,.intro .where{animation:popIn .9s cubic-bezier(.22,1.2,.36,1) 1.9s both}
.hero-copy h1 .grad{background-size:200% 100%;background-image:linear-gradient(90deg,#1F6FE5,#1E9FD8,#11B5A4,#1E9FD8,#1F6FE5);animation:shimmer 6s linear infinite}

.rv{opacity:0;transform:translateY(34px) scale(.96)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease var(--d,0ms),transform .8s cubic-bezier(.22,1.25,.36,1) var(--d,0ms)}
.tilting{transition:transform .12s ease-out !important;will-change:transform}
.icon-btn.bump{animation:bump .5s cubic-bezier(.22,1.2,.36,1)}

.hotspots{position:absolute;inset:0;z-index:4;pointer-events:none}
.hotspot{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.92);color:var(--text);font:400 20px/1 var(--f-body);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;box-shadow:0 8px 24px rgba(11,60,80,.18);transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.hotspot.show{transform:scale(1)}
.hotspot::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid #11B5A4;animation:ring 2s ease-out infinite;pointer-events:none}
.hotspot span{transition:transform .3s ease}
.hotspot[aria-expanded="true"]{background:var(--text);color:#fff}
.hotspot[aria-expanded="true"] span{transform:rotate(45deg)}
.hotspot:hover{box-shadow:0 0 0 6px rgba(17,181,164,.18),0 8px 24px rgba(11,60,80,.18)}
.hs-pop{position:absolute;z-index:5;width:min(290px,calc(100% - 24px));border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.9)}
.hs-pop.pop{animation:popScale .45s cubic-bezier(.22,1.2,.36,1) both}
.hs-pop h3{margin:0;font-size:16px;line-height:1.35}
.hs-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--f-spec);font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.hs-row b{font-family:var(--f-body);font-size:17px;color:var(--text)}
.hs-row small{font-size:11px;color:var(--muted);font-weight:400}
.hs-btns{display:flex;gap:8px}
.hs-btns .sm{flex:1}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-block:56px 8px}
.stat{border-left:2px solid var(--line-strong);padding:4px 0 4px 18px;display:flex;flex-direction:column;gap:4px}
.stat b{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.4vw,44px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:14px}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (prefers-reduced-motion:reduce){
  .intro .hero-copy > *,.intro .hud,.intro .where,.hero-copy h1 .grad,.hotspot::before,.hs-pop.pop{animation:none}
  .hotspot{transition:none}
}

/* ===== Project solutions ===== */
.pkgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pkg{border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:6px;color:var(--text);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.pkg:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 24px 50px rgba(11,60,80,.14)}
.pkg canvas{width:100%;aspect-ratio:5/3;height:auto;border-radius:14px;border:1px solid var(--line);margin-bottom:6px;max-width:100%}
.pkg h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:18px}
.pkg p{margin:0;color:var(--muted);font-size:14px}
.pkg-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.pkg-foot b{color:var(--text)}
.pkg .arrow{width:34px;height:34px;border-radius:50%;background:linear-gradient(90deg,#1E9FD8,#11B5A4);color:#03161B;display:flex;align-items:center;justify-content:center;font-weight:600;transition:transform .25s ease}
.pkg:hover .arrow{transform:translateX(4px)}
.pkg-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.pkg-tab{border-radius:16px;border:1px solid var(--line-strong);background:rgba(255,255,255,.7);padding:14px 16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;font:inherit;color:var(--text);transition:border-color .2s,box-shadow .2s,background .2s}
.pkg-tab b{font-size:16px}
.pkg-tab span{font-family:var(--f-spec);font-size:12px;color:var(--muted)}
.pkg-tab:hover{border-color:var(--cyan)}
.pkg-tab[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text);box-shadow:0 14px 30px rgba(11,26,32,.2)}
.pkg-tab[aria-pressed="true"] span{color:#B9D3DA}
.config{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
.config-main,.config-side{border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.config-side{position:sticky;top:96px}
.plan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.plan-head h2{margin:4px 0 0;font-family:var(--f-display);font-weight:400;font-size:22px}
.plan-tag{font-family:var(--f-spec);font-size:12px;color:#087A73;background:#D8F5F1;border-radius:999px;padding:5px 12px}
#plan{width:100%;height:auto;aspect-ratio:5/3;border-radius:16px;border:1px solid var(--line);display:block;max-width:100%}
.mini{margin:6px 0 0;font-size:15px}
.items-table tr.quoted td{color:var(--muted)}
.config .items-table{min-width:420px}
.seg-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.seg-tiers button{border-radius:12px;border:1px solid var(--line-strong);background:rgba(255,255,255,.75);padding:10px 8px;font:600 14px var(--f-body);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.seg-tiers button small{font-family:var(--f-spec);font-size:11px;font-weight:400;color:var(--muted)}
.seg-tiers button[aria-pressed="true"]{background:linear-gradient(90deg,#1E9FD8,#11B5A4);border-color:transparent;color:#03161B}
.seg-tiers button[aria-pressed="true"] small{color:#0B3A40}
.addons{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.addon{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.6);cursor:pointer}
.addon-t{display:flex;flex-direction:column;font-size:14px;font-weight:500}
.addon-t small{font-family:var(--f-spec);font-size:11.5px;color:var(--muted);font-weight:400}
.quote{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.kind{font-family:var(--f-spec);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#1F6FE5,#11B5A4);border-radius:6px;padding:2px 7px}
.kind.dry{background:var(--text)}
@media (max-width:1060px){ .pkgs{grid-template-columns:repeat(2,minmax(0,1fr))} .config{grid-template-columns:minmax(0,1fr)} .config-side{position:static} }
@media (max-width:620px){ .pkgs,.pkg-tabs{grid-template-columns:minmax(0,1fr)} }

/* ===== Showroom hero: equipment flying toward the screen ===== */
.hero.showroom{height:min(940px,96svh);min-height:640px;background:radial-gradient(120% 90% at 50% 45%,#FFFFFF 0%,#EAF7FA 45%,#CFEAF0 100%)}
.hero.showroom::after{display:none}
.hero.showroom #stage{z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38% 34% at 50% 50%,rgba(255,255,255,.82) 0%,rgba(255,255,255,.45) 55%,rgba(255,255,255,0) 100%)}
.hero.showroom .hero-copy{position:relative;z-index:3;height:100%;padding-top:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;max-width:1100px;margin:0 auto}
.hero.showroom .kicker{font-size:18px;color:#3A4E56;justify-content:center}
.hero.showroom .kicker b{color:#0B1A20}
.hero.showroom h1{font-size:clamp(30px,4.6vw,66px);line-height:1.12;text-transform:uppercase;letter-spacing:.01em;max-width:20ch;color:#0B1A20}
.hero.showroom .sub{font-size:clamp(16px,1.5vw,21px);color:#22343B;max-width:52ch;margin:0}
.hero.showroom .search{width:min(640px,100%);margin-top:8px;padding:8px 8px 8px 26px;background:rgba(150,170,178,.55);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 40px rgba(11,60,80,.16)}
.hero.showroom .search input{color:#0B1A20;height:48px;font-size:16px}
.hero.showroom .search input::placeholder{color:#F4F9FA}
.hero.showroom .search button{border-color:rgba(255,255,255,.8);color:#FFFFFF;width:46px;height:46px}
.hero.showroom .quick{display:flex;gap:10px;font-size:15px;font-weight:600;color:#4A626B}
.hero.showroom .quick a{color:#0B6E96;text-decoration:none}
.hero.showroom .quick a:hover{text-decoration:underline}
@media (max-width:860px){ .hero.showroom .hero-copy{padding-top:120px} .hero-veil{background:radial-gradient(70% 40% at 50% 50%,rgba(255,255,255,.85),rgba(255,255,255,0))} }
.hero.showroom .search{flex:none}
.hero.showroom .kicker{display:block}
.hero.showroom .hero-copy{justify-content:center;height:auto;min-height:100%}
.hero-veil{background:radial-gradient(46% 42% at 50% 50%,rgba(247,252,253,.92) 0%,rgba(247,252,253,.7) 45%,rgba(247,252,253,0) 100%)}

/* Top-right, Amazon style: account · rentals · cart */
.nav-right{gap:6px}
.acct{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid transparent;transition:border-color .2s ease,background .2s ease}
.acct:hover,.acct[aria-current]{border-color:var(--line-strong);background:rgba(255,255,255,.6)}
.acct .two{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.acct small{font:500 12px var(--f-body);color:var(--muted)}
.acct b{font:700 14px var(--f-body)}
.acct i{width:32px;height:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font:600 12px var(--f-body);color:#03161B;flex:none}
.cartbtn{position:relative;display:flex;align-items:flex-end;gap:2px;padding:6px 10px;border:1px solid transparent;border-radius:12px;background:none;color:var(--text);cursor:pointer;font:700 14px var(--f-body)}
.cartbtn:hover{border-color:var(--line-strong);background:rgba(255,255,255,.6)}
.cartbtn:focus-visible,.acct:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cart-ico{position:relative;display:block;line-height:0}
.cartbtn b{padding-bottom:3px}
.cartbtn .count{position:absolute;top:-6px;left:14px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:linear-gradient(90deg,#1E9FD8,#11B5A4);color:#03161B;font:700 11px var(--f-body);display:flex;align-items:center;justify-content:center}
.cartbtn .count[hidden]{display:none}
@media (max-width:860px){ .acct small{display:none} .acct{padding:6px 8px} }
@media (max-width:520px){ .acct .two{display:none} .acct[href="#rentals"] .two{display:flex} .cartbtn b{display:none} }

/* Sign-up suggestion, centred on the screen */
.nudge-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(11,26,32,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:nudgeFade .25s ease both}
.nudge{position:relative;width:min(420px,100%);background:var(--void);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 90px rgba(11,26,32,.3);padding:26px;display:flex;flex-direction:column;gap:12px;text-align:left;animation:nudgeIn .35s cubic-bezier(.2,.8,.2,1) both}
.nudge .label{margin:0}
.nudge h3{margin:0;font-size:22px;line-height:1.3;padding-right:40px}
.nudge p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.nudge .nudge-note{display:flex;gap:10px;align-items:flex-start;background:rgba(8,122,115,.08);color:var(--text);border-radius:12px;padding:12px 14px;font-size:14px}
.nudge .nudge-note span{flex:none;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;font:700 12px/20px var(--f-body);text-align:center;margin-top:1px}
.nudge-btns{display:flex;gap:10px;margin-top:6px}
.nudge-btns .pill{flex:1;justify-content:center;height:46px;padding:0 14px}
.nudge-x{position:absolute;top:16px;right:16px;width:36px;height:36px}
@keyframes nudgeFade{from{opacity:0}to{opacity:1}}
@keyframes nudgeIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nudge,.nudge-wrap{animation:none}}
@media (max-width:420px){.nudge-btns{flex-direction:column}}

/* Delivery / return time note on the date fields */
.field.has-tip{position:relative}
.date-tip{position:absolute;left:0;top:calc(100% + 10px);z-index:8;display:flex;align-items:center;gap:7px;white-space:nowrap;background:var(--text);color:#F3F8FA;font:600 13px var(--f-body);padding:9px 13px;border-radius:10px;box-shadow:0 12px 28px rgba(11,26,32,.22);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.date-tip::before{content:"";position:absolute;left:18px;top:-6px;width:12px;height:12px;background:var(--text);transform:rotate(45deg);border-radius:2px}
.date-tip svg{color:#2BD4C8;flex:none}
.field.tip-on .date-tip{opacity:1;transform:none}
.sum.times span:last-child{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.date-tip{transition:none}}

/* WhatsApp */
.wa-pill{background:#1FAF5B;color:#fff;align-self:flex-start;gap:9px;box-shadow:0 10px 24px rgba(31,175,91,.25)}
.wa-pill:hover{background:#178F4A}
.wa-pill:focus-visible,.wa-float:focus-visible{outline:2px solid #178F4A;outline-offset:3px}
.wa-ico{flex:none}
.wa-float{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border-radius:999px;background:#1FAF5B;color:#fff;text-decoration:none;font:600 14px var(--f-body);letter-spacing:.01em;box-shadow:0 16px 36px rgba(16,90,48,.32);transition:transform .2s ease,bottom .25s ease,background .2s ease}
.wa-float:hover{background:#178F4A;transform:translateY(-2px)}
.wa-float .wa-ico{width:22px;height:22px}
body.has-cartbar .wa-float{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
@media (max-width:700px){ .wa-float{width:56px;height:56px;padding:0;justify-content:center} .wa-float span{display:none} }
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* Footer */
footer a{text-decoration:none;transition:color .2s ease}
footer a:hover{color:var(--teal)}
footer .contact{gap:14px}
.crow{display:flex;align-items:center;gap:12px;color:var(--text)}
.crow svg{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:rgba(8,122,115,.1);color:var(--teal)}
.crow span{display:flex;flex-direction:column;line-height:1.3;font-size:15px;font-weight:600;color:var(--text)}
.crow small{font:500 11px var(--f-spec);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
a.crow:hover span{color:var(--teal)}

/* Warehouse location card (footer) */
.visit-wrap{margin-bottom:48px}
.visit{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--void);box-shadow:0 30px 70px rgba(11,60,80,.10)}
.visit-map{position:relative;display:block;min-height:320px;overflow:hidden;background:#DCEBEF}
.visit-map>svg{position:absolute;inset:0;width:100%;height:100%}
.m-ground{fill:#DCEAEE}
.m-block{fill:#E9F3F5}
.m-park{fill:#CFE7D8}
.m-wadi{fill:none;stroke:#B9DCEB;stroke-width:14;stroke-linecap:round}
.m-road{fill:none;stroke:#FFFFFF;stroke-width:7;stroke-linecap:round}
.m-major{stroke-width:16;stroke:#FFFFFF;filter:drop-shadow(0 1px 0 rgba(11,60,80,.08))}
.m-minor{stroke-width:4;stroke:#F6FBFC}
.m-label{font:600 15px var(--f-spec);letter-spacing:.4em;fill:#8FAAB2}
.m-district{font-size:13px;fill:#087A73;letter-spacing:.32em}
.visit-map .pin{position:absolute;left:66%;top:47%;width:0;height:0}
.visit-map .pin b{position:absolute;left:-26px;top:-60px;width:52px;height:52px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);background:var(--grad);box-shadow:0 14px 30px rgba(8,122,115,.45);display:flex;align-items:center;justify-content:center;animation:pinDrop .9s cubic-bezier(.2,.9,.3,1.3) both}
.visit-map .pin b svg{transform:rotate(45deg);color:#04161B}
.visit-map .pin .ring{position:absolute;left:-14px;top:-7px;width:28px;height:14px;border-radius:50%;border:2px solid #11B5A4;animation:ripple 2.4s ease-out infinite}
.visit-map .pin .r2{animation-delay:1.2s}
.pin-tag{position:absolute;left:calc(66% + 34px);top:calc(47% - 58px);background:var(--text);color:#F3F8FA;font:600 13px var(--f-body);padding:8px 12px;border-radius:10px;white-space:nowrap;box-shadow:0 12px 26px rgba(11,26,32,.22)}
.visit-map:hover .pin b{animation:pinBob .8s ease}
.visit-map:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
@keyframes ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(4.2);opacity:0}}
@keyframes pinDrop{0%{opacity:0;transform:translateY(-30px) rotate(-45deg)}100%{opacity:1;transform:rotate(-45deg)}}
@keyframes pinBob{50%{transform:translateY(-8px) rotate(-45deg)}}
.visit-card{padding:34px 34px 30px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.visit-card .label{margin:0}
.visit-card h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.25}
.visit-card address{font-style:normal;font-size:16px;line-height:1.6;color:var(--text)}
.visit-hours{display:flex;flex-wrap:wrap;gap:8px}
.visit-hours span{display:flex;align-items:center;gap:6px;font:600 13px var(--f-body);padding:7px 12px;border-radius:999px;background:rgba(8,122,115,.09);color:var(--teal)}
.visit-hours i{font-style:normal}
.visit-card .pill{align-self:flex-start;margin-top:6px}
@media (max-width:860px){ .visit{grid-template-columns:1fr} .visit-map{min-height:240px} .pin-tag{display:none} }
@media (prefers-reduced-motion:reduce){ .visit-map .pin b,.visit-map .pin .ring{animation:none} }
.pin-district{position:absolute;left:66%;top:calc(47% + 22px);transform:translateX(-50%);font:600 12px var(--f-spec);letter-spacing:.32em;color:#087A73;background:rgba(243,248,250,.85);padding:3px 8px;border-radius:6px}

/* ===== Language switch ===== */
.langbtn{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.6);color:var(--text);font:600 14px "IBM Plex Sans Arabic",var(--font-body);cursor:pointer;white-space:nowrap;margin-inline-end:4px}
.langbtn:hover{background:#fff;border-color:var(--teal)}
.langbtn:lang(en){font-family:var(--font-body)}
@media (max-width:520px){ .langbtn{height:32px;padding:0 11px;font-size:13px} }

/* ===== Arabic: right-to-left ===== */
html[lang="ar"]{
  --f-display:"Readex Pro","IBM Plex Sans Arabic",var(--font-display);
  --f-body:"IBM Plex Sans Arabic",var(--font-body);
  --f-spec:"IBM Plex Sans Arabic",var(--font-mono);
}
html[lang="ar"] body{line-height:1.7}
html[lang="ar"] *,html[lang="ar"] *::before,html[lang="ar"] *::after{letter-spacing:0 !important}
html[lang="ar"] .label,html[lang="ar"] .tag,html[lang="ar"] .items-table th{text-transform:none}
html[lang="ar"] .label{font-size:13px;font-weight:500}
html[lang="ar"] .display{font-weight:500;line-height:1.4}
html[lang="ar"] .brand b{font-family:var(--font-display)}
html[lang="ar"] .brand{direction:rtl}
/* keep emails, phone numbers, links and ID numbers left-to-right */
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="url"]{direction:ltr;text-align:right}
html[dir="rtl"] .r-id,html[dir="rtl"] .who2 small{unicode-bidi:plaintext}
/* mirrored positions */
html[dir="rtl"] .path .glow{right:auto;left:-80px}
html[dir="rtl"] .path svg{right:auto;left:-20px;transform:scaleX(-1) rotate(-14deg) !important}
html[dir="rtl"] .icon-btn .count{right:auto;left:-4px}
html[dir="rtl"] .cat,html[dir="rtl"] .pkg-tab{text-align:right}
html[dir="rtl"] .card .pick{left:auto;right:22px}
html[dir="rtl"] .selbar,html[dir="rtl"] .cartbar{padding:12px 20px 12px 12px}
html[dir="rtl"] .drawer{right:auto;left:0;border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] .line .amt,html[dir="rtl"] .spec-table td:last-child{text-align:left}
html[dir="rtl"] .items-table th{text-align:right}
html[dir="rtl"] .items-table td:not(:first-child),html[dir="rtl"] .items-table th:not(:first-child){text-align:left}
html[dir="rtl"] .row-end .hint{margin-right:0;margin-left:auto}
html[dir="rtl"] .checklist li a{margin-left:0;margin-right:auto}
html[dir="rtl"] .notify th:first-child,html[dir="rtl"] .notify td:first-child{text-align:right}
html[dir="rtl"] .switch span::after{left:auto;right:3px}
html[dir="rtl"] .switch input:checked + span::after{transform:translateX(-18px)}
html[dir="rtl"] .stat{border-left:0;border-right:2px solid var(--line-strong);padding:4px 18px 4px 0}
html[dir="rtl"] .pkg:hover .arrow{transform:translateX(-4px)}
html[dir="rtl"] .cartbtn .count{left:auto;right:14px}
html[dir="rtl"] .nudge h3{padding-right:0;padding-left:40px}
html[dir="rtl"] .nudge-x{right:auto;left:16px}
html[dir="rtl"] .date-tip{left:auto;right:0}
html[dir="rtl"] .date-tip::before{left:auto;right:18px}
html[dir="rtl"] .wa-float{right:auto;left:20px;padding:0 14px 0 18px}
@media (max-width:700px){ html[dir="rtl"] .wa-float{padding:0} }
html[dir="rtl"] .rate[style*="text-align:right"]{text-align:left !important}
/* the moving band and the map illustration are not mirrored */
html[dir="rtl"] .band{direction:ltr}
html[dir="rtl"] .band-track span{direction:rtl}
html[dir="rtl"] .visit-map{direction:ltr}
html[dir="rtl"] .pin-district{letter-spacing:0}
html[lang="ar"] .hero.showroom h1{font-size:clamp(28px,4vw,56px);line-height:1.35;max-width:18ch}

/* =====================================================================
   MIDNIGHT THEME: matches the homepage video (deep navy studio, cyan and
   violet stage light, glossy glass). Everything below overrides the light
   look above, so the site reads as one piece with the video.
   ===================================================================== */
:root{
  --void:#050A16;
  --deep:#0A1324;
  --panel:#0B1528;
  --glass:linear-gradient(180deg,rgba(24,38,70,.72),rgba(10,18,36,.78));
  --line:rgba(130,180,255,.14);
  --line-strong:rgba(130,190,255,.32);
  --text:#EAF2FF;
  --muted:#8FA3C4;
  --teal:#5EE6F5;
  --cyan:#4FC3FF;
  --blue:#4D7DFF;
  --violet:#3DE59A;
  --grad:linear-gradient(90deg,#4FD8FF 0%,#2FD0C8 55%,#3DE59A 100%);
  --glow-c:rgba(79,195,255,.35);
  --glow-v:rgba(61,229,154,.30);
  color-scheme:dark;
}
body{background:var(--void);color:var(--text)}
::selection{background:rgba(79,195,255,.35);color:#fff}
a{color:var(--teal)}

/* glossy glass: a soft highlight along the top edge, deep shadow below */
.glass{background:var(--glass);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.015),0 24px 60px rgba(0,0,0,.38)}
.path,.item,.seg,.spec,.search{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.38)}
.path:hover,.item:hover,.card:hover,.pkg:hover,.cat:hover{border-color:rgba(130,200,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(79,195,255,.12),0 0 50px var(--glow-c),0 30px 70px rgba(0,0,0,.45)}
.path .glow{background:radial-gradient(circle,var(--glow-c),transparent 70%)}
.path.alt .glow{background:radial-gradient(circle,var(--glow-v),transparent 70%)}
.path svg path,.path svg rect{stroke:#3B5A8C}

/* buttons */
.pill.primary{background:var(--grad);color:#050A16;box-shadow:0 0 30px var(--glow-c),inset 0 1px 0 rgba(255,255,255,.45)}
.pill.primary:hover{box-shadow:0 0 46px rgba(47,208,200,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.pill.outline{color:var(--text);border-color:var(--line-strong);background:rgba(255,255,255,.03)}
.pill.outline:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 0 24px rgba(94,230,245,.18)}
.pill.glass{color:var(--text)}
.item .add,.sm.go,.pkg .arrow,.icon-btn .count,.cartbtn .count,.track div.done::before,.seg-tiers button[aria-pressed="true"]{background:var(--grad);color:#050A16}
.sm{color:var(--text);border-color:var(--line-strong)}
.sm:hover{border-color:var(--teal)}
.link{color:var(--teal)}

/* nav over the video, solid when scrolled or on inner pages */
.nav.solid{background:rgba(5,10,22,.82);box-shadow:0 1px 0 var(--line)}
.brand,.acct,.cartbtn{color:var(--text)}
.acct:hover,.acct[aria-current],.cartbtn:hover{background:rgba(255,255,255,.06);border-color:var(--line-strong)}
.langbtn{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--line-strong)}
.langbtn:hover{background:rgba(255,255,255,.12);border-color:var(--teal)}

/* ---------- HERO: the video ---------- */
.hero.showroom{height:100svh;min-height:640px;max-height:1100px;background:#050A16 url("../media/hero-poster.jpg") center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .8s ease}
.hero-video.on{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(0deg,rgba(5,10,22,.97) 0%,rgba(5,10,22,.82) 22%,rgba(5,10,22,.25) 52%,rgba(5,10,22,0) 66%),
  linear-gradient(90deg,rgba(5,10,22,.72) 0%,rgba(5,10,22,.25) 40%,rgba(5,10,22,0) 62%),
  linear-gradient(180deg,rgba(5,10,22,.7) 0%,rgba(5,10,22,0) 16%)}
html[dir="rtl"] .hero-shade{background:
  linear-gradient(0deg,rgba(5,10,22,.97) 0%,rgba(5,10,22,.82) 22%,rgba(5,10,22,.25) 52%,rgba(5,10,22,0) 66%),
  linear-gradient(270deg,rgba(5,10,22,.72) 0%,rgba(5,10,22,.25) 40%,rgba(5,10,22,0) 62%),
  linear-gradient(180deg,rgba(5,10,22,.7) 0%,rgba(5,10,22,0) 16%)}
.hero-veil{display:none}
.hero.showroom .hero-copy{height:100%;min-height:0;padding-top:0;padding-bottom:clamp(40px,7vh,84px);justify-content:flex-end;align-items:flex-start;text-align:start;gap:18px;max-width:1280px}
.hero.showroom .kicker{font-size:15px;color:#A9BAD6;display:block}
.hero.showroom .kicker b{color:#fff}
.hero.showroom h1{color:#fff;font-size:clamp(28px,3.5vw,52px);line-height:1.12;max-width:17ch;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.hero.showroom .sub{color:#C3D1E8;font-size:clamp(15px,1.3vw,19px);max-width:48ch}
.hero.showroom .search{width:min(560px,100%);margin-top:4px;padding:7px 7px 7px 24px;background:rgba(14,24,46,.62);border:1px solid rgba(160,200,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 50px rgba(0,0,0,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[dir="rtl"] .hero.showroom .search{padding:7px 24px 7px 7px}
.hero.showroom .search input{color:#fff}
.hero.showroom .search input::placeholder{color:#94A7C6}
.hero.showroom .search button{background:var(--grad);border:0;color:#050A16;box-shadow:0 0 22px var(--glow-c)}
.hero.showroom .quick{color:#6D80A3;font-size:15px}
.hero.showroom .quick a{color:var(--teal)}
@media (max-width:860px){
  .hero.showroom{height:100svh;min-height:600px}
  .hero.showroom .hero-copy{padding-top:0 !important;padding-bottom:36px}
  .hero-shade{background:linear-gradient(0deg,rgba(5,10,22,.98) 0%,rgba(5,10,22,.86) 38%,rgba(5,10,22,.2) 64%,rgba(5,10,22,0) 76%),linear-gradient(180deg,rgba(5,10,22,.85) 0%,rgba(5,10,22,0) 24%)}
  html[dir="rtl"] .hero-shade{background:linear-gradient(0deg,rgba(5,10,22,.98) 0%,rgba(5,10,22,.86) 38%,rgba(5,10,22,.2) 64%,rgba(5,10,22,0) 76%),linear-gradient(180deg,rgba(5,10,22,.85) 0%,rgba(5,10,22,0) 24%)}
}

/* ---------- sections ---------- */
.band{background:linear-gradient(90deg,rgba(79,195,255,.07),rgba(61,229,154,.09));border-color:var(--line)}
.band-track{color:#DCE7FA}
.band-track em{color:var(--violet)}
.sections{background:
  radial-gradient(900px 520px at 88% 0%,rgba(61,229,154,.14),transparent 70%),
  radial-gradient(800px 600px at 0% 55%,rgba(79,195,255,.12),transparent 70%),
  radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.35),transparent),
  var(--void)}
.page{background:
  radial-gradient(900px 520px at 92% 0%,rgba(61,229,154,.13),transparent 70%),
  radial-gradient(800px 600px at 0% 35%,rgba(79,195,255,.10),transparent 70%),var(--void)}
.stat{border-color:rgba(130,190,255,.3)}
.process div,.steps li{border-color:rgba(130,190,255,.28)}
.steps li::before{color:var(--teal)}

/* product art tiles: a small dark stage with a cyan floor glow */
.item canvas,.cat canvas,.card canvas,.modal canvas{background:
  radial-gradient(60% 55% at 50% 42%,rgba(79,195,255,.22),transparent 72%),
  radial-gradient(90% 80% at 50% 40%,#1A2A4C,#0A1428 85%)}
.pkg canvas,#plan{border-color:var(--line)}

/* forms */
.input{background:rgba(6,12,26,.72);border-color:var(--line-strong);color:var(--text)}
.input::placeholder{color:#6F82A3}
.input:focus{outline-color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(79,195,255,.12)}
select.input option{background:#0B1528;color:var(--text)}
.input[aria-invalid="true"]{border-color:#FF7A7A;outline-color:#FF7A7A}
.err,.confirm{color:#FF8E8E}
.days{color:var(--teal)}
.toggle input,.card .pick{accent-color:#4FC3FF}

/* chips, tabs, segmented */
.chip{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-strong)}
.chip:hover{border-color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--text);color:#050A16;border-color:var(--text)}
.chip[aria-pressed="true"] small{color:#3B4C6B}
.pkg-tab,.seg-tiers button{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-strong)}
.pkg-tab[aria-pressed="true"]{background:var(--grad);color:#050A16;border-color:transparent;box-shadow:0 0 34px var(--glow-c)}
.pkg-tab[aria-pressed="true"] span{color:#14203A}
.seg-tiers button[aria-pressed="true"] small{color:#14203A}
.seg button[aria-pressed="true"]{background:rgba(79,195,255,.14)}

/* status colours on dark */
.st-pending,.st-review,.avail.low{color:#FFCB74;background:rgba(255,186,73,.13)}
.st-approved{color:#7CB8FF;background:rgba(77,125,255,.16)}
.st-prepping{color:#CDA6FF;background:rgba(61,229,154,.16)}
.st-out,.st-verified,.avail{color:#6FF0DD;background:rgba(43,212,190,.13)}
.st-returned,.st-incomplete{color:#A8B6CE;background:rgba(160,180,210,.12)}
.st-cancelled,.avail.none{color:#FF9A9A;background:rgba(255,99,99,.13)}
.plan-tag,.addr .tag{color:#6FF0DD;background:rgba(43,212,190,.13)}
.stock{color:var(--teal);border-color:var(--line-strong)}
.kind{background:var(--grad);color:#050A16}
.kind.dry{background:#DCE7FA;color:#050A16}
.example{color:var(--muted)}
.track div::before{background:rgba(255,255,255,.08)}
.track.cancel div::before{background:rgba(255,99,99,.25)}

/* panels, drawer, modal */
.drawer,.modal,.nudge{background:linear-gradient(180deg,#0E1A33,#08101F);border-color:var(--line-strong);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.scrim,.nudge-wrap{background:rgba(2,5,12,.6)}
.selbar,.cartbar{background:linear-gradient(90deg,#101C38,#0B1428);border:1px solid var(--line-strong);box-shadow:0 0 40px rgba(79,195,255,.15),0 24px 50px rgba(0,0,0,.5)}
.cartbar small{color:#93A6C8}
.toast{background:#101C38;border:1px solid var(--line-strong);color:#fff;box-shadow:0 0 30px rgba(79,195,255,.18),0 18px 40px rgba(0,0,0,.5)}
.icon-btn{border-color:var(--line-strong);color:var(--text)}
.stepper{border-color:var(--line-strong)}
.stepper button{color:var(--text)}
.stepper button:last-child{background:var(--grad);color:#050A16}
.nudge .nudge-note{background:rgba(79,195,255,.08)}
.nudge .nudge-note span{background:var(--cyan);color:#050A16}
.date-tip{background:#EAF2FF;color:#050A16}
.date-tip::before{background:#EAF2FF}
.date-tip svg{color:#4D7DFF}

/* profile bits */
.doc,.addr,.member,.bank,.addon{background:rgba(255,255,255,.03);border-color:var(--line)}
.doc{border-color:var(--line-strong)}
.doc.has{border-color:#3FD9C4;background:rgba(43,212,190,.08)}
.doc-ic{background:var(--grad);color:#050A16}
.switch span{background:#22314F}
.switch input:checked + span{background:linear-gradient(90deg,#4FD8FF,#8E8BFF)}
.pnav a:hover{background:rgba(79,195,255,.08)}
.pnav a[aria-current]{background:rgba(47,208,200,.16)}
.checklist li.ok i,.pnav a .dot.ok{background:#3FD9C4;border-color:#3FD9C4}
.avatar{box-shadow:0 0 34px var(--glow-c)}

/* footer + location card: night map */
footer{background:#040812;border-top-color:var(--line)}
footer .col strong,.crow span,.visit-card address{color:var(--text)}
.crow svg{background:rgba(79,195,255,.1);color:var(--teal)}
.visit{background:linear-gradient(180deg,#0D1830,#08101F);border-color:var(--line);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.visit-map{background:#0A142A}
.m-ground{fill:#0A142A}
.m-block{fill:#101E3B}
.m-park{fill:#0E2A33}
.m-wadi{stroke:#14325A}
.m-road{stroke:#22365F}
.m-major{stroke:#2E4A80;filter:drop-shadow(0 0 6px rgba(79,195,255,.25))}
.m-minor{stroke:#1A2A4C}
.m-label{fill:#4A6491}
.visit-map .pin b{box-shadow:0 0 30px var(--glow-c),0 14px 30px rgba(0,0,0,.5)}
.visit-map .pin .ring{border-color:var(--cyan)}
.pin-tag{background:#EAF2FF;color:#050A16}
.pin-district{color:var(--teal);background:rgba(5,10,22,.8)}
.visit-hours span{background:rgba(79,195,255,.1);color:var(--teal)}
.visit-wrap .visit{flex:1 1 100%}

/* =====================================================================
   STAGE ATMOSPHERE BACKGROUND (replaces the flat black)
   Deep blue base, drifting cyan / violet / blue light pools, faint stage
   beams from above, a stage-floor grid fading in at the bottom and fine
   film grain. It sits fixed behind every page; sections are see-through.
   ===================================================================== */
:root{ --void:#0A1531; --base-a:#0C1A3C; --base-b:#081129; }
html{background:var(--base-b)}
body{background:transparent;position:relative;isolation:isolate}
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    linear-gradient(104deg,transparent 30%,rgba(140,200,255,.045) 37%,transparent 44%),
    linear-gradient(76deg,transparent 52%,rgba(120,240,190,.04) 58%,transparent 64%),
    linear-gradient(180deg,var(--base-a) 0%,#0A1533 45%,var(--base-b) 100%)}
.bg-fx::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-2%;height:46%;
  background-image:linear-gradient(rgba(120,180,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.10) 1px,transparent 1px);
  background-size:56px 56px;transform:perspective(700px) rotateX(62deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 85%);mask-image:linear-gradient(0deg,#000 0%,transparent 85%)}
.bg-fx::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.bg-fx i{position:absolute;border-radius:50%;will-change:transform}
.bg-fx .b1{width:70vmax;height:70vmax;left:-22vmax;top:-26vmax;background:radial-gradient(circle,rgba(79,195,255,.22) 0%,rgba(79,195,255,.07) 40%,transparent 68%);animation:drift1 38s ease-in-out infinite alternate}
.bg-fx .b2{width:64vmax;height:64vmax;right:-20vmax;top:6vh;background:radial-gradient(circle,rgba(61,229,154,.22) 0%,rgba(61,229,154,.07) 42%,transparent 68%);animation:drift2 46s ease-in-out infinite alternate}
.bg-fx .b3{width:80vmax;height:60vmax;left:12vw;bottom:-34vmax;background:radial-gradient(closest-side,rgba(52,110,255,.26),rgba(52,110,255,.06) 55%,transparent);animation:drift3 54s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,22vh) scale(1.08)}}
@keyframes drift2{to{transform:translate(-16vw,18vh) scale(1.12)}}
@keyframes drift3{to{transform:translate(-10vw,-8vh) scale(.94)}}
@media (prefers-reduced-motion:reduce){ .bg-fx i{animation:none} }

/* sections let the atmosphere through */
.sections,.page{background:transparent}
.band{background:linear-gradient(90deg,rgba(79,195,255,.10),rgba(61,229,154,.12));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
footer{background:linear-gradient(180deg,rgba(6,12,30,.35),rgba(4,8,20,.85));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.glass{background:linear-gradient(180deg,rgba(30,48,92,.55),rgba(12,22,48,.65));backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.nav.solid{background:rgba(14,18,23,.84)}
.drawer,.modal,.nudge{background:linear-gradient(180deg,#13224A,#0A1430)}
/* the video fades into the new blue, not into black */
.hero.showroom{background-color:var(--base-a)}
.hero-shade{background:
  linear-gradient(0deg,rgba(12,26,60,1) 0%,rgba(12,26,60,.82) 20%,rgba(12,26,60,.25) 50%,rgba(12,26,60,0) 66%),
  linear-gradient(90deg,rgba(8,16,40,.7) 0%,rgba(8,16,40,.25) 40%,rgba(8,16,40,0) 62%),
  linear-gradient(180deg,rgba(8,16,40,.65) 0%,rgba(8,16,40,0) 16%)}
html[dir="rtl"] .hero-shade{background:
  linear-gradient(0deg,rgba(12,26,60,1) 0%,rgba(12,26,60,.82) 20%,rgba(12,26,60,.25) 50%,rgba(12,26,60,0) 66%),
  linear-gradient(270deg,rgba(8,16,40,.7) 0%,rgba(8,16,40,.25) 40%,rgba(8,16,40,0) 62%),
  linear-gradient(180deg,rgba(8,16,40,.65) 0%,rgba(8,16,40,0) 16%)}
@media (max-width:860px){
  .hero-shade,html[dir="rtl"] .hero-shade{background:linear-gradient(0deg,rgba(12,26,60,1) 0%,rgba(12,26,60,.86) 38%,rgba(12,26,60,.2) 64%,rgba(12,26,60,0) 76%),linear-gradient(180deg,rgba(8,16,40,.8) 0%,rgba(8,16,40,0) 24%)}
}

/* ===== Product photos (studio renders of the real models, or the Rentman photo) ===== */
img.pimg{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:radial-gradient(90% 80% at 50% 40%,#1A2A4C,#0A1428 85%);box-shadow:inset 0 0 0 1px rgba(130,190,255,.08)}
.item img.pimg{height:150px;aspect-ratio:auto}
.card img.pimg{height:150px;aspect-ratio:auto}
.cat img.pimg{height:120px;aspect-ratio:auto}
.modal .m-art img.pimg{height:auto;aspect-ratio:16/10;border-radius:16px}
.item:hover img.pimg,.card:hover img.pimg,.cat:hover img.pimg{filter:brightness(1.08) saturate(1.05)}
img.pimg{transition:filter .25s ease}

/* ===================== CHECKOUT, PAYMENT METHODS, SOCIAL SIGN-IN ===================== */
.pay-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pb{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:22px;min-width:40px;padding:0 7px;border-radius:5px;
  font:700 11px/1 var(--f-body);letter-spacing:.01em;background:#fff;color:#0B1A33;white-space:nowrap;direction:ltr}
.pb-mada{color:#0B1A33;font-size:12px;letter-spacing:-.02em}
.pb-mada::after{content:"";width:5px;height:12px;margin-inline-start:3px;border-radius:1px;background:linear-gradient(#5EBB46 50%,#2AA6E0 50%)}
.pb-card{color:#1A1F71;font-style:italic;font-weight:900;font-size:12px}
.pb-mc{min-width:34px;padding:0 5px}
.pb-mc i{width:13px;height:13px;border-radius:50%;background:#EB001B;display:block}
.pb-mc i+i{background:#F79E1B;margin-inline-start:-6px;mix-blend-mode:multiply}
.pb-apple{background:#000;color:#fff;font-weight:600;font-size:12px}
.pb-stc{background:#4F008C;color:#fff;font-weight:700;text-transform:lowercase}
.pb-sadad{background:#0E7C3A;color:#fff;letter-spacing:.06em}
.pb-bank{background:rgba(255,255,255,.12);color:var(--text);border:1px solid var(--line-strong)}

.modal.co-modal{width:min(880px,calc(100% - 32px))}
.co{padding:22px}
.co-wait{display:flex;align-items:center;justify-content:center;gap:12px;padding:56px 12px;color:var(--muted)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:spin .8s linear infinite;margin-inline-end:8px;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.co-sum{border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:9px}
.co-sum h3{margin:0;font-size:19px;line-height:1.3}
.co-dates{margin:0;font-size:14px;color:var(--text)}
.co-dates small{color:var(--muted)}
.co-lines{list-style:none;margin:4px 0;padding:10px 0;border-block:1px solid var(--line);display:flex;flex-direction:column;gap:7px;max-height:220px;overflow:auto;font-size:14px}
.co-lines li{display:flex;justify-content:space-between;gap:12px}
.co-lines li span{color:var(--muted);min-width:0}
.co-lines li b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.co-now{color:var(--teal);font-weight:600;font-size:15px}
.co-fine{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.co-pay{display:flex;flex-direction:column;gap:12px}
.pm-list{display:flex;flex-direction:column;gap:8px}
.pm{display:grid;grid-template-columns:auto 92px minmax(0,1fr);align-items:center;gap:12px;padding:11px 14px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.03);transition:border-color .15s,background .15s}
.pm:hover{border-color:var(--line-strong)}
.pm:has(input:checked){border-color:var(--cyan);background:rgba(79,195,255,.08);box-shadow:0 0 0 1px var(--cyan) inset}
.pm.off{opacity:.5;cursor:not-allowed}
.pm input{accent-color:var(--cyan);width:17px;height:17px;margin:0}
.pm-badge{display:flex;gap:4px}
.pm-txt{display:flex;flex-direction:column;min-width:0}
.pm-txt b{font-size:14.5px;font-weight:600}
.pm-txt small{font-size:12.5px;color:var(--muted);line-height:1.4}
.pm-list.compact .pm{padding:9px 12px}
.co-hint{margin:0;font-size:13.5px;line-height:1.5;padding:11px 13px;border-radius:12px;background:rgba(79,195,255,.07);border:1px solid var(--line);color:var(--text)}
.co-demo{margin:0;font-size:12.5px;color:#FFD38A;line-height:1.5}
.co-go{justify-content:center;font-size:16px;min-height:50px}
.co-secure{margin:0;display:flex;gap:7px;align-items:center;justify-content:center;font-size:12px;color:var(--muted);text-align:center}
.co-msg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:16px 8px 6px;max-width:520px;margin:0 auto}
.co-msg h3{margin:0;font-size:22px;line-height:1.25}
.co-msg p{margin:0;color:var(--muted);line-height:1.55}
.co-msg p b{color:var(--text)}
.co-ico{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(79,195,255,.12);border:1px solid var(--line-strong)}
.co-ico::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid var(--cyan);border-right-color:transparent;animation:spin 1s linear infinite}
.co-msg.ok .co-ico{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.5)}
.co-msg.ok .co-ico::before{animation:none;border:0;border-radius:0;width:12px;height:22px;border-right:3px solid #34D399;border-bottom:3px solid #34D399;transform:rotate(45deg) translate(-2px,-3px)}
.co-msg.bad .co-ico{background:rgba(255,107,129,.12);border-color:rgba(255,107,129,.5)}
.co-msg.bad .co-ico::before{animation:none;border:0;content:"!";width:auto;height:auto;font:700 26px/1 var(--f-body);color:#FF8095}
.co-msg .pm-list{width:100%;text-align:start}
.co-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.bank-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:4px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);text-align:start;width:100%}
.bank-box dt{color:var(--muted);font-size:13px}
.bank-box dd{margin:0;font-size:14px;word-break:break-all;font-variant-numeric:tabular-nums}
.paid{font-family:var(--f-spec);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:6px;padding:2px 7px;background:rgba(52,211,153,.16);color:#6EE7B7;border:1px solid rgba(52,211,153,.4)}
.paid.due{background:rgba(255,196,94,.12);color:#FFD38A;border-color:rgba(255,196,94,.4)}
.orders-open{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.oo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;border-radius:16px;padding:14px 16px}
.oo small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.social{display:flex;flex-direction:column;gap:9px}
.soc{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;
  border:1px solid var(--line-strong);background:#fff;color:#1F1F1F;transition:transform .12s,box-shadow .15s}
.soc:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.soc:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.soc-apple{background:#000;color:#fff;border-color:rgba(255,255,255,.35)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;margin-top:4px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
@media (max-width:760px){
  .co-grid{grid-template-columns:minmax(0,1fr)}
  .co-pay{order:-1}
  .pm{grid-template-columns:auto 80px minmax(0,1fr);gap:10px}
  .oo{grid-template-columns:minmax(0,1fr) auto}
  .oo .status{grid-column:1/-1;justify-self:start;order:3}
}

/* ===================== CART AS A DELIVERY TRUCK ===================== */
.cartbtn .cart-ico{position:relative;display:block}
.cartbtn .truck{display:block;overflow:visible;transition:transform .25s}
.cartbtn .t-wheel{transform-box:fill-box;transform-origin:center}
.cartbtn .t-speed{opacity:0;stroke:var(--teal)}
.cartbtn:hover .truck{transform:translateX(2px)}
.cartbtn:hover .t-speed{opacity:.8;transition:opacity .2s}
.cartbtn .count{top:-4px;left:12px}
.cartbtn.bump .truck{animation:truckGo .7s cubic-bezier(.3,.9,.3,1)}
.cartbtn.bump .t-wheel{animation:wheelSpin .7s linear}
.cartbtn.bump .t-speed{animation:speedLines .7s ease-out}
@keyframes truckGo{0%{transform:translateX(0)}30%{transform:translateX(5px) rotate(-2deg)}60%{transform:translateX(-1px) rotate(1deg)}100%{transform:none}}
@keyframes wheelSpin{to{transform:rotate(540deg)}}
@keyframes speedLines{0%,100%{opacity:0}30%{opacity:1}}
html[dir="rtl"] .cartbtn .truck{transform:scaleX(-1)}
html[dir="rtl"] .cartbtn:hover .truck{transform:scaleX(-1) translateX(2px)}
html[dir="rtl"] .cartbtn.bump .truck{animation:truckGoRtl .7s cubic-bezier(.3,.9,.3,1)}
@keyframes truckGoRtl{0%{transform:scaleX(-1)}30%{transform:scaleX(-1) translateX(5px) rotate(-2deg)}60%{transform:scaleX(-1) translateX(-1px) rotate(1deg)}100%{transform:scaleX(-1)}}
html[dir="rtl"] .cartbtn .count{right:12px;left:auto}
@media (prefers-reduced-motion:reduce){ .cartbtn.bump .truck,.cartbtn.bump .t-wheel,.cartbtn.bump .t-speed{animation:none} }
.cartbtn .count{top:-9px;left:-4px;box-shadow:0 0 0 2px #0A1430}
html[dir="rtl"] .cartbtn .count{right:-4px;left:auto}

/* Language button with flags */
.langbtn{display:inline-flex;align-items:center;gap:8px;padding:0 13px 0 7px}
.langbtn .flag{width:27px;height:18px;border-radius:4px;flex:none;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.35)}
@media (max-width:520px){ .langbtn{padding:0 10px 0 6px;gap:6px} .langbtn .flag{width:24px;height:16px} }

/* ===================== PRICES FOR SIGNED-IN CLIENTS ===================== */
.price-gate{display:flex;align-items:center;gap:16px;border-radius:18px;padding:16px 18px;margin:0 0 26px;
  background:linear-gradient(100deg,rgba(79,216,255,.12),rgba(47,208,200,.10) 55%,rgba(61,229,154,.12)),var(--glass);border:1px solid var(--line-strong)}
.pg-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(79,195,255,.14);color:var(--teal)}
.pg-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pg-txt b{font-size:16px}
.pg-txt span{font-size:13.5px;color:var(--muted);line-height:1.45}
.pg-btns{display:flex;gap:8px;flex:none}
@media (max-width:760px){ .price-gate{flex-wrap:wrap} .pg-btns{width:100%} .pg-btns .pill{flex:1;justify-content:center} }
.paths{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.path-opt{position:relative;display:block;cursor:pointer}
.path-opt input{position:absolute;opacity:0;pointer-events:none}
.path-opt span{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px 13px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:border-color .15s,background .15s}
.path-opt small{font:500 10px var(--f-spec);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.path-opt b{font-size:14.5px}
.path-opt em{font-style:normal;font-size:12.5px;line-height:1.45;color:var(--muted)}
.path-opt:hover span{border-color:var(--line-strong)}
.path-opt input:checked + span{border-color:var(--cyan);background:rgba(79,195,255,.08);box-shadow:0 0 0 1px var(--cyan) inset}
.path-opt input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
html[lang="ar"] .path-opt small{letter-spacing:0}
@media (max-width:420px){ .paths{grid-template-columns:1fr} }

/* ===================== START YOUR RENTAL ===================== */
.hero-start{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.start-btn{min-height:50px;padding:0 26px;font-size:16px;box-shadow:0 10px 34px rgba(79,195,255,.35)}
.start-btn span{display:inline-block;transition:transform .2s}
.start-btn:hover span{transform:translateX(4px)}
html[dir="rtl"] .start-btn span{transform:scaleX(-1)}
html[dir="rtl"] .start-btn:hover span{transform:scaleX(-1) translateX(4px)}
.start-note{font-size:14px;color:var(--muted);max-width:320px;line-height:1.45}
.modal.starter-modal{width:min(640px,calc(100% - 32px))}
.starter{padding:22px;display:flex;flex-direction:column;gap:18px}
.st-lead{margin:0;color:var(--muted);font-size:15px}
.st-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px}
.st-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--grad);color:#050A16}
.st-step h3{margin:4px 0 10px;font-size:17px}
.st-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-hint{margin:8px 0 0;font-size:13px;color:var(--muted)}
.st-step .st-hint:first-of-type{margin-top:-4px;margin-bottom:10px}
.st-needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.st-need{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font:600 13.5px var(--f-body);cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.st-need:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.st-need[aria-pressed="true"]{border-color:var(--cyan);background:rgba(79,195,255,.1);box-shadow:0 0 0 1px var(--cyan) inset}
.st-need[aria-pressed="true"] .st-ico{color:var(--teal)}
.st-ico{color:var(--muted)}
.st-go{justify-content:center;min-height:52px;font-size:16px}
.st-alt{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:13.5px;color:var(--muted)}
@media (max-width:560px){ .st-needs{grid-template-columns:repeat(2,minmax(0,1fr))} .st-dates{grid-template-columns:1fr} .st-step{grid-template-columns:28px minmax(0,1fr);gap:10px} .st-n{width:28px;height:28px} }

/* Insurance lines */
.co-ins{color:var(--text)}
.co-ins-note{display:flex;gap:6px;align-items:flex-start;margin-top:-4px}
.co-ins-note svg{flex:none;margin-top:2px;color:#6EE7B7}
.co-ins-line{font-size:13.5px}


/* ===================== TYPOGRAPHY GUIDELINES =====================
   1. Display / headers  -> var(--font-display)  Michroma: hero heading, section titles, brand
   2. Body text / UI     -> var(--font-body)     Poppins: paragraphs, buttons, inputs, nav, labels in forms
   3. Technical accents  -> var(--font-mono)     IBM Plex Mono: small metadata, taglines, sub-labels */
body{font-family:var(--font-body);font-weight:400}
button,input,select,textarea,.pill,.chip,.links a{font-family:var(--font-body)}
strong,b{font-weight:600}
h1,h2,.display,.brand b,footer b,.drawer h2,.modal h2,.tile b,.stat b,.pct,.credit-top b.big{font-family:var(--font-display);font-weight:400}
h3,h4{font-family:var(--font-body);font-weight:600}
.path h3,.pkg h3,.visit-card h3{font-family:var(--font-display);font-weight:400}
.display{letter-spacing:.01em;line-height:1.2}
.hero-copy h1{letter-spacing:.005em;line-height:1.15}
.head h2{line-height:1.25}
p,.sub,.hero-copy .sub{font-family:var(--font-body);font-weight:400}
/* technical accents in IBM Plex Mono */
.label,.kicker,.hero-copy .kicker,.crumbs,.tag,.spec,.example,.field label,.days,.stock,.avail,.nums,.chip small,.r-id,.items-table th,.notify th,
.kind,.paid,.path-opt small,.crow small,.cat span,.item .price span,.rate span,.line .sub,.hs-row,.st-hint,.start-note,.co-fine,.pkg-tab span,.plan-tag{
  font-family:var(--font-mono)}
.label,.crumbs,.tag,.field label,.example,.kind,.paid,.path-opt small,.crow small,.items-table th,.notify th{font-weight:600}
.hero-copy .kicker{font-size:15px;letter-spacing:.02em;font-weight:400}
.hero-copy .kicker b{font-family:var(--font-mono);font-weight:700}
.start-note,.co-fine,.st-hint{font-size:13px;letter-spacing:0}
html[lang="ar"] .hero-copy .kicker b{font-family:inherit}

/* Homepage categories, right under the numbers */
#home-cats .cats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#home-cats{padding-top:clamp(28px,4vw,56px)}
@media (max-width:560px){ #home-cats .cats{grid-template-columns:1fr 1fr;gap:10px} #home-cats .cat{padding:10px} #home-cats .cat img.pimg{height:90px} #home-cats .cat b{font-size:14px} }

/* ===================== PROJECT SOLUTIONS: COMING SOON ===================== */
.soon-mode .wrap > :not(.soon-panel){display:none !important}
.soon-panel{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,5vw,64px);margin-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  background:radial-gradient(600px 300px at 90% 0%,rgba(61,229,154,.22),transparent 70%),radial-gradient(500px 300px at 0% 100%,rgba(79,195,255,.18),transparent 70%),var(--glass)}
.soon-panel h1{font-size:clamp(28px,4vw,52px);max-width:18ch;margin:0}
.soon-panel p{margin:0;max-width:60ch;color:var(--muted);font-size:17px;line-height:1.6}
.soon-badge{font:700 12px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:#050A16;background:var(--grad);border-radius:999px;padding:6px 14px}
.soon-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.soon-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.soon-list li{font:700 12px var(--font-mono);letter-spacing:.08em;color:var(--muted);border:1px dashed var(--line-strong);border-radius:999px;padding:6px 12px}
.soon-tag{font:700 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#050A16;background:var(--grad);border-radius:999px;padding:2px 6px;margin-inline-start:4px;vertical-align:2px}
html[lang="ar"] .soon-badge,html[lang="ar"] .soon-tag,html[lang="ar"] .soon-list li{text-transform:none}

/* Delivery and return days are free */
.free-days{display:inline-flex;align-items:center;gap:5px;margin-inline-start:8px;padding:2px 9px;border-radius:999px;font:700 11.5px var(--font-mono);letter-spacing:.02em;
  color:#6EE7B7;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);white-space:nowrap;vertical-align:1px}
.free-days::before{content:"";width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-1px)}
.co-dates .free-days,.sum .free-days{margin-inline-start:0;margin-top:6px}
#st-days .free-days{margin-top:6px}
.days .free-days{margin-top:4px}
.date-tip{white-space:normal}

/* ===================== SAUDI VISION 2030 ===================== */
.v2030{--ksa:#1FA463;--ksa-soft:rgba(31,164,99,.16)}
.v-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;border-radius:28px;
  padding:clamp(28px,4.5vw,60px);border:1px solid rgba(31,164,99,.35);
  background:radial-gradient(700px 360px at 100% 0%,rgba(31,164,99,.22),transparent 65%),radial-gradient(600px 340px at 0% 100%,rgba(79,195,255,.14),transparent 70%),linear-gradient(180deg,rgba(14,30,52,.9),rgba(8,16,32,.92))}
.v-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(135deg,rgba(31,164,99,.10) 0 1px,transparent 1px 22px)}
.v-copy{position:relative;display:flex;flex-direction:column;gap:14px}
.v-label{display:inline-flex;align-items:center;gap:8px;color:#7CE3AE !important}
.v-dot{width:8px;height:8px;border-radius:50%;background:var(--ksa);box-shadow:0 0 0 4px var(--ksa-soft)}
.v-copy h2{font-size:clamp(26px,3.2vw,42px);margin:0}
.v-lead{margin:0;color:var(--muted);font-size:16.5px;line-height:1.65;max-width:58ch}
.v-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.v-num{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:end}
.v-big{font:400 clamp(72px,11vw,170px)/0.9 var(--font-display);letter-spacing:-.02em;
  background:linear-gradient(180deg,#B8F5D4 0%,#1FA463 55%,rgba(31,164,99,.15) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 40px rgba(31,164,99,.35))}
.v-cap{font:700 12px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#7CE3AE}
.v-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.v-pillar{border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px}
.v-pillar h3{margin:4px 0 0;font-size:16px}
.v-pillar p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.v-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#7CE3AE;background:var(--ksa-soft);border:1px solid rgba(31,164,99,.35)}
html[lang="ar"] .v-cap{text-transform:none}
html[dir="rtl"] .v-num{align-items:flex-start}
@media (max-width:980px){ .v-pillars{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .v-panel{grid-template-columns:minmax(0,1fr)} .v-num{order:-1;align-items:flex-start;text-align:start} .v-big{font-size:clamp(64px,22vw,110px)} }
@media (max-width:520px){ .v-pillars{grid-template-columns:minmax(0,1fr)} }
.v-num{min-width:0}
.v-big{font-size:clamp(56px,7vw,112px);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
@media (max-width:760px){ .v-big{font-size:clamp(56px,19vw,96px)} }


/* ===================== VISION 2030 (plain band) ===================== */
.v30{position:relative;overflow:hidden;margin:clamp(40px,6vw,80px) 0;padding:clamp(48px,7vw,96px) 0;background:#071224;border-top:2px solid #1FA463}
.v30-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center}
.v30-copy{position:relative;z-index:1;max-width:620px}
.v30-copy h2{margin:0 0 20px;font:400 clamp(26px,3vw,40px)/1.22 var(--font-display);color:var(--text)}
.v30-copy > p{margin:0 0 28px;color:var(--muted);font-size:17px;line-height:1.7}
.v30-facts{margin:0 0 32px;padding:0}
.v30-facts div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid rgba(130,190,255,.16)}
.v30-facts div:last-child{border-bottom:1px solid rgba(130,190,255,.16)}
.v30-facts dt{font-weight:600;color:var(--text)}
.v30-facts dd{margin:0;color:var(--muted)}
.v30-mark{font:500 clamp(120px,19vw,300px)/.8 "Readex Pro","Noto Sans Arabic",Tahoma,sans-serif;color:#1FA463;text-align:end;letter-spacing:-.02em;
  margin-bottom:calc(-1 * clamp(48px,7vw,96px) - .12em);align-self:end;user-select:none}
html[dir="rtl"] .v30-mark{text-align:start}
@media (max-width:860px){
  .v30-grid{grid-template-columns:minmax(0,1fr)}
  .v30-mark{order:-1;text-align:start;margin:0 0 8px;font-size:clamp(96px,28vw,160px)}
  .v30-facts div{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* Homepage lower blocks: plain, no glass or glows */
.process div > .label{display:none}
.help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid rgba(130,190,255,.16);border-bottom:1px solid rgba(130,190,255,.16)}
.help-item{padding:36px 32px 36px 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.help-item + .help-item{padding:36px 0 36px 32px;border-inline-start:1px solid rgba(130,190,255,.16)}
html[dir="rtl"] .help-item{padding:36px 0 36px 32px}
html[dir="rtl"] .help-item + .help-item{padding:36px 32px 36px 0}
.help-item h3{margin:0;font:400 22px/1.3 var(--font-display)}
.help-item p{margin:0 0 6px;color:var(--muted);max-width:46ch}
@media (max-width:760px){ .help{grid-template-columns:minmax(0,1fr)} .help-item,.help-item + .help-item,html[dir="rtl"] .help-item,html[dir="rtl"] .help-item + .help-item{padding:28px 0;border-inline-start:0} .help-item + .help-item{border-top:1px solid rgba(130,190,255,.16)} }
.v30-mark{font-size:clamp(110px,15vw,230px);line-height:1;margin:0;align-self:center}
@media (max-width:860px){ .v30-mark{font-size:clamp(90px,26vw,150px)} }

/* Company credits */
.pb-credits{background:var(--grad);color:#050A16;font-family:var(--font-display);font-size:9px;letter-spacing:.08em}
.tp-h{margin:18px 0 8px;font:600 15px var(--font-body);color:var(--text)}
.tp-list{max-width:620px;margin-bottom:6px}
.cr-in{color:#6EE7B7;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-out{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===================== MOTION: LIGHTING CUES ===================== */
/* gentle fade for most things */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s ease var(--d,0ms),transform .9s cubic-bezier(.16,.84,.24,1) var(--d,0ms)}
/* equipment tiles power on like fixtures striking */
.rv.power{transform:none;filter:brightness(.4)}
.rv.power.in{transition:none;animation:powerOn .95s linear var(--d,0ms) both}
@keyframes powerOn{
  0%{opacity:0;filter:brightness(.3)}
  12%{opacity:.85;filter:brightness(1.6)}
  20%{opacity:.25;filter:brightness(.5)}
  32%{opacity:1;filter:brightness(1.35)}
  44%{opacity:.7;filter:brightness(.9)}
  60%,100%{opacity:1;filter:none}
}
/* headings lit by a passing beam */
h2.lit{position:relative;-webkit-mask-image:linear-gradient(100deg,#000 0 42%,rgba(0,0,0,.12) 58% 100%);mask-image:linear-gradient(100deg,#000 0 42%,rgba(0,0,0,.12) 58% 100%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;animation:litMask 1.3s cubic-bezier(.3,.6,.2,1) both}
h2.lit::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:22%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(170,225,255,.28) 45%,rgba(255,255,255,.4) 50%,rgba(170,225,255,.28) 55%,transparent);
  filter:blur(8px);mix-blend-mode:screen;transform:translateX(-120%);animation:beamPass 1.3s cubic-bezier(.3,.6,.2,1) both}
@keyframes litMask{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes beamPass{0%{transform:translateX(-120%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(560%);opacity:0}}
html[dir="rtl"] h2.lit{-webkit-mask-image:linear-gradient(260deg,#000 0 42%,rgba(0,0,0,.12) 58% 100%);mask-image:linear-gradient(260deg,#000 0 42%,rgba(0,0,0,.12) 58% 100%);animation-name:litMaskRtl}
html[dir="rtl"] h2.lit::after{left:auto;right:0;animation-name:beamPassRtl}
@keyframes litMaskRtl{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}
@keyframes beamPassRtl{0%{transform:translateX(120%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(-560%);opacity:0}}
/* follow spot on equipment tiles */
@media (hover:hover) and (pointer:fine){
  .cat:hover,.item:hover,.card:hover{background:radial-gradient(280px circle at var(--mx,50%) var(--my,40%),rgba(120,205,255,.16),transparent 62%),var(--glass)}
}
.tilting{transform:none !important}
/* page change: LED scan */
@property --reveal{syntax:"<length>";inherits:false;initial-value:0px}
.view.scan-in{animation:scanReveal .72s cubic-bezier(.22,.7,.2,1) both}
@keyframes scanReveal{from{--reveal:0px;clip-path:inset(0 0 calc(100% - var(--reveal)) 0)}to{--reveal:100vh;clip-path:inset(0 0 calc(100% - var(--reveal)) 0)}}
.view.scan-in{clip-path:inset(0 0 calc(100% - var(--reveal)) 0)}
#scanline{position:fixed;left:0;right:0;top:0;height:2px;z-index:45;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,#4FD8FF 15%,#B9F0FF 50%,#3DE59A 85%,transparent);box-shadow:0 0 18px 3px rgba(79,195,255,.55)}
#scanline::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:70px;background:linear-gradient(0deg,rgba(79,195,255,.14),transparent)}
#scanline.go{animation:scanMove .72s cubic-bezier(.22,.7,.2,1) both}
@keyframes scanMove{0%{opacity:1;transform:translateY(0)}88%{opacity:1}100%{opacity:0;transform:translateY(100vh)}}

/* ===================== WAREHOUSE CHECK POP ===================== */
.pop{position:fixed;left:20px;bottom:20px;z-index:38;width:min(380px,calc(100vw - 32px));border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#13224A,#0A1430);border:1px solid var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(24px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.16,.84,.24,1),opacity .35s ease}
.pop.show{transform:none;opacity:1}
html[dir="rtl"] .pop{left:auto;right:20px}
.pop header{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line)}
.pop header div{flex:1;min-width:0;display:flex;flex-direction:column}
.pop header b{font-size:15px}
.pop header small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pop-live{width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:livePulse 2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.pop-av{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:#050A16;font:400 12px var(--font-display);flex:none}
.pop-x{width:32px;height:32px}
.pop-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;max-height:min(60vh,420px);overflow:auto}
.pop-msg{align-self:flex-start;max-width:100%;animation:msgIn .45s cubic-bezier(.16,.84,.24,1) both}
.pop-msg p{margin:0;padding:11px 14px;border-radius:4px 16px 16px 16px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:14.5px;line-height:1.55}
html[dir="rtl"] .pop-msg p{border-radius:16px 4px 16px 16px}
.pop-msg p b{color:#fff}
.pop-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pop-acts .pill.sm{min-height:36px;padding:0 14px;font-size:13.5px}
.pop-pick{position:relative;cursor:pointer}
.pop-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.pop-me{align-self:flex-end;padding:9px 14px;border-radius:16px 4px 16px 16px;background:var(--grad);color:#050A16;font-weight:600;font-size:14px;animation:msgIn .35s ease both}
html[dir="rtl"] .pop-me{border-radius:4px 16px 16px 16px}
.pop-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:4px 16px 16px 16px;background:rgba(255,255,255,.06)}
.pop-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1s infinite}
.pop-typing i:nth-child(2){animation-delay:.15s}.pop-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:560px){ .pop{left:12px;right:12px;bottom:12px;width:auto} html[dir="rtl"] .pop{right:12px} body.has-cartbar .pop{bottom:96px} }

@media (prefers-reduced-motion:reduce){
  .rv,.rv.in,.rv.power,.rv.power.in{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important}
  h2.lit,h2.lit::after,.view.scan-in,#scanline.go,.pop-live,.pop-typing i,.pop-msg,.pop-me{animation:none !important}
  h2.lit{-webkit-mask-image:none;mask-image:none}
  .view.scan-in{clip-path:none}
}

/* Paid, waiting for documents */
.docs-note{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,196,94,.4);background:rgba(255,196,94,.08)}
.docs-note b{grid-column:1;color:#FFD38A;font-size:14px}
.docs-note span{grid-column:1;color:var(--muted);font-size:13.5px}
.docs-note .pill{grid-column:2;grid-row:1 / span 2}
.co-docs{color:#FFD38A !important;font-size:14px}
.co-check{color:var(--muted);font-size:14px}
.co-promise{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:6px}
.co-promise li{position:relative;padding-inline-start:18px;font-size:13px;color:var(--muted);line-height:1.45}
.co-promise li::before{content:"";position:absolute;inset-inline-start:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:#7CF3C8}
@media (max-width:560px){ .docs-note{grid-template-columns:minmax(0,1fr)} .docs-note .pill{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px} }

/* ---------- Help page ---------- */
.help-page{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;margin-top:8px}
.hp-side{position:sticky;top:100px;display:grid;gap:18px;min-width:0}
.hp-search{display:flex;align-items:center;gap:10px;padding:0 14px;height:48px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);color:var(--muted)}
.hp-search input{flex:1;min-width:0;width:100%;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:15px}
.hp-search:focus-within{border-color:var(--teal)}
.hp-toc{display:grid;border-inline-start:1px solid var(--line)}
.hp-toc a{padding:8px 14px;color:var(--muted);font-size:14px;text-decoration:none;margin-inline-start:-1px;border-inline-start:2px solid transparent}
.hp-toc a:hover{color:var(--text);border-inline-start-color:var(--teal)}
.hp-group{scroll-margin-top:110px;margin-bottom:36px}
.hp-group h2{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
.hp-q{border-bottom:1px solid var(--line)}
.hp-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-size:16.5px;font-weight:500;color:var(--text)}
.hp-q summary::-webkit-details-marker{display:none}
.hp-q summary::after{content:"+";flex:none;width:24px;text-align:center;color:var(--muted);font-size:20px;line-height:1;transition:transform .2s}
.hp-q[open] summary::after{transform:rotate(45deg);color:var(--teal)}
.hp-q summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.hp-q p{margin:0 0 18px;max-width:68ch;color:var(--muted);font-size:15px;line-height:1.65}
.hp-none{color:var(--muted);padding:20px 0}
.hp-contact{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px;padding:22px 24px;border:1px solid var(--line);border-radius:16px}
.hp-contact h3{margin:0 0 4px;font-size:17px}
.hp-contact p{margin:0;color:var(--muted);font-size:14.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:860px){ .help-page{grid-template-columns:minmax(0,1fr);gap:20px} .hp-side{position:static} .hp-toc{display:flex;flex-wrap:wrap;gap:8px;border:0} .hp-toc a{border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin:0;font-size:13px} }

/* ---------- Background gradient: steel-teal light from the top left, falling off to near-black (reference image) ---------- */
.bg-fx{
  background:
    linear-gradient(180deg,rgba(7,9,13,0) 0%,rgba(7,9,13,.3) 60%,rgba(7,9,13,.75) 100%),
    linear-gradient(128deg,#2C5566 0%,#1B3542 22%,#101C24 44%,#0A0F15 66%,#07090D 100%)}
.bg-fx .b1{width:85vmax;height:85vmax;left:-30vmax;top:-38vmax;background:radial-gradient(circle,rgba(74,156,185,.55) 0%,rgba(74,156,185,.16) 40%,transparent 68%)}
.bg-fx .b2{width:60vmax;height:60vmax;right:-26vmax;top:-12vh;background:radial-gradient(circle,rgba(74,156,185,.10) 0%,rgba(74,156,185,.03) 44%,transparent 68%)}
.bg-fx .b3{width:90vmax;height:60vmax;left:6vw;bottom:-38vmax;background:radial-gradient(closest-side,rgba(60,120,145,.16),rgba(60,120,145,.04) 55%,transparent)}

/* =====================================================================
   LIGHT MODE (html[data-theme="light"]). The switch sits next to the
   language button; the choice is saved in the browser. Same brand
   gradient, on a pale blue-green paper instead of midnight.
   ===================================================================== */
.themebtn{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.06);color:var(--text);display:inline-grid;place-items:center;cursor:pointer;margin-inline-end:8px;transition:border-color .2s,color .2s,transform .3s}
.themebtn:hover{border-color:var(--teal);color:var(--teal)}
.themebtn:active{transform:rotate(-25deg) scale(.94)}
.themebtn svg{grid-area:1/1;transition:opacity .3s,transform .4s}
.themebtn .ic-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
html[data-theme="light"] .themebtn .ic-sun{opacity:0;transform:rotate(60deg) scale(.6)}
html[data-theme="light"] .themebtn .ic-moon{opacity:1;transform:none}
@media (max-width:520px){ .themebtn{width:32px;height:32px;margin-inline-end:6px} }
html.theme-fade, html.theme-fade *{transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease !important}
html.theme-fade .hero-video{transition:opacity .9s ease !important}

html[data-theme="light"]{
  --void:#F4F8FB;
  --deep:#E8F1F6;
  --panel:#FFFFFF;
  --glass:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,251,253,.88));
  --line:rgba(16,70,110,.13);
  --line-strong:rgba(16,90,130,.28);
  --text:#0B1A2C;
  --muted:#4F6378;
  --teal:#0A7F86;
  --cyan:#0E8FC7;
  --blue:#2D5FE0;
  --violet:#13A86B;
  --grad:linear-gradient(90deg,#33C8F5 0%,#22C3B5 55%,#2FD68A 100%);
  --glow-c:rgba(34,170,220,.18);
  --glow-v:rgba(30,190,120,.16);
  --base-a:#EEF6FA; --base-b:#F6FAFC;
  color-scheme:light;
}
html[data-theme="light"] body{background:var(--void);color:var(--text)}
html[data-theme="light"] ::selection{background:rgba(34,170,220,.25);color:var(--text)}
html[data-theme="light"] .bg-fx{background:linear-gradient(128deg,#D3E9F1 0%,#E4F0F5 24%,#EFF4F7 48%,#F4F7F9 72%,#F7F9FA 100%)}
html[data-theme="light"] .bg-fx::before{opacity:.45}
html[data-theme="light"] .bg-fx::after{opacity:.03}
html[data-theme="light"] .bg-fx .b1{background:radial-gradient(circle,rgba(74,156,185,.32) 0%,rgba(74,156,185,.09) 42%,transparent 68%)}
html[data-theme="light"] .bg-fx .b2{background:radial-gradient(circle,rgba(74,156,185,.08) 0%,rgba(74,156,185,.02) 44%,transparent 68%)}
html[data-theme="light"] .bg-fx .b3{background:radial-gradient(closest-side,rgba(74,156,185,.10),rgba(74,156,185,.03) 55%,transparent)}
html[data-theme="light"] .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px rgba(20,60,90,.10)}
html[data-theme="light"] .path,html[data-theme="light"] .item,html[data-theme="light"] .seg,html[data-theme="light"] .spec,html[data-theme="light"] .search{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px rgba(20,60,90,.10)}
html[data-theme="light"] .path:hover,html[data-theme="light"] .item:hover,html[data-theme="light"] .card:hover,html[data-theme="light"] .pkg:hover,html[data-theme="light"] .cat:hover{border-color:rgba(14,143,199,.45);box-shadow:0 0 0 1px rgba(14,143,199,.12),0 24px 50px rgba(20,60,90,.16)}
html[data-theme="light"] .pill.primary{color:#04212A;box-shadow:0 10px 26px rgba(34,170,200,.28),inset 0 1px 0 rgba(255,255,255,.6)}
html[data-theme="light"] .pill.outline,html[data-theme="light"] .langbtn,html[data-theme="light"] .themebtn{background:rgba(255,255,255,.7)}

/* surfaces */
html[data-theme="light"] .glass{background:var(--glass);border-color:var(--line)}
/* like dark mode: the bar is see-through over the homepage video, solid once you scroll or leave the homepage */
html[data-theme="light"] .nav{background:transparent;box-shadow:none}
html[data-theme="light"] .nav.solid{background:rgba(255,255,255,.9);box-shadow:0 1px 0 var(--line),0 8px 24px rgba(20,60,90,.06)}
html[data-theme="light"] .input{background:#fff;border-color:var(--line-strong);color:var(--text)}
html[data-theme="light"] select.input option{background:#fff;color:var(--text)}
html[data-theme="light"] .input::placeholder{color:#7D8FA3}
html[data-theme="light"] .drawer,html[data-theme="light"] .modal,html[data-theme="light"] .nudge,html[data-theme="light"] .pop{background:linear-gradient(180deg,#FFFFFF,#F5FAFC);border-color:var(--line-strong);box-shadow:0 40px 90px rgba(20,60,90,.22)}
html[data-theme="light"] .selbar,html[data-theme="light"] .cartbar{background:linear-gradient(90deg,#FFFFFF,#F2F9FB);border-color:var(--line-strong);box-shadow:0 24px 50px rgba(20,60,90,.18)}
html[data-theme="light"] .toast{background:#fff;color:var(--text);border-color:var(--line-strong);box-shadow:0 18px 40px rgba(20,60,90,.18)}
html[data-theme="light"] .chip{background:rgba(255,255,255,.75)}
html[data-theme="light"] .chip[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text)}
html[data-theme="light"] .chip[aria-pressed="true"] small{color:#B9CADB}
html[data-theme="light"] .pm:has(input:checked){background:rgba(14,143,199,.07)}
html[data-theme="light"] .cat:hover,html[data-theme="light"] .item:hover,html[data-theme="light"] .card:hover{background:radial-gradient(280px circle at var(--mx,50%) var(--my,40%),rgba(34,170,220,.10),transparent 62%),var(--glass)}
html[data-theme="light"] footer{background:#E9F2F6;border-top-color:var(--line)}
html[data-theme="light"] .visit{background:#fff;border-color:var(--line);box-shadow:0 24px 60px rgba(20,60,90,.10)}
html[data-theme="light"] .pin-district{background:rgba(255,255,255,.85)}
html[data-theme="light"] .soc-apple{border-color:#000}
/* text colours that were tuned for the dark background */
html[data-theme="light"] .co-demo,html[data-theme="light"] .docs-note b,html[data-theme="light"] .co-docs{color:#9A5A00 !important}
html[data-theme="light"] .paid{color:#0B7A4B;background:rgba(16,170,100,.10);border-color:rgba(16,170,100,.35)}
html[data-theme="light"] .paid.due{color:#8A5200;background:rgba(240,160,40,.12);border-color:rgba(200,130,20,.35)}
html[data-theme="light"] .co-ins-note svg,html[data-theme="light"] .cr-in{color:#0B8A55}
html[data-theme="light"] .doc.has{border-color:#14A893;background:rgba(20,168,147,.07)}
html[data-theme="light"] .checklist li.ok i,html[data-theme="light"] .pnav a .dot.ok{background:#14A893;border-color:#14A893}
/* (the Vision 2030 band has its own light and dark colours further down) */

/* gradient text needs deeper colours on paper to stay readable */
html[data-theme="light"] .grad,html[data-theme="light"] .stat b{background:linear-gradient(90deg,#0B7FC0 0%,#0A9488 55%,#0E9A5E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .cartbar small{color:var(--muted)}
html[data-theme="light"] .st-pending,html[data-theme="light"] .st-review,html[data-theme="light"] .avail.low{color:#8A5200;background:rgba(240,160,40,.14)}
html[data-theme="light"] .st-approved{color:#1F55C9;background:rgba(45,95,224,.10)}
html[data-theme="light"] .st-prepping{color:#0B7A4B;background:rgba(16,170,100,.12)}
html[data-theme="light"] .st-out,html[data-theme="light"] .st-verified,html[data-theme="light"] .avail,html[data-theme="light"] .plan-tag,html[data-theme="light"] .addr .tag{color:#08756E;background:rgba(20,168,147,.12)}
html[data-theme="light"] .st-returned,html[data-theme="light"] .st-incomplete{color:#4F6378;background:rgba(80,100,130,.10)}
html[data-theme="light"] .st-cancelled,html[data-theme="light"] .avail.none{color:#B42318;background:rgba(220,60,50,.10)}
html[data-theme="light"] .free-days{color:#08756E;background:rgba(20,168,147,.10);border-color:rgba(20,168,147,.35)}
html[data-theme="light"] .visit-map,html[data-theme="light"] .m-ground{background:#E6EFF4;fill:#E6EFF4}
html[data-theme="light"] .m-block{fill:#D7E4EC}
html[data-theme="light"] .m-park{fill:#CDEBDD}
html[data-theme="light"] .m-wadi{stroke:#B9D6EA}
html[data-theme="light"] .m-road{stroke:#FFFFFF}
html[data-theme="light"] .m-label{fill:#7D93A8}
html[data-theme="light"] .pop-msg p,html[data-theme="light"] .pop-typing{background:#EEF5F8}
html[data-theme="light"] .pop-msg p b{color:var(--text)}

/* ---------- Homepage video in light mode: a white-studio film (media/hero-light*), crossfaded in when the mode switches ---------- */
.hero-video-light{opacity:0 !important}
html[data-theme="light"] #hero-video{opacity:0 !important}
html[data-theme="light"] .hero-video-light.on{opacity:1 !important}
.hero-video{transition:opacity .8s ease}
html[data-theme="light"] .hero.showroom{background:#EEF5F9 url("../media/hero-light-poster.jpg") center/cover no-repeat}
/* a light veil only where the words sit, the same shape as the dark mode shade, so the film shows through */
html[data-theme="light"] .hero-shade{background:
  linear-gradient(0deg,rgba(238,245,249,.95) 0%,rgba(238,245,249,.6) 18%,rgba(238,245,249,.12) 42%,rgba(238,245,249,0) 58%),
  linear-gradient(90deg,rgba(238,245,249,.55) 0%,rgba(238,245,249,.22) 38%,rgba(238,245,249,0) 58%)}
html[data-theme="light"][dir="rtl"] .hero-shade{background:
  linear-gradient(0deg,rgba(238,245,249,.95) 0%,rgba(238,245,249,.6) 18%,rgba(238,245,249,.12) 42%,rgba(238,245,249,0) 58%),
  linear-gradient(270deg,rgba(238,245,249,.55) 0%,rgba(238,245,249,.22) 38%,rgba(238,245,249,0) 58%)}
@media (max-width:860px){
  html[data-theme="light"] .hero-shade,html[data-theme="light"][dir="rtl"] .hero-shade{background:linear-gradient(0deg,rgba(238,245,249,.96) 0%,rgba(238,245,249,.75) 36%,rgba(238,245,249,.15) 62%,rgba(238,245,249,0) 76%)}
}
/* the words carry a soft white halo instead of a big white panel, so they stay readable over the moving gear */
html[data-theme="light"] .hero.showroom h1,html[data-theme="light"] .hero.showroom .sub,html[data-theme="light"] .hero.showroom .kicker{text-shadow:0 0 18px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9)}
html[data-theme="light"] .hero.showroom .kicker{color:#4F6378}
html[data-theme="light"] .hero.showroom .kicker b{color:var(--text)}
html[data-theme="light"] .hero.showroom h1{color:var(--text)}
html[data-theme="light"] .hero.showroom .sub{color:#33485E}
html[data-theme="light"] .hero.showroom .search{background:rgba(255,255,255,.82);border-color:var(--line-strong);box-shadow:0 18px 44px rgba(20,60,90,.14)}
html[data-theme="light"] .hero.showroom .search input{color:var(--text)}
html[data-theme="light"] .hero.showroom .search input::placeholder{color:#6B7F93}
html[data-theme="light"] .hero.showroom .quick{color:#4F6378}
html[data-theme="light"] .start-note{color:#4F6378}

/* ---------- Vision 2030 band: navy-to-green with a line-drawn Riyadh skyline, in both modes ---------- */
.v30{--v-text:#F2F7FF;--v-muted:#B8C9DE;--v-line:rgba(255,255,255,.14);--v-mark:#46D08A;--v-sky:rgba(255,255,255,.5);--v-ground:#0E6B3E;
  background:linear-gradient(100deg,#0B1F45 0%,#0C3452 46%,#0D5A3F 100%);border-top:0;padding-bottom:0;color:var(--v-text)}
html[data-theme="light"] .v30{--v-text:#0B1A2C;--v-muted:#41566B;--v-line:rgba(14,80,70,.16);--v-mark:#0E8A4F;--v-sky:rgba(14,96,66,.5);--v-ground:#BFE6CF;
  background:linear-gradient(100deg,#EAF3FC 0%,#E5F3F1 50%,#D9F0E3 100%)}
.v30 .v30-copy h2,.v30 .v30-facts dt{color:var(--v-text)}
.v30 .v30-copy > p,.v30 .v30-facts dd{color:var(--v-muted)}
.v30 .v30-facts div{border-color:var(--v-line)}
.v30 .v30-facts div:last-child{border-bottom-color:var(--v-line)}
.v30-mark{display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--v-mark)}
html[dir="rtl"] .v30-mark{align-items:flex-start}
.v30-mark b{font:inherit;color:inherit}
.v30-word{font:400 clamp(16px,1.6vw,22px)/1 var(--font-display);letter-spacing:.32em;text-transform:uppercase;color:var(--v-text);opacity:.85;padding-inline-end:.3em}
.v30-skyline{position:relative;margin-top:clamp(28px,4vw,56px);height:clamp(120px,15vw,214px);color:var(--v-sky)}
.v30-skyline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--v-ground)}
.v30-sky{display:block;width:100%;height:100%}
.v30-sky path{vector-effect:non-scaling-stroke}
@media (max-width:860px){ .v30-mark{align-items:flex-start} .v30-skyline{height:110px} }
html[data-theme="light"] .selbar,html[data-theme="light"] .cartbar{color:var(--text)}

/* =====================================================================
   CHECKOUT v2: steps, payment tiles, summary with timeline, receipt
   ===================================================================== */
.modal.co-modal{width:min(1020px,calc(100% - 32px))}
.co2-head{display:flex;align-items:center;gap:18px}
.co2-head h2{flex:none}
.co2-steps{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;gap:8px;min-width:0}
.co2-steps li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.co2-steps li i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--font-body);font-style:normal;border:1px solid var(--line-strong);color:var(--muted)}
.co2-steps li.now{color:var(--text);font-weight:600}
.co2-steps li.now i{background:var(--grad);border-color:transparent;color:#04212A}
.co2-steps li.done i{background:rgba(61,229,154,.16);border-color:rgba(61,229,154,.55)}
.co2-steps li.done i::before{content:"";width:9px;height:5px;border-left:2px solid #3DE59A;border-bottom:2px solid #3DE59A;transform:rotate(-45deg) translate(1px,-1px)}
.co2-steps .co2-bar{width:28px;height:1px;background:var(--line-strong)}
@media (max-width:760px){ .co2-steps li span{display:none} .co2-steps .co2-bar{width:14px} }

.co2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;align-items:start}
.co2-pay h3{margin:0;font-size:21px;line-height:1.3}
.co2-lead{margin:4px 0 0;color:var(--muted);font-size:14.5px}
.co2-label{margin:22px 0 10px;font:700 11.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.co2-sum .co2-label:first-child{margin-top:0}

/* payment tiles */
.pmt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pmt,.pmr{position:relative;display:flex;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}
.pmt{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 14px 13px;min-height:108px}
.pmt .pmt-logo{display:flex;gap:4px;height:26px;align-items:center;margin-bottom:6px}
.pmt b,.pmr b{font-size:14.5px;font-weight:600;color:var(--text)}
.pmt small,.pmr small{font-size:12.5px;line-height:1.4;color:var(--muted)}
.pmr{align-items:center;gap:14px;padding:12px 14px}
.pmr .pmt-logo{display:flex;gap:4px;min-width:84px}
.pmr-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.pmr-list{display:flex;flex-direction:column;gap:10px}
.pmt:hover,.pmr:hover{border-color:var(--line-strong);background:rgba(255,255,255,.055)}
.pmt:has(input:checked),.pmr:has(input:checked){border-color:var(--cyan);background:rgba(79,195,255,.09);box-shadow:0 0 0 1px var(--cyan) inset,0 10px 30px rgba(79,195,255,.12)}
.pmt:has(input:focus-visible),.pmr:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
.pmt.off,.pmr.off{opacity:.45;cursor:not-allowed}
.pmt-tick{position:absolute;top:12px;inset-inline-end:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);transition:all .18s ease}
.pmr .pmt-tick{position:static;flex:none}
.pmt:has(input:checked) .pmt-tick,.pmr:has(input:checked) .pmt-tick{background:var(--grad);border-color:transparent}
.pmt:has(input:checked) .pmt-tick::after,.pmr:has(input:checked) .pmt-tick::after{content:"";position:absolute;margin:5px 0 0 6px;width:7px;height:4px;border-left:2px solid #04212A;border-bottom:2px solid #04212A;transform:rotate(-45deg)}
.pmr .pmt-tick{position:relative}
#co-note .co-hint{margin-top:14px}
.co2-gobar{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.co2-gobar .co-go{width:100%}

/* summary */
.co2-sum{border-radius:20px;padding:20px;border:1px solid var(--line);background:var(--glass);position:sticky;top:0}
.co2-sum h3{margin:0 0 14px;font-size:19px}
.co2-dates{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.co2-dates div{display:flex;flex-direction:column;min-width:0}
.co2-dates small{font:700 10.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co2-dates b{font-size:15px;margin-top:2px}
.co2-dates span{font-size:12.5px;color:var(--muted)}
.co2-arrow{color:var(--teal);font-size:18px}
.co2-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.co2-chip{font:700 11.5px var(--font-mono);padding:2px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text)}
.co2-chips .free-days{margin:0}
.co2-lines{list-style:none;margin:14px 0 0;padding:12px 0;border-block:1px solid var(--line);display:flex;flex-direction:column;gap:9px;max-height:210px;overflow:auto}
.co2-lines li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:14px}
.co2-qty{font:700 12px var(--font-mono);color:var(--teal)}
.co2-name{color:var(--muted)}
.co2-lines b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.co2-tot{display:flex;flex-direction:column;gap:8px;padding-top:12px;font-size:14px}
.co2-tot div{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.co2-ins em{font-style:normal;font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border-radius:999px;color:#6EE7B7;border:1px solid rgba(52,211,153,.4);margin-inline-start:4px;vertical-align:1px}
.co2-due{margin-top:2px;padding-top:10px;border-top:1px solid var(--line);align-items:baseline}
.co2-due span{color:var(--text) !important;font-weight:600;font-size:15px}
.co2-due b{font-size:24px;color:var(--text);letter-spacing:-.01em}
.co2-fine{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* timeline */
.co2-next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.co2-next li{position:relative;display:flex;gap:12px;padding-bottom:14px}
.co2-next li:last-child{padding-bottom:0}
.co2-next li::before{content:"";position:absolute;top:18px;bottom:0;inset-inline-start:7px;width:1px;background:var(--line-strong)}
.co2-next li:last-child::before{display:none}
.co2-next i{flex:none;width:15px;height:15px;margin-top:3px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--void)}
.co2-next li.now i{border-color:transparent;background:var(--grad);box-shadow:0 0 0 4px rgba(79,195,255,.15)}
.co2-next li.done i{border-color:transparent;background:#3DE59A;box-shadow:0 0 0 4px rgba(61,229,154,.15)}
.co2-next div{display:flex;flex-direction:column;min-width:0}
.co2-next b{font-size:13.5px}
.co2-next span{font-size:13px;color:var(--muted);line-height:1.45}

/* mobile: summary folds into a bar, pay button stays in reach */
.co2-mobar{display:none}
@media (max-width:760px){
  .co2{grid-template-columns:minmax(0,1fr);gap:16px}
  .co2-mobar{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;margin-bottom:14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);color:var(--text);font:inherit;cursor:pointer}
  .co2-mobar span{flex:1;text-align:start;font-size:14px;color:var(--muted)}
  .co2-mobar b{font-size:16px}
  .co2-mobar i{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
  .co2-mobar[aria-expanded="true"] i{transform:rotate(-135deg)}
  .co2-sum{display:none;position:static;order:-1}
  .co2-sum.open{display:block}
  .pmt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pmt{min-height:96px;padding:12px}
  .co2-gobar{position:sticky;bottom:-22px;margin:16px -22px -22px;padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(10,20,48,0),rgba(10,20,48,.96) 28%);z-index:2}
}

/* confirmation receipt */
.co-msg.co2-ok{max-width:560px}
.co-msg.co2-ok .co-ico{width:64px;height:64px;animation:okPop .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes okPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.co2-receipt{width:100%;margin:8px 0 4px;padding:6px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.035);text-align:start}
.co2-receipt div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px dashed var(--line-strong)}
.co2-receipt div:last-child{border-bottom:0}
.co2-receipt dt{color:var(--muted);font-size:13.5px}
.co2-receipt dd{margin:0;display:flex;flex-direction:column;align-items:flex-end;text-align:end;font-size:14.5px;font-variant-numeric:tabular-nums}
.co2-receipt dd small{font-size:12px;color:var(--muted)}
.co2-nextwrap{width:100%;text-align:start}
.co2-nextwrap .co2-label{margin-top:12px}
@media (prefers-reduced-motion:reduce){ .co-msg.co2-ok .co-ico{animation:none} .pmt,.pmr{transition:none} }

/* light mode */
html[data-theme="light"] .pmt,html[data-theme="light"] .pmr{background:#fff}
html[data-theme="light"] .pmt:hover,html[data-theme="light"] .pmr:hover{background:#F7FBFD}
html[data-theme="light"] .pmt:has(input:checked),html[data-theme="light"] .pmr:has(input:checked){background:#EFF8FC;box-shadow:0 0 0 1px var(--cyan) inset,0 10px 26px rgba(14,143,199,.12)}
html[data-theme="light"] .co2-dates,html[data-theme="light"] .co2-receipt{background:#fff}
html[data-theme="light"] .co2-ins em{color:#0B7A4B;border-color:rgba(16,170,100,.4)}
html[data-theme="light"] .co2-steps li.done i::before{border-color:#0E9A5E}
html[data-theme="light"] .co2-next li.done i{background:#14A86B}
@media (max-width:760px){ html[data-theme="light"] .co2-gobar{background:linear-gradient(180deg,rgba(245,250,252,0),rgba(245,250,252,.97) 28%)} }

.co2-pay .co-demo{margin-top:12px}
.co2-tot{gap:7px}
.pmr .pmt-tick{top:auto}

.co-msg.co2-ok{max-width:860px;gap:8px}
.co2-okgrid{width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:start;margin:10px 0 6px;text-align:start}
.co2-okgrid .co2-receipt{margin:0;padding:4px 16px}
.co2-okgrid .co2-receipt div{padding:9px 0}
.co2-okgrid .co2-nextwrap .co2-label{margin-top:4px}
@media (max-width:760px){ .co2-okgrid{grid-template-columns:minmax(0,1fr)} }

/* ---------- html:not([data-theme="light"]) ark mode surfaces: charcoal with a steel-teal edge, to sit on the steel-teal -> black background ---------- */
html:not([data-theme="light"]){--line:rgba(130,200,225,.12);--line-strong:rgba(130,200,225,.26);--muted:#93A5AF;--panel:#11171B;
  --glass:linear-gradient(180deg,rgba(26,36,42,.74),rgba(10,14,18,.84))}
html:not([data-theme="light"]) .glass{background:var(--glass);border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.45)}
html:not([data-theme="light"]) .drawer,html:not([data-theme="light"]) .modal,html:not([data-theme="light"]) .nudge,html:not([data-theme="light"]) .pop{background:linear-gradient(180deg,#151C21,#0A0E12);border-color:var(--line-strong);box-shadow:0 40px 90px rgba(0,0,0,.65)}
html:not([data-theme="light"]) .selbar,html:not([data-theme="light"]) .cartbar{background:linear-gradient(90deg,#151C21,#0C1115);box-shadow:0 0 40px rgba(74,156,185,.14),0 24px 50px rgba(0,0,0,.55)}
html:not([data-theme="light"]) .toast{background:#121A1F}
html:not([data-theme="light"]) .input{background:rgba(5,8,11,.72)}
html:not([data-theme="light"])  select.input option{background:#11171B}
html:not([data-theme="light"]) footer{background:linear-gradient(180deg,rgba(8,11,14,.4),rgba(5,7,10,.9))}
html:not([data-theme="light"]) .visit{background:linear-gradient(180deg,#121A1F,#0A0E12)}
html:not([data-theme="light"]) .visit-map,html:not([data-theme="light"]) .m-ground{background:#0C1216;fill:#0C1216}
html:not([data-theme="light"]) .m-block{fill:#131B20}
html:not([data-theme="light"]) .m-park{fill:#0F2626}
html:not([data-theme="light"]) .m-wadi{stroke:#18303A}
html:not([data-theme="light"]) .m-road{stroke:#24353html:not([data-theme="light"]) }
html:not([data-theme="light"]) .m-label{fill:#4html:not([data-theme="light"]) 6E7A}
html:not([data-theme="light"]) .pmt,html:not([data-theme="light"]) .pmr,html:not([data-theme="light"]) .co2-dates,html:not([data-theme="light"]) .co2-receipt{background:rgba(255,255,255,.03)}
html:not([data-theme="light"]) .chip:not([aria-pressed="true"]){background:rgba(255,255,255,.04)}
/* product photos are rendered in a charcoal studio with steel-teal light (render_products.py) */
img.pimg{background:radial-gradient(90% 80% at 50% 40%,#1E323C,#0A0E12 85%)}
html:not([data-theme="light"]) .pmt:has(input:checked),html:not([data-theme="light"]) .pmr:has(input:checked){background:rgba(74,156,185,.12)}

/* ---------- Buttons and accents: blue gradient (ice blue -> azure) ---------- */
:root{--grad:linear-gradient(90deg,#8BE3FB 0%,#4CB3EE 50%,#2C86E2 100%);--glow-c:rgba(76,179,238,.35)}
html[data-theme="light"]{--grad:linear-gradient(90deg,#62D2F6 0%,#3BA7EE 50%,#2C86E2 100%);--glow-c:rgba(44,134,226,.22)}
.pill.primary:hover{box-shadow:0 0 46px rgba(76,179,238,.5),inset 0 1px 0 rgba(255,255,255,.5)}
html[data-theme="light"] .pill.primary:hover{box-shadow:0 12px 30px rgba(44,134,226,.32),inset 0 1px 0 rgba(255,255,255,.6)}
html[data-theme="light"] .grad,html[data-theme="light"] .stat b{background:linear-gradient(90deg,#0E7CC0 0%,#1D6FD2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =====================================================================
   POLISH PASS: light mode refinements + small fixes in both modes
   ===================================================================== */
/* light background: soft paper with the same steel-teal light from the top left, a hint of azure on the right */
html[data-theme="light"] .bg-fx{background:linear-gradient(128deg,#E2F0F6 0%,#ECF3F7 28%,#F4F7FA 56%,#F7F9FB 100%)}
html[data-theme="light"] .bg-fx .b1{background:radial-gradient(circle,rgba(74,156,185,.26) 0%,rgba(74,156,185,.07) 42%,transparent 68%)}
html[data-theme="light"] .bg-fx .b2{background:radial-gradient(circle,rgba(44,134,226,.10) 0%,rgba(44,134,226,.03) 44%,transparent 68%)}
html[data-theme="light"] .bg-fx .b3{background:radial-gradient(closest-side,rgba(74,156,185,.08),transparent 70%)}
html[data-theme="light"] .bg-fx::before{opacity:.28}
/* footer sits on the page instead of a flat grey block */
html[data-theme="light"] footer:not(#cart-foot){background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75));border-top:1px solid var(--line)}
/* cards: crisp white with a quiet two-layer shadow */
html[data-theme="light"] .item,html[data-theme="light"] .cat,html[data-theme="light"] .card,html[data-theme="light"] .tile,html[data-theme="light"] .r-card{box-shadow:0 1px 2px rgba(16,40,60,.06),0 12px 32px rgba(16,40,60,.07)}
html[data-theme="light"] .glass{background:rgba(255,255,255,.86);border-color:rgba(16,70,110,.10)}
/* photo wells match the white-studio product photos */
html[data-theme="light"] img.pimg{background:radial-gradient(90% 80% at 50% 40%,#F8FAFB,#E2EAEE 85%);box-shadow:inset 0 0 0 1px rgba(16,70,110,.06)}
/* switches: no more navy, blue when on */
.switch input:checked + span{background:var(--grad)}
html:not([data-theme="light"]) .switch span{background:#2A3338}
html[data-theme="light"] .switch span{background:#CFD9DF}
html[data-theme="light"] .switch input:checked + span{background:var(--grad)}
/* the scrolling strip under the homepage video */
.band{background:linear-gradient(90deg,rgba(74,156,185,.10),rgba(44,134,226,.10))}
html[data-theme="light"] .band{background:linear-gradient(90deg,rgba(74,156,185,.10),rgba(44,134,226,.08));border-color:var(--line)}
/* links and focus rings follow the blue accent */
html[data-theme="light"] :focus-visible{outline-color:#2C86E2}
:focus-visible{outline-color:#4CB3EE}
/* text rendering */
body{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
img{image-rendering:auto}
/* the Vision 2030 strip fades in from the page instead of starting on a hard line */
.v30{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px)}
html:not([data-theme="light"]) .switch input:checked + span{background:var(--grad)}
/* dark mode: the homepage video fades into the charcoal page, not navy */
html:not([data-theme="light"]) .hero.showroom{background-color:#0A0E12}
html:not([data-theme="light"]) .hero-shade{background:
  linear-gradient(0deg,rgba(9,12,16,1) 0%,rgba(9,12,16,.82) 20%,rgba(9,12,16,.25) 50%,rgba(9,12,16,0) 66%),
  linear-gradient(90deg,rgba(9,12,16,.7) 0%,rgba(9,12,16,.25) 40%,rgba(9,12,16,0) 62%),
  linear-gradient(180deg,rgba(9,12,16,.65) 0%,rgba(9,12,16,0) 16%)}
html:not([data-theme="light"])[dir="rtl"] .hero-shade{background:
  linear-gradient(0deg,rgba(9,12,16,1) 0%,rgba(9,12,16,.82) 20%,rgba(9,12,16,.25) 50%,rgba(9,12,16,0) 66%),
  linear-gradient(270deg,rgba(9,12,16,.7) 0%,rgba(9,12,16,.25) 40%,rgba(9,12,16,0) 62%),
  linear-gradient(180deg,rgba(9,12,16,.65) 0%,rgba(9,12,16,0) 16%)}
@media (max-width:860px){
  html:not([data-theme="light"]) .hero-shade,html:not([data-theme="light"])[dir="rtl"] .hero-shade{background:linear-gradient(0deg,rgba(9,12,16,1) 0%,rgba(9,12,16,.86) 38%,rgba(9,12,16,.2) 64%,rgba(9,12,16,0) 76%),linear-gradient(180deg,rgba(9,12,16,.8) 0%,rgba(9,12,16,0) 24%)}
}
/* dark mode Vision 2030 strip: charcoal-teal into Saudi green */
html:not([data-theme="light"]) .v30{background:linear-gradient(100deg,#0E1B22 0%,#0C2A31 46%,#0C4A37 100%)}

/* ---------- Type quality: real weights only, crisp rendering ---------- */
html{font-synthesis:none;font-optical-sizing:auto;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1}
h1,h2,.display{text-wrap:balance}
p,.sub,dd,.hp-q p{text-wrap:pretty}
.nums,.co2-tot,.co2-receipt dd,.stat b,.price,.co2-due b{font-variant-numeric:tabular-nums}

/* =====================================================================
   VISION 2030 v3: copy + stat card + icon tiles + skyline
   ===================================================================== */
.v30{padding-top:clamp(64px,8vw,112px)}
.v30-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.v30-copy{max-width:600px}
.v30-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:600 12px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--v-mark)}
.v30-kicker i{width:8px;height:8px;border-radius:50%;background:var(--v-mark);box-shadow:0 0 0 4px color-mix(in srgb,var(--v-mark) 22%,transparent)}
.v30-copy h2{margin:0 0 18px;font-size:clamp(26px,2.8vw,40px);line-height:1.22}
.v30-copy > p:not(.v30-kicker){margin:0 0 30px;max-width:56ch}
/* the stat card */
.v30-card{position:relative;border-radius:24px;padding:clamp(22px,3vw,34px);border:1px solid var(--v-line);
  background:linear-gradient(160deg,color-mix(in srgb,var(--v-mark) 9%,transparent),transparent 60%),color-mix(in srgb,var(--v-text) 3%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 30px 70px rgba(0,0,0,.25);overflow:hidden}
.v30-card .v30-mark{align-items:flex-start;gap:4px;margin:0 0 22px;font-size:clamp(88px,10vw,150px);line-height:.95}
html[dir="rtl"] .v30-card .v30-mark{align-items:flex-start}
.v30-card .v30-mark b{background:linear-gradient(180deg,color-mix(in srgb,var(--v-mark) 100%,#fff 18%),var(--v-mark));-webkit-background-clip:text;background-clip:text;color:transparent}
.v30-card .v30-word{font-size:clamp(13px,1.1vw,16px);letter-spacing:.4em;opacity:.8}
.v30-mlabel{margin:0 0 12px;font:600 13px var(--font-body);color:var(--v-text)}
.v30-bar{position:relative;height:12px;border-radius:999px;background:color-mix(in srgb,var(--v-text) 8%,transparent);overflow:hidden}
.v30-now{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--v-mark) 70%,#fff 0%),var(--v-mark));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.v30-goal{position:absolute;inset-block:0;inset-inline-end:0;width:51.7%;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--v-mark) 45%,transparent) 0 6px,transparent 6px 11px);opacity:.55}
.v30.in .v30-now{width:48.3%}
.v30-legend{display:flex;justify-content:space-between;gap:16px;margin-top:12px}
.v30-legend div{display:flex;flex-direction:column}
.v30-legend div:last-child{text-align:end;align-items:flex-end}
.v30-legend b{font:500 clamp(22px,2vw,28px)/1.1 var(--font-display);color:var(--v-text)}
.v30-legend span{font:500 12px var(--font-mono);letter-spacing:.06em;color:var(--v-muted);margin-top:4px}
/* the four reasons */
.v30-tiles{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.v30-tiles li{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;border-radius:18px;border:1px solid var(--v-line);background:color-mix(in srgb,var(--v-text) 3%,transparent)}
.v30-tiles b{font:600 15px var(--font-body);color:var(--v-text);margin-top:6px}
.v30-tiles li > span:not(.v30-ico){font-size:13.5px;line-height:1.55;color:var(--v-muted)}
.v30-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--v-mark);background:color-mix(in srgb,var(--v-mark) 14%,transparent);border:1px solid color-mix(in srgb,var(--v-mark) 35%,transparent)}
.v30-skyline{margin-top:clamp(36px,5vw,64px)}
html[data-theme="light"] .v30-card{box-shadow:0 1px 2px rgba(16,40,60,.05),0 24px 56px rgba(16,60,40,.10);background:linear-gradient(160deg,rgba(14,138,79,.07),transparent 60%),rgba(255,255,255,.72)}
html[data-theme="light"] .v30-tiles li{background:rgba(255,255,255,.7);box-shadow:0 1px 2px rgba(16,40,60,.04),0 10px 26px rgba(16,60,40,.06)}
@media (max-width:980px){ .v30-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .v30-grid{grid-template-columns:minmax(0,1fr)} .v30-card .v30-mark{font-size:clamp(76px,22vw,120px)} }
@media (max-width:520px){ .v30-tiles{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .v30-now{transition:none} }

/* hero headline: title case as in the brand mockup, RENT. in the accent gradient */
.hero.showroom h1{text-transform:none !important;letter-spacing:0}
.hero.showroom h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v30-legend b{font:600 clamp(22px,2vw,28px)/1.1 var(--font-body);letter-spacing:-.01em}
/* Arabic letters join: never letter-space them (it breaks the words apart) */
html[lang="ar"] *:not(svg):not(svg *){letter-spacing:0 !important}
html[lang="ar"] .kicker,html[lang="ar"] .start-note,html[lang="ar"] .label,html[lang="ar"] .crumbs{font-family:"IBM Plex Sans Arabic",var(--font-mono)}
/* accent words on light backgrounds use the deeper blue so they stay readable */
html[data-theme="light"] .hero.showroom h1 .grad{background:linear-gradient(90deg,#1F8FD8,#1D5FCB);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.showroom h1 .grad{text-shadow:none !important;filter:drop-shadow(0 0 14px rgba(255,255,255,.55))}
html:not([data-theme="light"]) .hero.showroom h1 .grad{filter:none}

/* =====================================================================
   4-HOUR TRUCK HOLD: countdown + LED-panel timeline
   ===================================================================== */
.hold{--hc:#4CB3EE;--hc2:#8BE3FB;flex:none;display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--hc) 40%,transparent);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--hc) 16%,transparent),transparent 60%),color-mix(in srgb,var(--text) 3%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--hc) 10%,transparent) inset,0 18px 40px rgba(0,0,0,.18)}
.hold[data-level="warn"]{--hc:#F2A93B;--hc2:#FFD38A}
.hold[data-level="crit"]{--hc:#F0635A;--hc2:#FF9D96}
.hold-top{display:flex;align-items:center;gap:12px}
.hold-top div{flex:1;min-width:0;display:flex;flex-direction:column}
.hold-top b{font-size:15px}
.hold-top small{font-size:12.5px;color:var(--muted);line-height:1.4}
.hold-ico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--hc) 18%,transparent);border:1px solid color-mix(in srgb,var(--hc) 45%,transparent)}
.hold-ico::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--hc2);border-top-color:transparent;transform:rotate(45deg)}
.hold-clock{font:600 22px/1 var(--font-mono);letter-spacing:.02em;color:var(--hc2);font-variant-numeric:tabular-nums;direction:ltr;text-shadow:0 0 18px color-mix(in srgb,var(--hc) 55%,transparent)}
.hold[data-level="crit"] .hold-clock{animation:holdBlink 1s steps(2,start) infinite}
@keyframes holdBlink{50%{opacity:.55}}
/* the track: one cell per hour, drawn like LED cabinets with a pixel grid */
.hold-track{position:relative;padding:8px 0 20px}
.hold-cells{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}
.hold-cell{position:relative;height:16px;border-radius:5px;overflow:hidden;background:color-mix(in srgb,var(--text) 7%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent)}
.hold-fill{position:absolute;inset:0;transform-origin:right center;transform:scaleX(1);transition:transform .9s linear;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px),
  linear-gradient(90deg,var(--hc2),var(--hc));box-shadow:0 0 14px color-mix(in srgb,var(--hc) 60%,transparent)}
html[dir="rtl"] .hold-fill{transform-origin:left center}
.hold-tick{position:absolute;top:2px;bottom:0;inset-inline-start:var(--at);width:0}
.hold-tick i{position:absolute;top:0;height:28px;width:1px;background:color-mix(in srgb,var(--text) 18%,transparent)}
.hold-tick em{position:absolute;bottom:0;transform:translateX(-50%);font:500 10.5px var(--font-mono);font-style:normal;color:var(--muted)}
html[dir="rtl"] .hold-tick em{transform:translateX(50%)}
.hold-now{position:absolute;top:2px;width:3px;height:28px;margin-inline-start:-1.5px;border-radius:3px;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--hc) 35%,transparent),0 0 16px var(--hc);transition:inset-inline-start .9s linear}
.hold-ends{display:flex;justify-content:space-between;gap:12px;font:500 11.5px var(--font-mono);color:var(--muted)}
.hold-ends span{display:flex;align-items:center;gap:6px}
.hold-dot{width:6px;height:6px;border-radius:50%;background:var(--hc2);box-shadow:0 0 8px var(--hc)}
.hold-note{margin:0;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--text) 14%,transparent);font-size:12.5px;line-height:1.5;color:var(--muted)}
.hold-off{flex-direction:row;align-items:center;gap:12px;--hc:#8FA3B0;--hc2:#C9D6DE}
.hold-off .hold-top{flex:1}
/* small timer chip on the bottom bar and in checkout */
.hold-chip{--hc:#4CB3EE;--hc2:#8BE3FB;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font:600 12.5px var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--hc2);border:1px solid color-mix(in srgb,var(--hc) 45%,transparent);background:color-mix(in srgb,var(--hc) 12%,transparent);white-space:nowrap}
.hold-chip i{width:7px;height:7px;border-radius:50%;background:var(--hc2);box-shadow:0 0 0 0 var(--hc);animation:holdPulse 2s infinite}
@keyframes holdPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hc) 70%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hold-chip[data-level="warn"]{--hc:#F2A93B;--hc2:#FFD38A}
.hold-chip[data-level="crit"]{--hc:#F0635A;--hc2:#FF9D96}
.cartbar .hold-chip{margin-inline-start:auto;margin-inline-end:4px}
.hold-chip [data-hold-left]{direction:ltr}
html[data-theme="light"] .hold{--hc:#2C86E2;--hc2:#1F7BD6;background:radial-gradient(120% 140% at 0% 0%,rgba(44,134,226,.10),transparent 60%),#fff;box-shadow:0 1px 2px rgba(16,40,60,.05),0 14px 32px rgba(16,40,60,.08)}
html[data-theme="light"] .hold[data-level="warn"],html[data-theme="light"] .hold-chip[data-level="warn"]{--hc:#D68910;--hc2:#B36B00}
html[data-theme="light"] .hold[data-level="crit"],html[data-theme="light"] .hold-chip[data-level="crit"]{--hc:#D93C33;--hc2:#B42318}
html[data-theme="light"] .hold-chip{--hc:#2C86E2;--hc2:#1D6FD2}
html[data-theme="light"] .hold-fill{background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 4px),linear-gradient(90deg,#62D2F6,#2C86E2)}
html[data-theme="light"] .hold-clock{text-shadow:none}
html[data-theme="light"] .hold-now{background:#0B1A2C}
@media (prefers-reduced-motion:reduce){ .hold-fill,.hold-now{transition:none} .hold-chip i,.hold[data-level="crit"] .hold-clock{animation:none} }
html[lang="ar"] .hold-ends,html[lang="ar"] .hold-tick em,html[lang="ar"] .hold-chip{font-family:"IBM Plex Sans Arabic",var(--font-mono)}

/* ---------- Hold timer v2: a mini stage with an LED wall on truss ---------- */
.hold-top{justify-content:space-between}
.hold-chip.mini{padding:3px 9px;font-size:10.5px;letter-spacing:.14em}
.hold-stage{position:relative;padding:0 2px}
.hold-beam-top{position:relative;height:12px;margin:0 0 4px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'><g fill='none' stroke='%23AEBBC3' stroke-width='1.1'><path d='M0 1.5H14M0 10.5H14M0 1.5L7 10.5L14 1.5'/></g></svg>") repeat-x center/14px 12px;opacity:.9}
.hold-head{position:absolute;top:8px;left:var(--hx,30%);width:14px;height:12px;border-radius:3px 3px 6px 6px;background:linear-gradient(180deg,#3a444b,#1b2126);box-shadow:0 0 0 1px rgba(255,255,255,.08);animation:holdSweepX 9s ease-in-out infinite alternate;z-index:3}
.hold-cone{position:absolute;top:10px;left:50%;width:90px;height:150px;transform-origin:50% 0;transform:translateX(-50%) rotate(var(--ha,0deg));
  background:linear-gradient(180deg,color-mix(in srgb,var(--hc2) 45%,transparent),transparent 85%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:.55;pointer-events:none;animation:holdSweepA 9s ease-in-out infinite alternate}
@keyframes holdSweepX{0%{left:12%}100%{left:80%}}
@keyframes holdSweepA{0%{transform:translateX(-50%) rotate(-24deg)}100%{transform:translateX(-50%) rotate(24deg)}}
.hold-towers{display:grid;grid-template-columns:14px minmax(0,1fr) 14px;gap:6px;align-items:stretch}
.hold-tower{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><g fill='none' stroke='%23AEBBC3' stroke-width='1.1'><path d='M1.5 0V14M12.5 0V14M1.5 0L12.5 7L1.5 14'/></g></svg>") repeat-y center/14px 14px;opacity:.9}
.hold-wall{position:relative;border-radius:4px;padding:5px;background:#0b0f12;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 30px color-mix(in srgb,var(--hc) 25%,transparent),inset 0 0 0 1px #000;overflow:hidden}
.hold-led{display:block;width:100%;height:auto;aspect-ratio:96/22;border-radius:2px}
.hold-hours{display:grid;grid-template-columns:repeat(var(--n),1fr);margin:8px 20px 0;gap:0}
.hold-hours span{position:relative;text-align:center;font:600 11px var(--font-mono);color:var(--hc2);padding-top:8px;transition:color .4s,opacity .4s}
.hold-hours span::before{content:"";position:absolute;top:0;left:12%;right:12%;height:3px;border-radius:3px;background:var(--hc);box-shadow:0 0 10px var(--hc)}
.hold-hours span.off{color:var(--muted);opacity:.55}
.hold-hours span.off::before{background:color-mix(in srgb,var(--text) 14%,transparent);box-shadow:none}
.hold-hours span.now::before{animation:holdNow 1.6s ease-in-out infinite}
@keyframes holdNow{50%{opacity:.35}}
.hold-track,.hold-clock{display:none}
html[data-theme="light"] .hold-beam-top,html[data-theme="light"] .hold-tower{filter:brightness(.55)}
html[data-theme="light"] .hold-wall{box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 28px rgba(16,40,60,.22)}
html[dir="rtl"] .hold-led{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){ .hold-head,.hold-cone{animation:none} .hold-hours span.now::before{animation:none} }

.hold-stage{overflow:visible}
.hold-head{z-index:4;width:16px;height:13px;top:6px;background:linear-gradient(180deg,#4a5660,#20272d);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.4)}
.hold-head::after{content:"";position:absolute;left:3px;right:3px;bottom:-2px;height:4px;border-radius:50%;background:var(--hc2);box-shadow:0 0 10px 2px var(--hc)}
.hold-cone{top:12px;width:120px;height:120px;mix-blend-mode:normal;opacity:1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hc2) 38%,transparent),color-mix(in srgb,var(--hc) 10%,transparent) 70%,transparent)}
.hold-wall{z-index:1}
.hold-beam-top{z-index:3}
.hold-hours,.hold-ends{direction:ltr}
html[dir="rtl"] .hold-ends span:first-child{order:0}

/* ---------- Truck in the top bar: hold ring + time left ---------- */
.cartbtn{--hc:#4CB3EE;--hc2:#8BE3FB}
.cartbtn[data-level="warn"]{--hc:#F2A93B;--hc2:#FFD38A}
.cartbtn[data-level="crit"]{--hc:#F0635A;--hc2:#FF9D96}
.cart-lab{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;padding-bottom:3px}
.cart-lab b{padding-bottom:0}
.truck-ring{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.truck-ring circle{fill:none;stroke-width:2.4}
.tr-bg{stroke:color-mix(in srgb,var(--text) 12%,transparent)}
.tr-fg{stroke:var(--hc);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg) scaleY(-1);transform-origin:32px 32px;
  filter:drop-shadow(0 0 3px var(--hc));transition:stroke-dashoffset .9s linear,stroke .4s}
.tr-dot{fill:#fff;stroke:none;filter:drop-shadow(0 0 4px var(--hc))}
.truck-time{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font:600 11.5px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--hc2);direction:ltr;letter-spacing:.02em}
.truck-time i{width:6px;height:6px;border-radius:50%;background:var(--hc2);animation:holdPulse 2s infinite}
.truck-time[hidden]{display:none}
.cartbtn.holding .t-body{color:var(--hc2)}
.cartbtn[data-level="crit"] .truck-time{animation:holdBlink 1s steps(2,start) infinite}
html[data-theme="light"] .cartbtn{--hc:#2C86E2;--hc2:#1D6FD2}
html[data-theme="light"] .cartbtn[data-level="warn"]{--hc:#D68910;--hc2:#B36B00}
html[data-theme="light"] .cartbtn[data-level="crit"]{--hc:#D93C33;--hc2:#B42318}
html[data-theme="light"] .tr-dot{fill:var(--hc)}
html[dir="rtl"] .cart-lab{align-items:flex-end}
@media (max-width:520px){ .cart-lab{display:none} .truck-ring{width:50px;height:50px} }
@media (prefers-reduced-motion:reduce){ .tr-fg{transition:none} .truck-time i{animation:none} }

/* ---------- Buttons: clean, slightly rounded corners instead of full pills ---------- */
.pill,.pill.sm,.pill.primary,.pill.outline,.pill.glass,.wa-pill,.wa-float,.langbtn,.co-go,.start-btn{border-radius:10px}
.pill.sm{border-radius:8px}
.hero.showroom .search{border-radius:12px}
.hero.showroom .search button{border-radius:9px}
.themebtn{border-radius:10px}

/* =====================================================================
   BRAND PALETTE (client spec): #56FFE6 aqua · #47E5FD cyan · #065DCF blue
   Primary buttons: diagonal gradient, white Michroma label, soft sheen.
   ===================================================================== */
:root,html[data-theme="light"]{
  --brand-aqua:#56FFE6;--brand-cyan:#47E5FD;--brand-blue:#065DCF;
  --grad:linear-gradient(135deg,#56FFE6 0%,#47E5FD 45%,#065DCF 100%);
  --glow-c:rgba(71,229,253,.32)}
.pill.primary,.co-go,.start-btn{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#56FFE6 0%,#47E5FD 42%,#2AA6EC 68%,#065DCF 100%);color:#fff;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:13px;
  text-shadow:0 1px 2px rgba(3,40,90,.55),0 0 10px rgba(3,40,90,.25);
  border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 26px rgba(6,93,207,.28)}
/* the sheen: a soft light band across the upper left, like the sample */
.pill.primary::before,.co-go::before,.start-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 10%,rgba(255,255,255,.28),transparent 55%),linear-gradient(160deg,transparent 55%,rgba(6,40,120,.18))}
.pill.primary::after,.co-go::after,.start-btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s ease}
.pill.primary:hover::after,.co-go:hover::after,.start-btn:hover::after{left:120%}
.pill.primary:hover,.co-go:hover,.start-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px rgba(6,93,207,.38),0 0 28px rgba(71,229,253,.3)}
.pill.primary:active{transform:translateY(1px)}
.pill.primary svg,.start-btn svg{filter:drop-shadow(0 1px 1px rgba(3,40,90,.5))}
.pill.primary.sm{font-size:11.5px;letter-spacing:.07em}
.pill.primary:disabled{filter:saturate(.4) brightness(.85);cursor:not-allowed}
html[data-theme="light"] .pill.primary,html[data-theme="light"] .co-go{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px rgba(6,93,207,.24)}
/* Arabic labels keep the Arabic typeface and no caps/spacing */
html[lang="ar"] .pill.primary,html[lang="ar"] .co-go,html[lang="ar"] .start-btn{font-family:"IBM Plex Sans Arabic",var(--font-body);font-weight:600;font-size:15px;text-transform:none}
/* other places that used the old accent */
.item .add,.sm.go,.icon-btn .count,.cartbtn .count,.co2-steps li.now i,.pmt:has(input:checked) .pmt-tick,.pmr:has(input:checked) .pmt-tick{background:var(--grad);color:#fff}
.pmt:has(input:checked),.pmr:has(input:checked){border-color:#47E5FD;box-shadow:0 0 0 1px #47E5FD inset,0 10px 30px rgba(71,229,253,.14)}
.hero.showroom h1 .grad,.grad{background:linear-gradient(90deg,#56FFE6,#47E5FD 45%,#2A8DE8);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .grad,html[data-theme="light"] .stat b,html[data-theme="light"] .hero.showroom h1 .grad{background:linear-gradient(90deg,#0AA88F,#0B8FC4 45%,#065DCF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hold{--hc:#47E5FD;--hc2:#56FFE6}
.cartbtn{--hc:#47E5FD;--hc2:#56FFE6}
.hold-chip{--hc:#47E5FD;--hc2:#56FFE6}
html[data-theme="light"] .hold,html[data-theme="light"] .cartbtn,html[data-theme="light"] .hold-chip{--hc:#065DCF;--hc2:#0B7FC9}
.pill.primary,.pill.primary:hover,.co-go,.start-btn,html[data-theme="light"] .pill.primary,html[data-theme="light"] .co-go,.hero.showroom .search button{color:#fff !important}
.hero.showroom .search button{background:linear-gradient(135deg,#56FFE6,#47E5FD 45%,#065DCF) !important}

/* =====================================================================
   HOMEPAGE v4 (client mockup): category rows, brands, new arrivals, CTA band,
   horizontal product cards, rental journey, Vision 2030 card, trust panel
   ===================================================================== */
.hm{padding-block:clamp(36px,5vw,64px) 0}
.hm-h{margin:4px 0 22px;font-size:clamp(24px,2.6vw,34px)}
.sections .hm:last-child{padding-bottom:clamp(48px,6vw,88px)}
img.pcut{display:block;width:100%;height:100%;object-fit:contain;background:none !important;box-shadow:none !important;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}
html[data-theme="light"] img.pcut{filter:drop-shadow(0 10px 14px rgba(16,40,60,.16))}

/* 5 · category rows */
.catrows{display:flex;flex-direction:column;gap:10px}
.catrow{border-radius:16px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand-cyan) 14%,transparent),color-mix(in srgb,var(--brand-cyan) 3%,transparent) 55%,transparent),var(--glass);
  transition:border-color .25s,box-shadow .25s}
.catrow:hover{border-color:var(--line-strong)}
.catrow.open{border-color:color-mix(in srgb,var(--brand-cyan) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-cyan) 30%,transparent),0 20px 50px rgba(0,0,0,.22)}
.catrow-head{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr) 28px;align-items:center;gap:18px;padding:14px 22px;cursor:pointer;min-height:84px}
.catrow-head:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:-2px;border-radius:16px}
.catrow-name{font:400 clamp(22px,3vw,40px)/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
.catrow-meta{font:500 12px var(--font-mono);color:var(--muted);white-space:nowrap}
.catrow-meta b{color:var(--text);font-weight:600}
.catrow-pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:64px;transition:opacity .3s,transform .3s}
.catrow-pics img.pcut{height:64px}
.catrow.open .catrow-pics{opacity:0;transform:translateY(-6px)}
.catrow-chev{width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);justify-self:center;transition:transform .3s}
.catrow.open .catrow-chev{transform:rotate(-135deg);border-color:var(--brand-cyan)}
.catrow-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.catrow.open .catrow-body{grid-template-rows:1fr}
.catrow-inner{overflow:hidden;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:24px;padding:0 22px}
.catrow.open .catrow-inner{padding-bottom:22px}
.catrow-desc{border-inline-start:2px solid var(--brand-cyan);padding-inline-start:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.catrow-desc p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.catrow-from{font-size:13.5px !important}
.catrow-from b{color:var(--text)}
.catrow-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.catrow-item{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;cursor:pointer;padding:10px;border-radius:12px;transition:background .2s}
.catrow-item:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.catrow-item:focus-visible{outline:2px solid var(--brand-cyan)}
.catrow-item img.pcut{height:96px;margin-bottom:6px;transition:transform .3s}
.catrow-item:hover img.pcut{transform:translateY(-3px) scale(1.03)}
.catrow-item b{font-size:13px;line-height:1.35;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catrow-item span{font-size:12px;color:var(--muted)}
.catrow-item em{font-style:normal;color:var(--brand-cyan);font-weight:600}
html[data-theme="light"] .catrow{background:linear-gradient(90deg,rgba(71,229,253,.20),rgba(71,229,253,.05) 55%,#fff)}
html[data-theme="light"] .catrow-item em{color:#065DCF}
@media (max-width:860px){
  .catrow-head{grid-template-columns:minmax(0,1fr) auto 24px;min-height:64px;padding:12px 16px}
  .catrow-pics{display:none}
  .catrow-inner{grid-template-columns:minmax(0,1fr);padding:0 16px}
  .catrow-items{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 6 · brands */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.brand{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:84px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);transition:transform .2s,border-color .2s}
.brand b{font:400 15px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.brand span{font:500 11px var(--font-mono);color:var(--muted)}
.brand:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand-cyan) 55%,transparent)}
.brand:focus-visible{outline:2px solid var(--brand-cyan)}
html[data-theme="light"] .brand{background:#fff}

/* 7 · new arrivals */
.arrivals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.arrival{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;cursor:pointer;padding:8px;border-radius:14px}
.arrival img.pcut{height:150px;margin-bottom:10px;transition:transform .35s}
.arrival:hover img.pcut{transform:translateY(-6px) rotate(-1.5deg)}
.arrival b{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arrival span{font:500 11px var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.arrival:focus-visible{outline:2px solid var(--brand-cyan)}
@media (max-width:860px){ .arrivals{grid-template-columns:repeat(5,minmax(160px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px} .arrival{scroll-snap-align:start} }

/* 8 · CTA band */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 28px;border-radius:18px;
  background:linear-gradient(110deg,#56FFE6 0%,#47E5FD 55%,#2AA6EC 100%);color:#04222C;box-shadow:0 20px 50px rgba(6,93,207,.22)}
.cta-band h3{margin:0 0 4px;font:400 clamp(17px,1.6vw,21px) var(--font-display);color:#04222C}
.cta-band p{margin:0;font-size:14.5px;color:#0B3B4B;max-width:62ch}
.cta-btn{background:#fff !important;color:#04222C !important;font-weight:600;box-shadow:0 8px 20px rgba(4,34,44,.18)}
.cta-btn:hover{background:#F2FFFD !important}

/* 9 · horizontal product cards */
.hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hcard{display:grid;grid-template-columns:42% minmax(0,1fr);border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--glass);transition:transform .25s,border-color .25s,box-shadow .25s}
.hcard:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.hcard-ph{display:grid;place-items:center;padding:14px;background:radial-gradient(90% 80% at 50% 45%,color-mix(in srgb,var(--brand-cyan) 12%,transparent),transparent 70%),color-mix(in srgb,var(--text) 3%,transparent)}
.hcard-ph img.pcut{height:120px}
.hcard-txt{display:flex;flex-direction:column;gap:6px;padding:16px}
.hcard-txt h3{margin:0;font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard-row{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.hcard .price b{font-size:16px}
.hcard .price span{display:block;font:500 11px var(--font-mono);color:var(--muted)}
html[data-theme="light"] .hcard{border-color:rgba(11,118,168,.14);background:
  radial-gradient(55% 120% at 21% 50%,rgba(71,229,253,.30),transparent 70%),
  linear-gradient(100deg,#E3F4FA 0%,#EEF8FC 38%,#F7FBFD 62%,#FFFFFF 100%)}
html[data-theme="light"] .hcard:hover{border-color:rgba(11,118,168,.3);box-shadow:0 18px 40px rgba(16,60,90,.12)}
html[data-theme="light"] .hcard-ph{background:none}
html[dir="rtl"][data-theme="light"] .hcard{background:
  radial-gradient(55% 120% at 79% 50%,rgba(71,229,253,.30),transparent 70%),
  linear-gradient(260deg,#E3F4FA 0%,#EEF8FC 38%,#F7FBFD 62%,#FFFFFF 100%)}
@media (max-width:980px){ .hcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .hcards{grid-template-columns:minmax(0,1fr)} }

/* 10 · rental journey */
.journey{display:flex;flex-direction:column;gap:18px}
.jr-track{position:relative;padding-top:58px}
.jr-line{position:absolute;top:80px;left:calc(10% - 0px);right:10%;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 11px)}
.jr-line span{display:block;height:100%;border-radius:3px;background:var(--grad);box-shadow:0 0 12px color-mix(in srgb,var(--brand-cyan) 60%,transparent);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.jr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:relative}
.jr-steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.jr-dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;background:var(--void);border:1.5px solid var(--line-strong);color:var(--muted);position:relative;z-index:1}
.jr-steps li.done .jr-dot{background:var(--grad);border-color:transparent;color:#fff}
.jr-steps li.now .jr-dot{background:var(--void);border:2px solid var(--brand-cyan);color:var(--brand-cyan);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand-cyan) 18%,transparent),0 0 24px color-mix(in srgb,var(--brand-cyan) 45%,transparent)}
.jr-steps small{font:600 11px var(--font-mono);color:var(--muted)}
.jr-steps b{font-size:14.5px}
.jr-steps li > span:last-child{font-size:12.5px;color:var(--muted);line-height:1.45;max-width:22ch}
.jr-steps li.now b{color:var(--brand-cyan)}
.jr-tip{position:absolute;top:0;left:calc(10% + (80% * var(--at) / 100));transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;padding:7px 8px 7px 14px;border-radius:12px;
  background:var(--glass);border:1px solid color-mix(in srgb,var(--brand-cyan) 50%,transparent);font:600 13px var(--font-body);box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:2}
.jr-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:inherit;border-right:1px solid color-mix(in srgb,var(--brand-cyan) 50%,transparent);border-bottom:1px solid color-mix(in srgb,var(--brand-cyan) 50%,transparent)}
.jr-tip [data-hold-left]{font-family:var(--font-mono);color:var(--brand-cyan);direction:ltr}
.jr-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px 14px 20px;border-radius:14px;border:1px solid var(--line);background:var(--glass)}
.jr-bar div{display:flex;flex-direction:column;gap:2px}
.jr-bar b{font-size:14.5px}
.jr-bar span{font-size:13px;color:var(--muted)}
html[data-theme="light"] .jr-dot{background:#fff}
html[data-theme="light"] .jr-steps li.now .jr-dot{background:#fff;border-color:#065DCF;color:#065DCF}
html[data-theme="light"] .jr-steps li.now b,html[data-theme="light"] .jr-tip [data-hold-left]{color:#065DCF}
html[data-theme="light"] .jr-tip,html[data-theme="light"] .jr-bar{background:#fff}
html[dir="rtl"] .jr-line{transform:scaleX(-1)}
@media (max-width:760px){
  .jr-track{padding-top:0}
  .jr-line{display:none}
  .jr-tip{position:static;transform:none;margin-bottom:12px;justify-content:space-between}
  .jr-tip::after{display:none}
  .jr-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .jr-steps li{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;text-align:start;align-items:start;padding-bottom:14px;position:relative}
  .jr-steps li::after{content:"";position:absolute;left:22px;top:48px;bottom:0;width:2px;background:var(--line-strong)}
  .jr-steps li.done::after{background:var(--brand-cyan)}
  .jr-steps li:last-child::after{display:none}
  .jr-dot{grid-row:1 / span 3;margin:0}
  html[dir="rtl"] .jr-steps li::after{left:auto;right:22px}
}

/* 11 · Vision 2030 card */
.v30c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);border-radius:22px;overflow:hidden;min-height:380px;
  background:linear-gradient(120deg,#0E6E6A 0%,#0F8E8A 30%,#0B4F6A 60%,#081521 100%);box-shadow:0 30px 70px rgba(0,0,0,.3);position:relative;isolation:isolate}
.v30c-copy{position:relative;z-index:2;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:#F2FBFF}
.v30c-chip{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font:600 11.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.v30c-chip i{width:7px;height:7px;border-radius:50%;background:#56FFE6;box-shadow:0 0 0 3px rgba(86,255,230,.25)}
.v30c-copy h2{margin:0;font:400 clamp(22px,2.4vw,32px)/1.25 var(--font-display);color:#fff}
.v30c-copy > p{margin:0;font-size:15px;line-height:1.65;color:rgba(242,251,255,.82);max-width:52ch}
.v30c-stat{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.14)}
.v30c-stat div{display:flex;flex-direction:column}
.v30c-stat b{font:600 22px/1 var(--font-body);color:#fff}
.v30c-stat span{font:500 11px var(--font-mono);color:rgba(242,251,255,.7);margin-top:4px}
.v30c-arrow{width:44px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.3),#56FFE6);position:relative}
.v30c-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid #56FFE6;border-right:2px solid #56FFE6;transform:rotate(45deg)}
html[dir="rtl"] .v30c-arrow{transform:scaleX(-1)}
.v30c .pill.primary{margin-top:4px}
.v30c-media{position:relative;min-height:260px}
.v30c-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v30c-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0B4F6A 0%,rgba(11,79,106,.6) 18%,rgba(11,79,106,0) 50%)}
html[dir="rtl"] .v30c-media::before{background:linear-gradient(270deg,#0B4F6A 0%,rgba(11,79,106,.6) 18%,rgba(11,79,106,0) 50%)}
.v30c-mark{position:absolute;right:18px;bottom:6px;z-index:2;font:500 clamp(60px,8vw,110px)/1 "Readex Pro",sans-serif;color:rgba(86,255,230,.9);text-shadow:0 0 30px rgba(86,255,230,.45)}
html[dir="rtl"] .v30c-mark{right:auto;left:18px}
@media (max-width:860px){ .v30c{grid-template-columns:minmax(0,1fr)} .v30c-media{min-height:220px;order:-1} .v30c-media::before{background:linear-gradient(0deg,#0E6E6A 0%,rgba(14,110,106,0) 60%)} }

/* 12 · trust + help panel */
.trust{border-radius:20px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);
  background:radial-gradient(70% 120% at 0% 0%,color-mix(in srgb,var(--brand-cyan) 14%,transparent),transparent 60%),var(--glass)}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.trust-row h3,.trust-help h3{margin:10px 0 4px;font-size:15.5px}
.trust-row p,.trust-help p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.trust-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--brand-cyan);background:color-mix(in srgb,var(--brand-cyan) 14%,transparent);border:1px solid color-mix(in srgb,var(--brand-cyan) 35%,transparent)}
.trust-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding-top:24px}
.trust-help .pill{margin-top:14px}
html[data-theme="light"] .trust{background:radial-gradient(70% 120% at 0% 0%,rgba(71,229,253,.18),transparent 60%),#fff}
html[data-theme="light"] .trust-ico{color:#065DCF}
@media (max-width:760px){ .trust-row,.trust-help{grid-template-columns:minmax(0,1fr)} }

.catrow-name{font-size:clamp(20px,2.5vw,34px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brands{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.catrow-head{grid-template-columns:auto auto minmax(0,1fr) 28px}
.catrow-name{font-size:clamp(18px,2.2vw,30px);white-space:nowrap;overflow:visible;text-overflow:clip}
.catrow-pics{justify-self:end;width:min(100%,440px)}
.brand b{font-size:12.5px;letter-spacing:.04em}
@media (max-width:860px){ .catrow-head{grid-template-columns:minmax(0,1fr) auto 24px} .catrow-name{white-space:normal;font-size:clamp(17px,5vw,24px)} }

/* =====================================================================
   PRIMARY BUTTON v3: same palette (#56FFE6 · #47E5FD · #065DCF), richer build
   - more blue under the label so the white text reads clearly
   - a thin glass rim, a top shine, a soft coloured glow
   - hover: lifts, brightens, a light sweep crosses it, the arrow nudges forward
   ===================================================================== */
.pill.primary,.co-go,.start-btn{
  --b1:#56FFE6;--b2:#47E5FD;--b3:#1E9BEA;--b4:#065DCF;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 46%,rgba(0,0,0,.10) 100%),
    linear-gradient(120deg,var(--b1) 0%,var(--b2) 24%,var(--b3) 58%,var(--b4) 100%) !important;
  color:#fff !important;border:0;
  font:400 12.5px/1 var(--font-display);letter-spacing:.11em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(2,40,96,.45),0 0 12px rgba(2,40,96,.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(2,40,110,.28),
    0 1px 2px rgba(2,30,80,.35),
    0 10px 24px -6px rgba(6,93,207,.55),
    0 0 26px -4px rgba(71,229,253,.45) !important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s;
}
/* glass rim: a 1px gradient border that is brighter at the top-left */
.pill.primary::before,.co-go::before,.start-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pill.primary::after,.co-go::after,.start-btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%,transparent);
  transform:skewX(-20deg);transition:left .8s cubic-bezier(.2,.8,.2,1)}
.pill.primary:hover,.co-go:hover,.start-btn:hover{transform:translateY(-2px);filter:brightness(1.06) saturate(1.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(2,40,110,.25),
    0 2px 4px rgba(2,30,80,.3),0 16px 32px -8px rgba(6,93,207,.65),0 0 36px -4px rgba(86,255,230,.55) !important}
.pill.primary:hover::after,.co-go:hover::after,.start-btn:hover::after{left:130%}
.pill.primary:active,.co-go:active,.start-btn:active{transform:translateY(0) scale(.985);filter:brightness(.97);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 2px 6px rgba(2,40,110,.35),0 4px 12px -4px rgba(6,93,207,.5) !important}
.pill.primary:focus-visible,.co-go:focus-visible{outline:2px solid #56FFE6;outline-offset:3px}
.pill.primary > span[aria-hidden],.start-btn > span[aria-hidden]{display:inline-block;transition:transform .25s}
.pill.primary:hover > span[aria-hidden],.start-btn:hover > span[aria-hidden]{transform:translateX(3px)}
html[dir="rtl"] .pill.primary:hover > span[aria-hidden]{transform:translateX(-3px)}
.pill.primary.sm{font-size:11px;letter-spacing:.09em}
.co-go{font-size:13.5px;letter-spacing:.12em}
html[data-theme="light"] .pill.primary,html[data-theme="light"] .co-go,html[data-theme="light"] .start-btn{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(2,40,110,.22),0 1px 2px rgba(2,30,80,.2),0 10px 22px -6px rgba(6,93,207,.45) !important}
html[lang="ar"] .pill.primary,html[lang="ar"] .co-go,html[lang="ar"] .start-btn{font:600 15px/1 "IBM Plex Sans Arabic",var(--font-body);letter-spacing:0;text-transform:none}
@media (prefers-reduced-motion:reduce){ .pill.primary,.co-go,.start-btn,.pill.primary::after{transition:none} .pill.primary:hover{transform:none} }

/* =====================================================================
   PRIMARY BUTTON v4: clean and readable
   - no rim, no glow ring, no inner shadows (they blurred the edges)
   - the pale aqua stays in the corner; the label sits on solid cyan-blue
   ===================================================================== */
.pill.primary,.co-go,.start-btn{
  background:linear-gradient(115deg,#56FFE6 0%,#2FC9F2 22%,#1A9AE6 55%,#065DCF 100%) !important;
  color:#fff !important;border:0 !important;
  font:400 13px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 1px 1px rgba(2,36,90,.55) !important;
  box-shadow:0 6px 16px -6px rgba(6,93,207,.55) !important;
  filter:none;-webkit-font-smoothing:antialiased;
  transition:transform .2s ease,box-shadow .2s ease,background-position .4s ease;
  background-size:140% 100% !important;background-position:0% 50% !important}
.pill.primary::before,.co-go::before,.start-btn::before{content:none !important}
.pill.primary::after,.co-go::after,.start-btn::after{content:none !important}
.pill.primary:hover,.co-go:hover,.start-btn:hover{transform:translateY(-1px);filter:none;background-position:100% 50% !important;
  box-shadow:0 10px 22px -8px rgba(6,93,207,.7) !important}
.pill.primary:active,.co-go:active,.start-btn:active{transform:translateY(0);box-shadow:0 3px 8px -4px rgba(6,93,207,.6) !important}
.pill.primary.sm{font-size:12px;letter-spacing:.08em;height:36px;padding:0 16px}
.co-go{font-size:14px}
html[data-theme="light"] .pill.primary,html[data-theme="light"] .co-go,html[data-theme="light"] .start-btn{box-shadow:0 6px 14px -6px rgba(6,93,207,.45) !important}
html[lang="ar"] .pill.primary,html[lang="ar"] .co-go,html[lang="ar"] .start-btn{font:600 15px/1 "IBM Plex Sans Arabic",var(--font-body);letter-spacing:0;text-transform:none}
/* label readability: aqua only as a corner accent, the text sits on mid/deep blue; bold Poppins labels */
.pill.primary,.co-go,.start-btn{
  background:linear-gradient(115deg,#56FFE6 0%,#22B8EE 16%,#1487E0 50%,#065DCF 100%) !important;background-size:140% 100% !important;
  font:600 13.5px/1 var(--font-body) !important;letter-spacing:.06em !important;text-shadow:0 1px 1px rgba(2,36,90,.35) !important}
.pill.primary.sm{font-size:12.5px !important;letter-spacing:.05em !important}
.co-go{font-size:15px !important}
html[lang="ar"] .pill.primary,html[lang="ar"] .co-go,html[lang="ar"] .start-btn{font:600 15px/1 "IBM Plex Sans Arabic",var(--font-body) !important;letter-spacing:0 !important}

/* "Held for you" bubble: sits centred above step 3 (steps are 5 equal columns: centre of step n = (2n+1) x 10%) */
.jr-tip{left:calc((var(--at) * 2 + 1) * 10%) !important}

/* ---------- Rental journey: quality pass (same layout) ---------- */
.journey{gap:22px}
.jr-track{padding-top:64px}
/* the line runs exactly from the centre of step 1 to the centre of step 5 */
.jr-line{top:91px;left:10%;right:10%;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--text) 22%,transparent) 0 4px,transparent 4px 9px)}
.jr-line span{height:2px;background:linear-gradient(90deg,#56FFE6,#22B8EE 45%,#1487E0);box-shadow:0 0 10px rgba(71,229,253,.55)}
.jr-steps{gap:16px}
.jr-steps li{gap:6px}
/* step icons: 56px, crisp ring, soft inner light */
.jr-dot{width:56px;height:56px;margin-bottom:10px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--text) 8%,transparent),transparent 60%),var(--void);
  box-shadow:0 0 0 6px var(--void);transition:transform .25s,box-shadow .25s}
.jr-dot svg{width:22px;height:22px}
.jr-steps li:hover .jr-dot{transform:translateY(-2px)}
.jr-steps li.done .jr-dot{background:linear-gradient(135deg,#56FFE6 0%,#22B8EE 45%,#1487E0 100%);border:0;color:#fff;
  box-shadow:0 0 0 6px var(--void),0 8px 20px -6px rgba(20,135,224,.6)}
.jr-steps li.done .jr-dot::after{content:"";position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;
  background:#0B2B2A url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356FFE6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12 4 4 8-9'/></svg>") center/12px no-repeat;
  box-shadow:0 0 0 2px var(--void)}
.jr-steps li.now .jr-dot{background:var(--void);border:2px solid #47E5FD;color:#47E5FD;
  box-shadow:0 0 0 6px var(--void),0 0 0 9px rgba(71,229,253,.18),0 0 28px rgba(71,229,253,.45);animation:jrPulse 2.4s ease-in-out infinite}
@keyframes jrPulse{50%{box-shadow:0 0 0 6px var(--void),0 0 0 13px rgba(71,229,253,.08),0 0 34px rgba(71,229,253,.55)}}
/* text */
.jr-steps small{font:600 11px var(--font-mono);letter-spacing:.14em;color:color-mix(in srgb,var(--text) 45%,transparent)}
.jr-steps b{font:600 15.5px/1.3 var(--font-body);letter-spacing:-.005em;margin-top:2px}
.jr-steps li > span:last-child{font-size:13px;line-height:1.5;max-width:24ch;color:var(--muted)}
.jr-steps li.done small{color:#56FFE6}
.jr-steps li.now small,.jr-steps li.now b{color:#47E5FD}
/* the "Held for you" bubble */
.jr-tip{top:2px;padding:6px 6px 6px 14px;border-radius:12px;gap:12px;font:500 13px var(--font-body);
  background:color-mix(in srgb,var(--void) 82%,#47E5FD 6%);border:1px solid rgba(71,229,253,.45);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55),0 0 0 4px rgba(71,229,253,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.jr-tip [data-hold-left]{font:600 14px var(--font-mono);letter-spacing:.02em}
.jr-tip .pill.sm{height:30px;padding:0 12px;font-size:11.5px !important}
/* the bar underneath */
.jr-bar{padding:16px 18px 16px 22px;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(71,229,253,.09),transparent 45%),var(--glass);border:1px solid var(--line)}
.jr-bar::before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#56FFE6,#1487E0)}
html[dir="rtl"] .jr-bar::before{border-radius:3px 0 0 3px}
.jr-bar b{font-size:15px}
.jr-bar span{font-size:13.5px}
/* light mode */
html[data-theme="light"] .jr-dot{background:#fff;border-color:rgba(16,60,90,.16);box-shadow:0 0 0 6px #F3F7FA,0 4px 10px rgba(16,40,60,.06)}
html[data-theme="light"] .jr-steps li.done .jr-dot{box-shadow:0 0 0 6px #F3F7FA,0 8px 18px -6px rgba(6,93,207,.45)}
html[data-theme="light"] .jr-steps li.done .jr-dot::after{background-color:#065DCF;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12 4 4 8-9'/></svg>");box-shadow:0 0 0 2px #fff}
html[data-theme="light"] .jr-steps li.now .jr-dot{background:#fff;border-color:#1487E0;color:#065DCF;box-shadow:0 0 0 6px #F3F7FA,0 0 0 9px rgba(20,135,224,.14),0 6px 18px rgba(20,135,224,.25);animation:none}
html[data-theme="light"] .jr-steps li.done small{color:#0A9A86}
html[data-theme="light"] .jr-steps li.now small,html[data-theme="light"] .jr-steps li.now b{color:#065DCF}
html[data-theme="light"] .jr-tip{background:#fff;border-color:rgba(20,135,224,.4);box-shadow:0 14px 30px -12px rgba(16,40,60,.3)}
html[data-theme="light"] .jr-bar{background:linear-gradient(90deg,rgba(71,229,253,.12),transparent 45%),#fff;box-shadow:0 1px 2px rgba(16,40,60,.04),0 10px 24px rgba(16,40,60,.05)}
@media (max-width:760px){ .jr-track{padding-top:0} .jr-dot{width:46px;height:46px;margin:0} .jr-steps li::after{left:22px;top:52px} }
@media (prefers-reduced-motion:reduce){ .jr-steps li.now .jr-dot{animation:none} }

/* ---------- Truck timer v2: no ring around the truck; a clean timer capsule under "Cart" ---------- */
.truck-ring{display:none !important}
.cartbtn.holding .t-body{color:inherit}
.cart-lab{gap:4px;padding-bottom:0}
.truck-time{margin-top:0;gap:6px;padding:3px 9px 3px 5px;border-radius:999px;
  font:600 12px/1 var(--font-mono);letter-spacing:.02em;color:var(--hc2);
  background:color-mix(in srgb,var(--hc) 12%,transparent);border:1px solid color-mix(in srgb,var(--hc) 40%,transparent)}
.truck-time i{display:none}
.tt-ring{width:14px;height:14px;flex:none;transform:rotate(-90deg)}
.tt-ring circle{fill:none;stroke-width:2.6}
.tt-bg{stroke:color-mix(in srgb,var(--hc) 25%,transparent)}
.tt-fg{stroke:var(--hc2);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear}
html[data-theme="light"] .truck-time{background:color-mix(in srgb,var(--hc) 9%,#fff);border-color:color-mix(in srgb,var(--hc) 35%,transparent)}
.cartbtn[data-level="crit"] .truck-time{animation:holdBlink 1s steps(2,start) infinite}
@media (max-width:520px){ .cart-lab{display:flex} .cart-lab b{display:none} .truck-time{font-size:11px;padding:2px 7px 2px 4px} }
@media (prefers-reduced-motion:reduce){ .tt-fg{transition:none} }

/* Promise band: sticks under the top menu while scrolling the homepage, slimmer once stuck */
#view-home .band{position:sticky;top:var(--nav-h,72px);z-index:4;transition:padding .25s ease,background .25s ease,box-shadow .25s ease}
#view-home .band.stuck{padding-block:9px;background:rgba(10,16,22,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top-color:transparent;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
#view-home .band.stuck .band-track{font-size:13px;transition:font-size .25s ease}
html[data-theme="light"] #view-home .band.stuck{background:rgba(255,255,255,.92);box-shadow:0 10px 24px -16px rgba(20,60,90,.25)}
html[data-theme="light"] #view-home .band.stuck .band-track{color:#0E2A3A}
html.band-stuck .toast{top:calc(var(--nav-h,72px) + 52px)}

/* Homepage section titles: the small labels are gone, the titles carry the section alone */
#view-home .hm-h{margin:0 0 26px;font-size:clamp(30px,3.6vw,48px);line-height:1.12}
#view-home .head .hm-h{margin:0}
#view-home .head{align-items:flex-end;margin-bottom:26px}
@media (max-width:640px){#view-home .hm-h{font-size:clamp(26px,7.4vw,32px)}}

/* Why PRJ X: three separate cards (Reliability / 24/7 Support / Flexibility) above the help panel */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.pillar{position:relative;border-radius:20px;padding:26px 24px 26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),rgba(14,20,27,.72);overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,#56FFE6,#1487E0 55%,transparent)}
.pillar:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand-cyan) 45%,transparent)}
.pillar h3{margin:18px 0 10px;font:400 clamp(22px,2vw,27px)/1.15 var(--f-display);letter-spacing:.02em}
.pillar h4{margin:0 0 6px;font:600 15.5px/1.35 var(--font-body)}
.pillar p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.trust-help{padding-top:0}
html[data-theme="light"] .pillar{background:radial-gradient(90% 120% at 0% 0%,rgba(71,229,253,.14),transparent 60%),#fff}
html[lang="ar"] .pillar h3{font-family:var(--font-body);font-weight:700;letter-spacing:0}
@media (max-width:760px){ .pillars{grid-template-columns:minmax(0,1fr);gap:14px} }

/* Hero: the promise line under the headline */
.hero-promise{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;max-width:62ch;font:400 clamp(12px,1.05vw,14px)/1.55 var(--f-display);letter-spacing:.1em;color:var(--text)}
.hero-promise em{font-style:normal;color:#3DE59A;font-size:.8em;line-height:1.9}
.hero-promise + .sub{margin-top:10px}
html[lang="ar"] .hero-promise{font:600 15px/1.6 var(--font-body);letter-spacing:0}
.hero-promise{max-width:560px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
html[data-theme="light"] .hero-promise{text-shadow:0 1px 8px rgba(255,255,255,.8);color:#0E2A3A}
@media (max-width:640px){ .hero-promise{font-size:11px;letter-spacing:.08em} }
.hero-promise{max-width:610px;letter-spacing:.06em;text-wrap:balance}

/* The promise band shows on the first screen: the hero leaves room for it at the bottom */
.hero.showroom{height:calc(100svh - var(--band-h,62px)) !important;min-height:560px}
@media (max-width:760px){ .hero.showroom{min-height:540px} }
.hero.showroom{height:auto !important;min-height:calc(100svh - var(--band-h,62px))}
.hero.showroom .hero-copy{box-sizing:border-box;min-height:calc(100svh - var(--band-h,62px));padding-top:calc(var(--nav-h,100px) + 18px);padding-bottom:36px}
.hero.showroom .hero-copy{height:auto;padding-top:calc(var(--nav-h,100px) + 18px) !important}
/* shorter screens: tighten the hero so the band still shows on the first screen */
@media (max-height:820px){
  .hero.showroom .hero-copy{gap:12px;padding-top:calc(var(--nav-h,100px) + 8px) !important;padding-bottom:22px}
  .hero-start{margin-top:4px}
  .hero.showroom .hero-copy h1{font-size:clamp(32px,6.6vh,54px)}
}
@media (max-width:760px){
  .hero.showroom .hero-copy{gap:10px;padding-bottom:18px}
  .hero.showroom .kicker{display:none}
}
html[data-theme="light"] .band-track{color:#0E2A3A}

/* Category rows: every item in the category, in a row you scroll with left / right arrows */
.catrow-scroll{position:relative;min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px}
.catrow-items{display:flex !important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;padding:2px 0}
.catrow-items::-webkit-scrollbar{display:none}
.catrow-items .catrow-item{flex:0 0 calc((100% - 36px) / 4);scroll-snap-align:start}
.cr-arrow{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--line);transition:background .2s,opacity .2s,border-color .2s}
.cr-arrow:hover:not(:disabled){background:color-mix(in srgb,var(--brand-cyan) 18%,transparent);border-color:color-mix(in srgb,var(--brand-cyan) 50%,transparent)}
.cr-arrow:disabled{opacity:.28;cursor:default}
.cr-arrow:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:2px}
html[dir="rtl"] .cr-arrow svg{transform:scaleX(-1)}
.catrow-scroll.fits{grid-template-columns:minmax(0,1fr)} .catrow-scroll.fits .cr-arrow{display:none}
html[data-theme="light"] .cr-arrow{background:#fff;box-shadow:0 2px 8px rgba(20,60,90,.08)}
@media (max-width:760px){
  .catrow-scroll{grid-template-columns:30px minmax(0,1fr) 30px;gap:6px}
  .cr-arrow{width:30px;height:30px}
  .catrow-items .catrow-item{flex-basis:calc((100% - 12px) / 2)}
}

/* Our brands: each card carries the brand's flagship product above its name */
#brands .brand{height:auto;padding:14px 12px 14px;gap:6px;justify-content:flex-start;overflow:hidden;position:relative}
#brands .brand-pic{display:grid;place-items:center;width:100%;height:96px;margin-bottom:4px;border-radius:10px;background:radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--brand-cyan) 12%,transparent),transparent 70%)}
#brands .brand-pic img.pcut{max-width:100%;height:92px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));transition:transform .35s ease}
#brands .brand:hover .brand-pic img.pcut{transform:translateY(-3px) scale(1.05)}
#brands .brand b{font-size:15px}
html[data-theme="light"] #brands .brand-pic img.pcut{filter:drop-shadow(0 10px 14px rgba(20,60,90,.18))}
@media (max-width:640px){ #brands .brand-pic{height:76px} #brands .brand-pic img.pcut{height:72px} }
#brands .brand b{font-size:13.5px;letter-spacing:.04em;max-width:100%;white-space:nowrap}

/* help panel: only "Renting often?" is left, so it takes the full width */
.trust-help{grid-template-columns:minmax(0,1fr)}

/* Discounted equipment */
.hcard.deal .hcard-ph{position:relative}
.deal-tag{position:absolute;top:10px;inset-inline-start:10px;z-index:1;padding:4px 9px;border-radius:8px;font:700 12.5px/1 var(--font-body);color:#fff;
  background:linear-gradient(115deg,#FF7A59,#E8475F);box-shadow:0 6px 14px -6px rgba(232,71,95,.7);direction:ltr}
.hcard.deal .price s{display:block;font:500 12px var(--font-body);color:var(--muted);text-decoration-color:#E8475F}
.hcard.deal .price b{color:var(--text)}
html[data-theme="light"] .hcard.deal .price s{color:#6B7F93}

/* =====================================================================
   TYPOGRAPHY (brand reference, slide 12)
   Big titles      -> Tektur 700        (--font-title)
   Smaller heads   -> Michroma          (--font-display): card titles, category names, logo, panels
   Body and buttons-> Poppins           (--font-body)
   Labels          -> Courier New       (--font-mono; Courier Prime where Courier New isn't installed)
   Arabic keeps Readex Pro (titles) and IBM Plex Sans Arabic (text).
   ===================================================================== */
:root{--font-title:'Tektur','Readex Pro','IBM Plex Sans Arabic',sans-serif;
  --font-mono:'Courier New','Courier Prime',Courier,'IBM Plex Sans Arabic',monospace}
h1,.display,.hm-h,.page-head h1,.soon-panel h1,.hero.showroom h1,.v30c-copy h2,.v30-copy h2,.v-copy h2,
.stat b,.credit-top b.big,.co2-due b,.co-msg h3{font-family:var(--font-title) !important;font-weight:700 !important;letter-spacing:.005em}
.hero.showroom h1{letter-spacing:0}
.stat b{letter-spacing:0}
/* Courier is a light face: labels keep a little more weight so they stay crisp at small sizes */
.label,.crumbs,.kicker,.hero-copy .kicker,.tag,.field label,.catrow-meta,.jr-steps small,.co2-label,.v30c-chip,.start-note{font-family:var(--font-mono)}
.hero-copy .kicker b{font-family:var(--font-mono);font-weight:700}
html[lang="ar"] h1,html[lang="ar"] .display,html[lang="ar"] .hm-h{font-weight:600 !important}

/* Top bar in the brand typography: menu in Courier capitals (like the slide header), account and truck labels in Michroma */
.nav .links{gap:34px}
.nav .links a{font:700 13px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px}
.nav .links a .soon-tag{font:700 8.5px/1 var(--font-mono);letter-spacing:.1em;padding:3px 6px;vertical-align:1px}
.acct small,.cart-lab small:not(.truck-time){font:700 10.5px/1.1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.acct b,.cart-lab b{font:400 12px/1.25 var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.acct .two{gap:3px}
html[lang="ar"] .nav .links a,html[lang="ar"] .acct small{font-family:"IBM Plex Sans Arabic",var(--font-body);font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none}
html[lang="ar"] .acct small{font-size:12px;font-weight:500}
html[lang="ar"] .acct b,html[lang="ar"] .cart-lab b{font:700 14px/1.3 "IBM Plex Sans Arabic",var(--font-body);letter-spacing:0;text-transform:none}
@media (max-width:1180px){ .nav .links{gap:22px} .nav .links a{font-size:12px;letter-spacing:.1em} }

/* =====================================================================
   MICHROMA EVERYWHERE: titles, text, buttons, labels and the top bar.
   Michroma has one weight, so bold text is drawn bolder by the browser.
   Arabic keeps Readex Pro / IBM Plex Sans Arabic (Michroma has no Arabic letters).
   ===================================================================== */
:root{--font-display:'Michroma','Readex Pro','IBM Plex Sans Arabic',sans-serif;--font-title:var(--font-display);
  --font-body:'Michroma','IBM Plex Sans Arabic',sans-serif;--font-mono:'Michroma','IBM Plex Sans Arabic',sans-serif}
html{font-synthesis-weight:auto}
html:not([lang="ar"]) body{font-size:14px;line-height:1.7}
h1,.display,.hm-h,.page-head h1,.soon-panel h1,.hero.showroom h1,.v30c-copy h2,.v30-copy h2,.v-copy h2,
.stat b,.credit-top b.big,.co2-due b,.co-msg h3{font-weight:400 !important;letter-spacing:.01em}
html:not([lang="ar"]) .hero.showroom h1{font-size:clamp(26px,3.1vw,46px);line-height:1.18}
html:not([lang="ar"]) .hero.showroom .sub{font-size:clamp(13.5px,1.1vw,16px);line-height:1.75}
/* small text: Michroma is wide, so it runs a little smaller with tighter spacing */
html:not([lang="ar"]) p,html:not([lang="ar"]) .catrow-desc p,html:not([lang="ar"]) .hp-q p{font-size:.92em}
.label,.crumbs,.kicker,.hero-copy .kicker,.tag,.field label,.catrow-meta,.jr-steps small,.co2-label,.v30c-chip,.start-note,
.nav .links a,.acct small,.cart-lab small:not(.truck-time){letter-spacing:.06em}
.nav .links a{font-weight:400;font-size:11.5px}
.acct small{font-weight:400;font-size:9.5px}
.pill,.pill.primary,.co-go,.start-btn,.cta-btn{letter-spacing:.04em !important}
.pill.primary,.co-go,.start-btn{font-size:12px !important}
.pill.primary.sm{font-size:10.5px !important}
.input,.search input{font-size:13px}

.nav .links{gap:24px}
.nav .links a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav .links a .soon-tag{margin:0}
.nav .brand{flex-direction:column;align-items:center;gap:4px}
.nav .brand span{white-space:nowrap;font-size:8.5px;letter-spacing:.04em}
.co2-tot div > span:last-child,.co2-due b,.sum span:last-child{white-space:nowrap}
@media (max-width:1280px){ .nav .links{gap:16px} .nav .links a{font-size:10.5px;letter-spacing:.03em} .acct small{display:none} }
@media (max-width:1180px) and (min-width:1101px){
  .nav .wrap{gap:12px}
  .nav .links{gap:12px} .nav .links a{font-size:10px;letter-spacing:.02em}
  .langbtn span{display:none} .langbtn{padding:0 7px}
  .nav-right{gap:2px}
  .acct b,.cart-lab b{font-size:10.5px}
}
/* tablets and small laptops: the menu moves to its own row under the logo and the account bar */
@media (max-width:1100px) and (min-width:861px){
  .nav .wrap{flex-wrap:wrap;row-gap:10px}
  .nav .links{display:flex !important;order:3;width:100%;gap:22px;overflow-x:auto;white-space:nowrap}
  .page{padding-top:170px}
}
@media (max-width:520px){
  .nav-right{gap:4px}
  .langbtn span{display:none} .langbtn{padding:0 6px}
  .themebtn{margin-inline-end:2px}
  .acct small{display:none}
  .acct b,.cart-lab b{font-size:9.5px;letter-spacing:.02em}
  .acct{padding:6px 4px}
  .cartbtn{padding:6px 4px}
  .nav .links a{font-size:10px}
  .search input,.hero.showroom .search input{font-size:11.5px}
}

/* "Rental tutorial" button: jumps to the step-by-step journey, which lands clear of the top bar and the band */
#home-steps,#home-deals,#home-new,#home-brands,#vision2030,#consult{scroll-margin-top:calc(var(--nav-h,100px) + 64px)}
.tut-btn{gap:8px}
.tut-btn svg{color:var(--brand-cyan)}

/* numbers row: three figures */
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){ .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .stats .stat{padding-inline-start:10px} .stat b{font-size:22px} .stat span{font-size:11px} }

/* =====================================================================
   FOOTER: back to top, four link columns, a band with logo / language / currency / country,
   a grid of quick links into the catalog, then the address and copyright
   ===================================================================== */
footer.site-foot{padding:0;border-top:0;background:#0B1116}
.sf-top{display:block;width:100%;padding:16px;border:0;cursor:pointer;background:#16212A;color:var(--text);font:400 12px var(--font-body);letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.sf-top:hover{background:#1D2B36}
footer.site-foot .wrap.sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:52px 48px;justify-content:initial}
.sf-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.sf-col h3{margin:0 0 6px;font:400 14px/1.3 var(--font-display);letter-spacing:.04em;color:var(--text)}
.sf-col a{font-size:12.5px;line-height:1.5;color:var(--muted);text-decoration:none;width:fit-content}
.sf-col a:hover{color:var(--brand-cyan);text-decoration:underline;text-underline-offset:3px}
.sf-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
footer.site-foot .wrap.sf-band-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding-block:26px}
.sf-logo{display:flex;flex-direction:column;align-items:center;margin-inline-end:56px;text-decoration:none;color:var(--text)}
.sf-logo b{font:400 22px/1 var(--font-display);letter-spacing:.12em;background:linear-gradient(90deg,#56FFE6,#47E5FD 45%,#2A8DE8);-webkit-background-clip:text;background-clip:text;color:transparent}
.sf-logo span{font-size:9px;letter-spacing:.06em;color:var(--muted);margin-top:4px}
.sf-pick{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:400 11.5px var(--font-body);letter-spacing:.03em}
button.sf-pick{cursor:pointer}
button.sf-pick:hover{border-color:var(--brand-cyan)}
.sf-pick i{width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);margin-inline-start:6px}
.sf-pick > b{font:600 11.5px var(--font-body);color:var(--brand-cyan)}
.sf-flag{width:22px;height:15px;border-radius:2px}
.sf-grid-wrap{background:#080C10;padding-block:40px 34px}
footer.site-foot .wrap.sf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;justify-content:initial}
.sf-tile{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.sf-tile b{font:400 11.5px/1.35 var(--font-display);letter-spacing:.03em;color:var(--text)}
.sf-tile span{font-size:11px;line-height:1.45;color:var(--muted)}
.sf-tile:hover b{color:var(--brand-cyan)}
footer.site-foot .wrap.sf-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:36px;font-size:11px;color:var(--muted)}
.sf-legal a{color:var(--text);font-size:11px;text-decoration:none}
.sf-legal a:hover{text-decoration:underline}
.sf-copy{margin:10px auto 0;text-align:center;font-size:10.5px;color:var(--muted)}
html[data-theme="light"] footer.site-foot{background:#EEF4F7}
html[data-theme="light"] .sf-top{background:#DCE7ED}
html[data-theme="light"] .sf-top:hover{background:#D0DEE6}
html[data-theme="light"] .sf-grid-wrap{background:#E3ECF1}
html[data-theme="light"] .sf-pick > b,html[data-theme="light"] .sf-col a:hover,html[data-theme="light"] .sf-tile:hover b{color:#0B76A8}
html[data-theme="light"] .sf-logo b{background:linear-gradient(90deg,#0AA88F,#0B8FC4 45%,#065DCF);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="ar"] .sf-col h3,html[lang="ar"] .sf-tile b{font-family:"IBM Plex Sans Arabic",var(--font-body);font-weight:700;font-size:14px}
html[lang="ar"] .sf-col a,html[lang="ar"] .sf-tile span,html[lang="ar"] .sf-pick,html[lang="ar"] .sf-top{font-size:13px}
@media (max-width:860px){
  footer.site-foot .wrap.sf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px;padding-block:40px}
  footer.site-foot .wrap.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-logo{margin-inline-end:0;width:100%;margin-bottom:6px}
}

/* =====================================================================
   WHY PRJ X: three cards, each with a small picture of the promise, and a wide credits card
   ===================================================================== */
.why-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.why-head h2{margin:0}
.why-head p{margin:0;max-width:44ch;color:var(--muted);font-size:13.5px;line-height:1.6}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.why-card{display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--line);overflow:hidden;background:rgba(14,20,27,.72);transition:transform .25s ease,border-color .25s ease}
.why-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand-cyan) 45%,transparent)}
.why-vis{position:relative;height:178px;display:grid;place-items:center;padding:22px;border-bottom:1px solid var(--line);
  background:radial-gradient(80% 90% at 50% 0%,rgba(71,229,253,.16),transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/22px 22px,#0D141B}
.why-body{padding:22px 24px 26px}
.why-kick{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-cyan)}
.why-kick span{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:6px;border:1px solid color-mix(in srgb,var(--brand-cyan) 40%,transparent);font-size:10px;letter-spacing:.04em}
.why-body h3,.why-credits h3{margin:0 0 8px;font:400 clamp(17px,1.45vw,20px)/1.3 var(--font-display);letter-spacing:.01em}
.why-body p:not(.why-kick),.why-credits-copy > p:not(.why-kick){margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
/* 01 checklist */
.why-qc ul{list-style:none;margin:0;padding:14px 16px;display:grid;gap:9px;width:min(250px,100%);border-radius:14px;border:1px solid var(--line-strong);background:rgba(8,12,16,.7)}
.why-qc li{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text)}
.why-qc li i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;flex:none;color:#04221E;background:linear-gradient(135deg,#56FFE6,#2BD4C8)}
.why-qc{align-content:center;gap:12px}
.why-stamp{padding:5px 9px;border-radius:999px;font:400 9.5px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#56FFE6;border:1px solid rgba(86,255,230,.45);background:rgba(86,255,230,.08)}
/* 02 always on */
.why-clock{gap:12px;align-content:center}
.why-clock b{font:400 clamp(46px,4.6vw,62px)/1 var(--font-display);letter-spacing:.04em;background:linear-gradient(90deg,#56FFE6,#47E5FD 45%,#2A8DE8);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-live{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:10.5px;letter-spacing:.06em;color:var(--text);border:1px solid var(--line-strong);background:rgba(8,12,16,.7)}
.why-live i{width:8px;height:8px;border-radius:50%;background:#2EE68A;box-shadow:0 0 0 0 rgba(46,230,138,.6);animation:whyPulse 1.8s infinite}
@keyframes whyPulse{70%{box-shadow:0 0 0 8px rgba(46,230,138,0)}100%{box-shadow:0 0 0 0 rgba(46,230,138,0)}}
@media (prefers-reduced-motion:reduce){.why-live i{animation:none}}
/* 03 day strip */
.why-days{align-content:center;gap:14px}
.why-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%;max-width:300px}
.why-strip span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:64px;border-radius:10px;border:1px dashed var(--line-strong);background:rgba(8,12,16,.6)}
.why-strip small{text-transform:none;white-space:nowrap;font-size:9.5px;letter-spacing:.02em;color:var(--muted);text-align:center;line-height:1.2}
.why-strip em{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#56FFE6}
.why-strip .paid{border-style:solid;border-color:rgba(71,229,253,.55);background:linear-gradient(180deg,rgba(71,229,253,.28),rgba(42,141,232,.18))}
.why-strip .paid small{color:var(--text)}
.why-legend{display:flex;align-items:center;gap:8px;margin:0;font-size:10.5px;color:var(--muted)}
.why-legend i{width:10px;height:10px;border-radius:3px;background:linear-gradient(180deg,rgba(71,229,253,.6),rgba(42,141,232,.5))}
/* credits */
.why-credits{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:28px;padding:clamp(24px,3vw,40px);border-radius:22px;border:1px solid var(--line);
  background:radial-gradient(60% 140% at 100% 50%,rgba(42,141,232,.22),transparent 65%),radial-gradient(50% 120% at 0% 0%,rgba(86,255,230,.1),transparent 60%),rgba(14,20,27,.72)}
.why-credits .pill{margin-top:18px}
.why-wallet{display:grid;place-items:center}
.why-cc{position:relative;width:min(320px,100%);aspect-ratio:1.586;border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;color:#EAFBFF;
  background:linear-gradient(135deg,#0E3B4A 0%,#0B5E8A 45%,#1487E0 100%);box-shadow:0 24px 50px -20px rgba(20,135,224,.55),inset 0 0 0 1px rgba(255,255,255,.14);transform:rotate(-4deg);transition:transform .3s ease}
.why-credits:hover .why-cc{transform:rotate(0) translateY(-4px)}
.why-cc::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 80% at 85% 10%,rgba(86,255,230,.35),transparent 60%);pointer-events:none}
.why-cc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.why-cc-top b{font:400 17px var(--font-display);letter-spacing:.14em}
.why-cc-top span,.why-cc-bot span{font-size:9.5px;letter-spacing:.06em;opacity:.8}
.why-chip{width:42px;height:30px;border-radius:7px;background:linear-gradient(135deg,#E7F7FB,#9FD6E6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.why-cc-bot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.why-cc-bot em{font-style:normal;font-size:9.5px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.16);letter-spacing:.04em}
/* light mode */
html[data-theme="light"] .why-card,html[data-theme="light"] .why-credits{background:#fff}
html[data-theme="light"] .why-credits{background:radial-gradient(60% 140% at 100% 50%,rgba(71,229,253,.2),transparent 65%),#fff}
html[data-theme="light"] .why-vis{background:radial-gradient(80% 90% at 50% 0%,rgba(71,229,253,.2),transparent 70%),linear-gradient(rgba(6,93,207,.05) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(6,93,207,.05) 1px,transparent 1px) 0 0/22px 22px,#F3F8FA}
html[data-theme="light"] .why-qc ul,html[data-theme="light"] .why-live,html[data-theme="light"] .why-strip span{background:#fff}
html[data-theme="light"] .why-strip .paid{background:linear-gradient(180deg,rgba(71,229,253,.35),rgba(42,141,232,.2))}
html[data-theme="light"] .why-kick,html[data-theme="light"] .why-strip em{color:#0B76A8}
html[data-theme="light"] .why-stamp{color:#0A8F7A;border-color:rgba(10,143,122,.4);background:rgba(10,143,122,.07)}
html[data-theme="light"] .why-clock b{background:linear-gradient(90deg,#0AA88F,#0B8FC4 45%,#065DCF);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Arabic */
html[lang="ar"] .why-body h3,html[lang="ar"] .why-credits h3{font-family:"IBM Plex Sans Arabic",var(--font-body);font-weight:700;font-size:19px}
html[lang="ar"] .why-kick{letter-spacing:0;font-size:12.5px}
html[lang="ar"] .why-body p:not(.why-kick),html[lang="ar"] .why-credits-copy > p:not(.why-kick),html[lang="ar"] .why-qc li{font-size:14px}
html[lang="ar"] .why-strip small,html[lang="ar"] .why-strip em{font-size:10.5px;letter-spacing:0}
html[lang="ar"] .why-cc{transform:rotate(4deg)}
@media (max-width:960px){ .why-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .why-grid .why-card:last-child{grid-column:1/-1} }
@media (max-width:680px){
  .why-grid{grid-template-columns:minmax(0,1fr);gap:14px} .why-grid .why-card:last-child{grid-column:auto}
  .why-vis{height:160px}
  .why-credits{grid-template-columns:minmax(0,1fr)}
  .why-wallet{order:-1}
}

/* =====================================================================
   HERO WELCOME LINE: a clear glass badge with a live dot, brighter text and gradient brand names
   ===================================================================== */
#view-home .hero.showroom .hero-copy p.kicker{display:block;width:fit-content;max-width:100%;margin:0 0 6px;padding:10px 20px 10px 14px;
  border-radius:999px;border:1px solid rgba(86,255,230,.35);background:linear-gradient(90deg,rgba(86,255,230,.14),rgba(42,141,232,.12) 60%,rgba(14,20,27,.55));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px -12px rgba(71,229,253,.45),inset 0 1px 0 rgba(255,255,255,.08);
  font:400 15.5px/1.45 var(--font-body);letter-spacing:.02em;color:#E6F3F8;text-shadow:none}
#view-home .hero.showroom .hero-copy p.kicker::before{content:"";display:inline-block;vertical-align:.08em;margin-inline-end:12px;width:9px;height:9px;border-radius:50%;background:#56FFE6;box-shadow:0 0 0 0 rgba(86,255,230,.6);animation:kickPulse 2s infinite}
@keyframes kickPulse{70%{box-shadow:0 0 0 9px rgba(86,255,230,0)}100%{box-shadow:0 0 0 0 rgba(86,255,230,0)}}
@media (prefers-reduced-motion:reduce){#view-home .hero.showroom .hero-copy p.kicker::before{animation:none}}
#view-home .hero.showroom .hero-copy p.kicker b{font-family:var(--font-body);font-weight:400;letter-spacing:.06em;background:linear-gradient(90deg,#56FFE6,#47E5FD 45%,#2A8DE8);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] #view-home .hero.showroom .hero-copy p.kicker{color:#0E2A3A;border-color:rgba(11,118,168,.28);background:linear-gradient(90deg,rgba(71,229,253,.22),rgba(42,141,232,.12) 60%,rgba(255,255,255,.85));box-shadow:0 10px 30px -14px rgba(11,118,168,.4)}
html[data-theme="light"] #view-home .hero.showroom .hero-copy p.kicker::before{background:#0AA88F}
html[data-theme="light"] #view-home .hero.showroom .hero-copy p.kicker b{background:linear-gradient(90deg,#0AA88F,#0B8FC4 45%,#065DCF);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="ar"] #view-home .hero.showroom .hero-copy p.kicker{font-family:"IBM Plex Sans Arabic",var(--font-body);font-size:17px;font-weight:500;letter-spacing:0;padding:10px 14px 10px 20px}
html[lang="ar"] #view-home .hero.showroom .hero-copy p.kicker b{font-family:var(--font-body);font-size:15.5px}
@media (max-width:760px){
  #view-home .hero.showroom .hero-copy p.kicker{display:block;font-size:12px;padding:8px 14px 8px 12px;border-radius:14px}
  #view-home .hero.showroom .hero-copy p.kicker::before{margin-inline-end:8px;width:7px;height:7px}
  html[lang="ar"] #view-home .hero.showroom .hero-copy p.kicker{font-size:14px}
}

/* Language button: a smaller chip */
.langbtn{height:30px;padding:0 10px 0 6px;gap:6px;font-size:12px;border-radius:8px}
.langbtn .flag{width:20px;height:14px;border-radius:3px}
@media (max-width:520px){ .langbtn{height:28px;padding:0 5px} .langbtn .flag{width:19px;height:13px} }

.langbtn span{font-family:var(--font-body)!important;font-size:11.5px;letter-spacing:.06em}
/* Vision 2030 card: the film links to the official Riyadh Art project page */
a.v30c-media{display:block;text-decoration:none;color:#fff;cursor:pointer}
.v30c-card{position:absolute;z-index:2;inset-inline-end:18px;bottom:18px;display:flex;align-items:center;gap:14px;max-width:calc(100% - 36px);padding:12px 18px 12px 12px;border-radius:16px;
  background:rgba(6,16,22,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);transition:transform .25s ease,border-color .25s ease}
html[dir="rtl"] .v30c-card{padding:12px 12px 12px 18px}
.v30c-play{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;color:#04221E;background:linear-gradient(135deg,#56FFE6,#2BD4C8);box-shadow:0 0 0 6px rgba(86,255,230,.18)}
.v30c-card > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.v30c-card small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.v30c-card b{font:400 18px/1.2 var(--font-display);letter-spacing:.04em}
.v30c-card em{font-style:normal;font-size:11px;color:#56FFE6}
a.v30c-media:hover .v30c-card,a.v30c-media:focus-visible .v30c-card{transform:translateY(-3px);border-color:rgba(86,255,230,.6)}
a.v30c-media:focus-visible{outline:2px solid #56FFE6;outline-offset:-4px}
.v30c-ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.v30c-link{color:#fff;font-size:13px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.v30c-link:hover{text-decoration-color:#56FFE6;color:#56FFE6}
html[lang="ar"] .v30c-card small{letter-spacing:0;font-size:12px}
html[lang="ar"] .v30c-card b{font-family:"IBM Plex Sans Arabic",var(--font-body);font-weight:700;font-size:19px}
html[lang="ar"] .v30c-card em,html[lang="ar"] .v30c-link{font-size:14px}
@media (max-width:520px){ .v30c-card{inset-inline:12px;bottom:12px;padding:10px 14px 10px 10px;gap:10px} .v30c-play{width:38px;height:38px} .v30c-card b{font-size:15px} }

/* Our brands: logos */
#brands .brand-pic img.brand-logo{display:block;width:auto;max-width:82%;height:auto;max-height:46px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(62,212,248,.25));transition:transform .35s ease}
#brands .brand-pic img.brand-logo:not(.word){max-height:64px}
#brands .brand:hover .brand-pic img.brand-logo{transform:scale(1.06)}
#brands .brand > span:last-child{font-size:11.5px;color:var(--muted);text-align:center}
html[data-theme="light"] #brands .brand-pic img.brand-logo{filter:brightness(.72) saturate(1.4)}
.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}

/* Our brands: logos side by side, no cards. Muted until the mouse touches one, then the real logo lights up */
#home-brands #brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;padding:18px 0 6px}
#home-brands #brands .brand{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 6px;cursor:pointer;border:0;background:none;height:auto;overflow:visible}
#home-brands #brands .brand-pic{all:unset;display:flex;align-items:center;gap:14px;height:64px;direction:ltr}
#home-brands #brands .brand-pic img.brand-logo{max-width:none;max-height:none;height:46px;width:auto;
  filter:grayscale(1) brightness(1.9) opacity(.42);transition:filter .35s ease,transform .35s ease}
#home-brands #brands .brand-pic img.brand-logo.word[src*="clear-com"]{height:40px}
#home-brands #brands .brand-pic img.brand-logo.word[src*="luminex"]{height:38px}
#home-brands #brands .brand-pic img.brand-logo:not(.word){height:58px}
#home-brands #brands .brand-word{font:400 30px/1 var(--font-display);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);transition:color .35s ease,text-shadow .35s ease}
#home-brands #brands .brand-sub{font:400 11px var(--font-body);letter-spacing:.04em;color:var(--muted);opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}
#home-brands #brands .brand:hover .brand-pic img.brand-logo,#home-brands #brands .brand:focus-visible .brand-pic img.brand-logo{filter:drop-shadow(0 0 18px rgba(62,212,248,.45));transform:translateY(-4px) scale(1.05)}
#home-brands #brands .brand:hover .brand-word,#home-brands #brands .brand:focus-visible .brand-word{color:#3ED4F8;text-shadow:0 0 18px rgba(62,212,248,.45)}
#home-brands #brands .brand:hover .brand-sub,#home-brands #brands .brand:focus-visible .brand-sub{opacity:1;transform:none}
#home-brands #brands .brand:hover{transform:none;border:0}
#home-brands #brands .brand:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:6px;border-radius:10px}
html[data-theme="light"] #home-brands #brands .brand{background:none}
html[data-theme="light"] #home-brands #brands .brand-pic img.brand-logo{filter:grayscale(1) brightness(.35) opacity(.45)}
html[data-theme="light"] #home-brands #brands .brand-word{color:rgba(14,42,58,.45)}
html[data-theme="light"] #home-brands #brands .brand:hover .brand-pic img.brand-logo{filter:brightness(.82) saturate(1.3) drop-shadow(0 6px 14px rgba(11,118,168,.25))}
html[data-theme="light"] #home-brands #brands .brand:hover .brand-word{color:#1BA8CF;text-shadow:none}
@media (hover:none){ #home-brands #brands .brand-sub{opacity:1;transform:none} }
@media (max-width:760px){
  #home-brands #brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:18px 16px}
  #home-brands #brands .brand-word{letter-spacing:.06em}
  #home-brands #brands .brand-pic{height:48px}
  #home-brands #brands .brand-pic img.brand-logo{height:34px}
  #home-brands #brands .brand-pic img.brand-logo.word[src*="clear-com"]{height:30px}
  #home-brands #brands .brand-pic img.brand-logo.word[src*="luminex"]{height:28px}
  #home-brands #brands .brand-pic img.brand-logo:not(.word){height:42px}
  #home-brands #brands .brand-word{font-size:17px}
  #home-brands #brands .brand-pic{gap:8px}
}

/* Brand logos: our cyan version by default, the brand's original logo (on a white plate so its own colours read) when touched */
#home-brands #brands .brand-pic{position:relative}
#home-brands #brands .logo-def{display:flex;align-items:center;gap:14px;transition:opacity .3s ease}
#home-brands #brands .brand-pic img.brand-logo,
#home-brands #brands .brand:hover .brand-pic img.brand-logo,#home-brands #brands .brand:focus-visible .brand-pic img.brand-logo{filter:drop-shadow(0 0 14px rgba(62,212,248,.35));transform:none}
#home-brands #brands .brand-word,#home-brands #brands .brand:hover .brand-word{color:#3ED4F8;text-shadow:0 0 14px rgba(62,212,248,.35)}
#home-brands #brands .logo-real{position:absolute;inset:-10px -18px;display:grid;place-items:center;padding:10px 16px;border-radius:12px;background:#fff;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);opacity:0;transform:scale(.94);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
#home-brands #brands .logo-real img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
#home-brands #brands .brand:hover .logo-def,#home-brands #brands .brand:focus-visible .logo-def{opacity:0}
#home-brands #brands .brand:hover .logo-real,#home-brands #brands .brand:focus-visible .logo-real{opacity:1;transform:scale(1)}
html[data-theme="light"] #home-brands #brands .brand-pic img.brand-logo,html[data-theme="light"] #home-brands #brands .brand:hover .brand-pic img.brand-logo{filter:brightness(.82) saturate(1.3)}
html[data-theme="light"] #home-brands #brands .brand-word,html[data-theme="light"] #home-brands #brands .brand:hover .brand-word{color:#1BA8CF;text-shadow:none}
html[data-theme="light"] #home-brands #brands .logo-real{box-shadow:0 12px 30px -12px rgba(16,60,90,.35)}

/* Top bar: theme and language sit together at the far end, as a small segmented pair */
.nav-util{display:inline-flex;align-items:center;gap:2px;margin-inline-start:8px;padding:2px;border-radius:10px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04)}
.nav-util .themebtn,.nav-util .langbtn{margin:0;height:28px;border:0;border-radius:8px;background:transparent}
.nav-util .themebtn{width:28px}
.nav-util .themebtn svg{width:15px;height:15px}
.nav-util .langbtn{padding:0 8px 0 6px}
.nav-util .themebtn:hover,.nav-util .langbtn:hover{background:rgba(255,255,255,.1)}
.nav-util::before{content:"";order:1;width:1px;height:16px;background:var(--line-strong)}
.nav-util .themebtn{order:0} .nav-util .langbtn{order:2}
html[data-theme="light"] .nav-util{background:rgba(255,255,255,.7)}
html[data-theme="light"] .nav-util .themebtn,html[data-theme="light"] .nav-util .langbtn{background:transparent}
html[data-theme="light"] .nav-util .themebtn:hover,html[data-theme="light"] .nav-util .langbtn:hover{background:rgba(14,42,58,.06)}
.nav-right{gap:14px}
@media (max-width:1180px){ .nav-right{gap:8px} .nav-util{margin-inline-start:2px} }
@media (max-width:520px){ .nav-right{gap:4px} .nav-util .themebtn{width:26px;height:26px} .nav-util .langbtn{height:26px;padding:0 4px} }

/* Top bar spacing: three clear groups (logo · menu · account, rentals, truck, settings) with even gaps inside each */
@media (min-width:1181px){
  .nav .wrap{gap:28px}
  .nav .brand{margin-inline-end:8px}
  .nav .links{gap:30px;margin-inline-end:auto}
  .nav-right{gap:26px}
  .nav-util{margin-inline-start:4px}
}
@media (min-width:1401px){ .nav .wrap{max-width:1440px;padding-inline:40px} }
@media (min-width:1281px) and (max-width:1400px){
  .nav .wrap{max-width:none;padding-inline:32px;gap:24px}
  .nav .links{gap:24px}
  .nav-right{gap:20px}
}
@media (min-width:1181px) and (max-width:1280px){
  .nav .wrap{max-width:none;padding-inline:24px;gap:20px}
  .nav .brand{margin-inline-end:4px}
  .nav .links{gap:18px}
  .nav-right{gap:16px}
}

#home-brands #brands .brand.static{cursor:default}

/* Vision 2030 card: YouTube film filling the box, a clickable cover on top */
.v30c-media{overflow:hidden;background:#fff url(../media/vision2030-poster.jpg) center/cover no-repeat}
.v30c-yt{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s ease}
.v30c-yt.on{opacity:1}
.v30c-yt iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.04);border:0;pointer-events:none}
.v30c-cover{position:absolute;inset:0;z-index:2;display:block;color:#fff;text-decoration:none}
.v30c-media::before{z-index:1;pointer-events:none}
.v30c-cover:hover .v30c-card,.v30c-cover:focus-visible .v30c-card{transform:translateY(-3px);border-color:rgba(86,255,230,.6)}
.v30c-cover:focus-visible{outline:2px solid #56FFE6;outline-offset:-4px}

.v30c-media video{z-index:0}
/* Hero films: when switching modes the outgoing film stays on screen until the incoming one is ready, then they crossfade */
.hero-video{transition:opacity 1.1s ease}
html[data-theme="light"] #hero-video.on{opacity:1 !important}
html[data-theme="light"] .hero:has(.hero-video-light.on) #hero-video.on{opacity:0 !important}
html:not([data-theme="light"]) .hero-video-light{opacity:0 !important}
html.theme-fade .hero-video{transition:opacity 1.1s ease !important}

/* =====================================================================
   NO GLASS: solid, crisp surfaces everywhere. No frosted blur, no see-through panels, no glow halos.
   ===================================================================== */
:root{--surf:#10171E;--surf-2:#151E27;--surf-line:rgba(255,255,255,.10)}
html[data-theme="light"]{--surf:#FFFFFF;--surf-2:#F3F6F8;--surf-line:rgba(14,42,58,.12)}
*,*::before,*::after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.glass,html[data-theme="light"] .glass{background:var(--surf) !important;border:1px solid var(--surf-line) !important;box-shadow:none !important}
.pill.glass,html[data-theme="light"] .pill.glass{background:var(--surf-2) !important}
.nav.solid,html[data-theme="light"] .nav.solid{background:var(--surf) !important;box-shadow:0 1px 0 var(--surf-line) !important}
.band,#view-home .band.stuck{background:var(--surf) !important;box-shadow:none !important}
html[data-theme="light"] .band,html[data-theme="light"] #view-home .band.stuck{background:#EEF3F6 !important}
.scrim{background:rgba(5,9,13,.6)}
.nudge-wrap{background:rgba(5,9,13,.6)}
.jr-tip{background:var(--surf-2) !important;box-shadow:0 8px 20px -10px rgba(0,0,0,.5) !important}
/* hero search bar over the film */
.hero.showroom .search{background:var(--surf) !important;border:1px solid var(--surf-line) !important;box-shadow:none !important}
/* the welcome line: a plain solid tag */
#view-home .hero.showroom .hero-copy p.kicker{background:var(--surf) !important;border:1px solid var(--surf-line) !important;box-shadow:none !important}
html[data-theme="light"] #view-home .hero.showroom .hero-copy p.kicker{background:#fff !important}
#view-home .hero.showroom .hero-copy p.kicker::before{animation:none !important;box-shadow:none !important}
/* Vision 2030 label on the video */
.v30c-card{background:var(--surf) !important;border-color:var(--surf-line) !important}
.v30c-play{box-shadow:none !important}
/* settings pair in the top bar */
.nav-util{background:var(--surf) !important;border-color:var(--surf-line) !important}
footer.site-foot{backdrop-filter:none}

/* Product photos: the alt text never shows on the card while a photo loads or if it fails */
img.pimg{color:transparent;font-size:0;background:radial-gradient(70% 70% at 50% 55%,rgba(71,229,253,.08),transparent 70%)}
.more-row{display:flex;justify-content:center;padding:12px 0 4px}

/* Catalog card price: on one line above the buttons, so big prices never wrap */
#grid .card .foot{flex-wrap:wrap;gap:10px}
#grid .card .foot .rate{flex:1 1 100%;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
#grid .card .foot .rate b{white-space:nowrap}
#grid .card .foot .rate span{white-space:nowrap}
#grid .card .foot .btns{margin-inline-start:auto}

/* Messages never cover an open window: they move to the bottom while a pop-up or the truck is open */
body:has(.modal:not([hidden])) .toast,body:has(#drawer:not([hidden])) .toast{top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px))}

/* Phone: the "Sign in to see prices" buttons stack so their labels are never cut off */
@media (max-width:520px){ .pg-btns{flex-direction:column} .pg-btns .pill{width:100%;flex:none;height:auto;min-height:46px;padding:12px 16px;white-space:normal;text-align:center} }

.r-place{margin:4px 0 0;font-size:13px;color:var(--muted)}.addr-pick{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}.addr-pick label{font-size:13px;font-weight:600}.addr-pick select{width:100%}
.pin-field{gap:8px}.pin-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pin-head label{margin:0}.pin-head .sm{display:inline-flex;align-items:center;gap:6px}
.pin-map{height:300px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surf);position:relative;z-index:0}
.pin-map.bad{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.18)}
.pin-wait{margin:0;height:100%;display:grid;place-items:center;text-align:center;padding:16px;color:var(--muted);font-size:14px}
.pin-read{margin:0;font-size:13px;color:var(--muted)}.pin-read.set{color:var(--ink)}.pin-read a,.pin-read .link{font-size:13px}
html[data-theme="dark"] .pin-map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.6)}
.pin-map .leaflet-control-attribution{font-size:10px}
.prjx-pin{background:none;border:0}
.prjx-pin span{display:block;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#46e6ff,#1f7bff);border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.prjx-pin span::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.addr-addpin{color:#ffb547!important;font-weight:600}
.addr-pin{display:flex;align-items:center;gap:6px}.pin-dot{width:8px;height:8px;border-radius:50%;background:#46e6ff;box-shadow:0 0 0 3px rgba(70,230,255,.2)}
.addr-nopin{color:var(--muted);font-size:13px}
@media (max-width:640px){.pin-map{height:240px}}
.pin-map-sm{height:240px}
html[data-acct="loading"] #view-profile .psec,html[data-acct="loading"] #view-profile .pnav{opacity:.45;pointer-events:none;transition:opacity .2s}
html[data-acct="loading"] #view-profile::before{content:"Loading your account…";display:block;max-width:1180px;margin:18px auto 0;padding:12px 16px;border-radius:12px;background:var(--surf);color:var(--muted);font-size:14px;text-align:center}
html[lang="ar"][data-acct="loading"] #view-profile::before{content:"جارٍ تحميل حسابك…"}
#view-product .wrap{padding-bottom:64px}
.pd-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;margin-top:22px;align-items:start}
.pd-art{border-radius:22px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center;background:var(--surf)}
.pd-art img{width:100%;height:100%;object-fit:contain}
.pd-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd-name{font-size:clamp(24px,3vw,36px);line-height:1.15;margin:0;overflow-wrap:anywhere}
.pd-sum{margin:0;font-size:17px;line-height:1.5;color:var(--muted)}
.pd-buy{border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.pd-rate b{font-size:26px}.pd-rate span{color:var(--muted);margin-inline-start:6px}
.pd-avail{display:flex;flex-direction:column;gap:4px;font-weight:600;color:#3fd3a0}.pd-avail.low{color:#ffb347}.pd-avail.none{color:#ff6b6b}
.pd-avail small{font-weight:400;color:var(--muted);font-size:13px}
.pd-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pd-row .rate b{display:block;font-size:20px}.pd-row .rate span{font-size:12px;color:var(--muted)}
#pd-add{justify-content:center}.pd-incart{color:var(--muted);text-align:center}
.pd-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;margin-top:40px}
.pd-sec h2,.pd-rel h2{font-size:20px;margin:0 0 14px}
.pd-sec p{line-height:1.65;margin:0 0 12px;color:var(--text)}
.pd-good{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.pd-good span{font-size:13px;color:var(--muted);margin-inline-end:4px}
.pd-good em{font-style:normal;font-size:13px;padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
.pd-note{font-size:14px;color:var(--muted)!important;border-inline-start:3px solid var(--line);padding-inline-start:10px}
.pd-rel{margin-top:44px}
.pd-rel-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pd-mini{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;text-decoration:none;color:inherit}
.pd-mini-art{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--surf)}
.pd-mini-art img{width:100%;height:100%;object-fit:contain}
.pd-mini b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pd-mini span:last-child{font-size:13px;color:var(--muted)}
.card .pimg,.card h3{cursor:pointer}
@media (max-width:900px){.pd-top,.pd-body{grid-template-columns:1fr;gap:22px}.pd-rel-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Product page descriptions: Poppins Regular (Arabic falls back to IBM Plex Sans Arabic) */
#pd .pd-sum,#pd .pd-sec p,#pd .pd-sec .spec-table td,#pd .pd-good em,#pd .pd-good span,#pd .pd-note,#pd .pd-avail small,#pd .pd-mini b,#pd .pd-mini span{font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;font-weight:400;letter-spacing:0;text-transform:none}
#pd .pd-sec p{font-size:16px;line-height:1.7}
#pd .pd-sum{font-size:17px}
#pd .spec-table td{font-size:15px}
/* Warehouse check popup: Poppins Regular, like the product descriptions */
.pop header b,.pop header small,.pop-msg,.pop-msg p,.pop-me,.pop-acts .chip,.pop-acts .pill,.pop-pick{font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;letter-spacing:0;text-transform:none}
.pop-msg p{font-size:15px;line-height:1.55}
.pop header b{font-size:16px}
/* Sharper look: product art fills its frame (no bands), Details link styled as a button */
.pd-art{aspect-ratio:16/10;padding:0}
.pd-art img.pimg{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.btns a.sm{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.pd-mini-art{aspect-ratio:16/10}
.pd-mini-art img.pimg{height:100%;object-fit:cover;border-radius:0}
/* ---------- Product page, per the "Equipment Hub · Edits 03" sheet ---------- */
#pd{max-width:1200px;margin:0 auto;--pf:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;--aqua:#4FE9F0}
#pd .pd3-crumbs{margin-top:28px;font:400 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#pd .pd3-crumbs a{color:var(--muted);text-decoration:none}#pd .pd3-crumbs a:hover{color:var(--text)}
#pd .pd3-crumbs b{font-weight:400;color:var(--text)}
.pd3-top{display:grid;grid-template-columns:620px minmax(0,1fr);gap:56px;margin-top:28px;align-items:start}
.pd3-gal{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd3-main{height:440px;border-radius:12px;background:#F3F5F6;display:grid;place-items:center;overflow:hidden}
.pd3-main img.pd3-photo{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.pd3-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pd3-th{height:72px;border-radius:10px;border:2px solid transparent;background:#F3F5F6;padding:0;cursor:pointer;overflow:hidden}
.pd3-th.on{border-color:var(--aqua)}.pd3-th img{width:100%;height:100%;object-fit:cover}
.pd3-th:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.pd3-info{display:flex;flex-direction:column;gap:24px;min-width:0}
.pd3-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pd3-logo{height:36px;padding:0 14px;border-radius:8px;background:#fff;color:#0B1A20;display:inline-flex;align-items:center;font:700 13px var(--pf);letter-spacing:.16em;text-transform:uppercase}
.pd3-logo img{height:18px;width:auto;display:block}
.pd3-all{font:500 14px var(--pf);color:var(--aqua);text-decoration:none}.pd3-all:hover{text-decoration:underline}
.pd3-title{font:400 30px/40px var(--font-display);margin:0;overflow-wrap:anywhere;color:var(--text)}
.pd3-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px}
.pd3-chip{height:32px;padding:0 12px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);font:400 13px var(--pf)}
.pd3-chip span{color:var(--muted)}.pd3-chip b{font-weight:500;color:var(--text)}
.pd3-k{display:block;font:500 11px var(--pf);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pd3-lens{display:flex;flex-wrap:wrap;gap:8px}
.pd3-lc{height:40px;min-width:62px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font:500 14px var(--pf);cursor:pointer}
.pd3-lc:hover{border-color:var(--line-strong)}
.pd3-lc.on{background:#1B2A31;border:1.5px solid var(--aqua);color:#fff}
.pd3-lc.off{color:var(--muted);text-decoration:line-through;opacity:.55;cursor:not-allowed}
.pd3-lnote{margin:10px 0 0;font:400 13px var(--pf);color:var(--muted)}
.pd3-box{padding:24px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#121A1F,#0C1114);display:flex;flex-direction:column;gap:14px}
.pd3-box .pd3-k{margin-bottom:-4px}
.pd3-date{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-radius:10px;border:1px solid var(--line-strong);background:transparent;color:var(--text);cursor:pointer;text-align:start;font:500 16px var(--pf);width:100%}
.pd3-date:hover{border-color:var(--aqua)}.pd3-date svg{color:var(--aqua);flex:none}
.pd3-dtxt{flex:1}.pd3-dtxt i{font-style:normal;color:var(--muted);font-size:13px;margin:0 4px}
.pd3-date em{font-style:normal;font:600 13px var(--pf);color:var(--aqua);background:rgba(79,233,240,.12);padding:4px 10px;border-radius:999px}
.pd3-chev{width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-3px);margin-inline-start:4px}
.pd3-date[aria-expanded="true"] .pd3-chev{transform:rotate(-135deg)}
.pd3-dpanel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd3-dpanel label{display:flex;flex-direction:column;gap:6px;font:500 12px var(--pf);color:var(--muted)}
.pd3-ret{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pd3-tag{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);font:600 13.5px var(--pf);color:var(--text)}
.pd3-pay{font:400 13.5px var(--pf);color:var(--muted)}
.pd3-avail{margin:4px 0 -4px;font:500 15px var(--pf);color:#3FE0C5}.pd3-avail.low{color:#ffb347}.pd3-avail.none{color:#ff6b6b}
.pd3-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pd3-price b{font:500 28px var(--pf);color:var(--text)}.pd3-price span{font:400 13.5px var(--pf);color:var(--muted)}
.pd3-price small{font:400 13.5px var(--pf);color:var(--muted);margin-inline-start:16px}
.pd3-lock{display:flex;align-items:center;gap:8px;font:500 15px var(--pf);color:var(--muted)}.pd3-lock a{color:var(--aqua)}
.pd3-rule{height:1px;background:var(--line)}
.pd3-qty{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pd3-step{display:inline-flex;align-items:center;height:44px;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.pd3-step button{width:44px;height:100%;border:0;background:transparent;color:var(--text);font:400 18px var(--pf);cursor:pointer}
.pd3-step button:hover{background:rgba(255,255,255,.06)}
.pd3-step span{min-width:34px;text-align:center;font:500 15px var(--pf)}
.pd3-tot{text-align:end;display:flex;flex-direction:column;gap:2px}.pd3-tot b{font:600 20px var(--pf)}.pd3-tot span{font:400 13px var(--pf);color:var(--muted)}
.pd3-add{height:50px;border-radius:8px;border:0;cursor:pointer;font:400 13px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5);transition:filter .2s}
.pd3-add:hover{filter:brightness(1.07)}.pd3-add:focus-visible,.pd3-date:focus-visible,.pd3-lc:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.pd3-incart{font:400 13px var(--pf);color:var(--muted);text-align:center;margin-top:-6px}
.pd3-body{display:grid;grid-template-columns:620px minmax(0,1fr);gap:56px;margin-top:64px}
.pd3-sec h2,.pd3-rel h2{font:400 20px var(--font-display);margin:0 0 18px;color:var(--text)}
.pd3-sec p{font:400 16px/1.7 var(--pf);margin:0 0 16px;color:var(--text)}
.pd3-good{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 24px}
.pd3-good span{font:400 13px var(--pf);color:var(--muted);margin-inline-end:4px}
.pd3-good em{font:400 13px var(--pf);font-style:normal;padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong)}
.pd3-note{font-size:14px!important;color:var(--muted)!important;border-inline-start:3px solid var(--line);padding-inline-start:10px}
.pd3-pdf{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:8px;border:1px solid var(--aqua);background:transparent;color:var(--aqua);font:500 14px var(--pf);cursor:pointer}
.pd3-pdf:hover{background:rgba(79,233,240,.08)}
.pd3-spec{width:100%;border-collapse:collapse}
.pd3-spec td{padding:14px 0;border-bottom:1px solid var(--line);font:400 15px var(--pf);color:var(--muted)}
.pd3-spec td:last-child{text-align:end;color:var(--text);font-weight:500}
.pd3-rel{margin:64px 0 40px}
.pd3-rel-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pd3-rc{border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#161B1F,#0B0D0F);display:flex;flex-direction:column}
.pd3-rc-img{display:block;height:150px;background:#F3F5F6}.pd3-rc-img img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.pd3-rc-b{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 18px}
.pd3-rc-b>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.pd3-rc-n{font:400 13.5px/1.35 var(--font-display);color:#F3F8FA;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pd3-rc-n:hover{text-decoration:underline}
.pd3-rc-b span{font:400 13px var(--pf);color:#9FB2BA}
.pd3-rc-add{flex:none;height:36px;padding:0 14px;border-radius:7px;border:0;cursor:pointer;font:400 11px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5)}
body:has(#view-product.on) .toast{top:auto;bottom:calc(28px + env(safe-area-inset-bottom,0px))}
html[data-theme="light"] .pd3-box{background:#fff;border-color:var(--line-strong)}
html[data-theme="light"] .pd3-chip,html[data-theme="light"] .pd3-lc{background:#fff}
html[data-theme="light"] .pd3-lc.on{background:#E8FBFC;color:#0B1A20;border-color:#0FB5C4}
html[data-theme="light"] #pd{--aqua:#0A9DB0}
html[data-theme="light"] .pd3-avail{color:#0E9F7E}
@media (max-width:1240px){.pd3-top,.pd3-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px}}
@media (max-width:900px){.pd3-top,.pd3-body{grid-template-columns:1fr;gap:28px}.pd3-main{height:auto;aspect-ratio:16/10}.pd3-rel-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pd3-title{font-size:24px;line-height:32px}}
#view-product.page{padding-top:max(110px,calc(var(--nav-h,100px) + 4px))}
@media (max-width:520px){.pd3-rel-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pd3-rc-img{height:110px}.pd3-rc-b{flex-direction:column;align-items:stretch;padding:12px}.pd3-rc-add{width:100%}.pd3-box{padding:18px}.pd3-dpanel{grid-template-columns:1fr}.pd3-price small{margin-inline-start:0;width:100%}}
/* Equipment Hub: one card: search, dates and sort on top; days line and delivery address underneath */
#cat-form .bar-foot{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding-top:12px;margin-top:2px;border-top:1px solid var(--line)}
#cat-form .bar-foot .days{padding:0;font:400 13.5px 'PRJX Poppins',system-ui,sans-serif;color:var(--muted);letter-spacing:0}
#cat-form .bar-foot .days b{font-weight:600;color:var(--teal,#4FE9F0)}
.hub-deliver{display:flex;align-items:center;gap:10px;min-width:0}
.hub-deliver[hidden]{display:none}
.hub-deliver .hd-ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#4FE9F0;background:rgba(79,233,240,.1);flex:none}
.hub-deliver .hd-ico svg{width:16px;height:16px}
.hub-deliver .hd-pick{display:flex;align-items:center;gap:10px;min-width:0}
.hub-deliver .hd-pick label{font:500 11px 'PRJX Poppins',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hub-deliver .hd-pick select{height:38px;min-height:0;padding-block:0;max-width:340px;font-size:14px}
.hub-deliver .hd-addbtn{border:0;background:none;padding:0;cursor:pointer;color:#4FE9F0;font:600 14px 'PRJX Poppins',system-ui,sans-serif}
.hub-deliver .hd-addbtn:hover{text-decoration:underline}
.hub-deliver .hd-warn{border:0;background:rgba(255,181,71,.14);color:#ffb547;font:600 12.5px 'PRJX Poppins',system-ui,sans-serif;padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.hub-deliver .hd-plus{width:38px;height:38px;flex:none;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font:400 20px/1 system-ui;cursor:pointer}
.hub-deliver .hd-plus:hover{border-color:#4FE9F0;color:#4FE9F0}
html[data-theme="light"] .hub-deliver .hd-ico,html[data-theme="light"] .hub-deliver .hd-addbtn{color:#0A9DB0}
.price-gate{padding:12px 16px;margin-bottom:18px}.price-gate .pg-ico{width:36px;height:36px}
@media (max-width:700px){.hub-deliver,.hub-deliver .hd-pick{flex:1 1 100%}.hub-deliver .hd-pick select{flex:1;max-width:none;min-width:0}.hub-deliver .hd-pick label{display:none}}
.modal.addr-modal-box{width:min(760px,calc(100% - 32px))}
.modal .addr-modal{padding:4px 22px 22px;display:block}
.modal .addr-modal .sub-form{margin:0}
@media (max-width:600px){.hub-deliver{padding:12px}.hub-deliver .pill{width:100%;justify-content:center}}
/* PRJ X Assist (replaces the green WhatsApp button on every page) */
.assist{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;transition:bottom .25s ease}
body.has-cartbar .assist{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
html[dir="rtl"] .assist{right:auto;left:20px;flex-direction:row-reverse}
.assist-lbl{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(11,16,19,.92);color:#F3F8FA;font:500 14px 'PRJX Poppins',system-ui,sans-serif;display:inline-flex;align-items:center;cursor:pointer}
.assist-btn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#04212A;background:linear-gradient(135deg,#4FF0E0,#38B6F5);box-shadow:0 14px 34px rgba(30,170,210,.35)}
.assist-btn:hover,.assist-lbl:hover{filter:brightness(1.06)}
.assist-btn:focus-visible,.assist-lbl:focus-visible{outline:2px solid #4FE9F0;outline-offset:3px}
.assist-pop{position:absolute;right:0;bottom:72px;width:300px;max-width:calc(100vw - 40px);padding:18px;border-radius:14px;background:#0F161A;border:1px solid var(--line-strong);box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;color:#F3F8FA}
html[dir="rtl"] .assist-pop{right:auto;left:0}
.assist-pop b{font:400 14px var(--font-display);letter-spacing:.06em}
.assist-pop p{margin:0;font:400 14px/1.55 'PRJX Poppins',system-ui,sans-serif;color:#B9CBD2}
.assist-pop a{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:8px;text-decoration:none;font:600 14px 'PRJX Poppins',system-ui,sans-serif}
.assist-wa{background:#1FAF5B;color:#fff}.assist-wa:hover{background:#178F4A}
.assist-help{border:1px solid var(--line-strong);color:#F3F8FA}
html[data-theme="light"] .assist-lbl{background:#fff;color:#0B1A20}
html[data-theme="light"] .assist-pop{background:#fff;color:#0B1A20}html[data-theme="light"] .assist-pop p{color:#4A626B}html[data-theme="light"] .assist-help{color:#0B1A20}
@media (max-width:700px){.assist-lbl{display:none}.assist-btn{width:54px;height:54px}}
/* Truck, checkout, payment and sign-in windows: Poppins (your Regular file, with Poppins bold weights for prices and titles) */
#drawer,#drawer *,#modal,#modal *,#auth,#auth *{font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:0}
#drawer header h2,#modal header h2,#auth header h2{font-weight:600}
/* ---------- Product card (Equipment Hub), per the "Product card · edits 01" sheet ---------- */
#grid .card.pc{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#161B1F 0%,#0B0D0F 100%);border:1px solid transparent;
  background-clip:padding-box;box-shadow:none;transition:transform .25s ease,box-shadow .25s ease}
#grid .card.pc::before{content:"";position:absolute;inset:0;border-radius:12px;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:background .25s ease}
#grid .card.pc::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(120% 90% at 100% 100%,rgba(42,236,236,.20),rgba(69,228,250,0) 60%)}
#grid .card.pc:hover{transform:translateY(-3px)}
#grid .card.pc:hover::before{background:linear-gradient(180deg,rgba(42,236,236,.36),rgba(42,236,236,.08))}
#grid .card.pc:hover::after{opacity:1}
#grid .card.pc .pick{position:absolute;top:12px;left:12px;z-index:3;width:20px;height:20px}
.pc-img{height:176px;background:#F3F5F6;overflow:hidden;flex:none}
#grid .pc-img img.pimg,#grid .pc-img img.pc-photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;background:#F3F5F6;transition:transform .25s ease,filter .25s ease;filter:none}
#grid .card.pc:hover .pc-img img{transform:scale(1.03);filter:none}
#grid .card.pc.is-booked .pc-img img{filter:grayscale(.2) brightness(.62)}
.pc-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.pc-cat{font:500 11px/1.3 'PRJX Poppins','IBM Plex Sans Arabic',sans-serif!important;text-transform:uppercase;letter-spacing:.12em;color:#8C969E!important;margin:0}
.pc-name{margin:4px 0 0;font:400 15px/22px var(--font-display)!important;letter-spacing:.01em;color:#F3F5F6;text-transform:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-name a{color:inherit;text-decoration:none}
.pc-spec{margin-top:4px;font:400 13px/20px 'PRJX Poppins','IBM Plex Sans Arabic',sans-serif;color:#9AA4AC}
.pc-spec b{font-weight:500;color:#E6ECEF}
.pc-avail{margin-top:auto;padding-top:30px;font:500 13px/20px 'PRJX Poppins','IBM Plex Sans Arabic',sans-serif;color:#2AECEC;background:none!important;border:0!important;border-radius:0!important;display:block}
.pc-avail.is-few{color:#FFFFFF;font-weight:600}
.pc-avail.is-booked,.pc-avail.is-nodate{color:#8C969E}
.pc-rule{height:1px;background:rgba(255,255,255,.09);margin:14px 0}
.pc-price{min-height:46px;display:flex;flex-direction:column;justify-content:center}
.pc-day{display:flex;align-items:baseline;gap:6px}
.pc-day b{font:500 22px/1.15 'PRJX Poppins','IBM Plex Sans Arabic',sans-serif;color:#F3F5F6}
.pc-day span{font:400 13px 'PRJX Poppins','IBM Plex Sans Arabic',sans-serif;color:#8C969E}
.pc-week{margin-top:4px;font:400 12.5px 'PRJX Poppins','IBM Plex Sans Arabic',sans-serif;color:#8C969E}
.pc-lock{display:flex;align-items:center;gap:8px;font:400 13px 'PRJX Poppins','IBM Plex Sans Arabic',sans-serif;color:#C6CDD2}
.pc-lock a{color:#C6F7FF;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.pc-btn{margin-top:16px;height:40px;width:100%;border-radius:8px;border:0;cursor:pointer;
  font:400 11.5px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:#04212A;
  background:linear-gradient(90deg,#2AECEC,#45E4FA);transition:filter .2s ease}
.pc-btn:hover{filter:brightness(1.06)}
#grid .card.pc .pc-name{min-height:0!important;height:auto!important}
#grid .card.pc .pc-avail{padding:30px 0 0!important;margin-left:0!important;margin-right:0!important;height:auto!important;width:auto!important}
#grid .card.pc .pc-avail::before{display:none!important}
.pc-btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.pc-btn.ghost{background:transparent;border:1px solid rgba(42,236,236,.5);color:#C6F7FF}
.pc-btn:focus-visible{outline:2px solid #C6F7FF;outline-offset:2px}
#grid .card.pc.sel::before{background:linear-gradient(180deg,rgba(42,236,236,.7),rgba(42,236,236,.3))}
/* light mode: same layout on a white card */
html[data-theme="light"] #grid .card.pc{background:linear-gradient(180deg,#FFFFFF,#F4F7F9)}
html[data-theme="light"] #grid .card.pc::before{background:linear-gradient(180deg,rgba(10,40,60,.14),rgba(10,40,60,.05))}
html[data-theme="light"] .pc-name,html[data-theme="light"] .pc-day b{color:#0B1A22}
html[data-theme="light"] .pc-spec b{color:#22343E}
html[data-theme="light"] .pc-avail{color:#0B8F9A}
html[data-theme="light"] .pc-avail.is-few{color:#0B1A22}
html[data-theme="light"] .pc-rule{background:rgba(10,40,60,.1)}
html[data-theme="light"] .pc-lock{color:#3C4C55}html[data-theme="light"] .pc-lock a{color:#0B8F9A}
html[data-theme="light"] .pc-img{background:#EEF2F5}
html[data-theme="light"] .pc-btn.ghost{color:#0B6F7A;border-color:rgba(11,143,154,.5)}

/* Our logo (PRJ X by AVP): white on dark, dark on light */
.has-logo .site-logo{display:block;height:44px;width:auto;max-width:none}
.has-logo .site-logo.on-light{display:none}
html[data-theme="light"] .has-logo .site-logo.on-dark{display:none}
html[data-theme="light"] .has-logo .site-logo.on-light{display:block}
.nav .brand.has-logo{width:auto;min-width:0;padding:0 16px;flex-direction:row}
.sf-logo.has-logo .site-logo{height:60px}
@media (max-width:700px){.has-logo .site-logo{height:36px}.nav .brand.has-logo{padding:0 12px}}
/* Logo sits straight on the page background (no box) and lines up with the menu */
.nav .brand.has-logo,html[data-theme="light"] .nav .brand.has-logo{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-radius:0!important;padding:0!important;height:auto!important;min-height:0!important;width:auto!important;align-self:center;display:flex;align-items:center;margin-inline-end:32px;overflow:visible}
.nav .brand.has-logo::before,.nav .brand.has-logo::after{content:none!important;display:none!important}
.nav .brand.has-logo .site-logo{height:46px}
.nav .brand.has-logo:hover{transform:none;filter:brightness(1.12)}
.nav .brand.has-logo:focus-visible{outline:2px solid #4FE9F0;outline-offset:6px;border-radius:6px!important}
@media (max-width:700px){.nav .brand.has-logo .site-logo{height:38px}.nav .brand.has-logo{margin-inline-end:0}}
/* "PRJ X" (the logo's top line) sits on the same line as HOME / EQUIPMENT HUB / … */
@media (min-width:1101px){.nav .brand.has-logo .site-logo{transform:translateY(16px)}}

/* Bigger logo, drawn as a vector (SVG) so it stays sharp on every screen */
.nav .brand.has-logo .site-logo{height:62px}
.sf-logo.has-logo .site-logo{height:76px}
@media (max-width:700px){.nav .brand.has-logo .site-logo{height:48px}}
@media (min-width:1101px){.nav .brand.has-logo .site-logo{transform:translateY(21px)}}
/* Bigger logo; "PRJ X" lines up with the HOME word */
.nav .brand.has-logo .site-logo{height:84px}
@media (min-width:1101px){.nav .brand.has-logo .site-logo{transform:none}}
@media (min-width:1101px){.nav .brand.has-logo .site-logo{transform:translateY(24px)}}
.nav .brand.has-logo{flex:none!important;justify-content:flex-start!important}
/* Sizes per screen width so everything fits on one row; "PRJ X" stays level with the HOME letters */
@media (min-width:1600px){.nav .brand.has-logo .site-logo{height:84px;transform:translateY(24px)}}
@media (min-width:1281px) and (max-width:1599px){
  .nav .brand.has-logo .site-logo{height:72px;transform:translateY(20px)}
  .nav .brand.has-logo{margin-inline-end:20px}
  .nav .links{gap:24px!important}
  .nav .wrap{padding-inline:24px}
}
@media (min-width:1101px) and (max-width:1280px){
  .nav .brand.has-logo .site-logo{height:62px;transform:translateY(16.5px)}
  .nav .brand.has-logo{margin-inline-end:16px}
}
@media (max-width:700px){.nav .brand.has-logo .site-logo{height:56px}}
@media (min-width:1281px) and (max-width:1439px){
  .nav .brand.has-logo .site-logo{height:60px;transform:translateY(15.8px)}
  .nav .links{gap:20px!important}
}
@media (min-width:1201px) and (max-width:1280px){.nav .brand.has-logo .site-logo{height:54px;transform:translateY(13.8px)}.nav .brand.has-logo{margin-inline-end:12px}}
@media (min-width:1101px) and (max-width:1200px){.nav .brand.has-logo .site-logo{height:48px;transform:translateY(11.8px)}.nav .brand.has-logo{margin-inline-end:10px}}
@media (min-width:1101px) and (max-width:1439px){.acct small{display:none}.nav-right{gap:12px!important}}
@media (min-width:1101px) and (max-width:1280px){.nav .links{gap:14px!important}}
@media (min-width:1281px) and (max-width:1365px){.nav .brand.has-logo .site-logo{height:54px;transform:translateY(13.8px)}.nav .links{gap:16px!important}.nav .links a{font-size:10.5px;letter-spacing:.03em}}
@media (min-width:1101px) and (max-width:1240px){.nav .brand.has-logo .site-logo{height:44px;transform:translateY(10.4px)}.nav .links{gap:12px!important}.nav .brand.has-logo{margin-inline-end:8px}}
/* "PRJ X" stands on the same line as HOME: the bottoms of the letters line up */
@media (min-width:1600px){.nav .brand.has-logo .site-logo{transform:translateY(14.5px)}}
@media (min-width:1440px) and (max-width:1599px){.nav .brand.has-logo .site-logo{transform:translateY(12.5px)}}
@media (min-width:1366px) and (max-width:1439px){.nav .brand.has-logo .site-logo{transform:translateY(10.3px)}}
@media (min-width:1241px) and (max-width:1365px){.nav .brand.has-logo .site-logo{transform:translateY(9.3px)}}
@media (min-width:1101px) and (max-width:1240px){.nav .brand.has-logo .site-logo{transform:translateY(7.4px)}}

/* Our brands (homepage): the Blackmagic Design logo is white, so its "real" logo shows on a dark plate */
#home-brands #brands .logo-real.dark{background:#111417}
/* Product page brand tile: the brand's own logo */
.pd3-logo.has-img{padding:0 12px;background:#fff}.pd3-logo.has-img img{height:22px;width:auto;display:block}
.pd3-logo.dark{background:#111417}
/* Equipment Hub: brand filter, cyan logos */
.brand-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.brand-strip .bs-lbl{font:500 11px 'PRJX Poppins',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-inline-end:4px}
.brand-strip button{height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text);font:500 14px 'PRJX Poppins',system-ui,sans-serif;transition:border-color .2s,background .2s}
.brand-strip button:hover{border-color:var(--line-strong)}
.brand-strip button[aria-pressed="true"]{border:1.5px solid #4FE9F0;background:rgba(79,233,240,.10)}
.brand-strip .bs-b img{height:22px;width:auto;max-width:120px;object-fit:contain;display:block;opacity:.85;transition:opacity .2s}
.brand-strip .bs-b:hover img,.brand-strip .bs-b[aria-pressed="true"] img{opacity:1}
.brand-strip button:focus-visible{outline:2px solid #4FE9F0;outline-offset:2px}
html[data-theme="light"] .brand-strip button{background:#fff}
html[data-theme="light"] .brand-strip .bs-b img{filter:brightness(.82) saturate(1.3)}
@media (max-width:700px){.brand-strip{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.brand-strip button{flex:none}.brand-strip .bs-lbl{display:none}}
#home-brands #brands .brand-pic img.brand-logo[style]{height:var(--lh)!important;max-height:none;width:auto}
@media (max-width:640px){#home-brands #brands .brand-pic img.brand-logo[style]{height:calc(var(--lh) * .72)!important}}
.brand-strip .bs-b img[style]{height:var(--lh)}
/* Hub brand row: cyan logo; the brand's own logo (on a white plate, dark for Blackmagic) when the mouse is over it */
.brand-strip .bs-b{position:relative}
.brand-strip .bs-b .bs-real{position:absolute;inset:0;margin:auto;opacity:0;transition:opacity .2s ease;filter:none!important}
.brand-strip .bs-b .bs-cy{transition:opacity .2s ease}
.brand-strip .bs-b:hover,.brand-strip .bs-b:focus-visible{background:#fff;border-color:#fff}
.brand-strip .bs-b[data-dark]:hover,.brand-strip .bs-b[data-dark]:focus-visible{background:#111417;border-color:#111417}
.brand-strip .bs-b:hover .bs-cy,.brand-strip .bs-b:focus-visible .bs-cy{opacity:0}
.brand-strip .bs-b:hover .bs-real,.brand-strip .bs-b:focus-visible .bs-real{opacity:1}
html[data-theme="light"] .brand-strip .bs-b:hover{border-color:var(--line-strong)}

/* ---------- Delivery & return calendar (two months, range, gradient) ---------- */
#cat-form{position:relative}
.dr-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;border:0!important;padding:0!important}
.dr-field{position:relative}
.dr-btn{display:flex;align-items:center;gap:10px;min-width:210px;cursor:pointer;text-align:start;font:500 15px 'PRJX Poppins',system-ui,sans-serif;color:var(--text)}
.dr-btn svg{color:#4FE9F0;flex:none}
.dr-btn.on{border-color:#4FE9F0;box-shadow:0 0 0 3px rgba(79,233,240,.18)}
.dr-pop{position:absolute;z-index:40;top:calc(100% + 10px);inset-inline-end:16px;width:min(720px,calc(100vw - 32px));border-radius:16px;background:#0F161A;border:1px solid var(--line-strong);
  box-shadow:0 30px 70px rgba(0,0,0,.5);padding:18px 20px 0;color:#F3F8FA;font-family:'PRJX Poppins',system-ui,sans-serif}
.dr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.dr-nav{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);background:transparent;color:inherit;font:400 22px/1 system-ui;cursor:pointer}
.dr-nav:hover:not([disabled]){border-color:#4FE9F0;color:#4FE9F0}.dr-nav[disabled]{opacity:.3;cursor:default}
.dr-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.06)}
.dr-tabs span{padding:6px 14px;border-radius:999px;font:500 12.5px 'PRJX Poppins',system-ui,sans-serif;color:#9FB2BA}
.dr-tabs span.on{background:linear-gradient(90deg,#4FF0E0,#38B6F5);color:#04212A}
.dr-months{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.dr-mname{display:block;text-align:center;font:600 16px 'PRJX Poppins',system-ui,sans-serif;margin:8px 0 14px}
.dr-wk,.dr-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.dr-wk span{text-align:center;font:500 12px 'PRJX Poppins',system-ui,sans-serif;color:#7F95A0;padding-bottom:8px}
.dr-day{position:relative;height:42px;border:0;background:none;color:#F3F8FA;font:600 14px 'PRJX Poppins',system-ui,sans-serif;cursor:pointer;z-index:0}
.dr-day::after{content:"";position:absolute;inset:3px;margin:auto;width:36px;height:36px;border-radius:50%;z-index:-1;transition:background .15s}
.dr-day:hover:not([disabled])::after{background:rgba(79,233,240,.16)}
.dr-day[disabled]{color:#3F525B;cursor:default}
.dr-day.today::after{box-shadow:inset 0 0 0 1.5px #4FE9F0}
.dr-day.mid{background:linear-gradient(90deg,rgba(79,240,224,.14),rgba(56,182,245,.14))}
.dr-day.sel{color:#04212A}
.dr-day.sel::after,.dr-day.sel:hover:not([disabled])::after{background:linear-gradient(135deg,#4FF0E0,#38B6F5);box-shadow:0 6px 16px rgba(56,182,245,.35)}
.dr-day.start{background:linear-gradient(90deg,transparent 50%,rgba(79,240,224,.14) 50%)}
.dr-day.end{background:linear-gradient(90deg,rgba(56,182,245,.14) 50%,transparent 50%)}
.dr-day.start.end{background:none}
html[dir="rtl"] .dr-day.start{background:linear-gradient(270deg,transparent 50%,rgba(79,240,224,.14) 50%)}
html[dir="rtl"] .dr-day.end{background:linear-gradient(270deg,rgba(56,182,245,.14) 50%,transparent 50%)}
.dr-day:focus-visible{outline:none}.dr-day:focus-visible::after{box-shadow:0 0 0 2px #4FE9F0}
.dr-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:14px -20px 0;padding:14px 20px;border-top:1px solid var(--line)}
.dr-msg{font:400 14px 'PRJX Poppins',system-ui,sans-serif;color:#B9CBD2}.dr-msg b{color:#F3F8FA;font-weight:600}
.dr-acts{display:flex;gap:8px}
.dr-cancel{height:42px;padding:0 16px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:inherit;font:500 14px 'PRJX Poppins',system-ui,sans-serif;cursor:pointer}
.dr-apply{height:42px;padding:0 24px;border-radius:8px;border:0;cursor:pointer;font:400 12.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5)}
.dr-apply[disabled]{opacity:.4;cursor:default}
html[data-theme="light"] .dr-pop{background:#fff;color:#0B1A20;box-shadow:0 30px 70px rgba(20,60,90,.22)}
html[data-theme="light"] .dr-day{color:#0B1A20}html[data-theme="light"] .dr-day[disabled]{color:#C3D0D6}
html[data-theme="light"] .dr-day.sel{color:#04212A}
html[data-theme="light"] .dr-msg{color:#4A626B}html[data-theme="light"] .dr-msg b{color:#0B1A20}
html[data-theme="light"] .dr-tabs{background:#EEF4F6}html[data-theme="light"] .dr-tabs span{color:#4A626B}html[data-theme="light"] .dr-tabs span.on{color:#04212A}
@media (max-width:700px){.dr-months{grid-template-columns:1fr}.dr-pop{position:fixed;inset:auto 0 0 0;width:auto;border-radius:18px 18px 0 0;max-height:88vh;overflow:auto}.dr-btn{min-width:0;width:100%}}

/* Rental period line under the dates */
#cat-form .bar-foot .days{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#cat-form .bar-foot .days .rp-k{font:500 11px 'PRJX Poppins',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#cat-form .bar-foot .days .rp-d{font:600 14px 'PRJX Poppins',system-ui,sans-serif;color:var(--text)}
#cat-form .bar-foot .days .rp-d i{font-style:normal;color:#4FE9F0;margin:0 4px}
#cat-form .bar-foot .days .rp-c{font:400 13.5px 'PRJX Poppins',system-ui,sans-serif;color:var(--muted)}
#cat-form .bar-foot .days .rp-c b{font-weight:600;color:#4FE9F0;background:rgba(79,233,240,.10);padding:3px 9px;border-radius:999px;margin-inline-end:4px}
html[data-theme="light"] #cat-form .bar-foot .days .rp-c b{color:#0A8FA0;background:rgba(10,157,176,.10)}
html[data-theme="light"] #cat-form .bar-foot .days .rp-d i{color:#0A9DB0}
@media (max-width:700px){#cat-form > .field{flex:1 1 100%}#cat-form .dr-btn{width:100%}}
#cat-form .dr-field{flex:0 0 212px;min-width:0}
#cat-form .dr-btn{min-width:0;width:100%;white-space:nowrap;overflow:hidden}
#cat-form .dr-btn span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){#cat-form .dr-field{flex:1 1 100%}}

/* Rental at a glance: Delivery · rental days · Return */
#cat-form .bar-foot .days{display:block;flex:1 1 auto;min-width:0}
.rp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;font-family:'PRJX Poppins',system-ui,sans-serif}
.rp-end{display:flex;align-items:center;gap:10px}
.rp-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#4FE9F0;background:rgba(79,233,240,.10);flex:none}
.rp-t{display:flex;flex-direction:column;line-height:1.25}
.rp-t small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#3FE0C5;font-weight:600}
.rp-t b{font-size:15px;font-weight:600;color:var(--text)}
.rp-t em{font-style:normal;font-size:12.5px;color:var(--muted)}
.rp-mid{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.rp-blocks{display:flex;gap:4px;width:100%;max-width:300px}
.rp-blocks i{flex:1;height:10px;border-radius:3px}
.rp-blocks .rp-paid{background:linear-gradient(90deg,#4FF0E0,#38B6F5)}
.rp-blocks .rp-free{border:1.5px dashed rgba(63,224,197,.7);background:transparent}
.rp-mid b{font-size:15px;font-weight:600;color:#4FE9F0}
.rp-mid small{font-size:12px;color:var(--muted)}
html[data-theme="light"] .rp-ico{color:#0A9DB0;background:rgba(10,157,176,.10)}
html[data-theme="light"] .rp-t small{color:#0E9F7E}
html[data-theme="light"] .rp-mid b{color:#0A8FA0}
@media (max-width:700px){.rp{grid-template-columns:1fr 1fr;gap:12px}.rp-mid{grid-column:1 / -1;grid-row:1}.rp-end:last-child{justify-content:flex-end;text-align:end}}
.rp{max-width:860px}

/* ===== Bubbly touch: rounder shapes, springy hovers, floating bubbles ===== */
:root{--bub-ease:cubic-bezier(.34,1.56,.64,1)}
/* Rounder shapes */
.pill,.pill.sm,.pill.primary,.pill.outline,.start-btn,.tut-btn{border-radius:999px!important}
.input,#cat-form .input,.dr-btn,select.input,.pc-btn{border-radius:999px!important}
#cat-form{border-radius:28px!important}
.search.glass,#search-form{border-radius:999px!important}
#search-form button{border-radius:999px!important}
.card,.card.pc{border-radius:24px!important;overflow:hidden}
.catrow-item{border-radius:20px!important}
.arrival{border-radius:22px!important}
.bs-all,.bs-b{border-radius:999px!important}
.cr-arrow,.icon-btn{border-radius:999px!important}
.kicker{border-radius:999px}
.dr-pop,#dr-pop{border-radius:24px!important}
.rp-ico{border-radius:999px}
.rp-blocks i{border-radius:999px}
textarea.input{border-radius:20px!important}
/* Springy hovers */
.pill,.chip,.bs-all,.bs-b,.cr-arrow,.icon-btn,#search-form button,.pc-btn,.dr-day{transition:transform .35s var(--bub-ease),box-shadow .25s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.pill:hover,.chip:hover,.bs-all:hover,.bs-b:hover,.cr-arrow:hover,.icon-btn:hover,#search-form button:hover,.pc-btn:hover{transform:translateY(-2px) scale(1.04)}
.pill:active,.chip:active,.bs-all:active,.bs-b:active,.cr-arrow:active,.icon-btn:active,#search-form button:active,.card:active{transform:scale(.95);transition-duration:.12s}
.pill.primary:hover{box-shadow:0 10px 28px rgba(76,179,238,.45)}
.card,.catrow-item,.arrival{transition:transform .45s var(--bub-ease),box-shadow .3s ease,border-color .2s ease}
.card:hover,.catrow-item:hover,.arrival:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,140,210,.22)}
.dr-day:not(:disabled):hover{transform:scale(1.12)}
/* Floating bubbles */
.hero{position:relative}
#view-catalog{position:relative}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
#view-catalog > .bubbles{height:440px;z-index:2}
.bubbles i{position:absolute;bottom:-80px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0 5%,rgba(255,255,255,0) 14%),
    radial-gradient(circle at 50% 50%,rgba(79,233,240,0) 0 58%,rgba(79,233,240,.12) 66%,rgba(139,227,251,.55) 71%,rgba(139,227,251,0) 72%);
  box-shadow:0 0 14px rgba(79,233,240,.18),inset 0 0 10px rgba(139,227,251,.18);
  animation:bub-rise linear infinite;opacity:0}
.bubbles i:nth-child(1){left:6%;width:26px;height:26px;animation-duration:15s;animation-delay:0s}
.bubbles i:nth-child(2){left:18%;width:12px;height:12px;animation-duration:11s;animation-delay:3s}
.bubbles i:nth-child(3){left:31%;width:40px;height:40px;animation-duration:19s;animation-delay:6s}
.bubbles i:nth-child(4){left:46%;width:16px;height:16px;animation-duration:13s;animation-delay:1.5s}
.bubbles i:nth-child(5){left:58%;width:30px;height:30px;animation-duration:17s;animation-delay:8s}
.bubbles i:nth-child(6){left:69%;width:10px;height:10px;animation-duration:10s;animation-delay:4.5s}
.bubbles i:nth-child(7){left:78%;width:46px;height:46px;animation-duration:21s;animation-delay:2s}
.bubbles i:nth-child(8){left:88%;width:18px;height:18px;animation-duration:14s;animation-delay:9.5s}
.bubbles i:nth-child(9){left:95%;width:24px;height:24px;animation-duration:16s;animation-delay:5s}
@keyframes bub-rise{
  0%{transform:translate(0,0) scale(.8);opacity:0}
  10%{opacity:.85}
  50%{transform:translate(18px,-50vh) scale(1)}
  85%{opacity:.6}
  100%{transform:translate(-10px,-100vh) scale(1.08);opacity:0}}
#view-catalog > .bubbles i{animation-name:bub-rise-s}
@keyframes bub-rise-s{
  0%{transform:translate(0,0) scale(.8);opacity:0}
  12%{opacity:.7}
  50%{transform:translate(14px,-260px)}
  100%{transform:translate(-8px,-520px) scale(1.05);opacity:0}}
html[data-theme="light"] .bubbles i{background:radial-gradient(circle at 32% 28%,#fff 0 5%,rgba(255,255,255,0) 14%),radial-gradient(circle at 50% 50%,rgba(44,134,226,0) 0 58%,rgba(44,134,226,.10) 66%,rgba(44,134,226,.45) 71%,rgba(44,134,226,0) 72%);box-shadow:inset 0 0 10px rgba(76,179,238,.15)}
@media (max-width:700px){.bubbles i:nth-child(n+7){display:none}}
@media (prefers-reduced-motion:reduce){.bubbles{display:none}.pill:hover,.chip:hover,.card:hover,.catrow-item:hover,.arrival:hover,.bs-b:hover,.bs-all:hover{transform:none}}
/* Bubbly: product page */
.pd3-main{border-radius:28px!important}
.pd3-th{border-radius:16px!important}
.pd3-logo,.pd3-chip,.pd3-lc,.pd3-step,.pd3-add,.pd3-pdf,.pd3-rc-add{border-radius:999px!important}
.pd3-box{border-radius:28px!important}
.pd3-rc{border-radius:24px!important;overflow:hidden}
.pd3-step button{border-radius:999px}
.pd3-chip,.pd3-lc,.pd3-add,.pd3-pdf,.pd3-rc-add,.pd3-rc,.pd3-th{transition:transform .35s var(--bub-ease),box-shadow .25s ease,border-color .2s ease,background-color .2s ease}
.pd3-lc:hover,.pd3-add:hover,.pd3-pdf:hover,.pd3-rc-add:hover{transform:translateY(-2px) scale(1.03)}
.pd3-add:hover{box-shadow:0 12px 30px rgba(76,179,238,.45)}
.pd3-add:active,.pd3-lc:active,.pd3-pdf:active,.pd3-rc-add:active{transform:scale(.95);transition-duration:.12s}
.pd3-rc:hover{transform:translateY(-6px)}
.pd3-th:hover{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.pd3-lc:hover,.pd3-add:hover,.pd3-pdf:hover,.pd3-rc-add:hover,.pd3-rc:hover,.pd3-th:hover{transform:none}}
/* Readable type in the hub's top area: Michroma stays for the big title only */
.price-gate,.price-gate *,#cat-form,#cat-form .input,#cat-form select,#cat-form input::placeholder,#cat-form label,#chips .chip,#chips .chip small,.bs-lbl,.bs-all,#cat-count,.cat-count{font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important}
.price-gate .pg-txt b{font-size:17px;font-weight:600;letter-spacing:0}
.price-gate .pg-txt span{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}
.price-gate .pg-btns .pill{height:44px;padding:0 22px;font-size:14px!important;font-weight:600;letter-spacing:.02em;text-transform:none!important}
#cat-form label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
#cat-form .input,#cat-form select{font-size:15px;font-weight:500;letter-spacing:0}
#cat-form input::placeholder{font-weight:400;letter-spacing:0}
#chips .chip{font-size:14.5px;font-weight:500;letter-spacing:0}
#chips .chip small{font-size:12px;font-weight:500;opacity:.7}
html body .price-gate .pg-btns button.pill,html body .price-gate .pg-btns button.pill.primary{font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:.02em!important}

/* ===== Header breathing room ===== */
@media (min-width:1500px){
  .nav .wrap{max-width:none!important;padding-inline:clamp(40px,4vw,72px)!important;gap:40px}
  .nav .links{gap:clamp(34px,2.6vw,52px)!important;margin-inline-start:clamp(24px,3vw,64px)}
  .nav .nav-right{gap:clamp(30px,2.4vw,46px)!important;margin-inline-start:auto}
}

/* ===== Living logo: flowing aurora colours, a light glint, twinkling sparkles, soft glow ===== */
.has-logo .site-logo.logo-live{position:relative;display:block;aspect-ratio:3198/1374;width:auto}
.logo-live .lg-fill{position:absolute;inset:-2.911% -1.251%;display:block;
  -webkit-mask:url(../media/logo/prjx-logo-mask.svg) center/100% 100% no-repeat;mask:url(../media/logo/prjx-logo-mask.svg) center/100% 100% no-repeat;
  background:linear-gradient(110deg,#FFFFFF 0%,#9DF3FF 10%,#4FE9F0 22%,#3DE59A 34%,#4FE9F0 46%,#38B6F5 58%,#2C86E2 68%,#7FD8FF 80%,#FFFFFF 90%,#9DF3FF 100%);
  background-size:220% 100%;
  animation:lg-intro 1.4s cubic-bezier(.22,1,.36,1) .15s both,lg-flow 7s ease-in-out 1.5s infinite alternate}
.logo-live .lg-shine{position:absolute;inset:0;display:block;
  background:linear-gradient(105deg,transparent 0 40%,rgba(255,255,255,.95) 50%,transparent 60% 100%);
  background-size:300% 100%;background-position:120% 0;mix-blend-mode:overlay;
  animation:lg-shine 5.5s cubic-bezier(.45,0,.25,1) 1.2s infinite}
@keyframes lg-intro{0%{clip-path:inset(0 100% 0 0);filter:brightness(2.2)}70%{filter:brightness(1.4)}100%{clip-path:inset(0 0 0 0);filter:none}}
@keyframes lg-flow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes lg-shine{0%{background-position:120% 0}30%{background-position:-20% 0}100%{background-position:-20% 0}}
/* sparkles */
.logo-live .lg-spark{position:absolute;width:12%;aspect-ratio:1;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,rgba(157,243,255,.9) 22%,transparent 60%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  animation:lg-twinkle 5.5s ease-in-out infinite}
.logo-live .lg-spark.s1{left:56%;top:-14%;animation-delay:2.1s}
.logo-live .lg-spark.s2{left:93%;top:16%;width:8%;animation-delay:3.4s}
.logo-live .lg-spark.s3{left:-5%;top:58%;width:9%;animation-delay:4.6s}
@keyframes lg-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}8%{opacity:1;transform:scale(1) rotate(45deg)}16%{opacity:0;transform:scale(.3) rotate(90deg)}}
/* soft glow on the link follows the letter shapes */
.nav .brand.has-logo,.sf-logo.has-logo{animation:lg-glow 4s ease-in-out 1.5s infinite alternate}
@keyframes lg-glow{0%{filter:drop-shadow(0 0 3px rgba(79,233,240,.20))}100%{filter:drop-shadow(0 0 12px rgba(79,233,240,.55))}}
/* hover: everything speeds up and brightens */
.has-logo:hover .lg-fill{animation-duration:1.4s,1.6s}
.has-logo:hover .lg-shine{animation-duration:1.4s;animation-delay:0s}
.has-logo:hover .lg-spark{animation-duration:1.8s}
.nav .brand.has-logo:hover{filter:drop-shadow(0 0 16px rgba(79,233,240,.7)) brightness(1.1)!important}
/* light mode */
html[data-theme="light"] .logo-live .lg-fill{background-image:linear-gradient(110deg,#0B2E57 0%,#0A6FA8 12%,#0A9DB0 24%,#0E9F7E 36%,#0A9DB0 48%,#2C86E2 60%,#1A4F96 70%,#0A8FA0 82%,#0B2E57 92%,#0A6FA8 100%)}
html[data-theme="light"] .logo-live .lg-shine{mix-blend-mode:soft-light}
html[data-theme="light"] .logo-live .lg-spark{background:radial-gradient(circle,#fff 0 10%,#4CB3EE 26%,transparent 62%)}
html[data-theme="light"] .nav .brand.has-logo,html[data-theme="light"] .sf-logo.has-logo{animation-name:lg-glow-l}
@keyframes lg-glow-l{0%{filter:drop-shadow(0 0 1px rgba(10,157,176,.10))}100%{filter:drop-shadow(0 2px 7px rgba(10,157,176,.30))}}
@media (prefers-reduced-motion:reduce){.logo-live .lg-fill,.logo-live .lg-shine,.nav .brand.has-logo,.sf-logo.has-logo{animation:none!important}.logo-live .lg-shine,.logo-live .lg-spark{display:none}}

/* ===== Home: Live Solutions teaser + help card ===== */
#home-cta .cta-duo{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:stretch}
.cta-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 32px;border-radius:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.10);color:var(--text);text-decoration:none;
  font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;
  transition:transform .45s var(--bub-ease),box-shadow .3s ease,border-color .2s ease}
.cta-card h3{margin:2px 0 0;font:400 clamp(19px,1.6vw,24px)/1.3 var(--font-display);color:var(--text);position:relative;z-index:1}
.cta-card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:52ch;position:relative;z-index:1}
/* featured: gradient frame and soft glow */
.cta-soon{border:1.5px solid transparent;
  background:linear-gradient(150deg,#0F2A3A,#0B1A28 55%,#0C1630) padding-box,
             linear-gradient(120deg,#4FE9F0,#3DE59A 35%,#2C86E2 70%,#4FE9F0) border-box;
  background-size:100% 100%,250% 100%;animation:cta-frame 8s linear infinite;
  box-shadow:0 18px 50px rgba(20,140,210,.18)}
@keyframes cta-frame{0%{background-position:0 0,0% 0}100%{background-position:0 0,250% 0}}
.cta-soon:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,160,220,.30)}
.cta-soon::after{content:"";position:absolute;inset:auto -10% -55% 35%;height:110%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(79,233,240,.22),rgba(61,229,154,.08) 45%,transparent 70%)}
.cta-soon .bubbles{z-index:0}
.cta-soon .bubbles i{animation-name:bub-rise-s}
.cta-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.cta-badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:#04222C;background:linear-gradient(90deg,#4FF0E0,#38B6F5)}
.cta-badge i{width:8px;height:8px;border-radius:50%;background:#04222C;animation:cta-pulse 1.6s ease-in-out infinite}
@keyframes cta-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.cta-kick{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#4FE9F0}
.cta-tags{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1;margin-top:2px}
.cta-tags span{height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;
  background:rgba(79,233,240,.08);border:1px solid rgba(79,233,240,.25);color:var(--text)}
.cta-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#4FE9F0;position:relative;z-index:1}
.cta-go svg{transition:transform .35s var(--bub-ease)}
.cta-soon:hover .cta-go svg{transform:translateX(6px)}
html[dir="rtl"] .cta-go svg{transform:scaleX(-1)}
html[dir="rtl"] .cta-soon:hover .cta-go svg{transform:scaleX(-1) translateX(6px)}
/* help card */
.cta-help:hover{transform:translateY(-4px);border-color:rgba(79,233,240,.35)}
.cta-ico{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;color:#4FE9F0;background:rgba(79,233,240,.10)}
.cta-help .cta-btn{margin-top:auto;height:46px;padding:0 22px;display:inline-flex;align-items:center;gap:9px;font:600 14.5px 'PRJX Poppins',system-ui,sans-serif!important;
  letter-spacing:.01em!important;text-transform:none!important;color:#04222C!important;background:linear-gradient(90deg,#4FF0E0,#38B6F5)!important;border:0!important}
.cta-help .cta-btn:hover{box-shadow:0 10px 28px rgba(76,179,238,.45)}
/* light mode */
html[data-theme="light"] .cta-card{background:#fff;border-color:rgba(10,60,90,.10);box-shadow:0 10px 30px rgba(10,60,90,.06)}
html[data-theme="light"] .cta-soon{background:linear-gradient(150deg,#F2FBFE,#E8F6FB 60%,#EAF1FC) padding-box,linear-gradient(120deg,#0A9DB0,#0E9F7E 35%,#2C86E2 70%,#0A9DB0) border-box;background-size:100% 100%,250% 100%}
html[data-theme="light"] .cta-kick,html[data-theme="light"] .cta-go,html[data-theme="light"] .cta-ico{color:#0A8FA0}
html[data-theme="light"] .cta-tags span{background:rgba(10,157,176,.07);border-color:rgba(10,157,176,.25)}
@media (max-width:860px){#home-cta .cta-duo{grid-template-columns:1fr}.cta-card{padding:24px 22px}}
@media (prefers-reduced-motion:reduce){.cta-soon,.cta-badge i{animation:none}.cta-card:hover{transform:none}}
#home-cta .cta-card p,#home-cta .cta-card .cta-tags span,#home-cta .cta-card .cta-go,#home-cta .cta-card .cta-badge,#home-cta .cta-card .cta-kick{font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:0}#home-cta .cta-card .cta-kick{letter-spacing:.12em}
#home-cta .cta-card p{font-size:15.5px!important;line-height:1.6!important;max-width:60ch}
/* ===== Header + ticker: frosted glass that lets the page colours through ===== */
html body .nav.solid{
  background:linear-gradient(180deg,rgba(14,40,56,.90),rgba(12,34,50,.76))!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 1px 0 rgba(79,233,240,.14),0 12px 30px -18px rgba(0,0,0,.5)!important}
html body .band,html body #view-home .band.stuck{
  background:linear-gradient(90deg,rgba(79,233,240,.10),rgba(61,229,154,.08) 50%,rgba(44,134,226,.10))!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-color:rgba(79,233,240,.14)!important}
html body #view-home .band.stuck{background:linear-gradient(90deg,rgba(16,50,66,.82),rgba(14,48,54,.78) 50%,rgba(16,40,66,.82))!important;box-shadow:0 12px 26px -18px rgba(0,0,0,.55)!important}
html body .nav-util{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important}
html[data-theme="light"] body .nav.solid{background:linear-gradient(180deg,rgba(246,252,254,.86),rgba(232,246,250,.82))!important;box-shadow:0 1px 0 rgba(10,120,150,.12),0 10px 26px -18px rgba(20,60,90,.25)!important}
html[data-theme="light"] body .band,html[data-theme="light"] body #view-home .band.stuck{background:linear-gradient(90deg,rgba(10,157,176,.08),rgba(14,159,126,.06) 50%,rgba(44,134,226,.08))!important;border-color:rgba(10,120,150,.12)!important}
html[data-theme="light"] body #view-home .band.stuck{background:linear-gradient(90deg,rgba(240,250,252,.88),rgba(230,247,244,.86) 50%,rgba(236,244,252,.88))!important}
html[data-theme="light"] body .nav-util{background:rgba(255,255,255,.6)!important;border-color:rgba(10,60,90,.12)!important}
html body .nav.solid,html body .band,html body #view-home .band.stuck{-webkit-backdrop-filter:blur(26px) saturate(1.5)!important;backdrop-filter:blur(26px) saturate(1.5)!important}

/* Help card: WhatsApp button in WhatsApp green */
#home-cta .cta-help .cta-btn.cta-wa{background:#25D366!important;color:#fff!important;gap:10px}
#home-cta .cta-help .cta-btn.cta-wa:hover{background:#1EBE5A!important;box-shadow:0 10px 28px rgba(37,211,102,.40)}
#home-cta .cta-help .cta-ico{color:#25D366;background:rgba(37,211,102,.12)}

/* ===== Live Solutions coming-soon page ===== */
#view-solutions.soon-mode{padding-top:calc(var(--nav-h,116px) + 36px)}
#view-solutions .soon-panel{margin:0 0 40px;padding:clamp(26px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  border:1.5px solid transparent;border-radius:32px;
  background:linear-gradient(150deg,#0F2A3A,#0B1A28 55%,#0C1630) padding-box,linear-gradient(120deg,#4FE9F0,#3DE59A 35%,#2C86E2 70%,#4FE9F0) border-box;
  background-size:100% 100%,250% 100%;animation:cta-frame 9s linear infinite;box-shadow:0 24px 60px rgba(20,140,210,.16)}
#view-solutions .soon-panel::after{content:"";position:absolute;inset:auto -15% -60% 30%;height:120%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(79,233,240,.18),rgba(61,229,154,.06) 45%,transparent 70%)}
#view-solutions .soon-panel > .bubbles{z-index:0}
#view-solutions .soon-panel > .bubbles i{animation-name:bub-rise-s}
.soon-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
#view-solutions .soon-panel h1{font-size:clamp(30px,3.4vw,54px);line-height:1.12;max-width:16ch;margin:0}
#view-solutions .soon-panel p,#view-solutions .soon-btns .pill,#view-solutions .soon-badge,#view-solutions .soon-steps,#view-solutions .soon-tile b,#view-solutions .soon-tile small{font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
#view-solutions .soon-panel p{font-size:16.5px!important;line-height:1.65;max-width:54ch;color:var(--muted)}
#view-solutions .soon-badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 15px;font-size:13px!important;font-weight:600;color:#04222C;background:linear-gradient(90deg,#4FF0E0,#38B6F5);border-radius:999px}
#view-solutions .soon-badge i{width:8px;height:8px;border-radius:50%;background:#04222C;animation:cta-pulse 1.6s ease-in-out infinite}
#view-solutions .soon-btns{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0}
#view-solutions .soon-btns .pill{height:50px;padding:0 24px;display:inline-flex;align-items:center;gap:10px;font-size:15px!important;font-weight:600}
#view-solutions .soon-wa{background:#25D366!important;color:#fff!important;border:0!important}
#view-solutions .soon-wa:hover{background:#1EBE5A!important;box-shadow:0 10px 28px rgba(37,211,102,.40)}
.soon-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--muted)}
.soon-steps li{display:inline-flex;align-items:center;gap:10px}
.soon-steps li::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#4FE9F0,#3DE59A)}
.soon-steps li + li::after{content:none}
.soon-steps li + li{padding-inline-start:10px;border-inline-start:1px solid rgba(255,255,255,.12)}
/* package tiles */
#view-solutions .soon-grid{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
#view-solutions .soon-tile{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:22px;border:1px solid rgba(79,233,240,.18);background:rgba(255,255,255,.035);
  font:inherit;color:var(--text);transition:transform .45s var(--bub-ease),border-color .2s ease,background .2s ease}
#view-solutions .soon-tile:hover{transform:translateY(-4px);border-color:rgba(79,233,240,.45);background:rgba(79,233,240,.06)}
.soon-tile .st-ico{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;color:#4FE9F0;background:rgba(79,233,240,.10);margin-bottom:6px}
#view-solutions .soon-tile b{font-size:15.5px;font-weight:600;color:var(--text)}
#view-solutions .soon-tile small{font-size:13px;line-height:1.5;color:var(--muted)}
/* light mode */
html[data-theme="light"] #view-solutions .soon-panel{background:linear-gradient(150deg,#F2FBFE,#E8F6FB 60%,#EAF1FC) padding-box,linear-gradient(120deg,#0A9DB0,#0E9F7E 35%,#2C86E2 70%,#0A9DB0) border-box;background-size:100% 100%,250% 100%}
html[data-theme="light"] #view-solutions .soon-tile{background:#fff;border-color:rgba(10,157,176,.18)}
html[data-theme="light"] .soon-tile .st-ico{color:#0A8FA0;background:rgba(10,157,176,.10)}
html[data-theme="light"] .soon-steps li + li{border-color:rgba(10,60,90,.14)}
/* smaller screens */
@media (max-width:1100px){#view-solutions .soon-panel{grid-template-columns:1fr}#view-solutions .soon-panel h1{max-width:20ch}}
@media (max-width:600px){
  #view-solutions.soon-mode{padding-top:calc(var(--nav-h,150px) + 20px)}
  #view-solutions .soon-panel{border-radius:26px;padding:24px 20px}
  #view-solutions .soon-btns{width:100%}
  #view-solutions .soon-btns .pill{width:100%;justify-content:center;padding:0 16px}
  #view-solutions .soon-grid{grid-template-columns:1fr}
  #view-solutions .soon-tile{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;padding:16px}
  #view-solutions .soon-tile .st-ico{margin:0}
  #view-solutions .soon-tile b{flex:1}
  #view-solutions .soon-tile small{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){#view-solutions .soon-panel,#view-solutions .soon-badge i{animation:none}}
html body #view-solutions .soon-panel.glass{background:linear-gradient(150deg,#0F2A3A,#0B1A28 55%,#0C1630) padding-box,linear-gradient(120deg,#4FE9F0,#3DE59A 35%,#2C86E2 70%,#4FE9F0) border-box!important;background-size:100% 100%,250% 100%!important;border:1.5px solid transparent!important}
html[data-theme="light"] body #view-solutions .soon-panel.glass{background:linear-gradient(150deg,#F2FBFE,#E8F6FB 60%,#EAF1FC) padding-box,linear-gradient(120deg,#0A9DB0,#0E9F7E 35%,#2C86E2 70%,#0A9DB0) border-box!important;background-size:100% 100%,250% 100%!important}
@media (max-width:600px){.soon-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;width:100%}.soon-steps li + li{padding-inline-start:0;border-inline-start:0}}

/* ===== Coming-soon: calmer panel + real kit list ===== */
html body #view-solutions .soon-panel.glass{animation:none!important;background:#0E1820!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important;align-items:start}
#view-solutions .soon-panel::after{content:none!important}
html[data-theme="light"] body #view-solutions .soon-panel.glass{background:#fff!important;border-color:rgba(10,60,90,.10)!important}
#view-solutions .soon-badge{background:none!important;color:#4FE9F0!important;border:1px solid rgba(79,233,240,.45);height:30px}
#view-solutions .soon-badge i{background:#4FE9F0!important;animation:none!important}
html[data-theme="light"] #view-solutions .soon-badge{color:#0A8FA0!important;border-color:rgba(10,143,160,.45)}
html[data-theme="light"] #view-solutions .soon-badge i{background:#0A8FA0!important}
.soon-kit{position:relative;z-index:1;min-width:0;padding-top:6px}
#view-solutions .sk-h{margin:0 0 6px!important;font-size:12px!important;font-weight:600;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--muted)}
#view-solutions .soon-rows{list-style:none;margin:0;padding:0;display:block}
#view-solutions .soon-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 4px;border-top:1px solid rgba(255,255,255,.08);transition:background .2s ease}
#view-solutions .soon-row:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
#view-solutions .soon-row:hover{background:rgba(255,255,255,.025)}
.sr-n{font:500 13px var(--font-mono,ui-monospace,monospace);color:#4FE9F0;letter-spacing:.06em}
.sr-t{display:flex;flex-direction:column;gap:3px;min-width:0}
#view-solutions .sr-t b{font:600 17px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--text)}
#view-solutions .sr-t small{font:400 13px 'PRJX Poppins',system-ui,sans-serif;color:var(--muted);letter-spacing:.01em}
.sr-gear{display:flex;align-items:flex-end;height:58px}
.sr-gear img{height:50px;width:auto;max-width:84px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:transform .4s var(--bub-ease)}
.sr-gear img + img{margin-inline-start:-14px}
#view-solutions .soon-row:hover .sr-gear img:nth-child(1){transform:translate(-6px,-3px)}
#view-solutions .soon-row:hover .sr-gear img:nth-child(2){transform:translateY(-6px)}
#view-solutions .soon-row:hover .sr-gear img:nth-child(3){transform:translate(6px,-3px)}
html[data-theme="light"] #view-solutions .soon-row{border-color:rgba(10,60,90,.10)}
html[data-theme="light"] #view-solutions .soon-row:hover{background:rgba(10,60,90,.03)}
html[data-theme="light"] .sr-n{color:#0A8FA0}
html[data-theme="light"] .sr-gear img{filter:drop-shadow(0 6px 10px rgba(20,60,90,.18))}
@media (max-width:600px){
  #view-solutions .soon-row{grid-template-columns:30px minmax(0,1fr);row-gap:10px;padding:16px 2px}
  .sr-gear{grid-column:2;height:46px}
  .sr-gear img{height:40px;max-width:70px}
}
html body #view-solutions .soon-rows > li.soon-row{border:0!important;border-top:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;padding:20px 4px!important;letter-spacing:0!important;text-transform:none!important;font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important;color:var(--text);background:none}
html body #view-solutions .soon-rows > li.soon-row:last-child{border-bottom:1px solid rgba(255,255,255,.08)!important}
html body #view-solutions .soon-rows > li.soon-row:hover{background:rgba(255,255,255,.025)}
html body #view-solutions .soon-rows .sr-t b,html body #view-solutions .soon-rows .sr-t small{letter-spacing:0!important}
html[data-theme="light"] body #view-solutions .soon-rows > li.soon-row{border-top-color:rgba(10,60,90,.10)!important}
html[data-theme="light"] body #view-solutions .soon-rows > li.soon-row:last-child{border-bottom-color:rgba(10,60,90,.10)!important}
@media (max-width:600px){html body #view-solutions .soon-rows > li.soon-row{padding:16px 2px!important}}

/* One field for both dates */
#cat-form .dr-field.dr-one{flex:0 0 300px}
.dr-one .dr-range{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.dr-one .dr-arrow{display:inline-block;color:#4FE9F0;font-weight:600}

html[data-theme="light"] .dr-one .dr-arrow{color:#0A8FA0}
@media (max-width:700px){#cat-form .dr-field.dr-one{flex:1 1 100%}}
/* Hub cards: same gradient button as the product page */
.card .pc-btn:not(.ghost){height:46px;font:400 12.5px var(--font-display);letter-spacing:.12em;color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5)}
.card .pc-btn:not(.ghost):hover{filter:brightness(1.07);box-shadow:0 12px 30px rgba(76,179,238,.45)}

/* Hub cards: Details + Add to truck side by side, bold Readex Pro capitals (also on the product page) */
.card .pc-acts{display:flex;gap:10px;margin-top:16px;align-items:stretch}
.card .pc-acts .pc-btn{margin-top:0;flex:1 1 auto;min-width:0}
.card .pc-det{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(79,233,240,.45);color:#C6F7FF;text-decoration:none;background:rgba(79,233,240,.06);
  transition:transform .35s var(--bub-ease),background .2s ease,border-color .2s ease}
.card .pc-det:hover{background:rgba(79,233,240,.14);border-color:rgba(79,233,240,.8);transform:translateY(-2px)}
.card .pc-det:focus-visible{outline:2px solid #C6F7FF;outline-offset:2px}
html[data-theme="light"] .card .pc-det{color:#0B6F7A;border-color:rgba(11,143,154,.5);background:rgba(11,143,154,.05)}
html body .card .pc-btn,html body .card .pc-det,html body .pd3-add{font:600 14px 'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important}
html body .card .pc-det{font-size:13px!important}
html[lang="ar"] body .card .pc-btn,html[lang="ar"] body .card .pc-det,html[lang="ar"] body .pd3-add{letter-spacing:0!important}
html body .card .pc-btn.in{font-size:13px!important;letter-spacing:.03em!important;padding:0 8px}html body .card .pc-det{padding:0 16px}
/* ===== Crisper corners on buttons and fields (pills kept only for tags and filter chips) ===== */
html body .pill,html body .pill.sm,html body .pill.primary,html body .pill.outline,html body .pill.glass,html body .start-btn,html body .tut-btn,
html body .card .pc-btn,html body .card .pc-det,
html body .pd3-add,html body .pd3-pdf,html body .pd3-rc-add,html body .pd3-lc,html body .pd3-step,
html body #home-cta .cta-btn,html body #view-solutions .soon-btns .pill,
html body .price-gate .pg-btns .pill{border-radius:999px!important}
html body .input,html body #cat-form .input,html body .dr-btn,html body select.input{border-radius:999px!important}
html body .search.glass,html body #search-form{border-radius:999px!important}
html body #search-form button{border-radius:999px!important}
html body .card,html body .card.pc{border-radius:24px!important}
/* a fine top highlight so the gradient buttons look finished */
html body .card .pc-btn:not(.ghost),html body .pd3-add{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,40,60,.12)}
html body .card .pc-btn:not(.ghost):hover,html body .pd3-add:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px rgba(76,179,238,.35)}
/* calmer hover: a small lift, no scaling (scaling blurs text) */
html body .pill:hover,html body .card .pc-btn:hover,html body .card .pc-det:hover,html body .pd3-add:hover,html body .pd3-pdf:hover,html body .pd3-rc-add:hover,html body .pd3-lc:hover{transform:translateY(-1px)!important}

/* Bubbly again: fully round buttons, keeping the polished finish and calm hover */
html body .card .pc-det{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* ===== Rental bar at the bottom: solid, simple, same buttons and fonts as the cards ===== */
html body .cartbar{width:min(720px,calc(100% - 32px));display:flex;align-items:center;gap:14px;padding:9px 9px 9px 10px;border-radius:999px;
  background:#0F1920!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 18px 44px rgba(0,0,0,.50)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;font-family:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif}
html[dir="rtl"] body .cartbar{padding:9px 10px 9px 9px}
.cartbar .cb-ico{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#4FE9F0;background:rgba(79,233,240,.10)}
.cartbar .cb-ico b{position:absolute;top:-3px;inset-inline-end:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  font:700 11px 'PRJX Poppins',system-ui,sans-serif;color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5);border:2px solid #0F1920}
html body .cartbar #cartbar-text{flex:1 1 auto;min-width:0;font:600 15px/1.3 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important;color:var(--text);letter-spacing:0}
html body .cartbar #cartbar-text small{display:block;margin-top:2px;font:400 13px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif!important;color:#8FA3AD;letter-spacing:0}
html body .cartbar .hold-chip{flex:none;margin:0;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:999px;
  font:600 13.5px 'PRJX Poppins',system-ui,sans-serif!important;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--hc2);background:color-mix(in srgb,var(--hc) 12%,transparent)}
html body .cartbar .hold-chip svg{flex:none}
html body .cartbar #cartbar-open{flex:none;height:46px;padding:0 22px;border:0;border-radius:999px!important;color:#04212A!important;
  background:linear-gradient(90deg,#4FF0E0,#38B6F5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
  font:600 13.5px 'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important}
html body .cartbar #cartbar-open:hover{transform:translateY(-1px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px rgba(76,179,238,.35)!important}
html[lang="ar"] body .cartbar #cartbar-open{letter-spacing:0!important}
html[data-theme="light"] body .cartbar{background:#fff!important;border-color:rgba(10,60,90,.10)!important;box-shadow:0 16px 40px rgba(20,60,90,.16)!important}
html[data-theme="light"] .cartbar .cb-ico{color:#0A8FA0;background:rgba(10,157,176,.10)}
html[data-theme="light"] .cartbar .cb-ico b{border-color:#fff}
html[data-theme="light"] body .cartbar #cartbar-text small{color:var(--muted)}
@media (max-width:600px){
  html body .cartbar{flex-wrap:wrap;border-radius:24px;gap:10px 12px;padding:10px}
  html body .cartbar #cartbar-text{flex:1 1 0}
  html body .cartbar #cartbar-open{flex:1 1 100%;order:5}
  html body .cartbar .hold-chip{height:30px;padding:0 10px;font-size:12.5px!important}
}
@media (max-width:600px){body.has-cartbar .assist,body.has-cartbar .wa-float{bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}}

/* Shown only when the site falls back to sample data, with the reason */
#demo-note{position:fixed;z-index:60;left:16px;right:16px;top:calc(var(--nav-h,100px) + 10px);margin:0 auto;max-width:760px;display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px 12px 16px;border-radius:16px;background:#2A1E0C;border:1px solid rgba(242,169,59,.55);color:#FFE2B0;box-shadow:0 16px 40px rgba(0,0,0,.45);
  font:400 14px/1.5 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif}
#demo-note b{flex:none;font-weight:600;color:#FFC768}
#demo-note span{flex:1}
#demo-note button{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:inherit;font-size:16px;line-height:1;cursor:pointer}
html[data-theme="light"] #demo-note{background:#FFF6E6;color:#6B4500;border-color:rgba(214,137,16,.5);box-shadow:0 14px 34px rgba(20,60,90,.14)}
html[data-theme="light"] #demo-note b{color:#A15C00}
#demo-note small{display:block;margin-top:2px;opacity:.8;font-size:12.5px}

/* ===== Light / dark switch: a circle grows from the button with a glowing edge ===== */
html.theme-vt::view-transition-old(root),html.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-vt::view-transition-old(root){z-index:1}
html.theme-vt::view-transition-new(root){z-index:2}
html.theme-vt::view-transition-group(theme-ring){z-index:3;animation:none}
@property --rr{syntax:"<length>";inherits:false;initial-value:0px}
.theme-ring{position:fixed;inset:0;z-index:2147483000;pointer-events:none;view-transition-name:theme-ring;--rr:0px;
  background:radial-gradient(circle at var(--tvx) var(--tvy),transparent calc(var(--rr) - 70px),rgba(79,233,240,.10) calc(var(--rr) - 40px),rgba(79,233,240,.45) calc(var(--rr) - 8px),rgba(235,255,255,.95) var(--rr),rgba(56,182,245,.40) calc(var(--rr) + 6px),transparent calc(var(--rr) + 46px))}
.theme-ring.to-light{background:radial-gradient(circle at var(--tvx) var(--tvy),transparent calc(var(--rr) - 70px),rgba(255,214,140,.10) calc(var(--rr) - 40px),rgba(255,206,120,.45) calc(var(--rr) - 8px),rgba(255,255,255,.98) var(--rr),rgba(255,190,90,.40) calc(var(--rr) + 6px),transparent calc(var(--rr) + 46px))}
html.theme-vt::view-transition-new(theme-ring),html.theme-vt::view-transition-old(theme-ring){animation:none}
.themebtn.tv-pop{animation:tv-pop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes tv-pop{0%{transform:scale(.8) rotate(-90deg)}60%{transform:scale(1.15) rotate(10deg)}100%{transform:none}}
.themebtn.tv-pop::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;animation:tv-ripple .7s ease-out forwards;box-shadow:0 0 0 0 rgba(79,233,240,.6)}
@keyframes tv-ripple{to{box-shadow:0 0 0 14px rgba(79,233,240,0)}}
.themebtn{position:relative}

/* ===== Header after scrolling: floating capsule, hides while scrolling down ===== */
.nav{transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease}
.nav.nav-hide{transform:translateY(calc(-100% - 24px))}
#view-home .band{top:var(--nav-stick,var(--nav-h,72px));transition:top .45s cubic-bezier(.22,1,.36,1),padding .25s ease,background .25s ease,box-shadow .25s ease}
@media (min-width:1101px){
  html body .nav.solid{background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav .wrap{transition:max-width .5s cubic-bezier(.22,1,.36,1),margin .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),border-radius .5s ease,background .4s ease,box-shadow .4s ease,border-color .4s ease;border:1px solid transparent}
  html body .nav.solid .wrap{max-width:min(1380px,calc(100% - 48px))!important;margin:12px auto 0!important;padding-block:8px!important;padding-inline:26px 10px!important;border-radius:999px;
    background:linear-gradient(180deg,rgba(18,48,66,.82),rgba(12,32,48,.78));border-color:rgba(79,233,240,.20);
    box-shadow:0 18px 44px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 0 30px -10px rgba(79,233,240,.35);
    -webkit-backdrop-filter:blur(22px) saturate(1.5)!important;backdrop-filter:blur(22px) saturate(1.5)!important}
  html[dir="rtl"] body .nav.solid .wrap{padding-inline:10px 26px!important}
  .nav .brand.has-logo .site-logo{transition:height .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
  html body .nav.solid .brand.has-logo .site-logo{height:44px!important;transform:none!important}
  html body .nav.solid .acct small,html body .nav.solid .cart-lab small:not(.truck-time){display:none}
  html[data-theme="light"] body .nav.solid .wrap{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(240,249,252,.82));border-color:rgba(10,143,160,.18);
    box-shadow:0 16px 40px -14px rgba(20,60,90,.25),0 0 26px -12px rgba(10,157,176,.35)}
  /* the moving ticker becomes a slim capsule too, just under the header */
  html body #view-home .band.stuck{margin-inline:auto;max-width:min(1380px,calc(100% - 48px));border-radius:999px;border:1px solid rgba(79,233,240,.16)!important;overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.nav,.nav .wrap,#view-home .band{transition:none}}
/* ===== Capsule polish: everything on one centre line, even spacing, solid glass ===== */
@media (min-width:1101px){
  html body .nav.solid .wrap{max-width:min(1320px,calc(100% - 48px))!important;height:62px;padding-block:0!important;padding-inline:24px 8px!important;gap:0!important;align-items:center!important;
    background:linear-gradient(180deg,rgba(17,44,60,.94),rgba(11,30,44,.92))!important}
  html[dir="rtl"] body .nav.solid .wrap{padding-inline:8px 24px!important}
  html[data-theme="light"] body .nav.solid .wrap{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(243,250,252,.93))!important}
  html body .nav.solid .brand.has-logo{padding:0!important;margin:0!important;align-self:center}
  html body .nav.solid .brand.has-logo .site-logo{height:40px!important}
  /* menu links: centred text, underline kept just under the words */
  html body .nav.solid .links{gap:28px!important;margin-inline-start:40px!important;align-items:center!important;height:100%}
  html body .nav.solid .links a{padding:4px 0!important;font-size:11.5px;line-height:1!important;position:relative}
  /* right side: same centre line and even gaps */
  html body .nav.solid .nav-right{gap:6px!important;margin-inline-start:auto!important;align-items:center!important;height:100%}
  html body .nav.solid .acct,html body .nav.solid .cartbtn{height:44px;padding:0 12px!important;align-items:center!important;border-radius:999px}
  html body .nav.solid .acct .two,html body .nav.solid .cart-lab{align-self:center!important;margin:0!important;padding:0!important;justify-content:center}
  html body .nav.solid .acct b,html body .nav.solid .cart-lab b{font-size:11.5px!important;line-height:1!important}
  html body .nav.solid #nav-me i{width:26px;height:26px;flex:none}
  html body .nav.solid .cart-ico svg.truck{width:36px;height:25px}
  html body .nav.solid .acct:hover,html body .nav.solid .cartbtn:hover{background:rgba(255,255,255,.06)}
  html[data-theme="light"] body .nav.solid .acct:hover,html[data-theme="light"] body .nav.solid .cartbtn:hover{background:rgba(10,60,90,.05)}
  html body .nav.solid .nav-util{margin-inline-start:6px!important;height:44px;border-radius:999px!important;padding:0 6px}
  html body #view-home .band.stuck{max-width:min(1320px,calc(100% - 48px))}
}
/* ===== Capsule fit on real screens: soft fade behind it, room for long names ===== */
@media (min-width:1101px){
  /* content scrolling under the capsule fades out instead of showing sharp in the gap above it */
  html body .nav.solid{background:linear-gradient(180deg,rgba(9,22,32,.92) 0,rgba(9,22,32,.70) 45%,rgba(9,22,32,0) 100%)!important;padding-bottom:18px}
  html[data-theme="light"] body .nav.solid{background:linear-gradient(180deg,rgba(236,245,249,.95) 0,rgba(236,245,249,.72) 45%,rgba(236,245,249,0) 100%)!important}
  html body .nav.solid .wrap{max-width:min(1440px,calc(100% - 48px))!important}
  /* always a clear gap between the menu and the account side */
  html body .nav.solid .links{gap:24px!important;margin-inline-end:28px!important;flex:none}
  html body .nav.solid .nav-right{flex:0 1 auto;min-width:0}
  /* long names are shortened instead of squeezing the menu */
  html body .nav.solid #nav-me{min-width:0}
  html body .nav.solid #nav-me .two{min-width:0}
  html body .nav.solid #nav-acct{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:1101px) and (max-width:1380px){
  html body .nav.solid .links{gap:18px!important;margin-inline-start:24px!important;margin-inline-end:16px!important}
  html body .nav.solid #nav-acct{max-width:110px}
  html body .nav.solid .acct,html body .nav.solid .cartbtn{padding:0 8px!important}
}
@media (min-width:1500px){html body .nav.solid #nav-acct{max-width:240px}}
/* ===== Forgot password (sign-in window) ===== */
#auth .auth-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#auth .auth-forgot,#auth .auth-back{background:none;border:0;padding:0;cursor:pointer;color:#4FE9F0;font:500 13px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;letter-spacing:0;text-transform:none}
#auth .auth-forgot:hover,#auth .auth-back:hover{text-decoration:underline}
#auth .auth-back{align-self:flex-start}
#auth .auth-sent{margin:0;padding:12px 14px;border-radius:14px;background:rgba(61,229,154,.10);border:1px solid rgba(61,229,154,.35);color:var(--text);font:400 14px/1.55 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif}
html[data-theme="light"] #auth .auth-forgot,html[data-theme="light"] #auth .auth-back{color:#0A8FA0}
/* ===== My Profile › Login & security ===== */
#sec-security .sec-body{display:flex;flex-direction:column}
#sec-security .sec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
#sec-security .sec-row:first-child{border-top:0;padding-top:4px}
#sec-security .sec-k{display:flex;flex-direction:column;gap:3px;min-width:0}
#sec-security .sec-k b{font:600 15px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--text)}
#sec-security .sec-k span{font:400 14px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--muted);overflow-wrap:anywhere}
#sec-security .sec-row .pill.sm{flex:none;height:38px;padding:0 18px;font:600 13px 'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:.04em!important;text-transform:none!important}
#sec-security .sec-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;padding:4px 0 18px}
#sec-security .sec-form .sec-note,#sec-security .sec-form .err,#sec-security .sec-form .sec-acts{grid-column:1 / -1}
#sec-security .sec-note{margin:0;font:400 13.5px/1.55 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--muted)}
#sec-security .sec-note .link{background:none;border:0;padding:0;color:#4FE9F0;cursor:pointer;font:inherit;text-decoration:underline}
#sec-security .sec-acts{display:flex;justify-content:flex-end;align-items:center;gap:16px}
#sec-security .sec-acts .link{background:none;border:0;color:var(--muted);cursor:pointer;font:500 14px 'PRJX Poppins',system-ui,sans-serif}
#sec-security .sec-acts .pill{height:44px;padding:0 22px}
#sec-security .sec-code{font:600 22px/1 ui-monospace,Consolas,monospace!important;letter-spacing:.45em;text-align:center;direction:ltr}
#sec-security .sec-devs{list-style:none;margin:0;padding:0 0 4px;display:flex;flex-direction:column;gap:8px}
#sec-security .sec-devs li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
#sec-security .sec-dev-ico{font-size:18px;line-height:1}
#sec-security .sec-devs li > span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
#sec-security .sec-devs b{font:600 14px 'PRJX Poppins',system-ui,sans-serif;color:var(--text)}
#sec-security .sec-devs small{font:400 12.5px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--muted)}
#sec-security .sec-devs em{font-style:normal;flex:none;font:600 12px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5);padding:4px 10px;border-radius:999px}
#sec-security .sec-dev-head{padding-bottom:10px}
html[data-theme="light"] #sec-security .sec-row{border-color:rgba(10,60,90,.10)}
html[data-theme="light"] #sec-security .sec-devs li{background:rgba(10,60,90,.03);border-color:rgba(10,60,90,.08)}
html[data-theme="light"] #sec-security .sec-note .link{color:#0A8FA0}
@media (max-width:600px){#sec-security .sec-row{flex-wrap:wrap}#sec-security .sec-acts{flex-direction:column-reverse;align-items:stretch}#sec-security .sec-acts .pill{justify-content:center}}
html body #sec-security .sec-acts .pill,html body #auth #auth-go{font:600 14px 'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important}html[lang="ar"] body #sec-security .sec-acts .pill,html[lang="ar"] body #auth #auth-go{letter-spacing:0!important}

/* ===== Moving between pages ===== */
html.page-vt .nav{view-transition-name:site-nav}
.nav .links{position:relative}
html body .nav .links a{border-bottom-color:transparent!important}
.nav .nav-ink{position:absolute;left:0;bottom:-2px;height:2px;width:0;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,#4FF0E0,#38B6F5);box-shadow:0 0 10px rgba(79,233,240,.7);
  transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),opacity .3s}
html.page-vt .nav .nav-ink{view-transition-name:nav-ink}
html[data-theme="light"] .nav .nav-ink{background:linear-gradient(90deg,#0A9DB0,#2C86E2);box-shadow:0 0 8px rgba(10,157,176,.4)}
html.page-vt::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html.page-vt::view-transition-group(nav-ink){animation-duration:.55s;z-index:5}
html.page-vt::view-transition-group(site-nav){z-index:4}
html.page-vt::view-transition-old(site-nav){animation:none;opacity:0}
html.page-vt::view-transition-new(site-nav){animation:none}
html.page-vt::view-transition-old(root){animation:vt-out .42s cubic-bezier(.4,0,.2,1) both}
html.page-vt::view-transition-new(root){animation:vt-in .62s cubic-bezier(.22,1,.36,1) both}
html.page-vt.vt-back::view-transition-old(root){animation-name:vt-out-back}
html.page-vt.vt-back::view-transition-new(root){animation-name:vt-in-back}
html.page-vt.vt-zoom-in::view-transition-old(root){animation:vt-zoom-out-old .5s cubic-bezier(.4,0,.2,1) both}
html.page-vt.vt-zoom-in::view-transition-new(root){animation:vt-zoom-in-new .62s cubic-bezier(.22,1,.36,1) both}
html.page-vt.vt-zoom-out::view-transition-old(root){animation:vt-zoom-in-old .45s cubic-bezier(.4,0,.2,1) both}
html.page-vt.vt-zoom-out::view-transition-new(root){animation:vt-zoom-out-new .62s cubic-bezier(.22,1,.36,1) both}
html.page-vt::view-transition-group(pd-photo){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.9,.25,1);z-index:3}
html.page-vt::view-transition-old(pd-photo),html.page-vt::view-transition-new(pd-photo){height:100%;object-fit:contain;animation-duration:.7s}
@keyframes vt-out{to{opacity:0;transform:translateX(-46px) scale(.985);filter:blur(6px)}}
@keyframes vt-in{from{opacity:0;transform:translateX(64px) scale(.985);filter:blur(6px)}35%{opacity:.85}}
@keyframes vt-out-back{to{opacity:0;transform:translateX(46px) scale(.985);filter:blur(6px)}}
@keyframes vt-in-back{from{opacity:0;transform:translateX(-64px) scale(.985);filter:blur(6px)}35%{opacity:.85}}
@keyframes vt-zoom-out-old{to{opacity:0;transform:scale(.94);filter:blur(8px)}}
@keyframes vt-zoom-in-new{from{opacity:0;transform:scale(1.03);filter:blur(4px)}}
@keyframes vt-zoom-in-old{to{opacity:0;transform:scale(1.03);filter:blur(6px)}}
@keyframes vt-zoom-out-new{from{opacity:0;transform:scale(.95);filter:blur(6px)}}
/* right-to-left: "forward" glides the other way */
html[dir="rtl"].page-vt.vt-fwd::view-transition-old(root){animation-name:vt-out-back}
html[dir="rtl"].page-vt.vt-fwd::view-transition-new(root){animation-name:vt-in-back}
html[dir="rtl"].page-vt.vt-back::view-transition-old(root){animation-name:vt-out}
html[dir="rtl"].page-vt.vt-back::view-transition-new(root){animation-name:vt-in}
@media (prefers-reduced-motion:reduce){.nav .nav-ink{transition:none}}
/* ===== My Rentals · booking card (titles in the display font, everything else in Poppins) ===== */
.rental.rc{--pf:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;border-radius:24px;padding:24px 26px;gap:16px;font-family:var(--pf)}
.rc .rc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rc .rc-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rc .rc-ref{font:400 12px var(--font-display);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.rc .rc-id .kind,.rc .rc-id .paid,.rc .rc-id .example{font-family:var(--pf)!important;letter-spacing:.04em}
.rc .status{font-family:var(--pf)!important;font-weight:600;letter-spacing:0;text-transform:none}
.rc .rc-title{margin:0;font:400 clamp(19px,1.7vw,24px)/1.25 var(--font-display);color:var(--text)}
.rc .rc-place{margin:-8px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:400 13.5px var(--pf);color:var(--muted)}
.rc .rc-place svg{color:#4FE9F0;flex:none}
.rc .rc-place a{color:#4FE9F0;font-weight:600}
.rc .rc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.rc .rc-facts > div{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-inline-start:1px solid rgba(255,255,255,.07)}
.rc .rc-facts > div:first-child{border-inline-start:0}
.rc .rc-facts small{font:600 11px var(--pf);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rc .rc-facts span{font:400 13.5px var(--pf);color:var(--muted)}
.rc .rc-facts b{color:var(--text);font-weight:600}
.rc .rc-facts .rc-days{background:rgba(79,233,240,.06)}
.rc .rc-facts .rc-days b{color:#4FE9F0}
.rc .rc-cancel-line{margin:0;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);font:400 14px var(--pf);color:var(--muted)}
.rc .rc-cancel-line b{color:var(--text)}
/* stage track */
.rc .rc-track{position:relative;padding-top:64px}
.rc .rc-bubble{position:absolute;top:0;left:calc((var(--at) + .5) * 20%);transform:translateX(-24px);display:flex;align-items:center;gap:10px;white-space:nowrap}
html[dir="rtl"] .rc .rc-bubble{left:auto;right:calc((var(--at) + .5) * 20%);transform:translateX(24px)}
.rc .rc-ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#4FE9F0;background:radial-gradient(circle,rgba(79,233,240,.16),rgba(79,233,240,.05));border:1.5px solid rgba(79,233,240,.7);box-shadow:0 0 18px rgba(79,233,240,.35);position:relative}
.rc .rc-ico svg{width:24px;height:24px}
.rc .rc-ico::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(79,233,240,.7);border-bottom:0}
.rc .rc-now{display:flex;flex-direction:column;font:400 12.5px var(--pf);color:var(--text)}
.rc .rc-now small{font:700 10px var(--pf);letter-spacing:.14em;text-transform:uppercase;color:#4FE9F0}
.rc .rc-track ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rc .rc-track li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;min-width:0}
.rc .rc-track li i{display:block;width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.08);margin-bottom:6px;position:relative;overflow:hidden}
.rc .rc-track li.done i{background:linear-gradient(90deg,#4FF0E0,#38B6F5)}
.rc .rc-track li.now i::before{content:"";position:absolute;inset:0 50% 0 0;background:linear-gradient(90deg,#4FF0E0,#38B6F5);border-radius:inherit}
.rc .rc-track li b{font:400 13.5px var(--font-display);color:var(--muted);white-space:nowrap}
.rc .rc-track li.done b{color:var(--text)}
.rc .rc-track li.now b{color:#4FE9F0}
.rc .rc-track li small{font:400 11.5px var(--pf);color:var(--muted);opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* equipment bar */
.rc .rc-eqwrap{border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .2s}
.rc .rc-eqwrap.open{border-color:rgba(79,233,240,.35)}
.rc .rc-eq{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:14px 18px;cursor:pointer;font-family:var(--pf)}
.rc .rc-eq:focus-visible{outline:2px solid #4FE9F0;outline-offset:-2px;border-radius:18px}
.rc .rc-eq:hover{background:rgba(255,255,255,.025)}
.rc .rc-pics{display:flex}
.rc .rc-pic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#0B1116;border:1px solid rgba(255,255,255,.08);overflow:hidden;flex:none}
.rc .rc-pics .rc-pic + .rc-pic{margin-inline-start:-10px}
.rc .rc-pic img{width:100%;height:100%;object-fit:contain;padding:4px}
.rc .rc-eq-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.rc .rc-eq-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rc .rc-eq-h b{font:400 17px var(--font-display);color:var(--text)}
.rc .rc-eq-h em{font:600 11.5px var(--pf);font-style:normal;color:#4FE9F0;background:rgba(79,233,240,.10);border:1px solid rgba(79,233,240,.3);padding:2px 9px;border-radius:999px}
.rc .rc-eq-txt > small{font:400 12.5px var(--pf);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc .rc-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.08)}
.rc .rc-total small{font:600 10.5px var(--pf);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rc .rc-total b{font:400 20px var(--font-display);color:var(--text);white-space:nowrap}
.rc .rc-total b.struck{color:var(--muted)}
.rc .rc-total em{font:400 12px var(--pf);font-style:normal;color:var(--muted)}
.rc .rc-more{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(79,233,240,.45);color:#4FE9F0;font:600 13px var(--pf);white-space:nowrap}
.rc .rc-more svg{transition:transform .3s}
.rc .rc-eqwrap.open .rc-more svg{transform:rotate(180deg)}
.rc .rc-detail{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border-top:1px solid rgba(255,255,255,.08);animation:rc-open .35s cubic-bezier(.22,1,.36,1)}
@keyframes rc-open{from{opacity:0;transform:translateY(-6px)}}
.rc .rc-list,.rc .rc-sum{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.rc .rc-sum{border-inline-start:1px solid rgba(255,255,255,.08)}
.rc .rc-k{margin:0 0 2px;font:400 12px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rc .rc-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.rc .rc-line:last-child{border-bottom:0;padding-bottom:0}
.rc .rc-ln{display:flex;flex-direction:column;min-width:0}
.rc .rc-ln b{font:600 14px var(--pf);color:var(--text)}
.rc .rc-ln small,.rc .rc-pr small{font:400 12px var(--pf);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc .rc-q{font:500 13px var(--pf);color:var(--muted)}
.rc .rc-pr{display:flex;flex-direction:column;align-items:flex-end}
.rc .rc-pr b{font:600 13.5px var(--pf);color:var(--text);white-space:nowrap}
.rc .rc-sum > div{display:flex;justify-content:space-between;gap:12px;font:400 14px var(--pf);color:var(--muted)}
.rc .rc-sum > div b{color:var(--text);font-weight:600;white-space:nowrap}
.rc .rc-sum .rc-sum-t{padding-top:10px;border-top:1px solid rgba(255,255,255,.08);color:var(--text);font-weight:600}
.rc .rc-sum .rc-sum-t b{font:400 18px var(--font-display)}
.rc .rc-sum .rc-ins{padding:10px 12px;border-radius:12px;background:rgba(79,233,240,.06);border:1px solid rgba(79,233,240,.2)}
.rc .rc-sum .rc-ins span{display:flex;flex-direction:column}
.rc .rc-sum .rc-ins small{font-size:12px}
.rc .rc-note{margin:0;font:400 12.5px var(--pf);color:var(--muted)}
/* buttons */
.rc .r-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
html body .rc .r-actions button.sm{height:40px;padding:0 18px;border-radius:999px!important;font:600 13px var(--pf)!important;letter-spacing:.02em!important;text-transform:none!important;display:inline-flex;align-items:center;gap:8px}
html body .rc .r-actions .rc-again{background:rgba(79,233,240,.08)!important;border:1px solid rgba(79,233,240,.45)!important;color:#C6F7FF!important}
html body .rc .r-actions .rc-quiet{background:none!important;border:0!important;color:var(--muted)!important;padding:0 6px!important}
html body .rc .r-actions .rc-quiet:hover{color:var(--text)!important}
.rc .r-actions .confirm{font:500 13.5px var(--pf)}
/* cancelled: calm and grey */
.rc.rc-dead .status{background:rgba(255,255,255,.06)!important;color:var(--muted)!important;border-color:rgba(255,255,255,.12)!important}
.rc.rc-dead .rc-pics{filter:grayscale(.6);opacity:.75}
/* company credits tile */
.tile.tile-credits{position:relative;background:linear-gradient(150deg,rgba(79,233,240,.10),rgba(56,182,245,.04))!important;border-color:rgba(79,233,240,.3)!important}
.tile.tile-credits .tc-top{position:absolute;top:16px;inset-inline-end:16px;font:700 11px 'PRJX Poppins',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5);padding:5px 10px;border-radius:999px}
/* light mode */
html[data-theme="light"] .rc .rc-facts,html[data-theme="light"] .rc .rc-cancel-line,html[data-theme="light"] .rc .rc-eqwrap{background:rgba(10,60,90,.03);border-color:rgba(10,60,90,.10)}
html[data-theme="light"] .rc .rc-facts > div,html[data-theme="light"] .rc .rc-total,html[data-theme="light"] .rc .rc-sum,html[data-theme="light"] .rc .rc-detail{border-color:rgba(10,60,90,.10)}
html[data-theme="light"] .rc .rc-pic{background:#fff;border-color:rgba(10,60,90,.10)}
html[data-theme="light"] .rc .rc-track li i{background:rgba(10,60,90,.08)}
html[data-theme="light"] .rc .rc-ico,html[data-theme="light"] .rc .rc-place svg,html[data-theme="light"] .rc .rc-place a,html[data-theme="light"] .rc .rc-now small,html[data-theme="light"] .rc .rc-track li.now b,html[data-theme="light"] .rc .rc-facts .rc-days b,html[data-theme="light"] .rc .rc-more,html[data-theme="light"] .rc .rc-eq-h em{color:#0A8FA0}
html[data-theme="light"] body .rc .r-actions .rc-again{color:#0B6F7A!important;border-color:rgba(11,143,154,.45)!important}
/* phones */
@media (max-width:760px){
  .rental.rc{padding:18px 16px}
  .rc .rc-eq{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .rc .rc-total{grid-column:1 / -1;flex-direction:row;align-items:baseline;justify-content:space-between;padding:10px 0 0;border:0;border-top:1px solid rgba(255,255,255,.08)}
  .rc .rc-more{grid-column:1 / -1;justify-content:center}
  .rc .rc-detail{grid-template-columns:1fr}
  .rc .rc-sum{border-inline-start:0;border-top:1px solid rgba(255,255,255,.08)}
  .rc .rc-track li b{font-size:10.5px}
  .rc .rc-track li small{display:none}
  .rc .rc-bubble{left:0!important;right:auto!important;transform:none!important}
}
html[dir="rtl"] .rc .rc-track li.now i::before{inset:0 0 0 50%}
@media (max-width:760px){
  .rc .rc-track ol{gap:5px}
  .rc .rc-track li b{font:600 10px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;letter-spacing:0}
  .rc .rc-total em{display:none}
  .rc .rc-total small{align-self:center}
  .rc .rc-facts > div{border-inline-start:0;border-top:1px solid rgba(255,255,255,.07)}
  .rc .rc-facts > div:first-child{border-top:0}
}
html[data-theme="light"] .rc .rc-track li.done i{background:linear-gradient(90deg,#2BD9CF,#2A9FE0)}
html[data-theme="light"] .rc .rc-track li.now i::before{background:linear-gradient(90deg,#2BD9CF,#2A9FE0)}
/* Product page: how a cased item arrives (full flight case) */
.pd3-case{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(79,233,240,.06);border:1px solid rgba(79,233,240,.22)}
.pd3-case svg{flex:none;color:#4FE9F0;margin-top:1px}
.pd3-case p{margin:0;font:400 13px/1.5 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--muted)}
.pd3-case b{display:block;margin-bottom:2px;font-weight:600;color:var(--text)}
html[data-theme="light"] .pd3-case{background:rgba(10,143,160,.06);border-color:rgba(10,143,160,.25)}
html[data-theme="light"] .pd3-case svg{color:#0A8FA0}
/* Truck: what each case holds */
.line .sub .case-note{display:block;margin-top:2px;font-size:12px;color:#4FE9F0}
html[data-theme="light"] .line .sub .case-note{color:#0A8FA0}
/* Product page: highlighted note (assembly notes carried over from the old site) */
.pd3-tip{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,196,77,.08);border:1px solid rgba(255,196,77,.35)}
.pd3-tip svg{flex:none;color:#FFC44D;margin-top:1px}
.pd3-tip p{margin:0;font:400 13px/1.5 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--muted)}
.pd3-tip b{display:block;margin-bottom:2px;font-weight:600;color:var(--text)}
html[data-theme="light"] .pd3-tip{background:rgba(214,140,0,.08);border-color:rgba(214,140,0,.35)}
html[data-theme="light"] .pd3-tip svg{color:#B97800}
/* ===== My Profile: a home of big tiles; one area open at a time with a tab strip ===== */
#view-profile .prof{display:flex;flex-direction:column;gap:20px}
#view-profile .prof[data-open=""] .pnav,#view-profile .prof[data-open=""] .pcol{display:none}
#view-profile .prof:not([data-open=""]) .ptiles{display:none}
#view-profile .psec.psec-off{display:none}
#view-profile .psec.psec-in{animation:psec-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes psec-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ptile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:12px 16px;min-height:168px;padding:22px 22px 18px;border-radius:26px;text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s;overflow:hidden}
.ptile::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;inset-inline-end:-50px;top:-60px;background:radial-gradient(circle,rgba(79,233,240,.14),transparent 70%);pointer-events:none;transition:transform .5s}
.ptile:hover{transform:translateY(-4px);border-color:rgba(79,233,240,.45)!important;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.ptile:hover::after{transform:scale(1.25)}
.ptile:focus-visible{outline:2px solid #4FE9F0;outline-offset:3px}
.pt-ico{grid-row:1/3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#4FE9F0;background:radial-gradient(circle at 35% 30%,rgba(79,233,240,.22),rgba(56,182,245,.06));border:1.5px solid rgba(79,233,240,.45)}
.pt-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.pt-txt b{font:400 17px/1.3 var(--font-display);color:var(--text)}
.pt-txt small{font:400 13.5px/1.45 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pt-state{grid-column:2;align-self:end;justify-self:start;font:600 11.5px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;padding:4px 10px;border-radius:999px;color:#E8A23A;background:rgba(232,162,58,.12);border:1px solid rgba(232,162,58,.35)}
.pt-state.ok{color:#3FD9C4;background:rgba(63,217,196,.10);border-color:rgba(63,217,196,.35)}
.pt-go{position:absolute;inset-inline-end:20px;bottom:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:#4FE9F0;border:1px solid rgba(79,233,240,.35);transition:transform .3s,background .3s}
.ptile:hover .pt-go{transform:translateX(4px);background:rgba(79,233,240,.12)}
html[dir="rtl"] .ptile:hover .pt-go{transform:translateX(-4px)}
/* the tab strip when an area is open */
#view-profile .prof:not([data-open=""]) .pnav{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:6px;border-radius:999px;scrollbar-width:none}
#view-profile .pnav::-webkit-scrollbar{display:none}
#view-profile .prof:not([data-open=""]) .pnav a{flex:none;white-space:nowrap;border-radius:999px;padding:9px 16px;gap:8px}
#view-profile .prof:not([data-open=""]) .pnav a[aria-current]{color:#04212A;background:linear-gradient(90deg,#4FF0E0,#38B6F5)}
#view-profile .prof:not([data-open=""]) .pnav a[aria-current] .dot{background:#04212A}
/* light mode */
html[data-theme="light"] .pt-ico,html[data-theme="light"] .pt-go{color:#0A8FA0;border-color:rgba(10,143,160,.4)}
html[data-theme="light"] .ptile::after{background:radial-gradient(circle,rgba(10,143,160,.10),transparent 70%)}
html[data-theme="light"] .ptile:hover{box-shadow:0 18px 40px rgba(10,60,90,.12)}
html[data-theme="light"] .pt-state.ok{color:#0F8F7E}
html[data-theme="light"] .pt-state{color:#B26A00}
/* tablets and phones */
@media (max-width:1100px){ .ptiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .ptiles{grid-template-columns:1fr;gap:12px}
  .ptile{min-height:0;padding:16px 16px 14px;border-radius:22px;grid-template-rows:auto auto}
  .pt-ico{width:46px;height:46px;grid-row:1/3}
  .pt-ico svg{width:22px;height:22px}
  .pt-txt b{font-size:15px}
  .pt-go{width:30px;height:30px;bottom:auto;top:50%;transform:translateY(-50%)}
  .ptile:hover .pt-go{transform:translateY(-50%)}
  .pt-txt,.pt-state{padding-inline-end:36px}
}
#view-profile .prof{align-items:stretch}
#view-profile .prof .pcol,#view-profile .prof .ptiles,#view-profile .prof .pnav{width:100%;max-width:none}
@media (min-width:1101px){ .ptiles{grid-template-columns:repeat(4,minmax(0,1fr))} .ptile{min-height:178px} }
#view-profile .prof:not([data-open=""]) .pnav a{padding:8px 14px;font-size:13.5px}
#view-profile .addr-list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
@media (max-width:640px){ #view-profile .addr-list{grid-template-columns:1fr} }
/* "All settings" back link above the tab strip */
#view-profile .pback{display:none;align-self:flex-start;align-items:center;gap:8px;margin-bottom:-8px;padding:6px 14px 6px 10px;border-radius:999px;text-decoration:none;color:var(--text);font:600 13.5px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;transition:background .2s}
#view-profile .pback::before{content:"←";color:#4FE9F0;font-size:15px;transition:transform .25s}
html[dir="rtl"] #view-profile .pback::before{content:"→"}
#view-profile .pback:hover{background:rgba(79,233,240,.08)}
#view-profile .pback:hover::before{transform:translateX(-3px)}
html[dir="rtl"] #view-profile .pback:hover::before{transform:translateX(3px)}
#view-profile .prof:not([data-open=""]) .pback{display:inline-flex}
html[data-theme="light"] #view-profile .pback::before{color:#0A8FA0}
/* Product page: piece counts that follow the quantity (truss circles) */
.pd3-chip.pd3-live b,.pd3-spec tr.pd3-live bdi{color:#4FE9F0;font-variant-numeric:tabular-nums}
html[data-theme="light"] .pd3-chip.pd3-live b,html[data-theme="light"] .pd3-spec tr.pd3-live bdi{color:#0A8FA0}
.pd3-chip.pd3-live.pd3-bump{animation:pd3-bump .5s cubic-bezier(.34,1.56,.64,1)}
.pd3-spec tr.pd3-live.pd3-bump bdi{display:inline-block;animation:pd3-bump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pd3-bump{0%{transform:scale(1)}40%{transform:scale(1.12);box-shadow:0 0 0 6px rgba(79,233,240,.15)}100%{transform:scale(1)}}
/* Product page: the circles the client is renting, each assembled from its curved pieces */
.pd3-rings{margin-top:14px;padding:14px 16px 12px;border-radius:18px;background:rgba(79,233,240,.05);border:1px solid rgba(79,233,240,.18)}
.pr-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:64px}
.pr-ring{display:inline-grid;place-items:center;width:64px;height:64px}
.pr-ring svg{overflow:visible}
.pr-ghost{fill:none;stroke:rgba(79,233,240,.10);stroke-width:9}
.pr-piece{fill:none;stroke:#4FE9F0;stroke-width:9;stroke-linecap:butt;filter:drop-shadow(0 0 3px rgba(79,233,240,.45))}
.pr-ring text{font:600 15px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;fill:var(--text)}
.pr-ring.in{animation:pr-pop .45s cubic-bezier(.34,1.56,.64,1)}
.pr-ring.in .pr-piece{stroke-dasharray:1;stroke-dashoffset:1;animation:pr-draw .28s ease-out forwards;animation-delay:calc(var(--i) * 70ms + 80ms)}
.pr-ring.out{animation:pr-out .36s ease-in forwards}
@keyframes pr-pop{from{transform:scale(.4) rotate(-40deg);opacity:0}}
@keyframes pr-draw{to{stroke-dashoffset:0}}
@keyframes pr-out{to{transform:scale(.3) rotate(30deg);opacity:0}}
.pr-more{display:inline-grid;place-items:center;min-width:48px;height:48px;padding:0 10px;border-radius:999px;font:600 14px 'PRJX Poppins',system-ui,sans-serif;color:#4FE9F0;border:1px dashed rgba(79,233,240,.45)}
.pr-cap{margin:8px 0 0;font:400 13px 'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--muted)}
.pr-cap b{color:var(--text);font-weight:600}
html[data-theme="light"] .pd3-rings{background:rgba(10,143,160,.05);border-color:rgba(10,143,160,.2)}
html[data-theme="light"] .pr-piece{stroke:#0A8FA0;filter:none}
html[data-theme="light"] .pr-ghost{stroke:rgba(10,143,160,.10)}
html[data-theme="light"] .pr-more{color:#0A8FA0;border-color:rgba(10,143,160,.45)}
/* Truss parts (Edits 04): the full count in the price box */
.pd3-inc{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:12px;background:rgba(79,233,240,.07);border:1px solid rgba(79,233,240,.28)}
.pd3-inc>svg{flex:none;margin-top:2px;color:var(--aqua)}
.pd3-inc p{margin:0;display:flex;flex-direction:column;gap:3px;font:400 12.5px/1.45 var(--pf);color:var(--muted)}
.pd3-inc .pi-sum{font:600 14px/1.4 var(--pf);color:var(--text);font-variant-numeric:tabular-nums}
.pd3-inc .pi-sum.pd3-tick{animation:pd3-tick .45s cubic-bezier(.16,1,.3,1)}
@keyframes pd3-tick{0%{opacity:.25;transform:translateY(4px)}100%{opacity:1;transform:none}}
html[data-theme="light"] .pd3-inc{background:rgba(10,143,160,.06);border-color:rgba(10,143,160,.3)}
html[data-theme="light"] .pd3-inc>svg{color:#0A8FA0}

/* The parts strip under the photos */
.pd3-parts{margin-top:4px;padding:16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.pp-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.pp-head .pd3-k{margin:0}
.pp-hint{font:400 12px var(--pf);color:var(--muted)}
.pp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pp-tile{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;cursor:pointer;text-align:start;color:inherit;font:inherit}
.pp-img{position:relative;display:grid;place-items:center;height:76px;border-radius:12px;background:#F3F5F8;overflow:hidden;outline:2px solid transparent;outline-offset:0;transition:outline-color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.pp-img img{max-width:84%;max-height:70px;object-fit:contain;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pp-tile:hover .pp-img img{transform:scale(1.07)}
.pp-tile:hover .pp-img,.pp-tile:focus-visible .pp-img{outline-color:var(--aqua)}
.pp-tile:focus-visible{outline:none}
.pp-anim svg{width:100%;height:100%}
.pp-loop{position:absolute;inset-inline-end:6px;bottom:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:6px;background:#0B1A20;color:#4FE9F0;font:600 9.5px/1.4 var(--pf);font-style:normal}
.pp-cap{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pp-cap b{font:700 13.5px/1.25 var(--pf);color:var(--text)}
.pp-cap em{font:400 13px var(--font-display);font-style:normal;color:var(--aqua);letter-spacing:.04em}
.pp-note{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font:400 12.5px/1.5 var(--pf);color:var(--muted)}
.pp-note svg{flex:none;margin-top:2px}
html[data-theme="light"] .pd3-parts{background:#fff;border-color:rgba(10,30,40,.09)}
html[data-theme="light"] .pp-cap em{color:#0A8FA0}

/* The connect loop: 4 steps of 2 s. Resting state = the finished joint (what reduced motion shows) */
.cn{display:block;background:#F3F5F8}
.cn rect,.cn .cn-brace{fill:#C9D2D8;stroke:#9AA7B0;stroke-width:1.2}
.cn .cn-brace{fill:none;stroke:#A9B5BD;stroke-width:3;stroke-linejoin:round}
.cn .cn-end{fill:#DDE3E7;stroke:#8E9BA4}
.cn .cn-spig rect{fill:#E9EEF1;stroke:#7F8C95;stroke-width:1.4}.cn .cn-spig circle{fill:#55626B}
.cn .cn-pin rect{fill:#B9C3CA;stroke:#5E6B74;stroke-width:1}
.cn .cn-clip{fill:none;stroke:#5E6B74;stroke-width:1.6;stroke-linecap:round}
.cn .cn-arrow{fill:none;stroke:#2EACEC;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cn *{animation-duration:8s;animation-iteration-count:infinite;animation-delay:var(--d,0s);animation-timing-function:cubic-bezier(.33,0,.2,1)}
.cn .cn-spig{animation-name:cn-spig}.cn .cn-spig rect{animation-name:cn-hl1}
.cn .cn-right{animation-name:cn-right}.cn .cn-right .cn-end{animation-name:cn-hl2}
.cn .cn-pin{animation-name:cn-pin}.cn .cn-pin rect{animation-name:cn-hl3}
.cn .cn-clip{animation-name:cn-clip;transform-box:fill-box;transform-origin:0 0}
.cn .cn-a1{animation-name:cn-a1}.cn .cn-a2{animation-name:cn-a2}
@keyframes cn-spig{0%{transform:translateX(70px);opacity:0}4%{transform:translateX(70px);opacity:1}21%,100%{transform:none;opacity:1}}
@keyframes cn-hl1{0%,22%{stroke:#2EACEC;stroke-width:2.2;fill:#E2F4FD}27%,100%{stroke:#7F8C95;stroke-width:1.4;fill:#E9EEF1}}
@keyframes cn-right{0%,25%{transform:translateX(74px);opacity:.45}46%,100%{transform:none;opacity:1}}
@keyframes cn-hl2{0%,24%{stroke:#8E9BA4}26%,46%{stroke:#2EACEC;stroke-width:2}52%,100%{stroke:#8E9BA4;stroke-width:1.2}}
@keyframes cn-pin{0%,50%{transform:translateY(-30px);opacity:0}54%{transform:translateY(-30px);opacity:1}70%,100%{transform:none;opacity:1}}
@keyframes cn-hl3{0%,72%{stroke:#2EACEC;stroke-width:1.8}77%,100%{stroke:#5E6B74;stroke-width:1}}
@keyframes cn-clip{0%,75%{opacity:0;transform:translate(6px,4px) scale(.5);stroke:#2EACEC}86%,95%{opacity:1;transform:none;stroke:#2EACEC}100%{opacity:1;transform:none;stroke:#5E6B74}}
@keyframes cn-a1{0%,3%{opacity:0;transform:translateX(10px)}7%,19%{opacity:1;transform:none}23%,100%{opacity:0}}
@keyframes cn-a2{0%,26%{opacity:0;transform:translateX(10px)}30%,43%{opacity:1;transform:none}47%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cn *{animation:none!important}.cn .cn-arrow{opacity:0}}

/* The parts viewer */
html.pv-open{overflow:hidden}
.pv-back{--pf:'PRJX Poppins','IBM Plex Sans Arabic',system-ui,sans-serif;--aqua:#4FE9F0;position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(4,10,14,.72);animation:pv-in .25s ease-out}
@keyframes pv-in{from{opacity:0}}
.pv{position:relative;width:min(1080px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:26px;border-radius:20px;background:#0D1418;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.45);animation:pv-up .35s cubic-bezier(.16,1,.3,1)}
@keyframes pv-up{from{transform:translateY(14px) scale(.985);opacity:.4}}
.pv-x{position:absolute;inset-inline-end:16px;top:16px;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;z-index:2}
.pv-x:hover{background:rgba(255,255,255,.06)}
.pv-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.pv-stage{position:relative;height:250px;border-radius:14px;background:#F3F5F8;display:grid;place-items:center;overflow:hidden}
.pv-stage img{max-width:82%;max-height:200px;object-fit:contain;animation:pv-img .4s cubic-bezier(.16,1,.3,1)}
@keyframes pv-img{from{opacity:0;transform:scale(.96)}}
.pv-nav{position:absolute;top:50%;margin-top:-17px;width:34px;height:34px;border-radius:9px;border:0;background:#2A3238;color:#fff;display:grid;place-items:center;cursor:pointer}
.pv-nav:hover{background:#0B1A20}.pv-nav.prev{left:10px}.pv-nav.next{right:10px}
[dir="rtl"] .pv-nav.prev{left:auto;right:10px}[dir="rtl"] .pv-nav.next{right:auto;left:10px}[dir="rtl"] .pv-nav svg{transform:scaleX(-1)}
.pv-nums.one{grid-template-columns:1fr}.pv-nums.one div.on{display:none}
.pv-count{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:400 12px var(--pf);color:#5E6B74}
.pv-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.pv-th{height:52px;border-radius:9px;border:2px solid transparent;background:#F3F5F8;padding:0;display:grid;place-items:center;cursor:pointer;overflow:hidden}
.pv-th img{max-width:80%;max-height:42px;object-fit:contain}.pv-th.on{border-color:var(--aqua)}
.pv-th:focus-visible,.pv-nav:focus-visible,.pv-x:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.pv-anim{border-radius:14px;background:#F3F5F8;padding:14px 14px 12px;color:#0B1A20}
.pv-ah{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pv-ah .pd3-k{margin:0;color:#4A626B}
.pv-ah em{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:7px;background:#0B1A20;color:#4FE9F0;font:600 10.5px var(--pf);font-style:normal}
.pv-svg .cn{width:100%;height:auto}
.pv-prog{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pv-prog li{font:500 11px/1.3 var(--pf);color:#5E6B74}
.pv-prog i{display:block;height:3px;border-radius:2px;background:#D5DCE0;margin-bottom:6px;overflow:hidden;position:relative}
.pv-prog i::after{content:"";position:absolute;inset:0;background:#2EACEC;transform-origin:left;transform:scaleX(0);animation:8s linear infinite var(--d,0s)}
.pv-prog li:nth-child(1) i::after{animation-name:pv-s1}.pv-prog li:nth-child(2) i::after{animation-name:pv-s2}
.pv-prog li:nth-child(3) i::after{animation-name:pv-s3}.pv-prog li:nth-child(4) i::after{animation-name:pv-s4}
@keyframes pv-s1{0%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}}
@keyframes pv-s2{0%,25%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
@keyframes pv-s3{0%,50%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes pv-s4{0%,75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.pv-prog i::after{animation:none;transform:none}}
[dir="rtl"] .pv-prog i::after{transform-origin:right}
.pv-info{padding-inline-end:28px;color:var(--text)}
.pv-info h3{margin:2px 0 6px;font:400 22px/1.2 var(--font-display);letter-spacing:.02em}
.pv-desc{margin:0 0 14px;font:400 13.5px/1.5 var(--pf);color:var(--muted)}
.pv-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.pv-nums div{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:2px}
.pv-nums div.on{border-color:rgba(79,233,240,.45);background:rgba(79,233,240,.08)}
.pv-nums b{font:400 26px/1.1 var(--font-display);color:var(--aqua);font-variant-numeric:tabular-nums}
.pv-nums div:not(.on) b{color:var(--text)}
.pv-nums span{font:400 12px var(--pf);color:var(--muted)}
.pv-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font:400 13px/1.45 var(--pf)}
.pv-dl dt{color:var(--muted)}.pv-dl dd{margin:0;color:var(--text)}
.pv-steps{margin:0 0 14px;padding-inline-start:20px;display:flex;flex-direction:column;gap:8px;font:400 13px/1.4 var(--pf)}
.pv-steps li::marker{color:var(--aqua);font-weight:600}
.pv-steps b{display:block;font-weight:600;color:var(--text)}.pv-steps span{color:var(--muted);font-size:12px}
.pv-k{margin:0 0 6px!important}
.pv-set{width:100%;border-collapse:collapse;font:400 13px var(--pf);font-variant-numeric:tabular-nums}
.pv-set th{font-weight:400;font-size:11.5px;color:var(--muted);text-align:end;padding:0 8px 6px}
.pv-set td{padding:8px;border-top:1px solid rgba(255,255,255,.08);text-align:end;color:var(--text)}
.pv-set td:first-child{text-align:start}
.pv-set tr.on td{background:rgba(79,233,240,.08);font-weight:600}
.pv-set tr.on td:first-child{box-shadow:inset 2px 0 0 var(--aqua)}
[dir="rtl"] .pv-set tr.on td:first-child{box-shadow:inset -2px 0 0 var(--aqua)}
html[data-theme="light"] .pv{background:#fff;border-color:rgba(10,30,40,.1);box-shadow:0 30px 70px rgba(10,30,40,.2)}
html[data-theme="light"] .pv-back{background:rgba(10,30,40,.45)}
html[data-theme="light"] .pv-x{border-color:rgba(10,30,40,.15)}
html[data-theme="light"] .pv-nums div{border-color:rgba(10,30,40,.12)}
html[data-theme="light"] .pv-nums div.on{border-color:rgba(10,143,160,.45);background:rgba(10,143,160,.07)}
html[data-theme="light"] .pv-nums b{color:#0A8FA0}
html[data-theme="light"] .pv-set td{border-top-color:rgba(10,30,40,.09)}
html[data-theme="light"] .pv-set tr.on td{background:rgba(10,143,160,.07)}
@media (max-width:980px){.pv-in{grid-template-columns:1fr 1fr}.pv-info{grid-column:1 / -1;padding:0}}
@media (max-width:640px){.pv-back{padding:0;place-items:end stretch}.pv{max-height:92dvh;border-radius:20px 20px 0 0;padding:62px 16px 24px}.pv-x{top:14px}.pv-in{grid-template-columns:1fr}.pv-stage{height:200px}.pv-info{padding:0}
  .pp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-hint{display:none}}

/* Often rented together: the reason line and the tag */
.pd3-rel-note{margin:-6px 0 18px;max-width:70ch;font:400 14px/1.5 var(--pf);color:var(--muted)}
.pd3-need{align-self:flex-start;white-space:nowrap;margin-bottom:4px;padding:2px 8px;border-radius:6px;background:rgba(79,233,240,.12);color:var(--aqua);font:600 10.5px/1.5 var(--pf);font-style:normal}

/* Fully booked: red "Not currently available for your dates" (cards, product page, length note) */
.pc-avail.is-booked,#grid .card.pc .pc-avail.is-booked{color:#FF6B6B}
html[data-theme="light"] .pc-avail.is-booked,html[data-theme="light"] #grid .card.pc .pc-avail.is-booked{color:#C42B1F}
html[data-theme="light"] .pd3-avail.none{color:#C42B1F}
.pd3-lnote{color:#FF6B6B}
html[data-theme="light"] .pd3-lnote{color:#C42B1F}