/* ============================================================
   CHALLENGER AUTOMATIC TRANSMISSION — MAIN STYLESHEET
   ------------------------------------------------------------
   Theming: all brand colors live in the :root variables below.
   To restyle the site for final branding, edit the variables —
   the rest of the stylesheet follows them.
   ============================================================ */

:root {
  /* Brand palette */
  --c-charcoal:      #15181e;
  --c-charcoal-2:    #1e232c;
  --c-charcoal-3:    #272d38;
  --c-steel:         #8b95a5;
  --c-steel-light:   #c3cad4;
  --c-line:          #e3e6ea;
  --c-bg:            #ffffff;
  --c-bg-alt:        #f6f7f9;
  --c-text:          #1c2027;
  --c-text-muted:    #5c6674;
  --c-red:           #e20914; /* official Challenger brand red */
  --c-red-dark:      #b40710;
  --c-red-on-dark:   #ff5c66; /* lighter red for small text on dark backgrounds */
  --c-on-dark:       #eef0f3;
  --c-on-dark-muted: #9aa3b0;

  /* Type & layout */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
  --container: 1160px;
  --shadow-card: 0 6px 24px rgba(21, 24, 30, 0.08);
  --shadow-card-hover: 0 10px 32px rgba(21, 24, 30, 0.14);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keeps #anchor targets clear of the sticky header */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 800;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-inline-start: 1.2em; }

a { color: var(--c-red); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  transform: translateY(-200%);
  background: var(--c-red);
  color: #fff;
  padding: 0.7em 1.2em;
  z-index: 200;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { transform: translateY(0); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.7em;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--primary { background: var(--c-red); color: #fff; }
.btn--primary:hover { background: var(--c-red-dark); color: #fff; }

.btn--dark { background: var(--c-charcoal); color: #fff; }
.btn--dark:hover { background: var(--c-charcoal-3); color: #fff; }

.btn--ghost { border-color: var(--c-steel-light); color: var(--c-text); background: transparent; }
.btn--ghost:hover { border-color: var(--c-charcoal); color: var(--c-charcoal); }

.btn--ghost-light { border-color: rgba(255,255,255,0.45); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: #fff; color: #fff; }

/* ---------- Header ----------
   Light header so the official Challenger logo (red + gray,
   designed for light backgrounds) displays correctly. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

/* Brand logo (official asset in images/logo/) */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-inline-end: auto;
  flex: none; /* the official logo must never be squeezed */
}
.brand:hover { text-decoration: none; }
.brand-logo { height: 30px; width: auto; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 0.55em 0.9em;
  color: var(--c-text-muted);
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--c-charcoal);
  text-decoration: none;
  background: rgba(21,24,30,0.05);
}
.site-nav a[aria-current="page"] {
  color: var(--c-charcoal);
  box-shadow: inset 0 -3px 0 var(--c-red);
  border-radius: 8px 8px 0 0;
}

.header-cta { flex: none; }
.site-nav .nav-cta-item { display: none; }
.site-nav .nav-cta-item .btn { color: #fff; }
.site-nav .nav-cta-item .btn:hover { background: var(--c-red-dark); }

/* Language switcher (EN ↔ AR) */
.lang-switch {
  flex: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.45em 1.1em;
  border: 1.5px solid var(--c-line);
  border-radius: 100px;
  color: var(--c-text);
}
.lang-switch:hover {
  border-color: var(--c-red);
  color: var(--c-red);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  flex: none;
  background: none;
  border: 2px solid var(--c-line);
  border-radius: 8px;
  color: var(--c-charcoal);
  padding: 0.5em 0.7em;
  cursor: pointer;
  font-size: 1rem;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ---------- Hero ----------
   A real workshop photo (--hero-photo: wide on desktop, a
   soft-focus portrait copy on phones) under a left-weighted dark
   overlay for text contrast. */
.hero {
  --hero-photo: url("../images/home/hero.webp");
  position: relative;
  background:
    linear-gradient(90deg, rgba(16, 18, 24, 0.92) 0%, rgba(16, 18, 24, 0.78) 45%, rgba(16, 18, 24, 0.38) 100%),
    var(--hero-photo) center / cover no-repeat,
    var(--c-charcoal);
  color: var(--c-on-dark);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 9vw, 120px) 0;
  max-width: 640px;
}
.hero__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* white on a red-tinted pill: readable over any part of the photo */
  color: #fff;
  background: rgba(226, 9, 20, 0.28);
  border: 1px solid rgba(226, 9, 20, 0.7);
  padding: 0.4em 1em;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}
.hero__eyebrow span { white-space: nowrap; }  /* a wrapped line never starts with a dot */
.hero h1 { color: #fff; }
.hero p {
  font-size: 1.12rem;
  color: var(--c-on-dark);
  max-width: 54ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
/* Wide screens have a call button in the header, so the hero leaves it
   out there and WhatsApp becomes the main (red) button. */
@media (min-width: 1001px) {
  .hero__actions .hero__call { display: none; }
  .hero__actions .hero__whatsapp { background: var(--c-red); border-color: var(--c-red); }
  .hero__actions .hero__whatsapp:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }
}
/* Below that the header has no call button: Call across the row, the other two under it */
@media (max-width: 1000px) {
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; max-width: 460px; }
  .hero__actions .hero__call { grid-column: 1 / -1; }
}
/* Page hero (inner pages) */
.page-hero {
  background:
    radial-gradient(900px 340px at 90% -20%, rgba(208, 33, 46, 0.16), transparent 60%),
    linear-gradient(160deg, var(--c-charcoal) 0%, var(--c-charcoal-2) 100%);
  color: #fff;
  padding: clamp(44px, 6vw, 72px) 0;
}
.page-hero h1 { margin-bottom: 0.25em; color: #fff; }
.page-hero p {
  color: var(--c-on-dark-muted);
  max-width: 62ch;
  margin: 0;
  font-size: 1.08rem;
}

/* Photo headers (inner pages): a real workshop photo under a solid
   black shade, so the white title stays readable in both languages. */
.page-hero--photo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(240px, 22vw, 340px);
  background: var(--c-charcoal) center / cover no-repeat;
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.page-hero--photo > .container { position: relative; width: 100%; }
.page-hero--photo p { color: var(--c-on-dark); }
.page-hero--about    { background-image: url("../images/headers/about.webp"); }
.page-hero--services { background-image: url("../images/headers/services.webp"); }
.page-hero--gallery  { background-image: url("../images/headers/gallery.webp"); }
.page-hero--contact  { background-image: url("../images/headers/contact.webp"); }

/* ---------- Sections ---------- */
.section { padding: clamp(52px, 7vw, 88px) 0; }
.section--alt { background: var(--c-bg-alt); }
.section--flush-top { padding-top: 0; }
.section--compact { padding: clamp(36px, 4.5vw, 56px) 0; }
.section--dark {
  background: linear-gradient(160deg, var(--c-charcoal) 0%, var(--c-charcoal-2) 100%);
  color: var(--c-on-dark);
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: var(--c-on-dark-muted); }

.section-head { max-width: 640px; margin-bottom: 2.4rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--tight { margin-bottom: 1.2rem; }
.section-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 0.6rem;
}
.section-head p { color: var(--c-text-muted); margin-bottom: 0; }
.section--dark .section-head p { color: var(--c-on-dark-muted); }
.section--dark .section-eyebrow { color: var(--c-red-on-dark); }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--c-charcoal-2); color: var(--c-on-dark); }
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
}
.trust-strip__item {
  background: var(--c-charcoal-2);
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.trust-strip__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.trust-strip__label {
  font-size: 0.88rem;
  color: var(--c-on-dark-muted);
}

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 1.4rem;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(208, 33, 46, 0.09);
  color: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 28px; height: 28px; }
.card p { color: var(--c-text-muted); margin-bottom: 0; }
.card .card__link { display: inline-block; margin-top: 0.9rem; font-weight: 700; }

/* ---------- Riyadh workshop (contact details + hours) ---------- */
.workshop {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-list__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(226, 9, 20, 0.09);
  color: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-list__icon svg { width: 22px; height: 22px; }
.contact-list__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.contact-list a { color: var(--c-text); font-weight: 600; }
.contact-list a:hover { color: var(--c-red); }
/* Call across the full row, the other two buttons side by side below it */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.6rem; }
.actions .btn { padding-inline: 1em; }
.actions .btn:first-child { grid-column: 1 / -1; }

/* Contact page: opening hours with the map under them, as tall as the details beside them */
.workshop__side { align-self: stretch; display: grid; grid-template-rows: auto 1fr; gap: 1.2rem; }

/* Still map (OpenStreetMap) that opens Google Maps. The image is shown at
   its own scale, centred on the workshop, so street names stay readable;
   the pin is drawn on top. The credit line must stay. */
.map-card {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.map-card__link { position: absolute; inset: 0; display: block; }
.map-card__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: center;
  filter: saturate(0.75);  /* calmer colours, closer to the site's palette */
}
.map-card__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  color: var(--c-red);
  transform: translate(-50%, -94%);
  filter: drop-shadow(0 2px 3px rgba(21, 24, 30, 0.4));
}
.map-card__pin svg { display: block; width: 100%; height: 100%; }
.map-card__label {
  position: absolute;
  top: 0.8rem;
  inset-inline-start: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.9em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-text);
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(21, 24, 30, 0.2);
  transition: color 0.18s ease;
}
.map-card__label svg { width: 1.05em; height: 1.05em; }
.map-card__link:hover .map-card__label { color: var(--c-red); }
[dir="rtl"] .map-card__label svg { transform: scaleX(-1); }
.map-card__credit {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  padding: 0.2em 0.6em;
  font-size: 0.7rem;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.88);
}

.hours-card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.8rem;
}
.hours-card h3 { display: flex; align-items: center; gap: 0.5rem; }
.hours-card h3 svg { width: 22px; height: 22px; color: var(--c-red); }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td {
  text-align: start;
  vertical-align: top;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-line);
}
.hours th { font-weight: 700; padding-inline-end: 1rem; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours td span { display: block; white-space: nowrap; }
.hours .closed { color: var(--c-red-dark); font-weight: 700; }

/* ---------- Split sections (transmission / multi-brand) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.split__media img { width: 100%; height: auto; }

.steps { list-style: none; margin: 1.4rem 0 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-bottom: 1.1rem;
  padding-inline-start: 3.2rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.05rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--c-red);
  border: 2px solid rgba(208,33,46,0.4);
  border-radius: 10px;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps strong { display: block; }
.steps span { color: var(--c-text-muted); font-size: 0.95rem; }
.section--dark .steps span { color: var(--c-on-dark-muted); }
.section--dark .steps li::before { color: var(--c-red-on-dark); }

/* ---------- Brand chips ---------- */
.chip-group { margin-bottom: 1.2rem; }
.chip-group h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin-bottom: 0.7rem;
}

/* Home, "Who we serve": the heading with the two tick lists beside it */
.serve {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0, 1fr);
  gap: 1.8rem clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.serve .section-head,
.serve .chip-group { margin-bottom: 0; }
.serve h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.serve .tick-list { grid-template-columns: 1fr; }

/* ---------- Visit us (home) ----------
   A wide workshop photo with one card on it: address, opening hours,
   directions and a link to the Contact page, which has the full details. */
.visit {
  position: relative;
  padding: clamp(48px, 6vw, 84px) 0;
  background: var(--c-charcoal) url("../images/home/visit.webp") center / cover no-repeat;
}
.visit::before { content: ""; position: absolute; inset: 0; background: rgba(16, 18, 24, 0.22); }
.visit > .container { position: relative; }
.visit__card {
  max-width: 480px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(12, 14, 18, 0.35);
}
.visit__card h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.visit__card p { color: var(--c-text-muted); margin-bottom: 0; }
.visit__facts { display: grid; gap: 1rem; margin: 1.3rem 0 0; }
.visit__facts dt {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.visit__facts dd { margin: 0.2rem 0 0; font-weight: 600; }
.visit__hours { border-collapse: collapse; font-weight: 400; }
.visit__hours th,
.visit__hours td { padding: 0 0 0.3rem; text-align: start; vertical-align: top; }
.visit__hours th { padding-inline-end: 1.2rem; font-weight: 600; white-space: nowrap; }
.visit__hours td span { display: block; white-space: nowrap; }
.visit__hours .closed { color: var(--c-red-dark); font-weight: 700; }
.visit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.5rem; margin-top: 1.4rem; }
.visit__more { font-weight: 700; }

/* ---------- Why choose us ---------- */
.why-item { display: flex; gap: 1rem; align-items: flex-start; }
.why-item__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(208, 33, 46, 0.12);
  color: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-item__icon svg { width: 24px; height: 24px; }
@media (min-width: 981px) {
  .grid--4 .why-item { flex-direction: column; gap: 0.8rem; }
}
.why-item h3 { font-size: 1.05rem; margin-bottom: 0.3em; }
.why-item p { color: var(--c-text-muted); margin: 0; font-size: 0.97rem; }
.section--dark .why-item p { color: var(--c-on-dark-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(700px 300px at 15% 120%, rgba(208,33,46,0.28), transparent 60%),
    linear-gradient(150deg, var(--c-charcoal) 20%, var(--c-charcoal-2) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.cta-band h2 { margin-bottom: 0.3em; color: #fff; }
.cta-band p { color: var(--c-on-dark-muted); margin: 0; max-width: 48ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ---------- About page ---------- */
/* How we work: six value cards */
.value-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.value-card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.value-card__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(226, 9, 20, 0.09);
  color: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.value-card__icon svg { width: 24px; height: 24px; }
.value-card h3 { font-size: 1.05rem; margin-bottom: 0.3em; }
.value-card p { color: var(--c-text-muted); margin: 0; font-size: 0.97rem; }

/* Who we serve + Our group, side by side */
.panel-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.panel {
  background: var(--c-bg-alt);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.panel h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
.panel p { color: var(--c-text-muted); }
.panel > :last-child { margin-bottom: 0; }
.panel .chip-group { margin-top: 1.4rem; }
.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.4rem;
  font-weight: 600;
}
.tick-list li,
.service-detail li { display: flex; gap: 0.7rem; align-items: baseline; }
/* an odd last item gets the full row, so a long label is not wrapped */
.tick-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tick-list li::before,
.service-detail li::before {
  content: "";
  flex: none;
  width: 0.38em;
  height: 0.72em;
  border: solid var(--c-red);
  border-width: 0 2px 2px 0;
  margin-inline-start: 0.22em;  /* the rotated tick would otherwise stick out past the text edge */
  transform: translateY(-0.08em) rotate(45deg);
}

/* ---------- Services page ---------- */
/* Jump links under the page header */
.jump-nav { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.jump-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.jump-nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.95em;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  border: 1.5px solid var(--c-line);
  border-radius: 100px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.jump-nav a:hover { border-color: var(--c-red); color: var(--c-red); text-decoration: none; }

/* Service blocks: photo on top, text below */
.service-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.service-detail__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-bg-alt);
}
.service-detail > div { padding: 1.5rem 1.6rem 1.7rem; }
.service-detail h2 { font-size: 1.3rem; }
.service-detail p { color: var(--c-text-muted); }
.service-detail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

/* The specialty: full width, photo beside the text */
.service-detail--feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  margin-bottom: 1.4rem;
}
.service-detail--feature .service-detail__photo { height: 100%; aspect-ratio: 4 / 3; }
.service-detail--feature > div { align-self: center; padding: clamp(1.8rem, 3.5vw, 2.8rem); }
.service-detail--feature h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* The other five: two wide, then three */
.service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4rem; }
.service-grid > * { grid-column: span 2; }
.service-grid > :nth-child(-n+2) { grid-column: span 3; }

/* Vehicles we service: one compact row */
.vehicle-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem 3rem;
  align-items: center;
}
.vehicle-strip .section-head,
.vehicle-strip .chip-group { margin-bottom: 0; }
.vehicle-strip h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
.vehicle-strip .tick-list { grid-template-columns: repeat(4, auto); justify-content: start; }

/* Common questions: always visible (not collapsed), two columns */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
.faq__item { padding: 1.25rem 0; border-top: 1px solid var(--c-line); }
.faq__item h3 { font-size: 1.08rem; margin-bottom: 0.4em; }
.faq__item p { margin: 0; color: var(--c-text-muted); }
.faq__item a[href^="tel:"] { white-space: nowrap; }  /* never split the phone number over two lines */

/* Warranty policy (approved copy — keep wording unchanged) */
.warranty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.2rem clamp(2rem, 5vw, 4rem);
  padding: clamp(1.6rem, 4vw, 3rem);
  background: var(--c-bg-alt);
  border-radius: var(--radius-lg);
}
.warranty h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0; }
.warranty p { color: var(--c-text-muted); }
.warranty .warranty__terms { color: var(--c-text); font-weight: 700; margin-bottom: 0; }

/* ---------- Gallery ----------
   Photo grid in reading order: wide photos take one row, tall
   photos two. The photos are static HTML generated by
   tools/update_gallery.py; js/main.js adds the category filter
   buttons, levels the last row and opens the photo viewer. */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.gallery-filters[hidden] { display: none; }
.filter-btn {
  min-height: 44px;
  padding: 0.5em 1.25em;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1.5px solid var(--c-steel-light);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.filter-btn:hover { border-color: var(--c-charcoal); }
.filter-btn[aria-pressed="true"] {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: #fff;
}

/* Row height is two thirds of a column, so a wide (3:2) photo fits
   one row exactly. It is worked out from the wrapper's width. */
.gallery-wrap { container-type: inline-size; }
.gallery-grid {
  --cols: 4;
  --gap: 1.1rem;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: 170px;  /* browsers without container units */
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * 2 / 3);
  grid-auto-flow: dense;
  gap: var(--gap);
}
.gallery-item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-alt);
}
.gallery-item--tall { grid-row: span 2; }
/* Set by js/main.js on a few of the last photos so the grid ends level */
.gallery-item.is-short { grid-row: span 1; }
.gallery-item.is-big { grid-column: span 2; grid-row: span 2; }
.gallery-item a { display: block; height: 100%; cursor: zoom-in; }
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-item a:hover img { transform: scale(1.03); }

/* Photo viewer (<dialog>, opened from a photo) */
.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0c0e12;
  color: #fff;
}
.viewer[open] { display: flex; align-items: center; justify-content: center; }
.viewer::backdrop { background: transparent; }
.viewer-open { overflow: hidden; }  /* on <html> while the viewer is open */
.viewer__figure {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0 4.6rem;
}
.viewer__img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 9.2rem);
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  border-radius: var(--radius);
}
.viewer__caption { max-width: 60ch; text-align: center; font-size: 0.95rem; color: var(--c-on-dark); }
.viewer__count { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--c-on-dark-muted); }
.viewer__btn {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease;
}
.viewer__btn:hover { background: rgba(255, 255, 255, 0.28); }
.viewer__btn svg { width: 22px; height: 22px; }
.viewer__close { top: 14px; inset-inline-end: 14px; }
.viewer__prev,
.viewer__next { top: calc(50% - 23px); }
.viewer__prev { inset-inline-start: 14px; }
.viewer__next { inset-inline-end: 14px; }
[dir="rtl"] .viewer__prev svg,
[dir="rtl"] .viewer__next svg { transform: scaleX(-1); }

/* ---------- Footer ----------
   Logo and description, then the pages, the Riyadh address and
   the opening hours. The group workshops sit in a quieter strip
   below. Links are brighter than plain text, so it is clear
   what can be clicked. */
.site-footer {
  background: var(--c-charcoal);
  color: var(--c-on-dark-muted);
  padding: clamp(44px, 6vw, 64px) 0 0;
  font-size: 0.95rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 2.2rem clamp(2rem, 4.5vw, 4rem);
  padding-bottom: 2.4rem;
}
.site-footer h3 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__brand p { margin: 0; max-width: 38ch; }
.site-footer address { font-style: normal; margin-bottom: 0.8rem; }
.site-footer a { color: var(--c-on-dark); }
.site-footer a:hover { color: #fff; }

/* The official logo is shown unmodified on a white plate
   (recolouring the approved logo files is not allowed). */
.site-footer .brand {
  display: inline-flex;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  background: #fff;
  border-radius: var(--radius);
}

/* Text link with an icon (directions) */
.footer-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.footer-link svg { flex: none; width: 1.15em; height: 1.15em; color: var(--c-on-dark-muted); }

.site-footer__pages li { padding: 0.25rem 0; }

.footer-hours { border-collapse: collapse; }
.footer-hours th,
.footer-hours td {
  padding: 0 0 0.55rem;
  text-align: start;
  vertical-align: top;
  white-space: nowrap;
}
.footer-hours th {
  padding-inline-end: 1.2rem;
  font-weight: 600;
  color: var(--c-on-dark);
}
.footer-hours td span { display: block; }

/* Group workshops: one compact row each, columns aligned */
.site-footer__group {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem 0 1.2rem;
  font-size: 0.88rem;
}
.site-footer__group h3 { margin-bottom: 0.7rem; }
.site-footer__group li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 24rem) 9.5rem 11.5rem;
  gap: 0.2rem 1.4rem;
  padding: 0.25rem 0;
}
.site-footer__group strong { color: var(--c-on-dark); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__lang {
  font-weight: 700;
  padding: 0.4em 1.1em;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 100px;
}
.site-footer__lang:hover { border-color: #fff; text-decoration: none; }

/* ---------- Page not found (404.shtml) ---------- */
.not-found { padding: clamp(48px, 8vw, 96px) 0; }
.not-found__block { max-width: 34rem; }
.not-found__block + .not-found__block {
  margin-top: 2.6rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--c-line);
}
.not-found__block h1,
.not-found__block h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.not-found__block p { color: var(--c-text-muted); }
.not-found__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .workshop { grid-template-columns: 1fr; }
  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .gallery-grid { --cols: 3; }
  .serve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serve .section-head { grid-column: 1 / -1; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-pair { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid > *,
  .service-grid > :nth-child(-n+2) { grid-column: auto; }
  /* the fifth block takes the full row, photo beside the text */
  .service-grid > :last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-grid > :last-child .service-detail__photo { height: 100%; }
  .service-grid > :last-child > div { align-self: center; }
  .vehicle-strip { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .warranty { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__group li { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .site-footer__group li a { grid-column: 2; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    display: none;
    box-shadow: 0 18px 30px rgba(21,24,30,0.14);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem clamp(18px, 4vw, 32px) 1rem;
  }
  .site-nav a { padding: 0.85em 0.6em; border-radius: 8px; }
  .site-nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--c-red);
    border-radius: 0 8px 8px 0;
    background: rgba(21,24,30,0.04);
  }
  .site-nav .nav-cta-item { display: block; padding-top: 0.8rem; }
  .site-nav .nav-cta-item .btn { display: flex; width: 100%; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .page-hero--about    { background-image: url("../images/headers/about-m.webp"); }
  .page-hero--services { background-image: url("../images/headers/services-m.webp"); }
  .page-hero--gallery  { background-image: url("../images/headers/gallery-m.webp"); }
  .page-hero--contact  { background-image: url("../images/headers/contact-m.webp"); }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .hero__eyebrow { border-radius: 14px; }  /* the label takes two lines here */
  .hero__actions { grid-template-columns: 1fr; max-width: none; }
  /* service cards: icon beside the title, so each card is shorter */
  .card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.9rem; padding: 1.2rem 1.25rem; }
  .card__icon { width: 44px; height: 44px; margin-bottom: 0; }
  .card__icon svg { width: 24px; height: 24px; }
  .card h3 { margin-bottom: 0; }
  .card p { grid-column: 1 / -1; margin-top: 0.7rem; }
  .card .card__link { grid-column: 1 / -1; margin-top: 0.6rem; }
  .grid:has(> .card) { gap: 0.9rem; }
  /* "Why choose" list: smaller icons and tighter rows */
  .grid:has(> .why-item) { gap: 1.05rem; }
  .why-item { gap: 0.85rem; }
  .why-item__icon { width: 38px; height: 38px; border-radius: 10px; }
  .why-item__icon svg { width: 20px; height: 20px; }
  .why-item h3 { font-size: 1rem; margin-bottom: 0.15em; }
  .why-item p { font-size: 0.93rem; }
  .serve { grid-template-columns: 1fr; }
  .serve .section-head + .chip-group .tick-list { grid-template-columns: 1fr 1fr; }  /* four short words */
  /* visit band: the photo on top, the card overlapping its lower edge */
  .visit {
    padding: 200px 0 2.2rem;
    background: var(--c-bg) url("../images/home/visit-m.webp") top center / 100% auto no-repeat;
  }
  .visit::before { display: none; }
  .visit__card { max-width: none; border: 1px solid var(--c-line); box-shadow: var(--shadow-card); }
  .visit__hours th { white-space: normal; }  /* a long day range may wrap, so the row fits the narrow card */
  .value-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .value-card { display: flex; gap: 1rem; padding: 1.2rem; }
  .value-card__icon { margin-bottom: 0; }
  .tick-list { grid-template-columns: 1fr; }
  .gallery-filters { gap: 0.4rem; }
  .filter-btn { min-height: 40px; padding: 0.4em 0.95em; font-size: 0.85rem; }
  .gallery-grid { --cols: 2; --gap: 0.8rem; }
  .viewer__figure { padding: 0 0.6rem; }
  .viewer__img { max-width: calc(100vw - 1.2rem); max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); }
  .viewer__prev,
  .viewer__next { background: rgba(12, 14, 18, 0.6); }
  .viewer__prev { inset-inline-start: 10px; }
  .viewer__next { inset-inline-end: 10px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__pages li { padding: 0; }
  .site-footer__pages a,
  .site-footer__group a,
  .footer-link { padding: 0.65rem 0; }
  .site-footer__pages a { display: block; }
  .site-footer__pages ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .site-footer__group li { display: block; padding: 0.5rem 0; }
  .site-footer__group li > * { display: block; }
  .hero__actions .btn { width: 100%; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1; min-width: 140px; }
  /* jump links: two tidy columns, nothing cut off; the odd last link takes the full row */
  .jump-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.8rem 0; }
  .jump-nav li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .jump-nav a {
    height: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 0.3em 0.7em;
    font-size: 0.85rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    border-radius: var(--radius);
  }
  .service-detail--feature,
  .service-grid,
  .service-grid > :last-child { display: flex; flex-direction: column; }
  .service-grid { gap: 1rem; }
  .service-detail--feature { margin-bottom: 1rem; }
  .service-detail--feature .service-detail__photo { height: auto; aspect-ratio: 16 / 9; }
  .service-detail__photo,
  .service-grid > :last-child .service-detail__photo { height: auto; aspect-ratio: 2 / 1; }
  .service-detail > div,
  .service-detail--feature > div,
  .service-grid > :last-child > div { align-self: stretch; padding: 1.2rem 1.25rem 1.4rem; }
  .vehicle-strip .tick-list { grid-template-columns: repeat(2, auto); }
  .actions { grid-template-columns: 1fr; }
  .hours th, .hours td { display: block; padding: 0; border: 0; }
  .hours th { padding-top: 0.7rem; }
  .hours td { padding-bottom: 0.7rem; border-bottom: 1px solid var(--c-line); }
}

/* Small phones: the header row (logo, menu, language) and the footer
   opening hours must fit the screen width. */
@media (max-width: 420px) {
  .site-header__inner { gap: 0.75rem; }
}
@media (max-width: 350px) {
  .site-header__inner { gap: 0.5rem; }
  /* the wide English logo, scaled down in proportion */
  :root:not([dir="rtl"]) .site-header .brand-logo { height: 24px; }
  .footer-hours th { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- RTL (Arabic pages, <html dir="rtl">) ----------
   Flex/grid direction and text alignment flip automatically;
   the rules below handle the remaining details. */
[dir="rtl"] body,
[dir="rtl"] {
  /* Keep the system stack — it renders Arabic well on all
     platforms (Segoe UI, SF Arabic/Geeza Pro, Noto). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma,
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Letter-spacing is a Latin-typography device — it breaks the
   joined Arabic script, so reset it everywhere. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero__eyebrow,
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .contact-list__label,
[dir="rtl"] .visit__facts dt,
[dir="rtl"] .chip-group h3,
[dir="rtl"] .site-footer h3 {
  letter-spacing: 0;
}

/* Contact header: a mirrored copy of the photo, so the title sits on
   its dark side as it does in English. (Lettering on the cars is
   softened in that copy so nothing reads backwards.) Phones keep the
   portrait photo. */
@media (min-width: 621px) {
  [dir="rtl"] .page-hero--contact { background-image: url("../images/headers/contact-ar.webp"); }
}

/* Mirror the hero overlay so the dark (readable) side sits
   behind the text, which starts on the right in RTL. */
[dir="rtl"] .hero {
  background:
    linear-gradient(270deg, rgba(16, 18, 24, 0.92) 0%, rgba(16, 18, 24, 0.78) 45%, rgba(16, 18, 24, 0.38) 100%),
    var(--hero-photo) center / cover no-repeat,
    var(--c-charcoal);
}

@media (max-width: 1000px) {
  [dir="rtl"] .site-nav a[aria-current="page"] {
    box-shadow: inset -3px 0 0 var(--c-red);
    border-radius: 8px 0 0 8px;
  }
}

/* Phones: the hero text covers the whole photo, so the photo there is
   a soft-focus portrait copy (images/home/hero-m.webp is blurred on
   purpose) under an even shade. It gives colour without lines behind
   the words. Placed last so it also applies to the Arabic hero rule
   above. */
@media (max-width: 620px) {
  .hero,
  [dir="rtl"] .hero {
    --hero-photo: url("../images/home/hero-m.webp");
    background:
      linear-gradient(rgba(16, 18, 24, 0.76), rgba(16, 18, 24, 0.76)),
      var(--hero-photo) center / cover no-repeat,
      var(--c-charcoal);
  }
}