/*
 * The redesigned home page (behind SiteSetting::websiteHomeV2Enabled()).
 * Values follow the approved mockup (docs/mockups/home-redesign/build.py);
 * every class is the mockup's with an `hv-` prefix, every rule is scoped under
 * .home-v2, .hv-tick or body.home-v2-body.has-hero, and colours come from site.css's
 * tokens (the mockup's --b700 is --blue-700 and so on). Loaded only by
 * site.home-v2, so nothing here reaches any other page.
 *
 * Motion lives in the prefers-reduced-motion: no-preference blocks only.
 */

/* ============================ TOKENS ================================== */
.home-v2 {
  --home-ease: cubic-bezier(.2, .7, .2, 1);
  /* Form letters: the same in both themes, as site-mc.css's --win/--draw/--loss. */
  --home-win: #4F7E6F;
  --home-draw: #94A2B4;
  --home-loss: #B3261E;
  /* Blue-700 text, icons and bars on theme-following surfaces: lifted to the
     site's dark accent in dark mode, where #1E427A vanishes on --bg. */
  --hv-ink: var(--blue-700);
}
[data-theme="dark"] .home-v2 { --hv-ink: var(--accent); }

/* ============================ LAYOUT ================================== */
.home-v2 .hv-wrap { max-width: 1360px; margin-inline: auto; padding-inline: 40px; width: 100%; position: relative; }
.home-v2 .tnum { font-variant-numeric: tabular-nums; }

.home-v2 .hv-sec { padding-block: 96px; position: relative; overflow: hidden; }
.home-v2 .hv-sec__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px; position: relative;
}
.home-v2 .hv-sec__head > div:not(.hv-tabs) { display: flex; flex-direction: column; gap: 14px; }

/* ============================ TYPE ==================================== */
.home-v2 .hv-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hv-ink);
}
.home-v2 .hv-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--hv-ink); border-radius: 2px; }
.home-v2 .hv-h2 { font-size: 44px; line-height: 1.02; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.home-v2 .hv-sub { color: var(--text-muted); font-size: 17px; max-width: 56ch; }

/* The outlined word behind a section heading. */
.home-v2 .hv-ghost {
  position: absolute; inset-inline-start: -8px; top: -30px;
  font-size: 220px; line-height: 1; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(30, 66, 122, .16);
  pointer-events: none; user-select: none; white-space: nowrap;
}
[data-theme="dark"] .home-v2 .hv-ghost { -webkit-text-stroke-color: rgba(106, 147, 201, .18); }

/* ============================ BUTTONS & LINKS ========================= */
.home-v2 .hv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.home-v2 .hv-btn--primary,
.home-v2 .hv-btn--primary:hover { background: var(--blue-700); color: var(--on-primary); box-shadow: 0 10px 24px rgba(30, 66, 122, .28); }
/* On navy: translucent white. */
.home-v2 .hv-btn--ghost,
.home-v2 .hv-btn--ghost:hover {
  background: rgba(255, 255, 255, .08); color: var(--on-hero);
  border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px);
}
/* On navy: white stays white in both themes. */
.home-v2 .hv-btn--white,
.home-v2 .hv-btn--white:hover { background: #fff; color: var(--blue-900); }

.home-v2 .hv-more,
.home-v2 .hv-more:hover {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--hv-ink);
  border-bottom: 2px solid var(--blue-100); padding-bottom: 2px;
}

.home-v2 .hv-pill {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.home-v2 .hv-pill--gold { background: var(--gold); color: var(--blue-900); }
.home-v2 .hv-pill--soft { background: var(--surface-2); color: var(--hv-ink); }

.home-v2 .hv-arrow { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .home-v2 .hv-arrow { transform: scaleX(-1); }

/* ============================ CREST DISC ============================== */
/* site.mc.partials.disc on this page (site-mc.css scopes its copy to .mc):
   a white disc, the partial sets size, ring and image size inline. */
.home-v2 .disc {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; background: #fff; overflow: hidden;
}
.home-v2 .disc img { display: block; object-fit: contain; width: auto; }
.home-v2 .disc__ini { font-weight: 700; color: var(--blue-900); letter-spacing: .3px; line-height: 1; }

/* ============================ NEXT-MATCH BAND ========================= */
/* The club's next match (countdown) or the one in play (S6 live hooks), on
   navy under the hero; with neither, the no-match copy (__text). */
.home-v2 .hv-next { background: var(--blue-800); color: var(--on-hero); position: relative; overflow: hidden; }
/* The fanar line pattern; the image itself comes from the partial (asset()). */
.home-v2 .hv-next__pat {
  position: absolute; inset: 0; pointer-events: none;
  background-position: 110% 50%; background-size: 720px; background-repeat: no-repeat; opacity: .35;
}
[dir="rtl"] .home-v2 .hv-next__pat { background-position: -10% 50%; transform: scaleX(-1); }
.home-v2 .hv-next__in {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px; align-items: center; padding-block: 56px;
}
.home-v2 .hv-next__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.home-v2 .hv-next__title { color: #fff; }
.home-v2 .hv-next__sub { color: var(--on-hero-muted); font-size: 17px; max-width: 56ch; }

.home-v2 .hv-next__tag { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-v2 .hv-next__comp { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-hero-muted); }
.home-v2 .hv-pill--live { background: var(--live); color: #fff; }
/* The band's live pill carries .meta__live, the hook lscLive hides at full
   time with `hidden`; the pill's own inline-flex would outrank the UA rule. */
.home-v2 .hv-pill[hidden] { display: none; }
.home-v2 .hv-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.home-v2 .hv-next__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 22px; }
.home-v2 .hv-next__team { display: flex; align-items: center; gap: 18px; min-width: 0; }
.home-v2 .hv-next__team:last-child { flex-direction: row-reverse; text-align: end; }
.home-v2 .hv-next__team > div { min-width: 0; }
.home-v2 .hv-next__nm {
  display: block; font-size: 40px; font-weight: 700; letter-spacing: -.025em; line-height: 1;
  text-transform: uppercase; color: #fff; overflow-wrap: anywhere;
}
.home-v2 .hv-next__hv { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-hero-muted); }
.home-v2 .hv-next__vs { font-size: 40px; font-weight: 300; color: var(--gold); letter-spacing: .1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-v2 .hv-next__vs .sc { display: inline-flex; align-items: baseline; gap: .25em; font-weight: 700; color: #fff; letter-spacing: 0; }
.home-v2 .hv-next__vs .sc i { font-style: normal; font-weight: 300; color: var(--gold); }

.home-v2 .hv-next__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; font-size: 15px; color: var(--on-hero-muted); }
.home-v2 .hv-next__meta b { font-size: 22px; font-weight: 700; color: #fff; }
.home-v2 .hv-next__meta > i { width: 4px; height: 4px; border-radius: 50%; background: var(--on-hero-muted); opacity: .6; }
.home-v2 .hv-next__meta .clock { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; color: #fff; }
.home-v2 .hv-next__meta .clock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }

.home-v2 .hv-next__side { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
.home-v2 .hv-next__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* The countdown, drawn server-side; site-home.js ticks [data-u]. */
.home-v2 .hv-count { display: flex; gap: 12px; }
.home-v2 .hv-count div {
  min-width: 96px; padding: 16px 14px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px);
}
.home-v2 .hv-count b { display: block; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; }
.home-v2 .hv-count span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-hero-muted); }

/* ============================ STAT STRIP ============================== */
/* Lifted over the band's foot. The cells are only those with data, so the
   columns are implicit: equal, the league cell (first when present) 1.2fr. */
.home-v2 .hv-strip { position: relative; z-index: 4; margin-top: -36px; }
.home-v2 .hv-strip__in {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-hero); overflow: hidden;
}
.home-v2 .hv-strip__in.has-league { grid-template-columns: minmax(0, 1.2fr); }
.home-v2 .hv-strip__cell {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 26px 30px; border-inline-start: 1px solid var(--border);
}
.home-v2 .hv-strip__cell:first-child {
  border-inline-start: 0; color: #fff;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
}
.home-v2 .hv-strip__lab { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.home-v2 .hv-strip__cap { margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--text-muted); }
.home-v2 .hv-strip__val {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--text);
}
.home-v2 .hv-strip__val small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.home-v2 .hv-strip__sc { display: inline-flex; align-items: baseline; gap: .25em; }
.home-v2 .hv-strip__sc i { font-style: normal; }
.home-v2 .hv-strip__lnk,
.home-v2 .hv-strip__lnk:hover { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--hv-ink); }
.home-v2 .hv-strip__lnk .hv-arrow { width: 16px; height: 16px; }
.home-v2 .hv-strip__cell:first-child .hv-strip__lab,
.home-v2 .hv-strip__cell:first-child .hv-strip__cap,
.home-v2 .hv-strip__cell:first-child .hv-strip__val small { color: var(--on-hero-muted); }
.home-v2 .hv-strip__cell:first-child .hv-strip__val { color: #fff; }
.home-v2 .hv-strip__cell:first-child .hv-strip__lnk { color: var(--gold); }

/* Form letters, oldest first: the same colours in both themes. */
.home-v2 .hv-form { display: flex; gap: 6px; margin-top: 6px; }
.home-v2 .hv-form i {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; font-weight: 700; color: #fff;
}
.home-v2 .hv-form__w { background: var(--home-win); }
.home-v2 .hv-form__d { background: var(--home-draw); }
.home-v2 .hv-form__l { background: var(--home-loss); }

/* ============================ HERO ZOOM SLIDER ======================== */
/* Crossfading slides under a navy overlay, the content set from the bottom
   so it clears the overlaid masthead. The first slide is drawn without JS;
   site-home.js (Task 17) moves is-active / is-visible / is-on. Ken Burns,
   the content slide-in and the progress bar run under MOTION below. */
.home-v2 .hv-hero {
  position: relative; height: 820px; overflow: hidden; isolation: isolate;
  background: var(--blue-900); color: var(--on-hero);
}
.home-v2 .hv-zs { position: absolute; inset: 0; z-index: 0; }
.home-v2 .hv-zs__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1);
}
.home-v2 .hv-zs__slide.is-active { opacity: 1; visibility: visible; }
.home-v2 .hv-zs__img,
.home-v2 .hv-zs__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.home-v2 .hv-zs__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(14, 37, 71, .88) 0%, rgba(14, 37, 71, .55) 55%, rgba(14, 37, 71, .25) 100%),
    linear-gradient(180deg, rgba(14, 37, 71, .5), rgba(14, 37, 71, 0) 30%, rgba(14, 37, 71, .85) 100%);
}
[dir="rtl"] .home-v2 .hv-zs__overlay {
  background:
    linear-gradient(270deg, rgba(14, 37, 71, .88) 0%, rgba(14, 37, 71, .55) 55%, rgba(14, 37, 71, .25) 100%),
    linear-gradient(180deg, rgba(14, 37, 71, .5), rgba(14, 37, 71, 0) 30%, rgba(14, 37, 71, .85) 100%);
}
/* The image itself comes from the partial (asset()); size and blend here. */
.home-v2 .hv-zs__pattern {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-position: center; background-size: 900px; background-repeat: repeat;
  opacity: .1; mix-blend-mode: screen;
}
.home-v2 .hv-hero__in { z-index: 2; height: 100%; }
.home-v2 .hv-zs__content {
  position: absolute; inset-inline: 40px; bottom: 96px; max-width: 900px;
  opacity: 0; visibility: hidden; transform: translateY(-10%); pointer-events: none;
}
.home-v2 .hv-zs__content.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.home-v2 .hv-zs__kick {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 6px 14px 6px 8px;
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.home-v2 .hv-zs__kick b {
  background: var(--gold); color: var(--blue-900); border-radius: 999px; padding: 4px 10px; letter-spacing: .08em;
}
.home-v2 .hv-zs__kick.is-video b { background: #fff; }
.home-v2 .hv-zs__title {
  margin-top: 24px; max-width: 14ch; color: var(--on-hero);
  font-size: 88px; line-height: .94; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase;
  text-wrap: balance;
}
.home-v2 .hv-zs__title em { font-style: italic; color: var(--teal); font-weight: 500; }
.home-v2 .hv-zs__meta {
  display: flex; gap: 16px; align-items: center; margin-top: 22px;
  color: var(--on-hero-muted); font-size: 15px;
}
.home-v2 .hv-zs__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.home-v2 .hv-zs__play,
.home-v2 .hv-zs__play:hover { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: #fff; }
.home-v2 .hv-zs__play i {
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.home-v2 .hv-zs__play svg { width: 18px; height: 18px; fill: var(--blue-700); margin-inline-start: 3px; }
/* Under the overlaid masthead (40 ticker + 88 header in the mockup's frame). */
.home-v2 .hv-zs__bullets {
  position: absolute; top: 150px; inset-inline-end: 40px; z-index: 3; display: flex; gap: 6px;
}
.home-v2 .hv-zs__bullet {
  width: 44px; height: 44px; border-radius: 12px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--on-hero-muted);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(14, 37, 71, .4); backdrop-filter: blur(8px);
}
.home-v2 .hv-zs__bullet.is-on { background: #fff; color: var(--blue-900); border-color: #fff; }
.home-v2 .hv-zs__progress {
  position: absolute; inset-inline: 0; bottom: 0; height: 3px; z-index: 3;
  background: rgba(255, 255, 255, .12);
}
.home-v2 .hv-zs__progress i { display: block; height: 100%; width: 0; background: var(--gold); }
.home-v2 .hv-zs__count {
  position: absolute; bottom: 40px; inset-inline-end: 40px; z-index: 3;
  font-size: 13px; letter-spacing: .2em; color: var(--on-hero-muted);
}
.home-v2 .hv-zs__count b { color: #fff; font-size: 22px; letter-spacing: 0; }

/* ============================ TICKER ================================== */
/* Above the masthead, so outside .home-v2: scoped under .hv-tick. Navy in
   both themes. The loop runs only under no-preference (MOTION below). */
.hv-tick {
  background: var(--blue-900); color: var(--on-hero-muted); font-size: 13px; height: 40px;
  display: flex; align-items: center; overflow: hidden; position: relative;
}
.hv-tick .hv-tick__lab {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding-inline: 40px 18px;
  background: var(--blue-900); color: var(--gold);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.hv-tick .hv-tick__lab::after {
  content: ""; position: absolute; inset-inline-end: -24px; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, var(--blue-900), transparent);
}
[dir="rtl"] .hv-tick .hv-tick__lab::after { background: linear-gradient(270deg, var(--blue-900), transparent); }
.hv-tick .hv-tick__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(207, 177, 111, .18);
}
.hv-tick .hv-tick__track { display: flex; width: max-content; padding-inline-start: 220px; }
.hv-tick .hv-tick__set { display: flex; }
.hv-tick .hv-tick__item,
.hv-tick .hv-tick__item:hover {
  display: inline-flex; align-items: center; gap: 12px; padding-inline: 28px;
  white-space: nowrap; color: inherit;
}
.hv-tick a.hv-tick__item:hover { color: #fff; }
.hv-tick .hv-tick__item b {
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1);
}
.hv-tick .hv-tick__item i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-400); }
[dir="rtl"] .hv-tick .hv-tick__lab,
[dir="rtl"] .hv-tick .hv-tick__item b { letter-spacing: 0; text-transform: none; }
/* While the club's match is in play the dot turns live red (site-home.js
   moves the class with the band's poll). */
.hv-tick .hv-tick__lab.is-live .hv-tick__dot { background: var(--live); box-shadow: 0 0 0 4px rgba(211, 47, 47, .25); }
/* The pause button (WCAG 2.2.2) at the inline end, over a fade like the
   label's; it shows the pause bars while running, the play arrow while
   paused. Hidden until site-home.js wires it, and under reduced motion. */
.hv-tick .hv-tick__pause {
  position: absolute; inset-inline-end: 0; top: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; padding-inline: 10px 32px;
  border: 0; background: var(--blue-900); color: var(--on-hero-muted); cursor: pointer;
}
.hv-tick .hv-tick__pause[hidden] { display: none; }
.hv-tick .hv-tick__pause::before {
  content: ""; position: absolute; inset-inline-start: -24px; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(270deg, var(--blue-900), transparent); pointer-events: none;
}
[dir="rtl"] .hv-tick .hv-tick__pause::before { background: linear-gradient(90deg, var(--blue-900), transparent); }
.hv-tick .hv-tick__pause:hover { color: #fff; }
.hv-tick .hv-tick__pause:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
.hv-tick .hv-tick__ico {
  width: 28px; height: 28px; padding: 7px; border-radius: 50%; fill: currentColor;
  border: 1px solid rgba(255, 255, 255, .22);
}
.hv-tick .hv-tick__ico--play,
.hv-tick.is-paused .hv-tick__pause .hv-tick__ico--pause { display: none; }
.hv-tick.is-paused .hv-tick__pause .hv-tick__ico--play { display: block; }

/* ============================ MASTHEAD OVERLAY ======================== */
/* The layout's own header, markup and behaviour unchanged, drawn as the
   mockup's transparent nav over the hero (under the ticker). Only while the
   hero renders (`has-hero` on the body, pushed by site.home-v2); without a
   slide the band leads under the ordinary header. Navy hero in both themes,
   so these rules have no dark variant. */
body.home-v2-body.has-hero .masthead {
  position: absolute; inset-inline: 0; top: 0; z-index: 5;
  background: transparent; border: 0; color: var(--on-hero);
}
/* Under the ticker when there is one; flush with the top when not. */
body.home-v2-body.has-hero .hv-tick + .masthead { top: 40px; }
body.home-v2-body.has-hero .masthead__inner {
  max-width: 1360px; padding: 0 40px; height: 88px; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
body.home-v2-body.has-hero .brand { padding: 0; }
body.home-v2-body.has-hero .brand__logo { height: 48px; width: auto; filter: brightness(0) invert(1); }
body.home-v2-body.has-hero .nav { gap: 30px; flex-wrap: nowrap; }
body.home-v2-body.has-hero .nav__link,
body.home-v2-body.has-hero .nav__link:hover,
body.home-v2-body.has-hero .nav__link.is-active {
  position: relative; padding: 6px 0; border: 0;
  font-size: 15px; font-weight: 500; letter-spacing: normal; color: var(--on-hero);
}
body.home-v2-body.has-hero .nav__link.is-active::after,
body.home-v2-body.has-hero .nav__link:hover::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px;
  height: 2px; background: var(--gold); border-radius: 2px;
}
body.home-v2-body.has-hero .masthead__actions { gap: 14px; }
body.home-v2-body.has-hero .pillbtn,
body.home-v2-body.has-hero .nav__toggle {
  height: 44px; min-width: 44px; width: auto; padding-inline: 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  color: var(--on-hero); font-size: 14px; font-weight: 600;
}
body.home-v2-body.has-hero .pillbtn:hover,
body.home-v2-body.has-hero .nav__toggle:hover {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .36); color: #fff;
}
body.home-v2-body.has-hero .pillbtn .i,
body.home-v2-body.has-hero .nav__toggle .i { width: 20px; height: 20px; }

/* Laptops: nine links and the toggles stop fitting at the mockup's spacing. */
@media (max-width: 1180px) {
  body.home-v2-body.has-hero .masthead__inner { gap: 16px; }
  body.home-v2-body.has-hero .nav { gap: 18px; }
  body.home-v2-body.has-hero .nav__link { font-size: 14.5px; }
  /* site.css drops the language pill to its flag here; the mockup keeps
     its label until the phone header (760). */
  body.home-v2-body.has-hero .pillbtn__label { display: inline; }
}
/* site.css collapses the nav behind the burger here; the open nav becomes the
   mockup's navy panel under the header instead of a row inside it. */
@media (max-width: 820px) {
  body.home-v2-body.has-hero .nav.is-open {
    position: absolute; top: 72px; inset-inline: 18px; z-index: 1;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 16px; background: var(--blue-900); border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  }
  body.home-v2-body.has-hero .nav__link,
  body.home-v2-body.has-hero .nav__link:hover,
  body.home-v2-body.has-hero .nav__link.is-active { padding: 12px; }
  body.home-v2-body.has-hero .nav__link + .nav__link { border-top: 1px solid rgba(255, 255, 255, .1); }
  body.home-v2-body.has-hero .nav__link.is-active { color: var(--gold); }
  body.home-v2-body.has-hero .nav__link.is-active::after,
  body.home-v2-body.has-hero .nav__link:hover::after { content: none; }
}

/* ============================ NEWSROOM ================================ */
/* The featured story large, the next ones listed beside it. */
.home-v2 .hv-news { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; }
.home-v2 .hv-feat,
.home-v2 .hv-feat:hover {
  position: relative; border-radius: 26px; overflow: hidden; min-height: 620px;
  display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-hero);
}
.home-v2 .hv-feat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-v2 .hv-feat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 37, 71, 0) 30%, rgba(14, 37, 71, .55) 65%, rgba(14, 37, 71, .96) 100%);
}
/* No image: navy with the fanar fill (the image itself comes from the partial). */
.home-v2 .hv-feat--plain { background: var(--blue-800); }
/* The only story: no list beside it, so it takes the whole row. */
.home-v2 .hv-feat--solo { grid-column: 1 / -1; }
.home-v2 .hv-feat__pat {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.home-v2 .hv-feat__body { position: relative; z-index: 1; padding: 40px; display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.home-v2 .hv-feat h3 { font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; color: #fff; }
.home-v2 .hv-feat p { color: var(--on-hero-muted); font-size: 16px; max-width: 58ch; }
.home-v2 .hv-feat__date { font-size: 13px; color: var(--on-hero-muted); letter-spacing: .08em; text-transform: uppercase; }
/* On navy: white stays white in both themes. */
.home-v2 .hv-feat .hv-more { align-self: flex-start; color: #fff; border-color: rgba(255, 255, 255, .3); }

.home-v2 .hv-nlist {
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: 26px; box-shadow: var(--shadow-raised); padding: 10px 28px;
}
.home-v2 .hv-nitem,
.home-v2 .hv-nitem:hover {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--border); color: var(--text);
}
.home-v2 .hv-nitem:first-child { border-top: 0; }
/* A story with no image: its text takes the whole row. */
.home-v2 .hv-nitem > div:only-child { grid-column: 1 / -1; }
.home-v2 .hv-nitem img { width: 120px; height: 90px; object-fit: cover; border-radius: 14px; }
.home-v2 .hv-nitem .d {
  font-size: 12px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase;
  display: flex; gap: 10px; align-items: center;
}
.home-v2 .hv-nitem .d b { color: var(--hv-ink); letter-spacing: .1em; }
.home-v2 .hv-nitem h4 { font-size: 19px; line-height: 1.25; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.home-v2 .hv-nlist .hv-more { align-self: flex-start; margin: 8px 0 18px; }

/* ============================ MATCHDAY ================================ */
/* Results and fixtures as kit-tinted cards on navy (Results open; site-home.js
   switches the panels), the compact lead table beside them. */
.home-v2 .hv-matchday { background: var(--blue-900); color: var(--on-hero); }
.home-v2 .hv-matchday .hv-ghost { -webkit-text-stroke-color: rgba(255, 255, 255, .1); }
.home-v2 .hv-matchday .hv-eyebrow { color: var(--gold); }
.home-v2 .hv-matchday .hv-eyebrow::before { background: var(--gold); }
.home-v2 .hv-matchday .hv-h2 { color: var(--on-hero); }
.home-v2 .hv-matchday .hv-sub { color: var(--on-hero-muted); }
.home-v2 .hv-md { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.home-v2 .hv-md > div { min-width: 0; }

.home-v2 .hv-tabs {
  display: inline-flex; flex: none; white-space: nowrap; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
}
.home-v2 .hv-tabs button {
  padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--on-hero-muted);
}
/* On navy: white stays white in both themes. */
.home-v2 .hv-tabs button.is-on { background: #fff; color: var(--blue-900); }
.home-v2.js [data-home-panel]:not(.is-active) { display: none; }
/* Without the script the tabs would do nothing: both panels show instead. */
.home-v2:not(.js) .hv-tabs { display: none; }
.home-v2 .hv-panel__lab { margin-bottom: 14px; }
.home-v2 .hv-panel + .hv-panel .hv-panel__lab { margin-top: 28px; }
.home-v2.js .hv-panel + .hv-panel .hv-panel__lab { margin-top: 0; }

.home-v2 .hv-mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Each side's kit tints its half (--h, --a from the partial); the plain
   translucent fill first, for a browser without color-mix(). */
.home-v2 .hv-mcard {
  --h: var(--blue-700); --a: var(--blue-700);
  position: relative; border-radius: 22px; padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12); font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .05);
  background:
    radial-gradient(260px 220px at 0% 55%, color-mix(in srgb, var(--h) 60%, transparent), transparent 72%),
    radial-gradient(260px 220px at 100% 55%, color-mix(in srgb, var(--a) 60%, transparent), transparent 72%),
    rgba(255, 255, 255, .05);
}
/* In RTL the home side sits on the right: its tint follows it. */
[dir="rtl"] .home-v2 .hv-mcard {
  background:
    radial-gradient(260px 220px at 100% 55%, color-mix(in srgb, var(--h) 60%, transparent), transparent 72%),
    radial-gradient(260px 220px at 0% 55%, color-mix(in srgb, var(--a) 60%, transparent), transparent 72%),
    rgba(255, 255, 255, .05);
}
.home-v2 .hv-mcard,
.home-v2 .hv-mcard:hover { color: var(--on-hero); }
.home-v2 .hv-mcard::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--h) 0 50%, var(--a) 50% 100%);
}
[dir="rtl"] .home-v2 .hv-mcard::before { background: linear-gradient(270deg, var(--h) 0 50%, var(--a) 50% 100%); }
.home-v2 .hv-mcard--next { border-color: rgba(207, 177, 111, .6); box-shadow: 0 0 0 1px rgba(207, 177, 111, .3), 0 20px 50px rgba(0, 0, 0, .3); }
.home-v2 .hv-mcard .rnd {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-hero-muted); font-weight: 700;
}
/* Clear of the result badge in the corner. */
.home-v2 .hv-mcard__res ~ .rnd { padding-inline-end: 36px; }
.home-v2 .hv-mcard .rnd b { color: var(--gold); }
.home-v2 .hv-mcard .teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.home-v2 .hv-mcard .side {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0;
  text-align: center; font-size: 14px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere;
}
.home-v2 .hv-mcard .sc { display: flex; gap: 6px; align-items: center; font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.home-v2 .hv-mcard .sc i { font-style: normal; font-size: 22px; font-weight: 400; color: var(--on-hero-muted); }
.home-v2 .hv-mcard .ko { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; text-align: center; white-space: nowrap; }
.home-v2 .hv-mcard .ko small {
  display: block; margin-top: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.home-v2 .hv-mcard .venue { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 13px; color: var(--on-hero-muted); }
.home-v2 .hv-mcard .venue svg { width: 14px; height: 14px; flex: none; }
.home-v2 .hv-mcard__res {
  position: absolute; top: 18px; inset-inline-end: 18px; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
}
.home-v2 .hv-res--w { background: var(--home-win); }
.home-v2 .hv-res--d { background: var(--home-draw); color: #0F1E33; }
.home-v2 .hv-res--l { background: var(--home-loss); }

.home-v2 .hv-mfoot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  margin-top: 20px; color: var(--on-hero-muted); font-size: 14px;
}
/* On navy: white stays white in both themes. */
.home-v2 .hv-mfoot .hv-more,
.home-v2 .hv-mfoot .hv-more:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

.home-v2 .hv-table { background: var(--surface); color: var(--text); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-hero); }
.home-v2 .hv-table__head { padding: 22px 24px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.home-v2 .hv-table__head h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.home-v2 .hv-table__head span { font-size: 12px; color: var(--text-muted); text-align: end; }
.home-v2 .hv-trow { display: grid; grid-template-columns: 28px 30px 1fr repeat(5, 36px) 44px; align-items: center; gap: 8px; padding: 11px 24px; font-size: 14px; border-top: 1px solid var(--border); }
.home-v2 .hv-trow--h { border-top: 0; color: var(--text-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding-block: 8px; }
.home-v2 .hv-trow .n { color: var(--text-muted); font-weight: 700; }
.home-v2 .hv-trow .c { text-align: center; color: var(--text-muted); }
.home-v2 .hv-trow .pts { text-align: end; font-weight: 700; font-size: 16px; }
.home-v2 .hv-trow .nm { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-v2 .hv-trow .nm i { width: 4px; height: 18px; border-radius: 2px; background: var(--c); flex: none; }
.home-v2 .hv-trow--gap { display: flex; justify-content: center; color: var(--text-muted); letter-spacing: .3em; padding-block: 4px; }
.home-v2 .hv-trow--us { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--hv-ink); }
[dir="rtl"] .home-v2 .hv-trow--us { box-shadow: inset -3px 0 0 var(--hv-ink); }
.home-v2 .hv-trow--us .n { color: var(--hv-ink); }
.home-v2 .hv-table__foot {
  padding: 14px 24px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border);
}
.home-v2 .hv-table__foot .hv-more { font-size: 14px; }
.home-v2 .hv-zone { display: inline-flex; gap: 8px; align-items: center; }
.home-v2 .hv-zone i { width: 10px; height: 10px; border-radius: 3px; background: var(--hv-ink); flex: none; }

/* ============================ LUSAIL TV =============================== */
/* The latest video large, the next ones stacked beside it, on navy posters. */
.home-v2 .hv-ghost--fill { -webkit-text-stroke: 0; color: rgba(30, 66, 122, .05); }
[data-theme="dark"] .home-v2 .hv-ghost--fill { color: rgba(106, 147, 201, .06); }
.home-v2 .hv-tv { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; }
/* The only video: nothing beside it, so it takes the whole row. */
.home-v2 .hv-vid--big:only-child { grid-column: 1 / -1; }
.home-v2 .hv-tv__side { display: grid; gap: 22px; }
.home-v2 .hv-vid,
.home-v2 .hv-vid:hover {
  position: relative; border-radius: 24px; overflow: hidden; background: var(--blue-900); color: #fff;
  display: flex; align-items: flex-end; box-shadow: var(--shadow-raised);
}
.home-v2 .hv-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.home-v2 .hv-vid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 37, 71, .05), rgba(14, 37, 71, .9));
}
.home-v2 .hv-vid--big { min-height: 560px; }
.home-v2 .hv-vid--sm { min-height: 268px; }
.home-v2 .hv-vid__body { position: relative; z-index: 1; padding: 28px; display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* On navy: white stays white in both themes. */
.home-v2 .hv-vid__play {
  position: absolute; top: 24px; inset-inline-start: 24px; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; padding-inline: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* No duration: the disc alone. */
.home-v2 .hv-vid__play--bare { padding-inline-end: 6px; }
.home-v2 .hv-vid__play i { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
/* The triangle is not mirrored in RTL, so its optical nudge stays on the left. */
.home-v2 .hv-vid__play svg { width: 12px; height: 12px; fill: var(--blue-700); margin-left: 2px; }
.home-v2 .hv-vid h3 { font-size: 30px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.home-v2 .hv-vid--sm h3 { font-size: 20px; }
.home-v2 .hv-vid .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }

/* ============================ GALLERY ================================= */
/* Up to seven photos in the mockup's mosaic (spans by tile, dense packing). */
.home-v2 [data-home-section="tv"] + [data-home-section="gallery"] { padding-top: 0; }
.home-v2 .hv-gal { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 16px; grid-auto-flow: dense; }
.home-v2 .hv-gal a { position: relative; border-radius: 20px; overflow: hidden; display: block; background: var(--surface-2); }
.home-v2 .hv-gal figure { margin: 0; height: 100%; }
.home-v2 .hv-gal img { width: 100%; height: 100%; object-fit: cover; }
.home-v2 .hv-gal figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 16px 18px;
  background: linear-gradient(180deg, transparent, rgba(14, 37, 71, .85));
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3;
}
.home-v2 .hv-gal .hv-g1 { grid-column: span 5; grid-row: span 2; }
.home-v2 .hv-gal .hv-g2 { grid-column: span 4; }
.home-v2 .hv-gal .hv-g3 { grid-column: span 3; }
.home-v2 .hv-gal .hv-g4 { grid-column: span 3; }
.home-v2 .hv-gal .hv-g5 { grid-column: span 4; }
.home-v2 .hv-gal .hv-g6 { grid-column: span 7; }
.home-v2 .hv-gal .hv-g7 { grid-column: span 5; }

/* ============================ FIRST TEAM ============================== */
/* The squad coverflow: the centred player large, the neighbours scaled
   back to either side (--d, from HomeSections::coverflowSlot()); the
   details under it. Too few photos: the legacy player-card grid. */
.home-v2 .hv-squad { background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%); }
.home-v2 .hv-squad__fanar {
  position: absolute; inset-inline-end: -120px; top: -60px; width: 620px; height: 620px;
  background: center / contain no-repeat; opacity: .5; pointer-events: none;
}
.home-v2 .hv-squad .hv-sec__head { margin-bottom: 12px; }
.home-v2 .hv-cf { position: relative; height: 620px; }
.home-v2 .hv-cf__item {
  position: absolute; left: 50%; top: 0; width: 400px; height: 600px; margin-left: -200px;
  transform-origin: 50% 100%; cursor: pointer; will-change: transform;
}
.home-v2 .hv-cf__item img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px 28px 0 0;
  filter: drop-shadow(0 30px 40px rgba(14, 37, 71, .25));
}
.home-v2 .hv-cf__item .num {
  position: absolute; top: -10px; inset-inline-start: -20px; z-index: 2;
  font-size: 180px; line-height: 1; font-weight: 700; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(30, 66, 122, .25);
  pointer-events: none; opacity: 0;
}
[data-theme="dark"] .home-v2 .hv-cf__item .num { -webkit-text-stroke-color: rgba(106, 147, 201, .3); }
.home-v2 .hv-cf__item.is-active .num { opacity: 1; }
.home-v2 .hv-cf__item.is-active { transform: translateX(0) scale(1.1); z-index: 10; filter: none; }
.home-v2 .hv-cf__item.off-1 { transform: translateX(calc(var(--d) * 340px)) scale(.86); z-index: 8; filter: saturate(.8) brightness(.95); }
.home-v2 .hv-cf__item.off-2 { transform: translateX(calc(var(--d) * 600px)) scale(.66); z-index: 6; filter: saturate(.6) brightness(.9); }
.home-v2 .hv-cf__item.off-3 { transform: translateX(calc(var(--d) * 800px)) scale(.5); z-index: 4; opacity: 0; filter: saturate(.4) brightness(.85); }
.home-v2 .hv-cf__item.off-far { transform: translateX(calc(var(--d) * 980px)) scale(.4); z-index: 2; opacity: 0; }
.home-v2 .hv-cf__fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 140px; z-index: 11; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--surface-2));
}
.home-v2 .hv-cfd {
  position: relative; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; gap: 24px;
  max-width: 760px; margin: 18px auto 0; text-align: center;
}
.home-v2 .hv-cfd .ghostn {
  position: absolute; left: 50%; top: -50px; transform: translateX(-50%); z-index: 0;
  font-size: 220px; line-height: 1; font-weight: 700; letter-spacing: -.06em;
  color: rgba(30, 66, 122, .06); pointer-events: none;
}
[data-theme="dark"] .home-v2 .hv-cfd .ghostn { color: rgba(106, 147, 201, .08); }
.home-v2 .hv-cfd__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 150px; }
.home-v2 .hv-cfd__name { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; text-transform: uppercase; }
.home-v2 .hv-cfd__pos { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.home-v2 .hv-cfd__pos b { color: var(--hv-ink); }
.home-v2 .hv-cfd__no { white-space: nowrap; }
.home-v2 .hv-cfd .hv-btn { margin-top: 10px; }
.home-v2 .hv-cfa {
  position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-raised);
  display: inline-flex; align-items: center; justify-content: center; color: var(--hv-ink); cursor: pointer;
}
.home-v2 .hv-cfa svg { width: 24px; height: 24px; }
/* The arrows point the way the row runs. */
[dir="rtl"] .home-v2 .hv-cfa svg { transform: scaleX(-1); }

/* ============================ ABOUT =================================== */
.home-v2 .hv-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
/* No value cards: the text alone, one centred column. */
.home-v2 .hv-about--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.home-v2 .hv-about__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.home-v2 .hv-about__text .hv-h2,
.home-v2 .hv-about__text p,
.home-v2 .hv-about__text .hv-facts { align-self: stretch; }
.home-v2 .hv-about__text p { color: var(--text-muted); font-size: 17px; max-width: 60ch; }
.home-v2 .hv-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.home-v2 .hv-fact { padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.home-v2 .hv-fact b {
  display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
  color: var(--hv-ink); font-variant-numeric: tabular-nums;
}
.home-v2 .hv-fact span {
  display: block; margin-top: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.home-v2 .hv-values { display: grid; gap: 14px; }
.home-v2 .hv-val-card {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-raised);
}
.home-v2 .hv-val-card i {
  width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); color: var(--hv-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.home-v2 .hv-val-card i svg { width: 26px; height: 26px; }
.home-v2 .hv-val-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.home-v2 .hv-val-card p { color: var(--text-muted); font-size: 15px; }
.home-v2 .hv-about__img {
  position: relative; height: 380px; margin-top: 40px;
  border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-raised);
}
.home-v2 .hv-about__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.home-v2 .hv-about__img span {
  position: absolute; bottom: 16px; inset-inline-start: 16px;
  padding: 8px 12px; border-radius: 10px; background: rgba(14, 37, 71, .8); color: #fff;
  font-size: 13px; font-weight: 600; backdrop-filter: blur(6px);
}

/* ============================ SHOP ==================================== */
.home-v2 .hv-shop { background: var(--surface); }
.home-v2 .hv-shop__hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.home-v2 .hv-kit {
  position: relative; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-raised);
  padding: 26px; display: flex; flex-direction: column; gap: 16px;
}
.home-v2 .hv-kit,
.home-v2 .hv-kit:hover { color: var(--text); }
.home-v2 .hv-kit img { height: 300px; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
[data-theme="dark"] .home-v2 .hv-kit img,
[data-theme="dark"] .home-v2 .hv-acc img { mix-blend-mode: normal; }
/* No image: the name on a plain tile where the photo would be. */
.home-v2 .hv-kit--noimg {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  border-radius: 14px; background: var(--surface-2); color: var(--text-muted); font-weight: 700;
}
.home-v2 .hv-kit .hv-kit--noimg { height: 300px; font-size: 20px; }
.home-v2 .hv-kit__body { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.home-v2 .hv-kit__body b { font-size: 20px; letter-spacing: -.01em; display: block; }
.home-v2 .hv-kit__body > div > span { color: var(--text-muted); font-size: 13px; }
.home-v2 .hv-shop .price { font-size: 18px; font-weight: 700; color: var(--hv-ink); white-space: nowrap; }
.home-v2 .hv-acc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
/* Fewer than three featured: the accessory row sits right under the head. */
.home-v2 .hv-sec__head + .hv-acc { margin-top: 0; }
.home-v2 .hv-acc a {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center;
  background: var(--surface); border-radius: 20px; padding: 14px; border: 1px solid var(--border);
}
.home-v2 .hv-acc a,
.home-v2 .hv-acc a:hover { color: var(--text); }
.home-v2 .hv-acc a:hover { box-shadow: var(--shadow-raised); }
.home-v2 .hv-acc img,
.home-v2 .hv-acc .hv-kit--noimg { width: 96px; height: 96px; object-fit: contain; border-radius: 14px; background: var(--surface-2); }
.home-v2 .hv-acc img { mix-blend-mode: multiply; }
.home-v2 .hv-acc .hv-kit--noimg { padding: 8px; font-size: 12px; }
.home-v2 .hv-acc b { display: block; font-size: 15px; line-height: 1.2; }
.home-v2 .hv-acc .price { font-size: 15px; margin-top: 4px; display: block; }

/* ============================ MEMBER APP ============================== */
/* The app band on navy with the fanar fill, and a phone mock-up of the app
   (the image itself comes from the partial). White stays white on navy in
   both themes; the phone's screen follows the page's own surfaces. */
.home-v2 .hv-app {
  position: relative; overflow: hidden; border-radius: 32px;
  background: radial-gradient(900px 500px at 15% 10%, var(--blue-600) 0%, transparent 60%), linear-gradient(135deg, var(--blue-800), var(--blue-900));
  color: var(--on-hero); padding: 72px 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center;
  box-shadow: var(--shadow-hero);
}
.home-v2 .hv-app__pat {
  position: absolute; inset: 0; background: center / 700px repeat;
  opacity: .12; mix-blend-mode: screen; pointer-events: none;
}
.home-v2 .hv-app__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.home-v2 .hv-app__text .hv-eyebrow { color: var(--gold); }
.home-v2 .hv-app__text .hv-eyebrow::before { background: var(--gold); }
.home-v2 .hv-app__text .hv-h2 { color: #fff; font-size: 48px; }
.home-v2 .hv-app__text p { color: var(--on-hero-muted); font-size: 17px; max-width: 52ch; }
.home-v2 .hv-app__text .footer__badges { margin-top: 0; flex-wrap: wrap; }
.home-v2 .hv-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 4px 0 0; padding: 0; list-style: none; align-self: stretch; }
.home-v2 .hv-perks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #fff; }
.home-v2 .hv-perks li i {
  width: 24px; height: 24px; border-radius: 8px; flex: none; margin-top: 1px;
  background: rgba(207, 177, 111, .2); border: 1px solid rgba(207, 177, 111, .5); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
}
.home-v2 .hv-perks li i svg { width: 12px; height: 12px; stroke-width: 3; }
.home-v2 .hv-phone {
  position: relative; z-index: 1; justify-self: center; width: 300px; height: 600px;
  border-radius: 44px; background: #0B1B33; border: 8px solid #1A2B47; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.home-v2 .hv-phone::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 100px; height: 26px; border-radius: 14px; background: #0B1B33;
}
.home-v2 .hv-phone__scr {
  position: absolute; inset: 0; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; gap: 14px; padding: 54px 16px 16px; font-size: 12px;
}
.home-v2 .hv-mcardx {
  position: relative; overflow: hidden; border-radius: 20px; padding: 18px; min-height: 170px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900)); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
}
.home-v2 .hv-mcardx .pat { position: absolute; inset: 0; background: center / 300px repeat; opacity: .25; mix-blend-mode: screen; }
.home-v2 .hv-mcardx .t,
.home-v2 .hv-mcardx .b { position: relative; display: flex; justify-content: space-between; }
.home-v2 .hv-mcardx .t { align-items: center; }
.home-v2 .hv-mcardx .b { align-items: flex-end; }
.home-v2 .hv-mcardx .t img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.home-v2 .hv-mcardx .t span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.home-v2 .hv-mcardx .b b { display: block; font-size: 14px; }
.home-v2 .hv-qr {
  width: 54px; height: 54px; background: #fff; border-radius: 8px; padding: 5px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}
.home-v2 .hv-qr i { background: var(--blue-900); border-radius: 1px; }
.home-v2 .hv-qr i.o { background: transparent; }
.home-v2 .hv-ph__row {
  background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-raised);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.home-v2 .hv-ph__row > div { display: flex; flex-direction: column; min-width: 0; }
.home-v2 .hv-ph__row b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-v2 .hv-ph__row span { color: var(--text-muted); font-size: 11px; }
.home-v2 .hv-ph__row .chip {
  flex: none; background: var(--surface-2); color: var(--hv-ink);
  border-radius: 999px; padding: 4px 8px; font-weight: 700; font-size: 11px;
}
.home-v2 .hv-ph__nav {
  margin-top: auto; display: flex; justify-content: space-around;
  background: var(--surface); border-radius: 16px; padding: 10px; box-shadow: var(--shadow-raised);
}
.home-v2 .hv-ph__nav span { width: 28px; height: 4px; border-radius: 2px; background: var(--blue-100); }
.home-v2 .hv-ph__nav span.is-on { background: var(--hv-ink); }

/* ============================ PARTNERS ================================ */
/* The principal sponsor's card, then the rest in a ruled grid: a logo, else
   the name as a wordmark. Only a sponsor with a website is a link. */
.home-v2 .hv-partners { background: var(--surface); }
.home-v2 .hv-pmain { margin-bottom: 18px; }
.home-v2 .hv-pmain > * {
  border: 1px solid var(--border); border-radius: 22px; padding: 34px; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.home-v2 .hv-pmain img { max-height: 96px; max-width: 100%; object-fit: contain; }
.home-v2 .hv-pmain .wm { font-size: 34px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-900); line-height: 1.1; }
[data-theme="dark"] .home-v2 .hv-pmain .wm { color: var(--text); }
.home-v2 .hv-pmain small { display: block; font-size: 11px; letter-spacing: .3em; font-weight: 500; text-transform: uppercase; color: var(--text-muted); }
.home-v2 .hv-pframe { border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
/* Every cell rules its own end and bottom edge, and the grid runs 1px past
   the frame's end and bottom so the last column's and last row's rules fall
   outside and are clipped. Correct for any sponsor count, any column count
   and either direction; a short last row keeps the rule above it and its
   last cell's end rule. */
.home-v2 .hv-pgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-inline-end: -1px; margin-bottom: -1px;
}
.home-v2 .hv-pgrid > * {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 150px; padding: 24px; color: var(--blue-400);
  border-inline-end: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.home-v2 .hv-pgrid a:hover { color: var(--hv-ink); background: var(--bg); }
[data-theme="dark"] .home-v2 .hv-pgrid a:hover { color: var(--blue-300); }
.home-v2 .hv-pgrid img { max-height: 56px; max-width: 100%; object-fit: contain; }
/* Logos as one muted ink (the sponsors' artwork is white-on-transparent). */
.home-v2 .hv-pgrid img,
.home-v2 .hv-pmain img { filter: brightness(0); opacity: .78; }
[data-theme="dark"] .home-v2 .hv-pgrid img,
[data-theme="dark"] .home-v2 .hv-pmain img { filter: brightness(0) invert(1); opacity: .9; }
.home-v2 .hv-pgrid .wm { font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; text-align: center; overflow-wrap: anywhere; }
.home-v2 .hv-pgrid .tier { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; text-align: center; }

/* ============================ PHONE =================================== */
@media (max-width: 760px) {
  .home-v2 .hv-wrap { padding-inline: 16px; }
  .home-v2 .hv-sec { padding-block: 64px; }
  .home-v2 .hv-sec__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .home-v2 .hv-h2 { font-size: 34px; }
  .home-v2 .hv-ghost { font-size: 110px; top: -18px; }
  .home-v2 .hv-next__in { grid-template-columns: 1fr; gap: 28px; padding-block: 40px; }
  .home-v2 .hv-next__teams { gap: 12px; }
  .home-v2 .hv-next__team { flex-direction: column; align-items: flex-start; gap: 10px; }
  .home-v2 .hv-next__team:last-child { flex-direction: column; align-items: flex-end; }
  .home-v2 .hv-next__cr { width: 60px !important; height: 60px !important; }
  .home-v2 .hv-next__cr img { height: 44px !important; max-width: 48px !important; }
  .home-v2 .hv-next__nm { font-size: 24px; }
  .home-v2 .hv-next__vs { font-size: 26px; }
  .home-v2 .hv-next__side { align-items: stretch; }
  .home-v2 .hv-count { gap: 8px; }
  .home-v2 .hv-count div { flex: 1; min-width: 0; padding: 12px 6px; }
  .home-v2 .hv-count b { font-size: 30px; }
  .home-v2 .hv-next__cta { justify-content: flex-start; }

  /* Two columns, the first cell across both; a cell starting a row has no
     separator, a third row gets a rule above it. */
  .home-v2 .hv-strip { margin-top: 0; padding-top: 18px; }
  .home-v2 .hv-strip__in,
  .home-v2 .hv-strip__in.has-league { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-v2 .hv-strip__cell { padding: 18px; }
  .home-v2 .hv-strip__cell:first-child { grid-column: 1 / -1; }
  .home-v2 .hv-strip__cell:nth-child(2n) { border-inline-start: 0; }
  .home-v2 .hv-strip__cell:nth-child(n+4) { border-top: 1px solid var(--border); }
  .home-v2 .hv-strip__val { font-size: 26px; }

  .home-v2 .hv-hero { height: 640px; }
  .home-v2 .hv-zs__content { inset-inline: 16px; bottom: 60px; }
  .home-v2 .hv-zs__title { font-size: 44px; max-width: none; }
  .home-v2 .hv-zs__bullets { top: 120px; inset-inline-end: 18px; gap: 4px; }
  .home-v2 .hv-zs__bullet { width: 34px; height: 34px; border-radius: 9px; font-size: 11px; }
  .home-v2 .hv-zs__count { display: none; }

  .hv-tick .hv-tick__lab { padding-inline: 18px 12px; }
  .hv-tick .hv-tick__track { padding-inline-start: 130px; }
  .hv-tick .hv-tick__pause { padding-inline: 8px 12px; }

  .home-v2 .hv-news { grid-template-columns: 1fr; }
  .home-v2 .hv-feat { min-height: 460px; }
  .home-v2 .hv-feat__body { padding: 24px; }
  .home-v2 .hv-feat h3 { font-size: 26px; }
  .home-v2 .hv-nlist { padding: 4px 18px; }
  .home-v2 .hv-nitem { grid-template-columns: 90px 1fr; gap: 14px; padding: 16px 0; }
  .home-v2 .hv-nitem img { width: 90px; height: 72px; }
  .home-v2 .hv-nitem h4 { font-size: 16px; }

  .home-v2 .hv-md { grid-template-columns: 1fr; }
  .home-v2 .hv-mgrid {
    display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none;
  }
  .home-v2 .hv-mgrid::-webkit-scrollbar { display: none; }
  .home-v2 .hv-mcard { flex: 0 0 80%; scroll-snap-align: start; }
  .home-v2 .hv-table__head,
  .home-v2 .hv-table__foot { padding-inline: 16px; }
  .home-v2 .hv-trow { grid-template-columns: 22px 28px 1fr repeat(3, 28px) 36px; padding-inline: 16px; }
  .home-v2 .hv-trow .hide-p { display: none; }

  .home-v2 .hv-tv { grid-template-columns: 1fr; }
  .home-v2 .hv-tv__side { grid-template-columns: 1fr 1fr; }
  .home-v2 .hv-vid--big { min-height: 380px; }
  .home-v2 .hv-vid--sm { min-height: 220px; }
  .home-v2 .hv-vid h3 { font-size: 24px; }
  .home-v2 .hv-vid--sm h3 { font-size: 15px; }
  .home-v2 .hv-vid--sm .hv-vid__body { padding: 16px; }

  .home-v2 .hv-gal { grid-auto-rows: 120px; gap: 10px; }
  .home-v2 .hv-gal .hv-g1 { grid-column: span 12; grid-row: span 2; }
  .home-v2 .hv-gal .hv-g2,
  .home-v2 .hv-gal .hv-g3,
  .home-v2 .hv-gal .hv-g4,
  .home-v2 .hv-gal .hv-g5 { grid-column: span 6; }
  .home-v2 .hv-gal .hv-g6 { grid-column: span 7; }
  .home-v2 .hv-gal .hv-g7 { grid-column: span 5; }
  .home-v2 .hv-gal figcaption { padding: 12px; font-size: 12px; }

  .home-v2 .hv-squad__fanar { width: 360px; height: 360px; inset-inline-end: -140px; }
  .home-v2 .hv-cf { height: 400px; margin-top: 44px; }
  .home-v2 .hv-cf__item { width: 240px; height: 360px; margin-left: -120px; }
  .home-v2 .hv-cf__item .num { font-size: 110px; }
  .home-v2 .hv-cf__item.off-1 { transform: translateX(calc(var(--d) * 150px)) scale(.7); }
  .home-v2 .hv-cf__item.off-2 { transform: translateX(calc(var(--d) * 250px)) scale(.5); }
  .home-v2 .hv-cf__item.off-3,
  .home-v2 .hv-cf__item.off-far { transform: translateX(calc(var(--d) * 320px)) scale(.4); opacity: 0; }
  .home-v2 .hv-cfd { grid-template-columns: 52px 1fr 52px; gap: 10px; }
  .home-v2 .hv-cfa { width: 52px; height: 52px; }
  .home-v2 .hv-cfd__name { font-size: 26px; }
  .home-v2 .hv-cfd .ghostn { font-size: 140px; top: -30px; }

  .home-v2 .hv-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-v2 .hv-about__img { height: 240px; margin-top: 24px; }
  .home-v2 .hv-facts { gap: 10px; }
  .home-v2 .hv-fact { padding: 14px; }
  .home-v2 .hv-fact b { font-size: 22px; }
  .home-v2 .hv-fact span { font-size: 10px; }

  .home-v2 .hv-shop__hero {
    display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding-inline: 16px; padding-bottom: 8px; scrollbar-width: none;
  }
  .home-v2 .hv-shop__hero::-webkit-scrollbar { display: none; }
  .home-v2 .hv-kit { flex: 0 0 78%; scroll-snap-align: start; padding: 20px; }
  .home-v2 .hv-kit img,
  .home-v2 .hv-kit .hv-kit--noimg { height: 230px; }
  .home-v2 .hv-acc { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-v2 .hv-acc a { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .home-v2 .hv-acc img,
  .home-v2 .hv-acc .hv-kit--noimg { width: 100%; height: 110px; }

  .home-v2 .hv-app { grid-template-columns: minmax(0, 1fr); padding: 40px 24px; border-radius: 26px; gap: 36px; }
  .home-v2 .hv-app__text .hv-h2 { font-size: 34px; }
  .home-v2 .hv-perks { grid-template-columns: 1fr; }
  .home-v2 .hv-phone { width: 260px; height: 520px; }

  .home-v2 .hv-pgrid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .home-v2 .hv-pgrid > * { min-height: 110px; padding: 14px; }
  .home-v2 .hv-pgrid .wm { font-size: 16px; }

  body.home-v2-body.has-hero .masthead__inner { height: 72px; padding: 0 16px; }
  body.home-v2-body.has-hero .brand__logo { height: 40px; }
  body.home-v2-body.has-hero .pillbtn__label { display: none; }
}

/* ============================ ARABIC ================================== */
/* Arabic has no capitals, and tracking breaks its joins. */
[dir="rtl"] .home-v2 .hv-eyebrow,
[dir="rtl"] .home-v2 .hv-pill,
[dir="rtl"] .home-v2 .hv-h2,
[dir="rtl"] .home-v2 .hv-ghost,
[dir="rtl"] .home-v2 .hv-zs__kick,
[dir="rtl"] .home-v2 .hv-zs__kick b,
[dir="rtl"] .home-v2 .hv-zs__title,
[dir="rtl"] .home-v2 .hv-zs__bullet,
[dir="rtl"] .home-v2 .hv-next__comp,
[dir="rtl"] .home-v2 .hv-next__nm,
[dir="rtl"] .home-v2 .hv-next__hv,
[dir="rtl"] .home-v2 .hv-count span,
[dir="rtl"] .home-v2 .hv-strip__lab,
[dir="rtl"] .home-v2 .hv-strip__cap,
[dir="rtl"] .home-v2 .hv-feat h3,
[dir="rtl"] .home-v2 .hv-feat__date,
[dir="rtl"] .home-v2 .hv-nitem .d,
[dir="rtl"] .home-v2 .hv-nitem .d b,
[dir="rtl"] .home-v2 .hv-nitem h4,
[dir="rtl"] .home-v2 .hv-tabs button,
[dir="rtl"] .home-v2 .hv-mcard .rnd,
[dir="rtl"] .home-v2 .hv-mcard .ko,
[dir="rtl"] .home-v2 .hv-mcard .ko small,
[dir="rtl"] .home-v2 .hv-trow--h,
[dir="rtl"] .home-v2 .hv-vid h3,
[dir="rtl"] .home-v2 .hv-vid .k,
[dir="rtl"] .home-v2 .hv-cfd__name,
[dir="rtl"] .home-v2 .hv-cfd__pos,
[dir="rtl"] .home-v2 .hv-fact b,
[dir="rtl"] .home-v2 .hv-fact span,
[dir="rtl"] .home-v2 .hv-kit__body b,
[dir="rtl"] .home-v2 .hv-mcardx .t span,
[dir="rtl"] .home-v2 .hv-pmain .wm,
[dir="rtl"] .home-v2 .hv-pmain small,
[dir="rtl"] .home-v2 .hv-pgrid .wm,
[dir="rtl"] .home-v2 .hv-pgrid .tier { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .home-v2 .hv-mcard .ko { font-size: 20px; }
[dir="rtl"] .home-v2 .hv-strip__val { letter-spacing: 0; }
/* Arabic figures sit smaller above the phone width (where 26 applies to both). */
@media (min-width: 761px) {
  [dir="rtl"] .home-v2 .hv-strip__val { font-size: 28px; }
}

/* ============================ MOTION ================================== */
@media (prefers-reduced-motion: no-preference) {
  .home-v2 .hv-btn { transition: transform .25s var(--home-ease), box-shadow .25s var(--home-ease); }
  .home-v2 .hv-btn:hover { transform: translateY(-2px); }
  body.home-v2-body.has-hero .pillbtn,
  body.home-v2-body.has-hero .nav__toggle { transition: background .25s ease, border-color .25s ease, color .25s ease; }

  /* The featured story's image eases in on hover. */
  .home-v2 .hv-feat__img { transition: transform 1.2s var(--home-ease); }
  .home-v2 .hv-feat:hover .hv-feat__img,
  .home-v2 .hv-feat:focus-visible .hv-feat__img { transform: scale(1.04); }
  /* A matchday card lifts on hover. */
  .home-v2 .hv-mcard { transition: transform .3s var(--home-ease); }
  .home-v2 .hv-mcard:hover { transform: translateY(-4px); }

  /* A video poster and a gallery photo ease in on hover. */
  .home-v2 .hv-vid img,
  .home-v2 .hv-gal img { transition: transform 1s var(--home-ease); }
  .home-v2 .hv-vid:hover img,
  .home-v2 .hv-vid:focus-visible img { transform: scale(1.04); }
  .home-v2 .hv-gal a:hover img,
  .home-v2 .hv-gal a:focus-visible img { transform: scale(1.05); }

  /* The coverflow glides to the next player; the arrows lift on hover. */
  .home-v2 .hv-cf__item { transition: transform 1s var(--home-ease), opacity 1s var(--home-ease), filter 1s var(--home-ease); }
  .home-v2 .hv-cf__item .num { transition: opacity 1s; }
  .home-v2 .hv-cfa { transition: transform .25s var(--home-ease); }
  .home-v2 .hv-cfa:hover { transform: scale(1.06); }

  /* A kit card lifts and its shirt turns on hover; an accessory gains a shadow. */
  .home-v2 .hv-kit { transition: transform .35s var(--home-ease); }
  .home-v2 .hv-kit:hover { transform: translateY(-6px); }
  .home-v2 .hv-kit img { transition: transform .5s var(--home-ease); }
  .home-v2 .hv-kit:hover img,
  .home-v2 .hv-kit:focus-visible img { transform: scale(1.05) rotate(-2deg); }
  .home-v2 .hv-acc a { transition: box-shadow .3s var(--home-ease); }

  /* A partner's cell takes the hover colours gently. */
  .home-v2 .hv-pgrid a { transition: color .3s, background .3s; }

  .hv-tick .hv-tick__track { animation: home-tick 60s linear infinite; }
  [dir="rtl"] .hv-tick__track { animation-name: home-tickr; }
  .hv-tick:hover .hv-tick__track { animation-play-state: paused; }
  /* A focused item holds it; the focused pause button does not, or Play
     would seem to do nothing until focus moved on. */
  .hv-tick .hv-tick__track:focus-within { animation-play-state: paused; }
  .hv-tick.is-paused .hv-tick__track { animation-play-state: paused; }
  .hv-tick .hv-tick__lab.is-live .hv-tick__dot { animation: home-pulse 1.6s ease-in-out infinite; }
  @keyframes home-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes home-tickr { from { transform: translateX(0); } to { transform: translateX(50%); } }

  /* Hero: crossfade, Ken Burns on the active slide, the content's slide-in,
     the 7 s progress bar (site-home.js restarts it per slide). */
  .home-v2 .hv-zs__slide { transition: opacity 1.2s ease, visibility 0s 1.2s; will-change: transform, opacity; }
  .home-v2 .hv-zs__slide.is-active { transition: opacity 1.2s ease; animation: home-kenburns 20s linear forwards; }
  .home-v2 .hv-zs__content { transition: opacity .5s, transform 1.5s var(--home-ease), visibility 0s .5s; }
  .home-v2 .hv-zs__content.is-visible { transition: opacity 2s, transform 1.5s var(--home-ease); }
  .home-v2 .hv-zs__bullet { transition: all .4s var(--home-ease); }
  .home-v2 .hv-zs__progress.run i { animation: home-prog 7s linear forwards; }
  /* The live pill's dot breathes while the club plays. */
  .home-v2 .hv-pill--live .dot { animation: home-pulse 1.6s ease-in-out infinite; }
  @keyframes home-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  @keyframes home-kenburns { from { transform: scale(1); } to { transform: scale(1.2); } }
  @keyframes home-prog { from { width: 0; } to { width: 100%; } }
}
/* site.css's own masthead transitions, switched off on this page under reduce. */
@media (prefers-reduced-motion: reduce) {
  body.home-v2-body .masthead *,
  .hv-tick *,
  .home-v2 * { transition: none; animation: none; }

  /* The hero keeps its crossfade only: no Ken Burns, no slide-in, no
     progress bar. */
  .home-v2 .hv-zs__slide { transition: opacity 1.2s ease, visibility 0s 1.2s; }
  .home-v2 .hv-zs__slide.is-active { transition: opacity 1.2s ease; }
  .home-v2 .hv-zs__content,
  .home-v2 .hv-zs__content.is-visible { transform: none; }
  .home-v2 .hv-zs__content { transition: opacity .5s, visibility 0s .5s; }
  .home-v2 .hv-zs__content.is-visible { transition: opacity .5s; }
  .home-v2 .hv-zs__progress { display: none; }

  /* The coverflow jumps; its arrows still work. */
  .home-v2 .hv-cf__item { transition: none; }

  /* The ticker holds still: one set, scrolled by hand. */
  .hv-tick .hv-tick__track { animation: none; overflow-x: auto; width: auto; flex: 1 1 auto; min-width: 0; }
  .hv-tick .hv-tick__set[aria-hidden="true"] { display: none; }
  .hv-tick .hv-tick__pause { display: none; }
}