/* HAFA — hava.sa  (v3)
   v2 structure (car stage + picker) in the original theme:
   stone ground, ink type, Amiri headlines, one oxblood accent for price and the main action.
   Arabic-first; logical properties handle LTR. */

:root{
  --floor:#EDEBE5;       /* stone */
  --white:#FBFAF7;       /* paper */
  --black:#121212;       /* ink */
  --grey:#5E5D58;        /* pewter, 5.5:1 on stone */
  --line:#CFCCC2;
  --ghost:#DFDCD3;       /* the big model name behind each car */
  --red:#8E1B1F;         /* oxblood */
  --red-deep:#6E1317;
  --band-grey:#B5B2A9;
  --band-line:#34332F;

  --font:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --display:"Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --max:1280px;
  --gut:clamp(16px, 4vw, 48px);
}
[dir=ltr]{--display:"Cormorant Garamond", Georgia, serif}
.display,.wm-ar,.car-ghost,.car-name,.h2,.step-n{font-family:var(--display); font-weight:700}
[dir=ltr] .display,[dir=ltr] .car-ghost,[dir=ltr] .car-name,[dir=ltr] .h2,[dir=ltr] .step-n{font-weight:600; letter-spacing:-.01em; font-variant-numeric:lining-nums}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; color-scheme:light}
[id]{scroll-margin-top:84px}
body{
  margin:0; background:var(--floor); color:var(--black);
  font-family:var(--font); font-weight:400; font-size:1rem; line-height:1.8;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
[dir=ltr] body{line-height:1.6}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0; padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.band :focus-visible{outline-color:var(--white)}
.ltr{direction:ltr; unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
::selection{background:var(--red); color:#fff}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}

/* Saudi riyal symbol as a mask, so it takes the text colour */
.sar{
  display:inline-block; width:.6em; height:.68em; flex:none; background-color:currentColor;
  -webkit-mask:var(--sar) no-repeat center / contain; mask:var(--sar) no-repeat center / contain;
}
:root{--sar:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201124.14%201256.39'%3E%3Cpath%20d='M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z'/%3E%3Cpath%20d='M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E")}

.skip{position:absolute; inset-inline-start:8px; top:-80px; background:var(--black); color:var(--white); padding:10px 16px; z-index:100}
.skip:focus{top:8px}

/* ---------- Buttons: red = the main action, ink = everything else ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:48px; padding:0 1.35em; border:1px solid transparent; border-radius:2px;
  font:inherit; font-weight:500; font-size:.95rem; line-height:1.2; cursor:pointer; white-space:nowrap;
  transition:background-color .15s, color .15s, border-color .15s;
}
.btn svg{flex:none}
.btn-black{background:var(--red); color:#fff}
.btn-black:hover{background:var(--red-deep)}
.btn-line,.btn-wa{border-color:var(--black); color:var(--black); background:transparent}
.btn-line:hover,.btn-wa:hover{background:var(--black); color:var(--white)}
.top .btn-wa{background:var(--black); color:var(--white)}
.top .btn-wa:hover{background:#000}
.band .btn-wa,.visit .btn-wa{background:var(--red); border-color:var(--red); color:#fff}
.band .btn-wa:hover,.visit .btn-wa:hover{background:var(--red-deep); border-color:var(--red-deep)}
.btn-wide{width:100%}

/* ---------- Header ---------- */
.top{position:sticky; top:0; z-index:50; background:rgba(237,235,229,.9); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.top-in{display:flex; align-items:center; gap:clamp(12px,3vw,40px); min-height:68px}
.wordmark{display:inline-flex; flex-direction:column; justify-content:center; line-height:1; gap:1px; min-height:44px}
.wm-ar{font-family:"Amiri", serif; font-weight:700; font-size:1.9rem; line-height:1}
.wm-en{font-family:"Cormorant Garamond", Georgia, serif; font-weight:600; font-size:.72rem; letter-spacing:.32em; color:var(--grey); padding-inline-start:.1em}
[dir=ltr] .wordmark{flex-direction:column-reverse; gap:0}
[dir=ltr] .wm-en{font-size:1.75rem; letter-spacing:.14em; color:var(--black); padding:0; line-height:1}
[dir=ltr] .wm-ar{font-size:.95rem; color:var(--grey); line-height:1.1}
.nav{display:flex; gap:clamp(14px,2.4vw,32px); font-size:.95rem; margin-inline-end:auto}
.nav a{padding:8px 0; border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--black)}
.top-actions{display:flex; align-items:center; gap:8px}
.lang{font:inherit; font-size:.9rem; font-weight:500; cursor:pointer; background:none; border:0; color:var(--black); min-height:44px; padding:0 .8em; border-radius:2px}
.lang{text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:.45em; transition:text-decoration-color .15s}
.lang:hover{text-decoration-color:var(--black)}
.top .btn{min-height:44px; padding:0 1.15em}
@media (max-width:720px){
  .nav{display:none}
  .top-in{justify-content:space-between; min-height:60px}
  .wm-ar{font-size:1.65rem}
}

/* ---------- Stage: one car large, six to choose from ---------- */
.stage-wrap{padding-top:clamp(12px,2.5vw,28px); padding-bottom:clamp(40px,6vw,88px)}
.intro{font-size:clamp(1rem,1.5vw,1.2rem); font-weight:500; color:var(--grey); margin-bottom:clamp(8px,2vw,20px)}

/* Without JS every car is simply listed, one after another. */
.car{padding-block:28px; border-top:1px solid var(--line)}
.car-art{position:relative; container-type:inline-size; aspect-ratio:16/10; overflow:hidden; --ar:.625;
  --roof:calc(9 + min(66, 92 * var(--hw,.5) / var(--ar)))}   /* where the roof sits, % from the bottom */
.car-ghost{
  position:absolute; inset-inline:0; text-align:center; white-space:nowrap;
  bottom:calc(var(--roof) * 1% - var(--gs,24) * var(--gk,1) * .5cqi);
  line-height:1; color:var(--ghost); font-size:calc(var(--gs,24) * var(--gk,1) * 1cqi);
  user-select:none; pointer-events:none; z-index:-1;
}
[dir=rtl] .car-ghost{line-height:1.5; bottom:calc(var(--roof) * 1% - var(--gs,24) * var(--gk,1) * .66cqi)}
.stage{isolation:isolate}
.car-art img{
  position:absolute; inset-inline:4%; bottom:9%; width:92%; height:66%;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.22));
}
.car-art::after{ /* soft contact shadow on the floor */
  content:""; position:absolute; inset-inline:10%; bottom:4.5%; height:9%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.28) 0%, rgba(0,0,0,.12) 40%, transparent 70%);
  z-index:0;
}
.car-art img{z-index:1}
.car-kind{color:var(--grey); font-size:.95rem; font-weight:500}
.car-name{font-size:clamp(1.75rem,3.6vw,3.1rem); line-height:1.3; text-wrap:balance}
[dir=ltr] .car-name{font-size:clamp(1.9rem,4vw,3.5rem); line-height:1.05}
.rate{display:flex; align-items:baseline; gap:.28em; line-height:1; margin-top:clamp(10px,1.6vw,20px); color:var(--red)}
.rate .num{font-weight:600; font-size:clamp(2.6rem,5.6vw,4.4rem); letter-spacing:-.02em}
.rate .sar{font-size:clamp(1.8rem,3.9vw,3rem)}
.rate small{font-size:1rem; color:var(--grey); font-weight:400; margin-inline-start:.2em}
.car-body{display:flex; flex-direction:column; gap:18px}
.car-blurb{max-width:44ch; font-size:1.02rem}
.specs{display:flex; flex-wrap:wrap; gap:4px 22px}
.specs li{font-size:.92rem; color:var(--grey); line-height:1.7}
.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.unavail{display:inline-flex; align-items:center; min-height:48px; padding:0 1.2em; border:1px solid var(--line); border-radius:2px; color:var(--grey); font-weight:500; font-size:.95rem}
.car.is-unavailable .car-art img{filter:grayscale(1) opacity(.5)}
.car.is-unavailable .rate{color:var(--grey)}

.picker{display:grid; grid-template-columns:repeat(3,1fr); column-gap:14px; border-bottom:1px solid var(--line)}
.pick{
  position:relative; display:grid; justify-items:center; gap:2px; padding:16px 6px 14px; text-align:center;
  border-top:1px solid var(--line); min-width:0;
}
.pick::before{  /* the rule */
  content:""; position:absolute; inset-inline:0; top:-1px; height:2px; background:var(--grey);
  transform:scaleX(0); transform-origin:inline-start; transition:transform .28s cubic-bezier(.2,.7,.2,1), background-color .15s;
}
[dir=rtl] .pick::before{transform-origin:right}
[dir=ltr] .pick::before{transform-origin:left}
.pick:hover::before,.pick:focus-visible::before{transform:scaleX(1)}
.pick[aria-current=true]::before{transform:scaleX(1); background:var(--black)}
.pick .pk-name{color:var(--grey); transition:color .15s}
.pick:hover .pk-name,.pick[aria-current=true] .pk-name{color:var(--black)}
.pick[aria-current=true] .pk-name{font-weight:600}
.pick img{height:clamp(44px,6.2vw,76px); width:100%; object-fit:contain; object-position:center bottom; margin-bottom:6px}
.pk-name{font-size:.85rem; font-weight:500; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.pk-rate{display:inline-flex; align-items:baseline; gap:.25em; font-weight:600; font-size:1.05rem; line-height:1.3; color:var(--red)}
.pk-rate .sar{font-size:.85em}
.pick.is-unavailable img{filter:grayscale(1) opacity(.45)}
.pick.is-unavailable .pk-rate{color:var(--grey); font-weight:500; font-size:.85rem}

/* With JS: only the chosen car shows, and its parts are laid out around the picker. */
.js .stage{display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"art" "head" "pick" "body"; row-gap:0}
.js .car{display:none; padding:0; border:0}
.js .car.is-active{display:contents}
.js .car-art{grid-area:art}
.js .car-head{grid-area:head; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-height:var(--head-h,5.4rem); padding-bottom:16px}
.js .car-head .rate{margin-top:0; flex:none}
.js .car-head .rate small{display:none}
.js .picker{grid-area:pick}
.js .car-body{grid-area:body; padding-top:22px; min-height:var(--body-h,0)}
.js .stage.is-measuring .car{display:contents}
.js .stage.is-measuring .car-head,.js .stage.is-measuring .car-body{min-height:0; align-self:start}
.fromday{color:var(--grey); font-size:.9rem}
@media (max-width:899px){
  .js .car-name{font-size:1.6rem}
  .js .car-kind{font-size:.85rem}
  .js .rate .num{font-size:2.3rem}
  .js .rate .sar{font-size:1.6rem}
  .js .car-art{margin-inline:calc(var(--gut) * -1); --gk:.78}
  .actions .btn{flex:1 1 auto}
  .js .car-body .actions{order:-1}
  .js .car-art img{inset-inline:7%; width:86%}
}
@media (min-width:900px){
  .picker{grid-template-columns:repeat(6,1fr)}
  .js .stage{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(24px,3vw,48px);
    grid-template-areas:"head art" "body art" "pick pick"; grid-template-rows:auto 1fr auto;
  }
  .js .car-art{align-self:end; margin-bottom:8px; overflow:visible}
  .js .car-head{flex-direction:column; align-items:stretch; justify-content:flex-end; gap:0; padding:clamp(8px,2vw,28px) 0 0}
  .js .car-head .rate{margin-top:clamp(10px,1.6vw,20px)}
  .js .car-head .rate small{display:inline}
  .js .car-body{padding:26px 0 36px}
  html:not(.js) .car{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:48px}
  html:not(.js) .car-art{grid-column:2; grid-row:1 / span 2}
}

@media (min-width:900px) and (max-height:820px){
  .js .car-art{aspect-ratio:16/8.6; --ar:.5375}
  .stage-wrap{padding-top:8px}
  .intro{margin-bottom:0}
  .js .car-body{padding:18px 0 24px; gap:14px}
  .pick{padding:12px 6px 8px}
  .pick img{height:54px}
}

/* The one moment of motion: the chosen car rolls in. */
@media (prefers-reduced-motion:no-preference){
  .js .car.is-active .car-art img{animation:roll-in .55s cubic-bezier(.2,.7,.2,1) both}
  .js .car.is-active .car-ghost{animation:fade-in .5s ease-out both}
  @keyframes roll-in{from{opacity:0; translate:var(--from,-7%) 0} to{opacity:1; translate:0 0}}
  @keyframes fade-in{from{opacity:0} to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}

/* ---------- Booking band ---------- */
.band{background:var(--black); color:var(--white); padding-block:clamp(48px,7vw,96px)}
.band-in{display:grid; gap:clamp(24px,4vw,48px)}
.h2{font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.3; text-wrap:balance}
[dir=ltr] .h2{font-size:clamp(2.2rem,4.8vw,3.8rem); line-height:1.08}
.band-copy p{color:var(--band-grey); max-width:46ch; margin-top:10px}
.book-form{display:grid; gap:16px; grid-template-columns:1fr 1fr}
.book-form label{display:grid; gap:6px; font-size:.85rem; color:var(--band-grey); min-width:0}
.f-car,.f-where,.quote,.book-form .btn,.book-form .fine{grid-column:1 / -1}
.book-form select,.book-form input{
  font:inherit; font-size:1rem; color:var(--white); background:#1C1C1A; border:1px solid var(--band-line); border-radius:2px;
  height:54px; padding:0 14px; width:100%; min-width:0; color-scheme:dark;
}
.book-form select:hover,.book-form input:hover{border-color:#5a5852}
.book-form input[type=date]{direction:ltr}
[dir=rtl] .book-form input[type=date]{text-align:right}
.quote{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; padding-top:18px; margin-top:4px; border-top:1px solid var(--band-line)}
.q-line{color:var(--band-grey); font-size:.95rem}
.q-total{display:inline-flex; align-items:baseline; gap:.25em; font-weight:600; font-size:clamp(2rem,5vw,3rem); line-height:1; color:#5a5852}
.q-total .sar{font-size:.72em}
.quote.has-total .q-total{color:var(--white)}
.quote.is-error .q-line{color:#FFB4A9}
.fine{font-size:.8rem; color:var(--band-grey); line-height:1.7}
@media (min-width:900px){
  .band-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start}
  .book-form{grid-template-columns:repeat(4,1fr)}
  .f-car,.f-where{grid-column:span 2}
  .f-from{grid-column:span 2}.f-to{grid-column:span 2}
  .quote{grid-column:1 / span 2; border:0; padding:0; margin:0; align-self:center; flex-direction:column; align-items:flex-start; gap:6px}
  .book-form .btn{grid-column:3 / span 2; align-self:end; min-height:58px}
}

/* ---------- How it works ---------- */
.how{padding-block:clamp(48px,7vw,96px)}
.steps{display:grid; gap:28px; margin-top:clamp(24px,3vw,40px)}
.steps li{border-top:1px solid var(--black); padding-top:14px}
.step-n{display:block; font-size:2.2rem; color:var(--red); line-height:1.2}
[dir=ltr] .step-n{font-size:2.6rem; line-height:1}
.steps h3{font-size:1.15rem; font-weight:600; line-height:1.6; margin-top:4px}
.steps p{color:var(--grey); max-width:36ch; margin-top:2px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px)}}

/* ---------- Showroom & contact ---------- */
.visit{padding-bottom:clamp(48px,7vw,96px)}
.visit-in{display:grid; gap:clamp(24px,4vw,56px)}
.photos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.photos img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px}
.visit-info{display:grid; gap:22px; align-content:start}
.contact-list{display:grid; gap:0; border-top:1px solid var(--line)}
.contact-list > div{display:grid; grid-template-columns:7.5em 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline}
.contact-list dt{color:var(--grey); font-size:.9rem}
.contact-list dd{font-weight:500; font-size:1.05rem; line-height:1.6}
.contact-list a{display:inline-block; padding-block:8px; margin-block:-8px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em}
.contact-list a:hover{text-decoration:none}
.visit .actions{margin-top:4px}
@media (min-width:900px){.visit-in{grid-template-columns:minmax(0,6fr) minmax(0,6fr); align-items:center}}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line); color:var(--grey); font-size:.85rem; padding-block:22px 28px}
.foot-in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px}