:root{--login-ink:#202522;--login-muted:#67706b;--login-gold:#d5b77a;--login-line:#e0e5df}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#f3f4f0;color:var(--login-ink);font-family:'Instrument Sans','Readex Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.login-shell{width:100%;max-width:1100px;display:grid;grid-template-columns:0.95fr 1.05fr;min-height:680px;background:#fff;border:1px solid #e4e7e1;border-radius:24px;overflow:hidden;box-shadow:0 24px 70px -35px #172b2245}
.login-form-area{grid-column:2;grid-row:1;padding:64px 68px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.login-logo{display:none;max-width:220px;height:auto}
.login-eyebrow,.brand-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.9px}
.login-eyebrow{color:#746039;margin-bottom:15px}
.login-title{font-family:'Readex Pro','Instrument Sans',system-ui,sans-serif;font-size:30px;font-weight:550;letter-spacing:-1px;line-height:1.25;margin:0 0 12px}
.login-sub{color:var(--login-muted);font-size:14px;line-height:1.65;margin:0 0 30px;overflow-wrap:anywhere}
.form-label{font-size:13px;font-weight:600;margin-bottom:8px;color:#333d36}
.form-control{height:50px;border:1px solid #ccd4cd;border-radius:9px;font-size:15px;padding:12px 14px;background:#fff;color:var(--login-ink);transition:border-color .15s,box-shadow .15s}
.form-control::placeholder{color:#7b837e;font-size:14px}
.form-control:focus{color:var(--login-ink);border-color:#857044;box-shadow:0 0 0 3px #d5b77a35}
.form-control.is-invalid{border-color:#b73636}
.form-control.is-invalid:focus{box-shadow:0 0 0 3px #b7363620}
.invalid-feedback{font-size:12px;line-height:1.5;margin-top:7px}
.form-check{display:flex;gap:9px;align-items:center;padding:0;min-height:24px}
.form-check .form-check-input{position:static;margin:0;float:none;width:16px;height:16px;flex-shrink:0;border-color:#a9b4ab}
.form-check-input:checked{background-color:#25392d;border-color:#25392d}
.form-check-input:focus{box-shadow:0 0 0 3px #d5b77a40;border-color:#857044}
.form-check-label{font-size:12px;color:#5d675f}
.btn-brand{min-height:50px;background:#243a2e;border:1px solid #243a2e;color:#fff;border-radius:9px;font-size:14px;font-weight:650;transition:background-color .15s,box-shadow .15s}
.btn-brand:hover,.btn-brand:focus{background:#172a20;border-color:#172a20;color:#fff;box-shadow:0 5px 12px #172b2215}
.btn-brand:active{background:#112218!important;color:#fff!important}
a{color:#765a24;text-underline-offset:3px}
a:hover{color:#493715}
.forgot-link{font-size:12px;font-weight:600;text-decoration:none;line-height:1.5}
.forgot-link:hover{text-decoration:underline}
:is(a,button,input):focus-visible{outline:2px solid #9a7636;outline-offset:3px}
.password-field{position:relative}
.password-field .form-control{padding-right:72px;background-image:none}
.password-toggle{position:absolute;right:5px;top:5px;min-height:40px;min-width:57px;border:0;border-radius:6px;background:transparent;color:#536256;font-size:12px;font-weight:600}
.password-toggle:hover{background:#f0f3ee}
.login-help{margin-top:32px;padding-top:23px;border-top:1px solid var(--login-line);color:#48564b;font-size:12px;line-height:1.8}
.login-help span{color:var(--login-muted)}
.alert{border-radius:9px;font-size:13px;line-height:1.6}
.alert-blocked{background:#fff1f0;color:#932c24;border:1px solid #efc4c0}

/* Local Saudi travel videos; the form remains stationary and readable. */
body{padding:44px clamp(24px,5vw,88px) 72px;background:#10241c;isolation:isolate}
.login-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:#10241c url('../media/login/makkah.jpg') center/cover no-repeat}
.travel-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.travel-media.is-active{opacity:1}
.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,#061b17db 0%,#09251c94 46%,#081b15b8 100%),linear-gradient(0deg,#071c16e6,transparent 55%,#071c1650)}
.scene-frame{position:absolute;width:350px;height:540px;border:1px solid #e2c68c35;border-radius:180px 180px 12px 12px;box-shadow:inset 2px 0 0 #f8e4b212,12px 18px 40px #0002;transform:perspective(1000px) rotateY(35deg) rotateZ(-15deg);animation:frame-drift 20s ease-in-out infinite}
.scene-frame-one{left:-230px;bottom:-150px}.scene-frame-two{right:-260px;top:-200px;animation-delay:-10s}
.login-shell{max-width:1400px;grid-template-columns:minmax(0,1fr) minmax(380px,460px);gap:clamp(36px,7vw,120px);min-height:min(730px,calc(100dvh - 130px));border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;align-items:center}
.login-form-area{position:relative;background:linear-gradient(145deg,#fffffff9,#f6f5eff7);padding:46px 42px;border:1px solid #fff9;border-radius:22px;box-shadow:0 28px 70px #0005,inset 0 1px 0 #fff;min-height:565px;isolation:isolate}
.login-form-area::before{content:'';position:absolute;inset:11px -11px -11px 11px;border-radius:25px;border:1px solid #e0c18b60;z-index:-2;pointer-events:none}
.login-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:18px}.login-eyebrow::before{content:'';width:7px;height:7px;background:#a88b50;border-radius:50%}
.login-title{font-size:32px;letter-spacing:-1.1px}.login-sub{font-size:14px}.form-control{height:52px;background:#fffefa}.btn-brand{min-height:52px;box-shadow:0 6px 14px #1b382521;background:linear-gradient(110deg,#254735,#142e22)}
.login-brand{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-self:stretch;justify-content:space-between;color:#fff;min-width:0;padding:12px 0}
.brand-lockup{display:flex;align-items:center;gap:16px}.brand-lockup img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 3px 8px #0005)}
.login-brand-name{font-family:'Readex Pro',system-ui,sans-serif;font-size:21px;font-weight:500;letter-spacing:3px;margin:0 0 5px}.login-brand-tag{font-size:12px;color:#e3d7bc;margin:0;letter-spacing:.6px}
.brand-main{padding:85px 0 65px}.brand-eyebrow{display:flex;align-items:center;gap:12px;color:#ebd6ab;font-size:10px;line-height:1.7;letter-spacing:1.5px}.brand-line{display:block;width:30px;height:1px;flex-shrink:0;background:#d5b77a}
.brand-headline{font-family:'Readex Pro',system-ui,sans-serif;font-size:clamp(38px,4.3vw,64px);font-weight:400;line-height:1.15;letter-spacing:-2.5px;margin:24px 0 25px;text-shadow:0 3px 22px #0003}.brand-headline span{color:#e7cc96}.brand-description{font-size:16px;line-height:1.8;color:#e3e9e2;margin:0}
.brand-services{display:flex;gap:10px;margin-top:38px;perspective:1000px}
.brand-services button{position:relative;flex:1;display:flex;gap:10px;text-align:left;align-items:flex-start;min-height:82px;padding:16px 13px;border:1px solid #e3d4ad4d;border-radius:12px;background:linear-gradient(145deg,#ffffff14,#061b1880);color:#fff;box-shadow:inset 0 1px #fff1,0 8px 15px #0002;backdrop-filter:blur(12px);font:600 14px 'Instrument Sans',system-ui,sans-serif;transition:transform .25s,border-color .25s,background .25s}
.brand-services button[aria-pressed="true"]{border-color:#e2c68c;background:linear-gradient(145deg,#d7b77430,#10291fe6);transform:translateY(-5px) rotateX(4deg)}
.brand-services button:hover{border-color:#f0d8a6;transform:translateY(-5px)}.brand-services small{display:block;color:#d0dcd2;font-size:10px;line-height:1.5;font-weight:400;margin-top:6px}.service-number{color:#dbc190;font-size:10px;line-height:20px;font-weight:400}
.brand-footer{display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.3px;color:#d2ddd3}.brand-footer p{margin:0}
.motion-toggle{position:fixed;right:26px;bottom:20px;z-index:5;min-height:38px;padding:8px 15px;border:1px solid #dfc89366;border-radius:20px;background:#10271fe6;color:#f1dfbd;font:500 12px 'Instrument Sans',system-ui,sans-serif;backdrop-filter:blur(12px)}
.motion-toggle:hover{background:#234232}.motion-toggle:disabled{opacity:.8;cursor:default}
.motion-paused :is(.scene-frame,.route-track i){animation-play-state:paused}
@keyframes frame-drift{0%,100%{transform:perspective(1000px) rotateY(35deg) rotateZ(-15deg)}50%{transform:perspective(1000px) translateY(-22px) rotateY(50deg) rotateZ(-10deg)}}
@media(min-width:1700px){.login-shell{gap:130px;grid-template-columns:1fr 490px}.login-form-area{padding:54px 48px}.brand-headline{font-size:68px}}
@media(max-width:1100px){body{padding:36px 32px 70px}.login-shell{gap:38px;grid-template-columns:minmax(0,1fr) 390px}.login-form-area{padding:38px 30px}.brand-services{gap:7px}.brand-services button{padding:12px 9px;gap:6px}.service-number{display:none}.brand-headline{letter-spacing:-1.7px}.brand-main{padding:60px 0}.brand-description{font-size:14px}}
@media(max-width:820px){body{padding:28px 24px 24px;flex-direction:column}.login-shell{display:flex;flex-direction:column;gap:28px;max-width:520px;min-height:0}.login-brand{order:-1;align-self:stretch;padding:0}.brand-lockup img{width:48px;height:48px}.login-brand-name{font-size:17px}.brand-main{padding:26px 0 0}.brand-eyebrow,.brand-description,.brand-footer{display:none}.brand-headline{font-size:32px;line-height:1.2;margin:0 0 20px;letter-spacing:-1px}.brand-headline br{display:none}.brand-headline span{display:block}.brand-services{margin:0;gap:8px}.brand-services button{min-height:44px;padding:11px;font-size:12px;justify-content:center}.brand-services small{display:none}.brand-services button[aria-pressed="true"]{transform:none}.login-form-area{width:100%;min-height:0;padding:32px}.login-logo{display:none}.login-title{font-size:28px}.scene-shade{background:linear-gradient(90deg,#061b17b8,#09251c88),linear-gradient(0deg,#071c16e6,transparent)}.scene-frame{display:none}.motion-toggle{position:static;order:2;align-self:center;margin-top:22px}}
@media(max-width:380px){body{padding:22px 18px 24px}.login-form-area{padding:28px 22px}.login-title{font-size:25px}.brand-headline{font-size:29px}.form-check-label,.forgot-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.travel-video{display:none}}

/* A service caption describes the offer, not the location of every road clip. */
.brand-main{padding-top:48px;padding-bottom:32px}
.brand-services{margin-top:28px}
.service-preview{max-width:100%;min-height:250px;margin-top:23px;padding-top:18px;border-top:1px solid #d9c59645;color:#fff}
.service-preview-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.service-kicker{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#dfc994}
.scene-controls{display:flex;align-items:center;gap:6px}.scene-controls>span{font-size:10px;letter-spacing:1px;color:#d1dcd4;margin-right:7px;font-variant-numeric:tabular-nums}
.scene-controls button{width:34px;height:34px;border:1px solid #d8c69850;border-radius:50%;background:#10271f80;color:#eee2c6;font-size:24px;line-height:1}.scene-controls button:hover{background:#345640}
.service-title{font-family:'Readex Pro',sans-serif;font-size:23px;letter-spacing:-.5px;margin:4px 0 6px;line-height:1.35}
.service-detail{font-size:12px;line-height:1.6;color:#d4e0d7;margin:0}
.service-route{max-width:530px;margin-top:17px;padding:15px 17px 19px;border:1px solid #d9c59640;border-radius:12px;background:#0d281fc7;backdrop-filter:blur(12px);color:#edd7ac}.service-route[hidden]{display:none}
.route-stops{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}.route-stops>div:last-child{text-align:right}.route-stops>div:nth-child(2){text-align:center}
.route-label{display:block;color:#b8cbbd;font-size:9px;letter-spacing:.7px;text-transform:uppercase;margin-bottom:5px}.route-stops strong{display:block;font-size:12px;font-weight:500;line-height:1.4;color:#e5eae2}
.service-route[data-stage="pickup"] .route-stops>div:first-child .route-label,.service-route[data-stage="journey"] .route-stops>div:nth-child(2) .route-label,.service-route[data-stage="dropoff"] .route-stops>div:last-child .route-label{color:#ffe3a5}
.route-track{position:relative;height:2px;margin:22px 8px 0;background:repeating-linear-gradient(90deg,#e3c68c88 0 8px,transparent 8px 14px)}
.route-track::before,.route-track::after{content:'';position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:#d5b77a;box-shadow:0 0 0 4px #c9b07118}.route-track::before{left:0}.route-track::after{right:0}
.route-vehicle{position:absolute;top:-18px;left:calc(var(--journey-progress,0) * (100% - 32px));width:32px;height:24px;color:#f8db9e;filter:drop-shadow(0 2px 4px #000);transition:left .3s linear}.route-vehicle svg{display:block;width:32px;height:22px}
@media(max-width:820px){.service-route{padding:12px 12px 17px}.route-stops{gap:8px}.route-stops strong{font-size:11px}.route-label{font-size:8px;letter-spacing:.3px}}
@media(max-width:1100px){.brand-headline{font-size:38px}.service-title{font-size:20px}.brand-main{padding-top:35px;padding-bottom:25px}}
@media(max-width:820px){.brand-main{padding:24px 0 0}.brand-headline{font-size:32px}.brand-services{margin-top:0}.service-preview{margin-top:17px;padding-top:10px;min-height:230px}.service-title{font-size:18px;margin-top:2px}.service-detail{font-size:11px}.scene-controls button{width:38px;height:38px}.service-route{margin-top:12px}.login-shell{gap:20px}}
@media(max-width:380px){.brand-headline{font-size:29px}.service-title{font-size:17px}.brand-services button{font-size:11px}}