/* =========================================================
   On Set — Design System (tokens + components)
   Source: On Set Brand Identity Guidelines V04 (colours, logo, pattern)
   ========================================================= */
@font-face { font-family: "Ruqaa"; src: url(fonts/THARWATEMARARUQAA.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Thmanyah"; src: url(fonts/thmanyahsans-Regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Thmanyah"; src: url(fonts/thmanyahsans-Medium.otf) format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Thmanyah"; src: url(fonts/thmanyahsans-Bold.otf) format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Thmanyah"; src: url(fonts/thmanyahsans-Black.otf) format("opentype"); font-weight: 900; font-display: swap; }

:root {
  /* brand neutrals (guidelines 3.1) */
  --c-0: #000000; --c-1: #0b0b0b; --c-2: #141414; --c-3: #1f1f1f; --c-4: #585858; --c-5: #909090; --c-6: #c7c7c7; --c-7: #ffffff;
  /* brand accents (guidelines 3.1) */
  --yellow: #fff200; --red: #db2828; --purple: #8b22bb; --blue: #584dff; --green: #37af92;
  /* fleet colour mapping (as in the company profile) */
  --v-mahzam: var(--green); --v-moazzeb: var(--blue); --v-mogallet: var(--purple); --v-fazaa: var(--yellow); --v-mazyoon: var(--red);
  /* semantic */
  --bg: var(--c-0); --surface: var(--c-2); --surface-2: var(--c-3); --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.2);
  --text: #f4f4f2; --text-2: rgba(244,244,242,.66); --text-3: rgba(244,244,242,.42); --accent: var(--yellow);
  /* type */
  --f-ar: "Thmanyah", "Segoe UI", Tahoma, sans-serif;
  --f-display: "Ruqaa", "Thmanyah", serif;
  --f-lat: "Varino", "Michroma", "Poppins", sans-serif;   /* Varino = brand primary (needs commercial licence); Michroma stands in */
  --f-lat-body: "Poppins", sans-serif;
  --t-display: clamp(64px, 9vw, 150px);
  --t-h1: clamp(48px, 6vw, 92px);
  --t-h2: clamp(30px, 3.4vw, 46px);
  --t-h3: clamp(20px, 1.7vw, 25px);
  --t-lead: clamp(18px, 1.5vw, 22px);
  --t-body: 17px; --t-small: 14px; --t-label: 10.5px;
  /* space (4-pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --gutter: clamp(16px, 4vw, 64px); --maxw: 1320px;
  /* shape: the "N corner" — rounded top-left + bottom-right, like the two halves of the On Set mark */
  --r: 26px; --r-n: var(--r) 0 var(--r) 0; --r-s: 14px 0 14px 0;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- base ---------- */
.ds * { box-sizing: border-box; }
.ds { background: var(--bg); color: var(--text); font-family: var(--f-ar); font-size: var(--t-body); line-height: 1.8; -webkit-font-smoothing: antialiased; }
.ds img { display: block; max-width: 100%; }
.wrap { width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---------- type ---------- */
.t-display { font-family: var(--f-display); font-weight: 400; font-size: var(--t-display); line-height: 1.12; }
.t-h1 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-h1); line-height: 1.2; }
.t-h2 { font-weight: 900; font-size: var(--t-h2); line-height: 1.35; }
.t-h3 { font-weight: 700; font-size: var(--t-h3); line-height: 1.5; }
.t-lead { font-weight: 500; font-size: var(--t-lead); line-height: 1.75; color: var(--text-2); }
.t-small { font-size: var(--t-small); color: var(--text-2); }
.t-label { font-family: var(--f-lat); font-size: var(--t-label); letter-spacing: .32em; text-transform: uppercase; color: var(--text-3); }
.t-num { font-family: var(--f-lat); font-weight: 400; direction: ltr; unicode-bidi: isolate; letter-spacing: .02em; }
.hl { color: var(--accent); }

/* ---------- icons ---------- */
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico .a { stroke: var(--accent); }
.ico .a.f { fill: var(--accent); stroke: none; }
.ico--lg { font-size: 40px; } .ico--md { font-size: 28px; } .ico--sm { font-size: 20px; }

/* ---------- section header (brand: giant cropped numeral + numbered eyebrow) ---------- */
.shead { position: relative; padding-top: var(--s-9); margin-bottom: var(--s-8); }
.shead__num { position: absolute; left: 0; top: 24px; font-family: var(--f-lat-body); font-weight: 600; font-size: clamp(120px, 16vw, 260px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); direction: ltr; pointer-events: none; user-select: none; }
.shead__eyebrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.shead__eyebrow b { font-family: var(--f-lat); font-weight: 400; font-size: 12px; color: var(--accent); direction: ltr; }
.shead__eyebrow i { width: 36px; height: 1px; background: var(--accent); }
.shead__title { margin: 0 0 var(--s-4); }
.shead__lead { max-width: 56ch; margin: 0; }

/* ---------- buttons (sharp, like the Lamborghini configurator) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border: 0; font-family: var(--f-ar); font-weight: 700; font-size: 15.5px; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease); text-decoration: none; }
.btn .ico { font-size: 20px; }
.btn--primary { background: var(--accent); color: #000; }
.btn--primary .ico .a { stroke: #000; }
.btn--primary:hover { background: #fff; }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.btn-ico { width: 48px; height: 48px; display: inline-grid; place-items: center; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line-2); cursor: pointer; transition: background .3s, border-color .3s; }
.btn-ico .ico { font-size: 22px; }
.btn-ico:hover, .btn-ico.is-on { border-color: var(--accent); background: rgba(255,242,0,.1); }

/* ---------- tags (Porsche-style chips) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; color: var(--text-2); }
.tag--strong { background: var(--text); color: #000; font-weight: 700; }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); }

/* ---------- spec strip (Lamborghini: label over big value, thin dividers) ---------- */
.specs { display: flex; gap: 0; }
.spec { padding-inline: var(--s-5); border-inline-start: 1px solid var(--line-2); }
.spec:first-child { padding-inline-start: 0; border: 0; }
.spec__label { font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.spec__value { display: flex; align-items: baseline; gap: 6px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25; font-weight: 900; }
.spec__value small { font-size: 14px; font-weight: 500; color: var(--text-2); }

/* ---------- vehicle card (Porsche: the van breaks out over the card) ---------- */
.vcard { position: relative; padding: 120px var(--s-6) var(--s-6); margin-top: 90px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-radius: var(--r-n); border-top: 3px solid var(--c, var(--accent)); }
.vcard__img { position: absolute; top: -96px; inset-inline: 6%; height: 200px; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0,0,0,.6)); }
.vcard__name { font-family: var(--f-display); font-weight: 400; font-size: 46px; line-height: 1.3; margin: 0; }
.vcard__type { margin: 0 0 var(--s-4); color: var(--text-2); font-weight: 500; }
.vcard .specs { margin: var(--s-5) 0; }
.vcard__link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; }
.vcard__link .ico { font-size: 18px; }

/* ---------- service / value tiles ---------- */
.tile { position: relative; padding: var(--s-6); background: var(--surface); border-radius: var(--r-s); transition: background .4s, transform .4s var(--ease); }
.tile:hover { background: var(--surface-2); transform: translateY(-4px); }
.tile__ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-5); border-radius: var(--r-s); background: rgba(255,255,255,.05); font-size: 34px; }
.tile__num { position: absolute; top: var(--s-5); inset-inline-end: var(--s-5); font-family: var(--f-lat); font-size: 12px; color: var(--text-3); }
.tile__title { margin: 0 0 6px; font-weight: 700; font-size: 18px; line-height: 1.55; }
.tile__text { margin: 0; color: var(--text-2); font-size: 15px; }

/* ---------- stats (infographic counters) ---------- */
.stat { padding: var(--s-6) 0; border-top: 1px solid var(--line-2); }
.stat__value { font-family: var(--f-lat); font-size: clamp(56px, 6vw, 96px); line-height: 1; color: var(--accent); direction: ltr; text-align: right; }
.stat__label { margin-top: var(--s-3); font-weight: 700; font-size: 17px; }
.stat__note { color: var(--text-2); font-size: 14px; }

/* ---------- KSA coverage map ---------- */
.ksa { width: 100%; height: auto; overflow: visible; }
.ksa__land { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.35); stroke-width: 1.2; }
.ksa__route { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .7; }
.ksa__city { fill: #fff; }
.ksa__hq { fill: var(--accent); }
.ksa__pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ksaPulse 2.4s var(--ease) infinite; }
.ksa__label { font-family: var(--f-ar); font-size: 12px; fill: var(--text-2); }
.ksa__label--hq { fill: #fff; font-weight: 700; font-size: 15px; }
@keyframes ksaPulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* ---------- brand pattern (guidelines 2.3: repeated N marks) ---------- */
.pattern-n {
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='790 150 400 440' width='56' height='62'%3E%3Cpath fill='%23fff' d='M796 370V228A76 76 0 0 1 938 192L1033 370ZM1185 369V511A76 76 0 0 1 1043 547L948 369Z'/%3E%3Cpath fill='%23fff200' d='M1130 154H1185V182Q1185 203 1167 203Q1157 203 1152 194ZM851 585H796V557Q796 536 814 536Q824 536 829 545Z'/%3E%3C/svg%3E");
  background-size: 56px 62px;
}
.pattern-n--faint { opacity: .06; }