/* ALADDIN editorial preview. Scoped to lifestyle pages; commerce is untouched. */
body[data-page] {
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: var(--sans);
  --paper: #111b22;
  --ink: #edf2f4;
  --surface: #1b2932;
  --surface-soft: #16232b;
  --surface-raised: #21333e;
  --muted: #b2c1ca;
  --subtle: #a0b0bb;
  --accent: #b8d2df;
  --accent-ink: #14252f;
  --line: #344650;
  --strong-line: #8299a7;
  --photo-frame: #17222a;
  --header-bg: rgb(17 27 34 / .97);
  --shadow: 0 5px 16px rgb(0 0 0 / .12);
  --focus: #c4e6f7;
  --hero-glow: transparent;
  --radius-card: 4px;
  --radius-control: 4px;
  --card-title-size: clamp(21px, 1.8vw, 25px);
  --card-title-ar: 23px;
  --section-title-size: clamp(30px, 3vw, 42px);
  --section-title-ar: clamp(27px, 2.7vw, 37px);
  font-family: var(--sans);
  line-height: 1.65;
}
html[data-theme='light'] body[data-page] {
  --paper: #f5f7f8;
  --ink: #1b2b35;
  --surface: #e9eff2;
  --surface-soft: #ffffff;
  --surface-raised: #ffffff;
  --muted: #516570;
  --subtle: #61747f;
  --accent: #315b70;
  --accent-ink: #ffffff;
  --line: #ced9df;
  --strong-line: #6c8391;
  --photo-frame: #e7edf0;
  --header-bg: rgb(245 247 248 / .97);
  --shadow: 0 5px 16px rgb(22 42 54 / .06);
  --focus: #174e69;
}
body[data-page] :is(h1, h2, .display) {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.025em;
}
body[data-page] :is(h1, h2, h3, .display) em { color: inherit; }
body[data-page] .wordmark { font-size: 27px; letter-spacing: .08em; }
body[data-page] .wordmark > span { letter-spacing: .24em; }
body[data-page] .desktop-nav a { font-size: 13px; }
body[data-page] :is(.eyebrow, .kicker) {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .12em;
}
body[data-page] :is(.immersive-hero, .creative-hero) { background: var(--paper); }
body[data-page] .immersive-hero-copy :is(h1, .display) {
  max-width: 16ch;
  font: 400 clamp(36px, 3.8vw, 56px)/1.12 var(--display);
  letter-spacing: -.025em;
}
body[data-page] .immersive-hero-copy .body-copy { line-height: 1.75; }
body[data-page] .immersive-hero-copy .eyebrow { margin-bottom: 19px; }
body[data-page] .immersive-hero-media {
  background: var(--photo-frame);
  border-color: var(--line);
  box-shadow: none;
}
body[data-page] .immersive-hero-media img {
  max-height: 460px;
  object-fit: contain;
}
body[data-page] .immersive-hero-media :is(figcaption, .editorial-hero-caption) {
  display: block;
  padding: 10px 15px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 11px;
  line-height: 1.7;
}
body[data-page] .selection-statline { letter-spacing: .015em; }
body[data-page] :is(.button, .theme-toggle, .vehicle-quickview) { box-shadow: none; }
body[data-page] .button { font-weight: 500; }
body[data-page] .brand-filters a[aria-current='true'] { color: var(--accent-ink); }
body[data-page] .brand-filters a:focus-visible { outline-color: var(--focus); }
body[data-page] .language a[aria-current='true'] { text-decoration: underline; text-underline-offset: 7px; }
body[data-page] .language a { min-width: 44px; min-height: 44px; justify-content: center; }
body[data-page] :is(.vehicle-card, .chapter-card, .drive-story, .vehicle-related-card,
  .planner-summary, .status-panel, .study-card, .creative-brief) {
  background: var(--surface-soft);
  box-shadow: none;
}
body[data-page] :is(.vehicle-card, .chapter-card, .drive-story, .vehicle-related-card):hover {
  transform: translateY(-2px);
  box-shadow: none;
}
body[data-page] :is(.vehicle-info h3, .chapter-copy h3, .drive-story-copy h3,
  .drive-film-copy h3, .vehicle-related-card h3, .vehicle-page-steps h3,
  .study-card h3, .creative-method-grid h3, .brief-title) {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.015em;
}
body[data-page] :is(.rate, .vehicle-page-rate, .dialog-price) {
  color: var(--ink);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
body[data-page] .vehicle-page-intro h1 {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.12;
}
body[data-page] :is(.drive-play-label, .instagram-reel-play) {
  border-color: #819ba9;
  background: rgb(17 27 34 / .96);
  color: #f0f5f7;
}
body[data-page] .drive-gallery-strip { grid-auto-columns: minmax(230px, 31%); }
body[data-page] .drive-gallery-strip a { background: var(--surface-soft); }
body[data-page] .drive-gallery-strip img { aspect-ratio: 3/2; }
body[data-page] .drive-gallery-strip a > span { color: var(--ink); font-size: 13px; }
body[data-page] .editorial-photo-section { padding-block: 36px; border-bottom: 1px solid var(--line); }
body[data-page] .editorial-photo-section .section-heading { margin-bottom: 0; }
body[data-page] .editorial-photo-section h2 { font-size: clamp(25px, 2.4vw, 34px); }
body[data-page] .editorial-photo-section .body-copy { font-size: 14px; }
body[data-page] .editorial-photo-section .drive-gallery-strip { margin-top: 22px; padding-bottom: 8px; }
html[dir='rtl'] body[data-page] { font-family: AladdinArabic, Arial, sans-serif; }
html[dir='rtl'] body[data-page] :is(h1, h2, .display, .creative-hero-copy h1,
  .brand-quote blockquote, .drive-story-copy h3, .study-card h3, .brief-title) {
  font-family: AladdinArabic, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}
html[dir='rtl'] body[data-page] .immersive-hero-copy :is(h1, .display) {
  font-size: clamp(30px, 3.1vw, 43px);
  line-height: 1.55;
}
html[dir='rtl'] body[data-page] :is(h1, h3)[dir='ltr'] {
  font-family: var(--sans);
  line-height: 1.22;
  letter-spacing: -.015em;
}
@media (max-width: 820px) {
  body[data-page] .immersive-hero-copy :is(h1, .display) { font-size: 38px; }
  body[data-page] .immersive-hero-media img { max-height: 460px; }
}
/* Keep entry controls readable in portrait and landscape mobile layouts. */
@media (max-width: 960px) {
  body[data-page] :is(.search-field input, .sort-field select, #vehicle-search,
    .field input, .field select, .field textarea) { font-size: 16px; }
}
@media (max-width: 600px) {
  body[data-page] { --card-title-size: 24px; --card-title-ar: 23px; --section-title-size: 32px; }
  body[data-page] .wordmark { font-size: 24px; }
  body[data-page] .immersive-hero-copy :is(h1, .display) { font-size: clamp(33px, 9vw, 40px); }
  body[data-page] .immersive-hero-media img { max-height: none; }
  body[data-page] .immersive-hero-copy .body-copy { font-size: 14px; }
  body[data-page] .drive-gallery-strip { grid-auto-columns: 85%; }
  body[data-page] .editorial-photo-section { padding-block: 30px; }
  body[data-page] .vehicle-page-intro h1 { font-size: 34px; }
  html[dir='rtl'] body[data-page] .immersive-hero-copy :is(h1, .display) { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page] :is(.vehicle-card, .chapter-card, .drive-story, .vehicle-related-card):hover { transform: none; }
}
@media (max-width: 360px) {
  body[data-page] .wordmark { font-size: 20px; }
}
@media (max-width: 340px) {
  body[data-page] .wordmark { font-size: 18px; }
  body[data-page] .site-header { gap: 4px; }
}

/* World introduces the brand; Cars starts with the customer's selection tools. */
body[data-page='world'] .world-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  padding-block: 52px 60px;
}
.world-intro-copy h1 { font-size: clamp(36px, 4.1vw, 58px); line-height: 1.12; margin-block: 20px 24px; }
.world-intro-copy .body-copy { max-width: 43ch; }
.world-intro-copy .hero-actions { margin-top: 26px; }
.world-intro-image { display: block; min-width: 0; border-radius: 4px; overflow: hidden; background: var(--surface-soft); }
.world-intro-image img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.world-intro-caption { display: block; padding: 12px 16px; font-size: 12px; color: var(--muted); }
body[data-page='world'] #discover { padding-top: 24px; }
body[data-page='world'] .world-featured .drive-story-copy { padding: 22px; }
body[data-page='world'] .world-featured .drive-story-copy h3 { font-size: 25px; }
body[data-page='cars'] .catalogue-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block: 38px 20px; }
.catalogue-intro h1 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.2; margin-block: 10px 14px; }
.catalogue-intro .body-copy { max-width: 65ch; font-size: 14px; }
.catalogue-intro > .text-link { flex-shrink: 0; }
body[data-page='cars'] .catalogue { padding-block: 0 48px; }
body[data-page='cars'] .brand-filters { margin-block: 12px 16px; gap: 8px; }
body[data-page='cars'] .brand-filters a { padding: 8px 13px; }
body[data-page='cars'] .catalog-toolbar { padding-block: 16px; gap: 16px; }
body[data-page='cars'] .search-field > .ui-icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; }
body[data-page='cars'] #vehicle-search { padding-inline-start: 40px; }
body[data-page='cars'] .catalog-meta { margin-block: 16px 20px; }
body[data-page='cars'] .vehicle-grid { gap: 22px; }
body[data-page='cars'] .vehicle-info { padding: 18px; }
body[data-page='cars'] .vehicle-info h3 { font-size: 23px; }
html[dir='rtl'] body[data-page] :is(.world-intro-copy h1, .catalogue-intro h1) { line-height: 1.55; letter-spacing: 0; }
@media (max-width: 820px) {
  body[data-page='world'] .world-intro { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
  .world-intro-copy h1 { font-size: 40px; }
  body[data-page='cars'] .catalogue-intro { align-items: flex-start; flex-direction: column; gap: 12px; padding-block: 26px 14px; }
  body[data-page='cars'] .brand-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; padding: 5px 3px 10px; margin-block: 4px 8px; }
  body[data-page='cars'] .brand-filters a { flex: 0 0 auto; }
  body[data-page='cars'] .category-filters { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 8px; }
  body[data-page='cars'] .category-filters button { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .world-intro-copy h1 { font-size: 35px; }
  .catalogue-intro h1 { font-size: 30px; }
  body[data-page='cars'] .catalog-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 12px; }
  body[data-page='cars'] .category-filters { grid-column: 1 / -1; }
  body[data-page='cars'] .vehicle-grid { gap: 20px; }
  body[data-page='cars'] .vehicle-info h3 { font-size: 22px; }
  body[data-page='world'] .world-featured .drive-story-copy { padding: 18px; }
}

body[data-page='world'] .chapter-image .concept-caption { position: absolute; inset-inline-start: 12px; bottom: 10px; padding: 4px 8px; background: rgb(12 18 22 / .88); color: #f3f4f2; font-size: 10px; line-height: 1.6; }