/* MASAR VIP home v2 (v4.1). Tokens from the approved palette; Almarai self-hosted only. */
:root{--ink:#0b0c0d;--ink2:#211d17;--cream:#f6f2ea;--cream2:#f2ede2;--gold:#cfb680;--bronze:#7a5f22;--muted:#4d463c;--line:#d9d2c2}
body{margin:0;background:var(--cream)}
.v2,.v2 *{box-sizing:border-box}
.v2{font-family:Almarai,Tahoma,Arial,sans-serif;color:var(--ink2);background:var(--cream)}
.v2 a{color:inherit;text-decoration:none}
.v2 p{margin:0}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:10px 16px;background:var(--ink);color:#f2ebdf;flex-wrap:wrap}
@media (min-width:861px){.topbar{padding-inline:max(18px,calc((100% - 1200px)/2 + 18px))}}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:2px}
.brand img{width:38px;height:38px;border-radius:50%}
.brand small{color:var(--gold);font-size:.62em;letter-spacing:3px}
.topnav{display:flex;gap:22px;margin-inline-start:auto;font-size:14px}
.topnav a{opacity:.85;padding:6px 2px}
.topnav a:hover{opacity:1;color:var(--gold)}
.topnav a.is-on{color:var(--gold);opacity:1}
.topactions{display:flex;align-items:center;gap:10px}
.btn-ghost,.btn-gold{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;font-weight:700;font-size:14px;border-radius:2px}
.btn-ghost{border:1px solid #f2ebdf55;color:#f2ebdf}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{background:var(--gold);color:#141310}
.btn-gold:hover{background:#dcc794}
.lang{display:flex;border:1px solid #f2ebdf44;border-radius:2px;overflow:hidden;font-size:13px}
.lang a{padding:10px 12px}
.lang a.is-on{background:var(--gold);color:#141310;font-weight:700}
.burger{display:none;flex-direction:column;gap:5px;padding:10px;cursor:pointer;margin-inline-start:auto}
.burger span{width:22px;height:2px;background:#f2ebdf}
.mobile-nav{display:none}
@media (max-width:860px){
.topnav{display:none}
.burger{display:flex}
.mobile-nav{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(320px,85%);z-index:19;background:#0b0c0dee;display:flex;flex-direction:column;padding:76px 18px 18px;transform:translateX(110%);transition:transform .3s ease}
[dir="rtl"] .mobile-nav{transform:translateX(-110%)}
.mobile-nav a{padding:14px 4px;color:#f2ebdf;border-bottom:1px solid #f2ebdf22;font-size:16px}
.nav-toggle:checked~.mobile-nav{transform:none}
}
@media (max-width:640px){.topactions .btn-ghost span.wa-t{display:none}}
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;color:#f6f2ea;overflow:hidden}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0b0c0d80 0%,#0b0c0d40 42%,#0b0c0de6 100%)}
.hero-inner{position:relative;padding:140px 18px 8px;max-width:1200px;margin:0 auto;width:100%}
.overline{letter-spacing:4px;font-size:12px;font-weight:700;color:var(--gold);margin-bottom:18px}
.hero h1{font-size:clamp(38px,5.6vw,64px);line-height:1.25;font-weight:700;max-width:14em;margin:0 0 18px}
.hero-sub{font-size:17px;line-height:1.9;max-width:44em;opacity:.92;margin-bottom:26px}
.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-cta .btn-gold{min-height:48px;padding:0 26px}
.btn-ghost-light{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;font-weight:700;font-size:14px;border-radius:2px;border:1px solid #f6f2ea88;color:#f6f2ea}
.btn-ghost-light:hover{border-color:var(--gold);color:var(--gold)}
.hero-link{color:var(--gold);font-weight:700;font-size:14px;border-bottom:1px solid var(--gold);padding-bottom:2px}
.trustbar{position:relative;list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #f6f2ea33;width:100%}
.trustbar li{padding:18px 22px;font-size:13px;line-height:1.8;border-inline-start:1px solid #f6f2ea33}
.trustbar li:first-child{border-inline-start:0}
.trustbar-wrap{position:relative;max-width:1200px;margin:0 auto;width:100%;padding:0 18px}
@media (max-width:860px){
.hero{min-height:88vh}
.trustbar{grid-template-columns:1fr}
.trustbar li{border-inline-start:0;border-top:1px solid #f6f2ea22;padding:14px 22px}
.trustbar li:first-child{border-top:0}
}
section.band{padding:84px 18px;max-width:1200px;margin:0 auto}
.kicker{letter-spacing:3px;font-size:12px;font-weight:700;color:var(--bronze);margin-bottom:14px}
h2.sec{font-size:clamp(28px,3.4vw,40px);font-weight:700;color:var(--ink2);margin:0 0 40px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border:1px solid var(--line);padding:28px 24px;transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-4px);box-shadow:0 12px 28px #211d1712}
.step .num{display:block;font-size:44px;font-weight:700;color:var(--gold);margin-bottom:14px;line-height:1}
.step h3{font-size:20px;margin:0 0 10px;color:var(--ink2)}
.step p{font-size:14px;line-height:1.9;color:var(--muted)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:#fff;border:1px solid var(--line);padding:32px 28px;transition:transform .25s,box-shadow .25s}
.panel:hover{transform:translateY(-3px);box-shadow:0 12px 28px #211d1710}
.panel-title{font-size:24px;margin:0 0 12px;color:var(--ink2)}
.panel-intro{font-size:14px;line-height:1.9;color:var(--muted);margin-bottom:24px}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;border-top:1px solid var(--line);padding-top:22px}
.mini h4{font-size:14px;margin:0 0 8px;color:var(--ink2)}
.mini p{font-size:13.5px;line-height:1.8;color:var(--muted)}
@media (max-width:860px){.panels{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.mini{grid-template-columns:1fr}}
.opstrip{max-width:none;background:var(--cream2);padding:0}
.opstrip .op-inner{max-width:1200px;margin:0 auto;padding:30px 18px}
.opstrip p{border-inline-start:3px solid var(--gold);padding-inline-start:18px;font-size:15px;line-height:1.9;color:var(--ink2)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.svc-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);padding:22px 24px;transition:transform .25s,box-shadow .25s}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #211d1712}
.svc-card .num{font-size:20px;font-weight:700;color:var(--gold)}
.svc-card h3{font-size:17px;margin:0;color:var(--ink2)}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
.section-line{font-size:14px;color:var(--muted);margin:-26px 0 34px}
.citygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.city{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.city:hover img{transform:scale(1.05)}
.city-label{position:absolute;inset-inline:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(180deg,transparent,#0b0c0dcc);color:#f6f2ea;font-weight:700;font-size:16px}
.city-label small{display:block;font-weight:400;font-size:11.5px;color:#f6f2eab3;margin-top:3px;letter-spacing:1px}
@media (max-width:860px){.citygrid{grid-template-columns:1fr}}
.text-link{display:inline-block;margin-top:26px;color:var(--bronze);font-weight:700;font-size:14px;border-bottom:1px solid var(--bronze);padding-bottom:2px}
.ctaband{max-width:none;background:var(--ink);color:#f6f2ea;text-align:center;padding:84px 18px}
.ctaband h2{font-size:clamp(28px,3.4vw,40px);margin:0 0 26px;font-weight:700}
.ctaband .btn-gold{display:inline-flex;min-height:48px;padding:0 30px}
.footer2{max-width:none;background:var(--ink);color:#9d9585;border-top:1px solid #f6f2ea14;padding:36px 18px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;line-height:1.9}
.footer2 strong{color:#f6f2ea;letter-spacing:2px;display:block;margin-bottom:8px}
.footer2 a{color:var(--gold);font-weight:700}
.footer2>div{max-width:420px}.footer2-links{display:flex;flex-wrap:wrap;gap:2px 18px}.footer2-links a{min-height:32px;display:inline-flex;align-items:center}
.floating-whatsapp{position:fixed;bottom:18px;inset-inline-end:18px;background:#d7b76e;color:#181310!important;padding:10px 16px;border:1px solid #fee6a3;border-radius:30px;box-shadow:0 3px 18px #0008;font-size:14px;z-index:20;min-height:44px;display:inline-flex;align-items:center;transition:transform .25s ease,opacity .25s ease}
@media(max-width:767px){.floating-whatsapp{padding:12px 14px;bottom:12px;inset-inline-end:12px;font-size:12px}}
html.js-motion .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
html.js-motion .reveal.on{opacity:1;transform:none}
html.js-motion .reveal.d1{transition-delay:60ms}
html.js-motion .reveal.d2{transition-delay:120ms}
html.js-motion .reveal.d3{transition-delay:180ms}
html.js-motion .reveal.d4{transition-delay:240ms}
.hero-media{overflow:hidden}
.hero-media img{animation:heroZoom 24s ease-in-out infinite alternate;transform-origin:center;will-change:transform}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.btn-gold,.btn-ghost,.btn-ghost-light{transition:transform .2s ease-out,box-shadow .2s ease-out}
@media (hover:hover) and (pointer:fine){.btn-gold:hover,.btn-ghost:hover,.btn-ghost-light:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(11,12,13,.10)}}
.btn-gold:active,.btn-ghost:active,.btn-ghost-light:active{transform:translateY(-1px);transition-duration:120ms}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}.hero-media img{animation:none!important}a,button,.tile,.city-card,.price-card{transition:none!important;transform:none!important}.city img{transition:none}.step,.panel,.svc-card{transition:none}}
@media (max-width:860px){.footer2{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (max-width:640px){
.topbar{gap:10px;padding:8px 12px}
.topactions .btn-ghost{display:none}
.topactions .btn-gold{min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap}
.lang a{padding:8px 9px;font-size:12px}
}
@media (max-width:480px){.brand>span{display:none}}
.back-to-top{position:fixed;bottom:18px;inset-inline-start:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#d7b76e;color:#181310;border:1px solid #fee6a3;border-radius:50%;font-size:18px;line-height:1;z-index:20;opacity:0;pointer-events:none;transition:opacity .25s ease;box-shadow:0 3px 18px #0008;text-decoration:none}.back-to-top.on{opacity:1;pointer-events:auto}@media(max-width:767px){.back-to-top{bottom:12px;inset-inline-start:12px}}
.floating-whatsapp.wa-min{transform:scale(.85);opacity:.6;transform-origin:bottom}
@media (min-width:861px){.footer2{padding-inline:max(18px,calc((100% - 1200px)/2 + 18px))}}
@media (min-width:861px){section.band.ctaband{max-width:none;padding-inline:max(18px,calc((100% - 1200px)/2 + 18px))}}
@media (min-width:861px){.footer2{border-top-color:#26241f}}
.reqwrap{position:relative;z-index:10;max-width:1200px;margin:-64px auto 0;padding-inline:40px}
.reqcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(11,12,13,.08);display:grid;grid-template-columns:1.6fr 1fr .8fr auto;gap:12px;align-items:end}
.reqf{display:flex;flex-direction:column;gap:6px}
.reqf label{font-size:13px;font-weight:700;color:var(--muted)}
.reqf select,.reqf input{height:48px;border:1px solid var(--line);border-radius:2px;padding-inline:12px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.reqf select:focus,.reqf input:focus{outline:2px solid var(--gold)}
.reqcard .btn-gold{min-height:48px;padding-inline:28px;border:0;cursor:pointer;font-size:14px}
.h2-accent{color:var(--bronze)}
.ctaband .h2-accent{color:var(--gold)}
@media (max-width:767px){.reqwrap{margin-top:-40px;padding-inline:18px}.reqcard{grid-template-columns:1fr;padding:20px}}
.hero-inner{padding-bottom:88px}
.trustbar{margin-top:32px;border-top:1px solid var(--line)}
.trustbar li{color:var(--ink2);border-inline-start:1px solid var(--line)}
.trustbar-wrap{padding-inline:40px}
@media (max-width:767px){.hero-inner{padding-bottom:64px}.trustbar-wrap{padding-inline:18px}.trustbar li{border-inline-start:0;border-top:1px solid var(--line)}}
@media print{html.js-motion .reveal{opacity:1!important;transform:none!important;transition:none!important}.floating-whatsapp,.back-to-top{display:none!important}}

.reqf{position:relative}
.req-route-btn{height:48px;border:1px solid var(--line);border-radius:2px;padding-inline:12px;font:inherit;font-size:15px;background:#fff;color:var(--ink);text-align:start;width:100%;cursor:pointer}
.req-route-btn:focus{outline:2px solid var(--gold)}
.req-route-panel{position:absolute;inset-inline-start:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 24px rgba(11,12,13,.12);padding:10px;max-height:320px;overflow:auto;min-width:min(300px,80vw)}
.req-route-panel h4{font-size:13px;color:var(--muted);margin:8px 0 4px;font-family:inherit}
.req-route-chip{display:block;width:100%;text-align:start;border:0;background:transparent;padding:10px;border-radius:2px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink);min-height:44px}
.req-route-chip:hover,.req-route-chip:focus{background:var(--cream2);outline:none}
.req-route-chip small{display:block;color:var(--muted);font-size:12px}