/* =============================================================================
   app.css — direction-neutral core.

   RULE 1, enforced by review and later by CI: no physical properties in this file.
   margin-inline-start, padding-block, inset-inline-end, border-start-start-radius,
   text-align: start. One authored stylesheet serves both directions; rtl.css exists
   only for the handful of genuine physical exceptions and is expected to stay small.

   Token layers, outermost first:
     --bs-*     Bootstrap 5.3 core variables — the substrate: overridden, never forked
     --hha-*    core primitives, shared by all four brands
     --brand-*  semantic, redefined per brand in /css/brands/*.css
     --cmp-*    component-level, derived; never redefined in a brand file
   ========================================================================== */

/* ---------- core primitives: the only things four brands agree on ---------- */
:root {
  /* spacing — 4px grid */
  --hha-1: 4px;   --hha-2: 8px;   --hha-3: 12px;  --hha-4: 16px;
  --hha-5: 24px;  --hha-6: 32px;  --hha-7: 40px;  --hha-8: 48px;
  --hha-9: 64px;  --hha-10: 80px; --hha-12: 96px; --hha-14: 112px;
  --hha-16: 128px; --hha-20: 160px;

  /* motion — measured from Aston Martin's own compiled stylesheet, not invented.
     Zero bounce, zero elastic, zero back, zero overshoot: their real CSS contains none. */
  --ease-sine: cubic-bezier(.39, .575, .565, 1);   /* carries almost everything */
  --ease-expo: cubic-bezier(.19, 1, .22, 1);       /* used EXACTLY ONCE per page */
  --dur-micro: 250ms;
  --dur-reveal: 700ms;
  --dur-hero: 1200ms;

  /* reveal travel is 28px, never 100px */
  --reveal-dist: 28px;

  --hha-z-head: 100;
  --hha-maxw: 1440px;

  /* Brand defaults. Every one of these is overridden per brand; they exist so a page
     without a brand file still renders as a finished page rather than an unstyled one. */
  --brand-bg: #FFFFFF;
  --brand-fg: #14181D;
  --brand-fg-mid: #4A535E;
  --brand-fg-dim: #6E7783;
  --brand-rule: #DEDBD4;
  --brand-accent: #9A7B3F;

  --brand-measure: 64ch;
  --brand-radius: 4px;
  --brand-density: 1;
  --brand-section: var(--hha-14) var(--hha-9);     /* block-start block-end rhythm */
  --brand-shadow: 0 1px 3px rgba(0, 0, 0, .12);

  --brand-display: clamp(2rem, 6.5vw, 3.5rem);
  --brand-h2: 2rem;
  --brand-body: 1rem;
  --brand-lh-body: 1.55;      /* Latin. arabic.css raises this to 1.75 */
  --brand-lh-display: 1.08;

  --brand-dur: var(--dur-reveal);
  --brand-ease: var(--ease-sine);

  --brand-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font-display: var(--brand-font);
}

/* Direction as a token, not a literal. Five minutes of work that every generic template
   gets wrong, and that an Arabic reader notices immediately. */
[dir="ltr"] { --reveal-x: calc(var(--reveal-dist) * -1); --grad-to: to right; }
[dir="rtl"] { --reveal-x: var(--reveal-dist);                --grad-to: to left;  }

/* ---------- reset deltas on top of Bootstrap reboot ---------- */
* { box-sizing: border-box; }

body {
  background: var(--brand-bg);
  color: var(--brand-fg);
  font-family: var(--brand-font);
  font-size: var(--brand-body);
  line-height: var(--brand-lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Arabic never justifies: without kashida support it renders as rivers of white.
   text-align: start, always — and it is set here so no component can forget. */
p, li, dd, blockquote, figcaption { text-align: start; }

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--brand-font-display);
  line-height: var(--brand-lh-display);
  text-wrap: balance;
  margin: 0;
}

a { color: inherit; }

/* Focus rings are 2px at 2px offset and must clear 3:1 against BOTH the near-black
   Aston Martin ground and the parchment corporate ground — the exact place where
   restraint palettes normally kill focus visibility. */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  inset-inline-start: var(--hha-4);
  inset-block-start: calc(var(--hha-4) * -6);
  z-index: calc(var(--hha-z-head) + 10);
  background: var(--brand-fg);
  color: var(--brand-bg);
  padding: var(--hha-3) var(--hha-5);
  text-decoration: none;
  transition: inset-block-start var(--dur-micro) var(--ease-sine);
}
.skip:focus { inset-block-start: var(--hha-4); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--hha-maxw);
  margin-inline: auto;
  padding-inline: clamp(var(--hha-5), 5vw, var(--hha-10));
}

.section { padding-block: var(--brand-section); }

.measure { max-width: var(--brand-measure); }

/* ---------- masthead ---------- */
.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--hha-z-head);
  /* Opaque by default: a translucent bar over a hero photograph makes nav contrast a
     function of the image, which is unmeasurable and fails unpredictably. */
  background: var(--brand-bg);
  border-block-end: 1px solid var(--brand-rule);
}
/* Only where the browser can actually blur do we allow any translucency — and even
   then 94%, not 86%, so the worst case stays close to the brand ground. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head {
    background: color-mix(in srgb, var(--brand-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
  }
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: var(--hha-6);
  min-block-size: calc(64px * var(--brand-density));
}
.wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--hha-2);
  text-decoration: none;
  font-family: var(--brand-font-display);
  letter-spacing: .16em;
  font-weight: 600;
  flex: none;
}
.wordmark__img {
  block-size: 34px; inline-size: auto; display: block;
  /* the mark is a fixed brand blue and is never recoloured per brand */
}
.wordmark__est {
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--brand-fg-mid);
  font-variant-numeric: tabular-nums;
}
.site-nav {
  display: flex;
  gap: var(--hha-6);
  margin-inline-start: auto;
  font-size: .82rem;
  letter-spacing: .04em;
}
.site-nav a {
  text-decoration: none;
  color: var(--brand-fg);
  padding-block: var(--hha-2);
  opacity: .82;
  transition: opacity var(--dur-micro) var(--ease-sine);
}
.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; }
.lang-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--hha-2);
  min-block-size: 44px;
  padding: 4px 4px 4px var(--hha-3);
  font-size: .71rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand-fg-mid);
  border: 1px solid var(--brand-fg-dim);
  border-radius: 999px;
  background: transparent;
  transition:
    color var(--dur-micro) var(--ease-sine),
    border-color var(--dur-micro) var(--ease-sine),
    background-color var(--dur-micro) var(--ease-sine),
    transform var(--dur-micro) var(--ease-sine);
}
.lang-switch__code { min-inline-size: 1.75em; text-align: center; }
.lang-switch__icon {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  color: var(--brand-fg);
  background: var(--brand-rule);
  border-radius: 50%;
  font-size: .9rem;
}
.lang-switch:hover, .lang-switch:focus-visible {
  color: var(--brand-fg);
  border-color: var(--brand-accent);
  background: var(--brand-surface);
  transform: translateY(-1px);
}

/* ---------- footer ---------- */
.site-foot {
  border-block-start: 1px solid var(--brand-rule);
  padding-block: var(--hha-7);
  margin-block-start: var(--hha-12);
}
.site-foot__note {
  font-size: .74rem;
  color: var(--brand-fg-dim);
  margin: 0;
  max-width: 72ch;
}

/* ---------- motion ----------
   Content is visible BY DEFAULT. JavaScript adds .will-animate, so a script failure
   leaves a finished page rather than a blank one — which matters far more when the
   client browses unsupervised with nobody to explain a blank screen. */
.will-animate .reveal {
  opacity: 0;
  transform: translate3d(var(--reveal-x), var(--reveal-dist), 0);
}
.will-animate .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--brand-dur) var(--brand-ease),
    transform var(--brand-dur) var(--brand-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Native scroll-driven reveals where supported — no library, no observer, no bytes. */
@supports (animation-timeline: view()) {
  .will-animate .reveal {
    opacity: 1;
    transform: none;
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 34%;
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translate3d(var(--reveal-x), var(--reveal-dist), 0); }
  to   { opacity: 1; transform: none; }
}

/* A brand can turn motion off entirely by setting --brand-motion: none.
   On MAN it is off — not slower. A fleet buyer is buying uptime, not theatre,
   and that judgement lives in the token file rather than in somebody's memory. */
[style*="--brand-motion: none"] .reveal,
.brand-man .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Wholesale off, not a gentler variant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- bidi discipline ----------
   Latin model names inside Arabic prose must not scramble, and vehicle photography,
   instrument dials and wordmarks must never mirror. */
.no-flip {
  direction: ltr;
  unicode-bidi: isolate;
}
bdi, .lat {
  unicode-bidi: isolate;
  font-family: var(--brand-font);
  font-variant-numeric: tabular-nums;
}

/* ---------- shared type helpers ---------- */
.eyebrow {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 var(--hha-4);
  font-weight: 600;
}
.display {
  font-size: var(--brand-display);
  letter-spacing: -.02em;
  font-weight: 400;
}
.lede {
  font-size: 1.08rem;
  color: var(--brand-fg-mid);
  max-width: var(--brand-measure);
}
.rule {
  border: 0;
  border-block-start: 1px solid var(--brand-rule);
  margin: 0;
}

/* =============================================================================
   COMPONENTS
   Every component consumes --brand-* semantics and is written once. A brand file
   never redefines a component; it redefines the semantics the component reads.
   Still zero physical properties below this line.
   ========================================================================== */

/* ---------- quiet opening: the entry page frame, not a hero ---------- */
.opening { padding-block: clamp(var(--hha-8), 7vh, var(--hha-12)) var(--hha-12); }
.opening__title {
  font-size: var(--brand-display);
  letter-spacing: -.022em;
  font-weight: 400;
  max-width: 18ch;
  margin-block-end: var(--hha-6);
}
.opening__lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--brand-fg-mid);
  max-width: var(--brand-measure);
  margin: 0;
}
.hairline {
  inline-size: 72px;
  block-size: 1px;
  background: var(--brand-accent);
  border: 0;
  margin: 0 0 var(--hha-6);
}

/* ---------- section heading ---------- */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--hha-4);
  margin-block-end: var(--hha-7);
  padding-block-end: var(--hha-3);
  border-block-end: 1px solid var(--brand-rule);
}
.sec-head__n {
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--brand-accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.sec-head__t { font-size: var(--brand-h2); font-weight: 400; letter-spacing: -.012em; }

/* ---------- editorial index: the three pages ---------- */
.index { list-style: none; margin: 0; padding: 0; }
.index__row { border-block-end: 1px solid var(--brand-rule); }
.index__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--hha-5);
  padding-block: var(--hha-6);
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start var(--dur-micro) var(--ease-sine),
              color var(--dur-micro) var(--ease-sine);
}
.index__link:hover { padding-inline-start: var(--hha-3); color: var(--brand-accent); }
.index__n {
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--brand-fg-dim);
  font-variant-numeric: tabular-nums;
}
.index__name {
  font-family: var(--brand-font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: -.012em;
  display: block;
  margin-block-end: var(--hha-2);
}
.index__proves { font-size: .92rem; color: var(--brand-fg-mid); max-width: 54ch; margin: 0; }
.index__go {
  font-size: 1.1rem;
  color: var(--brand-accent);
  flex: none;
  transition: transform var(--dur-micro) var(--ease-sine);
}
[dir="rtl"] .index__go { transform: scaleX(-1); }          /* the arrow is directional: it mirrors */
.index__link:hover .index__go { transform: translateX(4px); }
[dir="rtl"] .index__link:hover .index__go { transform: scaleX(-1) translateX(4px); }

/* ---------- panel: a bordered block that lifts off the ground ---------- */
.panel {
  background: var(--brand-surface, var(--brand-bg));
  border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius);
  padding: clamp(var(--hha-6), 4vw, var(--hha-9));
  box-shadow: var(--brand-shadow);
}
.panel--accent { border-inline-start: 2px solid var(--brand-accent); }

/* ---------- credentials ---------- */
.cred {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--hha-3) var(--hha-5);
  align-items: baseline;
  margin-block: var(--hha-5) var(--hha-6);
  font-size: .9rem;
}
.cred__k { color: var(--brand-fg-dim); font-size: .78rem; letter-spacing: .06em; }
.cred__v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  background: color-mix(in srgb, var(--brand-fg) 6%, transparent);
  padding: var(--hha-1) var(--hha-3);
  border-radius: 2px;
  justify-self: start;
}

/* ---------- call to action ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hha-3);
  font: inherit;
  font-size: .92rem;
  letter-spacing: .02em;
  padding: var(--hha-4) var(--hha-7);
  border-radius: var(--brand-radius);
  border: 1px solid var(--brand-accent);
  background: var(--brand-accent);
  color: var(--brand-bg);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-sine),
              color var(--dur-micro) var(--ease-sine);
}
.btn:hover { background: transparent; color: var(--brand-accent); }
.btn--ghost { background: transparent; color: var(--brand-fg); border-color: var(--brand-rule); }
.btn:hover.btn--ghost { border-color: var(--brand-accent); color: var(--brand-accent); }
.btn .bi { font-size: .9em; }
[dir="rtl"] .btn .bi-arrow-right { transform: scaleX(-1); }

/* ---------- findings: observations about their current estate ---------- */
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hha-5); }
.finding {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--hha-5);
  align-items: start;
  padding-block-end: var(--hha-5);
  border-block-end: 1px solid var(--brand-rule);
}
.finding:last-child { border-block-end: 0; padding-block-end: 0; }
.finding__n {
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--brand-accent);
  font-variant-numeric: tabular-nums;
  padding-block-start: .35em;
}
.finding__t { font-size: 1rem; font-weight: 500; margin: 0 0 var(--hha-2); font-family: var(--brand-font); }
.finding__d { font-size: .9rem; color: var(--brand-fg-mid); margin: 0; max-width: 62ch; }

/* ---------- omissions: two-column definition rows ---------- */
.omit { display: grid; gap: 0; margin: 0; }
.omit__row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: var(--hha-5);
  padding-block: var(--hha-4);
  border-block-end: 1px solid var(--brand-rule);
}
.omit__row:last-child { border-block-end: 0; }
.omit__k { font-weight: 500; font-size: .92rem; margin: 0; }
.omit__v { font-size: .9rem; color: var(--brand-fg-mid); margin: 0; }

@media (max-width: 900px) {
  .site-head__in { gap: var(--hha-4); }
  .site-nav { gap: var(--hha-4); font-size: .74rem; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .wordmark__est { display: none; }
}

@media (max-width: 640px) {
  .index__link { grid-template-columns: auto 1fr; }
  .index__go { display: none; }
  .omit__row { grid-template-columns: 1fr; gap: var(--hha-2); }
  .finding { gap: var(--hha-3); }
}

/* =============================================================================
   EDITORIAL COMPONENTS — full-bleed imagery, narrative frames, showcase.
   Still zero physical properties: gradient direction is the --grad-to token.
   ========================================================================== */

/* Full-bleed. <main> is already full-width, so a top-level section needs nothing.
   This utility is only for an element nested inside a .wrap. It deliberately avoids
   100vw: that includes the scrollbar, and in RTL the overflow lands on the edge that
   overflow-x:hidden clips, shifting the entire page sideways. */
.bleed {
  inline-size: auto;
  margin-inline: calc(var(--hha-5) * -1);
  position: relative;
}
@supports (width: 100cqw) { .bleed { margin-inline: calc(50% - 50cqw); } }

/* ---------- hero ---------- */
.hero { overflow: clip; isolation: isolate; }
.hero__media { position: relative; aspect-ratio: 21 / 9; overflow: clip; background: #000; }
.hero__img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transform: scale(1.06);
  animation: kenburns 24s var(--ease-sine) both;
}
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(var(--grad-to),
    color-mix(in srgb, var(--brand-bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--brand-bg) 55%, transparent) 42%,
    transparent 78%);
}
.hero__copy {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%;
  padding-block-end: clamp(var(--hha-7), 6vw, var(--hha-12));
}
.hero__title { font-size: var(--brand-display); letter-spacing: -.022em; max-width: 17ch; margin: 0; }
.hero__sub { margin-block-start: var(--hha-5); max-width: 46ch; color: var(--brand-fg-mid); }

@media (max-width: 860px) {
  .hero__media { aspect-ratio: 4 / 5; }   /* the crop swaps, never CSS cover-cropping */
  .hero__scrim { background: linear-gradient(to top,
      color-mix(in srgb, var(--brand-bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--brand-bg) 40%, transparent) 55%, transparent 85%); }
}

/* ---------- narrative frame: one motion event per viewport ---------- */
.frame { position: relative; overflow: clip; }
.frame__media { aspect-ratio: 16 / 9; overflow: clip; }
.frame__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.frame__cap {
  padding-block-start: var(--hha-5);
  font-size: .95rem; color: var(--brand-fg-mid); max-width: 56ch;
}

/* Section rhythm compounds where blocks stack: a 96px bottom against the next
   section's 160px top is 256px of void. A full-bleed frame is already a pause —
   it does not need another one bolted to it. */
.frame + .section,
.section:has(+ .frame) { padding-block-start: var(--hha-9); }
.frame + .section { padding-block-start: var(--hha-8); }

/* ---------- model showcase: cutouts on the brand ground ---------- */
.showcase { display: grid; gap: var(--hha-12); }
.model { display: grid; gap: var(--hha-5); align-items: center; }
@media (min-width: 900px) {
  .model { grid-template-columns: 1.35fr 1fr; gap: var(--hha-9); }
  .model--flip > .model__media { order: 2; }
}
.model__media img { inline-size: 100%; display: block; }
.model__name {
  font-family: var(--brand-font); font-size: 1.9rem; letter-spacing: .01em;
  margin: 0 0 var(--hha-3);
}
.model__note { color: var(--brand-fg-mid); margin: 0 0 var(--hha-5); font-size: .95rem; }
.model__specs { display: flex; flex-wrap: wrap; gap: var(--hha-6); margin: 0; padding: 0; list-style: none; }
.model__specs div { display: grid; gap: var(--hha-1); }
.model__specs dt { font-size: .68rem; letter-spacing: .12em; color: var(--brand-fg-dim); text-transform: uppercase; }
.model__specs dd {
  margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; text-align: start;
}

/* ---------- craft strip ---------- */
.craft { display: grid; gap: var(--hha-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.craft figure { margin: 0; }
.craft img { inline-size: 100%; display: block; aspect-ratio: 2 / 1; object-fit: cover; }
.craft figcaption { font-size: .8rem; color: var(--brand-fg-dim); padding-block-start: var(--hha-3); }

/* ---------- showroom split ---------- */
.showroom { display: grid; gap: var(--hha-8); align-items: center; }
@media (min-width: 900px) { .showroom { grid-template-columns: 1fr 1.15fr; gap: var(--hha-12); } }
.showroom img { inline-size: 100%; display: block; }
.showroom__list { list-style: none; margin: var(--hha-6) 0 0; padding: 0; display: grid; gap: var(--hha-5); }
.showroom__list li { border-block-start: 1px solid var(--brand-rule); padding-block-start: var(--hha-4); }
.showroom__city { display: block; font-size: 1.1rem; margin-block-end: var(--hha-1); }
.showroom__meta { font-size: .85rem; color: var(--brand-fg-dim); }

/* ---------- promotions: the strip the editor actually writes to ---------- */
.promos { display: grid; gap: var(--hha-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.promo { display: block; text-decoration: none; color: inherit; }
.promo img { inline-size: 100%; display: block; border: 1px solid var(--brand-rule); }
.promo__t { font-size: .92rem; padding-block-start: var(--hha-3); display: block; }

/* ---------- concierge ---------- */
.concierge { display: grid; gap: var(--hha-7); }
@media (min-width: 900px) { .concierge { grid-template-columns: 1fr 1fr; gap: var(--hha-12); } }
.concierge__title { font-size: var(--brand-h2); margin: 0 0 var(--hha-4); }
.field { display: grid; gap: var(--hha-2); margin-block-end: var(--hha-5); }
.field label { font-size: .78rem; letter-spacing: .06em; color: var(--brand-fg-dim); }
.field input, .field select {
  font: inherit; font-size: .95rem;
  padding: var(--hha-3) var(--hha-4);
  background: transparent; color: var(--brand-fg);
  border: 1px solid var(--brand-rule); border-radius: var(--brand-radius);
}
.field input:focus, .field select:focus { border-color: var(--brand-accent); outline: none; }

/* =============================================================================
   FLEET / DATA COMPONENTS — MAN. Dense by design; the density token does the work.
   ========================================================================== */

.uptime {
  display: grid; gap: var(--hha-5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0; padding-block: var(--hha-6);
  border-block: 1px solid var(--brand-rule);
}
.uptime > div { display: grid; gap: var(--hha-1); }
.uptime dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-fg-dim); }
.uptime dd {
  margin: 0; font-size: 1.75rem; line-height: 1.1; color: var(--brand-fg);
  font-variant-numeric: tabular-nums;
}
.uptime p { margin: 0; font-size: .82rem; color: var(--brand-fg-mid); }

/* ---------- range cards ---------- */
.range { display: grid; gap: var(--hha-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rangecard { border: 1px solid var(--brand-rule); border-radius: var(--brand-radius); overflow: clip; }
.rangecard img { inline-size: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.rangecard__body { padding: var(--hha-4) var(--hha-5) var(--hha-5); }
.rangecard__n { font-family: var(--brand-font); font-size: 1.35rem; margin: 0 0 var(--hha-1); }
.rangecard__u { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 var(--hha-3); }
.rangecard__d { font-size: .88rem; color: var(--brand-fg-mid); margin: 0; }

/* ---------- spec table: sticky first column, horizontal scroll, never an accordion.
   A fleet buyer compares ACROSS columns; collapsing the table destroys the comparison. ---------- */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius);
  -webkit-overflow-scrolling: touch;
}
table.spec { border-collapse: collapse; inline-size: 100%; min-inline-size: 620px; font-size: .875rem; }
table.spec th, table.spec td {
  text-align: start; padding: var(--hha-3) var(--hha-4);
  border-block-end: 1px solid var(--brand-rule); white-space: nowrap;
}
table.spec thead th {
  background: var(--brand-surface); color: var(--brand-fg);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
table.spec tbody th {
  position: sticky; inset-inline-start: 0;
  background: var(--brand-surface); font-weight: 500; z-index: 1;
}
table.spec tbody tr:last-child th, table.spec tbody tr:last-child td { border-block-end: 0; }
.tablenote { font-size: .8rem; color: var(--brand-fg-dim); margin-block-start: var(--hha-3); }

/* =============================================================================
   3D MODULE — <model-viewer>, one surface, below the fold.
   ========================================================================== */
.viewer { position: relative; }
.viewer__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--brand-surface, #111);
  border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius);
  overflow: clip;
}
.viewer__stage model-viewer,
.viewer__poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.viewer__poster { object-fit: cover; }
model-viewer {
  --poster-color: transparent;
  --progress-bar-color: var(--brand-accent);
  --progress-mask: transparent;
  background-color: transparent;
}
/* A blocklisted GPU, a driver fault, or a failed fetch must leave a FINISHED page.
   The poster stays and the orbit affordance disappears — nothing looks broken. */
.viewer.no-3d model-viewer { display: none; }
.viewer.no-3d .viewer__hint { display: none; }
.viewer__hint {
  position: absolute; inset-block-end: var(--hha-3); inset-inline-start: 0;
  inline-size: 100%; text-align: center;
  font-size: .72rem; letter-spacing: .08em; color: var(--brand-fg-mid);
  pointer-events: none;
}
.viewer__credit {
  font-size: .74rem; color: var(--brand-fg-dim);
  padding-block-start: var(--hha-3); margin: 0; max-width: 62ch;
}
.viewer__credit a { color: var(--brand-fg-mid); }

/* =============================================================================
   CORPORATE — heritage. Typographic, not illustrated: no cards, no icons, no
   animated counters. A 1906 institution does not need a badge to look old.
   ========================================================================== */
.era {
  display: grid; gap: var(--hha-8);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-block: var(--hha-9);
  border-block: 1px solid var(--brand-rule);
}
.era__item { display: grid; gap: var(--hha-2); align-content: start; }
.era__y {
  font-family: var(--brand-font-display);
  font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1;
  color: var(--brand-accent); font-variant-numeric: lining-nums;
}
.era__t { font-size: 1rem; font-weight: 500; margin: 0; }
.era__d { font-size: .9rem; color: var(--brand-fg-mid); margin: 0; max-width: 34ch; }

.marques { display: grid; gap: var(--hha-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.marque { text-decoration: none; color: inherit; display: block; }
.marque img {
  inline-size: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--brand-radius);
  transition: opacity var(--dur-micro) var(--ease-sine);
}
.marque:hover img { opacity: .88; }
.marque__n {
  font-family: var(--brand-font-display); font-size: 1.35rem;
  padding-block-start: var(--hha-4); display: block;
}
.marque__r { font-size: .85rem; color: var(--brand-fg-mid); display: block; padding-block-start: var(--hha-1); }
.marque__go { font-size: .78rem; color: var(--brand-accent); padding-block-start: var(--hha-3); display: inline-block; }

/* =============================================================================
   VOLUME RETAIL — Mazda. Price IS shown here, VAT-inclusive and final, because
   the Saudi Ministry of Commerce requires any displayed price to be exactly that.
   ========================================================================== */
.lineup { display: grid; gap: var(--hha-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.veh {
  background: var(--brand-surface); border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius); box-shadow: var(--brand-shadow);
  padding: var(--hha-5); display: grid; gap: var(--hha-3);
  transition: transform var(--dur-micro) var(--ease-sine);
}
.veh:hover { transform: translateY(-2px); }
.veh img { inline-size: 100%; display: block; object-fit: cover; aspect-ratio: 3 / 2; border-radius: calc(var(--brand-radius) - 4px); }
.veh__n { font-family: var(--brand-font); font-size: 1.3rem; margin: 0; }
.veh__b { font-size: .8rem; color: var(--brand-fg-dim); margin: 0; }
.veh__p { margin: 0; display: grid; gap: 2px; }
.veh__p b {
  font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; text-align: start;
}
.veh__p span { font-size: .72rem; color: var(--brand-fg-dim); }

.offers { display: grid; gap: var(--hha-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.offer {
  border: 1px solid var(--brand-rule); border-radius: var(--brand-radius);
  overflow: clip; background: var(--brand-surface);
}
.offer img { inline-size: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.offer__b { padding: var(--hha-4) var(--hha-5) var(--hha-5); display: grid; gap: var(--hha-2); }
.offer__t { font-size: 1rem; font-weight: 500; margin: 0; }
.offer__d { font-size: .86rem; color: var(--brand-fg-mid); margin: 0; }
.offer__x { font-size: .72rem; color: var(--brand-accent); margin: 0; }

/* ---------- corporate: story split, scale figures, network ---------- */
.story { display: grid; gap: var(--hha-8); align-items: center; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1.1fr; gap: var(--hha-12); } }
.story--flip > :first-child { order: 2; }
.story img { inline-size: 100%; display: block; border-radius: var(--brand-radius); }
.story p + p { margin-block-start: var(--hha-4); }

.scale {
  display: grid; gap: var(--hha-6);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding-block: var(--hha-8);
  border-block: 1px solid var(--brand-rule);
}
.scale__n {
  font-family: var(--brand-font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1;
  color: var(--brand-fg); font-variant-numeric: tabular-nums;
}
.scale__l { font-size: .8rem; color: var(--brand-fg-mid); margin-block-start: var(--hha-2); display: block; }

.cities { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cities li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--hha-4);
  padding-block: var(--hha-4); border-block-end: 1px solid var(--brand-rule);
  align-items: baseline;
}
.cities li:last-child { border-block-end: 0; }
.cities__c { font-size: 1.05rem; }
.cities__b { font-size: .78rem; color: var(--brand-fg-dim); letter-spacing: .04em; }

/* =============================================================================
   FOOTER — built from HHA's own published contact data, not invented.
   Brand-aware: it reads its colour, rhythm, radius and rule from the same tokens
   as the page above it, so it is correct on all four marques without a variant.
   ========================================================================== */
.foot {
  border-block-start: 1px solid var(--brand-rule);
  margin-block-start: var(--hha-12);
  background: var(--brand-bg);
}
.foot__top {
  display: grid; gap: var(--hha-8);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-block: var(--hha-9) var(--hha-8);
}
.foot__brand { display: grid; gap: var(--hha-3); align-content: start; }
.foot__mark { display: inline-block; text-decoration: none; }
.foot__lockup { inline-size: 264px; max-inline-size: 100%; block-size: auto; display: block; }
.foot__legal-name { font-size: .88rem; color: var(--brand-fg-mid); margin: 0; max-width: 30ch; }
.foot__tag { font-size: .8rem; color: var(--brand-fg-dim); margin: 0; max-width: 32ch; }

.foot__h {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-fg-dim); margin: 0 0 var(--hha-4); font-weight: 600;
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hha-3); }
.foot__list li { font-size: .85rem; color: var(--brand-fg-mid); line-height: 1.6; }
.foot__list a { color: var(--brand-fg-mid); text-decoration: none; }
.foot__list a:hover, .foot__list a:focus-visible { color: var(--brand-fg); text-decoration: underline; }
.foot__k { color: var(--brand-fg-dim); display: block; font-size: .74rem; margin-block-end: 2px; }
/* Phone, fax and PO Box are Latin-digit strings: they must not reorder inside Arabic. */
.foot__v {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  font-variant-numeric: tabular-nums; color: var(--brand-fg);
}

.foot__social { display: flex; gap: var(--hha-2); flex-wrap: wrap; }
.foot__social a {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border: 1px solid var(--brand-rule); border-radius: var(--brand-radius);
  color: var(--brand-fg-mid); text-decoration: none; font-size: .95rem;
  transition: border-color var(--dur-micro) var(--ease-sine), color var(--dur-micro) var(--ease-sine);
}
.foot__social a:hover, .foot__social a:focus-visible { color: var(--brand-fg); border-color: var(--brand-accent); }

.foot__bar {
  border-block-start: 1px solid var(--brand-rule);
  padding-block: var(--hha-5) var(--hha-6);
  display: flex; flex-wrap: wrap; gap: var(--hha-3) var(--hha-6);
  align-items: center; justify-content: space-between;
}
.foot__copy { font-size: .78rem; color: var(--brand-fg-dim); margin: 0; }
.foot__policies { display: flex; gap: var(--hha-5); flex-wrap: wrap; }
.foot__policies a { font-size: .78rem; color: var(--brand-fg-dim); text-decoration: none; }
.foot__policies a:hover, .foot__policies a:focus-visible { color: var(--brand-fg-mid); text-decoration: underline; }
.foot__notice {
  font-size: .72rem; color: var(--brand-fg-dim); margin: 0;
  padding-block-end: var(--hha-7); max-width: 88ch; line-height: 1.7;
  opacity: .85;
}
@media (max-width: 640px) {
  .foot__top { gap: var(--hha-6); padding-block: var(--hha-7) var(--hha-6); }
  .foot__bar { flex-direction: column; align-items: flex-start; }
}

/* ---------- progressively enhanced mobile navigation ----------
   Without JavaScript the original horizontal list remains available. The script
   adds .nav-enhanced only after the toggle is wired, so navigation never vanishes. */
.nav-toggle {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  place-items: center;
  flex: none;
  padding: 0;
  color: var(--brand-fg);
  background: transparent;
  border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius);
  cursor: pointer;
}
.nav-toggle__icon { inline-size: 18px; display: grid; gap: 5px; }
.nav-toggle__icon span {
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--dur-micro) var(--ease-sine);
}
body.nav-open .nav-toggle__icon span:first-child { transform: translateY(3px) rotate(45deg); }
body.nav-open .nav-toggle__icon span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-enhanced .site-head__in { position: relative; }
  .nav-enhanced .lang-switch { margin-inline-start: auto; min-block-size: 44px; }
  .nav-enhanced .nav-toggle { display: grid; }
  .nav-enhanced .site-nav {
    position: absolute;
    inset-block-start: calc(100% + 1px);
    inset-inline: var(--hha-5);
    display: none;
    margin: 0;
    padding: var(--hha-4);
    gap: 0;
    flex-direction: column;
    overflow: visible;
    background: var(--brand-bg);
    border: 1px solid var(--brand-rule);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
  }
  .nav-enhanced body.nav-open .site-nav { display: flex; }
  .nav-enhanced .site-nav > a {
    display: flex;
    align-items: center;
    min-block-size: 48px;
    padding-inline: var(--hha-3);
    border-block-end: 1px solid var(--brand-rule);
    font-size: .82rem;
  }
  .nav-enhanced .site-nav > a:last-child { border-block-end: 0; }
}

/* ---------- form outcome notices (public pages) ----------
   The marque forms post for real, so they need somewhere to say so. One rule set,
   both outcomes, and it inherits the brand's own accent rather than importing a
   green and a red that belong to no marque. */
.formnote {
  margin-block-start: var(--hha-4);
  padding: var(--hha-3) var(--hha-4);
  border-inline-start: 2px solid var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
  font-size: .9rem;
  color: var(--brand-fg);
}
.formnote--bad { border-inline-start-color: #C4453C; background: color-mix(in srgb, #C4453C 12%, transparent); }

/* color-mix is 2023 baseline; the fallback is a plain tinted panel rather than none. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .formnote { background: rgba(128, 128, 128, .12); }
}