/* =========================================================
   Abu Dhabi GP 2026 — custom styles
   Design reference: Figma "ADGP-2026" desktop frame, 1920px wide.
   Fluid sizes scale from 1920 down via clamp(); structural
   breakpoints sit at 1440 / 992 / 768 / 576 per spec.

   Every rule here is scoped under #wrapper (the wrapper around all of
   this page's markup) instead of bare html/body/* selectors, so nothing
   leaks into — or gets overridden by — a surrounding portal page's own
   CSS (e.g. Liferay). Design-token custom properties are defined on
   #wrapper itself below, not :root, for the same reason.
   ========================================================= */

/* ---------- Design tokens ---------- */
#wrapper {
  /* ===== Colors (from Figma variables) ===== */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-molten-gold: #ffd17a;
  --color-hyper-cyan: #0a59b0;
  --color-warm-ivory: #fff2c7;
  --color-burnt-amber: #c75917;
  --color-carbon-black: #17161f;
  --color-midnight-navy: #051c33;

  --color-text-primary: var(--color-white);
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-faint: rgba(255, 255, 255, 0.4);
  --color-bg-page: var(--color-black);
  --color-accent: var(--color-molten-gold);
  --color-cta: var(--color-burnt-amber);

  /* ===== Fonts (real brand font files, loaded via css/fonts.css) ===== */
  --font-display-black: "Formula1 Display Black", "Archivo Black", Impact, sans-serif; /* Formula1:Display-Black */
  --font-display-wide: "Formula1 Display Wide", "Anton", Impact, sans-serif; /* Formula1:Display-Wide */
  --font-display-bold: "Formula1 Display Bold", "Titillium Web", Arial, sans-serif; /* Formula1:Display-Bold */
  --font-display-regular: "Formula1 Display", "Titillium Web", Arial, sans-serif; /* Formula1:Display-Regular, weight 400 */
  --font-ui: "KH Interference F1", "Barlow Condensed", Arial, sans-serif; /* KH Interference F1:Regular */
  --font-script: "Northwell Clean Alt", "Meddon", cursive; /* Northwell Clean Alt:Regular */

  /* ===== Spacing scale (px values observed across the Figma frame) ===== */
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 30px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 80px;

  /* ===== Radius ===== */
  --radius-sm: 40px;
  --radius-pill: 100px;
  --radius-full: 999px;

  /* ===== Layout ===== */
  --container-max: 1920px;
  --gutter-desktop: 80px;
  --gutter-tablet: 40px;
  --gutter-mobile: 20px;

  /* ===== Font sizes (desktop / 1920 reference) ===== */
  --fs-hero-xl: 140px;
  --fs-hero-lg: 80px;
  --fs-display-1: 90px;
  --fs-display-2: 60px;
  --fs-display-3: 50px;
  --fs-display-4: 40px;
  --fs-display-5: 30px;
  --fs-body-lg: 24px;
  --fs-body: 16px;
  --fs-caption: 14px;
  --fs-micro: 12px;
}

#wrapper,
#wrapper * { box-sizing: border-box; }

#wrapper {
  /* isolation:isolate makes #wrapper establish its own stacking context.
     Several sections use negative z-index backgrounds (.hero__bg,
     .season-finale__bg, etc.) whose positioned ancestor doesn't itself
     create a stacking context, so those negative-z layers escape upward
     looking for one. Previously that escape landed on <body> (the root),
     whose background paints first, so the image still showed through.
     Now that the background lives on this nested #wrapper div instead,
     without isolation the escaped content would end up painted *behind*
     .wrapper's own opaque background — i.e. invisible. Isolating traps
     that escape at #wrapper, restoring the original paint order. */
  isolation: isolate;
  scroll-behavior: smooth;
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-display-regular);
  font-size: var(--fs-body);
  line-height: 1.4;
  /* overflow-x alone (with overflow-y left at its default "visible")
     makes the browser force overflow-y to "auto" too — a CSS quirk
     that turns #wrapper into its own independent vertical scroll
     container, next to (and fighting with) the page's real one, which
     is what produced the second scrollbar. .wrapper's own height
     always just equals its content's height (nothing constrains it),
     so there's nothing for it to actually scroll either way — setting
     both axes to hidden keeps the horizontal clipping this was added
     for, without opening that second scroll container.
     "clip" (where supported) clips the same way but, unlike "hidden",
     doesn't make #wrapper a scroll container at all, so position: sticky
     inside it (the ticket shop toolbar) keeps working. */
  overflow: hidden;
  overflow: clip;
}

#wrapper img { max-width: 100%; display: block; }

#wrapper a { color: inherit; text-decoration: none; }

#wrapper ul { list-style: none; margin: 0; padding: 0; }

#wrapper .container-fluid {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

@media (max-width: 992px) {
  #wrapper .container-fluid { padding-inline: var(--gutter-tablet); }
}
@media (max-width: 576px) {
  #wrapper .container-fluid { padding-inline: var(--gutter-mobile); }
}

#wrapper .is-accent { color: var(--color-accent); }
#wrapper .is-muted { opacity: 0.7; }

/* ---------- Buttons ---------- */
#wrapper .btn-cta,
#wrapper .btn-cta-outline {
  display: inline-flex;
  flex: none;
  width: max-content;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 18px 30px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
  border: 1px solid transparent;
}
#wrapper .btn-cta {
  background: var(--color-cta);
  color: var(--color-white);
}
#wrapper .btn-cta:hover { transform: translateY(-2px); opacity: .92; }
#wrapper .btn-cta-outline {
  background: transparent;
  border-color: var(--color-cta);
  color: var(--color-cta);
}
#wrapper .btn-cta-outline:hover { background: rgba(199, 89, 23, .1); }
#wrapper .btn-block { width: 100%; }

/* =========================================================
   HEADER
   ========================================================= */
#wrapper .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-top: clamp(16px, calc(40 / 1920 * 100vw), 40px);
  padding-bottom: 16px;
  pointer-events: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}
#wrapper .site-header.is-scrolled {
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}
#wrapper .site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}
@media (max-width: 992px) { #wrapper .site-header__inner { padding-inline: var(--gutter-tablet); } }
@media (max-width: 576px) { #wrapper .site-header__inner { padding-inline: var(--gutter-mobile); } }

#wrapper .site-header__logo img {
  height: clamp(28px, calc(55 / 1920 * 100vw), 55px);
  width: auto;
}

#wrapper .site-header__right { display: flex; align-items: center; gap: 24px; }

#wrapper .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  cursor: pointer;
}
#wrapper .menu-toggle__icon { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
#wrapper .menu-toggle--close .menu-toggle__icon { transform: rotate(180deg); }

@media (max-width: 576px) {
  #wrapper .site-header__right .btn-cta { display: none; }
}

/* =========================================================
   OFF-CANVAS NAVIGATION
   ========================================================= */
#wrapper .nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 22, 31, .3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 70;
  opacity: 0;
  transition: opacity .35s ease;
}
#wrapper .nav-backdrop.is-visible { opacity: 1; }

/* Two floating rounded panels side by side, not a single sliding drawer */
#wrapper .nav-panels {
  position: fixed;
  inset: 40px;
  z-index: 80;
  display: flex;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  pointer-events: none;
}
#wrapper .nav-panels.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: auto;
}

#wrapper .nav-video-panel {
  position: relative;
  flex: 0 0 34.44%;
  max-width: 620px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-midnight-navy);
}
#wrapper .nav-video-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#wrapper .nav-video-panel__blur {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 90% 0%, rgba(0, 0, 0, .55), transparent 60%);
}
#wrapper .nav-video-panel__heading {
  position: absolute;
  left: 50%;
  top: 11%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--color-white);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#wrapper .nav-video-panel__script { font-family: var(--font-script); font-size: clamp(40px, calc(80 / 620 * 34.44vw), 80px); line-height: 1; margin-bottom: -.25em; }
#wrapper .nav-video-panel__label { font-family: var(--font-display-bold); font-size: clamp(24px, calc(46 / 620 * 34.44vw), 46px); text-transform: uppercase; opacity: .35; }
@media (max-width: 992px) { #wrapper .nav-video-panel { display: none; } }

#wrapper .nav-drawer {
  position: relative;
  flex: 1 1 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-black);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
#wrapper .nav-drawer__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#wrapper .nav-drawer__top-glow { position: absolute; left: 50%; top: -25%; width: 75%; transform: translateX(-50%); pointer-events: none; }

#wrapper .nav-drawer__inner {
  position: relative;
  height: 100%;
  padding: 60px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 209, 122, .35) transparent;
}
#wrapper .nav-drawer__inner::-webkit-scrollbar { width: 4px; }
#wrapper .nav-drawer__inner::-webkit-scrollbar-track { background: transparent; }
#wrapper .nav-drawer__inner::-webkit-scrollbar-thumb {
  background-color: rgba(255, 209, 122, .35);
  border-radius: 100px;
}
#wrapper .nav-drawer__inner::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 209, 122, .6); }
@media (max-width: 768px) { #wrapper .nav-drawer__inner { padding: 32px; } }

#wrapper .nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; }
#wrapper .nav-drawer__logo { height: 40px; width: auto; }
#wrapper .nav-drawer__top-actions { display: flex; align-items: center; gap: 24px; }
#wrapper .menu-toggle__icon--close { width: 22px; height: 22px; object-fit: contain; filter: none; }

#wrapper .nav-drawer__eyebrow {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-white);
  margin-bottom: 30px;
}

#wrapper .nav-drawer__list { display: flex; flex-direction: column; max-width: 716px; list-style: none; padding: 0; margin: 0; }
#wrapper .nav-drawer__divider { height: 1px; background: rgba(255, 242, 199, .5); list-style: none; }
#wrapper .nav-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  font-family: var(--font-ui);
  font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
  opacity: .4;
}
#wrapper .nav-drawer__item--active { opacity: 1; }
#wrapper .nav-drawer__item > a { color: inherit; }
#wrapper .nav-drawer__arrow { width: 30px; height: 30px; flex-shrink: 0; }

#wrapper .nav-drawer__item--accordion { display: block; padding: 0; }
#wrapper .nav-drawer__item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#wrapper .nav-drawer__item-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
#wrapper .nav-drawer__sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-ui);
  font-size: 18px;
}
#wrapper .nav-drawer__sublist a { color: var(--color-white); }
#wrapper .nav-drawer__item--accordion:not(.is-expanded) .nav-drawer__sublist { display: none; }

#wrapper .nav-drawer__secondary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-ui);
  font-size: 18px;
  margin-top: 40px;
}

#wrapper .nav-drawer__foot { margin-top: auto; padding-top: 40px; }
#wrapper .nav-drawer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  font-family: var(--font-ui);
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
#wrapper .nav-drawer__copyright { font-size: 12px; opacity: .4; max-width: 430px; }

#wrapper .nav-drawer__art {
  position: absolute;
  right: 0;
  bottom: 3.5%;
  width: 22%;
  aspect-ratio: 264 / 510;
  overflow: hidden;
  pointer-events: none;
}
#wrapper .nav-drawer__art-img {
  position: absolute;
  left: -52.46%;
  top: -1.06%;
  width: 263.96%;
  height: 102.11%;
  max-width: none;
  object-fit: cover;
}
@media (max-width: 992px) { #wrapper .nav-drawer__art { display: none; } }

/* Scroll-lock while the off-canvas nav is open. Deliberately targets
   body.adgp-scroll-lock (toggled by main.js) rather than a generic
   ".nav-open" class, so it can't collide with any other widget on the
   same portal page that might reuse a common class name. */
body.adgp-scroll-lock { overflow: hidden; }

/* =========================================================
   HERO
   ========================================================= */
#wrapper .hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 160px 20px 100px;
}

#wrapper .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

#wrapper .hero__header-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: top;
  z-index: -1;
  pointer-events: none;
}

/* Hero + Intro share this wrapper so the helmet can visually straddle the
   seam between the two sections, exactly like the source design (the
   helmet's own box runs from ~71% down the hero into the top of Intro). */
#wrapper .hero-intro-wrap { position: relative; }

#wrapper .hero__helmet {
  position: absolute;
  top: 100vh;
  right: 2%;
  transform: translateY(-53%) rotate(-15.07deg);
  width: min(29vw, 445px);
  aspect-ratio: 531 / 598;
  overflow: hidden;
  z-index: 5;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
}
#wrapper .hero__helmet-img {
  position: absolute;
  left: -30.57%;
  top: -1.06%;
  width: 153.83%;
  height: 102.11%;
  max-width: none;
  object-fit: cover;
}
@media (max-width: 768px) { #wrapper .hero__helmet { opacity: .5; width: 55vw; right: -8%; } }

#wrapper .hero__content { text-align: center; display: flex; flex-direction: column; align-items: center; }

#wrapper .hero__title {
  margin: 0 0 32px;
  font-family: var(--font-display-black);
  color: #dedede;
  text-shadow: 0 -4px 35px rgba(0, 0, 0, .35);
  line-height: .95;
}
#wrapper .hero__title-line { display: block; letter-spacing: .04em; }
#wrapper .hero__title-line--sm  { font-size: clamp(34px, calc(80 / 1920 * 100vw), 80px); }
#wrapper .hero__title-line--xl  { font-size: clamp(52px, calc(140 / 1920 * 100vw), 140px); letter-spacing: .05em; }
#wrapper .hero__title-line--left { text-align: left; margin-left: -.5ch; }
#wrapper .hero__title-line--script {
  font-family: var(--font-script);
  color: var(--color-white);
  text-shadow: none;
  font-size: clamp(40px, calc(140 / 1920 * 100vw), 140px);
  margin-top: .1em;
  letter-spacing: 0;
}

#wrapper .hero__date { display: flex; align-items: center; gap: 16px; width: min(518px, 100%); margin-bottom: 40px; }
#wrapper .hero__date-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, .3); }
#wrapper .hero__date-text {
  font-family: var(--font-ui);
  font-size: clamp(18px, calc(28 / 1920 * 100vw), 28px);
  color: var(--color-accent);
  text-transform: uppercase;
  white-space: nowrap;
}

#wrapper .countdown {
  display: inline-flex;
  gap: 24px;
  padding: 24px clamp(24px, calc(60 / 1920 * 100vw), 60px);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .06);
}
#wrapper .countdown__item { display: flex; align-items: baseline; gap: 2px; }
#wrapper .countdown__value {
  font-family: var(--font-display-wide);
  color: var(--color-warm-ivory);
  font-size: 18px;
}
#wrapper .countdown__unit { font-size: 14px; }

#wrapper .scroll-down {
  position: absolute;
  left: clamp(24px, calc(80 / 1920 * 100vw), 80px);
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#wrapper .scroll-down__dots {
  width: 11px;
  height: 60px;
  background:
    radial-gradient(circle, var(--color-accent) 2px, transparent 2.5px) 0 0 / 100% 12px repeat-y;
}
#wrapper .scroll-down__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--color-warm-ivory);
}
@media (max-width: 768px) { #wrapper .scroll-down { display: none; } }

/* =========================================================
   INTRO
   ========================================================= */
#wrapper .intro {
  position: relative;
  padding: 140px 0;
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .intro__bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
}
#wrapper .intro__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, calc(34 / 1920 * 100vw), 34px);
  justify-content: center;
  margin-bottom: 50px;
}

#wrapper .intro__title {
  font-family: var(--font-display-bold);
  text-transform: uppercase;
  line-height: 1;
  text-align: right;
  opacity: .9;
  font-size: clamp(30px, calc(50 / 1920 * 100vw), 50px);
  min-width: 260px;
}
#wrapper .intro__title-mid { display: flex; align-items: center; justify-content: flex-end; gap: 16px; opacity: 1; }
#wrapper .intro__slash { opacity: .2; font-family: var(--font-display-regular); font-size: 1.2em; }
#wrapper .intro__accent { color: var(--color-warm-ivory); }

#wrapper .intro__content { max-width: 716px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
#wrapper .intro__copy { opacity: .8; font-size: var(--fs-body); }

@media (max-width: 768px) {
  #wrapper .intro__title, #wrapper .intro__title-mid { text-align: left; justify-content: flex-start; }
  #wrapper .intro__inner { text-align: left; }
}

/* Decorative breaker: centered car reveal between Intro and Yasalam */
#wrapper .breaker {
  height: clamp(260px, calc(760 / 1920 * 100vw), 760px);
  margin-top: -160px;
  position: relative;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background: var(--color-black);
}
#wrapper .breaker__car {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.55);
  width: clamp(220px, calc(700 / 1920 * 100vw), 700px);
  height: clamp(220px, calc(700 / 1920 * 100vw), 700px);
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, black 0%, black 30%, transparent 68%);
  mask-image: radial-gradient(closest-side, black 0%, black 30%, transparent 68%);
}
#wrapper .breaker__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 50% 40%, rgba(10, 89, 176, .25), transparent 70%);
}

/* =========================================================
   YASALAM
   ========================================================= */
#wrapper .yasalam { position: relative; padding: 120px 0; overflow: hidden; }
#wrapper .yasalam__bg {
  position: absolute; inset: 0;
 z-index: -2;
}
#wrapper .yasalam__glow {
  position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 50% 0%, rgba(255, 209, 122, .25), transparent 70%);
  z-index: -1;
}
#wrapper .yasalam__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; text-align: center; }

#wrapper .yasalam__intro { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 786px; }
#wrapper .yasalam__wordmark {
  width: clamp(260px, calc(433 / 1920 * 100vw), 433px);
  height: auto;
  margin: 0;
}
#wrapper .yasalam__heading {
  font-family: var(--font-display-bold);
  text-transform: uppercase;
  font-size: clamp(22px, calc(30 / 1920 * 100vw), 30px);
  line-height: 1.2;
  margin: 0;
}
#wrapper .yasalam__copy { font-size: var(--fs-body); max-width: 566px; }

#wrapper .yasalam__lineup { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; width: 100%; }
#wrapper .lineup-card {
  width: min(417px, 100%);
  aspect-ratio: 417 / 450;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  background: #0d0d0d;
  overflow: hidden;
}
#wrapper .lineup-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#wrapper .yasalam__cta { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
#wrapper .yasalam__cta-item { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 248px; }
#wrapper .yasalam__cta-label { font-size: 14px; margin: 0; }
#wrapper .yasalam__cta-label span { display: block; font-family: var(--font-display-bold); color: var(--color-accent); font-size: 18px; }

/* =========================================================
   INCLUSIONS
   ========================================================= */
#wrapper .inclusions { padding: 120px 0; background: var(--color-black); }
#wrapper .inclusions__inner { max-width: 1692px; }

/* Reference layout is absolutely positioned at a 1692x973 reference size —
   reproduced here as percentages of a fixed-aspect-ratio box so it scales
   fluidly while keeping every tile's relative position/size exact. */
#wrapper .inclusions__grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1692 / 973;
}

#wrapper .inclusions__panel {
  position: absolute;
  left: 0; top: 0;
  width: 65.19%;
  height: 77.29%;
  overflow: hidden;
  /* Not a plain rounded rect — the source panel is a custom notched shape
     (stepped bottom-right corner where the gold CTA button sits). */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (max-width: 768px) {
  #wrapper .inclusions__panel {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: var(--radius-sm);
  }
}
#wrapper .inclusions__panel-bg {
  position: absolute; inset: 0;
  background: radial-gradient(900px 500px at 20% 0%, rgba(10, 89, 176, .35), transparent 60%), var(--color-midnight-navy);
}
#wrapper .inclusions__panel-content {
  position: relative;
  padding: clamp(20px, calc(60 / 973 * 100%), 60px) clamp(20px, calc(80 / 1692 * 100%), 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(24 / 973 * 100%), 24px);
  align-items: flex-start;
  height: 100%;
}
#wrapper .inclusions__eyebrow {
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-display-regular);
  font-size: clamp(12px, calc(16 / 1692 * 100vw), 16px);
}
#wrapper .inclusions__heading {
  font-family: var(--font-display-bold);
  font-size: clamp(22px, calc(60 / 1692 * 100vw), 60px);
  line-height: 1;
  color: var(--color-warm-ivory);
  margin: 0;
  display: flex;
  flex-direction: column;
  letter-spacing: -.06em;
}
#wrapper .inclusions__heading .is-muted { opacity: .7; }
#wrapper .inclusions__copy { opacity: .8; font-size: clamp(13px, calc(16 / 1692 * 100vw), 16px); }
#wrapper .inclusions__pill {
  background: var(--color-white);
  color: #17161f;
  font-family: var(--font-ui);
  font-size: clamp(12px, calc(16 / 1692 * 100vw), 16px);
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  margin-top: auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}

#wrapper .inclusions__tile { position: absolute; border-radius: var(--radius-sm); overflow: hidden; background: #17161f; }
#wrapper .inclusions__tile img { width: 100%; height: 100%; object-fit: cover; }

#wrapper .inclusions__tile--rollercoaster { left: 65.65%; top: 0; width: 34.35%; height: 61.15%; }
#wrapper .inclusions__tile--museum       { left: 58.87%; top: 61.77%; width: 41.13%; height: 38.23%; background: transparent; border-radius: 0; overflow: visible; }
#wrapper .inclusions__tile--museum img   { object-fit: contain; }
#wrapper .inclusions__tile--waterpark    { left: 0;      top: 77.95%; width: 20.69%; height: 22.05%; }
#wrapper .inclusions__tile--louvre       { left: 21.16%; top: 77.95%; width: 37.23%; height: 22.05%; }

#wrapper .inclusions__cta {
  position: absolute;
  left: 47.46%;
  top: 46.24%;
  width: 17.73%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
#wrapper .inclusions__cta-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#wrapper .inclusions__cta-ring text {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .05em;
  fill: #17161f;
  text-transform: uppercase;
}
#wrapper .inclusions__cta-arrow { position: relative; width: 22%; height: 22%; }

@media (max-width: 992px) {
  #wrapper .inclusions__grid { aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px; }
  #wrapper .inclusions__panel,
  #wrapper .inclusions__tile { position: static; width: 100%; height: 220px; }
  /* .inclusions__panel-bg is absolutely positioned (inset:0) expecting
     .inclusions__panel itself as its containing block. Once panel goes
     static above, that inset:0 escapes to the next positioned ancestor
     (.inclusions__grid) instead and stretches to cover the *whole*
     grid — every tile below it, not just the panel — painting over
     them since positioned content stacks above static siblings by
     default. relative (not static) keeps panel itself a valid
     containing block while still living in normal document flow. */
  #wrapper .inclusions__panel { position: relative; height: auto; }
  #wrapper .inclusions__cta { display: none; }
}

/* =========================================================
   SEASON FINALE
   ========================================================= */
#wrapper .season-finale {
  position: relative;
  min-height: 56.25vw;
  max-height: 1080px;
  display: flex;
  padding-block: clamp(40px, calc(80 / 1920 * 100vw), 80px);
  overflow: hidden;
}
#wrapper .season-finale__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
#wrapper .season-finale__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}
#wrapper .season-finale__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 60px; width: 100%; align-self: stretch; }
#wrapper .season-finale__lead { display: flex; flex-direction: column; gap: 40px; max-width: 600px; }
#wrapper .season-finale__heading {
  font-family: var(--font-display-bold);
  color: var(--color-warm-ivory);
  font-size: clamp(32px, calc(60 / 1920 * 100vw), 60px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
#wrapper .season-finale__copy { opacity: .8; font-size: var(--fs-body); max-width: 267px; margin: 0; }
#wrapper .season-finale__tagline {
  font-family: var(--font-display-bold);
  color: var(--color-warm-ivory);
  font-size: clamp(24px, calc(40 / 1920 * 100vw), 40px);
  letter-spacing: -.02em;
  text-align: right;
  max-width: 540px;
  margin: 0;
  align-self: flex-end;
}

/* =========================================================
   GET READY
   ========================================================= */
#wrapper .get-ready {
  position: relative;
  background: var(--color-black);
  min-height: 45.31vw; /* 870 / 1920 */
  max-height: 870px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#wrapper .get-ready__art {
  position: absolute;
  right: 0;
  top: 0;
  width: 45.31vw; /* square: matches section height */
  max-width: 870px;
  height: 100%;
}
#wrapper .get-ready__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 18%);
  mask-image: linear-gradient(90deg, transparent 0%, black 18%);
}
#wrapper .get-ready__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
#wrapper .get-ready__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  /* 687px is the *content* column's own width in Figma (the heading/
     form never exceed it) — but box-sizing:border-box means max-width
     here also has to cover the box's own padding-left, or that padding
     eats straight out of the 687px budget instead of sitting outside
     it. Without the +216px, the form/inputs below were only getting
     ~471px to work with at the 1920px reference width, which is what
     collapsed the two-column name-field row into a stack: two 240px
     flex-basis inputs plus a 16px gap (496px) no longer fit. */
  max-width: calc(687px + 216px);
  margin-inline: 0; /* override .container-fluid's auto margin, which
    flexbox turns into horizontal centering once max-width caps this box —
    this section wants it pinned to the left gutter, not centered. */
  padding-left: clamp(20px, calc(216 / 1920 * 100vw), 216px);
  padding-right: 0;
}
#wrapper .get-ready__heading {
  font-family: var(--font-display-wide);
  font-size: clamp(48px, calc(90 / 1920 * 100vw), 90px);
  line-height: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#wrapper .get-ready__heading-row { position: relative; display: block; width: 100%; }
#wrapper .get-ready__heading-row--center { text-align: center; }
/* Decorative blurred duplicate, masked so only the leading edge of each
   word stays soft and it fades to fully sharp — matches the source design,
   which blurs only "GE" / "RE" rather than the whole word. */
#wrapper .get-ready__heading-blur {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  filter: blur(4px);
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 5%, transparent 16%);
  mask-image: linear-gradient(90deg, black 0%, black 5%, transparent 16%);
  pointer-events: none;
}
#wrapper .get-ready__heading-row--center .get-ready__heading-blur {
  -webkit-mask-image: linear-gradient(90deg, transparent 32%, black 40%, black 46%, transparent 58%);
  mask-image: linear-gradient(90deg, transparent 32%, black 40%, black 46%, transparent 58%);
}
#wrapper .get-ready__sub { font-family: var(--font-display-regular); font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); display: flex; flex-direction: column; gap: 8px; }
#wrapper .get-ready__sub p:last-child { opacity: .8; }

/* =========================================================
   PARTNERS
   ========================================================= */
#wrapper .partners { padding: 60px 0; }
#wrapper .partners__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }

#wrapper .partners__row--top { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: center; }
#wrapper .partners__brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#wrapper .partners__label { font-family: var(--font-ui); font-size: 16px; color: var(--color-accent); text-transform: uppercase; margin: 0; }
#wrapper .partners__logo {
  width: 140px;
  height: 40px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  object-fit: contain;
}
#wrapper .partners__logo--wide { width: 156px; }
#wrapper img.partners__logo { background: none; }

#wrapper .partners__group { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
#wrapper .partners__heading { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 753px; }
#wrapper .partners__rule { flex: 1; height: 1px; background: rgba(255, 255, 255, .3); }
#wrapper .partners__heading p { font-family: var(--font-ui); font-size: 16px; color: var(--color-accent); text-transform: uppercase; white-space: nowrap; margin: 0; }

#wrapper .partners__logo-rows { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
#wrapper .partners__logo-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; }
#wrapper .partners__logo-row .partners__logo { width: 110px; height: 40px; }
#wrapper img.partners__logo { object-fit: contain; }
#wrapper .partners__logo--icon { width: auto; height: 28px; background: none; }
#wrapper .partners__logo-combo { display: flex; align-items: center; gap: 8px; }

/* =========================================================
   FOOTER
   ========================================================= */
#wrapper .site-footer {
  position: relative;
  min-height: 33.85vw; /* 650 / 1920 */
  padding-bottom: 40px;
  background: var(--color-black);
  /* No overflow:hidden here — .site-footer__bg clips the background image
     on its own, and absolutely-positioned text below must be allowed to
     overflow visibly (rather than get silently clipped) if it wraps to
     more lines than the fixed min-height allows for at a given width. */
}
#wrapper .site-footer__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#wrapper .site-footer__bg::after {
  content: "";
  position: absolute;
  left: 0;
  top: -61.61%;
  width: 100%;
  height: 184.23%;
 }
#wrapper .site-footer__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Absolutely positioned to match the source's fixed 1920x650 layout —
   nothing here is centered except the wordmark; legal text sits far left,
   the two link lists and copyright cluster on the right. */
#wrapper .site-footer__inner { position: relative; height: 100%; min-height: 33.85vw; }

#wrapper .site-footer__wordmark {
  position: absolute;
  left: 50%;
  top: 16.9%;
  transform: translateX(-50%);
  width: 91.67%;
  text-align: center;
  font-family: var(--font-display-wide);
  font-size: clamp(28px, calc(90 / 1920 * 100vw), 90px);
  opacity: .3;
  margin: 0;
  white-space: nowrap;
}

#wrapper .site-footer__legal {
  position: absolute;
  left: 4.17%;
  top: 72.3%;
  width: min(340px, 21.77vw, 80%);
  font-family: var(--font-display-regular);
  font-size: 10px;
  line-height: 1.4;
  opacity: .7;
  margin: 0;
}

#wrapper .site-footer__links {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(14px, calc(30 / 1920 * 100vw), 30px);
  font-family: var(--font-ui);
  font-size: clamp(11px, calc(14 / 1920 * 100vw), 14px);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  right: 4.17%;
  top: 84%;
}
#wrapper .site-footer__links--secondary {
  top: 79.4%;
}

#wrapper .site-footer__copyright {
  position: absolute;
  left: 73.49%;
  top: 88.6%;
  width: min(429px, 22.34vw, 60%);
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: clamp(10px, calc(12 / 1920 * 100vw), 12px);
  opacity: .6;
  margin: 0;
}

@media (max-width: 768px) {
  #wrapper .site-footer { min-height: 0; padding: 60px 0 40px; }
  #wrapper .site-footer__inner { position: static; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding-inline: 20px; }
  #wrapper .site-footer__wordmark,
  #wrapper .site-footer__legal,
  #wrapper .site-footer__links,
  #wrapper .site-footer__links--secondary,
  #wrapper .site-footer__copyright { position: static; left: auto; right: auto; top: auto; width: auto; max-width: 100%; transform: none; justify-content: center; }
  #wrapper .site-footer__legal { order: 4; }
  #wrapper .site-footer__links--secondary { order: 2; }
  #wrapper .site-footer__links { order: 3; }
  #wrapper .site-footer__copyright { order: 5; }
}

/* =========================================================
   Responsive structural tweaks
   ========================================================= */
@media (max-width: 1440px) {
  #wrapper { --gutter-desktop: 60px; }
}

@media (max-width: 992px) {
  #wrapper .yasalam__inner,
  #wrapper .season-finale__inner { text-align: center; align-items: center; }
  #wrapper .season-finale__inner { flex-direction: column; }
  #wrapper .season-finale__tagline { text-align: center; }
}

@media (max-width: 768px) {
  #wrapper .partners__row--top { flex-direction: column; }
}

@media (max-width: 576px) {
  #wrapper .hero { padding-top: 120px; }
  #wrapper .countdown { gap: 12px; padding: 16px 24px; flex-wrap: wrap; justify-content: center; }
  #wrapper .get-ready__art { display: none; }
  #wrapper .nav-drawer__inner { padding: 24px; }
}

/* =========================================================
   TICKET SHOP PAGE
   Reference: Figma "Laptop :: Ticket Shop" 1258:24277 (with the hero
   banner) and "Laptop :: Ticket Shop :: Scroll Up" 1258:24328 (hero
   scrolled away, toolbar stuck under the header), 1920px wide;
   mobile 1262:5984 / 1262:6010 (390px).
   ========================================================= */

#wrapper .ticket-shop {
  position: relative;
  padding-top: clamp(110px, calc(135 / 1920 * 100vw), 135px);
  padding-bottom: 80px;
  /* clip, not hidden: hidden would make this the scroll container and stop */
  /* the toolbar from sticking to the viewport.                            */
  overflow: clip;
  background: var(--color-black);
}

/* ---------- Hero banner (Figma "Hero Video", 1760x450) ---------- */
#wrapper .ticket-hero {
  position: relative;
  z-index: 1;
  display: block;
  height: clamp(260px, calc(450 / 1920 * 100vw), 450px);
  border-radius: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  overflow: hidden;
  background: #d9d9d9;
  color: var(--color-white);
  text-decoration: none;
}
#wrapper .ticket-hero picture { display: contents; }
#wrapper .ticket-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Blurred band: 196px of the 450px frame, bleeding off the bottom. */
#wrapper .ticket-hero__blur { height: 42%; }
#wrapper .ticket-hero__content {
  position: absolute;
  left: clamp(24px, calc(50 / 1920 * 100vw), 50px);
  bottom: clamp(24px, calc(41 / 1920 * 100vw), 41px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#wrapper .ticket-hero__eyebrow { font-family: var(--font-ui); font-size: 16px; color: var(--color-accent); }
/* Liferay rich-text editables can wrap the title in <p>. */
#wrapper .ticket-hero__title > p { margin: 0; }

/* Liferay: TX Hero "Banner" style (.txf-banner) above the ADGP Ticket
   Listing fragment. The banner clears the fixed header itself, and the
   listing below drops its own top padding to the design's 40px gap. */
#wrapper .txf-banner { position: relative; padding-top: clamp(110px, calc(135 / 1920 * 100vw), 135px); }
#wrapper:has(.txf-banner) .adgp-product-listing .ticket-shop { padding-top: clamp(24px, calc(40 / 1920 * 100vw), 40px); }
@media (max-width: 600px) {
  #wrapper .txf-banner { padding-top: 148px; }
  #wrapper:has(.txf-banner) .adgp-product-listing .ticket-shop { padding-top: 30px; }
}
#wrapper .ticket-hero__title {
  font-family: var(--font-display-bold);
  font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
}

/* Decorative background glows — blurred ellipses, some bleeding off-canvas */
#wrapper .ticket-shop__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 28% at 20% 8%,   rgba(10, 89, 176, .35), transparent 70%),
    radial-gradient(30% 32% at -2% 42%,  rgba(10, 89, 176, .3),  transparent 70%),
    radial-gradient(34% 26% at 128% 0%,  rgba(255, 209, 122, .3), transparent 70%),
    radial-gradient(32% 30% at 132% 55%, rgba(10, 89, 176, .3),  transparent 70%);
}

#wrapper .ticket-shop__toolbar {
  position: relative;
  /* Must outrank .ticket-grid's z-index (also 1, but later in the DOM, so  */
  /* it would otherwise win the tie and paint over this entire toolbar —    */
  /* including the fixed-position .sticky-filter bar on mobile, since a     */
  /* positioned descendant's z-index only competes *within* its nearest     */
  /* stacking-context-creating ancestor, not globally against siblings.     */
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* 40px between hero, toolbar and the first row of cards (Figma). */
  margin-top: clamp(24px, calc(40 / 1920 * 100vw), 40px);
  margin-bottom: clamp(24px, calc(40 / 1920 * 100vw), 40px);
}

/* Desktop: once the hero has scrolled away the toolbar sticks directly  */
/* under the fixed header. --site-header-h is the header's real height,  */
/* measured by js/main.js (the clamp is the fallback). The black band    */
/* behind it hides the cards scrolling underneath; its padding is        */
/* cancelled by negative margins so the resting layout doesn't move.     */
@media (min-width: 601px) {
  #wrapper .ticket-shop__toolbar {
    position: sticky;
    top: var(--site-header-h, clamp(80px, calc(111 / 1920 * 100vw), 111px));
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: calc(clamp(24px, calc(40 / 1920 * 100vw), 40px) - 16px);
    margin-bottom: calc(clamp(24px, calc(40 / 1920 * 100vw), 40px) - 16px);
    background: var(--color-black);
  }
}

/* ---------- Categories ---------- */
#wrapper .categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#wrapper .category-item a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  white-space: nowrap;
}
#wrapper .category-item--active a {
  border-color: transparent;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset -8px 1px 30px 0px var(--color-cta, #c75917);
}
/* Orange glow in the active tab's top-right corner (Figma "Glow": a     */
/* 172x98 shape at right -31 / top -18, exported with its blur as 322x248). */
#wrapper .category-item__glow {
  display: none;
  position: absolute;
  right: -106px;
  top: -93px;
  width: 322px;
  height: 248px;
  background: url("/documents/d/abu-dhabi-grand-prix/category-glow") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
#wrapper .category-item--active .category-item__glow { display: block; }
#wrapper .category-item__name {
  position: relative;
  font-family: var(--font-display-bold);
  font-size: 18px;
  color: var(--color-white);
  line-height: 1;
}
#wrapper .category-item__price {
  position: relative;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-accent);
}

/* ---------- Sticky filter bar ---------- */
#wrapper .sticky-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
}
#wrapper .sticky-filter__action {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}
#wrapper .sticky-filter__action[aria-pressed="true"] { color: var(--color-accent); }
#wrapper .sticky-filter__action img { width: 22px; height: 22px; }
#wrapper .sticky-filter__divider { width: 1px; height: 22px; background: rgba(255, 255, 255, .2); }

/* On mobile the filter bar moves to a fixed pill anchored to the bottom of */
/* the viewport, per the Figma mobile frame — smaller icons/text, "View by  */
/* Location" in accent gold, and a border divider instead of the desktop's  */
/* separate vector line.                                                   */
@media (max-width: 600px) {
  #wrapper .sticky-filter {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 50;
    width: calc(100% - 40px);
    max-width: 350px;
    height: auto;
    gap: 0;
    padding: 4px;
    border: none;
    border-radius: 100px;
    background: none;
  }
  /* Figma "Nav Blur": a dark blurred band (534x127, 92px wider than the
     pill each side, 19px above it) so the pill stays readable over the
     cards; the pill's own glass fill sits on top of it. Both are pseudo-
     elements because the pill (fixed, z-index) is its own stacking context
     and would otherwise paint its background under the band. */
  #wrapper .sticky-filter::before,
  #wrapper .sticky-filter::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  #wrapper .sticky-filter::before {
    z-index: -2;
    left: -92px;
    right: -92px;
    top: -19px;
    height: 127px;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    filter: blur(15px);
  }
  #wrapper .sticky-filter::after {
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, .06);
  }
  #wrapper .sticky-filter__action {
    flex: 1;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
    font-size: 12px;
  }
  #wrapper .sticky-filter__action img { width: 16px; height: 16px; }
  #wrapper .sticky-filter__action[data-view-toggle="location"] {
    color: var(--color-accent);
    border-right: 1px solid rgba(255, 255, 255, .3);
  }
  #wrapper .sticky-filter__divider { display: none; }

  /* Hero (Figma "Mobile / Hero Video", 350x400): centred copy. */
  #wrapper .ticket-shop { padding-top: 148px; }
  #wrapper .ticket-hero { height: 400px; border-radius: 30px; }
  #wrapper .ticket-hero__blur { height: 37%; background: rgba(0, 0, 0, .6); }
  #wrapper .ticket-hero__content { left: 16px; right: 16px; bottom: 24px; align-items: center; gap: 8px; text-align: center; }
  #wrapper .ticket-hero__eyebrow { font-size: 12px; }
  #wrapper .ticket-hero__title { font-size: 16px; }

  /* Compact category tabs (Figma "Filters": 8px radius, 10 / 8px text,
     active tab filled orange instead of the desktop glow). */
  #wrapper .ticket-shop__toolbar { margin-top: 30px; margin-bottom: 30px; }
  #wrapper .categories { gap: 6px; }
  #wrapper .category-item a { padding: 8px; border-radius: 8px; gap: 4px; }
  #wrapper .category-item--active a {
    border-color: var(--color-cta, #c75917);
    background: rgba(199, 89, 23, .3);
    box-shadow: none;
  }
  #wrapper .category-item--active .category-item__glow { display: none; }
  #wrapper .category-item__name { font-size: 10px; }
  #wrapper .category-item__price { font-size: 8px; line-height: 1; }

  /* Keep the last row of cards clear of the fixed bottom filter bar. */
  #wrapper .ticket-shop { padding-bottom: 100px; }

  /* Mobile ticket card (Figma "Mobile Ticket Card"): 250px image, 24px top
     corners, 16px gaps, 30px feature icons, "EXPLORE" + 12px CTA. */
  #wrapper .ticket-card { border-radius: 24px 24px 30px 30px; }
  #wrapper .ticket-card__image { height: 250px; border-color: rgba(255, 255, 255, .1); border-radius: 24px 24px 0 0; }
  #wrapper .ticket-card__content { padding: 20px 16px 24px; gap: 16px; border-color: rgba(255, 255, 255, .1); }
  #wrapper .ticket-card__title-text { gap: 4px; }
  #wrapper .ticket-card__eyebrow,
  #wrapper .ticket-card__name { font-size: 12px; }
  #wrapper .ticket-card__badges { gap: 4px; }
  #wrapper .ticket-card__badges img { width: 32px; height: 32px; }
  #wrapper .ticket-card__days { gap: 12px; }
  #wrapper .ticket-card__days-row { font-size: 12px; }
  #wrapper .ticket-card__features img { width: 30px; height: 30px; }
  #wrapper .ticket-card__features span { font-size: 9px; line-height: 1.1; }
  #wrapper .ticket-card__more { display: none; }
  #wrapper .ticket-card__explore { padding: 15px 12px; text-transform: uppercase; }
  #wrapper .ticket-card__buy { padding: 14px 12px; }
  #wrapper .ticket-card__explore,
  #wrapper .ticket-card__buy { font-size: 12px; }
  #wrapper .ticket-card__aed { width: 9px; height: 8px; }
  #wrapper .ticket-card__flag { bottom: -7px; padding: 2px 12px; font-size: 9px; }
}

/* ---------- Ticket grid ---------- */
#wrapper .ticket-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  /* Clear of the header + the stuck toolbar. */
  scroll-margin-top: 240px;
}
@media (max-width: 600px) { #wrapper .ticket-grid { gap: 30px; scroll-margin-top: 130px; } }
@media (max-width: 1200px) { #wrapper .ticket-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { #wrapper .ticket-grid { grid-template-columns: 1fr; } }

#wrapper .ticket-card {
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease;
}
#wrapper .ticket-card:hover { transform: translateY(-4px); }

#wrapper .ticket-card__image {
  position: relative;
  height: clamp(220px, calc(350 / 1920 * 100vw), 350px);
  border: 1px solid rgba(255, 255, 255, .2);
  border-bottom: none;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
}
#wrapper .ticket-card__image img { width: 100%; height: 100%; object-fit: cover; }

/* "View by Location" swaps each card's photo for its circuit map image. */
#wrapper .ticket-card__image-map { display: none; }
#wrapper .ticket-shop.is-location-view .ticket-card__image-photo { display: none; }
#wrapper .ticket-shop.is-location-view .ticket-card__image-map { display: block; }

#wrapper .ticket-card__content {
  background: var(--color-black);
  border: 1px solid rgba(255, 255, 255, .2);
  border-top: none;
  border-radius: 0 0 30px 30px;
  padding: 24px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#wrapper .ticket-card__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#wrapper .ticket-card__title-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
#wrapper .ticket-card__brand { width: 45px; height: 45px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
#wrapper .ticket-card__title-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#wrapper .ticket-card__eyebrow { font-family: var(--font-ui); font-size: 14px; color: var(--color-accent); margin: 0; }
#wrapper .ticket-card__name {
  font-family: var(--font-display-bold);
  font-size: 18px;
  color: var(--color-white);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#wrapper .ticket-card__badges { display: flex; gap: 8px; flex-shrink: 0; }
#wrapper .ticket-card__badges img { width: 45px; height: 45px; }

#wrapper .ticket-card__days { display: flex; flex-direction: column; gap: 14px; }
#wrapper .ticket-card__rule { height: 1px; background: rgba(255, 255, 255, .2); }
#wrapper .ticket-card__days-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-warm-ivory);
  text-transform: uppercase;
}

#wrapper .ticket-card__features { display: flex; list-style: none; margin: 0; padding: 0; width: 100%; }
#wrapper .ticket-card__features li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
#wrapper .ticket-card__features img { width: 40px; height: 40px; opacity: .6; object-fit: contain; }
#wrapper .ticket-card__features span {
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 12px;
  color: var(--color-warm-ivory);
  text-transform: uppercase;
  line-height: 1.2;
}

#wrapper .ticket-card__cta {
  position: relative;
  display: flex;
  align-items: stretch;
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px;
}
#wrapper .ticket-card__explore,
#wrapper .ticket-card__buy {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
}
#wrapper .ticket-card__buy { gap: 4px; background: var(--color-cta); border-radius: 0 100px 100px 0; text-transform: uppercase; }
/* Dirham symbol between "from" and the price. */
#wrapper .ticket-card__aed { flex-shrink: 0; width: 13px; height: 11px; }
/* Centered over the Buy button's half of the pill (~75%, confirmed against */
/* Figma's exact pixel coordinates) and sitting at the *bottom* border,     */
/* per the confirmed Figma CTA component. Percentage-based so it stays      */
/* correctly centered at any card width, mobile included.                  */
#wrapper .ticket-card__flag {
  position: absolute;
  left: 75%;
  bottom: -12px;
  transform: translateX(-50%);
  background: var(--color-black);
  color: #ff383c;
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 2px 12px;
  border-radius: 100px;
  text-transform: uppercase;
  white-space: nowrap;
}
#wrapper .ticket-card__flag--trending { color: #34c759; }

/* =========================================================
   TICKET DETAIL PAGE
   Reference: Figma "Laptop :: Ticket Shop :: Details", 1920px wide.
   Content column is 1164px, centered (378px margin each side on a
   1920 canvas — i.e. ~60.6% width, ~19.7% side margins).
   ========================================================= */

#wrapper .ticket-detail { position: relative; padding-top: clamp(90px, calc(135 / 1920 * 100vw), 135px); padding-bottom: 80px; overflow: hidden; background: var(--color-black); }

#wrapper .ticket-detail__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30% 22% at 18% 5%,   rgba(10, 89, 176, .32), transparent 70%),
    radial-gradient(28% 16% at 16% 32%,  rgba(10, 89, 176, .28), transparent 70%),
    radial-gradient(38% 20% at 22% 62%,  rgba(10, 89, 176, .3),  transparent 70%),
    radial-gradient(34% 17% at 128% 0%,  rgba(255, 209, 122, .3), transparent 70%),
    radial-gradient(32% 22% at 132% 25%, rgba(10, 89, 176, .3),  transparent 70%),
    radial-gradient(40% 30% at 138% 55%, rgba(10, 89, 176, .28), transparent 70%);
}

#wrapper .ticket-detail__hero {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1760 / 450;
  margin-bottom: clamp(40px, calc(90 / 1920 * 100vw), 90px);
}
#wrapper .ticket-detail__hero img { width: 100%; height: 100%; object-fit: cover; }

#wrapper .td-content {
  position: relative;
  z-index: 1;
  max-width: 1164px;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 577px) { #wrapper .td-content { padding-inline: 24px; } }
@media (min-width: 1300px) { #wrapper .td-content { padding-inline: 0; } }

/* Updated to Figma 2933:23177 (desktop) / 1703:10293 (mobile). The page is
   built on the v2 components further down (.td2-section-head / .td2-heading /
   .td2-body / .td2-highlights / .td2-related / .ticket-card--compact and the
   .td2-desktop-only / .td2-mobile-only helpers); #wrapper.td-page scopes this
   page's few differences so ticket-detail-v2.html is unaffected. Desktop
   sections are separated by a rule below each one; on mobile the rule moves
   above each heading. */

#wrapper .td-hero img { object-position: 50% 59%; }

/* ---------- Top: title + price/CTA ---------- */
#wrapper .td-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
#wrapper .td-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
#wrapper .td-title__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#wrapper .td-title__eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; color: var(--color-accent); margin: 0; }
#wrapper .td-title__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-accent); display: inline-block; }
#wrapper .td-title__name { font-family: var(--font-display-bold); font-size: 24px; line-height: 1.2; color: var(--color-white); margin: 0; }

#wrapper .td-top__right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
#wrapper .td-top__badges { display: flex; gap: 12px; }
#wrapper .td-top__badges img { width: 45px; height: 45px; }

/* Price pill (Figma "Ticket Card :: CTA", 380px): cost on the left, a 180px
   button on the right, and "selling fast" centred under the button so it
   straddles the pill's bottom border. */
#wrapper .td-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 380px;
  max-width: 100%;
  padding: 12px 12px 12px 30px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px;
}
#wrapper .td-cta__cost { min-width: 0; }
#wrapper .td-cta__from { font-family: var(--font-ui); font-size: 16px; color: var(--color-white); opacity: .6; margin: 0; }
#wrapper .td-cta__price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display-regular);
  font-size: 22px;
  color: var(--color-cta);
  margin: 0;
  white-space: nowrap;
}
#wrapper .td-cta__price img { width: 16px; height: 14px; }
#wrapper .td-cta__action { position: relative; display: flex; align-self: stretch; }
#wrapper .td-cta__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  min-height: 45px;
  padding: 12px 18px;
  border-radius: 100px;
  background: var(--color-cta);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 14px;
  white-space: nowrap;
}
#wrapper .td-cta__flag {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 0 8px;
  border-radius: 12px;
  background: var(--color-black);
  color: #ff383c;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
}

/* ---------- Sections ---------- */
#wrapper .td-section { display: flex; flex-direction: column; gap: 30px; }
#wrapper .td-section--wide-gap { gap: 40px; }

@media (min-width: 601px) {
  #wrapper.td-page .td2-heading { font-size: 24px; line-height: 1.2; }
  #wrapper.td-page .td2-highlight { align-items: flex-start; }
  #wrapper.td-page .td2-highlight > div { gap: 12px; }
  #wrapper.td-page .td2-highlight__title { line-height: 1; }
}

/* "Performing at the After-Race Concerts" line-up poster in a gold frame. */
#wrapper .td-performing { display: block; border: 2px solid var(--color-accent); border-radius: 40px; overflow: hidden; background: var(--color-black); }
#wrapper .td-performing img { display: block; width: 100%; height: auto; }

/* ---------- Location map ---------- */
#wrapper .td-map { display: block; }
#wrapper .td-map img { display: block; width: 100%; height: auto; }

/* ---------- Includes (3-col, check icons) ---------- */
#wrapper .td-includes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
#wrapper .td-include { display: flex; align-items: flex-start; gap: 8px; }
#wrapper .td-include > img { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
#wrapper .td-include > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#wrapper .td-include__title { margin: 0; font-family: var(--font-ui); font-size: 18px; line-height: 1; color: var(--color-accent); }
#wrapper .td-include__copy { margin: 0; font-family: "Titillium Web", var(--font-display-regular); font-size: 18px; line-height: 1.4; color: var(--color-white); opacity: .7; }
@media (max-width: 992px) { #wrapper .td-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Glimpse banner (desktop): edge-to-edge scroller, opened centred by JS ---------- */
#wrapper .td-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 209, 122, .35) transparent;
  margin-block: 30px 40px;
}
#wrapper .td-banner::-webkit-scrollbar { height: 4px; }
#wrapper .td-banner::-webkit-scrollbar-thumb { background-color: rgba(255, 209, 122, .35); border-radius: 100px; }
#wrapper .td-banner__track { display: flex; gap: 30px; width: max-content; padding-inline: var(--gutter-mobile); }
#wrapper .td-banner__card {
  scroll-snap-align: center;
  width: min(567px, 78vw);
  border-radius: 30px;
  overflow: hidden;
  background: #212123;
}
#wrapper .td-banner__card img { width: 100%; aspect-ratio: 567 / 309; object-fit: cover; display: block; }
#wrapper .td-banner__card p {
  margin: 0;
  padding: 12px 8px;
  background: var(--color-midnight-navy);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Glimpse carousel (mobile): the centred card grows and turns gold ---------- */
#wrapper .td-carousel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 324px;
  margin-block: 30px;
  padding-inline: calc(50% - 141px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#wrapper .td-carousel::-webkit-scrollbar { display: none; }
#wrapper .td-carousel__card {
  position: relative;
  flex: 0 0 282px;
  height: 294px;
  border: 1px solid transparent;
  border-radius: 30px;
  overflow: hidden;
  background: var(--color-black);
  scroll-snap-align: center;
  transition: height .3s ease, border-radius .3s ease, border-color .3s ease;
}
#wrapper .td-carousel__card img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 30px); object-fit: cover; }
#wrapper .td-carousel__card p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-midnight-navy);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 12px;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease;
}
#wrapper .td-carousel__card.is-active { height: 324px; border-color: var(--color-warm-ivory); border-radius: 40px; }
#wrapper .td-carousel__card.is-active p { background: var(--color-accent); color: var(--color-black); }

/* ---------- "Buy your tickets now" block (desktop) ---------- */
#wrapper .td-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 30px;
  background: #0f0f0f;
}
#wrapper .td-buy__title { display: flex; flex-direction: column; gap: 4px; }
#wrapper .td-buy__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1; color: var(--color-accent); }
#wrapper .td-buy__heading { margin: 0; font-family: var(--font-display-bold); font-size: clamp(28px, calc(40 / 1920 * 100vw), 40px); line-height: 1.2; color: var(--color-white); }

/* ---------- Contacts box (desktop): same art as the contact page box ---------- */
#wrapper .td-contacts {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  padding: 60px 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 60px;
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .td-contacts__bg { position: absolute; top: -1px; left: 0; z-index: -1; max-width: none; pointer-events: none; }
/* Figma "Top Glow": 661x429 centred 966.5px left of the box's middle, its
   export bleeding 300px past each edge → left = 50% - 1597px, top -589px. */
#wrapper .td-contacts__glow { position: absolute; left: calc(50% - 1597px); top: -589px; z-index: -1; max-width: none; pointer-events: none; }
#wrapper .td-contacts__group { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#wrapper .td-contacts__title { margin: 0; font-family: var(--font-display-bold); font-size: 16px; line-height: 1.4; color: var(--color-white); text-align: center; }
#wrapper .td-contacts__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; }
#wrapper .td-contacts__divider img { display: block; width: 1px; height: 50px; }
#wrapper .td-contacts__divider--short img { height: 40px; }
#wrapper .td-contact { display: flex; align-items: center; gap: 16px; color: inherit; }
#wrapper .td-contact > img { width: 40px; height: 40px; flex-shrink: 0; }
#wrapper .td-contact__text { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display-regular); line-height: 1.2; }
#wrapper .td-contact__value { font-size: 18px; color: var(--color-warm-ivory); white-space: nowrap; transition: color .2s ease; }
#wrapper .td-contact__label { font-size: 12px; color: var(--color-white); }
#wrapper a.td-contact:hover .td-contact__value,
#wrapper a.td-contact:focus-visible .td-contact__value { color: var(--color-accent); }

/* ---------- Other tickets: feature row inside the compact card ---------- */
#wrapper .ticket-card--compact .ticket-card__features li { gap: 8px; }
#wrapper .ticket-card--compact .ticket-card__features img { width: 26px; height: 26px; }
#wrapper .ticket-card--compact .ticket-card__features span { font-size: 8px; line-height: 1.2; }
#wrapper .ticket-card--compact .ticket-card__image picture { display: block; height: 100%; }

/* ---------- Mobile (Figma 1703:10293, 390px wide) ---------- */
@media (max-width: 600px) {
  /* Room for the price pill pinned to the bottom of the viewport. */
  #wrapper.td-page { padding-bottom: 130px; }

  #wrapper .td-top { gap: 16px; }
  #wrapper .td-title { flex: 1; }
  #wrapper .td-title__text { gap: 4px; }
  #wrapper .td-top .td-title__eyebrow { font-size: 12px; }
  #wrapper .td-title__name { font-size: 12px; line-height: normal; }
  /* Badges sit beside the title and the days row spans the width, so the
     right-hand group's children join the top row directly. */
  #wrapper .td-top__right { display: contents; }
  #wrapper .td-top__badges { gap: 4px; }
  #wrapper .td-top__badges img { width: 32px; height: 32px; }
  #wrapper .td-top .td2-days { flex: 0 0 100%; }

  #wrapper .td-cta--sticky {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 50;
    width: calc(100% - 40px);
    gap: 12px;
    padding: 10px 10px 10px 24px;
  }
  /* Dark blurred wash behind the pinned pill, like the Figma "Blur" layer. */
  #wrapper .td-cta--sticky::before {
    content: '';
    position: absolute;
    inset: -43px -64px -60px;
    z-index: -1;
    background: rgba(0, 0, 0, .7);
    filter: blur(25px);
    pointer-events: none;
  }
  #wrapper .td-cta--sticky .td-cta__cost { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  #wrapper .td-cta--sticky .td-cta__from { font-size: 12px; }
  #wrapper .td-cta--sticky .td-cta__price { font-size: 16px; }
  #wrapper .td-cta--sticky .td-cta__price img { width: 13px; height: 11px; }
  #wrapper .td-cta--sticky .td-cta__action { flex: 1; }
  #wrapper .td-cta--sticky .td-cta__buy { width: 100%; min-height: 0; }
  #wrapper .td-cta--sticky .td-cta__flag { top: calc(100% + 2px); padding: 2px 12px; border-radius: 100px; font-size: 11px; text-transform: uppercase; }

  #wrapper .td-performing { border-width: 1px; }

  #wrapper .td-includes { grid-template-columns: 1fr; gap: 16px; }
  #wrapper .td-include { gap: 9px; }
  #wrapper .td-include > img { margin-top: 0; }
  #wrapper .td-include > div { gap: 0; }
  #wrapper .td-include__title { font-size: 14px; line-height: 1.4; text-transform: uppercase; }
  #wrapper .td-include__copy { font-size: 14px; color: rgba(255, 255, 255, .8); opacity: 1; }

  #wrapper .ticket-card--compact .ticket-card__features li { gap: 12px; }
  #wrapper .ticket-card--compact .ticket-card__features img { width: 30px; height: 30px; }
  #wrapper .ticket-card--compact .ticket-card__features span { font-size: 9px; line-height: 1.1; }
}

/* =========================================================
   TICKET DETAIL PAGE — VERSION 2 (ticket-detail-v2.html)
   Reference: Figma "Laptop :: Ticket Shop :: Details" (1258:24585)
   and "Mobile :: Ticket Shop :: Ticket Details" (1703:11745).
   Reuses .ticket-detail, .ticket-detail__glow, .ticket-detail__hero,
   .td-content, .td-title__eyebrow/__dot and .ticket-card* from above;
   only the v2-specific layout is defined here.
   ========================================================= */

@media (min-width: 601px) { #wrapper .td2-mobile-only { display: none !important; } }
@media (max-width: 600px) { #wrapper .td2-desktop-only { display: none !important; } }

#wrapper .td2-hero { border-radius: 60px; margin-bottom: clamp(24px, calc(60 / 1920 * 100vw), 60px); }
#wrapper .td2-hero picture { display: block; height: 100%; }

#wrapper .td2-content { display: flex; flex-direction: column; gap: 40px; }
/* Must outrank the later .td-content / hero / video siblings (all z-index  */
/* 1): on mobile the CTA pair inside this block is position:fixed, and a   */
/* positioned descendant's z-index only competes within this ancestor's    */
/* stacking context — without this, content below would paint over it.    */
#wrapper .td2-content--lead { z-index: 2; }

#wrapper .td2-rule { width: 100%; margin: 0; border: none; border-top: 1px solid rgba(255, 255, 255, .2); opacity: 1; }
#wrapper .td2-section-head { display: flex; flex-direction: column; gap: 40px; }
/* Figma 2933:24011: heading → its content is 30px, against the 40px rhythm */
/* used between every other block of .td2-content.                          */
#wrapper .td2-content > .td2-section-head { margin-bottom: -10px; }
#wrapper .td2-heading {
  font-family: var(--font-display-bold);
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Top: title + CTA pair ---------- */
#wrapper .td2-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
#wrapper .td2-title { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
#wrapper .td2-title__text { display: flex; flex-direction: column; gap: 6px; }
#wrapper .td2-title__name {
  max-width: 550px;
  font-family: var(--font-display-bold);
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 0;
}
#wrapper .td2-badges { display: flex; gap: 12px; flex-shrink: 0; }
#wrapper .td2-badges img { width: 45px; height: 45px; }

#wrapper .td2-days { display: flex; flex-direction: column; gap: 12px; }
#wrapper .td2-days__rule { height: 1px; background: rgba(255, 255, 255, .2); }
#wrapper .td2-days__row {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-warm-ivory);
  text-transform: uppercase;
}

#wrapper .td2-actions { display: flex; flex-direction: column; gap: 12px; width: 350px; max-width: 100%; }
#wrapper .td2-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 100px;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}
#wrapper .td2-btn--primary { background: var(--color-cta); }
#wrapper .td2-btn--outline { border: 1px solid rgba(255, 255, 255, .2); }
#wrapper .td2-btn__label { font-family: var(--font-display-bold); font-size: 12px; text-transform: uppercase; }
#wrapper .td2-btn__copy { font-family: var(--font-ui); font-size: 14px; }

/* ---------- Body copy ---------- */
#wrapper .td2-body { display: flex; flex-direction: column; gap: 24px; }
#wrapper .td2-body p {
  margin: 0;
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: .7;
}
#wrapper .td2-body .td2-body__lead { font-weight: 700; color: var(--color-accent); opacity: 1; }
#wrapper .td2-body .td2-body__tip { font-weight: 700; color: var(--color-warm-ivory); opacity: 1; }

/* ---------- Highlights (2-col) ---------- */
#wrapper .td2-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
#wrapper .td2-highlight { display: flex; align-items: center; gap: 24px; }
#wrapper .td2-highlight img { width: 50px; height: 50px; flex-shrink: 0; object-fit: cover; }
#wrapper .td2-highlight > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#wrapper .td2-highlight__title { margin: 0; font-family: var(--font-ui); font-size: 18px; line-height: 1; color: var(--color-accent); text-transform: uppercase; }
#wrapper .td2-highlight__copy { margin: 0; font-family: "Titillium Web", var(--font-display-regular); font-size: 18px; line-height: 1.4; color: var(--color-white); opacity: .7; }

/* ---------- "Your front row experience": heading + copy | image ---------- */
#wrapper .td2-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-template-areas: "head media" "copy media";
  column-gap: 30px;
  row-gap: 30px;
  align-items: start;
}
#wrapper .td2-split__head { grid-area: head; }
#wrapper .td2-split__media { grid-area: media; height: 345px; border-radius: 30px; overflow: hidden; }
#wrapper .td2-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
#wrapper .td2-split__copy { grid-area: copy; display: flex; flex-direction: column; gap: 24px; }
#wrapper .td2-split__copy p {
  margin: 0;
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: .7;
}
#wrapper .td2-split__copy .td2-split__lead { font-weight: 700; color: var(--color-accent); opacity: 1; }

/* ---------- Repeated CTA pair + notice ---------- */
#wrapper .td2-repeat-cta { display: flex; flex-direction: column; align-items: center; gap: 20px; }
#wrapper .td2-repeat-cta .td2-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; }
#wrapper .td2-repeat-cta .td2-btn { width: 350px; max-width: 100%; }
#wrapper .td2-notice {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 712px;
  max-width: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
}
#wrapper .td2-notice__icon { flex-shrink: 0; }
#wrapper .td2-notice__divider { flex-shrink: 0; width: 1px; height: 40px; background: rgba(255, 255, 255, .2); }
#wrapper .td2-notice__text {
  margin: 0;
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-warm-ivory);
}

/* ---------- Video banner ---------- */
#wrapper .td2-video {
  position: relative;
  z-index: 1;
  aspect-ratio: 1760 / 700;
  margin-block: 40px;
  border-radius: 60px;
  overflow: hidden;
  background: #d9d9d9;
}
#wrapper .td2-video__media { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Other tickets: compact ticket cards ---------- */
#wrapper .td2-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#wrapper .ticket-card--compact { border-radius: 20px; }
#wrapper .ticket-card--compact .ticket-card__image { height: 231px; border-radius: 20px 20px 0 0; }
#wrapper .ticket-card--compact .ticket-card__content { padding: 16px 16px 20px; gap: 20px; border-radius: 0 0 20px 20px; }
#wrapper .ticket-card--compact .ticket-card__title-text { gap: 4px; }
#wrapper .ticket-card--compact .ticket-card__eyebrow { font-size: 9.25px; }
#wrapper .ticket-card--compact .ticket-card__name { font-size: 12px; white-space: normal; }
#wrapper .ticket-card--compact .ticket-card__badges { gap: 5px; }
#wrapper .ticket-card--compact .ticket-card__badges img { width: 30px; height: 30px; }
#wrapper .ticket-card--compact .ticket-card__days { gap: 9px; }
#wrapper .ticket-card--compact .ticket-card__days-row { font-size: 10.5px; }
#wrapper .ticket-card--compact .ticket-card__explore,
#wrapper .ticket-card--compact .ticket-card__buy { gap: 4px; padding: 16px 12px; font-size: 9.25px; text-transform: uppercase; }
#wrapper .ticket-card--compact .ticket-card__flag { padding: 1px 8px; font-size: 9.25px; text-transform: uppercase; }
#wrapper .td2-aed { width: 8.59px; height: 7.52px; }

@media (max-width: 992px) {
  #wrapper .td2-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wrapper .td2-split { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "head" "media" "copy"; }
}

/* ---------- Mobile (Figma 1703:11745, 390px wide) ---------- */
@media (max-width: 600px) {
  /* Room for the CTA pair pinned to the bottom of the viewport. */
  #wrapper.td2-page { padding-bottom: 150px; }

  #wrapper .td2-hero { aspect-ratio: 358 / 220; border-radius: 30px; margin-bottom: 24px; }

  #wrapper .td2-content { gap: 30px; }
  #wrapper .td2-section-head { gap: 16px; }
  #wrapper .td2-content > .td2-section-head { margin-bottom: 0; }
  #wrapper .td2-heading { font-family: var(--font-display-black); font-size: 16px; line-height: normal; }

  #wrapper .td2-top__main { display: flex; flex-direction: column; gap: 16px; width: 100%; }
  #wrapper .td2-title { flex-direction: row; align-items: center; gap: 6px; }
  #wrapper .td2-title__text { flex: 1; min-width: 0; gap: 4px; }
  #wrapper .td2-title .td-title__eyebrow { font-size: 12px; }
  #wrapper .td2-title__name { max-width: none; font-size: 12px; }
  #wrapper .td2-badges { gap: 4px; }
  #wrapper .td2-badges img { width: 32px; height: 32px; }

  #wrapper .td2-actions--sticky {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 50;
    width: calc(100% - 40px);
  }
  /* Dark blurred wash behind the pinned buttons, like the Figma "Blur" layer. */
  #wrapper .td2-actions--sticky::before {
    content: '';
    position: absolute;
    inset: -43px -64px -60px;
    z-index: -1;
    background: rgba(0, 0, 0, .7);
    filter: blur(25px);
    pointer-events: none;
  }
  #wrapper .td2-actions--sticky .td2-btn { width: 100%; }

  #wrapper .td2-body { gap: 14px; }
  #wrapper .td2-body p { font-size: 14px; opacity: .8; }
  #wrapper .td2-body .td2-body__lead { text-transform: none; }

  #wrapper .td2-highlights { grid-template-columns: 1fr; gap: 24px; }
  #wrapper .td2-highlight { align-items: flex-start; gap: 16px; }
  #wrapper .td2-highlight img { width: 40px; height: 40px; }
  #wrapper .td2-highlight > div { gap: 4px; }
  #wrapper .td2-highlight__title,
  #wrapper .td2-highlight__copy { font-size: 14px; line-height: 1.4; }
  #wrapper .td2-highlight__copy { opacity: .8; }

  #wrapper .td2-split { row-gap: 30px; }
  #wrapper .td2-split__media { height: auto; aspect-ratio: 600 / 377; }
  #wrapper .td2-split__copy { gap: 20px; }
  #wrapper .td2-split__copy p { font-size: 14px; opacity: .8; }
  #wrapper .td2-split__copy .td2-split__lead { text-transform: none; }

  #wrapper .td2-video { aspect-ratio: 358 / 220; margin-block: 30px; border-radius: 30px; }

  #wrapper .td2-related { grid-template-columns: 1fr; gap: 30px; }
  #wrapper .ticket-card--compact { border-radius: 24px 24px 30px 30px; }
  #wrapper .ticket-card--compact .ticket-card__image { height: 250px; border-radius: 24px 24px 0 0; border-color: rgba(255, 255, 255, .1); }
  #wrapper .ticket-card--compact .ticket-card__content { padding: 20px 16px 24px; gap: 16px; border-radius: 0 0 30px 30px; border-color: rgba(255, 255, 255, .1); }
  #wrapper .ticket-card--compact .ticket-card__eyebrow,
  #wrapper .ticket-card--compact .ticket-card__name { font-size: 12px; }
  #wrapper .ticket-card--compact .ticket-card__badges { gap: 4px; }
  #wrapper .ticket-card--compact .ticket-card__badges img { width: 32px; height: 32px; }
  #wrapper .ticket-card--compact .ticket-card__days { gap: 12px; }
  #wrapper .ticket-card--compact .ticket-card__days-row { font-size: 12px; }
  #wrapper .ticket-card--compact .ticket-card__explore { padding: 15px 12px; font-size: 12px; }
  #wrapper .ticket-card--compact .ticket-card__buy { padding: 14px 12px; font-size: 12px; }
  #wrapper .ticket-card--compact .ticket-card__flag { bottom: -7px; padding: 2px 12px; font-size: 9px; }
  #wrapper .td2-aed { width: 9px; height: 8px; }
}

/* =========================================================
   NEWS LIST PAGE (news.html)
   Reference: Figma "Laptop :: News List" (2930:22377) and
   "Mobile :: News List" (3074:35014). Content column is the
   standard 1760px .container-fluid. The bento layout (XL, then
   L+S+S, then S+S+L) is a 4-column grid: L spans 2 columns
   (417 * 2 + 30 = 865px), XL spans all 4.
   ========================================================= */

#wrapper .news-list {
  position: relative;
  overflow: hidden;
  padding-top: clamp(110px, calc(175 / 1920 * 100vw), 175px);
  padding-bottom: 80px;
  background: var(--color-black);
}
#wrapper .news-list__glow,
#wrapper .news-list__pattern { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 0; }
#wrapper .news-list__glow { top: 0; height: 100%; object-fit: cover; }
#wrapper .news-list__pattern { top: clamp(50px, calc(100 / 1920 * 100vw), 100px); height: auto; }
#wrapper .news-list__inner { position: relative; z-index: 1; }

/* ---------- Page heading: title + gradient rule ---------- */
#wrapper .page-heading { display: flex; align-items: center; gap: 40px; margin-bottom: 40px; }
#wrapper .page-heading__title {
  margin: 0;
  font-family: var(--font-display-wide);
  font-size: clamp(36px, calc(60 / 1920 * 100vw), 60px);
  line-height: 1;
  color: var(--color-white);
  text-transform: uppercase;
}
#wrapper .page-heading__rule { display: block; flex: 1; min-width: 0; }
#wrapper .page-heading__rule img { display: block; width: 100%; height: 1px; }

/* ---------- Category tabs + sort ---------- */
#wrapper .news-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 60px; }
#wrapper .news-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
#wrapper .news-tab {
  padding: 22px 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: none;
  color: var(--color-accent);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
#wrapper .news-tab--active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-black); }
#wrapper .news-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: none;
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
#wrapper .news-sort img { width: 22px; height: 22px; }

/* ---------- Bento grid of news cards ---------- */
#wrapper .news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 60px; }

#wrapper .news-card {
  position: relative;
  isolation: isolate;
  display: block;
  height: 550px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 60px;
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  transition: transform .25s ease;
}
#wrapper .news-card:hover { transform: translateY(-4px); }
#wrapper .news-card[hidden] { display: none; }
#wrapper .news-card--large { grid-column: span 2; background: var(--color-carbon-black); }
#wrapper .news-card--xl { grid-column: 1 / -1; height: 500px; }

#wrapper .news-card__media { position: absolute; top: 0; left: 0; right: 0; height: 300px; overflow: hidden; }
#wrapper .news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#wrapper .news-card--large .news-card__media { height: 385px; }
#wrapper .news-card--crop-left .news-card__media img { object-position: left center; }

/* Frosted panel behind the text, feathered so it melts into the photo. */
#wrapper .news-card__blur {
  position: absolute;
  left: -50px;
  right: -50px;
  bottom: 0;
  height: 320px;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
}
#wrapper .news-card--large .news-card__blur { height: 250px; }

#wrapper .news-card__body { position: absolute; left: 30px; right: 30px; bottom: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
#wrapper .news-card--large .news-card__body { left: 40px; right: 40px; }
#wrapper .news-card__text { display: flex; flex-direction: column; gap: 8px; }
#wrapper .news-card__date { display: block; font-family: var(--font-ui); font-size: 18px; line-height: 1; color: var(--color-accent); }
#wrapper .news-card__title { display: block; font-family: var(--font-display-regular); font-size: 18px; line-height: 1.2; color: var(--color-white); }
#wrapper .news-card__cta {
  padding: 18px 30px;
  border-radius: 100px;
  background: var(--color-cta);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}

/* XL: photo on the left, frosted text panel on the right. */
#wrapper .news-card--xl .news-card__media { right: auto; bottom: 0; width: calc(1122 / 1760 * 100%); height: auto; }
#wrapper .news-card--xl .news-card__blur {
  left: calc(1045 / 1760 * 100%);
  right: -40px;
  top: -64px;
  bottom: -65px;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 25%);
  mask-image: linear-gradient(to right, transparent 0, #000 25%);
}
#wrapper .news-card--xl .news-card__body { left: calc(1193 / 1760 * 100%); right: auto; top: 50%; bottom: auto; width: calc(537 / 1760 * 100%); transform: translateY(-50%); }
#wrapper .news-card--xl .news-card__title { font-size: 24px; }

#wrapper .news-empty { margin: 0; font-family: var(--font-ui); font-size: 16px; color: var(--color-white); opacity: .7; text-align: center; }
#wrapper .news-more { display: flex; justify-content: center; margin-top: 60px; }
#wrapper .news-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 268px;
  height: 52px;
  padding: 18px 30px;
  border: 1px solid var(--color-cta);
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--color-white);
}

@media (max-width: 1200px) {
  #wrapper .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below ~992px the XL side-by-side layout gets too cramped; stack it like a large card. */
@media (max-width: 992px) {
  #wrapper .news-card--xl { height: 550px; }
  #wrapper .news-card--xl .news-card__media { right: 0; bottom: auto; width: auto; height: 385px; }
  #wrapper .news-card--xl .news-card__blur {
    left: -50px;
    right: -50px;
    top: auto;
    bottom: 0;
    height: 250px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
  }
  #wrapper .news-card--xl .news-card__body { left: 40px; right: 40px; top: auto; bottom: 40px; width: auto; transform: none; }
}

/* ---------- Mobile (Figma 3074:35014, 390px wide) ---------- */
@media (max-width: 600px) {
  #wrapper .news-list { padding-top: 88px; padding-bottom: 60px; }
  #wrapper .news-list__inner { padding-inline: 16px; }

  #wrapper .page-heading { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 30px; }
  #wrapper .page-heading__title { font-size: 20px; }
  #wrapper .page-heading__rule { flex: none; }

  /* The mobile frame has no category tabs or sort control. */
  #wrapper .news-toolbar { display: none; }

  #wrapper .news-grid { grid-template-columns: 1fr; row-gap: 24px; }

  #wrapper .news-card,
  #wrapper .news-card--large,
  #wrapper .news-card--xl {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: 30px;
    background: var(--color-black);
  }
  #wrapper .news-card .news-card__media,
  #wrapper .news-card--large .news-card__media,
  #wrapper .news-card--xl .news-card__media { position: relative; inset: auto; width: 100%; height: 220px; flex-shrink: 0; }

  #wrapper .news-card .news-card__blur,
  #wrapper .news-card--large .news-card__blur,
  #wrapper .news-card--xl .news-card__blur {
    left: -75px;
    right: -75px;
    top: auto;
    bottom: 0;
    height: 250px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
  }

  #wrapper .news-card .news-card__body,
  #wrapper .news-card--large .news-card__body,
  #wrapper .news-card--xl .news-card__body {
    position: relative;
    inset: auto;
    width: auto;
    margin-top: 40px;
    padding: 24px 24px 30px;
    transform: none;
  }
  #wrapper .news-card__date,
  #wrapper .news-card__title,
  #wrapper .news-card--xl .news-card__title { font-size: 14px; }
  #wrapper .news-card__cta { display: none; }

  #wrapper .news-more { margin-top: 24px; }
  #wrapper .news-more__btn { width: auto; height: auto; padding: 16px 40px; }
}

/* =========================================================
   CONTACT US PAGE (contact.html)
   Reference: Figma "Contact Us", desktop 2930:22149 (1920px),
   mobile 3074:41840 (390px). Reuses the .page-heading component
   from the news page at a smaller 40px title size.
   Box: 1760 x 444, radius 60, 80px padding; the helmet sits
   outside the box (so the box's overflow doesn't clip it) and is
   cut off on the right by the section.
   ========================================================= */

#wrapper .contact-page {
  position: relative;
  overflow: hidden;
  padding-top: clamp(110px, calc(175 / 1920 * 100vw), 175px);
  padding-bottom: clamp(80px, calc(120 / 1920 * 100vw), 120px);
  background: var(--color-black);
}

#wrapper .page-heading--sm .page-heading__title { font-size: clamp(28px, calc(40 / 1920 * 100vw), 40px); }
#wrapper .contact-page .page-heading { margin-bottom: clamp(48px, calc(80 / 1920 * 100vw), 80px); }

#wrapper .contact-box-wrap { position: relative; }

/* Figma 2930:22227: renders 452 x 715 from x 1468, its top 221px above
   the box (the node's y of 211 is its rotation origin, not its top),
   cropped flush with the frame's right edge — so it is anchored to the
   viewport's right edge rather than the container's.
   The export has an opaque black background; lighten drops it so the
   box's dot pattern and border show through, as in the design. */
#wrapper .contact-helmet {
  position: absolute;
  right: calc((100% - 100vw) / 2);
  top: calc(-221 / 1920 * 100vw);
  width: auto;
  height: calc(715 / 1920 * 100vw);
  max-width: none;
  z-index: 2;
  mix-blend-mode: lighten;
  pointer-events: none;
}

#wrapper .contact-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: clamp(40px, calc(80 / 1920 * 100vw), 80px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 60px;
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .contact-box__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#wrapper .contact-box__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
#wrapper .contact-box__glow {
  position: absolute;
  left: -717px;
  top: -589px;
  width: 1261px;
  height: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

#wrapper .contact-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: calc(1283 / 1600 * 100%);
}
#wrapper .contact-group__title {
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: clamp(22px, calc(30 / 1920 * 100vw), 30px);
  line-height: 1.2;
  color: var(--color-white);
}

#wrapper .contact-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#wrapper .contact-list__divider { display: flex; flex-shrink: 0; }
#wrapper .contact-list__divider img { display: block; width: 1px; height: 40px; }

#wrapper .contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}
#wrapper .contact-item__icon { display: block; width: 40px; height: 40px; flex-shrink: 0; }
#wrapper .contact-item__text { display: flex; flex-direction: column; gap: 4px; }
#wrapper .contact-item__value {
  font-family: var(--font-display-regular);
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-warm-ivory);
  white-space: nowrap;
  transition: color .2s ease;
}
#wrapper .contact-item__label {
  font-family: var(--font-display-regular);
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-white);
}
#wrapper a.contact-item:hover .contact-item__value,
#wrapper a.contact-item:focus-visible .contact-item__value { color: var(--color-accent); }

#wrapper .contact-mobile-only { display: none; }

/* ---------- Tablet / mobile (Figma 3074:41840, 390px wide) ---------- */
@media (max-width: 768px) {
  #wrapper .contact-page { padding-bottom: 60px; }
  #wrapper .contact-page .page-heading { margin-bottom: 45px; }

  /* Figma 3074:41932: 240px tall, its top 69px above the box, flush right. */
  #wrapper .contact-helmet {
    top: -69px;
    height: clamp(240px, calc(240 / 390 * 100vw), 400px);
  }

  #wrapper .contact-box { gap: 60px; padding: 80px 30px; border-radius: 30px; }
  /* The mobile frame has no top glow; its background SVG carries the lighting. */
  #wrapper .contact-box__glow { display: none; }

  #wrapper .contact-group { gap: 30px; max-width: none; }
  #wrapper .contact-group__title { font-size: 16px; }

  #wrapper .contact-list { flex-direction: column; align-items: stretch; gap: 16px; }
  #wrapper .contact-list__divider img { width: 100%; height: 1px; }

  #wrapper .contact-item__value { font-size: 14px; white-space: normal; }

  #wrapper .contact-desktop-only { display: none; }
  #wrapper .contact-mobile-only { display: inline; }
}

@media (max-width: 600px) {
  #wrapper .contact-page { padding-top: 88px; }
  #wrapper .contact-page__inner { padding-inline: 16px; }
  #wrapper .page-heading--sm .page-heading__title { font-size: 20px; }
}

/* =========================================================
   ABU DHABI GUIDE PAGE (guide.html)
   Reference: Figma "Abu Dhabi Guide", desktop 2930:21888 (1920px),
   mobile 3074:44120 (390px).
   Hero 1760x600 → intro (title + copy) → 1164px day schedule
   (7 day tabs + 3 day cards) → outro banner → 5 alternating
   guide cards (text 567 | image 835, 149/30 side padding).
   Reuses .intro__title / __title-mid / __slash / __accent from the
   home intro and .btn-cta for the card buttons.
   .page-hero (Figma "Hero Video") and .partner-cta (Figma "Partner
   CTA" / "Mobile :: Partner Card") are shared with yasalam.html.
   ========================================================= */

#wrapper .guide-page { background: var(--color-black); }
#wrapper .guide-mobile-only { display: none; }

/* ---------- Hero ---------- */
#wrapper .page-hero { padding-top: clamp(100px, calc(135 / 1920 * 100vw), 135px); }
#wrapper .page-hero__frame {
  position: relative;
  isolation: isolate;
  height: clamp(360px, calc(600 / 1920 * 100vw), 600px);
  border-radius: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  overflow: hidden;
  background: var(--color-carbon-black);
}
/* 1760x990 16:9 frame centred in the 600px box (top -195) = object-fit: cover. */
#wrapper .page-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#wrapper .page-hero__blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
  pointer-events: none;
}
#wrapper .page-hero__content {
  position: absolute;
  z-index: 1;
  left: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  right: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  bottom: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#wrapper .page-hero__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 18px; line-height: 1; color: var(--color-accent); text-transform: uppercase; }
#wrapper .page-hero__title {
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: clamp(28px, calc(40 / 1920 * 100vw), 40px);
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
}

/* ---------- Intro ---------- */
#wrapper .guide-intro { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .guide-intro__inner { display: flex; align-items: center; justify-content: center; gap: 40px; }
#wrapper .guide-intro__title { line-height: 1.2; min-width: 0; flex-shrink: 0; }
#wrapper .guide-intro__title p { margin: 0; }
#wrapper .guide-intro__content { width: 591px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
#wrapper .guide-intro__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1; color: var(--color-accent); opacity: .8; text-transform: uppercase; }
#wrapper .guide-intro__copy { font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: var(--color-white); opacity: .8; }
#wrapper .guide-intro__copy p { margin: 0; }
#wrapper .guide-intro__copy p + p { margin-top: 1.4em; }

/* ---------- Day schedule ---------- */
#wrapper .guide-schedule { padding-top: clamp(80px, calc(160 / 1920 * 100vw), 160px); }
#wrapper .guide-schedule__inner { max-width: 1164px; margin-inline: auto; display: flex; flex-direction: column; gap: 40px; }

#wrapper .guide-days { display: flex; gap: 8px; }
#wrapper .guide-days li { flex: 1 1 0; min-width: 0; }
#wrapper .guide-day {
  width: 100%;
  padding: 22px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--color-accent);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#wrapper .guide-day:hover { border-color: var(--color-accent); }
#wrapper .guide-day--active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-black); }

#wrapper .guide-day-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
#wrapper .guide-day-panel[hidden] { display: none; }

#wrapper .day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 479px;
  padding: 244px 30px 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 40px;
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .day-card__media { position: absolute; top: 0; left: 0; width: 100%; height: 294px; object-fit: cover; }
/* Figma crops the evening photo to its right-hand side (left -75.8%, width 179.76%). */
#wrapper .day-card__media--evening { object-position: 95% 50%; }
#wrapper .day-card__blur {
  position: absolute;
  left: 0;
  right: 0;
  top: 201px;
  bottom: 0;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 60px);
}
#wrapper .day-card__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
#wrapper .day-card__head { display: flex; flex-direction: column; gap: 8px; }
#wrapper .day-card__time { margin: 0; font-family: var(--font-display-bold); font-size: 18px; line-height: 1.2; color: var(--color-accent); }
#wrapper .day-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
#wrapper .day-card__tags li,
#wrapper .day-card__badge {
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1;
}
#wrapper .day-card__tags li { background: #212123; color: var(--color-white); }
#wrapper .day-card__badge { border: 1px solid var(--color-accent); color: var(--color-accent); }
#wrapper .day-card__copy { margin: 0; font-family: "Titillium Web", var(--font-display-regular); font-size: 16px; line-height: 1.2; color: var(--color-white); opacity: .8; }

/* ---------- Outro + guide cards ---------- */
#wrapper .guide-explore { padding-top: clamp(80px, calc(116 / 1920 * 100vw), 116px); }
#wrapper .guide-explore__inner { display: flex; flex-direction: column; gap: 40px; }

#wrapper .guide-outro {
  position: relative;
  isolation: isolate;
  height: clamp(380px, calc(650 / 1920 * 100vw), 650px);
  border-radius: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  overflow: hidden;
  background: var(--color-carbon-black);
}
/* 1760x987 image, bottom -192 in a 650px box → 43% down the overflow. */
#wrapper .guide-outro__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; }
#wrapper .guide-outro__blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
}
#wrapper .guide-outro__content {
  position: absolute;
  z-index: 1;
  left: clamp(30px, calc(80 / 1920 * 100vw), 80px);
  right: clamp(30px, calc(80 / 1920 * 100vw), 80px);
  bottom: clamp(30px, calc(80 / 1920 * 100vw), 80px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#wrapper .guide-outro__eyebrow { margin: 0; font-family: var(--font-ui); font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); line-height: 1; color: var(--color-accent); text-transform: uppercase; }
#wrapper .guide-outro__title {
  margin: 0;
  max-width: 902px;
  font-family: var(--font-display-wide);
  font-size: clamp(20px, calc(30 / 1920 * 100vw), 30px);
  line-height: 1.4;
  color: var(--color-white);
  text-transform: uppercase;
}

#wrapper .partner-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  gap: clamp(40px, calc(179 / 1920 * 100vw), 179px);
  padding: 0 30px 0 clamp(40px, calc(149 / 1920 * 100vw), 149px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .partner-cta--reverse { flex-direction: row-reverse; padding: 0 clamp(40px, calc(149 / 1920 * 100vw), 149px) 0 30px; }
/* Dot texture + corner glow, kept at its 1760px export size; the reverse
   variant's glow sits top-right, so that one is anchored to the right. */
#wrapper .partner-cta__bg { position: absolute; top: 0; left: 0; max-width: none; z-index: -1; pointer-events: none; }
#wrapper .partner-cta--reverse .partner-cta__bg { left: auto; right: 0; }
#wrapper .partner-cta__glow { display: none; }

#wrapper .partner-cta__body {
  flex: 0 1 567px;
  min-width: 0;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
#wrapper .partner-cta__head { display: flex; flex-direction: column; gap: 4px; }
#wrapper .partner-cta__title { margin: 0; font-family: var(--font-display-bold); font-size: clamp(24px, calc(30 / 1920 * 100vw), 30px); line-height: 1.2; color: var(--color-white); text-transform: uppercase; }
#wrapper .partner-cta__sub { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1; color: var(--color-accent); }
#wrapper .partner-cta__copy { font-family: "Titillium Web", var(--font-display-regular); font-size: 16px; line-height: 1.2; color: var(--color-white); opacity: .8; }
#wrapper .partner-cta__copy p { margin: 0; }
#wrapper .partner-cta__copy ul { margin-top: 1.2em; padding-left: 24px; list-style: disc; }
#wrapper .partner-cta__btn { margin-top: 16px; }

#wrapper .partner-cta__media { flex: 1 1 835px; min-width: 0; display: flex; flex-direction: column; padding: 30px 0; }
#wrapper .partner-cta__media img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; border-radius: clamp(20px, calc(40 / 1920 * 100vw), 40px); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  #wrapper .guide-day-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  #wrapper .guide-days {
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter-tablet));
    padding-inline: var(--gutter-tablet);
  }
  #wrapper .guide-days::-webkit-scrollbar { display: none; }
  #wrapper .guide-days li { flex: none; }
  #wrapper .guide-day { padding: 12px 30px; border-radius: 12px; font-size: 14px; }

  /* Guide cards switch to the stacked mobile card (Figma "Mobile :: Partner Card"). */
  #wrapper .partner-cta,
  #wrapper .partner-cta--reverse {
    flex-direction: column;
    gap: 0;
    padding: 16px 16px 60px;
    border-color: #313131;
    border-radius: 30px;
  }
  #wrapper .partner-cta__bg { display: none; }
  /* Blue glow seen through the dot texture along the card's bottom 120px. */
  #wrapper .partner-cta__glow {
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    overflow: hidden;
    pointer-events: none;
  }
  #wrapper .partner-cta__glow img { position: absolute; top: 38px; left: 50%; max-width: none; transform: translateX(-50%); }

  #wrapper .partner-cta__media { order: -1; flex: none; padding: 0; height: 180px; }
  #wrapper .partner-cta__media img { border-radius: 14px; }
  #wrapper .partner-cta__body { flex: none; padding: 16px 0 0; gap: 16px; }
  #wrapper .partner-cta__title { font-size: 18px; }
  #wrapper .partner-cta__sub { font-size: 14px; }
  #wrapper .partner-cta__copy { font-size: 14px; }
  #wrapper .partner-cta__copy ul { padding-left: 21px; }
  #wrapper .partner-cta__btn { width: 100%; margin-top: 0; padding: 16px; }
}

/* ---------- Mobile (Figma 3074:44120, 390px wide) ---------- */
@media (max-width: 768px) {
  #wrapper .guide-mobile-only { display: inline; }

  #wrapper .page-hero { padding-top: 142px; }
  #wrapper .page-hero__frame { height: 400px; border-radius: 30px; }
  #wrapper .page-hero__blur { height: 200px; background: rgba(0, 0, 0, .6); }
  #wrapper .page-hero__content { left: 16px; right: 16px; bottom: 24px; text-align: center; }
  #wrapper .page-hero__eyebrow { font-size: 12px; }
  #wrapper .page-hero__title { font-size: 16px; }

  #wrapper .guide-intro { padding-top: 60px; }
  #wrapper .guide-intro__inner { flex-direction: column; align-items: stretch; gap: 30px; }
  #wrapper .guide-intro__title { display: flex; flex-direction: column; gap: 16px; font-size: 24px; line-height: 1; }
  #wrapper .guide-intro__title .intro__title-mid { gap: 8px; }
  #wrapper .guide-intro__title .intro__slash { font-size: 1em; }
  #wrapper .guide-intro__content { width: auto; gap: 16px; }
  #wrapper .guide-intro__copy { font-size: 14px; }

  #wrapper .guide-schedule { padding-top: 60px; }
  #wrapper .guide-schedule__inner { gap: 30px; }

  #wrapper .guide-day-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #wrapper .day-card { min-height: 0; padding: 0; gap: 40px; border-radius: 30px; }
  #wrapper .day-card__media { position: relative; height: 270px; flex-shrink: 0; }
  #wrapper .day-card__blur {
    top: auto;
    height: 326px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
  }
  #wrapper .day-card__body { padding: 20px 24px 30px; }
  #wrapper .day-card__time,
  #wrapper .day-card__copy { font-size: 14px; }

  #wrapper .guide-explore { padding-top: 60px; }
  #wrapper .guide-explore__inner { gap: 16px; }

  /* Mobile outro: image card with the copy below it, no overlay. */
  #wrapper .guide-outro {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 44px;
    border-radius: 0;
    overflow: visible;
    background: none;
  }
  #wrapper .guide-outro__media { position: static; height: auto; aspect-ratio: 358 / 200.878; border-radius: 30px; }
  #wrapper .guide-outro__blur { display: none; }
  #wrapper .guide-outro__content { position: static; }
  #wrapper .guide-outro__eyebrow { font-size: 16px; }
  #wrapper .guide-outro__title { font-size: 20px; }
}

@media (max-width: 600px) {
  #wrapper .page-hero > .container-fluid,
  #wrapper .guide-intro > .container-fluid,
  #wrapper .guide-schedule > .container-fluid,
  #wrapper .guide-explore > .container-fluid { padding-inline: 16px; }
  #wrapper .guide-days { margin-inline: -16px; padding-inline: 16px; }
}

/* =========================================================
   YASALAM ENTERTAINMENT PAGE (yasalam.html)
   Reference: Figma "Yasalam Entertainment", desktop 2930:21842
   (1920px), mobile 3163:36097 (390px).
   Reuses .page-hero and .partner-cta from the guide page. Adds the
   hero logo, the centred "Page Heading - Mid" (.section-heading)
   and the 4 + 3 After-Race Concert line-up (one image on mobile).
   ========================================================= */

#wrapper .yasalam-page { background: var(--color-black); }

/* Hero logo: 433x90, 60px in from the frame's bottom-right corner on
   desktop; on mobile it sits centred 30px below the hero (221x46). */
#wrapper .page-hero__wrap { position: relative; }
#wrapper .page-hero__logo {
  position: absolute;
  z-index: 1;
  right: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  bottom: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  width: clamp(220px, calc(433 / 1920 * 100vw), 433px);
  height: auto;
}

#wrapper .ya-intro { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .ya-intro__text {
  max-width: 865px;
  margin: 0 auto;
  font-family: var(--font-display-regular);
  font-size: clamp(18px, calc(24 / 1920 * 100vw), 24px);
  line-height: 1.2;
  color: var(--color-white);
  text-align: center;
}

#wrapper .ya-section { padding-top: clamp(80px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .ya-section--tight { padding-top: clamp(70px, calc(100 / 1920 * 100vw), 100px); }

/* ---------- Page Heading - Mid: rule | title + sub | rule ---------- */
#wrapper .section-heading {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1462px;
  margin: 0 auto clamp(40px, calc(60 / 1920 * 100vw), 60px);
}
#wrapper .section-heading__rule { flex: 1 1 0; min-width: 0; height: 1px; }
#wrapper .section-heading__rule--mobile { display: none; }
#wrapper .section-heading__text { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#wrapper .section-heading__title {
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: clamp(28px, calc(40 / 1920 * 100vw), 40px);
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
}
#wrapper .section-heading__sub { margin: 0; font-family: var(--font-display-regular); font-size: 14px; line-height: 1.2; color: var(--color-white); text-transform: uppercase; }

/* ---------- After-Race Concert line-up ---------- */
#wrapper .ya-lineup { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1462px; margin-inline: auto; }
#wrapper .ya-lineup li {
  width: calc((100% - 90px) / 4);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: clamp(24px, calc(40 / 1920 * 100vw), 40px);
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .ya-lineup img { width: 100%; height: 100%; object-fit: cover; }
#wrapper .ya-lineup-mobile { display: none; }

#wrapper .ya-lineup__body { max-width: 865px; margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
#wrapper .ya-lineup__copy { font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: var(--color-white); opacity: .8; text-align: center; }
#wrapper .ya-lineup__copy p { margin: 0; }
#wrapper .ya-lineup__copy p + p { margin-top: 1.4em; }

@media (max-width: 992px) {
  #wrapper .ya-lineup { gap: 20px; }
  #wrapper .ya-lineup li { width: calc((100% - 40px) / 3); }
}

/* ---------- Mobile (Figma 3163:36097, 390px wide) ---------- */
@media (max-width: 768px) {
  #wrapper .page-hero__logo { position: static; display: block; width: 221px; margin: 30px auto 0; }

  #wrapper .ya-intro { padding-top: 16px; }
  #wrapper .ya-intro__text { font-size: 14px; }

  #wrapper .ya-section,
  #wrapper .ya-section--tight { padding-top: 60px; }

  /* Mobile heading: title + sub stacked, one centre-weighted rule below. */
  #wrapper .section-heading { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 30px; }
  #wrapper .section-heading__rule--left,
  #wrapper .section-heading__rule--right { display: none; }
  #wrapper .section-heading__rule--mobile { display: block; flex: none; width: 100%; }
  #wrapper .section-heading__title { font-size: 20px; }
  #wrapper .section-heading__sub { font-size: 12px; }

  /* The mobile frame replaces the seven cards with one 600x338 line-up tile. */
  #wrapper .ya-lineup { display: none; }
  #wrapper .ya-lineup-mobile { display: block; width: 100%; height: auto; aspect-ratio: 600 / 338; object-fit: cover; border-radius: 30px; }

  #wrapper .ya-lineup__body { margin-top: 30px; gap: 30px; }
  #wrapper .ya-lineup__copy { font-size: 14px; }
  #wrapper .ya-lineup__btn { width: 100%; padding: 16px; }

  /* Mobile cards carry only the first sentence of the copy. */
  #wrapper .partner-cta__more { display: none; }
}

@media (max-width: 600px) {
  #wrapper .ya-intro > .container-fluid,
  #wrapper .ya-section > .container-fluid { padding-inline: 16px; }
}

/* =========================================================
   HOME PAGE (home.html)
   Reference: Figma "Home", node 2378:47431, 1920px wide / 9717px tall.
   Reuses .hero__date*, .countdown*, .scroll-down*, .yasalam*,
   .inclusions*, .season-finale*, .get-ready*, .partners*, .site-footer*
   from above — only net-new sections/elements are defined here.
   ========================================================= */

/* ---------- Home Hero (KV image has the headline baked in) ---------- */
#wrapper .home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 160px 20px clamp(60px, calc(160 / 1920 * 100vw), 160px);
}
#wrapper .home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
#wrapper .home-hero__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: top;
  z-index: -1;
  pointer-events: none;
}
#wrapper .home-hero__meta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; }

/* ---------- Ticket category mini-cards (overlap the hero/intro seam) ---------- */
#wrapper .ticket-mini-row {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(12px, calc(24 / 1920 * 100vw), 24px);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(-90px, calc(-140 / 1920 * 100vw), -40px);
  margin-bottom: clamp(40px, calc(80 / 1920 * 100vw), 80px);
  padding-inline: var(--gutter-desktop);
}
@media (max-width: 992px) { #wrapper .ticket-mini-row { padding-inline: var(--gutter-tablet); } }
@media (max-width: 768px) {
  #wrapper .ticket-mini-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-inline: var(--gutter-mobile); margin-top: -40px; }
}
#wrapper .ticket-mini {
  position: relative;
  flex: 0 0 auto;
  width: clamp(160px, calc(240 / 1920 * 100vw), 240px);
  aspect-ratio: 240 / 180;
  border: 1px solid var(--color-accent);
  border-radius: 30px;
  overflow: hidden;
}
#wrapper .ticket-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#wrapper .ticket-mini::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
  pointer-events: none;
}
#wrapper .ticket-mini__label { position: absolute; left: 20px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
#wrapper .ticket-mini__name { font-family: var(--font-display-bold); font-size: 12px; color: var(--color-white); text-transform: uppercase; margin: 0; }
#wrapper .ticket-mini__price { font-family: var(--font-ui); font-size: 12px; color: var(--color-accent); margin: 0; }

/* ---------- After Party (ÆDEN) ---------- */
#wrapper .after-party { position: relative; padding: clamp(60px, calc(120 / 1920 * 100vw), 120px) 0; overflow: hidden; background: var(--color-black); }
#wrapper .after-party__bg { position: absolute; inset: 0; z-index: 0; }
#wrapper .after-party__bg img { width: 100%; height: 100%; object-fit: cover; }
#wrapper .after-party__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, calc(30 / 1920 * 100vw), 30px);
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(30px, calc(60 / 1920 * 100vw), 60px);
}
#wrapper .after-party__media { border: 2px solid var(--color-accent); border-radius: 40px; overflow: hidden; width: min(856px, 100%); aspect-ratio: 856 / 381; flex-shrink: 0; }
#wrapper .after-party__media img { width: 100%; height: 100%; object-fit: cover; }
#wrapper .after-party__content { position: relative; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; max-width: 567px; }
#wrapper .after-party__title { font-family: var(--font-display-bold); font-size: clamp(20px, calc(30 / 1920 * 100vw), 30px); text-transform: uppercase; color: var(--color-white); line-height: 1; margin: 0; }
#wrapper .after-party__copy { opacity: .8; font-size: var(--fs-body); }
#wrapper .after-party__copy p { margin: 0 0 16px; }
#wrapper .after-party__copy p:last-child { margin-bottom: 0; }
#wrapper .after-party__tagline { position: relative; text-align: center; max-width: 994px; margin: 0 auto; opacity: .7; color: var(--color-warm-ivory); font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); }

/* ---------- Yasalam showcase reel + "get closest to the stage" CTA heading ---------- */
#wrapper .yasalam__showcase { width: 100%; max-width: 1283px; aspect-ratio: 1283 / 570; border: 2px solid var(--color-accent); border-radius: 40px; overflow: hidden; }
#wrapper .yasalam__showcase img { width: 100%; height: 100%; object-fit: cover; }
#wrapper .yasalam__cta-heading { display: flex; flex-direction: column; align-items: center; gap: 24px; }
#wrapper .yasalam__cta-badge { height: 50px; width: auto; }
#wrapper .yasalam__cta-heading p { font-family: var(--font-display-bold); font-size: 18px; text-transform: uppercase; color: var(--color-white); text-align: center; margin: 0; }

/* ---------- Get Ready signup form (home.html variant) ---------- */
#wrapper .get-ready__form { position: relative; display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 686px; }
#wrapper .get-ready__form-row { display: flex; gap: 16px; flex-wrap: wrap; }
#wrapper .get-ready__input {
  /* No flex-basis here: this class is shared by the two name inputs
     (flex items of the *row*, where a basis sizes their width) and the
     standalone email input (a direct flex item of .get-ready__form,
     which is column-direction — the same basis would size its HEIGHT
     instead, which is what was blowing it up to 240px tall). The email
     input doesn't need flex sizing at all; align-items:stretch
     (the column flex container's default) already gives it the full
     row width on its own. */
  width: 100%;
  background: rgba(0, 0, 0, .2);
  border: none;
  border-radius: 100px;
  padding: 24px;
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 16px;
}
#wrapper .get-ready__form-row .get-ready__input { flex: 1 1 240px; width: auto; }
#wrapper .get-ready__input::placeholder { color: rgba(255, 255, 255, .5); }
#wrapper .get-ready__submit {
  align-self: flex-start;
  width: 300px;
  max-width: 100%;
  padding-inline: 80px;
  border: none;
  cursor: pointer;
}

/* ---------- App download promo (phone mockup + store badges) ---------- */
#wrapper .app-promo { position: relative; background: var(--color-black); padding: clamp(60px, calc(120 / 1920 * 100vw), 120px) 0; overflow: hidden; }
#wrapper .app-promo__glow { position: absolute; left: -15%; top: 15%; width: 65%; pointer-events: none; opacity: .7; }
#wrapper .app-promo__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(30px, calc(60 / 1920 * 100vw), 60px); flex-wrap: wrap; }
#wrapper .app-promo__phone { flex: 1 1 380px; max-width: 480px; border-radius: 40px; overflow: hidden; }
#wrapper .app-promo__phone img { width: 100%; height: auto; display: block; }
#wrapper .app-promo__content { flex: 1 1 420px; max-width: 687px; display: flex; flex-direction: column; gap: 40px; }
#wrapper .app-promo__heading { font-family: var(--font-display-bold); font-size: clamp(30px, calc(60 / 1920 * 100vw), 60px); color: var(--color-warm-ivory); line-height: 1; letter-spacing: -.02em; margin: 0; }
#wrapper .app-promo__sub { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-display-regular); font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); margin: 0; }
#wrapper .app-promo__sub .is-accent { display: block; }
#wrapper .app-promo__sub span:last-child { opacity: .8; color: var(--color-white); }
#wrapper .app-promo__stores { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- App store badges (reused in App Promo + Footer) ---------- */
#wrapper .store-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #000;
  border: 1.5px solid #a6a6a6;
  border-radius: 6px;
  padding: 10px 16px;
  height: 60px;
  box-sizing: border-box;
}
#wrapper .store-badge__icon { width: 30px; height: 36px; object-fit: contain; }
#wrapper .store-badge__text { display: flex; flex-direction: column; color: var(--color-white); line-height: 1.2; }
#wrapper .store-badge__text small { font-size: 13px; font-family: "Titillium Web", var(--font-display-regular); }
#wrapper .store-badge__text strong { font-size: 20px; font-family: var(--font-display-regular); font-weight: 400; letter-spacing: -.02em; }
#wrapper .store-badge--sm { height: 40px; padding: 6px 10px; gap: 8px; }
#wrapper .store-badge--sm .store-badge__icon { width: 20px; height: 24px; }
#wrapper .store-badge--sm .store-badge__text small { font-size: 9px; }
#wrapper .store-badge--sm .store-badge__text strong { font-size: 14px; }

/* ---------- Footer additions used only on home.html (ticketing partner / stores / powered-by) ---------- */
#wrapper .site-footer__ticketing { position: absolute; left: 4.17%; top: 62.6%; display: flex; flex-direction: column; gap: 6px; }
#wrapper .site-footer__ticketing-label { font-family: var(--font-ui); font-size: 12px; color: var(--color-accent); text-transform: uppercase; margin: 0; }
#wrapper .site-footer__ticketing-logo { height: 20px; width: auto; }
#wrapper .site-footer__stores { position: absolute; right: 4.17%; top: 67%; display: flex; gap: 16px; }
#wrapper .site-footer__powered {
  position: absolute;
  left: 50%;
  top: 16.7%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 42px;
  opacity: .5;
}
#wrapper .site-footer__powered span { font-family: var(--font-display-wide); font-size: clamp(28px, calc(60 / 1920 * 100vw), 60px); color: var(--color-white); white-space: nowrap; }
#wrapper .site-footer__powered img { height: clamp(30px, calc(63 / 1920 * 100vw), 63px); width: auto; }

@media (max-width: 768px) {
  #wrapper .home-hero { padding-top: 120px; }
  #wrapper .after-party__inner { flex-direction: column; }
  #wrapper .after-party__content { align-items: center; text-align: center; }
  #wrapper .app-promo__inner { flex-direction: column; text-align: center; }
  #wrapper .app-promo__content { align-items: center; }
  #wrapper .app-promo__stores { justify-content: center; }
  #wrapper .site-footer__ticketing,
  #wrapper .site-footer__stores,
  #wrapper .site-footer__powered {
    position: static;
    transform: none;
    margin: 0 auto 16px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* =========================================================
   HOME PAGE — MOBILE (390px reference)
   Reference: Figma "Mobile :: Home", node 2378:51179.
   Rules here are scoped under #wrapper.wrapper--home (an extra class on
   home.html's wrapper) so they never affect index.html / tickets.html
   / ticket-detail.html, which share several of the same component
   classes (.intro, .inclusions, .get-ready, .partners, .site-footer)
   but were not built against this mobile-specific spec.
   ========================================================= */
@media (max-width: 576px) {
  /* ---------- Hero / date / ticket row ----------
     Below 576px, swap in the dedicated portrait KV export (390x884)
     instead of letting `cover` crop the wide desktop KV — the
     headline sits far enough off-center that a cover-crop at a
     390-wide/tall aspect clips it. The hero box itself is pinned to
     the export's own 390:884 aspect ratio (instead of min-height:100vh)
     so `cover` never has to scale past the container's actual width
     to satisfy its height — on some phones content pushed the
     100vh flex box taller than 884px, which forced the image wider
     than the viewport and cropped the headline off both edges. */
  #wrapper.wrapper--home .home-hero {
    /* calc(100vw * 884/390) instead of aspect-ratio: a percentage-height
       child (.home-hero__glow, height:150%) needs this box to have an
       unambiguously *definite* height to resolve against — an
       aspect-ratio-derived automatic height didn't reliably give it
       one, which let that child (and the box itself) grow past 884px
       and made `cover` scale the bg wider than the viewport again. */
    min-height: 0;
    max-height: none;
    height: calc(100vw * 884 / 390);
  }
  #wrapper.wrapper--home .home-hero__bg {
    /* The Figma mobile export (390x884) clipped a couple of letters of
       the headline flush against its own right edge with no recoverable
       margin, so this asset is instead a custom portrait crop of the
       desktop KV, re-centered on the headline with the sky extended
       upward (solid-fill, matching the gradient's own top color) to
       reach the 390:884 aspect ratio without cutting the text. */
     background-position: center top;
  }
  #wrapper.wrapper--home .hero__date-text { font-size: 20px; }
  #wrapper.wrapper--home .ticket-mini-row { margin-top: 20px; }

  /* ---------- Intro: title stays right-aligned on the home mobile
     spec (unlike the left-aligned mobile treatment used elsewhere);
     body copy stays left-aligned (inherits the generic 768px rule
     above), only the CTA button becomes full-width. ---------- */
  #wrapper.wrapper--home .intro--home .intro__title,
  #wrapper.wrapper--home .intro--home .intro__title-mid {
    text-align: right;
    justify-content: flex-end;
  }
  #wrapper.wrapper--home .intro--home .intro__title { font-size: 24px; }
  #wrapper.wrapper--home .intro--home .intro__content .btn-cta { width: 100%; }

  /* ---------- After Party: CTA becomes full-width on mobile ---------- */
  #wrapper.wrapper--home .after-party .btn-cta { width: 100%; }

  /* ---------- Get Ready: submit becomes full-width on mobile ---------- */
  #wrapper.wrapper--home .get-ready__submit { width: 100%; align-self: stretch; }

  /* ---------- Inclusions: rollercoaster full-width, waterpark +
     louvre side by side in a pair wrapper, museum tile and circular
     CTA dropped. Plain flex column (not grid) — a grid item's default
     align-self:stretch was inflating .inclusions__panel to fill the
     row instead of hugging its own auto content height. ---------- */
  #wrapper.wrapper--home .inclusions__grid { gap: 12px; }
  #wrapper.wrapper--home .inclusions__tile--rollercoaster { height: 250px; }
  #wrapper.wrapper--home .inclusions__tile--museum { display: none; }
  #wrapper.wrapper--home .inclusions__tile-pair { display: flex; gap: 12px; }
  #wrapper.wrapper--home .inclusions__tile-pair .inclusions__tile { flex: 1 1 0; height: 140px; }

  /* ---------- Season Finale ---------- */
  #wrapper.wrapper--home .season-finale__heading { font-size: 24px; }

  /* ---------- Get Ready: smaller heading, left-aligned both rows, no
     blur duplicate. The art becomes a plain full-width square banner
     stacked above the text (not absolutely positioned behind it) —
     the desktop box is far shorter than a 390px-tall image, and
     overflow:hidden on .get-ready was clipping almost all of it away
     when it was laid over the text as a background. ---------- */
  #wrapper.wrapper--home .get-ready { flex-direction: column; align-items: stretch; min-height: 0; max-height: none; overflow: visible; }
  #wrapper.wrapper--home .get-ready__heading { font-size: 34px; }
  #wrapper.wrapper--home .get-ready__heading-row--center { text-align: left; }
  #wrapper.wrapper--home .get-ready__heading-blur { display: none; }
  #wrapper.wrapper--home .get-ready__sub { font-size: 14px; }
  #wrapper.wrapper--home .get-ready__art {
    display: block;
    position: static;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    opacity: .5;
  }
  #wrapper.wrapper--home .get-ready__art img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  #wrapper.wrapper--home .get-ready__inner { padding-top: clamp(24px, calc(40 / 1920 * 100vw), 40px); }

  /* ---------- Partners: shrink to fit narrow width, tiny scaled logos ---------- */
  #wrapper.wrapper--home .partners { padding: 40px 0; }
  #wrapper.wrapper--home .partners__label,
  #wrapper.wrapper--home .partners__heading p { font-size: 10px; }
  #wrapper.wrapper--home .partners__logo,
  #wrapper.wrapper--home .partners__logo-row .partners__logo { height: 24px; width: auto; }
  #wrapper.wrapper--home .partners__logo--icon { height: 18px; }

  /* ---------- Footer: centered stack, secondary link lists dropped
     (already reachable from the off-canvas nav on mobile) ---------- */
  #wrapper.wrapper--home .site-footer__links,
  #wrapper.wrapper--home .site-footer__links--secondary { display: none; }
  #wrapper.wrapper--home .site-footer__powered { gap: 10px; max-width: 90%; flex-wrap: wrap; justify-content: center; }
  #wrapper.wrapper--home .site-footer__powered span { font-size: 14px; }
  #wrapper.wrapper--home .site-footer__powered img { height: 22px; }
  #wrapper.wrapper--home .site-footer__legal { text-align: center; }

  /* ---------- App promo: compact store badges on mobile, matching
     the small footer variant instead of the larger desktop one ---------- */
  #wrapper.wrapper--home .app-promo__stores .store-badge { height: 40px; padding: 6px 10px; gap: 8px; }
  #wrapper.wrapper--home .app-promo__stores .store-badge__icon { width: 20px; height: 24px; }
  #wrapper.wrapper--home .app-promo__stores .store-badge__text small { font-size: 9px; }
  #wrapper.wrapper--home .app-promo__stores .store-badge__text strong { font-size: 14px; }
}

/* =========================================================
   LEGAL PAGES (terms.html, privacy.html)
   Reference: Figma "Laptop :: Terms of Use" 2930:22364 (1920px),
   "Mobile :: Terms of Use" 3074:41695 (390px). Reuses .page-heading
   (--sm, 40px) from the contact page. Content column is 1164px:
   anchor tabs, then blocks of heading → body → 10% white divider,
   40px apart (30px on mobile).
   ========================================================= */

#wrapper .legal-page {
  padding-top: clamp(110px, calc(175 / 1920 * 100vw), 175px);
  padding-bottom: clamp(60px, calc(120 / 1920 * 100vw), 120px);
  background: var(--color-black);
}
#wrapper .legal-page .page-heading { margin-bottom: 60px; }
#wrapper .legal-mobile-br { display: none; }

#wrapper .legal-page__container {
  max-width: 1164px;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 577px) { #wrapper .legal-page__container { padding-inline: 24px; } }
@media (min-width: 1300px) { #wrapper .legal-page__container { padding-inline: 0; } }

/* ---------- Anchor tabs ---------- */
#wrapper .legal-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 60px; }
#wrapper .legal-tabs__item {
  padding: 22px 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--color-accent);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#wrapper .legal-tabs__item:hover { border-color: var(--color-accent); }
#wrapper .legal-tabs__item.is-active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-black); }

/* ---------- Content blocks ---------- */
#wrapper .legal-panel { display: flex; flex-direction: column; gap: 40px; }
#wrapper .legal-panel[hidden] { display: none; }
#wrapper .legal-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
#wrapper .legal-block__head { display: flex; flex-direction: column; gap: 12px; }
#wrapper .legal-block__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 18px; line-height: 1; color: var(--color-accent); }
#wrapper .legal-block__title {
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
}
#wrapper .legal-block__heading {
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-white);
}

#wrapper .legal-block__body {
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
}
/* Figma separates paragraphs/lists with one empty line (1 × line-height). */
#wrapper .legal-block__body > * { margin: 0; }
#wrapper .legal-block__body > * + * { margin-top: 1.4em; }
#wrapper .legal-block__body--stack > * + * { margin-top: 16px; }
#wrapper .legal-block__body strong { font-weight: 700; }
#wrapper .legal-block__body a { font-weight: 700; color: var(--color-accent); }
#wrapper .legal-block__body a:hover { text-decoration: underline; }

#wrapper .legal-list { padding-left: 27px; }
#wrapper ol.legal-list { list-style: decimal; }
#wrapper ul.legal-list--bullets { list-style: disc; }
#wrapper .legal-list--spaced > li + li { margin-top: 1.4em; }
/* A list (or line) that follows its lead-in sentence with no empty line between. */
#wrapper .legal-block__body > .legal-list--attached,
#wrapper .legal-block__body > .legal-attached { margin-top: 0; }
#wrapper .legal-block__body a.is-underlined { text-decoration: underline; }

@media (max-width: 600px) {
  #wrapper .legal-page { padding-top: 142px; padding-bottom: 60px; }
  #wrapper .legal-page .page-heading { margin-bottom: 30px; }
  #wrapper .legal-mobile-br { display: inline; }

  #wrapper .legal-tabs { gap: 8px; margin-bottom: 30px; }
  #wrapper .legal-tabs__item { padding: 12px 30px; border-radius: 12px; font-size: 14px; }

  #wrapper .legal-panel { gap: 30px; }
  #wrapper .legal-block { gap: 30px; padding-bottom: 30px; }
  #wrapper .legal-block__head { gap: 8px; }
  #wrapper .legal-block__eyebrow { font-size: 16px; }
  #wrapper .legal-block__title { font-size: 20px; }
  #wrapper .legal-block__heading { font-size: 16px; }
  #wrapper .legal-block__body { font-size: 14px; }
  #wrapper .legal-list { padding-left: 21px; }
}

/* =========================================================
   AUTHORIZED ONSELLERS PAGE (onsellers.html)
   Reference: Figma "Laptop :: Authorized Onsellers" 2930:22403
   (1920px), "Mobile :: Authorized Onsellers" 3074:41653 (390px).
   Hero 1760x450 (358x400 mobile) → 80px → intro (title + copy,
   1164px column) → 60px → onseller rows (cards on mobile).
   ========================================================= */

#wrapper .onsellers-page {
  padding-top: clamp(100px, calc(135 / 1920 * 100vw), 135px);
  padding-bottom: 54px;
  background: var(--color-black);
}

#wrapper .onsellers-hero {
  aspect-ratio: 1760 / 450;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: clamp(48px, calc(80 / 1920 * 100vw), 80px);
}
#wrapper .onsellers-hero picture,
#wrapper .onsellers-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

#wrapper .onsellers-page__container {
  max-width: 1164px;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 577px) { #wrapper .onsellers-page__container { padding-inline: 24px; } }
@media (min-width: 1300px) { #wrapper .onsellers-page__container { padding-inline: 0; } }

/* ---------- Intro ---------- */
#wrapper .onsellers-intro { display: flex; flex-direction: column; gap: 30px; margin-bottom: 60px; }
#wrapper .intro-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: clamp(32px, calc(50 / 1920 * 100vw), 50px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
#wrapper .intro-title__line { color: rgba(255, 255, 255, .9); }
#wrapper .intro-title__line--accent { display: flex; align-items: center; gap: 16px; color: var(--color-warm-ivory); }
#wrapper .intro-title__slash {
  font-family: var(--font-display-regular);
  font-size: 1.2em;
  line-height: 1;
  color: rgba(255, 255, 255, .2);
}
#wrapper .onsellers-intro__body { font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
#wrapper .onsellers-intro__body p { margin: 0; }
#wrapper .onsellers-intro__body p + p { margin-top: 1.4em; }
#wrapper .onsellers-intro__notice { color: var(--color-warm-ivory); }
#wrapper .onsellers-intro__body a { font-family: var(--font-display-bold); color: var(--color-accent); }
#wrapper .onsellers-intro__body a:hover { text-decoration: underline; }

/* ---------- Onseller rows ---------- */
#wrapper .onseller-list { display: flex; flex-direction: column; gap: 11px; }
#wrapper .onseller {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
}
#wrapper .onseller__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#wrapper .onseller__col--name { flex: 0 0 400px; }
#wrapper .onseller__col--location { flex: 1; }
#wrapper .onseller__value { margin: 0; font-family: var(--font-display-regular); font-size: 18px; line-height: 1.2; color: var(--color-white); }
#wrapper .onseller__label { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1; color: var(--color-warm-ivory); }
#wrapper .onseller__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--color-cta);
  white-space: nowrap;
  transition: opacity .2s ease;
}
#wrapper .onseller__link:hover { color: var(--color-cta); opacity: .8; }

@media (max-width: 768px) {
  #wrapper .onseller__col--name { flex-basis: 40%; }
}

/* Mobile: one card per onseller — name, location underneath, link below. */
@media (max-width: 600px) {
  #wrapper .onsellers-page { padding-top: 142px; padding-bottom: 0; }
  #wrapper .onsellers-hero { aspect-ratio: 358 / 400; border-radius: 30px; margin-bottom: 40px; }

  #wrapper .onsellers-intro { margin-bottom: 40px; }
  #wrapper .intro-title { gap: 16px; font-size: 24px; line-height: 1; }
  #wrapper .intro-title__line--accent { gap: 8px; }
  #wrapper .intro-title__slash { font-size: 1em; }
  #wrapper .onsellers-intro__body { font-size: 14px; }

  #wrapper .onseller-list { gap: 16px; }
  #wrapper .onseller { flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 20px; }
  #wrapper .onseller__col--name { flex: none; gap: 6px; }
  #wrapper .onseller__col--name .onseller__value { font-family: var(--font-display-bold); font-size: 14px; }
  #wrapper .onseller__col--name .onseller__label,
  #wrapper .onseller__col--location .onseller__label { display: none; }
  /* The location moves under the name, styled as the name's sub-label. */
  #wrapper .onseller__col--location { flex: none; margin-top: -18px; }
  #wrapper .onseller__col--location .onseller__value { font-family: var(--font-ui); font-size: 12px; line-height: 1; color: var(--color-warm-ivory); }
  #wrapper .onseller__link { font-size: 14px; }
}

/* =========================================================
   THE CIRCUIT PAGE (circuit.html)
   Reference: Figma "Laptop :: The Circuit" 2930:21922 (1920px),
   "Mobile :: Abu Dhabi Guide" 3167:36527 (390px).
   Reuses .page-hero (hero + outro blur), .section-heading and
   .intro-title. The two stats panels are layered compositions
   (drivers in front of their cards), so their parts are placed in
   design pixels scaled to the panel width: --u = 1 Figma px of the
   1760px desktop panel, or of the 358px mobile panel below 600px.
   ========================================================= */

#wrapper .circuit-page { background: var(--color-black); }
/* The 5X section is pulled up under the hero, so the hero stays on top. */
#wrapper .circuit-page .page-hero { position: relative; z-index: 2; }
#wrapper .circuit-mobile-br { display: none; }

/* ---------- 5X intro (Figma "Newsletter": 870px KV flipped, glow over it) ---------- */
#wrapper .circuit-intro {
  position: relative;
  z-index: 1;
  margin-top: calc(-137 / 1920 * 100vw);
  min-height: calc(761 / 1920 * 100vw);
  padding-top: calc(258 / 1920 * 100vw);
}
#wrapper .circuit-intro__kv {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  width: calc(870 / 1920 * 100vw);
  aspect-ratio: 1;
  object-fit: cover;
  transform: scaleX(-1);
}
#wrapper .circuit-intro__glow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(870 / 1920 * 100vw);
  pointer-events: none;
}
#wrapper .circuit-intro__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 1462px;
  margin-inline: auto;
}
#wrapper .circuit-intro__content > * { max-width: min(716px, 55%); }
#wrapper .circuit-intro__big {
  margin: 0;
  font-family: var(--font-display-wide);
  font-size: clamp(56px, calc(90 / 1920 * 100vw), 90px);
  line-height: 1;
  color: var(--color-accent);
}
#wrapper .circuit-intro__heading { display: flex; flex-direction: column; gap: 8px; color: var(--color-white); text-transform: uppercase; }
#wrapper .circuit-intro__eyebrow { margin: 0; font-family: var(--font-display-regular); font-size: 18px; line-height: 1.2; }
#wrapper .circuit-intro__title { margin: 0; font-family: var(--font-display-bold); font-size: 24px; font-weight: 400; line-height: 1.2; opacity: .8; }
#wrapper .circuit-intro__text { margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
#wrapper .circuit-intro__cta { margin-top: 16px; }

/* ---------- Stats panels ---------- */
#wrapper .circuit-stats__inner {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  --u: calc(100cqw / 1760);
}
#wrapper .stats-panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: calc(40 * var(--u));
  overflow: hidden;
}
#wrapper .stats-panel--drivers { height: calc(660 * var(--u)); }
#wrapper .stats-panel--team { height: calc(535 * var(--u)); }

#wrapper .stats-panel__title {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(454 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: calc(60 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  color: #fffce5;
  text-transform: uppercase;
}
#wrapper .stats-panel__title span:first-child { opacity: .7; }

#wrapper .stats-group { position: absolute; }
#wrapper .stats-group--lap { left: calc(374 * var(--u)); top: calc(49 * var(--u)); width: calc(630 * var(--u)); height: calc(611 * var(--u)); }
#wrapper .stats-group--wins { left: calc(998 * var(--u)); top: calc(49 * var(--u)); width: calc(702 * var(--u)); height: calc(611 * var(--u)); }

/* Driver cut-outs: full-length portraits cropped by their box (top-aligned). */
#wrapper .stats-driver { position: absolute; overflow: hidden; }
#wrapper .stats-driver img { position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: auto; }
#wrapper .stats-driver--leclerc { left: 0; top: 0; z-index: 2; width: calc(358 * var(--u)); height: calc(611 * var(--u)); }
#wrapper .stats-driver--hamilton { left: 0; top: 0; z-index: 3; width: calc(358 * var(--u)); height: calc(611 * var(--u)); }
#wrapper .stats-driver--verstappen { left: calc(149 * var(--u)); top: calc(26 * var(--u)); z-index: 2; width: calc(340 * var(--u)); height: calc(585 * var(--u)); }

/* Stat cards (Figma "02" / "6"): text starts right of the overlapping driver. */
#wrapper .stat-card {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: calc(39 * var(--u)) 0 0 calc(138 * var(--u));
  border: 1px solid #02458a;
  border-radius: calc(30 * var(--u));
  background: rgba(2, 32, 63, .4);
  overflow: hidden;
  white-space: nowrap;
}
#wrapper .stats-group--lap .stat-card { left: calc(185 * var(--u)); top: calc(212 * var(--u)); width: calc(445 * var(--u)); height: calc(339 * var(--u)); gap: calc(40 * var(--u)); }
#wrapper .stats-group--wins .stat-card { left: calc(330 * var(--u)); top: calc(316 * var(--u)); width: calc(372 * var(--u)); height: calc(235 * var(--u)); gap: calc(23 * var(--u)); }
#wrapper .stat-card--team { left: calc(1445 * var(--u)); top: calc(158 * var(--u)); width: calc(248 * var(--u)); height: calc(291 * var(--u)); gap: calc(23 * var(--u)); padding-left: calc(39 * var(--u)); }

#wrapper .stat-card__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  color: var(--color-warm-ivory);
  text-transform: uppercase;
}
#wrapper .stat-card__title small { font-size: calc(14 * var(--u)); }
#wrapper .stat-card__list { display: flex; flex-direction: column; font-family: var(--font-ui); line-height: 1.2; }
#wrapper .stat-card__list--lap { gap: calc(16 * var(--u)); }
#wrapper .stat-card__list li { display: flex; flex-direction: column; font-size: calc(20 * var(--u)); opacity: .8; }
#wrapper .stat-card__list li.is-lead { opacity: 1; }
#wrapper .stat-card__value { color: var(--color-accent); }
#wrapper .stat-card__list li.is-lead .stat-card__value { font-size: calc(32 * var(--u)); }
#wrapper .stat-card__name { color: var(--color-white); }

/* Team panel: track map left, card + car right (the car overlaps the card). */
#wrapper .stats-track { position: absolute; left: calc(35 * var(--u)); top: 0; width: calc(791 * var(--u)); height: calc(536 * var(--u)); overflow: hidden; }
#wrapper .stats-track img { position: absolute; left: 0; top: -4.7%; width: 100%; max-width: none; height: auto; }
#wrapper .stats-car { position: absolute; z-index: 2; left: calc(739 * var(--u)); top: calc(268 * var(--u)); width: calc(968 * var(--u)); height: calc(213 * var(--u)); object-fit: contain; }

/* ---------- Atmosphere + outro ---------- */
#wrapper .circuit-vibe { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .circuit-vibe__inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  margin-bottom: clamp(60px, calc(120 / 1920 * 100vw), 120px);
}
#wrapper .circuit-vibe .intro-title { flex-shrink: 0; }
#wrapper .circuit-vibe__copy { display: flex; flex-direction: column; gap: 24px; width: 591px; max-width: 100%; }
#wrapper .circuit-vibe__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1; color: var(--color-accent); opacity: .8; text-transform: uppercase; }
#wrapper .circuit-vibe__text { margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .8); }

#wrapper .circuit-outro {
  position: relative;
  isolation: isolate;
  height: clamp(420px, calc(700 / 1920 * 100vw), 700px);
  border-radius: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  background: var(--color-carbon-black);
  overflow: hidden;
}
/* Figma: 1760x837 image pinned to the top of the 700px frame. */
#wrapper .circuit-outro__media { position: absolute; top: 0; left: 0; width: 100%; height: 119.6%; object-fit: cover; object-position: top; }
#wrapper .circuit-outro__stats {
  position: absolute;
  z-index: 1;
  left: clamp(30px, calc(80 / 1920 * 100vw), 80px);
  bottom: clamp(30px, calc(80 / 1920 * 100vw), 80px);
  display: flex;
  gap: clamp(40px, calc(80 / 1920 * 100vw), 80px);
}
#wrapper .circuit-outro__stats li { display: flex; flex-direction: column; gap: 8px; white-space: nowrap; }
#wrapper .circuit-outro__value { font-family: var(--font-display-wide); font-size: clamp(22px, calc(30 / 1920 * 100vw), 30px); line-height: 1.4; color: var(--color-white); }
#wrapper .circuit-outro__label { font-family: var(--font-ui); font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); line-height: 1; color: var(--color-accent); }

/* ---------- Getting there ---------- */
#wrapper .circuit-map { padding-block: clamp(60px, calc(120 / 1920 * 100vw), 120px) 60px; }
#wrapper .circuit-map__frame {
  position: relative;
  height: clamp(320px, calc(700 / 1920 * 100vw), 700px);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  overflow: hidden;
}
/* Figma: 1760x641 map pinned to the bottom of the 700px frame. */
#wrapper .circuit-map__frame img { position: absolute; left: 50%; bottom: 0; width: auto; max-width: none; height: 91.6%; transform: translateX(-50%); }

@media (max-width: 1200px) {
  #wrapper .circuit-vibe__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mobile (Figma 3167:36527, 390px) ---------- */
@media (max-width: 600px) {
  #wrapper .circuit-mobile-br { display: inline; }

  /* Copy first, then the KV full-bleed and square below it. */
  #wrapper .circuit-intro { display: flex; flex-direction: column-reverse; margin-top: 0; min-height: 0; padding-top: 40px; }
  #wrapper .circuit-intro__glow { display: none; }
  #wrapper .circuit-intro__kv { position: static; display: block; width: 100%; margin-top: 60px; }
  #wrapper .circuit-intro__content > * { max-width: none; }
  #wrapper .circuit-intro__big { font-size: 64px; }
  #wrapper .circuit-intro__eyebrow { font-size: 12px; }
  #wrapper .circuit-intro__title { font-size: 16px; }
  #wrapper .circuit-intro__text { font-size: 14px; }
  #wrapper .circuit-intro__cta { width: 100%; margin-top: 6px; padding: 16px; }

  #wrapper .circuit-stats__inner { --u: calc(100cqw / 358); }
  #wrapper .stats-panel { border-radius: calc(30 * var(--u)); }

  #wrapper .stats-panel--drivers {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
    padding-top: calc(24 * var(--u));
  }
  #wrapper .stats-panel__title { position: static; gap: calc(1.6 * var(--u)); padding-inline: calc(16 * var(--u)); font-size: calc(24 * var(--u)); }
  #wrapper .stats-group { position: relative; left: auto; top: auto; flex-shrink: 0; }
  #wrapper .stats-group--lap { width: calc(342 * var(--u)); height: calc(321 * var(--u)); }
  #wrapper .stats-group--wins { width: calc(329 * var(--u)); height: calc(311 * var(--u)); }

  #wrapper .stats-driver--leclerc { width: calc(172 * var(--u)); height: calc(321 * var(--u)); }
  #wrapper .stats-driver--leclerc img { left: -9.32%; width: 109.33%; }
  #wrapper .stats-driver--hamilton { width: calc(170 * var(--u)); height: calc(311 * var(--u)); }
  #wrapper .stats-driver--hamilton img { left: -7.65%; width: 107.4%; }
  #wrapper .stats-driver--verstappen { left: calc(53 * var(--u)); top: calc(12.85 * var(--u)); width: calc(173.4 * var(--u)); height: calc(298.3 * var(--u)); }

  #wrapper .stat-card { border-width: .57px; border-radius: calc(20 * var(--u)); }
  #wrapper .stats-group--lap .stat-card {
    left: calc(90 * var(--u)); top: calc(128.4 * var(--u)); width: calc(252 * var(--u)); height: calc(192 * var(--u));
    padding: calc(22.2 * var(--u)) 0 0 calc(78.4 * var(--u)); gap: calc(22.8 * var(--u));
  }
  #wrapper .stats-group--wins .stat-card {
    left: calc(139 * var(--u)); top: calc(161 * var(--u)); width: calc(190 * var(--u)); height: calc(120 * var(--u));
    padding: calc(19.9 * var(--u)) 0 0 calc(70.4 * var(--u)); gap: calc(11.9 * var(--u));
  }
  #wrapper .stat-card--team {
    left: calc(188 * var(--u)); top: calc(242 * var(--u)); width: calc(154 * var(--u)); height: calc(124 * var(--u));
    padding: calc(16 * var(--u)); gap: calc(12 * var(--u));
  }
  #wrapper .stat-card__title { font-size: calc(12.24 * var(--u)); }
  #wrapper .stat-card__title small { font-size: calc(7.14 * var(--u)); }
  #wrapper .stat-card__list li { font-size: calc(10.2 * var(--u)); }
  #wrapper .stat-card__list li.is-lead .stat-card__value { font-size: calc(16.32 * var(--u)); }
  /* The fastest-lap card is drawn at a slightly larger scale. */
  #wrapper .stats-group--lap .stat-card__title { font-size: calc(13.64 * var(--u)); }
  #wrapper .stat-card__list--lap { gap: calc(9.1 * var(--u)); }
  #wrapper .stat-card__list--lap li { font-size: calc(11.37 * var(--u)); }
  #wrapper .stat-card__list--lap li.is-lead .stat-card__value { font-size: calc(18.18 * var(--u)); }

  #wrapper .stats-panel--team { height: calc(411 * var(--u)); }
  #wrapper .stats-track { left: 0; width: calc(358 * var(--u)); height: calc(243 * var(--u)); }
  #wrapper .stats-car { left: calc(20 * var(--u)); top: calc(318.4 * var(--u)); width: calc(308 * var(--u)); height: calc(68 * var(--u)); }

  #wrapper .circuit-vibe { padding-top: 60px; }
  #wrapper .circuit-vibe__inner { gap: 30px; margin-bottom: 30px; }
  #wrapper .circuit-vibe__copy { gap: 16px; }
  #wrapper .circuit-vibe__text { font-size: 14px; }

  #wrapper .circuit-outro { height: 400px; border-radius: 30px; }
  #wrapper .circuit-outro__media { height: 100%; object-position: center; }
  #wrapper .circuit-outro__stats { left: 24px; bottom: 24px; flex-direction: column; gap: 24px; }
  #wrapper .circuit-outro__stats li { gap: 2px; }
  #wrapper .circuit-outro__value { font-size: 18px; }
  #wrapper .circuit-outro__label { font-size: 12px; }

  #wrapper .circuit-map { padding-block: 60px 0; }
  #wrapper .circuit-map__frame { height: 300px; border-radius: 30px; }
  #wrapper .circuit-map__frame img { height: 80.3%; }
}

/* =========================================================
   TICKET EXPERIENCES PAGE (ticket-experiences.html)
   Reference: Figma "Laptop :: Ticket Experiences" 2930:21721
   (1920px), "Mobile :: Ticket Experiences" 3184:37162 (390px).
   Reuses .page-hero, .guide-intro + .intro__title, .section-heading,
   .partner-cta (guide page) and .td2-notice (ticket-detail-v2).
   ========================================================= */

#wrapper .tx-page { background: var(--color-black); }
#wrapper .tx-mobile-only { display: none; }
#wrapper .tx-nocase { text-transform: none; }
#wrapper .section-heading--wide { max-width: none; }

#wrapper .tx-section { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }

/* ---------- Themed / museum cards: staggered row ---------- */
#wrapper .tx-cards { display: flex; justify-content: center; gap: 30px; padding-bottom: 60px; }
#wrapper .tx-cards > .tx-card { flex: 0 1 328px; }
#wrapper .tx-cards > .tx-card:nth-child(even) { margin-top: 60px; margin-bottom: -60px; }
#wrapper .tx-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: 479px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: clamp(24px, calc(40 / 1920 * 100vw), 40px);
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .tx-cards--sm .tx-card { height: 414px; }
#wrapper .tx-card__media { position: absolute; top: 0; left: 0; width: 100%; height: 262px; object-fit: cover; z-index: -2; }
/* Figma "Blur": backdrop blur + 40% black over the lower card, fading in. */
#wrapper .tx-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 290px;
  z-index: -1;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
}
#wrapper .tx-cards--sm .tx-card::after { height: 222px; }
#wrapper .tx-card__body { position: absolute; top: 292px; left: 30px; right: 30px; display: flex; flex-direction: column; gap: 12px; }
#wrapper .tx-cards--sm .tx-card__body { gap: 30px; }
#wrapper .tx-card__title { margin: 0; font-family: var(--font-display-bold); font-size: 18px; line-height: 1.2; color: var(--color-white); text-transform: uppercase; }

#wrapper .tx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--color-cta);
  text-transform: uppercase;
  transition: opacity .2s ease;
}
#wrapper .tx-link:hover { color: var(--color-cta); opacity: .8; }

#wrapper .tx-notice { width: 865px; margin: 40px auto 0; }

/* ---------- "More offers coming soon" ---------- */
#wrapper .tx-soon { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .tx-soon__text {
  margin: 0;
  font-family: var(--font-display-wide);
  font-size: clamp(36px, calc(60 / 1920 * 100vw), 60px);
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
}
#wrapper .tx-soon__text span { color: var(--color-accent); }

/* ---------- Full-bleed banners (concerts, interviews) ---------- */
/* 1920x1080 frame (Figma 2930:21762 concert / 2930:21820 interviews).
   The box keeps that ratio but may grow if the copy needs more room;
   the inner column is a flex child (not height:100%) so the bottom block
   is always pinned 80px from the bottom, like the design. */
#wrapper .tx-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin-top: clamp(60px, calc(120 / 1920 * 100vw), 120px);
  aspect-ratio: 1920 / 1080;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-black);
}
#wrapper .tx-banner--interviews { margin-top: clamp(40px, calc(80 / 1920 * 100vw), 80px); }
/* Concert video still: 1920x700 centred; interviews photo: 1920x900 centred. */
#wrapper .tx-banner__media { position: absolute; left: 0; top: 50%; width: 100%; height: 64.81%; object-fit: cover; transform: translateY(-50%); z-index: -2; }
#wrapper .tx-banner--interviews .tx-banner__media { height: 83.33%; }
/* Figma "Header Glow" layers, exported as SVG and stretched over the frame. */
#wrapper .tx-banner__glow { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; pointer-events: none; }
#wrapper .tx-banner__inner {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding-block: clamp(40px, calc(80 / 1920 * 100vw), 80px);
}
#wrapper .tx-banner__top { display: flex; flex-direction: column; gap: 24px; max-width: 567px; }
#wrapper .tx-banner--interviews .tx-banner__top { gap: 8px; }
#wrapper .tx-banner__title { margin: 0; font-family: var(--font-display-bold); font-size: clamp(28px, calc(40 / 1920 * 100vw), 40px); line-height: 1.2; color: #fffce5; text-transform: uppercase; }
#wrapper .tx-banner__sub { margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: var(--color-white); opacity: .8; text-transform: uppercase; }
/* Bottom-right block. Concert: headline → 40px → copy → 24px → button.
   Interviews: headline → 8px → copy. */
#wrapper .tx-banner__bottom { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; gap: 40px; max-width: 731px; text-align: right; }
#wrapper .tx-banner--interviews .tx-banner__bottom { gap: 8px; }
#wrapper .tx-banner__headline { margin: 0; font-family: var(--font-display-bold); font-size: clamp(28px, calc(40 / 1920 * 100vw), 40px); line-height: 1.2; color: var(--color-white); text-transform: uppercase; }
#wrapper .tx-banner__headline em { font-style: normal; color: var(--color-accent); }
#wrapper .tx-banner__copy { margin: 0; max-width: 591px; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: var(--color-white); opacity: .8; }
#wrapper .tx-banner--concert .tx-banner__btn { margin-top: -16px; }

/* ---------- Line-up ---------- */
#wrapper .tx-lineup { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .tx-lineup__stage { position: relative; isolation: isolate; overflow: hidden; }
#wrapper .tx-lineup__bg { position: absolute; inset: 0 0 auto; width: 100%; height: 94.5%; object-fit: cover; object-position: center 25%; z-index: -2; }
#wrapper .tx-lineup__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 16%),
    linear-gradient(to top, #000 0, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, 0) 62%);
}
#wrapper .tx-lineup__inner { display: flex; flex-direction: column; align-items: center; gap: 80px; }
#wrapper .tx-lineup__poster {
  display: block;
  width: 100%;
  max-width: 1283px;
  aspect-ratio: 1283 / 570;
  border: 2px solid var(--color-accent);
  border-radius: clamp(24px, calc(40 / 1920 * 100vw), 40px);
  background: var(--color-black);
  overflow: hidden;
}
#wrapper .tx-lineup__poster img { width: 100%; height: 100%; object-fit: cover; }
#wrapper .tx-lineup__content { display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 567px; text-align: center; }
#wrapper .tx-lineup__title { margin: 0; font-family: var(--font-display-bold); font-size: 24px; line-height: 1.2; color: var(--color-white); }
#wrapper .tx-lineup__title span { color: var(--color-accent); }
#wrapper .tx-lineup__copy { margin-top: -16px; font-family: "Titillium Web", var(--font-display-regular); font-size: 16px; line-height: 1.2; color: var(--color-white); opacity: .8; }
#wrapper .tx-lineup__copy p { margin: 0; }
#wrapper .tx-lineup__copy p + p { margin-top: 1.2em; }
#wrapper .tx-lineup__ctas { display: flex; align-items: flex-end; gap: 24px; }
#wrapper .tx-lineup__divider { display: none; }
#wrapper .tx-lineup__cta { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 248px; }
#wrapper .tx-lineup__cta .btn { width: 100%; }
#wrapper .tx-lineup__who { margin: 0; font-family: var(--font-display-regular); font-size: 14px; line-height: 1.2; color: var(--color-white); }
#wrapper .tx-lineup__who strong { display: block; font-family: var(--font-display-bold); font-size: 18px; font-weight: inherit; color: var(--color-accent); }

/* ---------- Circuit perks + partner cards ---------- */
#wrapper .tx-perks { display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; }
#wrapper .tx-perks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 269px;
  padding: 40px 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 40px;
  font-family: var(--font-display-regular);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-warm-ivory);
  text-align: center;
}
#wrapper .tx-perks img { width: 80px; height: 80px; object-fit: contain; }
#wrapper .tx-page .partner-cta__copy p + p { margin-top: 1.2em; }
#wrapper .tx-page .partner-cta__copy strong { font-weight: 700; }
#wrapper .tx-terms { color: var(--color-accent); }
#wrapper .tx-terms:hover { color: var(--color-accent); text-decoration: underline; }
#wrapper .tx-partners { padding-top: 0; padding-bottom: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .tx-partners__inner { display: flex; flex-direction: column; gap: 40px; }

/* Mobile-only F2/F4 hero card */
#wrapper .tx-f2 { position: relative; isolation: isolate; height: 400px; border-radius: 30px; overflow: hidden; }
#wrapper .tx-f2__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; z-index: -1; }
#wrapper .tx-f2 .page-hero__blur { height: 46%; }
#wrapper .tx-f2__content { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 2px; }
#wrapper .tx-f2__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 12px; line-height: 1; color: var(--color-accent); text-transform: uppercase; }
#wrapper .tx-f2__title { margin: 0; font-family: var(--font-display-wide); font-size: 14px; line-height: 1.4; color: var(--color-white); text-transform: uppercase; }

/* ---------- Tablet: cards wrap ---------- */
@media (max-width: 1200px) {
  #wrapper .tx-cards { flex-wrap: wrap; row-gap: 30px; padding-bottom: 0; }
  #wrapper .tx-cards > .tx-card { flex: 0 1 calc((100% - 60px) / 3); }
  #wrapper .tx-cards--sm > .tx-card { flex-basis: calc((100% - 30px) / 2); }
  #wrapper .tx-cards > .tx-card:nth-child(even) { margin: 0; }
  #wrapper .tx-perks { flex-wrap: wrap; }
}

/* ---------- Mobile (Figma 3184:37162, 390px) ---------- */
@media (max-width: 600px) {
  #wrapper .tx-mobile-only { display: block; }
  #wrapper li.tx-mobile-only { display: flex; }
  #wrapper .tx-section,
  #wrapper .tx-soon,
  #wrapper .tx-lineup { padding-top: 60px; }

  /* Cards: one per row, image on top, text below it. */
  #wrapper .tx-cards { flex-direction: column; gap: 16px; }
  #wrapper .tx-cards > .tx-card,
  #wrapper .tx-cards--sm > .tx-card { flex: none; width: 100%; }
  #wrapper .tx-card,
  #wrapper .tx-cards--sm .tx-card { display: flex; flex-direction: column; height: auto; border-radius: 30px; }
  #wrapper .tx-card__media { position: relative; height: 286px; }
  #wrapper .tx-card::after,
  #wrapper .tx-cards--sm .tx-card::after { height: 250px; bottom: -22px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
  #wrapper .tx-card__body,
  #wrapper .tx-cards--sm .tx-card__body { position: relative; inset: auto; margin-top: 40px; padding: 24px 24px 30px; gap: 8px; }
  #wrapper .tx-card__title { font-size: 14px; }
  #wrapper .tx-link { font-size: 14px; }

  #wrapper .tx-notice { width: auto; margin-top: 30px; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 20px; }
  #wrapper .tx-notice .td2-notice__icon { width: 24px; height: 24px; }
  #wrapper .tx-notice .td2-notice__divider { display: none; }
  #wrapper .tx-notice .td2-notice__text { font-size: 12px; }

  #wrapper .tx-soon__text { font-size: 40px; }

  /* Banners become stacked blocks: headings, the image, then the copy. */
  #wrapper .tx-banner { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 0; margin-top: 60px; overflow: visible; }
  #wrapper .tx-banner__glow { display: none; }
  #wrapper .tx-banner__inner { display: contents; }
  #wrapper .tx-banner__top { order: 0; gap: 24px; padding-inline: var(--gutter-mobile); margin-bottom: 16px; }
  #wrapper .tx-banner--interviews .tx-banner__top { margin-bottom: 30px; }
  #wrapper .tx-banner__media { position: static; order: 1; transform: none; width: calc(100% - 2 * var(--gutter-mobile)); height: auto; margin-inline: var(--gutter-mobile); aspect-ratio: 358 / 130.5; }
  #wrapper .tx-banner--interviews .tx-banner__media { height: auto; aspect-ratio: 358 / 168; }
  #wrapper .tx-banner__bottom { order: 2; align-items: stretch; gap: 16px; max-width: none; margin: 16px 0 0; padding-inline: var(--gutter-mobile); text-align: left; }
  #wrapper .tx-banner--interviews .tx-banner__bottom { gap: 8px; margin-top: 30px; }
  #wrapper .tx-banner__title,
  #wrapper .tx-banner__headline { font-size: 20px; }
  #wrapper .tx-banner__sub { font-size: 14px; }
  #wrapper .tx-banner--interviews .tx-banner__sub { font-size: 10px; }
  #wrapper .tx-banner__copy { max-width: none; font-size: 14px; }
  #wrapper .tx-banner--concert .tx-banner__btn { width: 100%; margin-top: 8px; padding: 16px; }

  #wrapper .tx-lineup .section-heading { margin-bottom: 0; }
  #wrapper .tx-lineup__stage { padding-top: 49px; }
  #wrapper .tx-lineup__bg { height: 100%; }
  #wrapper .tx-lineup__inner { gap: 24px; }
  #wrapper .tx-lineup__poster { aspect-ratio: 358 / 202; border-width: 1px; border-radius: 30px; }
  #wrapper .tx-lineup__content { gap: 30px; max-width: none; padding-bottom: 46px; }
  #wrapper .tx-lineup__title { font-size: 16px; }
  #wrapper .tx-lineup__copy { margin-top: -6px; font-size: 14px; }
  #wrapper .tx-lineup__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  #wrapper .tx-lineup__cta { width: 100%; }
  #wrapper .tx-lineup__divider { display: block; align-self: center; width: 175px; border-top: 1px dashed rgba(255, 255, 255, .3); }

  #wrapper .tx-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 30px; }
  #wrapper .tx-perks li { width: auto; gap: 4px; padding: 16px; border-radius: 20px; font-size: 9px; }
  #wrapper .tx-perks img { width: 60px; height: 60px; }

  #wrapper .tx-partners { padding-top: 60px; padding-bottom: 0; }
  #wrapper .tx-partners__inner { gap: 30px; }
}

/* =========================================================
   CORPORATE BOOKINGS PAGE (corporate.html)
   Reference: Figma "Laptop :: Corporate Bookings" 2930:22016 (1920px),
   "Mobile :: Corporate Bookings" 3074:39971 (390px).
   Reuses .page-hero, .tx-cards (ticket experiences), .td2-notice,
   .section-heading and .partner-cta. Adds the intro text block, the
   card-with-description variant and the scrolling logo strip.
   ========================================================= */

#wrapper .cb-page { background: var(--color-black); }
/* Figma frames the 1920x1080 video from its bottom (top -390 in a 600px box). */
#wrapper .cb-hero__media { object-position: 50% 100%; }

/* ---------- Intro text ---------- */
#wrapper .cb-intro { padding-top: clamp(48px, calc(80 / 1920 * 100vw), 80px); }
#wrapper .cb-intro__text {
  max-width: 1164px;
  margin-inline: auto;
  font-family: var(--font-display-regular);
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .8);
}
#wrapper .cb-intro__text p { margin: 0; }
#wrapper .cb-intro__text p + p { margin-top: 1.4em; }

/* ---------- Cards with a gold title + description (Figma "Theme Card") ---------- */
#wrapper .tx-cards--desc .tx-card__body { top: auto; bottom: 30px; gap: 8px; }
#wrapper .tx-cards--desc .tx-card__title { color: var(--color-accent); }
#wrapper .tx-card__desc {
  margin: 0;
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 16px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .8);
}

/* ---------- Partner card pairs ---------- */
#wrapper .cb-cards__inner { display: flex; flex-direction: column; gap: 40px; }
#wrapper .cb-page .partner-cta__copy p { margin: 0; }

/* ---------- Dining logos: endless horizontal strip ---------- */
#wrapper .cb-logos { overflow: hidden; margin-bottom: clamp(40px, calc(60 / 1920 * 100vw), 60px); }
#wrapper .cb-logos__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: cb-marquee 40s linear infinite;
}
#wrapper .cb-logos:hover .cb-logos__track { animation-play-state: paused; }
#wrapper .cb-logos__track li {
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 40px;
}
#wrapper .cb-logos__track img { display: block; width: 200px; height: 200px; border-radius: 30px; object-fit: cover; }
/* The script appends a second copy of the logos, so moving by half the
   track width lands on the copy's first logo: a seamless loop. */
@keyframes cb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 6px)); }
}
/* No script yet / reduced motion: a plain swipeable row instead. */
#wrapper .cb-logos:not(.is-looping) { overflow-x: auto; scrollbar-width: none; }
#wrapper .cb-logos:not(.is-looping) .cb-logos__track { animation: none; padding-inline: var(--gutter-desktop); }
@media (prefers-reduced-motion: reduce) {
  #wrapper .cb-logos__track { animation: none; }
}

/* ---------- Mobile (Figma 3074:39971, 390px) ---------- */
@media (max-width: 600px) {
  #wrapper .cb-hero__media { object-position: center; }
  #wrapper .cb-intro { padding-top: 30px; }
  #wrapper .cb-intro__text { font-size: 14px; }

  #wrapper .tx-cards--desc .tx-card__body { bottom: auto; }
  #wrapper .tx-card__desc { font-size: 14px; }

  #wrapper .cb-cards__inner { gap: 16px; }
  #wrapper .cb-logos { margin-bottom: 30px; }
  #wrapper .cb-logos__track li { padding: 12px; border-radius: 30px; }
  #wrapper .cb-logos__track img { width: 156px; height: 156px; border-radius: 22px; }
  #wrapper .cb-logos:not(.is-looping) .cb-logos__track { padding-inline: 16px; }
}

/* =========================================================
   SUSTAINABILITY PAGE (sustainability.html)
   Reference: Figma "Laptop :: Sustainability" 2930:21542 (1920px),
   mobile 3074:40481 (390px). Reuses .page-hero, .guide-intro +
   .intro__title and .tx-perks. The highlights "bento" places its
   tiles at their Figma positions inside a 1692x975 box, scaled with
   --u (1 design px) like the circuit stats panels.
   ========================================================= */

#wrapper .su-page { background: var(--color-black); }
#wrapper .su-mobile-only { display: none; }
#wrapper .su-eyebrow { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1; color: var(--color-accent); opacity: .8; text-transform: uppercase; }

/* ---------- Hero: 24px title + description instead of eyebrow + 40px title ---------- */
#wrapper .su-hero__media { object-position: 50% 100%; }
#wrapper .su-hero__content { gap: 16px; max-width: 656px; }
#wrapper .su-hero__title { font-size: 24px; }
#wrapper .su-hero__desc { margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: var(--color-white); }

/* ---------- Intro + pillars ---------- */
#wrapper .su-intro { padding-top: clamp(60px, calc(105 / 1920 * 100vw), 105px); }
#wrapper .su-intro .guide-intro__inner { gap: 30px; }
#wrapper .su-pillars { padding-top: clamp(60px, calc(105 / 1920 * 100vw), 105px); }
#wrapper .su-perks { margin-bottom: 0; }

/* ---------- Highlights bento ---------- */
#wrapper .su-highlights { padding-top: clamp(60px, calc(118 / 1920 * 100vw), 118px); }
#wrapper .su-bento {
  container-type: inline-size;
  --u: calc(100cqw / 1692);
  position: relative;
  max-width: 1692px;
  margin-inline: auto;
  aspect-ratio: 1692 / 975;
}
#wrapper .su-tile {
  position: absolute;
  isolation: isolate;
  color: var(--color-white);
  border: 1px solid #02458a;
  border-radius: calc(40 * var(--u));
  background: rgba(2, 32, 63, .4);
  overflow: hidden;
}
/* Notched tiles: the outline is an SVG exported from Figma. */
#wrapper .su-tile--intro,
#wrapper .su-stat--carbon { border: 0; border-radius: 0; background: none; overflow: visible; }
#wrapper .su-tile__shape { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; }

/* Intro tile (Figma "01"): 1103x752 with a notch at the top-right. */
#wrapper .su-tile--intro { left: 0; top: 0; width: calc(1103 * var(--u)); height: calc(752 * var(--u)); padding: calc(80 * var(--u)); }
#wrapper .su-tile__pill {
  display: inline-block;
  margin: 0;
  padding: calc(12 * var(--u)) calc(24 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-family: var(--font-display-regular);
  font-size: calc(16 * var(--u));
  line-height: 1.4;
}
#wrapper .su-tile__heading {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  width: calc(550 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  font-family: var(--font-display-bold);
  font-size: calc(60 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  color: #fffce5;
}
#wrapper .su-tile__heading span:first-child { opacity: .7; }
#wrapper .su-tile__copy { width: calc(407 * var(--u)); margin-top: calc(32 * var(--u)); font-family: var(--font-display-regular); font-size: calc(16 * var(--u)); line-height: 1.4; color: rgba(255, 255, 255, .8); }
#wrapper .su-tile__copy p { margin: 0; }
#wrapper .su-tile__copy p + p { margin-top: 1.4em; }
#wrapper .su-tile__soon { position: absolute; left: calc(80 * var(--u)); top: calc(601 * var(--u)); margin: 0; padding: calc(10 * var(--u)); border-radius: 100px; background: rgba(0, 0, 0, .2); }
#wrapper .su-tile__soon span {
  display: block;
  padding: calc(16 * var(--u)) calc(30 * var(--u));
  border-radius: 100px;
  background: var(--color-white);
  font-family: var(--font-ui);
  font-size: calc(16 * var(--u));
  line-height: 1.2;
  color: var(--color-carbon-black);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Stat tiles: icon + big number + label, centred. */
#wrapper .su-stat { display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--u)); }
#wrapper .su-stat__icon { flex-shrink: 0; width: calc(120 * var(--u)); height: calc(120 * var(--u)); }
#wrapper .su-stat__text { display: flex; flex-direction: column; gap: calc(16 * var(--u)); width: calc(217 * var(--u)); }
#wrapper .su-stat__value { margin: 0; font-family: var(--font-display-wide); font-size: calc(50 * var(--u)); line-height: 1; color: var(--color-white); }
#wrapper .su-stat__value small { font-size: .4em; }
#wrapper .su-stat__label { margin: 0; font-family: var(--font-display-regular); font-size: calc(18 * var(--u)); line-height: 1.2; color: rgba(255, 255, 255, .8); }

#wrapper .su-stat--travel  { left: calc(1111 * var(--u)); top: calc(2 * var(--u)); width: calc(581 * var(--u)); height: calc(292.5 * var(--u)); }
#wrapper .su-stat--fuel    { left: calc(1111 * var(--u)); top: calc(302.5 * var(--u)); width: calc(581 * var(--u)); height: calc(292.5 * var(--u)); }
#wrapper .su-stat--biofuel {
  left: calc(803 * var(--u)); top: calc(281 * var(--u)); width: calc(300 * var(--u)); height: calc(471 * var(--u));
  flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: calc(184 * var(--u)) 0 0 calc(29 * var(--u));
}
#wrapper .su-stat--biofuel .su-stat__text { width: calc(240 * var(--u)); }
#wrapper .su-stat--biofuel .su-stat__value { font-size: calc(40 * var(--u)); }
#wrapper .su-stat--biofuel .su-stat__value small { font-size: .5em; }
#wrapper .su-stat--power   { left: 0; top: calc(760 * var(--u)); width: calc(490 * var(--u)); height: calc(215 * var(--u)); }
#wrapper .su-stat--meters  { left: calc(498 * var(--u)); top: calc(760 * var(--u)); width: calc(490 * var(--u)); height: calc(215 * var(--u)); }
#wrapper .su-stat--power .su-stat__icon,
#wrapper .su-stat--meters .su-stat__icon { width: calc(80 * var(--u)); height: calc(80 * var(--u)); }
#wrapper .su-stat--power .su-stat__text,
#wrapper .su-stat--meters .su-stat__text { width: calc(307 * var(--u)); }
#wrapper .su-stat--power .su-stat__label,
#wrapper .su-stat--meters .su-stat__label { font-size: calc(14 * var(--u)); }
#wrapper .su-stat--carbon  { left: calc(996 * var(--u)); top: calc(603 * var(--u)); width: calc(696 * var(--u)); height: calc(372 * var(--u)); padding-left: calc(115 * var(--u)); }
#wrapper .su-stat__note {
  position: absolute;
  right: calc(40 * var(--u));
  bottom: calc(36 * var(--u));
  width: calc(336 * var(--u));
  margin: 0;
  font-family: var(--font-display-regular);
  font-size: calc(12 * var(--u));
  line-height: 1.2;
  color: rgba(255, 255, 255, .8);
  text-align: right;
}

/* ---------- Race week impact (full-width breaker) ---------- */
#wrapper .su-race {
  position: relative;
  isolation: isolate;
  margin-top: clamp(80px, calc(120 / 1920 * 100vw), 120px);
  height: clamp(480px, calc(700 / 1920 * 100vw), 700px);
  overflow: hidden;
}
#wrapper .su-race__car { position: absolute; left: 50%; top: 0; z-index: -2; width: auto; height: 100%; aspect-ratio: 1; transform: translateX(-50%); }
#wrapper .su-race__glow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; }
#wrapper .su-race__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
#wrapper .su-race__content { display: flex; flex-direction: column; gap: 40px; max-width: 570px; }
#wrapper .su-race__title {
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: clamp(36px, calc(60 / 1920 * 100vw), 60px);
  line-height: 1;
  letter-spacing: -.06em;
  color: #fffce5;
  text-transform: uppercase;
}
#wrapper .su-race__copy { display: flex; flex-direction: column; gap: 24px; }
#wrapper .su-race__copy p:last-child { margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
/* The wheel artwork is exported squashed (1024x576) and stretched back to a circle, as in Figma. */
#wrapper .su-race__wheel { flex-shrink: 0; width: clamp(240px, calc(450 / 1920 * 100vw), 450px); aspect-ratio: 1; object-fit: fill; }

/* ---------- Sustainability is a team sport ---------- */
#wrapper .su-team {
  position: relative;
  isolation: isolate;
  padding: 120px clamp(30px, calc(298 / 1920 * 100vw), 298px);
  border-radius: clamp(30px, calc(60 / 1920 * 100vw), 60px);
  background: #000d1a;
  overflow: hidden;
}
#wrapper .su-team__glow { position: absolute; left: calc(50% - 872px); top: -426px; z-index: -1; width: 1762px; max-width: none; }
#wrapper .su-team__intro { gap: 30px; }
#wrapper .su-list { margin: 1.4em 0 0; padding-left: 24px; list-style: disc; }
#wrapper .su-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 29px; margin-top: 80px; }
#wrapper .su-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  min-height: 236px;
  margin: 0;
  padding: 40px;
  border: 1px solid var(--color-accent);
  border-radius: 30px;
}
#wrapper .su-quote blockquote { margin: 0; font-family: var(--font-display-regular); font-size: 18px; line-height: 1.2; color: rgba(255, 255, 255, .5); }
#wrapper .su-quote figcaption { font-family: var(--font-display-regular); font-size: 12px; line-height: 1.2; color: var(--color-accent); }

/* ---------- Certifications ---------- */
#wrapper .su-certs { padding-block: clamp(80px, calc(120 / 1920 * 100vw), 120px) 54px; }
#wrapper .su-certs__head { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 865px; margin: 0 auto 40px; text-align: center; }
#wrapper .su-certs__title {
  margin: 0 0 16px;
  font-family: var(--font-display-bold);
  font-size: clamp(28px, calc(40 / 1920 * 100vw), 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
}
#wrapper .su-certs__title span { color: var(--color-accent); }
#wrapper .su-certs__text { max-width: 566px; margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
#wrapper .su-perks--certs li { flex: 1 1 0; width: auto; max-width: 269px; }
#wrapper .su-perks--certs img { width: 60px; height: 60px; }
#wrapper .su-certs__note { max-width: 566px; margin: 60px auto 0; font-family: var(--font-display-regular); font-size: 14px; line-height: 1.2; color: rgba(255, 255, 255, .8); text-align: center; }

/* ---------- Up to 1200px: the bento becomes a stack (same as mobile) ---------- */
@media (max-width: 1200px) {
  #wrapper .su-bento { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; --u: 1px; }
  #wrapper .su-tile { position: static; width: auto; height: auto; border-radius: 24px; }
  #wrapper .su-tile--intro { grid-column: 1 / -1; padding: 40px; border-radius: 24px; background: var(--color-midnight-navy, #051c33); }
  #wrapper .su-tile--intro .su-tile__shape,
  #wrapper .su-stat--carbon .su-tile__shape { display: none; }
  #wrapper .su-tile__heading,
  #wrapper .su-tile__copy { width: auto; }
  #wrapper .su-tile__soon { position: static; display: inline-block; margin-top: 32px; }
  #wrapper .su-stat,
  #wrapper .su-stat--biofuel,
  #wrapper .su-stat--carbon { flex-direction: row; align-items: center; justify-content: flex-start; padding: 24px; border: 1px solid #02458a; border-radius: 24px; background: rgba(2, 32, 63, .4); }
  #wrapper .su-stat--carbon { flex-wrap: wrap; }
  #wrapper .su-stat__icon,
  #wrapper .su-stat--power .su-stat__icon,
  #wrapper .su-stat--meters .su-stat__icon { width: 60px; height: 60px; }
  #wrapper .su-stat__text,
  #wrapper .su-stat--biofuel .su-stat__text,
  #wrapper .su-stat--power .su-stat__text,
  #wrapper .su-stat--meters .su-stat__text { flex: 1; width: auto; gap: 12px; }
  #wrapper .su-stat__value,
  #wrapper .su-stat--biofuel .su-stat__value { font-size: 32px; }
  #wrapper .su-stat__label,
  #wrapper .su-stat--power .su-stat__label,
  #wrapper .su-stat--meters .su-stat__label { font-size: 14px; }
  #wrapper .su-stat__note { position: static; flex: 0 0 100%; width: auto; font-size: 11px; text-align: left; }

  #wrapper .su-team { padding-inline: 40px; }
  #wrapper .su-race__wheel { width: 300px; }
}

/* ---------- Mobile (Figma 3074:40481, 390px) ---------- */
@media (max-width: 600px) {
  #wrapper .su-mobile-only { display: block; }
  #wrapper .su-desktop-only { display: none; }
  #wrapper .su-hero__title { font-size: 16px; }
  #wrapper .su-hero__desc--below { margin-top: 30px; font-size: 14px; }

  #wrapper .su-intro,
  #wrapper .su-pillars { padding-top: 60px; }
  #wrapper .su-perks img { width: 40px; height: 40px; }
  #wrapper .su-highlights { padding-top: 60px; }

  #wrapper .su-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #wrapper .su-tile--intro { margin-bottom: 12px; padding: 24px 16px; }
  #wrapper .su-tile__pill { padding: 12px 24px; font-size: 12px; }
  #wrapper .su-tile__heading { gap: 16px; margin-top: 24px; font-size: 24px; line-height: 1; letter-spacing: -.06em; }
  #wrapper .su-tile__copy { margin-top: 24px; font-size: 12px; }
  #wrapper .su-tile__soon { display: block; margin-top: 24px; }
  #wrapper .su-tile__soon span { padding: 16px; font-size: 14px; text-align: center; white-space: normal; }
  #wrapper .su-stat__icon,
  #wrapper .su-stat--power .su-stat__icon,
  #wrapper .su-stat--meters .su-stat__icon { width: 40px; height: 40px; }
  #wrapper .su-stat,
  #wrapper .su-stat--biofuel,
  #wrapper .su-stat--carbon { gap: 24px; }
  #wrapper .su-stat__value,
  #wrapper .su-stat--biofuel .su-stat__value { font-size: 20px; }
  #wrapper .su-stat__value small,
  #wrapper .su-stat--biofuel .su-stat__value small { font-size: .6em; }
  #wrapper .su-stat__label,
  #wrapper .su-stat--power .su-stat__label,
  #wrapper .su-stat--meters .su-stat__label { font-size: 12px; }
  #wrapper .su-stat__note { font-size: 9px; }

  /* Race week: copy, then the wheel, then the car full-bleed. */
  #wrapper .su-race { height: auto; margin-top: 60px; display: flex; flex-direction: column; }
  #wrapper .su-race__glow { display: none; }
  #wrapper .su-race__inner { order: 0; flex-direction: column; align-items: stretch; gap: 24px; }
  #wrapper .su-race__content { gap: 30px; }
  #wrapper .su-race__title { font-size: 24px; }
  #wrapper .su-race__copy p:last-child { font-size: 14px; }
  #wrapper .su-race__wheel { width: 100%; }
  #wrapper .su-race__car { position: static; order: 1; width: 100%; height: auto; transform: none; }

  #wrapper .su-team-wrap { padding-top: 60px; }
  #wrapper .su-team { padding: 24px 0; border-radius: 24px; background: var(--color-midnight-navy, #051c33); }
  #wrapper .su-team__glow { display: none; }
  #wrapper .su-team__intro { padding-inline: 16px; }
  #wrapper .su-quotes { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; padding-inline: 16px; }
  #wrapper .su-quote { min-height: 0; gap: 30px; padding: 16px; border-radius: 20px; }
  #wrapper .su-quote blockquote { font-size: 14px; }
  #wrapper .su-quote figcaption { font-size: 10px; }

  #wrapper .su-certs { padding-block: 60px 0; }
  #wrapper .su-certs__head { gap: 24px; margin-bottom: 16px; text-align: left; align-items: flex-start; }
  #wrapper .su-certs__title { margin-bottom: 6px; font-size: 24px; line-height: 1; }
  #wrapper .su-certs__text { font-size: 14px; }
  #wrapper .su-perks--certs li { max-width: none; }
  #wrapper .su-perks--certs img { width: 40px; height: 40px; }
  #wrapper .su-certs__note { margin-top: 16px; font-size: 12px; text-align: left; }
}

/* =========================================================
   PARTNERS PAGE (partners.html)
   Reference: Figma "Laptop :: Partners" 2930:22114 (1920px),
   "Mobile :: Partners" 3074:41003 (390px).
   Reuses .page-hero, .legal-tabs__item (as anchor links),
   .section-heading and .partner-cta. Adds the hero description, the
   anchor row and the two-part Etihad title-partner block.
   ========================================================= */

#wrapper .pt-page { background: var(--color-black); }
html:has(.pt-page) { scroll-behavior: smooth; }

/* ---------- Hero ---------- */
/* Figma frames the 1920x1080 flyover at top -290 in a 990px-tall box. */
#wrapper .pt-hero__media { object-position: 50% 74%; }
#wrapper .pt-hero__content { gap: 16px; max-width: 656px; }
#wrapper .pt-hero__title { font-size: 24px; }
#wrapper .pt-hero__desc { margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: var(--color-white); }

/* ---------- Anchor tabs ---------- */
#wrapper .pt-anchor { padding-top: clamp(40px, calc(60 / 1920 * 100vw), 60px); }
#wrapper .pt-anchor__list {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0 var(--gutter-desktop);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
#wrapper .pt-anchor__list::-webkit-scrollbar { display: none; }
#wrapper .pt-anchor__list li { flex: none; }
#wrapper .pt-anchor__item { display: block; text-decoration: none; text-transform: lowercase; }

/* ---------- Sections ---------- */
#wrapper .pt-section { padding-top: clamp(80px, calc(120 / 1920 * 100vw), 120px); scroll-margin-top: 100px; }
#wrapper .pt-section--first { padding-top: clamp(40px, calc(60 / 1920 * 100vw), 60px); }
#wrapper .pt-section--last { padding-bottom: clamp(80px, calc(120 / 1920 * 100vw), 120px); }
#wrapper .pt-list { display: flex; flex-direction: column; gap: 40px; }
#wrapper .pt-page .partner-cta__copy p + p { margin-top: 1.2em; }
#wrapper .pt-page .partner-cta__copy strong { font-weight: 700; }

/* ---------- Title partner: main card + "support" panel ---------- */
#wrapper .pt-title { display: flex; flex-direction: column; align-items: center; }
#wrapper .pt-title__main { width: 100%; min-height: 479px; }
#wrapper .pt-title__main .partner-cta__body { padding: 140px 0 80px; justify-content: flex-start; }
#wrapper .pt-title__main .partner-cta__media { flex-basis: 835px; }

#wrapper .pt-support {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: calc(1462 / 1760 * 100%);
  padding: 80px 60px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 0;
  border-radius: 0 0 clamp(30px, calc(60 / 1920 * 100vw), 60px) clamp(30px, calc(60 / 1920 * 100vw), 60px);
  background: var(--color-black);
  overflow: hidden;
}
/* Gold glow spilling down from the main card (Figma "Top Glow", 1438x669 export). */
#wrapper .pt-support__glow {
  position: absolute;
  z-index: -1;
  top: -483px;
  left: calc(50% + 9px);
  width: 1438px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}
#wrapper .pt-support__media { flex: 0 1 750px; min-width: 0; }
#wrapper .pt-support__media img { display: block; width: 100%; aspect-ratio: 750 / 305; object-fit: cover; border-radius: clamp(20px, calc(40 / 1920 * 100vw), 40px); }
#wrapper .pt-support__body { flex: 0 1 507px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
#wrapper .pt-support__title { margin: 0; font-family: var(--font-display-bold); font-size: clamp(20px, calc(24 / 1920 * 100vw), 24px); line-height: 1.2; color: var(--color-white); }
#wrapper .pt-support__btn { margin-top: 6px; }

/* ---------- Tablet / mobile: stacked cards (Figma "Mobile :: Partner Card") ---------- */
@media (max-width: 992px) {
  #wrapper .pt-title { gap: 16px; }
  #wrapper .pt-title__main { min-height: 0; }
  #wrapper .pt-title__main .partner-cta__body { padding: 16px 0 0; }

  /* "Glow Top" card variant. */
  #wrapper .pt-support {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    padding: 16px 16px 24px;
    border: 1px solid #313131;
    border-radius: 30px;
  }
  #wrapper .pt-support__glow { top: -252px; left: 50%; width: 628px; }
  #wrapper .pt-support__media { flex: none; }
  #wrapper .pt-support__media img { aspect-ratio: auto; height: 180px; border-radius: 14px; }
  #wrapper .pt-support__body { flex: none; gap: 16px; }
  #wrapper .pt-support__title { font-size: 16px; }
  #wrapper .pt-support__body .partner-cta__copy { font-size: 14px; }
  #wrapper .pt-support__btn { width: 100%; margin-top: 0; padding: 16px; }
}

@media (max-width: 768px) {
  #wrapper .pt-hero__title { font-size: 16px; }
  #wrapper .pt-hero__desc { display: none; }
  #wrapper .pt-anchor { padding-top: 30px; }
  #wrapper .pt-anchor__list { justify-content: flex-start; gap: 12px; padding-inline: 16px; }
  #wrapper .pt-anchor__item { padding: 12px 30px; border-radius: 12px; font-size: 14px; }
  #wrapper .pt-section { padding-top: 60px; }
  #wrapper .pt-section--first { padding-top: 30px; }
  #wrapper .pt-section--last { padding-bottom: 60px; }
  #wrapper .pt-page .section-heading__sub { display: none; }
  #wrapper .pt-list { gap: 30px; }
}

@media (max-width: 600px) {
  #wrapper .pt-section > .container-fluid { padding-inline: 14px; }
}



/* =========================================================================
   LIFERAY FRAGMENT STYLES
   Moved here from the index.css of each fragment used on the Liferay home
   and ticket listing pages, in page order (header → … → footer), so all
   styles live in one place. Each fragment's index.css is now empty.
   Every selector is prefixed with :where(html[dir]) (zero specificity, so
   each rule keeps the weight it had in its fragment): Liferay always renders
   <html dir="ltr|rtl">, the static HTML pages don't, so these Liferay-only
   fixes keep applying only on Liferay pages, exactly as before, and the
   static prototype pages are unaffected.
   ========================================================================= */

/* ---------- Revamp Header (revamp-adgp/fragments/revamp-header) ---------- */

:where(html[dir]) #wrapper .td-cta{width: 360px;}
:where(html[dir]) #wrapper footer.site-footer .app-promo__stores{
	    bottom: 125px !important;
}
:where(html[dir]) #wrapper .site-footer__copyright{width:auto}
:where(html[dir]) #wrapper .ticket-card__explore, :where(html[dir]) #wrapper .ticket-card__buy{font-size: 12px;}
:where(html[dir]) .site-header.fixed-header{background: radial-gradient(38% 28% at 20% 8%, rgba(10, 89, 176, .35), transparent 70%), radial-gradient(30% 32% at -2% 42%, rgba(10, 89, 176, .3), transparent 70%), radial-gradient(34% 26% at 128% 0%, rgba(255, 209, 122, .3), #000000e8 70%), radial-gradient(32% 30% at 132% 55%, rgb(10 89 176 / 72%), #00000029 70%);}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__features img {
    width: 30px;
	height: 30px;
}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__features span{
font-family: var(--font-display-regular) !important;
font-size: 8px !important;
    line-height: 11px !important;
    font-weight: 400 !important;
    opacity: 60% !important;
}
:where(html[dir]) body #wrapper .ticket-card__features {display: flex;
    text-align: center;
    justify-content: center; gap:5px;   flex-wrap: nowrap !important;}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__features li{
    min-width: auto !important;
}
:where(html[dir]) body #wrapper .ticket-card__cta {border: 0 !important;}
:where(html[dir]) body #wrapper .ticket-card__explore {    position: relative;
    border-radius: 25px 0 0;
    border: 0;}
:where(html[dir]) body #wrapper .ticket-card__explore:after{
content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from 13deg, rgba(255, 255, 255, 0.12) 72deg, rgba(255, 255, 255, 0.50) 51deg, rgba(255, 255, 255, 0.18) 107deg, rgba(255, 255, 255, 0.07) 252deg, rgba(255, 255, 255, 0.05) 214deg, rgba(255, 255, 255, 0.42) 256deg, rgba(255, 255, 255, 0.16) 342deg, rgba(255, 255, 255, 0.08) 111deg, rgba(255, 255, 255, 0.12) 31deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    width: calc(100% + 0px);
    left: 0px;
    height: calc(100% + 0px);
    top: 0px;
}
:where(html[dir]) body #wrapper .app-promo__stores {    display: flex;
    gap: 16px;}
/* start menu animation */
  /* =========================
           LEFT PART
        ========================= */

        :where(html[dir]) body #wrapper .left-part {
           
            /* Initial position */
            transform: translateX(-100%);
            opacity: 0;
            transition:
                transform 0.4s ease;
              /*  opacity 0.8s ease; */
        }


        /* =========================
           RIGHT PART
        ========================= */

        :where(html[dir]) body #wrapper .right-part {
            /* Initial position */
            transform: translateX(100%);
            opacity: 0;
            transition:
                transform 0.4s ease;
                /*  opacity 0.8s ease; */
        }


        /* =========================
           START ANIMATION
        ========================= */

        :where(html[dir]) body #wrapper .nav-panels.is-open .left-part {
            transform: translateX(0);
            opacity: 1;
        }

        :where(html[dir]) body #wrapper .nav-panels.is-open .right-part {
            transform: translateX(0);
            opacity: 1;
        }

/* end menu animation */
:where(html[dir]) #wrapper{background-color:transparent !important}
:where(html[dir]) body #wrapper a:hover, :where(html[dir]) body #wrapper a.hover {
	color: inherit !important;
}
/* cat Slider */
/* ---------- Ticket category mini-cards (overlap the hero/intro seam) ---------- */
 :where(html[dir]) body #wrapper .ticket-mini-row {
  position: relative;
  z-index: 2;
  /* display: flex; */
  gap: clamp(12px, calc(24 / 1920 * 100vw), 24px);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(-90px, calc(-140 / 1920 * 100vw), -40px);
  margin-bottom: clamp(40px, calc(80 / 1920 * 100vw), 80px);
  padding-inline: var(--gutter-desktop);
}

:where(html[dir]) body #wrapper .ticket-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from 35deg, rgba(255, 209, 122, 0.12) 155deg, rgba(255, 209, 122, 0.50) 281deg, rgba(255, 209, 122, 0.18) 268deg, rgba(255, 209, 122, 0.07) 229deg, rgba(255, 209, 122, 0.05) 207deg, rgba(255, 209, 122, 0.42) 221deg, rgba(255, 209, 122, 0.16) 335deg, rgba(255, 209, 122, 0.08) 111deg, rgba(255, 209, 122, 0.12) 82deg);
  -webkit-mask: linear-gradient(#FFD17A 0 0) content-box, linear-gradient(#FFD17A 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#FFD17A 0 0) content-box, linear-gradient(#FFD17A 0 0);
  mask-composite: exclude;
  pointer-events: none;
  /* width: calc(100% + 20px);
    left: -10px;
    height: calc(100% + 20px);
    top: -10px; */
}

:where(html[dir]) body #wrapper .cat-slider .slick-slide {
  padding: 0 10px;
  /* gap between cards */
}

:where(html[dir]) body #wrapper .cat-slider .slick-list {
  margin: 0 -10px;
}

@media (max-width: 992px) {
	:where(html[dir]) #wrapper .partners {
    padding: 30px 0 !important;
}
	:where(html[dir]) #wrapper .td-cta--sticky {
	        transform: translateX(0%) !important;
	}
	:where(html[dir]) body #wrapper .td-top .td-cta {
	    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #000000c2;
		z-index: 1;
		        left: 12.5%;
        bottom: 50px;
		        width: 75% !important;
	}
	:where(html[dir]) #wrapper .nav-drawer__top-glow {
    position: absolute;
    left: 50%;
    top: 25% !important;
		width: 100% !important;
	}
	    :where(html[dir]) #wrapper .nav-drawer__art {
        display: block;
				    bottom: 150px;
    }
	:where(html[dir]) #wrapper .ticket-detail{    padding-bottom: 0px !important;}
:where(html[dir]) body #wrapper .ticket-mini-row {
    padding-inline: var(--gutter-tablet);
  }
}



 :where(html[dir]) body #wrapper .ticket-mini {
  position: relative;
  flex: 0 0 auto;
  width: clamp(160px, calc(240 / 1920 * 100vw), 240px);
  aspect-ratio: 240 / 180;
  /* border: 1px solid var(--color-accent); */
  border-radius: 30px;
  overflow: hidden;
}

 :where(html[dir]) body #wrapper .ticket-mini img {
  border-radius: 30px;
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  padding-top: 20px;
  background-color: #000;
}
:where(html[dir]) body #wrapper .inner-card-opacity{
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.79%, #000000 100%);
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
}

 :where(html[dir]) body #wrapper .ticket-mini__label {
  position: absolute;
  left: 20px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

 :where(html[dir]) body #wrapper .ticket-mini__name {
  font-family: var(--font-display-bold);
  font-size: 12px;
  color: var(--color-white);
  text-transform: uppercase;
  margin: 0;
}

:where(html[dir]) body #wrapper .ticket-mini__price {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-accent);
  margin: 0;
}

/* cat slider */
:where(html[dir]) body #wrapper .countdown, :where(html[dir]) body #wrapper .inclusions__pill{position:relative}
:where(html[dir]) body #wrapper .countdown:after{content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
   background: conic-gradient(from 13deg, rgba(255, 255, 255, 0.12) 72deg, rgba(255, 255, 255, 0.50) 51deg, rgba(255, 255, 255, 0.18) 107deg, rgba(255, 255, 255, 0.07) 252deg, rgba(255, 255, 255, 0.05) 214deg, rgba(255, 255, 255, 0.42) 256deg, rgba(255, 255, 255, 0.16) 342deg, rgba(255, 255, 255, 0.08) 111deg, rgba(255, 255, 255, 0.12) 31deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;}
:where(html[dir]) body #wrapper .inclusions__pill:after{content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from 13deg, rgba(255, 255, 255, 0.12) 72deg, rgba(255, 255, 255, 0.50) 51deg, rgba(255, 255, 255, 0.18) 107deg, rgba(255, 255, 255, 0.07) 252deg, rgba(255, 255, 255, 0.05) 214deg, rgba(255, 255, 255, 0.42) 256deg, rgba(255, 255, 255, 0.16) 342deg, rgba(255, 255, 255, 0.08) 111deg, rgba(255, 255, 255, 0.12) 31deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    width: calc(100% + 20px);
    left: -10px;
    height: calc(100% + 20px);
    top: -10px;}
:where(html[dir]) body #wrapper .nav-drawer__divider{background: rgb(255 242 199 / 14%) !important;}
:where(html[dir]) body #wrapper .nav-video-panel video{object-fit:cover}
:where(html[dir]) body #wrapper .partners__group {margin:15px 0;}
:where(html[dir]) body #wrapper .partners__rule.left-line, :where(html[dir]) body #wrapper .hero__date-rule.left-line {background-image:url(/documents/d/abu-dhabi-grand-prix/left-line) !important}
:where(html[dir]) body #wrapper .partners__rule.right-line, :where(html[dir]) body #wrapper .hero__date-rule.right-line {background-image:url(/documents/d/abu-dhabi-grand-prix/right-line) !important}
:where(html[dir]) body, :where(html[dir]) #wrapper {color:#fff}
:where(html[dir]) body #wrapper .nav-drawer__item-toggle, :where(html[dir]) body #wrapper .nav-drawer__item, :where(html[dir]) body #wrapper .nav-drawer__copyright {
	color:#fff;
}
:where(html[dir]) body #wrapper .nav-drawer__item{opacity:0.4}
:where(html[dir]) body #wrapper .nav-drawer__item--active {opacity:1 !important}
:where(html[dir]) body #wrapper a {
    color: #fff;
    text-decoration: none !important;
}
:where(html[dir]) body #wrapper .partners__logo-row {
  display: flex;
  flex-wrap: wrap;
  width: 646px;
  margin: 0 auto;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

:where(html[dir]) body #wrapper .partners__logo-row > * {
  flex: 0 0 110px;
}
@media (max-width: 920px) {
	
	:where(html[dir]) #wrapper .after-party__media {
    width: 100% !important;
}
	:where(html[dir]) #wrapper .inclusions__panel{background-color: #051c33 !important;
    mask-image: none !important;}
	:where(html[dir]) #wrapper footer.site-footer .app-promo__stores{position: relative;}
	:where(html[dir]) body #wrapper .ticket-detail__hero{height: 200px;
    width: 100%;}
	:where(html[dir]) body #wrapper .td-top__right, :where(html[dir]) body #wrapper .td-top {gap: 15px !important;}
	:where(html[dir]) body #wrapper .td-top__badges img {
    width: 30px !important;
    height: 30px !important;
}
	:where(html[dir]) body #wrapper .td-title__name {font-size:16px !important}
	:where(html[dir]) body #wrapper .td-include__title, :where(html[dir]) body #wrapper .td-final-body{font-size:14px !important}
	:where(html[dir]) body #wrapper .td-highlight img{width: 30px !important;}
	:where(html[dir]) body #wrapper .td-highlight{align-items: flex-start !important;}
	:where(html[dir]) body #wrapper .td-highlight__title{margin: 0 0 5px !important;font-size:14px !important}
	:where(html[dir]) body #wrapper .td-highlight__copy{font-size:14px !important}
	:where(html[dir]) body #wrapper .td-body p{font-size: 14px;}
	:where(html[dir]) body #wrapper .td-top .td-cta__from {font-size:14px}
	:where(html[dir]) body #wrapper .td-top .td-cta__price{    font-size: 18px;}
	:where(html[dir]) body #wrapper .td-top .td-cta{    gap: 3px;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;}
	:where(html[dir]) body #wrapper .td-top .td-cta__buy{    padding: 6px 18px !important;}
	:where(html[dir]) body #wrapper .td-top .td-cta__flag {position: absolute;
    bottom: -10px;
    top: auto;    font-size: 11px;
    right: 25px;}
	:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__explore, :where(html[dir]) #wrapper .adgp-product-listing .ticket-card__buy{
	font-size: 10px !important;
	}
	    :where(html[dir]) body #wrapper .app-promo__stores {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }
	:where(html[dir]) body #wrapper .nav-drawer__arrow{    width: 20px;
    height: 20px;}
	:where(html[dir]) body #wrapper .nav-drawer__sublist{font-size:14px; padding: 10px 0 10px 15px;}
	:where(html[dir]) body #wrapper .nav-drawer__legal-links{gap:15px !important}
	:where(html[dir]) body #wrapper .nav-drawer__secondary{    font-size: 14px;margin-top: 15px;}
	:where(html[dir]) body #wrapper .nav-drawer__eyebrow{margin-bottom: 10px;font-size: 14px;}
	:where(html[dir]) body #wrapper .nav-drawer__item{font-size:14px}
	:where(html[dir]) body #wrapper .nav-drawer__item-toggle{padding:0}
 :where(html[dir]) body #wrapper .nav-drawer__item{padding: 10px 0;}
	:where(html[dir]) body #wrapper .menu-toggle{width: 40px;
    height: 40px;}
	:where(html[dir]) body #wrapper .nav-drawer__top-actions{    width: 100%;
    justify-content: space-between;}
	:where(html[dir]) body #wrapper .btn-cta, :where(html[dir]) body #wrapper .btn-cta-outline{font-size: 14px;    padding: 10px 15px;}
	:where(html[dir]) body #wrapper .nav-drawer__logo {display:none}
	:where(html[dir]) body #wrapper .nav-panels{inset: 0;}
	:where(html[dir]) body #wrapper .season-finale {overflow: visible;}
:where(html[dir]) body #wrapper .bg-video-finale {width: 100%;}
:where(html[dir]) body #wrapper .season-finale__copy {
    font-size: 12px !important;}
:where(html[dir]) body #wrapper .season-finale__heading{ text-align:left;font-size: clamp(18px, calc(60 / 1920 * 100vw), 60px);}
:where(html[dir]) body #wrapper .season-finale__inner .season-finale__lead{text-align:left;gap:5px !important;padding-left: 15px;    top: -20px !important;
    width: 100% !important;
    left: 0 !important;}
:where(html[dir]) body #wrapper .season-finale__inner .season-finale__tagline {	    bottom: 0;
    position: absolute;
    right: 25px !important;
    font-size: 14px;
    text-align: right;}
:where(html[dir]) body #wrapper .get-ready {margin-top:50px}
	:where(html[dir]) body #wrapper .inclusions__grid {display:block !important}
	:where(html[dir]) body #wrapper .inclusions__tile--museum {display:none !important}
	:where(html[dir]) body #wrapper .inclusions__panel{margin-bottom:10px}
	:where(html[dir]) body #wrapper .inclusions__inner{padding: 0 !important;}
	:where(html[dir]) body #wrapper .inclusions__tile--waterpark{    width: calc(50% - 5px) !important;
    height: auto !important;
    float: left;
    margin-right: 10px;
    margin-top: 10px;}
	:where(html[dir]) body #wrapper .inclusions__tile--louvre{width: calc(50% - 5px) !important;
    height: auto !important;
    margin-top: 10px;}
	:where(html[dir]) body #wrapper .inclusions__panel-bg {display:none !important}
	:where(html[dir]) body #wrapper .inclusions__panel-content {background-color: #051C33 !important;}
	:where(html[dir]) body #wrapper .inclusions__panel-bg{
		background: none !important;
	}
	:where(html[dir]) body #wrapper .inclusions__copy {
    width: 100% !important;
    margin-bottom: 20px;
}
	:where(html[dir]) body #wrapper .intro__content .btn-cta{    width: 100% !important;
    padding: 15px !important;
    font-size: 14px !important;}
	:where(html[dir]) body #wrapper .intro__copy{font-size:12px !important}
	:where(html[dir]) body #wrapper .intro, :where(html[dir]) body #wrapper .yasalam{padding: 50px 0 !important;}
	:where(html[dir]) body #wrapper .countdown__value{font-size:12px}
	:where(html[dir]) body #wrapper .is-accent, :where(html[dir]) body #wrapper .get-ready__sub p {margin-bottom: 0;
    font-size: 14px;}
	:where(html[dir]) body #wrapper .get-ready__inner{padding-left: 15px;gap: 15px;}
	:where(html[dir]) body #wrapper .get-ready__heading{    font-size: clamp(34px, calc(90 / 1920 * 100vw), 90px) !important;}
	:where(html[dir]) body #wrapper .app-promo__content {gap: 15px !important;}
	:where(html[dir]) body #wrapper .app-promo__heading{font-size: clamp(24px, calc(60 / 1920 * 100vw), 60px) !important;}
	:where(html[dir]) body #wrapper .app-promo__sub {text-align:center}
	:where(html[dir]) body #wrapper .app-promo__inner .app-promo__stores img{width: 100px;
    height: auto;}
	:where(html[dir]) body #wrapper .app-promo__stores{justify-content: center;}
	:where(html[dir]) body #wrapper .partners__logo-row > * {
    flex: 0 0 44px !important;
}
	:where(html[dir]) body #wrapper .partners__logo-row .partners__logo{    width: 77px;
    height: auto;}
	:where(html[dir]) body #wrapper .partners__logo-row{width:100%}
	:where(html[dir]) body #wrapper .partners__rule.left-line, :where(html[dir]) body #wrapper .hero__date-rule.left-line{
	    background-size: 50px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: right;
	}
	:where(html[dir]) body #wrapper .partners__rule.right-line, :where(html[dir]) body #wrapper .hero__date-rule.right-line{
		background-size: 50px !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
	}
	:where(html[dir]) body #wrapper .partners__heading p{font-size: 12px;}
	:where(html[dir]) body #wrapper .footer-app-block{padding: 15px !important;}
	:where(html[dir]) body #wrapper .site-footer{padding-bottom: 30px;
    object-fit: cover;
    background-position: center -169px !important;}
	:where(html[dir]) body #wrapper #footer {
    background-color: #000000;
}
:where(html[dir]) body #wrapper .site
	.site-footer .app-promo__stores {
    position: relative !important;
    width: auto !important;
    right: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    bottom: 0 !important;
    margin-top: 20px;
}
	:where(html[dir]) body #wrapper .quick-links {display:none !important}
	:where(html[dir]) body #wrapper .footer-logo-two {text-align:center}
	:where(html[dir]) body #wrapper .footer-logo-two img{margin: 0 auto;}
	:where(html[dir]) body #wrapper .footer-app-block {display:block !important}
	:where(html[dir]) body #wrapper .site-footer .app-promo__stores {
		position: relative !important;bottom: 0;margin: 0 auto;}
	
 :where(html[dir]) body #wrapper .ticket-mini-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-inline: var(--gutter-mobile);
    margin-top: -40px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1300px) {
	:where(html[dir]) #wrapper .category-item__name{font-size:12px !important;} 

}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	:where(html[dir]) #wrapper .td-top, :where(html[dir]) #wrapper .td-buy{flex-wrap: nowrap !important;}

}

/*Move this to style.css*/
:where(html[dir]) #wrapper .td2-body ol, :where(html[dir]) #wrapper .td2-body ul {
    margin: 0;
    font-family: "Titillium Web", var(--font-display-regular);
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-white);
    opacity: .7;
}
@media (max-width: 600px) {
    :where(html[dir]) #wrapper .td2-body ol, :where(html[dir]) #wrapper .td2-body ul {
        font-size: 14px;
        opacity: .8;
    }
}
:where(html[dir]) #wrapper .ticket-detail__hero video { width: 100%; height: 100%; object-fit: cover; }
:where(html[dir]) #wrapper .td-hero video{ object-position: 50% 59%; }
:where(html[dir]) .general-inquiries-footer ul{ list-style: circle !important; font-size: small;}
:where(html[dir]) .general-inquiries-footer a{ color: var(--color-cta) !important;}

:where(html[dir]) #wrapper .ticket-card__image {
  height: clamp(220px, calc(350 / 1920 * 90vw), 350px);
}
:where(html[dir]) #wrapper .intro {	padding: 30px 0;}
:where(html[dir]) #wrapper .intro__inner{margin-bottom: 0px;}
@media (min-width: 920px) {:where(html[dir]) #wrapper .season-finale {min-height: 40vw;}
	:where(html[dir]) #wrapper .season-finale__glow {object-position: bottom;}}
/*END Move this to style.css*/
@media (min-width: 920px) {
	:where(html[dir]) #wrapper .site-footer__legal{
	    left: 55px;
	}
}

/* ---------- Revamp Home Banner (Copy) (revamp-adgp/fragments/revamp-home-banner-(copy)) ---------- */
:where(html[dir]) body #wrapper .hero__bg {    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 700px at 50% 20%, rgba(10, 89, 176, .2), transparent 65%), linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .9) 100%), url(/documents/d/abu-dhabi-grand-prix/hero-bg) center 30% / cover no-repeat !important;
    z-index: -2;}
:where(html[dir]) #wrapper {background:transparent !important}
:where(html[dir]) body #wrapper .countdown__unit {color:#fff}

/* ---------- Where The World Shows Up (revamp-adgp/fragments/where-the-world-shows-up) ---------- */
:where(html[dir]) body #wrapper .intro__bg {background: url(/documents/d/abu-dhabi-grand-prix/intro-pattern) no-repeat;}

/* ---------- Yasalam (revamp-adgp/fragments/yasalam) ---------- */
:where(html[dir]) body #wrapper .has-tag-text {color:#fff !important} 
:where(html[dir]) body #wrapper .yasalam__showcase { width: 100%; max-width: 1283px; aspect-ratio: auto; border: 2px solid var(--color-accent); border-radius: 40px; overflow: hidden; }
 :where(html[dir]) body #wrapper .yasalam__showcase img { width: 100%; height: 100%; object-fit: cover; }
 :where(html[dir]) body #wrapper .yasalam__cta-heading { display: flex; flex-direction: column; align-items: center; gap: 24px; }
 :where(html[dir]) body #wrapper .yasalam__cta-badge { height: 50px; width: auto; }
 :where(html[dir]) body #wrapper .yasalam__cta-heading p { font-family: var(--font-display-bold); font-size: 18px; text-transform: uppercase; color: var(--color-white); text-align: center; margin: 0; }
/* =========================================================
   YASALAM
   ========================================================= */
 :where(html[dir]) body #wrapper .yasalam { position: relative; padding: 30px 0; overflow: hidden;z-index:2 }
 :where(html[dir]) body #wrapper .yasalam__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, #000 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.75) 100%),
    url("/documents/d/abu-dhabi-grand-prix/yasalam-bg") center / cover no-repeat;
  z-index: -2;
}
 :where(html[dir]) body #wrapper .yasalam__glow {
  position: absolute; inset: 0;
  background: none;
  z-index: -1;
}
 :where(html[dir]) body #wrapper .yasalam__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; text-align: center; }

 :where(html[dir]) body #wrapper .yasalam__intro { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 786px; }
 :where(html[dir]) body #wrapper .yasalam__wordmark {
  width: clamp(260px, calc(433 / 1920 * 100vw), 433px);
  height: auto;
  margin: 0;
}
:where(html[dir]) body #wrapper .yasalam__heading {
  font-family: var(--font-display-bold);
  text-transform: uppercase;
  font-size: clamp(22px, calc(30 / 1920 * 100vw), 30px);
  line-height: 1.2;
  margin: 0;
}
 :where(html[dir]) body #wrapper .yasalam__copy { font-size: var(--fs-body); max-width: 566px; }

 :where(html[dir]) body #wrapper .yasalam__lineup { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; width: 100%; }
 :where(html[dir]) body #wrapper .lineup-card {
  width: min(417px, 100%);
  aspect-ratio: 417 / 450;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  background: #0d0d0d;
  overflow: hidden;
}
 :where(html[dir]) body #wrapper .lineup-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 :where(html[dir]) body #wrapper .yasalam__cta { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
 :where(html[dir]) body #wrapper .yasalam__cta-item { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 248px; }
 :where(html[dir]) body #wrapper .yasalam__cta-label { font-size: 14px; margin: 0; }
 :where(html[dir]) body #wrapper .yasalam__cta-label span.tag-line { display: block; font-family: var(--font-display-bold); color: var(--color-accent); font-size: 18px; }
@media (max-width: 768px) {
	:where(html[dir]) body #wrapper .yasalam__cta-item{width:100%}
	:where(html[dir]) body #wrapper .yasalam__cta-item .btn-cta {padding: 15px;
    font-size: 14px;}
    :where(html[dir]) body #wrapper .yasalam-desktop-img {display:none}
	:where(html[dir]) body #wrapper .yasalam-mobile-img {display:block !important}
}
:where(html[dir]) body #wrapper .yasalam-mobile-img {display:none}

/* ---------- Single full Image (revamp-adgp/fragments/single-full-image) ---------- */
:where(html[dir]) body #wrapper .breaker {
	margin-top: 0;
}

/* ---------- After Party (revamp-adgp/fragments/after-party) ---------- */
:where(html[dir]) .after-party__inner {
	    flex-wrap: nowrap !important;
}
:where(html[dir]) #wrapper .after-party__media{
width: 60%;
}

/* ---------- Inclusions (revamp-adgp/fragments/inclusions) ---------- */
:where(html[dir]) #wrapper .inclusions__panel {
     -webkit-mask-image: url(/documents/d/abu-dhabi-grand-prix/panel-union-shape); 
     mask-image: url(/documents/d/abu-dhabi-grand-prix/panel-union-shape);
}
:where(html[dir]) body #wrapper .inclusions__tile--museum{background: transparent;}
:where(html[dir]) body #wrapper .inclusions__copy {width:50%}
:where(html[dir]) body #wrapper .video-card-inclusion div{
	height:100% !important;
}
:where(html[dir]) body #wrapper .wrapper .inclusions__tile--museum img {
    object-fit: contain;
}
:where(html[dir]) body #wrapper .video-card-inclusion video{
object-fit:cover;
		height:100% !important;
}
:where(html[dir]) body #wrapper .inclusions__cta-ring{animation: none;}
/* Inclusions (home page). Base styles come from the theme (css/style.css).
   Server-side UI fixes kept as they were; the home mobile layout is added
   at the bottom because the theme only applies it under
   #wrapper.wrapper--home (a class home.html has and Liferay doesn't). */

/* ---------- Existing server-side fixes ---------- */
:where(html[dir]) body #wrapper .inclusions__tile--museum{background: transparent;}
:where(html[dir]) body #wrapper .video-card-inclusion div{
	height:100% !important;
}
:where(html[dir]) body #wrapper .wrapper .inclusions__tile--museum img {
    object-fit: contain;
}
:where(html[dir]) body #wrapper .video-card-inclusion video{
object-fit:cover;
		height:100% !important;
}
:where(html[dir]) body #wrapper .inclusions__cta-ring{animation: none;}

/* Copy width fix: desktop only, so it doesn't squeeze the text on phones. */
@media (min-width: 993px) {
  :where(html[dir]) body #wrapper .inclusions__copy {width:50%}
}

/* ---------- Mobile (Figma "Mobile :: Home"): rollercoaster/video full
   width, waterpark + louvre side by side, museum tile and CTA hidden. ---------- */
@media (max-width: 576px) {
  :where(html[dir]) body #wrapper .inclusions__grid { gap: 12px; }
  :where(html[dir]) body #wrapper .inclusions__tile--rollercoaster { height: 250px; }
  :where(html[dir]) body #wrapper .inclusions__tile--museum { display: none; }
  :where(html[dir]) body #wrapper .inclusions__tile-pair { display: flex; gap: 12px; }
  :where(html[dir]) body #wrapper .inclusions__tile-pair .inclusions__tile { flex: 1 1 0; height: 140px; }
}


/* ---------- We Turn The F1 (revamp-adgp/fragments/we-turn-the-f1) ---------- */
:where(html[dir]) body #wrapper .season-finale__bg {
	    background: url(/documents/d/abu-dhabi-grand-prix/season-finale-bg) center / cover no-repeat, #000;
}
:where(html[dir]) body #wrapper .season-finale__inner .season-finale__lead {position: absolute;
    top: 25px;}
:where(html[dir]) body #wrapper .season-finale__inner .season-finale__tagline {bottom: 0;
    position: absolute;
    right: 60px;}

/* ---------- App Promo (revamp-adgp/fragments/app-promo) ---------- */
:where(html[dir]) body #wrapper .app-promo { position: relative; background: var(--color-black); padding: clamp(60px, calc(120 / 1920 * 100vw), 120px) 0; overflow: hidden; }
 :where(html[dir]) body #wrapper .app-promo__glow { position: absolute; left: -15%; top: 15%; width: 65%; pointer-events: none; opacity: .7; }
 :where(html[dir]) body #wrapper .app-promo__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(30px, calc(60 / 1920 * 100vw), 60px); flex-wrap: wrap; }
 :where(html[dir]) body #wrapper .app-promo__phone { flex: 1 1 380px; max-width: 480px; border-radius: 40px; overflow: hidden; }
 :where(html[dir]) body #wrapper .app-promo__phone img { width: 100%; height: auto; display: block; }
 :where(html[dir]) body #wrapper .app-promo__content { flex: 1 1 420px; max-width: 687px; display: flex; flex-direction: column; gap: 40px; }
 :where(html[dir]) body #wrapper .app-promo__heading { font-family: var(--font-display-bold); font-size: clamp(30px, calc(60 / 1920 * 100vw), 60px); color: var(--color-warm-ivory); line-height: 1; letter-spacing: -.02em; margin: 0; }
 :where(html[dir]) body #wrapper .app-promo__sub { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-display-regular); font-size: clamp(16px, calc(24 / 1920 * 100vw), 24px); margin: 0; }
 :where(html[dir]) body #wrapper .app-promo__sub .is-accent { display: block; }
 :where(html[dir]) body #wrapper .app-promo__sub span:last-child { opacity: .8; color: var(--color-white); }
 :where(html[dir]) body #wrapper .app-promo__stores { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- TX Hero (ticket-experiences/fragments/tx-hero) ---------- */
/* TX Hero — base styles from the theme (.page-hero, .tx-f2). */
@media (min-width: 601px) { :where(html[dir]) body #wrapper .txf-mobile-only { display: none !important; } }
@media (max-width: 600px) { :where(html[dir]) body #wrapper .txf-desktop-only { display: none !important; } }

:where(html[dir]) body #wrapper .page-hero__title > p,
:where(html[dir]) body #wrapper .tx-f2__title > p { margin: 0; }
:where(html[dir]) body #wrapper img.page-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:where(html[dir]) body #wrapper .txf-hero-card { padding-top: 60px; }
:where(html[dir]) body #wrapper .guide-outro__title > p { margin: 0; }
:where(html[dir]) body #wrapper img.guide-outro__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  :where(html[dir]) body #wrapper img.guide-outro__media { position: static; height: auto; }
}

/* Image / video focus. */
:where(html[dir]) body #wrapper .txf-pos-center { object-position: 50% 50%; }
:where(html[dir]) body #wrapper .txf-pos-top { object-position: 50% 0; }
:where(html[dir]) body #wrapper .txf-pos-lower { object-position: 50% 74%; }
:where(html[dir]) body #wrapper .txf-pos-bottom { object-position: 50% 100%; }

/* Description option (Sustainability, Partners): 24px title + copy. */
:where(html[dir]) body #wrapper .txf-hero--desc .page-hero__content { gap: 16px; max-width: 656px; }
:where(html[dir]) body #wrapper .txf-hero--desc .page-hero__title { font-size: 24px; }
:where(html[dir]) body #wrapper .txf-hero__desc { margin: 0; font-family: var(--font-display-regular); font-size: 16px; line-height: 1.4; color: var(--color-white); }
:where(html[dir]) body #wrapper .txf-hero__desc > p { margin: 0; }
:where(html[dir]) body #wrapper .txf-hero__desc > p + p { margin-top: 1.4em; }
:where(html[dir]) body #wrapper .txf-hero__desc--below { display: none; }
@media (max-width: 768px) {
  :where(html[dir]) body #wrapper .txf-hero--desc .page-hero__title { font-size: 16px; }
}
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper .txf-hero__desc--desktop { display: none; }
  :where(html[dir]) body #wrapper .txf-hero__desc--below { display: block; margin-top: 30px; font-size: 14px; }
}


/* ---------- ADGP TICKET LISTING (revamp-adgp-products/fragments/adgp-ticket-listing) ---------- */
/* =========================================================
   ADGP Product Listing — Ticket Shop card grid
   The base .ticket-shop / .ticket-card / .categories / .sticky-filter
   styles come from the theme (css/style.css, scoped under #wrapper —
   Liferay adds that element around page content). This file holds
   only what the fragment adds or changes on top of them: the sticky
   toolbar, sort & filter panel, sold-out / tag / buy-only states,
   wrapping feature rows and the info / error states.
   Rules here are #wrapper .adgp-product-listing … so they outrank the
   theme's #wrapper … rules wherever both set the same property.
   The var(..., fallback) defaults below are a safety net only, for
   previewing this fragment outside that page context.
   ========================================================= */

:where(html[dir]) #wrapper .adgp-product-listing {
  --adgp-color-black: var(--color-black, #000000);
  --adgp-color-white: var(--color-white, #ffffff);
  --adgp-color-accent: var(--color-accent, #ffd17a);
  --adgp-font-display-bold: var(--font-display-bold, "Titillium Web", Arial, sans-serif);
  --adgp-font-ui: var(--font-ui, "Barlow Condensed", Arial, sans-serif);
  color: var(--adgp-color-white);
}

/* The theme sets box-sizing on #wrapper * only, not on pseudo-elements. */
:where(html[dir]) #wrapper .adgp-product-listing *::before,
:where(html[dir]) #wrapper .adgp-product-listing *::after {
  box-sizing: border-box;
}

/* ---------- Section ---------- */
/* No overflow/top-padding from the theme's full-page version: the fragment */
/* sits mid-page under other content.                                       */
:where(html[dir]) #wrapper .adgp-product-listing .ticket-shop {
  padding: clamp(60px, calc(120 / 1920 * 100vw), 120px) 0 80px;
}

/* Sticks directly under the fixed site header: --adgp-header-h is the     */
/* header's height measured by index.js; a non-zero "Sticky Toolbar Top    */
/* Offset" setting (--adgp-sticky-offset) overrides it.                    */
:where(html[dir]) #wrapper .adgp-product-listing .ticket-shop__toolbar {
  position: sticky;
  top: var(--adgp-sticky-offset, var(--adgp-header-h, var(--site-header-h, 100px)));
  z-index: 10;
  gap: 16px;
  /* padding-top/bottom + margin-top/bottom only — a `padding: 12px 0` or   */
  /* `margin: ... 0 ...` shorthand would also zero out the left/right      */
  /* inset this element inherits from the page's own .container-fluid,    */
  /* since this selector's specificity beats that single-class rule.      */
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -12px;
  /* 40px to the first row of cards (Figma), minus the 12px band padding. */
  margin-bottom: calc(clamp(24px, calc(40 / 1920 * 100vw), 40px) - 12px);
  background: var(--adgp-color-black);
}

/* Two columns: category tabs on the left take whatever space is left and  */
/* wrap inside their own column; the filter bar keeps its natural width on */
/* the right, pinned to the top row, however many tabs there are.          */
@media (min-width: 601px) {
  :where(html[dir]) #wrapper .adgp-product-listing .ticket-shop__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 24px;
  }
  :where(html[dir]) #wrapper .adgp-product-listing .ticket-shop__toolbar > .sticky-filter {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- Category tabs ---------- */
:where(html[dir]) #wrapper .adgp-product-listing .categories {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
:where(html[dir]) #wrapper .adgp-product-listing .category-item a {
  text-decoration: none;
  color: inherit;
}
/* Every tab carries the glow span (the active tab changes on click), so it */
/* is shown only on the active one.                                         */
:where(html[dir]) #wrapper .adgp-product-listing .category-item__glow { display: none; }
:where(html[dir]) #wrapper .adgp-product-listing .category-item--active .category-item__glow { display: block; }

/* ---------- Sticky filter bar ---------- */
/* position: relative anchors the sort & filter panel's toggle; mobile     */
/* switches it back to the theme's fixed bottom pill.                      */
:where(html[dir]) #wrapper .adgp-product-listing .sticky-filter {
  position: relative;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  :where(html[dir]) #wrapper .adgp-product-listing .sticky-filter { position: fixed; }

  /* Keep the last row of cards clear of the fixed bottom filter bar. */
  :where(html[dir]) #wrapper .adgp-product-listing .ticket-shop { padding-bottom: 100px; }

  :where(html[dir]) #wrapper .adgp-product-listing .ticket-card__tags { bottom: -7px; }
  :where(html[dir]) #wrapper .adgp-product-listing .ticket-card__tag { font-size: 9px; }
}

/* ---------- Sort & filter dropdown panel ---------- */
/* position: fixed with top/left set by JS from the toggle button's actual  */
/* screen position (see index.js) — the surrounding Liferay page can wrap   */
/* this fragment in containers we don't control, some of which clip        */
/* position: absolute content via overflow rules we can't see or edit.     */
/* Fixed positioning escapes that entirely.                                */
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel {
  position: fixed;
  z-index: 1000;
  width: 280px;
  max-width: calc(100vw - 40px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--adgp-color-black);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel[hidden] { display: none; }
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__section + .sort-filter-panel__section {
  border-top: 1px solid rgba(255, 255, 255, .12);
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__list { list-style: none; margin: 0; padding: 0; }
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 16px 20px;
  color: var(--adgp-color-white);
  font-family: var(--adgp-font-display-bold);
  font-size: 15px;
  cursor: pointer;
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__list--attendance .sort-filter-panel__option {
  font-family: var(--adgp-font-ui);
  text-transform: uppercase;
  letter-spacing: .02em;
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__list li:first-child .sort-filter-panel__option { border-top: none; }
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__option:hover,
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__option--active {
  background: rgba(255, 255, 255, .06);
  color: var(--adgp-color-accent);
}

/* Checkbox in front of every option; ticked = gold box with a black tick. */
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__option {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__option::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: 4px;
  transition: background-color .15s ease, border-color .15s ease;
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__option:hover::before { border-color: var(--adgp-color-accent); }
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__option--active::before {
  border-color: var(--adgp-color-accent);
  background: var(--adgp-color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* "Clear all" footer. */
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__footer {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 12px 20px;
  text-align: right;
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__clear {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--adgp-font-ui);
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--adgp-color-accent);
  cursor: pointer;
}
:where(html[dir]) #wrapper .adgp-product-listing .sort-filter-panel__clear:disabled {
  color: rgba(255, 255, 255, .3);
  text-decoration: none;
  cursor: default;
}

/* Gold dot on the "Sort & Filter" button while a sort or day is ticked. */
:where(html[dir]) #wrapper .adgp-product-listing .sticky-filter__action--filtered { position: relative; }
:where(html[dir]) #wrapper .adgp-product-listing .sticky-filter__action--filtered::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--adgp-color-accent);
}

/* ---------- Ticket cards ---------- */
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card { transition: transform .25s ease, opacity .25s ease; }
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card--sold-out { opacity: .55; }
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card--sold-out:hover { transform: none; }
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card[hidden] { display: none; }

:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__image { background: rgba(255, 255, 255, .04); }

:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__content { flex: 1; }
/* Products without an image get a fully rounded content block. */
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card:not(:has(.ticket-card__image)) .ticket-card__content {
  border-radius: 30px;
}

:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__days-row { gap: 12px; }

/* The amenity count varies per product, so the row wraps instead of squeezing. */
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__features { flex-wrap: wrap; }
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__features li { flex: 1 1 auto; min-width: 70px; }

:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__cta-wrap {
  position: relative;
  margin-top: auto;
}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__cta { overflow: hidden; }
/* Floating badge group sitting on the outer pill's bottom border (per      */
/* Figma's confirmed "trending" position), biased toward the Buy button's   */
/* half of the pill — explore/buy are equal-width flex:1 children, so the   */
/* Buy half is centered at ~75%. When there's no Explore link, Buy spans    */
/* the full pill, so center at 50%. Both tags share one flex row so that    */
/* when a product carries both, they sit side by side instead of on        */
/* opposite edges.                                                         */
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__tags {
  position: absolute;
  left: 75%;
  bottom: -12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__cta-wrap--buy-only .ticket-card__tags {
  left: 50%;
}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__tag {
  margin: 0;
  background: var(--adgp-color-black);
  padding: 2px 10px;
  border-radius: 12px;
  font-family: var(--adgp-font-ui);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__tag--trending { color: var(--adgp-color-trending, #34c759); }
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__tag--selling-fast { color: var(--adgp-color-selling-fast, #ff383c); }
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__explore,
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__buy {
  text-decoration: none;
  border: none;
}
:where(html[dir]) #wrapper .adgp-product-listing .ticket-card__buy--disabled {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .5);
  cursor: not-allowed;
}

/* ---------- Info / empty / error states ---------- */
:where(html[dir]) #wrapper .adgp-product-listing .adgp-message {
  font-family: var(--adgp-font-ui);
  font-size: 16px;
  color: rgba(255, 255, 255, .7);
  text-align: center;
  padding: 60px 20px;
}
:where(html[dir]) #wrapper .adgp-product-listing .adgp-message--error { color: #ff8a8a; }
:where(html[dir]) #wrapper .adgp-product-listing .adgp-no-results[hidden] { display: none; }
:where(html[dir]) #wrapper .ticket-card__name {
    white-space: pre-wrap;  
}
:where(html[dir]) body #wrapper .ticket-card__explore:after {
    background: conic-gradient(from 13deg, rgba(255, 255, 255, 0.12) 72deg, rgba(255, 255, 255, 0.5) 96deg, rgba(255, 255, 255, 0.18) 165deg, rgba(255, 255, 255, 0.07) 252deg, rgba(255, 255, 255, 0.05) 214deg, rgba(255, 255, 255, 0.42) 256deg, rgba(255, 255, 255, 0.16) 342deg, rgba(255, 255, 255, 0.08) 111deg, rgba(255, 255, 255, 0.12) 31deg);
}
:where(html[dir]) #wrapper .ticket-card__image img {
    object-fit: fill;
}
@media(min-width:992px){
:where(html[dir]) #wrapper .category-item a {
    gap: 4px;
    padding: 18px 10px;
}
:where(html[dir]) #wrapper .categories {
    gap: 5px;
}
:where(html[dir]) #wrapper .category-item__name {
    font-size: 15px;
}
}
@media (max-width: 600px) {
    :where(html[dir]) #wrapper .category-item a {
        padding: 6px;
        gap: 3px;
    }
:where(html[dir]) #wrapper .category-item__name {
        font-size: 8px;
    }
}

/* ---------- Revamp Footer (revamp-adgp/fragments/revamp-footer) ---------- */
:where(html[dir]) #wrapper footer.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: url(/documents/d/abu-dhabi-grand-prix/footer-car-art) center / cover no-repeat;
  padding-bottom: 30px;
}

/* The car art is the footer's own background above, so hide the theme's copy. */
:where(html[dir]) #wrapper footer.site-footer .site-footer__bg::after { display: none; }

:where(html[dir]) #wrapper footer.site-footer .footer-logo { width: 800px; max-width: 80%; margin: 0 auto 150px auto; }

:where(html[dir]) #wrapper footer.site-footer .footer-app-block {
  display: flex;
  justify-content: space-between;
  padding: 15px 55px;
  z-index: 1;
}
:where(html[dir]) #wrapper footer.site-footer .site-footer__ticketing-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0;
}
/* Both logos reuse the theme's .store-badge__icon class, which forces them to
   30x36; give them their natural width back. */
:where(html[dir]) #wrapper footer.site-footer .footer-logo-two img { width: auto; height: 20px; }
:where(html[dir]) #wrapper footer.site-footer .footer-app-icon img { width: auto; height: 40px; }
:where(html[dir]) #wrapper footer.site-footer .app-promo__stores {
  position: absolute;
  width: 400px;
  right: 55px;
  bottom: 155px;
  align-items: end;
  justify-content: end;
}

:where(html[dir]) #wrapper footer.site-footer .site-footer__inner {
  display: flex;
  justify-content: space-between;
  height: auto;
  min-height: auto;
}
:where(html[dir]) #wrapper footer.site-footer .site-footer__wordmark { position: relative; }
:where(html[dir]) #wrapper footer.site-footer .site-footer__legal { position: relative; }

:where(html[dir]) #wrapper footer.site-footer .quick-links {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: end;
  align-self: end;
}
:where(html[dir]) #wrapper footer.site-footer .site-footer__links {
  position: relative;
  justify-content: flex-end;
  right: 55px;
  top: auto;
  left: auto;
}
:where(html[dir]) #wrapper footer.site-footer .site-footer__copyright {
  position: relative;
  right: 55px;
  top: 0;
  left: auto;
}

:where(html[dir]) #wrapper footer.site-footer .portlet { position: inherit; }

:where(html[dir]) #wrapper video{
width: -webkit-fill-available;
}
:where(html[dir]) #wrapper .app-promo .store-badge__icon {
    width: 200px;
    height: 60px;
    object-fit: contain;
}
:where(html[dir]) #wrapper .partners {
    background: black;
}
:where(html[dir]) body{
    background: black;
}
:where(html[dir]) .master-page {
    background: black !important;
}
:where(html[dir]) body #wrapper .ticket-mini::after {
    background: conic-gradient(from 35deg, rgba(254, 221, 173, -2.88) 213deg, rgba(255, 209, 122, 0.50) 281deg, rgba(255, 209, 122, 0.18) 268deg, rgba(255, 209, 122, 0.07) 229deg, rgba(255, 209, 122, 0.05) 207deg, rgba(255, 209, 122, 0.42) 221deg, rgba(255, 209, 122, 0.16) 335deg, rgba(255, 209, 122, 0.08) 111deg, rgba(255, 209, 122, 0.12) 82deg) !important;
}
:where(html[dir]) body #wrapper .ticket-mini {
    border: unset !important;
}


/* =========================================================================
   SHARED UI FIXES (static pages + Liferay)
   ========================================================================= */

/* ---------- Gold "shine" border ----------
   The glassy gold edge the ticket category cards use (a conic gradient
   painted only on a thin ring via a mask), now also on the Yasalam line-up
   showcase, the After Party image and the "Performing at the After-Race
   Concerts" image, replacing their flat 2px gold border. */
body #wrapper .yasalam__showcase,
body #wrapper .after-party__media,
body #wrapper .td-performing {
  position: relative;
  border: 0;
}
body #wrapper .yasalam__showcase::after,
body #wrapper .after-party__media::after,
body #wrapper .td-performing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from 35deg, rgba(255, 209, 122, 0) 213deg, rgba(255, 209, 122, .5) 281deg, rgba(255, 209, 122, .18) 268deg, rgba(255, 209, 122, .07) 229deg, rgba(255, 209, 122, .05) 207deg, rgba(255, 209, 122, .42) 221deg, rgba(255, 209, 122, .16) 335deg, rgba(255, 209, 122, .08) 111deg, rgba(255, 209, 122, .12) 82deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Ticket category cards: readable label ----------
   Figma 2378:47436 "Blur": a soft dark band (black 30% + 10px backdrop blur,
   itself blurred 15px) behind the name and price, wider than the card so
   its edges fade out. Plus a light text shadow for busy photos. */
body #wrapper .ticket-mini::before {
  content: "";
  position: absolute;
  left: -52px;
  right: -51px;
  bottom: -32px;
  height: 100px;
  z-index: 1;
  background: rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  filter: blur(12px);
  pointer-events: none;
}
body #wrapper .ticket-mini__label {
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
}

/* ---------- Ticket category row: no visible scrollbar when it swipes ---------- */
body #wrapper .ticket-mini-row,
body #wrapper .ticket-mini-row .slick-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body #wrapper .ticket-mini-row::-webkit-scrollbar,
body #wrapper .ticket-mini-row .slick-list::-webkit-scrollbar { display: none; }

/* =========================================================================
   TABLET / iPAD
   iPad portrait (768–834px) falls in the Liferay "≤920px" layout, iPad
   landscape and iPad Pro (1024–1366px) in the desktop layout.
   ========================================================================= */

/* Inclusions on tablets (601–1024px), Liferay: one stacked layout for the
   whole range. Before, three sets of rules met here (the theme stacks the
   tiles at ≤992px, the Liferay rules at ≤920px, the phone layout at
   ≤768px), so e.g. at 921–992px the panel kept its desktop notch mask and
   the museum tile showed. Now: full-width panel, the video tile, then
   waterpark + Louvre side by side; the museum tile and gold button hidden.
   !important where the older ≤920px Liferay rules use it. */
@media (min-width: 601px) and (max-width: 1024px) {
  :where(html[dir]) body #wrapper .inclusions__grid {
    display: block !important;
    aspect-ratio: auto;
  }
  :where(html[dir]) body #wrapper .inclusions__panel {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    border-radius: 30px;
    overflow: hidden;
    background-color: #051c33;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  :where(html[dir]) body #wrapper .inclusions__panel-bg { display: none !important; }
  :where(html[dir]) body #wrapper .inclusions__panel-content {
    height: auto;
    padding: 40px;
    gap: 24px;
    background-color: #051c33;
  }
  :where(html[dir]) body #wrapper .inclusions__heading { font-size: 32px; }
  :where(html[dir]) body #wrapper .inclusions__copy {
    width: 100% !important;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.4;
  }
  :where(html[dir]) body #wrapper .inclusions__pill { margin-top: 0; }
  :where(html[dir]) body #wrapper .inclusions__tile {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    border-radius: 30px;
  }
  :where(html[dir]) body #wrapper .inclusions__tile--rollercoaster { height: clamp(300px, 45vw, 440px); }
  :where(html[dir]) body #wrapper .inclusions__tile--museum { display: none !important; }
  :where(html[dir]) body #wrapper .inclusions__tile-pair {
    display: flex;
    gap: 12px;
    margin-top: 12px;
  }
  :where(html[dir]) body #wrapper .inclusions__tile-pair .inclusions__tile {
    flex: 1 1 0;
    float: none;
    width: auto !important;
    height: clamp(200px, 28vw, 280px) !important;
    margin: 0 !important;
  }
  :where(html[dir]) body #wrapper .inclusions__tile-pair .inclusions__tile img { height: 100%; }
  :where(html[dir]) body #wrapper .inclusions__cta { display: none; }
}

/* iPad Pro landscape / small laptops (1025–1200px): the desktop mosaic
   shrinks with the screen but its text doesn't, so the copy ran out of the
   panel. Tighter spacing, a smaller heading, and a wider copy column that
   still stops short of the gold button's notch. */
@media (min-width: 1025px) and (max-width: 1200px) {
  body #wrapper .inclusions__panel-content {
    gap: 12px;
    padding: 24px 32px;
  }
  body #wrapper .inclusions__eyebrow { padding: 8px 16px; font-size: 12px; }
  body #wrapper .inclusions__heading { font-size: clamp(24px, 2.7vw, 32px); }
  body #wrapper .inclusions__copy { width: 70%; font-size: 13px; line-height: 1.35; }
  body #wrapper .inclusions__pill { padding: 12px 22px; font-size: 12px; }
}

/* iPad landscape: After Party image + copy side by side get cramped. */
@media (min-width: 921px) and (max-width: 1200px) {
  body #wrapper .after-party__media { width: 55%; }
  body #wrapper .after-party__content { flex: 1 1 0; min-width: 0; }
}


/* =========================================================================
   LIFERAY FOOTER: PHONE + TABLET (≤1024px)
   Figma "Mobile :: Footer" 2378:51621, also used for iPad / tablets:
   one centred column — "Powered by Ethara Live" logo, the car artwork,
   ticketing partner, store buttons, legal text, copyright.
   Replaces the older ≤920px overrides, which left the store buttons
   relatively positioned with the desktop "bottom: 125px/155px" still
   applied (so they jumped above the ticketing partner) and hid the
   copyright. Selectors are one step stronger than those rules, and the
   leftover !important ones are matched with !important.
   ========================================================================= */
@media (max-width: 1024px) {
  :where(html[dir]) body #wrapper footer.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 45px 0 30px;
    background-position: center -169px !important;
    text-align: center;
  }
  /* Logo on top, then room for the car artwork (footer background). */
  :where(html[dir]) body #wrapper footer.site-footer .footer-logo {
    position: relative;
    z-index: 1;
    width: clamp(220px, 60vw, 420px);
    max-width: 90%;
    margin: 0 auto clamp(260px, 70vw, 420px);
  }

  /* Ticketing partner, then the two store buttons, centred. */
  :where(html[dir]) body #wrapper footer.site-footer .footer-app-block {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding: 0 20px !important;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-logo-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-logo-two img { width: auto; height: 20px; margin: 0; }
  :where(html[dir]) body #wrapper footer.site-footer .app-promo__stores {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-app-icon img { width: auto; height: 40px; }

  /* Legal text and copyright. The menus in .quick-links stay hidden as in
     Figma; only the copyright line inside it is shown. */
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    min-height: 0;
    margin-top: 30px;
    padding: 0 20px;
  }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__legal {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 560px;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    opacity: .7;
  }
  :where(html[dir]) body #wrapper footer.site-footer .quick-links {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    align-self: center;
  }
  :where(html[dir]) body #wrapper footer.site-footer .quick-links > :not(.site-footer__copyright) { display: none; }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__copyright {
    position: static;
    inset: auto;
    width: auto;
    max-width: 320px;
    white-space: normal;
    font-size: 12px;
    text-align: center;
    opacity: .6;
  }
}

/* =========================================================================
   TICKET LISTING: TABLET (601–1024px) USES THE PHONE LAYOUT
   Category tabs stay in the sticky top bar (compact), "View by Location /
   Sort & Filter" becomes the pill fixed to the bottom of the screen, as on
   phones. Covers tickets.html and the ADGP Ticket Listing fragment.
   ========================================================================= */
@media (min-width: 601px) and (max-width: 1024px) {
  #wrapper .ticket-shop__toolbar,
  #wrapper .adgp-product-listing .ticket-shop__toolbar { display: block; }

  /* Compact tabs (phone style, slightly larger text for tablets). */
  #wrapper .categories { gap: 6px; }
  #wrapper .category-item a { padding: 10px 12px; border-radius: 10px; gap: 4px; }
  #wrapper .category-item--active a {
    border-color: var(--color-cta, #c75917);
    background: rgba(199, 89, 23, .3);
    box-shadow: none;
  }
  #wrapper .category-item--active .category-item__glow { display: none; }
  #wrapper .category-item__name { font-size: 12px; }
  #wrapper .category-item__price { font-size: 10px; line-height: 1; }

  /* Filter pill fixed to the bottom, with the dark "Nav Blur" band behind. */
  #wrapper .sticky-filter,
  #wrapper .adgp-product-listing .sticky-filter {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 50;
    width: calc(100% - 40px);
    max-width: none;
    height: auto;
    gap: 0;
    padding: 4px;
    border: none;
    border-radius: 100px;
    background: none;
  }
  #wrapper .sticky-filter::before,
  #wrapper .sticky-filter::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  #wrapper .sticky-filter::before {
    z-index: -2;
    left: -92px;
    right: -92px;
    top: -19px;
    height: 127px;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    filter: blur(15px);
  }
  #wrapper .sticky-filter::after {
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, .06);
  }
  #wrapper .sticky-filter__action {
    flex: 1;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
    font-size: 13px;
  }
  #wrapper .sticky-filter__action img { width: 16px; height: 16px; }
  #wrapper .sticky-filter__action[data-view-toggle="location"] {
    color: var(--color-accent);
    border-right: 1px solid rgba(255, 255, 255, .3);
  }
  #wrapper .sticky-filter__divider { display: none; }

  /* Keep the last row of cards clear of the bottom pill. */
  #wrapper .ticket-shop,
  #wrapper .adgp-product-listing .ticket-shop { padding-bottom: 110px; }
}



/* ---------- Home hero: phone "SCROLL DOWN" cue (Figma 2378:51214) ----------
   Label + gold pixel chevron (editable text + image in the hero fragment),
   40px under the countdown. The desktop cue is hidden on phones already. */
#wrapper .scroll-down-mobile { display: none; }
@media (max-width: 768px) {
  #wrapper .scroll-down-mobile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 40px;
    text-decoration: none;
  }
  #wrapper .scroll-down-mobile__label {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1;
    color: var(--color-warm-ivory);
    text-transform: uppercase;
  }
  #wrapper .scroll-down-mobile__icon { display: block; width: 17px; height: 10px; }
}

/* ---------- AFTER PARTY TITLE ----------
   On the live page the title and subtitle are typed into the rich-text
   copy as an <h3> and a bold first paragraph (not .after-party__title), so
   they are styled here: Figma title Display Bold, subtitle Display Regular. */
#wrapper .after-party__copy h3 {
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: clamp(22px, calc(30 / 1920 * 100vw), 30px);
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
  opacity: 1;
}
#wrapper .after-party__copy h3 + p {
  margin: 8px 0 24px;
  font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px);
  line-height: 1.2;
}
#wrapper .after-party__copy h3 + p strong {
  font-family: var(--font-display-regular);
  font-weight: 400;
}

/* =========================================================================
   LIFERAY HOME — PHONE (≤600px)
   Figma "Mobile :: Home" 2378:51179 (390px wide). home.html already follows
   this frame through #wrapper.wrapper--home rules, a class the Liferay page
   doesn't have, so the Liferay home is matched here instead: any Liferay
   page whose wrapper contains the home hero (#wrapper:has(.home-hero)).
   Several older Liferay rules on these sections use !important, so the
   values that must beat them repeat it.
   Vertical rhythm from the frame: hero 884 → cards → 85 → intro → 60 →
   Yasalam (60 inside) → After Party → Inclusions → Season Finale → 60 →
   Get Ready → 60 → App → 60 → Partners → 60 → Footer.
   ========================================================================= */
@media (max-width: 600px) {

  /* ---------- Hero: video fills the 390:884 box, date + countdown low ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .home-hero {
    min-height: 0;
    height: calc(100vw * 884 / 390);
    padding: 0 20px 80px;
    justify-content: flex-end;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .home-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .home-hero__meta { width: 100%; gap: 16px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .hero__date { width: 100%; margin: 0; gap: 16px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .hero__date-text { font-size: 20px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .countdown {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 24px;
    padding: 20px;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .countdown__value,
  :where(html[dir]) body #wrapper:has(.home-hero) .countdown__unit { font-size: 12px; }

  /* ---------- Ticket category cards: 240x180, 24px apart ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .ticket-mini-row {
    gap: 24px;
    margin-top: 5px;
    margin-bottom: 40px;
    padding-inline: 20px;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .ticket-mini { width: 240px; aspect-ratio: 240 / 180; }
  :where(html[dir]) body #wrapper:has(.home-hero) .ticket-mini__name { white-space: nowrap; }

  /* ---------- Where the world shows up ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .intro { padding: 45px 0 60px !important; }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 30px;
    padding-inline: 20px;
    margin: 0;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__title {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    font-size: 24px;
    text-align: start;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__title > p { margin: 0; }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__title-mid { justify-content: flex-start; gap: 8px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__slash { font-size: 1em; }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__content { max-width: none; gap: 40px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__copy { font-size: 12px !important; line-height: 1.4; }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__copy p { margin: 0; }
  :where(html[dir]) body #wrapper:has(.home-hero) .intro__content .btn-cta {
    width: 100% !important;
    padding: 18px 30px !important;
    font-size: 16px !important;
  }

  /* ---------- Yasalam ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam { padding: 30px 0 60px !important; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__inner { gap: 40px; padding-inline: 16px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__intro { gap: 30px; padding-inline: 4px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__wordmark { width: 280px; max-width: 100%; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__heading,
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__heading h2 { margin: 0; font-size: 24px; line-height: 1; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__copy { margin: -6px 0 0; font-size: 12px; line-height: 1.4; opacity: .8; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__showcase { border-radius: 40px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-heading { gap: 16px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-badge { width: auto; height: 30px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-heading p { font-size: 12px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    width: 100%;
    margin-top: 20px;
    padding-inline: 4px;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-item { position: relative; width: 100%; gap: 24px; }
  /* 175px rule between the two CTAs (Figma "Vector 6"). */
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-item + .yasalam__cta-item::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    width: 175px;
    height: 1px;
    background: rgba(255, 255, 255, .2);
    transform: translateX(-50%);
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-label { font-size: 14px; line-height: 1.2; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-label span.tag-line { font-size: 18px; line-height: 1.2; }
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-item .btn-cta,
  :where(html[dir]) body #wrapper:has(.home-hero) .yasalam__cta-item .btn-cta-outline {
    width: 100%;
    padding: 18px 30px;
    font-size: 16px;
  }

  /* ---------- After Party ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party { padding: 0 0 30px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party .container-fluid { padding-inline: 16px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__inner { gap: 24px; margin-bottom: 30px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__media {
    width: 100% !important;
    height: 210px;
    aspect-ratio: auto;
    border-radius: 30px;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__content { max-width: none; gap: 30px; padding-inline: 4px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__title { font-size: 22px; line-height: 1; text-transform: none; }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__copy,
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__copy p { font-size: 12px; line-height: 1.4; }
  /* Title / subtitle typed into the rich text (see AFTER PARTY TITLE below). */
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__copy h3 { font-size: 22px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__copy h3 + p { margin: 8px 0 34px; font-size: 14px; line-height: 1; opacity: 1; }
  :where(html[dir]) body #wrapper:has(.home-hero) .after-party__content .btn-cta {
    width: 100%;
    padding: 18px 30px;
    font-size: 16px;
  }

  /* ---------- Inclusions ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__panel { border-radius: 30px; overflow: hidden; margin-bottom: 12px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__panel-content { padding: 40px 36px; gap: 24px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__eyebrow { padding: 12px 24px; font-size: 12px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__heading {
    gap: 16px;
    font-size: 24px;
    line-height: 1;
    color: #fffce5;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__copy {
    width: 100% !important;
    margin: 0 !important;
    font-size: 12px;
    line-height: 1.4;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__pill {
    align-self: stretch;
    margin-top: 0;
    padding: 16px 30px;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .2);
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__tile { border-radius: 30px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__tile--rollercoaster { height: 250px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__tile--waterpark {
    width: calc(50% - 4px) !important;
    margin: 12px 8px 0 0 !important;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__tile--louvre {
    width: calc(50% - 4px) !important;
    margin-top: 12px !important;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__tile--waterpark img,
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__tile--louvre img { height: 140px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__tile-pair { display: flow-root; }

  /* ---------- Season Finale: 645px block, video in the middle ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .season-finale {
    min-height: 645px;
    max-height: none;
    margin-top: 32px;
    padding: 0;
    overflow: hidden;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .season-finale__bg { inset: 0; overflow: hidden; background: #000; }
  :where(html[dir]) body #wrapper:has(.home-hero) .bg-video-finale {
    position: absolute;
    top: 178px;
    left: 50%;
    width: 591px !important;
    max-width: none;
    height: 333px;
    object-fit: cover;
    transform: translateX(-50%);
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .season-finale__inner { position: static; padding: 0; }
  :where(html[dir]) body #wrapper:has(.home-hero) .season-finale__inner .season-finale__lead {
    position: absolute;
    top: 51px !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none;
    padding: 0 20px;
    gap: 16px !important;
    text-align: start;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .season-finale__heading {
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.06em;
    text-align: start;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .season-finale__copy {
    max-width: 267px;
    font-size: 12px !important;
    line-height: 1.4;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .season-finale__inner .season-finale__tagline {
    position: absolute;
    top: 510px;
    bottom: auto;
    left: 0;
    right: 0 !important;
    max-width: none;
    padding: 0 20px;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.06em;
    text-align: end;
  }

  /* ---------- Get Ready: 390x390 art on top, text below ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    max-height: none;
    margin-top: 60px;
    overflow: visible;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__art {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__art img {
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__inner {
    gap: 24px !important;
    margin-top: 40px;
    padding: 0 20px !important;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__heading { font-size: 34px !important; gap: 8px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__heading-row--center { text-align: start; }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__heading-row--center .get-ready__heading-blur {
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 5%, transparent 16%);
    mask-image: linear-gradient(90deg, black 0%, black 5%, transparent 16%);
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__sub { gap: 4px; font-size: 14px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__sub p { margin: 0; font-size: 14px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__sub .is-accent { text-transform: uppercase; }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__inner .btn-cta {
    width: 100%;
    padding: 18px 30px;
    font-size: 16px;
  }

  /* ---------- App promo: full-width hand + phone photo, centred text ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo { padding: 0 0 30px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__inner { gap: 30px; padding: 0; }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__phone {
    flex: none;
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__content {
    flex: none;
    width: 100%;
    max-width: none;
    gap: 16px !important;
    padding: 0 20px;
    text-align: center;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__heading {
    font-size: 24px !important;
    line-height: 1;
    letter-spacing: -.06em;
    color: #fffce5;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__sub { gap: 4px; font-size: 14px; text-align: center; }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__stores { justify-content: center; gap: 16px; margin-top: 14px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__inner .app-promo__stores img,
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo .store-badge__icon { width: auto; height: 40px; }

  /* ---------- Partners ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .partners { padding: 30px 0 !important; }
}


/* ---------- Hero date: gold rules fading outwards (Figma 2378:51206) ----------
   The plain rules (no left-line / right-line class) were flat grey. */
#wrapper .hero__date-rule:not(.left-line):not(.right-line) {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 209, 122, 0), #ffd17a);
}
#wrapper .hero__date-rule:not(.left-line):not(.right-line):last-child {
  background: linear-gradient(90deg, #ffd17a, rgba(255, 209, 122, 0));
}
html.rtl #wrapper .hero__date-rule:not(.left-line):not(.right-line) { transform: scaleX(-1); }

/* ---------- Inclusions: phone button below the tiles (Figma 2378:51244) ---------- */
#wrapper .inclusions__more-mobile { display: none; }
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions { padding: 35px 0 0; }
  :where(html[dir]) body #wrapper:has(.home-hero) .inclusions__pill { display: none; }
  #wrapper .inclusions__more-mobile {
    display: block;
    clear: both;
    margin: 22px 30px 0;
    padding: 16px 30px;
    border-radius: 100px;
    background: var(--color-white);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .06);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.2;
    color: #17161f;
    text-align: center;
    text-decoration: none;
  }

  /* ---------- Get Ready: brighter art (no full-section glow over it) ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__glow { display: none; }
  :where(html[dir]) body #wrapper:has(.home-hero) .get-ready__art img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    opacity: 1;
  }

  /* ---------- App promo: the hand + phone photo fills a 390x650 area, text
     right under it (Figma 2378:51330). ---------- */
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo { padding: 0 0 30px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo .container-fluid,
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__inner { padding-inline: 0; }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__inner { gap: 28px; }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__phone {
    height: calc(100vw * 650 / 390);
    overflow: hidden;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
  :where(html[dir]) body #wrapper:has(.home-hero) .app-promo__glow { left: -40%; top: 5%; width: 120%; }
}


/* =========================================================================
   TICKET LISTING: TOOLBAR BACKGROUND, BANNER GLOW, TABLET CARDS, FILTER FADE
   ========================================================================= */

/* Category tabs bar: transparent at rest so the page glow shows through;
   black only while it is stuck under the header (.is-stuck, set by the
   listing JS / js/main.js), and then the black spans the full screen width. */
#wrapper .ticket-shop__toolbar,
#wrapper .adgp-product-listing .ticket-shop__toolbar {
  background-color: transparent;
  transition: background-color .2s ease;
}
#wrapper .ticket-shop__toolbar.is-stuck::before,
#wrapper .adgp-product-listing .ticket-shop__toolbar.is-stuck::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #000;
  pointer-events: none;
}

/* Liferay banner (TX Hero "Banner"): the listing's background glow starts
   below it, so the banner area was flat black. Same glow colours here. */
#wrapper .txf-banner {
  background:
    radial-gradient(30% 70% at 0% 100%, rgba(10, 89, 176, .3), transparent 70%),
    radial-gradient(34% 60% at 100% 0%, rgba(255, 209, 122, .16), transparent 70%);
}

/* Tablets: smaller card title text and badges (between phone and desktop). */
@media (min-width: 601px) and (max-width: 1024px) {
  #wrapper .ticket-card .ticket-card__title-text { gap: 4px; }
  #wrapper .ticket-card .ticket-card__eyebrow { font-size: 12px; }
  #wrapper .ticket-card .ticket-card__name { font-size: 15px; line-height: 1.2; }
  #wrapper .ticket-card .ticket-card__badges { gap: 6px; }
  #wrapper .ticket-card .ticket-card__badges img { width: 34px; height: 34px; }
}

/* Bottom filter pill (phones + tablets): instead of a blurred box with
   visible edges, a full-screen-width fade from transparent to dark, so the
   page blends into it. */
@media (max-width: 1024px) {
  #wrapper .sticky-filter::before {
    left: calc(50% - 50vw);
    right: auto;
    top: -60px;
    width: 100vw;
    height: calc(100% + 140px);
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .65) 50%, rgba(0, 0, 0, 0) 100%);
    filter: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
    mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  }
}


/* ---------- Bottom filter pill: centred WITHOUT transform ----------
   A transform on the pill makes it the containing block of the fixed
   Sort & Filter panel inside it, so the panel (positioned by JS against
   the screen) ended up off-screen on phones and tablets. Centred with
   left/right + auto margins instead. */
@media (max-width: 1024px) {
  #wrapper .sticky-filter,
  #wrapper .adgp-product-listing .sticky-filter {
    left: 0;
    right: 0;
    margin-inline: auto;
    width: calc(100% - 40px);
    transform: none;
  }
}
@media (max-width: 600px) {
  #wrapper .sticky-filter,
  #wrapper .adgp-product-listing .sticky-filter { max-width: 350px; }
}



/* ---------- Ticket cards on tablets + phones (≤1024px) ----------
   Name 15px, category + days 12px, CTA padding 18px, tighter card padding,
   and a taller photo. */
@media (max-width: 1024px) {
  #wrapper .ticket-card .ticket-card__image { height: clamp(230px, calc(350 / 1920 * 90vw), 350px); }
  #wrapper .ticket-card .ticket-card__content { padding: 20px 16px 24px; gap: 16px; }
  #wrapper .ticket-card .ticket-card__name { font-size: 15px; line-height: 1.2; }
  #wrapper .ticket-card .ticket-card__eyebrow,
  #wrapper .ticket-card .ticket-card__days-row { font-size: 12px; }
  #wrapper .ticket-card .ticket-card__explore,
  #wrapper .ticket-card .ticket-card__buy { padding: 18px 18px; }
}

/* ---------- Partner headings / hero date (desktop): one gold fade per side ----------
   The 221x1 line images repeated across the much wider line over the theme's
   grey rule, giving several fade segments. Stretched once instead; phones
   keep the short 50px version from the Liferay rules. */
@media (min-width: 921px) {
  :where(html[dir]) body #wrapper .partners__rule.left-line,
  :where(html[dir]) body #wrapper .partners__rule.right-line,
  :where(html[dir]) body #wrapper .hero__date-rule.left-line,
  :where(html[dir]) body #wrapper .hero__date-rule.right-line {
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

/* ---------- Liferay footer, desktop (≥1025px): Figma 2025:44517 ----------
   "Powered by Ethara Live" 109px from the top, overlapping the top of the
   car, instead of floating high above it. The car artwork is drawn by the
   theme's own .site-footer__bg::after layer (the Liferay footer had hidden it
   and used a "cover" background, which pushed the car down). */
@media (min-width: 1025px) {
  :where(html[dir]) body #wrapper footer.site-footer {
    isolation: isolate;
    justify-content: flex-start;
    background-color: #000;
    background-image: none;
  }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__bg { z-index: -1; }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__pattern { z-index: -1; }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__bg::after {
    display: block;
    background: url("/documents/d/abu-dhabi-grand-prix/footer-car-art") center / cover no-repeat;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-logo {
    width: calc(1106 / 1920 * 100vw);
    max-width: 90%;
    margin: calc(109 / 1920 * 100vw) auto 0;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-app-block { margin-top: auto; }
}


/* ---------- Inclusions pill ring: same 10px on every side, both directions ----------
   The ring had inset:0 plus width calc(100% + 20px) / left:-10px; with
   both, Arabic pages honour "right: 0" instead of "left", so the ring
   shifted 20px sideways. */
:where(html[dir]) body #wrapper .inclusions__pill::after {
  inset: -10px;
  width: auto;
  height: auto;
}


/* =========================================================================
   LIFERAY FOOTER — PHONE (exact) + TABLET (scaled), Figma 2378:51621
   "Powered by" (18px, 50%) stacked above the 215x45 Ethara Live logo, the
   car artwork beneath them (the footer background, sized and positioned as
   in the frame), then ticketing partner → store buttons → legal text →
   copyright last. The one-row desktop "Powered by" image is hidden here.
   Phone values are the 390px frame scaled with the screen width; tablets
   use the same layout at 1.4x.
   ========================================================================= */
#wrapper .footer-powered-mobile { display: none; }
@media (max-width: 1024px) {
  :where(html[dir]) body #wrapper footer.site-footer .footer-logo { display: none; }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile__text {
    margin: 0;
    font-family: var(--font-display-wide);
    line-height: 1;
    color: var(--color-white);
    opacity: .5;
    white-space: nowrap;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile__logo { display: block; height: auto; }

  /* Legal text first, copyright last. */
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__inner { margin-top: 30px; gap: 24px; }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__legal { order: 1; }
  :where(html[dir]) body #wrapper footer.site-footer .quick-links { order: 2; }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__copyright { max-width: 360px; line-height: 1.2; }
}

/* Phones: the 390px frame, scaled with the screen width. */
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper footer.site-footer {
    padding: calc(45 / 390 * 100vw) 0 30px;
    background-size: calc(1074 / 390 * 100vw) auto !important;
    background-position: center calc(-191 / 390 * 100vw) !important;
    background-repeat: no-repeat !important;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile {
    margin-bottom: calc(312 / 390 * 100vw);
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile__text { font-size: calc(18 / 390 * 100vw); }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile__logo { width: calc(215 / 390 * 100vw); }
}

/* Tablets: same layout at 1.4x. */
@media (min-width: 601px) and (max-width: 1024px) {
  :where(html[dir]) body #wrapper footer.site-footer {
    padding: 63px 0 30px;
    background-size: 1500px auto !important;
    background-position: center -267px !important;
    background-repeat: no-repeat !important;
  }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile { margin-bottom: 436px; gap: 16px; }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile__text { font-size: 25px; }
  :where(html[dir]) body #wrapper footer.site-footer .footer-powered-mobile__logo { width: 300px; }
}


/* ---------- Liferay footer pattern on phones / tablets (Figma 2378:51646) ----------
   The mobile pattern (blue dot glows down both edges, 390x826, transparent
   elsewhere) replaces the desktop one, whose glows sit at its far sides and
   were cropped away on narrow screens. Pinned to the top, full width. */
#wrapper .site-footer__pattern-mobile { display: none; }
@media (max-width: 1024px) {
  :where(html[dir]) body #wrapper footer.site-footer { overflow: hidden; }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__pattern { display: none; }
  :where(html[dir]) body #wrapper footer.site-footer .site-footer__pattern-mobile {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
    pointer-events: none;
  }
}


/* ---------- Sort & Filter panel footer: "Clear all" + "Apply" ---------- */
#wrapper .adgp-product-listing .sort-filter-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: start;
}
#wrapper .adgp-product-listing .sort-filter-panel__apply {
  padding: 10px 24px;
  border: 0;
  border-radius: 100px;
  background: var(--color-cta, #c75917);
  font-family: var(--adgp-font-ui);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--adgp-color-white);
  text-transform: uppercase;
  cursor: pointer;
}
#wrapper .adgp-product-listing .sort-filter-panel__apply:hover { filter: brightness(1.1); }

/* ---------- "Filters on" dot: next to the "Sort & Filter" text ----------
   It was placed against the whole button, which on phones / tablets stretches
   to half the bottom pill, so the dot landed outside the pill. */
#wrapper .adgp-product-listing .sticky-filter__action--filtered::after { content: none; }
#wrapper .adgp-product-listing .sticky-filter__action--filtered > span { position: relative; }
#wrapper .adgp-product-listing .sticky-filter__action--filtered > span::after {
  content: "";
  position: absolute;
  top: -4px;
  inset-inline-end: -10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--adgp-color-accent);
}


/* =========================================================================
   HEADER LANGUAGE SWITCH + LISTING TWEAKS (provided CSS, moved from the
   header / listing fragments)
   ========================================================================= */
.nav-lang .active {
  background-color: transparent !important;
}
.nav-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.nav-lang span.active {
  opacity: 1;
  color: var(--primary-color);
}
.lang-toggle {
  width: 32px;
  height: 17px;
  background: #c75917;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.lang-toggle::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: .3s;
}
.lang-link {
  color: #fff;
  text-decoration: none;
}
.nav-lang span {
  cursor: pointer;
  opacity: .45;
  transition: .2s;
}
@media (max-width: 768px) {
  #wrapper .nav-drawer__bg { object-fit: unset !important; }
}

body #wrapper .ticket-mini::before {
  background: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(1px);
  filter: blur(0px);
}
#wrapper .ticket-card__title-text { gap: 4px; }
#wrapper .ticket-card__content { gap: 24px; }
#wrapper .ticket-card__explore,
#wrapper .ticket-card__buy { padding: 20px 18px; }
#wrapper .ticket-card__days { gap: 10px; }
#wrapper .sticky-filter { gap: 10px; padding: 0 10px; }
#wrapper .ticket-card__badges img { width: 35px; height: 35px; }
#wrapper .ticket-card__name { font-size: 15px; }
#wrapper .category-item__price { font-size: 12px; }
#wrapper .ticket-card__days-row { font-size: 12px; }
#wrapper .ticket-card__eyebrow { font-size: 12px; }
#wrapper .txf-banner {
  background:
    radial-gradient(ellipse 80% 130% at 0% 110%, rgba(10, 89, 176, 0.12) 0%, rgba(10, 89, 176, 0.05) 45%, transparent 100%),
    radial-gradient(ellipse 80% 130% at 100% -10%, rgba(255, 209, 122, 0.08) 0%, rgba(255, 209, 122, 0.03) 45%, transparent 100%);
}
/* Small screens */
@media (min-width: 992px) and (max-width: 1600px) {
  #wrapper .ticket-card__name { font-size: 13px; }
  #wrapper .category-item__name { font-size: 12px; }
  #wrapper .sticky-filter__action { font-size: 13px; }
}
@media (max-width: 600px) {
  #wrapper .category-item__price { font-size: 8px; }
}


/* =========================================================================
   LIFERAY FRAGMENT STYLES (2) — moved from every fragment's index.css
   (all collections) except Revamp Old Portal and the unused "(copy)"
   duplicates. Same scoping as the first block: :where(html[dir]) keeps them
   Liferay-only with zero added specificity; placed after the theme rules,
   as fragment CSS used to load after the theme.
   ========================================================================= */

/* ---------- AG Day Card List (abu-dhabi-guide/fragments/ag-day-card-list) ---------- */
/* AG Day Card List — base styles from the theme (.guide-day-panel, .day-card). */

/* The design's evening photo is cropped to its right-hand side; editors can
   pick any image, so the image is simply centred. */
:where(html[dir]) body #wrapper .agf-day-cards .day-card__media { object-position: center; }


/* ---------- AG Day Schedule (abu-dhabi-guide/fragments/ag-day-schedule) ---------- */
/* AG Day Schedule — base styles from the theme (.guide-schedule, .guide-days). */
:where(html[dir]) body #wrapper .agf-schedule .agf-panel[hidden] { display: none; }
:where(html[dir]) body #wrapper .agf-schedule .agf-panel lfr-drop-zone { display: block; }

/* Panel labels are editor-only. */
:where(html[dir]) body #wrapper .agf-panel__label { display: none; }

/* Page editor: show every tab's drop zone so all of them can be filled. */
:where(html[dir]) body #wrapper .agf-schedule--editing .agf-panel[hidden] { display: block; }
:where(html[dir]) body #wrapper .agf-schedule--editing .agf-panel { padding: 16px; border: 1px dashed rgba(255, 209, 122, .5); border-radius: 20px; }
:where(html[dir]) body #wrapper .agf-schedule--editing .agf-panel__label {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-ui, sans-serif);
  font-size: 12px;
  color: var(--color-accent, #ffd17a);
  text-transform: uppercase;
}


/* ---------- Get Ready (revamp-adgp/fragments/get-ready) ---------- */
/* =========================================================================
   GET READY — Liferay sign-up form (styled like the static home.html form)
   Desktop: first + last name side by side, email full width, consent,
   submit (300px). Phones: one column, full-width submit (Figma 2378:51311).
   ========================================================================= */

/* Form block: up to 686px wide, like the static form */
:where(html[dir]) #wrapper .get-ready__inner > div:has(> form) { width: 100%; max-width: 686px; }

/* Layout: every field row full width, except first + last name which share
   a row. Targeted by the field name (data-field-box), not by position —
   Liferay adds hidden inputs to the <form> that would throw off nth-child. */
:where(html[dir]) #wrapper .get-ready form {
  display: flex !important;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 30px;
  width: 100%;
}
:where(html[dir]) #wrapper .get-ready form > div { flex: 0 0 100%; min-width: 0; }
:where(html[dir]) #wrapper .get-ready form > div:has([data-field-box="firstName"]),
:where(html[dir]) #wrapper .get-ready form > div:has([data-field-box="lastName"]) {
  flex: 1 1 calc(50% - 8px);
}

/* ---------- Text fields (pill inputs, floating label as placeholder) ---------- */
:where(html[dir]) #wrapper .get-ready .form-floating {
  position: relative;
  margin: 0 !important;
}
:where(html[dir]) #wrapper .get-ready .form-floating > .form-control,
:where(html[dir]) #wrapper .get-ready .form-floating > .form-control[readonly] {
  height: 64px;
  min-height: 0;
  padding: 26px 24px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 100px;
  background: rgba(0, 0, 0, .2);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-white);
}
:where(html[dir]) #wrapper .get-ready .form-floating > .form-control:focus {
  border-color: var(--color-accent);
  background: rgba(0, 0, 0, .3);
  box-shadow: none;
  outline: none;
}
/* Keep the dark field when the browser autofills */
:where(html[dir]) #wrapper .get-ready .form-floating > .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--color-white);
  -webkit-box-shadow: 0 0 0 100px #0b0b0b inset;
  caret-color: var(--color-white);
}
/* Floating label = the placeholder text */
:where(html[dir]) #wrapper .get-ready .form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  border: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  pointer-events: none;
  transform-origin: 0 50%;
  transition: transform .15s ease, color .15s ease;
}
:where(html[dir]) #wrapper .get-ready .form-floating > .form-control:focus ~ label,
:where(html[dir]) #wrapper .get-ready .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(.75) translateY(-14px);
  color: var(--color-accent);
}
:where(html[dir]) #wrapper .get-ready .form-floating > label::after { display: none; } /* Bootstrap's label backdrop */
:where(html[dir]) #wrapper .get-ready .reg-float__length { margin: 6px 24px 0; font-size: 12px; }

/* ---------- Consent checkbox ----------
   Two nested .custom-control wrappers: the outer one (.custom-checkbox)
   is reset to no padding; only the inner one (inside role="group") makes
   room for the box. The native checkbox stays clickable but invisible over
   an 18px box drawn by the label; the tick is drawn in CSS when checked. */
:where(html[dir]) #wrapper .get-ready .reg-check,
:where(html[dir]) #wrapper .get-ready .reg-check > .custom-checkbox.custom-control {
  margin: 0;
  padding: 0 !important;
  min-height: 0;
}
:where(html[dir]) #wrapper .get-ready .reg-check [role="group"] { margin: 0 !important; }

:where(html[dir]) #wrapper .get-ready .reg-check [role="group"] > .custom-control {
  position: relative;
  display: block;
  min-height: 18px;
  margin: 0;
  padding: 0 !important;
  padding-inline-start: 30px !important;
}
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-input {
  position: absolute;
  top: 0;
  left: auto;
  inset-inline-start: 0;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-label {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-display-regular);
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
}
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-label-text p { margin: 0; }
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-label a { color: var(--color-accent); text-decoration: underline; }

/* the box */
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  inset-inline-start: -30px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-radius: 4px;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none;
  transition: background-color .15s ease, border-color .15s ease;
}
/* the tick (hidden until checked) */
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-label::after {
  content: "";
  position: absolute;
  top: 3px;
  left: auto;
  right: auto;
  inset-inline-start: -24px;
  box-sizing: content-box;
  width: 5px;
  height: 9px;
  border: solid #17161f;
  border-width: 0 2px 2px 0;
  background: none !important;
  transform: rotate(45deg);
  opacity: 0;
}
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--color-accent);
  background: var(--color-accent) !important;
}
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-input:checked ~ .custom-control-label::after { opacity: 1; }
:where(html[dir]) #wrapper .get-ready .reg-check .custom-control-input:focus-visible ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(255, 209, 122, .25) !important;
}
:where(html[dir]) #wrapper .get-ready .reg-field-error {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #ff8a8a;
}

/* ---------- Submit (same as .btn-cta) ---------- */
:where(html[dir]) #wrapper .get-ready .component-button { margin: 24px 0 0; }
:where(html[dir]) #wrapper .get-ready .component-button .btn.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  padding: 18px 30px;
  border: none;
  border-radius: 100px;
  background: var(--color-cta, #c75917);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--color-white);
  text-transform: lowercase;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
:where(html[dir]) #wrapper .get-ready .component-button .btn.submit:hover:not(:disabled) { transform: translateY(-2px); opacity: .92; }
:where(html[dir]) #wrapper .get-ready .component-button .btn.submit:disabled { opacity: .45; cursor: not-allowed; }

/* Success message after submitting */
:where(html[dir]) #wrapper .get-ready .reg-success { min-height: 0; padding: 30px 0; text-align: start; justify-content: flex-start; }
:where(html[dir]) #wrapper .get-ready .reg-success__title { font-family: var(--font-display-bold); font-size: 24px; color: var(--color-warm-ivory); }

/* ---------- Phones (Figma 2378:51311): one column, 55px fields ---------- */
@media (max-width: 600px) {
  :where(html[dir]) #wrapper .get-ready form { row-gap: 12px; }
  :where(html[dir]) #wrapper .get-ready form > div:has([data-field-box="firstName"]),
  :where(html[dir]) #wrapper .get-ready form > div:has([data-field-box="lastName"]) { flex-basis: 100%; }
  :where(html[dir]) #wrapper .get-ready .form-floating > .form-control,
  :where(html[dir]) #wrapper .get-ready .form-floating > .form-control[readonly] {
    height: 55px;
    padding: 22px 24px 8px;
    font-size: 14px;
  }
  :where(html[dir]) #wrapper .get-ready .form-floating > label { font-size: 14px; }
  :where(html[dir]) #wrapper .get-ready .reg-check [role="group"] { margin: 12px 0 0 !important; }
  :where(html[dir]) #wrapper .get-ready .component-button .btn.submit { width: 100%; }
}

/* ---------- Arabic: floating label on the right (the checkbox uses
   start/end positions, so it mirrors by itself) ---------- */
:where(html[dir]).rtl #wrapper .get-ready .form-floating > label { left: auto; right: 0; transform-origin: 100% 50%; }

/* =========================================================================
   GET READY — submit error / success modal
   Dark glass card in the site style, centred over a dimmed page.
   Overrides the form fragment's inline styles (teal 22px text, 100px
   fixed-height message on phones), hence a few !important.
   ========================================================================= */

/* Dimmed, blurred page behind the card */
:where(html[dir]) #errorModal.modal {
  z-index: 2000;
  background: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Bootstrap's own backdrop (only if the modal was opened through Bootstrap) */
:where(html[dir]) .modal-backdrop.show { background: #000; opacity: .7; }

:where(html[dir]) #errorModal .modal-dialog {
  max-width: 440px;
  margin: 1.75rem auto;
  padding: 0 16px;
}
:where(html[dir]) #errorModal .modal-content {
  position: relative;
  overflow: hidden;
  padding: 48px 32px 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px !important;
  background: #0b0b0b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  color: var(--color-white, #fff);
}
/* Soft gold glow at the top of the card */
:where(html[dir]) #errorModal .modal-content::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  width: 320px;
  height: 200px;
  background: radial-gradient(closest-side, rgba(255, 209, 122, .18), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Close button: 36px round, X drawn in CSS (no icon font needed) */
:where(html[dir]) #errorModal .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  opacity: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
:where(html[dir]) #errorModal .btn-close:hover,
:where(html[dir]) #errorModal .btn-close:focus-visible {
  border-color: var(--color-accent, #ffd17a);
  background: rgba(255, 255, 255, .12);
  outline: none;
}
:where(html[dir]) #errorModal .btn-close > span { font-size: 0; }          /* hide the "close" icon-font text */
:where(html[dir]) #errorModal .btn-close::before,
:where(html[dir]) #errorModal .btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--color-white, #fff);
}
:where(html[dir]) #errorModal .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
:where(html[dir]) #errorModal .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

:where(html[dir]) #errorModal .modal-body { padding: 0; }
:where(html[dir]) #errorModal .modal-text { position: relative; text-align: center; }

/* Message */
:where(html[dir]) #errorModal .form-message,
:where(html[dir]) #errorModal .form-message.is-error,
:where(html[dir]) #errorModal .form-message.is-success {
  display: block;
  height: auto !important;
  margin: 0;
  font-family: var(--font-display-bold);
  font-size: 20px !important;
  line-height: 1.4 !important;
  text-align: center;
  opacity: 1;
}
:where(html[dir]) #errorModal .form-message.is-error { color: #ff8a8a !important; }
:where(html[dir]) #errorModal .form-message.is-success { color: #34c759 !important; }
/* Small status icon above the message */
:where(html[dir]) #errorModal .form-message.is-error::before,
:where(html[dir]) #errorModal .form-message.is-success::before {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 26px;
  line-height: 54px;
}
:where(html[dir]) #errorModal .form-message.is-error::before {
  content: "!";
  border: 1.5px solid #ff8a8a;
  background: rgba(255, 138, 138, .1);
  color: #ff8a8a;
}
:where(html[dir]) #errorModal .form-message.is-success::before {
  content: "\2713";
  border: 1.5px solid #34c759;
  background: rgba(52, 199, 89, .1);
  color: #34c759;
}
:where(html[dir]) #errorModal .modal-body {
    padding: 0;
    BORDER: 0PX;
}
:where(html[dir]) .modal-backdrop.show {
    z-index: -1;
}
@media (max-width: 600px) {
  :where(html[dir]) #errorModal .modal-content { padding: 44px 20px 32px; border-radius: 24px !important; }
  :where(html[dir]) #errorModal .form-message,
  :where(html[dir]) #errorModal .form-message.is-error,
  :where(html[dir]) #errorModal .form-message.is-success { font-size: 16px !important; }
}

/* Arabic: close button on the left */
:where(html[dir]).rtl #errorModal .btn-close { right: auto; left: 16px; }

/* =========================================================================
   GET READY — "Thank you" message shown after a successful submit
   (Liferay replaces the form with its standard success box:
   .bg-white.p-5.text-center.text-secondary). Styled as a dark glass card
   with a gold tick, same width as the form.
   ========================================================================= */
:where(html[dir]) #wrapper .get-ready__inner > div:has(> .bg-white.p-5) { width: 100%; max-width: 686px; }

:where(html[dir]) #wrapper .get-ready__inner .bg-white.p-5.text-secondary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px;
  background: rgba(255, 255, 255, .05) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-display-bold);
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  color: var(--color-warm-ivory, #fff2c7) !important;
  text-align: start !important;
  overflow: hidden;
  animation: gr-thanks-in .4s ease both;
}
/* Gold tick badge */
:where(html[dir]) #wrapper .get-ready__inner .bg-white.p-5.text-secondary::before {
  content: "\2713";
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--color-accent, #ffd17a);
  border-radius: 50%;
  background: rgba(255, 209, 122, .12);
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 45px;
  color: var(--color-accent, #ffd17a);
  text-align: center;
}
/* Glassy gold edge, same as the ticket cards / showcase images */
:where(html[dir]) #wrapper .get-ready__inner .bg-white.p-5.text-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from 35deg, rgba(255, 209, 122, 0) 213deg, rgba(255, 209, 122, .5) 281deg, rgba(255, 209, 122, .18) 268deg, rgba(255, 209, 122, .07) 229deg, rgba(255, 209, 122, .05) 207deg, rgba(255, 209, 122, .42) 221deg, rgba(255, 209, 122, .16) 335deg, rgba(255, 209, 122, .08) 111deg, rgba(255, 209, 122, .12) 82deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes gr-thanks-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(html[dir]) #wrapper .get-ready__inner .bg-white.p-5.text-secondary { animation: none; }
}

/* Phones: stacked and centred, full width */
@media (max-width: 600px) {
  :where(html[dir]) #wrapper .get-ready__inner .bg-white.p-5.text-secondary {
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px !important;
    border-radius: 24px;
    font-size: 16px !important;
    text-align: center !important;
  }
}



/* ---------- Revamp Footer (revamp-adgp/fragments/revamp-footer) ---------- */
/* Styles moved to the theme: css/style.css, section "LIFERAY FRAGMENT STYLES". */
:where(html[dir]) .ticket-card__name-row{display:flex;align-items:center;gap:8px}
:where(html[dir]) .ticket-card__thumbnail{height:45px;width:auto}

:where(html[dir]) body #wrapper .ticket-mini::before {filter: blur(3px);}
:where(html[dir]) #wrapper .ticket-hero{background: #000;}
:where(html[dir]) #wrapper .page-hero__blur{backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);}
:where(html[dir]) #wrapper .after-party {padding: clamp(30px, calc(60 / 1920 * 100vw), 60px) 0;}
:where(html[dir]) #wrapper .inclusions {padding: clamp(30px, calc(60 / 1920 * 100vw), 60px) 0;}
:where(html[dir]) #wrapper .season-finale {margin-top: 3rem;}
:where(html[dir]) #wrapper .inclusions__more-mobile:hover , :where(html[dir]) #wrapper .inclusions__pill:hover {color: var(--color-accent) !important;}

@media (min-width: 800px) and (max-width: 1092px) {  
:where(html[dir]) #wrapper .home-hero {min-height: auto !important;}
:where(html[dir]) #wrapper .get-ready {PADDING-TOP: 50PX;}
}
@media (max-width: 600px) {
:where(html[dir]) body #wrapper:has(.home-hero) .get-ready__art {order:2;}
}
@media (max-width: 600px) { 
:where(html[dir]) body #wrapper:has(.home-hero) .intro__title {
	flex-direction: row;gap: 10px;font-size: 20px;}
	}
:where(html[dir]) #wrapper .intro__inner {flex-wrap: unset;}

/* ---------- Revamp Home Banner (revamp-adgp/fragments/revamp-home-banner) ---------- */
:where(html[dir]) body #wrapper .hero__bg {    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 700px at 50% 20%, rgba(10, 89, 176, .2), transparent 65%), linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .9) 100%), url(/documents/d/abu-dhabi-grand-prix/hero-bg) center 30% / cover no-repeat !important;
    z-index: -2;}
:where(html[dir]) #wrapper {background:transparent !important}
:where(html[dir]) body #wrapper .countdown__unit {color:#fff}

/* ---------- Revamp Ticket Details Container (revamp-adgp/fragments/revamp-ticket-details-container) ---------- */
/* =========================================================
   TICKET DETAIL PAGE
   Reference: Figma "Laptop :: Ticket Shop :: Details", 1920px wide.
   Content column is 1164px, centered (378px margin each side on a
   1920 canvas — i.e. ~60.6% width, ~19.7% side margins).
   ========================================================= */

 :where(html[dir]) body #wrapper .ticket-detail {
  position: relative;
  padding-top: clamp(90px, calc(135 / 1920 * 100vw), 135px);
  padding-bottom: 80px;
  overflow: hidden;
  background: var(--color-black);
}

 :where(html[dir]) body #wrapper .ticket-detail__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30% 22% at 18% 5%, rgba(10, 89, 176, .32), transparent 70%),
    radial-gradient(28% 16% at 16% 32%, rgba(10, 89, 176, .28), transparent 70%),
    radial-gradient(38% 20% at 22% 62%, rgba(10, 89, 176, .3), transparent 70%),
    radial-gradient(34% 17% at 128% 0%, rgba(255, 209, 122, .3), transparent 70%),
    radial-gradient(32% 22% at 132% 25%, rgba(10, 89, 176, .3), transparent 70%),
    radial-gradient(40% 30% at 138% 55%, rgba(10, 89, 176, .28), transparent 70%);
}

 :where(html[dir]) body #wrapper .ticket-detail__hero {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1760 / 450;
  margin-bottom: clamp(40px, calc(90 / 1920 * 100vw), 90px);
}

 :where(html[dir]) body #wrapper .ticket-detail__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 :where(html[dir]) body #wrapper .td-content {
  position: relative;
  z-index: 1;
  max-width: 1164px;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

@media (min-width: 577px) {
   :where(html[dir]) body #wrapper .td-content {
    padding-inline: 24px;
  }
}

@media (min-width: 1300px) {
   :where(html[dir]) body #wrapper .td-content {
    padding-inline: 0;
  }
}

 :where(html[dir]) body #wrapper .td-rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin: clamp(28px, calc(40 / 1920 * 100vw), 40px) 0;
}

 :where(html[dir]) body #wrapper .td-label {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 clamp(24px, calc(58 / 1920 * 100vw), 58px);
}

/* ---------- Top: title + price/CTA ---------- */
 :where(html[dir]) body #wrapper .td-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

 :where(html[dir]) body #wrapper .td-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

 :where(html[dir]) body #wrapper .td-title__brand {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

 :where(html[dir]) body #wrapper .td-title__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

 :where(html[dir]) body #wrapper .td-title__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-accent);
  margin: 0;
}

 :where(html[dir]) body #wrapper .td-title__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
}

 :where(html[dir]) body #wrapper .td-title__name {
  font-family: var(--font-display-bold);
  font-size: 22px;
  color: var(--color-white);
  margin: 0;
}

 :where(html[dir]) body #wrapper .td-top__right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

 :where(html[dir]) body #wrapper .td-top__badges {
  display: flex;
  gap: 12px;
}

 :where(html[dir]) body #wrapper .td-top__badges img {
  width: 45px;
  height: 45px;
}

 :where(html[dir]) body #wrapper .td-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 12px 12px 30px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px;
}

 :where(html[dir]) body #wrapper .td-cta__from {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-white);
  opacity: .6;
  margin: 0;
}

 :where(html[dir]) body #wrapper .td-cta__price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display-regular);
  font-size: 22px;
  color: var(--color-warm-ivory);
  margin: 0;
  white-space: nowrap;
}

 :where(html[dir]) body #wrapper .td-cta__price img {
  width: 16px;
  height: 14px;
}

 :where(html[dir]) body #wrapper .td-cta__buy {
  background: var(--color-cta);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

 :where(html[dir]) body #wrapper .td-cta__flag {
  position: absolute;
  right: 45px;
  top: -12px;
  background: var(--color-black);
  color: #ff383c;
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

@media (max-width: 576px) {
   :where(html[dir]) body #wrapper .td-cta {
    flex-wrap: wrap;
    padding: 16px;
  }

   :where(html[dir]) body #wrapper .td-cta__flag {
    position: static;
    margin-top: 8px;
  }
}

/* ---------- Body copy ---------- */
 :where(html[dir]) body #wrapper .td-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: clamp(28px, calc(40 / 1920 * 100vw), 40px);
}

 :where(html[dir]) body #wrapper .td-body p {
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: .8;
  margin: 0;
}

 :where(html[dir]) body #wrapper .td-body__tip strong {
  color: var(--color-accent);
  opacity: 1;
}

/* ---------- Highlights (2-col) ---------- */
 :where(html[dir]) body #wrapper .td-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

 :where(html[dir]) body #wrapper .td-highlight {
  display: flex;
  align-items: center;
  gap: 24px;
}

 :where(html[dir]) body #wrapper .td-highlight img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  object-fit: contain;
}

 :where(html[dir]) body #wrapper .td-highlight__title {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 16px;
}

 :where(html[dir]) body #wrapper .td-highlight__copy {
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: .7;
  margin: 0;
}

@media (max-width: 768px) {
   :where(html[dir]) body #wrapper .td-highlights {
    grid-template-columns: 1fr;
  }
}

/* ---------- Location map ---------- */
 :where(html[dir]) body #wrapper .td-map {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

 :where(html[dir]) body #wrapper .td-map img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Includes (3-col, check icons) ---------- */
 :where(html[dir]) body #wrapper .td-includes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

 :where(html[dir]) body #wrapper .td-include {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

 :where(html[dir]) body #wrapper .td-include img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

 :where(html[dir]) body #wrapper .td-include__title {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--color-white);
  margin: 0 0 8px;
}

 :where(html[dir]) body #wrapper .td-include__copy {
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: .7;
  margin: 0;
}

 :where(html[dir]) body #wrapper .td-include--tall {
  grid-row: span 2;
}

@media (max-width: 992px) {
   :where(html[dir]) body #wrapper .td-includes {
    grid-template-columns: repeat(2, 1fr);
  }

   :where(html[dir]) body #wrapper .td-include--tall {
    grid-row: auto;
  }
}

@media (max-width: 576px) {
   :where(html[dir]) body #wrapper .td-includes {
    grid-template-columns: 1fr;
  }
}

/* ---------- Banner: edge-to-edge horizontal scroller ---------- */
 :where(html[dir]) body #wrapper .td-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 209, 122, .35) transparent;
  margin-bottom: clamp(28px, calc(40 / 1920 * 100vw), 40px);
}

 :where(html[dir]) body #wrapper .td-banner::-webkit-scrollbar {
  height: 4px;
}

 :where(html[dir]) body #wrapper .td-banner::-webkit-scrollbar-thumb {
  background-color: rgba(255, 209, 122, .35);
  border-radius: 100px;
}

 :where(html[dir]) body #wrapper .td-banner__track {
  display: flex;
  gap: 30px;
  width: max-content;
  padding-inline: max(var(--gutter-mobile), calc((100vw - 1164px) / 2));
}

 :where(html[dir]) body #wrapper .td-banner__card {
  scroll-snap-align: start;
  width: min(567px, 78vw);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #212123;
}

 :where(html[dir]) body #wrapper .td-banner__card img {
  width: 100%;
  aspect-ratio: 567 / 309;
  object-fit: cover;
  display: block;
}

 :where(html[dir]) body #wrapper .td-banner__card p {
  margin: 0;
  padding: 12px 8px;
  background: var(--color-midnight-navy);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
}

 :where(html[dir]) body #wrapper .td-final-body {
  font-family: "Titillium Web", var(--font-display-regular);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: .8;
  margin: 0;
}

/* ---------- Revamp Detail page 1 (revamp-adgp-products/fragments/revamp-detail-page-1) ---------- */
@media(min-width:992px){
:where(html[dir]) #wrapper .td-title {
    width: 50%;
}
}
:where(html[dir]) body #wrapper .ticket-card__explore {
    border-radius: 25px 0 0 25px;
}
:where(html[dir]) body #wrapper .ticket-card__explore:after {
    background: conic-gradient(from 13deg, rgba(255, 255, 255, 0.12) 72deg, rgba(255, 255, 255, 0.50) 51deg, rgba(255, 255, 255, 0.18) 60deg, rgba(255, 255, 255, 0.07) 252deg, rgba(255, 255, 255, 0.05) 214deg, rgba(255, 255, 255, 0.42) 256deg, rgba(255, 255, 255, 0.16) 342deg, rgba(255, 255, 255, 0.08) 111deg, rgba(255, 255, 255, 0.12) 31deg);
}



/* ---------- Glimpse carousel ---------- */
:where(html[dir]) body #wrapper .td-slider {
  position: relative;
  z-index: 1;
  margin: 30px 0 40px;
  outline: none;
}
:where(html[dir]) body #wrapper .td-slider__viewport {
  overflow: hidden;
  touch-action: pan-y;          /* page still scrolls vertically on touch */
  cursor: grab;
}
:where(html[dir]) body #wrapper .td-slider.is-dragging .td-slider__viewport { cursor: grabbing; }
:where(html[dir]) body #wrapper .td-slider__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
:where(html[dir]) body #wrapper .td-slider.is-dragging .td-slider__track { transition: none; }

/* Desktop: every card identical, as in Figma */
:where(html[dir]) body #wrapper .td-slider__slide {
  flex: 0 0 var(--td-slide-w, min(567px, 78vw));  /* width set by JS = half the content width */
  border-radius: 30px;
  overflow: hidden;
  background: #212123;
}
:where(html[dir]) body #wrapper .td-slider__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 567 / 309;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
:where(html[dir]) body #wrapper .td-slider__slide p {
  margin: 0;
  padding: 12px 8px;
  background: var(--color-midnight-navy, #051c33);
  color: var(--color-white, #fff);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
}

/* Mobile: compact cards, centred card grows with ivory border + gold label */
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper .td-slider__viewport { padding: 16px 0; }
  :where(html[dir]) body #wrapper .td-slider__track { gap: 16px; }
  :where(html[dir]) body #wrapper .td-slider__slide {
    flex-basis: 282px;
    border: 1px solid transparent;
    transition: transform .4s ease, border-color .4s ease, border-radius .4s ease;
  }
  :where(html[dir]) body #wrapper .td-slider__slide img { aspect-ratio: 282 / 264; }
  :where(html[dir]) body #wrapper .td-slider__slide p {
    padding: 8px;
    font-size: 12px;
    transition: background-color .4s ease, color .4s ease;
  }
  :where(html[dir]) body #wrapper .td-slider__slide.is-active {
    transform: scale(1.1);
    border-color: var(--color-warm-ivory, #fff2c7);
    border-radius: 36px;
  }
  :where(html[dir]) body #wrapper .td-slider__slide.is-active p {
    background: var(--color-accent, #ffd17a);
    color: var(--color-black, #000);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[dir]) body #wrapper .td-slider__track,
  :where(html[dir]) body #wrapper .td-slider__slide { transition: none; }
}
/* ---------- END Glimpse carousel ---------- */

/* ---------- Revamp Detail page 2 (revamp-adgp-products/fragments/revamp-detail-page-2) ---------- */
:where(html[dir]) .ar-lang {
display:none !important;
}
:where(html[dir]) .rtl .ar-lang {
display:block !important;
}

/* ---------- Revamp Glimpse into your experience (revamp-adgp-products/fragments/revamp-glimpse-into-your-experience) ---------- */
/* ---------- Glimpse carousel ---------- */
:where(html[dir]) body #wrapper .td-slider {
  position: relative;
  z-index: 1;
  margin: 30px 0 40px;
  outline: none;
}
:where(html[dir]) body #wrapper .td-slider__viewport {
  overflow: hidden;
  touch-action: pan-y;          /* page still scrolls vertically on touch */
  cursor: grab;
}
:where(html[dir]) body #wrapper .td-slider.is-dragging .td-slider__viewport { cursor: grabbing; }
:where(html[dir]) body #wrapper .td-slider__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
:where(html[dir]) body #wrapper .td-slider.is-dragging .td-slider__track { transition: none; }

/* Desktop: every card identical, as in Figma */
:where(html[dir]) body #wrapper .td-slider__slide {
  flex: 0 0 var(--td-slide-w, min(567px, 78vw));  /* width set by JS = half the content width */
  border-radius: 30px;
  overflow: hidden;
  background: #212123;
}
:where(html[dir]) body #wrapper .td-slider__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 567 / 309;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
:where(html[dir]) body #wrapper .td-slider__slide p {
  margin: 0;
  padding: 12px 8px;
  background: var(--color-midnight-navy, #051c33);
  color: var(--color-white, #fff);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
}

/* Mobile: compact cards, centred card grows with ivory border + gold label */
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper .td-slider__viewport { padding: 16px 0; }
  :where(html[dir]) body #wrapper .td-slider__track { gap: 16px; }
  :where(html[dir]) body #wrapper .td-slider__slide {
    flex-basis: 282px;
    border: 1px solid transparent;
    transition: transform .4s ease, border-color .4s ease, border-radius .4s ease;
  }
  :where(html[dir]) body #wrapper .td-slider__slide img { aspect-ratio: 282 / 264; }
  :where(html[dir]) body #wrapper .td-slider__slide p {
    padding: 8px;
    font-size: 12px;
    transition: background-color .4s ease, color .4s ease;
  }
  :where(html[dir]) body #wrapper .td-slider__slide.is-active {
    transform: scale(1.1);
    border-color: var(--color-warm-ivory, #fff2c7);
    border-radius: 36px;
  }
  :where(html[dir]) body #wrapper .td-slider__slide.is-active p {
    background: var(--color-accent, #ffd17a);
    color: var(--color-black, #000);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html[dir]) body #wrapper .td-slider__track,
  :where(html[dir]) body #wrapper .td-slider__slide { transition: none; }
}

/* ---------- RC Circuit Stats (revamp-circuit-page/fragments/rc-circuit-stats) ---------- */
/* RC Circuit Stats — base styles from the theme (.circuit-stats, .stats-panel, .stat-card). */

/* Editable spans inside the "most wins / driver" title stack like the static page. */
:where(html[dir]) body #wrapper .circuit-stats .stat-card__title > span,
:where(html[dir]) body #wrapper .circuit-stats .stat-card__title > small { display: block; }


/* ---------- RC Intro (revamp-circuit-page/fragments/rc-intro) ---------- */
/* RC Intro — base styles from the theme (.circuit-intro).
   On circuit.html the hero sits above this section because of the
   .circuit-page wrapper; Liferay has no such wrapper, so the hero is
   raised here (this CSS only loads on pages that use RC Intro). */
:where(html[dir]) body #wrapper .page-hero { position: relative; z-index: 2; }

/* "Pull up under the hero" off: normal spacing instead. */
:where(html[dir]) body #wrapper .circuit-intro.rcf-intro--flat {
  margin-top: 0;
  padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px);
}
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper .circuit-intro.rcf-intro--flat { padding-top: 40px; }
}


/* ---------- RC Map (revamp-circuit-page/fragments/rc-map) ---------- */
/* RC Map — base styles from the theme (.circuit-map, .section-heading). */
:where(html[dir]) body #wrapper .circuit-map__frame.rcf-map--cover img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}


/* ---------- RC Stats Banner (revamp-circuit-page/fragments/rc-stats-banner) ---------- */
/* RC Stats Banner — base styles from the theme (.circuit-outro). */
:where(html[dir]) body #wrapper .rcf-space-top-0 { padding-top: 0; }
:where(html[dir]) body #wrapper .rcf-space-top-60 { padding-top: 60px; }
:where(html[dir]) body #wrapper .rcf-space-top-120 { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper .rcf-space-top-60,
  :where(html[dir]) body #wrapper .rcf-space-top-120 { padding-top: 30px; }
}


/* ---------- CB Intro Text (revamp-corporate-bookings/fragments/cb-intro-text) ---------- */
/* CB Intro Text — base styles from the theme (.cb-intro). */
:where(html[dir]) body #wrapper .cb-intro.cbf-space-top-120 { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
:where(html[dir]) body #wrapper .cb-intro.cbf-space-top-0 { padding-top: 0; }
@media (max-width: 600px) {
  :where(html[dir]) body #wrapper .cb-intro.cbf-space-top-120 { padding-top: 30px; }
}


/* ---------- CB Logo Marquee (revamp-corporate-bookings/fragments/cb-logo-marquee) ---------- */
/* CB Logo Marquee — base styles from the theme (.cb-logos). The theme only
   animates the strip once index.js adds .is-looping; without it the strip
   is a swipeable row (page editor, "Scroll continuously" = No). */
:where(html[dir]) body #wrapper .cb-logos__track { margin: 0; padding: 0; list-style: none; }


/* ---------- PT Anchor Tabs (revamp-partners-page/fragments/pt-anchor-tabs) ---------- */
/* PT Anchor Tabs — base styles from the theme (.pt-anchor, .legal-tabs__item). */
html[dir]:has(.pt-anchor) { scroll-behavior: smooth; }

:where(html[dir]) body #wrapper .pt-anchor.ptf-space-top-120 { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
:where(html[dir]) body #wrapper .pt-anchor.ptf-space-top-0 { padding-top: 0; }
@media (max-width: 768px) {
  :where(html[dir]) body #wrapper .pt-anchor.ptf-space-top-120 { padding-top: 30px; }
}


/* ---------- PT Title Partner (revamp-partners-page/fragments/pt-title-partner) ---------- */
/* PT Title Partner — base styles from the theme (.partner-cta, .pt-title, .pt-support). */
:where(html[dir]) body #wrapper .ptf-title { scroll-margin-top: 100px; }
:where(html[dir]) body #wrapper .ptf-title.ptf-space-top-0 { padding-top: 0; }
:where(html[dir]) body #wrapper .ptf-title.ptf-space-top-60 { padding-top: clamp(40px, calc(60 / 1920 * 100vw), 60px); }
:where(html[dir]) body #wrapper .ptf-title.ptf-space-top-120 { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }

:where(html[dir]) body #wrapper .ptf-title .partner-cta__title > p { margin: 0; }
:where(html[dir]) body #wrapper .ptf-title .partner-cta__copy > p { margin: 0; }
:where(html[dir]) body #wrapper .ptf-title .partner-cta__copy > p + p,
:where(html[dir]) body #wrapper .ptf-title .partner-cta__copy > p + ul,
:where(html[dir]) body #wrapper .ptf-title .partner-cta__copy > ul + p { margin-top: 1.2em; }
:where(html[dir]) body #wrapper .ptf-title .partner-cta__copy ul { list-style: disc; padding-left: 24px; }
:where(html[dir]) body #wrapper .ptf-title .partner-cta__copy strong { font-weight: 700; }

@media (max-width: 768px) {
  :where(html[dir]) body #wrapper .ptf-title .ptf-desktop-only { display: none !important; }
  :where(html[dir]) body #wrapper .ptf-title.ptf-space-top-60 { padding-top: 30px; }
  :where(html[dir]) body #wrapper .ptf-title.ptf-space-top-120 { padding-top: 60px; }
}


/* ---------- SU Certifications (revamp-sustainability-page/fragments/su-certifications) ---------- */
/* SU Certifications — base styles from the theme (.su-certs, .tx-perks). */
/* The theme colours every <span> in the title gold; the white part is an <em>. */
:where(html[dir]) body #wrapper .su-certs__title em { font-style: normal; color: var(--color-white); }
:where(html[dir]) body #wrapper .su-perks--certs span > p { margin: 0; }


/* ---------- SU Highlights Bento (revamp-sustainability-page/fragments/su-highlights-bento) ---------- */
/* SU Highlights Bento — base styles from the theme (.su-bento, .su-tile, .su-stat). */
:where(html[dir]) body #wrapper .su-tile__copy > p { margin: 0; }
:where(html[dir]) body #wrapper .su-tile__copy > p + p { margin-top: 1.4em; }
/* Rich-text labels: Liferay may wrap the text in <p>. */
:where(html[dir]) body #wrapper .su-stat__label > p { margin: 0; }
/* An empty unit (e.g. "78") takes no space. */
:where(html[dir]) body #wrapper .su-stat__value small:empty { display: none; }


/* ---------- SU Race Impact (revamp-sustainability-page/fragments/su-race-impact) ---------- */
/* SU Race Impact — base styles from the theme (.su-race). */
:where(html[dir]) body #wrapper .su-race__title > p { margin: 0; }


/* ---------- SU Team Quotes (revamp-sustainability-page/fragments/su-team-quotes) ---------- */
/* SU Team Quotes — base styles from the theme (.su-team, .su-quote). */
/* The rich-text copy can't carry the theme's .su-list class, so its list is styled here. */
:where(html[dir]) body #wrapper .suf-team-copy > p { margin: 0; }
:where(html[dir]) body #wrapper .suf-team-copy > p + p { margin-top: 1.4em; }
:where(html[dir]) body #wrapper .suf-team-copy ul { margin: 1.4em 0 0; padding-left: 24px; list-style: disc; }
:where(html[dir]) body #wrapper .su-quote figcaption > p { margin: 0; }


/* ---------- TX Card Grid (ticket-experiences/fragments/tx-card-grid) ---------- */
/* TX Card Grid — base styles from the theme (.tx-cards, .tx-card, .td2-notice). */

/* "Learn more" is a Liferay link editable, which owns the link's inner HTML,
   so the round arrow is drawn here instead of being an <img> inside it. */
:where(html[dir]) body #wrapper .txf-link::after {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23C75917' fill-rule='evenodd' d='M9 16.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15ZM7.31 6.75c0-.31.25-.56.57-.56h3.37c.31 0 .56.25.56.56v3.38a.56.56 0 0 1-1.12 0V8.11l-3.54 3.54a.56.56 0 0 1-.8-.8l3.54-3.54H7.88a.56.56 0 0 1-.57-.56Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Rich-text card titles: Liferay may wrap the text in <p>. */
:where(html[dir]) body #wrapper .tx-card__title > p { margin: 0; }

/* Non-staggered option: all cards on one line. */
@media (min-width: 1201px) {
  :where(html[dir]) body #wrapper .txf-cards--flat { padding-bottom: 0; }
  :where(html[dir]) body #wrapper .txf-cards--flat > .tx-card:nth-child(even) { margin: 0; }
}

/* ---------- TX Full Banner (ticket-experiences/fragments/tx-full-banner) ---------- */
/* TX Full Banner — base styles from the theme (.tx-banner). */
:where(html[dir]) body #wrapper .tx-banner__sub > p,
:where(html[dir]) body #wrapper .tx-banner__copy > p { margin: 0; }
:where(html[dir]) body #wrapper .tx-banner__headline em { font-style: normal; }
:where(html[dir]) body #wrapper .tx-banner__headline .txf-headline-line { display: block; }
/* Title and sub-line are typed in capitals by the editor instead of being
   forced uppercase, so mixed-case words like "e&" and "DJs" stay as typed. */
:where(html[dir]) body #wrapper .tx-banner__title,
:where(html[dir]) body #wrapper .tx-banner__sub { text-transform: none; }

/* ---------- TX Icon Tiles (ticket-experiences/fragments/tx-icon-tiles) ---------- */
/* TX Icon Tiles — base styles from the theme (.tx-perks). */
@media (min-width: 601px) { :where(html[dir]) body #wrapper .txf-perks > li.txf-mobile-only { display: none !important; } }
:where(html[dir]) body #wrapper .txf-perks span > p { margin: 0; }

/* ---------- TX Intro (ticket-experiences/fragments/tx-intro) ---------- */
/* TX Intro — base styles from the theme (.guide-intro, .intro__title). */
@media (min-width: 601px) { :where(html[dir]) body #wrapper .txf-mobile-only { display: none !important; } }

/* Layout "bottom" (The Circuit): left-aligned title, copy level with its last line. */
:where(html[dir]) body #wrapper .txf-intro--bottom .guide-intro__inner { align-items: flex-end; }
:where(html[dir]) body #wrapper .txf-intro--bottom .intro__title,
:where(html[dir]) body #wrapper .txf-intro--bottom .intro__title-mid { text-align: left; justify-content: flex-start; }
@media (max-width: 1200px) {
  :where(html[dir]) body #wrapper .txf-intro--bottom .guide-intro__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- TX Lineup (ticket-experiences/fragments/tx-lineup) ---------- */
/* TX Lineup — base styles from the theme (.tx-lineup). */
@media (min-width: 601px) { :where(html[dir]) body #wrapper .txf-mobile-only { display: none !important; } }
@media (max-width: 600px) { :where(html[dir]) body #wrapper .txf-desktop-only { display: none !important; } }

:where(html[dir]) body #wrapper .tx-lineup__title .txf-block { display: block; }
:where(html[dir]) body #wrapper .tx-lineup__title .txf-block + .txf-block { color: var(--color-accent); }
:where(html[dir]) body #wrapper .tx-lineup__copy > p { margin: 0; }
:where(html[dir]) body #wrapper .tx-lineup__copy > p + p { margin-top: 1.2em; }

/* ---------- TX Partner Card (ticket-experiences/fragments/tx-partner-card) ---------- */
/* TX Partner Card — base styles from the theme (.partner-cta, .section-heading). */
@media (min-width: 769px) { :where(html[dir]) body #wrapper .txf-partner .txf-mobile-only { display: none !important; } }
@media (max-width: 768px) {
  :where(html[dir]) body #wrapper .txf-partner .txf-desktop-only { display: none !important; }
  /* Mobile cards carry only the first part of a "split" copy. */
  :where(html[dir]) body #wrapper .txf-partner .partner-cta__more { display: none; }
}

:where(html[dir]) body #wrapper .partner-cta__title > p { margin: 0; }
:where(html[dir]) body #wrapper .txf-partner .partner-cta__copy > p { margin: 0; }
:where(html[dir]) body #wrapper .txf-partner .partner-cta__copy > p + p,
:where(html[dir]) body #wrapper .txf-partner .partner-cta__copy > p + ul,
:where(html[dir]) body #wrapper .txf-partner .partner-cta__copy > ul + p { margin-top: 1.2em; }
:where(html[dir]) body #wrapper .txf-partner .partner-cta__copy ul { list-style: disc; padding-left: 24px; }
:where(html[dir]) body #wrapper .txf-partner .partner-cta__copy strong { font-weight: 700; }
:where(html[dir]) body #wrapper .txf-partner .partner-cta__copy a { color: var(--color-accent); }

:where(html[dir]) body #wrapper .txf-space-top-0 { padding-top: 0; }
:where(html[dir]) body #wrapper .txf-space-top-40 { padding-top: 40px; }
:where(html[dir]) body #wrapper .txf-space-top-80 { padding-top: clamp(40px, calc(80 / 1920 * 100vw), 80px); }
:where(html[dir]) body #wrapper .txf-space-top-100 { padding-top: clamp(70px, calc(100 / 1920 * 100vw), 100px); }
:where(html[dir]) body #wrapper .txf-space-top-120 { padding-top: clamp(60px, calc(120 / 1920 * 100vw), 120px); }
:where(html[dir]) body #wrapper .txf-space-bottom-0 { padding-bottom: 0; }
:where(html[dir]) body #wrapper .txf-space-bottom-40 { padding-bottom: 40px; }
:where(html[dir]) body #wrapper .txf-space-bottom-120 { padding-bottom: clamp(60px, calc(120 / 1920 * 100vw), 120px); }

@media (max-width: 600px) {
  :where(html[dir]) body #wrapper .txf-space-top-40,
  :where(html[dir]) body #wrapper .txf-space-top-80 { padding-top: 30px; }
  :where(html[dir]) body #wrapper .txf-space-top-100,
  :where(html[dir]) body #wrapper .txf-space-top-120 { padding-top: 60px; }
  :where(html[dir]) body #wrapper .txf-space-bottom-120 { padding-bottom: 60px; }
}

/* Anchor ID option: keep the heading clear of the fixed header on jump. */
:where(html[dir]) body #wrapper .txf-partner[id] { scroll-margin-top: 100px; }

/* ---------- TX Statement (ticket-experiences/fragments/tx-statement) ---------- */
/* TX Statement — base styles from the theme (.tx-soon). The theme colours every
   <span> gold, so the line colours are set per line here. */
:where(html[dir]) body #wrapper .tx-soon__text .txf-line { display: block; color: var(--color-white); }
:where(html[dir]) body #wrapper .tx-soon__text .txf-line.txf-accent { color: var(--color-accent); }

/* ---------- YA Intro Text (yasalam-entertainment/fragments/ya-intro-text) ---------- */
/* YA Intro Text — base styles from the theme (.ya-intro). */
:where(html[dir]) body #wrapper .ya-intro__text > p { margin: 0; }
:where(html[dir]) body #wrapper .ya-intro__text > p + p { margin-top: 1.2em; }
:where(html[dir]) body #wrapper .ya-intro.yaf-space-top-60 { padding-top: 60px; }
:where(html[dir]) body #wrapper .ya-intro.yaf-space-top-0 { padding-top: 0; }
@media (max-width: 768px) {
  :where(html[dir]) body #wrapper .ya-intro.yaf-space-top-60,
  :where(html[dir]) body #wrapper .ya-intro.yaf-space-top-120 { padding-top: 16px; }
}


/* ---------- YA Lineup Grid (yasalam-entertainment/fragments/ya-lineup-grid) ---------- */
/* YA Lineup Grid — base styles from the theme (.ya-lineup, .ya-lineup__body). */
:where(html[dir]) body #wrapper .ya-lineup__copy > p { margin: 0; }
:where(html[dir]) body #wrapper .ya-lineup__copy > p + p { margin-top: 1.4em; }


/* =========================================================================
   DETAIL PAGE 1: mobile + tablet title row + floating price pill
   Phones AND tablets (up to 1024px, iPad included) use the mobile layout,
   like detail page 2: name + badges on one row, the attendance/days row
   full width under them, and the price pill pinned to the bottom.
   Overrides the later generic .td-top__right { display: flex }, the tablet
   .td-top { flex-wrap: nowrap !important } and the z-index: 1 /
   position: relative rules that let page content paint over the pill.
   ========================================================================= */
/* The pinned pill lives inside the lead block, so its z-index only counts
   within that block. The lead block must sit above the later .td-content
   sections (all z-index: 1); the generic :where(html[dir]) .td-content
   rule was resetting the lead block back to 1. */
:where(html[dir]) body #wrapper .td-content.td2-content--lead { z-index: 3; }

@media (max-width: 1024px) {
  :where(html[dir]) body #wrapper .td-top {
    flex-wrap: wrap !important;
    align-items: center;
  }
  /* Badges and days row join the top row directly (as on detail page 2). */
  :where(html[dir]) body #wrapper .td-top__right { display: contents; }
  :where(html[dir]) body #wrapper .td-top .td-title { flex: 1 1 0; min-width: 0; width: auto; }
  :where(html[dir]) body #wrapper .td-top .td-title__text { gap: 4px; }
  :where(html[dir]) body #wrapper .td-top__badges { flex-shrink: 0; gap: 4px; }
  /* Tablets: show the days row (a phone-only element) and drop the days
     from the eyebrow, exactly as on phones. */
  :where(html[dir]) body #wrapper .td-top .td2-days { display: flex !important; flex: 0 0 100%; }
  :where(html[dir]) body #wrapper .td-top .td-title__eyebrow .td2-desktop-only { display: none !important; }

  /* Pill pinned to the bottom (max 600px wide, centred), above the page
     content, never wrapping. */
  :where(html[dir]) body #wrapper .td-top .td-cta--sticky {
    position: fixed;
    z-index: 50;
    left: 20px;
    right: 20px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: auto !important;
    max-width: 600px;
    margin-inline: auto;
    transform: none !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 24px;
    background: rgba(0, 0, 0, .85);
  }
  :where(html[dir]) body #wrapper .td-top .td-cta--sticky .td-cta__cost {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  :where(html[dir]) body #wrapper .td-top .td-cta--sticky .td-cta__from { font-size: 12px; }
  :where(html[dir]) body #wrapper .td-top .td-cta--sticky .td-cta__price { font-size: 16px; }
  :where(html[dir]) body #wrapper .td-top .td-cta--sticky .td-cta__action { flex: 0 0 50%; }
  :where(html[dir]) body #wrapper .td-top .td-cta--sticky .td-cta__buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px !important;
    text-align: center;
  }
  :where(html[dir]) body #wrapper .td-top .td-cta--sticky .td-cta__flag {
    position: absolute;
    top: calc(100% - 8px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 0;
  }
  /* Keep the end of the page clear of the pinned pill. */
  :where(html[dir]) body #wrapper .ticket-detail:has(.td-cta--sticky) { padding-bottom: 110px !important; }
}

/* =========================================================================
   ARABIC / RTL
   Liferay renders Arabic pages as <html class="rtl ..." dir="rtl">.
   dir="rtl" already flips flex/grid order (so flex-start / flex-end,
   row-reverse cards etc. mirror on their own) and the default text
   alignment. What it does NOT flip is anything physical: left/right
   offsets, left/right padding, text-align: left/right, one-sided corner
   radii, left-to-right gradient masks and directional artwork or arrows.
   This block mirrors those. Every rule is prefixed html.rtl #wrapper, so it
   beats the English rule it mirrors; where the English rule is reset at a
   breakpoint, the mirror is wrapped in the matching min-width query (or
   restated for mobile) so it doesn't leak into the smaller layout.
   Centred elements (left: 50% + translateX(-50%)) need nothing. The home
   "Inclusions" mosaic is mirrored as a whole at the end of this block.
   ========================================================================= */

/* ---------- Type ---------- */
/* The brand fonts have no Arabic glyphs: Arabic falls through to an Arabic
   face while Latin words and numbers keep the brand fonts. For a consistent
   Arabic face on every device, load one (e.g. Noto Kufi Arabic from Google
   Fonts) in the theme; otherwise the system Arabic font is used. */
html.rtl,
html.rtl #wrapper {
  --font-display-black: "Formula1 Display Black", "Noto Kufi Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-display-wide: "Formula1 Display Wide", "Noto Kufi Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-display-bold: "Formula1 Display Bold", "Noto Kufi Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-display-regular: "Formula1 Display", "Noto Kufi Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-ui: "KH Interference F1", "Noto Kufi Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
}
/* Letter-spacing pulls Arabic's joined letters apart. */
html.rtl #wrapper,
html.rtl #wrapper * { letter-spacing: normal !important; }

/* ---------- Arrows and directional icons point the other way ---------- */
html.rtl #wrapper img[src*="arrow"],
html.rtl #wrapper .nav-drawer__arrow,
html.rtl #wrapper .inclusions__cta-arrow,
html.rtl #wrapper .txf-link::after { transform: scaleX(-1); }

/* ---------- Header / nav drawer ---------- */
html.rtl #wrapper .nav-drawer__item-toggle { text-align: right; }
html.rtl #wrapper .nav-drawer__art { right: auto; left: 0; transform: scaleX(-1); }

/* ---------- Home hero ---------- */
html.rtl #wrapper .hero__helmet { right: auto; left: 2%; transform: translateY(-53%) scaleX(-1) rotate(-15.07deg); }
@media (max-width: 768px) {
  html.rtl #wrapper .hero__helmet { left: -8%; }
}
html.rtl #wrapper .hero__title-line--left { text-align: right; margin-left: 0; margin-right: -.5ch; }
html.rtl #wrapper .scroll-down { left: auto; right: clamp(24px, calc(80 / 1920 * 100vw), 80px); }

/* ---------- Intro ("Discover // The best / of capital" and friends) ---------- */
html.rtl #wrapper .intro__bg { background-position: right top; }
html.rtl #wrapper .intro__title { text-align: left; }
@media (max-width: 768px) {
  html.rtl #wrapper .intro__title,
  html.rtl #wrapper .intro__title-mid,
  html.rtl #wrapper .intro__inner { text-align: right; }
}
@media (max-width: 576px) {
  html.rtl #wrapper.wrapper--home .intro--home .intro__title,
  html.rtl #wrapper.wrapper--home .intro--home .intro__title-mid { text-align: left; }
}

/* ---------- Season finale / Get ready ---------- */
html.rtl #wrapper .season-finale__tagline { text-align: left; }

html.rtl #wrapper .get-ready__art { right: auto; left: 0; }
html.rtl #wrapper .get-ready__art img {
  transform: none;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, black 18%);
  mask-image: linear-gradient(270deg, transparent 0%, black 18%);
}
html.rtl #wrapper .get-ready__inner {
  padding-left: 0;
  padding-right: clamp(20px, calc(216 / 1920 * 100vw), 216px);
}
html.rtl #wrapper .get-ready__heading-blur {
  left: auto;
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, black 0%, black 5%, transparent 16%);
  mask-image: linear-gradient(270deg, black 0%, black 5%, transparent 16%);
}
html.rtl #wrapper .get-ready__heading-row--center .get-ready__heading-blur {
  -webkit-mask-image: linear-gradient(270deg, transparent 32%, black 40%, black 46%, transparent 58%);
  mask-image: linear-gradient(270deg, transparent 32%, black 40%, black 46%, transparent 58%);
}
@media (max-width: 576px) {
  html.rtl #wrapper.wrapper--home .get-ready__heading-row--center { text-align: right; }
  html.rtl #wrapper.wrapper--home .get-ready__art img { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Footer (desktop absolute layout; mobile stacks) ---------- */
@media (min-width: 769px) {
  html.rtl #wrapper .site-footer__legal { left: auto; right: 4.17%; }
  html.rtl #wrapper .site-footer__links { right: auto; left: 4.17%; }
  html.rtl #wrapper .site-footer__copyright { left: auto; right: 73.49%; }
}
html.rtl #wrapper .site-footer__ticketing { left: auto; right: 4.17%; }
html.rtl #wrapper .site-footer__stores { right: auto; left: 4.17%; }

/* ---------- App promo / contact ---------- */
html.rtl #wrapper .app-promo__glow { left: auto; right: -15%; }
html.rtl #wrapper .contact-helmet { right: auto; left: calc((100% - 100vw) / 2); transform: scaleX(-1); }
html.rtl #wrapper .contact-box__glow { left: auto; right: -717px; }

/* ---------- Ticket shop (tickets.html + ADGP Ticket Listing fragment) ---------- */
@media (min-width: 601px) {
  html.rtl #wrapper .ticket-hero__content { left: auto; right: clamp(24px, calc(50 / 1920 * 100vw), 50px); }
}
html.rtl #wrapper .category-item__glow { right: auto; left: -106px; transform: scaleX(-1); }
@media (max-width: 600px) {
  html.rtl #wrapper .sticky-filter__action[data-view-toggle="location"] {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .3);
  }
}
/* Buy button sits on the left: round its other side, and centre the tag under it. */
html.rtl #wrapper .ticket-card__buy { border-radius: 100px 0 0 100px; }
html.rtl #wrapper .ticket-card__flag { left: 25%; }
html.rtl #wrapper .adgp-product-listing .ticket-card__tags { left: 25%; }
html.rtl #wrapper .adgp-product-listing .ticket-card__cta-wrap--buy-only .ticket-card__tags { left: 50%; }
html.rtl #wrapper .adgp-product-listing .sort-filter-panel__option { text-align: right; }
html.rtl #wrapper .adgp-product-listing .sort-filter-panel__footer { text-align: left; }
html.rtl #wrapper .adgp-product-listing .sticky-filter__action--filtered::after { right: auto; left: -8px; }

/* ---------- Ticket detail ---------- */
html.rtl #wrapper .td-contacts__glow { left: auto; right: calc(50% - 1597px); }

/* ---------- News ---------- */
@media (min-width: 993px) {
  html.rtl #wrapper .news-card--xl .news-card__media { left: auto; right: 0; }
  html.rtl #wrapper .news-card--xl .news-card__blur {
    left: -40px;
    right: calc(1045 / 1760 * 100%);
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 25%);
    mask-image: linear-gradient(to left, transparent 0, #000 25%);
  }
  html.rtl #wrapper .news-card--xl .news-card__body { left: auto; right: calc(1193 / 1760 * 100%); }
}

/* ---------- Page hero / partner cards (guide, yasalam, corporate, partners…) ---------- */
@media (min-width: 769px) {
  html.rtl #wrapper .page-hero__logo { right: auto; left: clamp(30px, calc(60 / 1920 * 100vw), 60px); }
}
/* Corner art mirrors with the card (row direction flips by itself). */
html.rtl #wrapper .partner-cta__bg { left: auto; right: 0; transform: scaleX(-1); }
html.rtl #wrapper .partner-cta--reverse .partner-cta__bg { right: auto; left: 0; }
html.rtl #wrapper .partner-cta__copy ul { padding-left: 0; padding-right: 24px; }
@media (max-width: 992px) {
  html.rtl #wrapper .partner-cta__copy ul { padding-right: 21px; }
}
html.rtl #wrapper .ticket-mini__label { left: 16px; right: 20px; }

/* ---------- Legal pages ---------- */
html.rtl #wrapper .legal-list { padding-left: 0; padding-right: 27px; }
@media (max-width: 600px) {
  html.rtl #wrapper .legal-list { padding-right: 21px; }
}

/* ---------- The Circuit ---------- */
html.rtl #wrapper .circuit-intro__kv { right: auto; left: 0; transform: none; }
html.rtl #wrapper .circuit-intro__glow { left: auto; right: 0; transform: scaleX(-1); }

/* Stats panels: every layer mirrored to the same distance from the right.
   Photos are not flipped (they'd mirror sponsor logos and numbers). */
html.rtl #wrapper .stats-panel__title { left: auto; right: calc(60 * var(--u)); }
html.rtl #wrapper .stats-group--lap { left: auto; right: calc(374 * var(--u)); }
html.rtl #wrapper .stats-group--wins { left: auto; right: calc(998 * var(--u)); }
html.rtl #wrapper .stats-driver img { left: auto; right: 0; }
html.rtl #wrapper .stats-driver--leclerc,
html.rtl #wrapper .stats-driver--hamilton { left: auto; right: 0; }
html.rtl #wrapper .stats-driver--verstappen { left: auto; right: calc(149 * var(--u)); }
html.rtl #wrapper .stats-group--lap .stat-card { left: auto; right: calc(185 * var(--u)); }
html.rtl #wrapper .stats-group--wins .stat-card { left: auto; right: calc(330 * var(--u)); }
html.rtl #wrapper .stat-card--team {
  left: auto;
  right: calc(1445 * var(--u));
  padding-left: 0;
  padding-right: calc(39 * var(--u));
}
html.rtl #wrapper .stats-track { left: auto; right: calc(35 * var(--u)); }
html.rtl #wrapper .stats-track img { left: auto; right: 0; }
html.rtl #wrapper .stats-car { left: auto; right: calc(739 * var(--u)); }
html.rtl #wrapper .circuit-outro__stats { left: auto; right: clamp(30px, calc(80 / 1920 * 100vw), 80px); }
@media (max-width: 600px) {
  html.rtl #wrapper .stats-group { right: auto; }
  html.rtl #wrapper .stats-driver--leclerc img { right: -9.32%; }
  html.rtl #wrapper .stats-driver--hamilton img { right: -7.65%; }
  html.rtl #wrapper .stats-driver--verstappen { right: calc(53 * var(--u)); }
  html.rtl #wrapper .stats-group--lap .stat-card { right: calc(90 * var(--u)); }
  html.rtl #wrapper .stats-group--wins .stat-card { right: calc(139 * var(--u)); }
  html.rtl #wrapper .stat-card--team { right: calc(188 * var(--u)); }
  html.rtl #wrapper .stats-track { right: 0; }
  html.rtl #wrapper .stats-car { right: calc(20 * var(--u)); }
  html.rtl #wrapper .circuit-outro__stats { right: 24px; }
}

/* ---------- Ticket experiences / Yasalam banners ---------- */
html.rtl #wrapper .tx-banner__bottom { text-align: left; }
@media (max-width: 600px) {
  html.rtl #wrapper .tx-banner__bottom { text-align: right; }
}

/* ---------- Sustainability ---------- */
/* Bento: tiles mirrored, the notched tile outlines flipped to match. */
html.rtl #wrapper .su-tile--intro { left: auto; right: 0; }
html.rtl #wrapper .su-tile__shape { transform: scaleX(-1); }
html.rtl #wrapper .su-tile__soon { left: auto; right: calc(80 * var(--u)); }
html.rtl #wrapper .su-stat--travel,
html.rtl #wrapper .su-stat--fuel { left: auto; right: calc(1111 * var(--u)); }
html.rtl #wrapper .su-stat--biofuel { left: auto; right: calc(803 * var(--u)); padding: calc(184 * var(--u)) calc(29 * var(--u)) 0 0; }
html.rtl #wrapper .su-stat--power { left: auto; right: 0; }
html.rtl #wrapper .su-stat--meters { left: auto; right: calc(498 * var(--u)); }
html.rtl #wrapper .su-stat--carbon { left: auto; right: calc(996 * var(--u)); padding-left: 0; padding-right: calc(115 * var(--u)); }
html.rtl #wrapper .su-stat__note { right: auto; left: calc(40 * var(--u)); text-align: left; }
@media (max-width: 1200px) {
  html.rtl #wrapper .su-stat,
  html.rtl #wrapper .su-stat--biofuel,
  html.rtl #wrapper .su-stat--carbon { padding: 24px; }
  html.rtl #wrapper .su-stat__note { text-align: right; }
}
html.rtl #wrapper .su-team__glow { left: auto; right: calc(50% - 872px); transform: scaleX(-1); }
html.rtl #wrapper .su-list { padding-left: 0; padding-right: 24px; }
@media (max-width: 600px) {
  html.rtl #wrapper .su-certs__head,
  html.rtl #wrapper .su-certs__note { text-align: right; }
}

/* ---------- Corporate bookings logo strip ---------- */
/* In RTL the track grows to the left, so it scrolls the other way. */
html.rtl #wrapper .cb-logos__track { animation-name: cb-marquee-rtl; }
@keyframes cb-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(calc(50% + 6px)); }
}

/* ---------- Partner headings / hero date: gold rules fade toward the text ----------
   In RTL the left and right rule images swap sides, so each is mirrored. */
html.rtl #wrapper .partners__rule.left-line,
html.rtl #wrapper .partners__rule.right-line,
html.rtl #wrapper .hero__date-rule.left-line,
html.rtl #wrapper .hero__date-rule.right-line { transform: scaleX(-1); }

/* ---------- Home "Inclusions" mosaic (desktop) ----------
   Arabic copy right-aligns into the panel's notch, under the gold button,
   so it was cut off. The whole mosaic is mirrored (panel, notch, tiles and
   button), then the text, photos/video and the button's ring text are
   flipped back so they read normally. "scale" rather than "transform" so it
   adds to, instead of replacing, any rotation/animation already there. */
@media (min-width: 1025px) {
  html.rtl #wrapper .inclusions__grid { scale: -1 1; }
  html.rtl #wrapper .inclusions__panel-content,
  html.rtl #wrapper .inclusions__tile > *,
  html.rtl #wrapper .inclusions__cta-ring { scale: -1 1; }
  /* Already pointing the RTL way thanks to the mirrored mosaic. */
  html.rtl #wrapper .inclusions__cta .inclusions__cta-arrow { transform: none; }
}

/* ---------- Liferay footer, desktop (≥1025px): mirror its side offsets ----------
   (≤1024px it is a centred column, which needs nothing.) */
@media (min-width: 1025px) {
  html.rtl #wrapper footer.site-footer .site-footer__legal { left: auto; right: 55px; }
  html.rtl #wrapper footer.site-footer .site-footer__links,
  html.rtl #wrapper footer.site-footer .site-footer__copyright { right: auto; left: 55px; }
  html.rtl #wrapper footer.site-footer .app-promo__stores { right: auto; left: 55px; }
}
@media (max-width: 1024px) {
  html.rtl #wrapper footer.site-footer .site-footer__legal,
  html.rtl #wrapper footer.site-footer .site-footer__links,
  html.rtl #wrapper footer.site-footer .site-footer__copyright { left: auto; right: auto; }
}

/* ---------- Ticket listing filter pill on tablets (same as phones) ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  html.rtl #wrapper .sticky-filter__action[data-view-toggle="location"] {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .3);
  }
}

/* ---------- Ticket card buttons ----------
   Buy sits on the left in RTL and Explore on the right, so each half gets
   the rounded ends on its outer side; Explore's glass outline (::after,
   radius inherit) follows the same shape. */
html.rtl #wrapper .ticket-card__explore { border-radius: 0 100px 100px 0; }
html.rtl #wrapper .ticket-card__buy { border-radius: 100px 0 0 100px; }

/* ---------- Inclusions (desktop): the museum photo is a cut-out shaped to
   fit around the gold button, so it stays mirrored with the mosaic instead
   of being flipped back like the other photos. ---------- */
@media (min-width: 1025px) {
  html.rtl #wrapper .inclusions__tile--museum > * { scale: none; }
}

/* ---------- Ticket card Explore button: mirror its glass outline too ----------
   The outline's bright part sat on the inner edge next to Buy, showing as a
   line in the middle of the CTA. Drawn in its English shape, then mirrored. */
html.rtl #wrapper .ticket-card__explore::after {
  border-radius: 100px 0 0 100px;
  transform: scaleX(-1);
}

/* ---------- Season Finale tagline ("From the first lap…"): Arabic mirror ----------
   English sits bottom-right, right-aligned; Arabic sits bottom-left,
   left-aligned. (Older Liferay rules pin it right, one with !important.) */
html.rtl #wrapper .season-finale .season-finale__inner .season-finale__tagline { text-align: left; }
@media (min-width: 921px) {
  html.rtl #wrapper .season-finale .season-finale__inner .season-finale__tagline { right: auto; left: 60px; }
}
@media (min-width: 601px) and (max-width: 920px) {
  html.rtl #wrapper .season-finale .season-finale__inner .season-finale__tagline { right: auto !important; left: 25px; }
}