/* =========================================================
   WH FOOTBALL AGENCY
   GLOBAL STYLES
========================================================= */

/* =========================================================
   LOCAL FONTS
========================================================= */

@font-face {
  font-family: "Hind";
  src: url("assets/fonts/Hind/web/Hind-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hind";
  src: url("assets/fonts/Hind/web/Hind-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Khand";
  src: url("assets/fonts/Khand/web/Khand-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Khand";
  src: url("assets/fonts/Khand/web/Khand-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
     ROOT
  ========================================================= */

:root {
  --color-bg: #050805;
  --color-surface: #0a0d0a;
  --color-surface-soft: #101410;

  --color-text: #ffffff;
  --color-text-soft: rgba(255, 255, 255, 0.72);
  --color-text-muted: rgba(255, 255, 255, 0.48);

  --color-accent: #dfff37;
  --color-accent-hover: #e7ff61;

  --color-light-bg: #f1f2ec;
  --color-light-text: #10130f;
  --color-light-accent: #789300;

  --color-border: rgba(255, 255, 255, 0.12);

  --container-width: 1520px;
}

/* =========================================================
     RESET
  ========================================================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;

  scroll-behavior: smooth;

  overflow-x: clip;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;

  font-family: "Hind", sans-serif;

  background: var(--color-bg);
  color: var(--color-text);

  line-height: 1.5;

  overflow-x: clip;
}

body.menuOpen {
  overflow: hidden;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

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

img {
  height: auto;
}

/* =========================================================
     GLOBAL CONTAINER
  ========================================================= */

.siteContainer {
  width: min(var(--container-width), calc(100% - 112px));

  margin-inline: auto;
}

/* =========================================================
     HEADER
  ========================================================= */

.siteHeader {
  position: absolute;

  inset: 0 0 auto;

  z-index: 50;

  padding-top: 25px;
}

.navInner {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 32px;

  padding-inline: 24px 18px;

  background: rgba(5, 8, 5, 0.78);

  border: 1px solid var(--color-border);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* =========================================================
     BRAND
  ========================================================= */

.brand {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  flex-shrink: 0;
}

.brandMark {
  font-family: "Khand", sans-serif;

  font-size: 29px;
  font-weight: 700;

  line-height: 1;

  color: var(--color-accent);
}

.brandText {
  color: rgba(255, 255, 255, 0.94);

  font-size: 16px;
}

/* =========================================================
     DESKTOP NAVIGATION
  ========================================================= */

.desktopNav {
  display: flex;
  align-items: center;

  gap: clamp(24px, 2.5vw, 40px);

  margin-left: auto;

  color: rgba(255, 255, 255, 0.7);

  font-size: 15px;
}

.desktopNav a {
  position: relative;

  padding-block: 8px;

  transition: color 180ms ease;
}

.desktopNav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 3px;

  width: 100%;
  height: 1px;

  background: var(--color-accent);

  transform: scaleX(0);
  transform-origin: right;

  transition: transform 220ms ease;
}

.desktopNav a:hover {
  color: #ffffff;
}

.desktopNav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* =========================================================
     NAV ACTIONS
  ========================================================= */

.navActions {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-left: auto;
}

.languageButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  padding: 0;

  flex-shrink: 0;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: transparent;

  color: #ffffff;

  font-size: 16px;
  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  transition:
    border-color 220ms ease,
    color 220ms ease,
    background 220ms ease;
}

.languageButton:hover {

    border-color: var(--color-accent);

    color: var(--color-accent);

  }

/* =========================================================
     BUTTONS
  ========================================================= */

.primaryButton,
.secondaryButton {
  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding-inline: 22px;

  border: 1px solid transparent;

  font-size: 16px;
  font-weight: 400;

  white-space: nowrap;

  transition: background 180ms ease, color 180ms ease, border-color 180ms ease,
    transform 180ms ease;
}

.primaryButton {
  background: var(--color-accent);
  color: #0b0d08;

  border-color: var(--color-accent);

  box-shadow: 0 10px 28px rgba(223, 255, 55, 0.18);
}

.primaryButton:hover {
  background: var(--color-accent-hover);

  border-color: var(--color-accent-hover);

  transform: translateY(-2px);
}

.secondaryButton {
  background: transparent;
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.25);
}

.secondaryButton:hover {
  background: rgba(255, 255, 255, 0.07);

  border-color: rgba(255, 255, 255, 0.42);

  transform: translateY(-2px);
}

/* =========================================================
     MOBILE MENU BUTTON
  ========================================================= */

.menuButton {
  display: none;

  width: 46px;
  height: 46px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  background: rgba(255, 255, 255, 0.04);

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 6px;

  cursor: pointer;
}

.menuButton span {
  width: 19px;
  height: 1px;

  background: #ffffff;

  transition: transform 280ms ease;
}

.menuButton.isActive span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.menuButton.isActive span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* =========================================================
     HERO
  ========================================================= */

.hero {
  position: relative;

  min-height: 100svh;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  background: var(--color-bg);
}

.heroMedia {
  position: absolute;
  inset: 0;

  z-index: 0;

  background-image: linear-gradient(
      90deg,
      rgba(3, 5, 3, 0.93) 0%,
      rgba(3, 5, 3, 0.74) 36%,
      rgba(3, 5, 3, 0.35) 68%,
      rgba(3, 5, 3, 0.16) 100%
    ),
    linear-gradient(0deg, rgba(3, 5, 3, 0.76) 0%, rgba(3, 5, 3, 0.08) 48%),
    url("assets/images/hero.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.015);
}

.heroOverlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    transparent 28%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

.heroContent {
  position: relative;

  z-index: 2;

  padding-top: 150px;
  padding-bottom: 72px;
}

.heroEyebrow {
  margin-bottom: 18px;

  color: var(--color-accent);

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.18em;
}

.hero h1 {
  max-width: 900px;

  font-family: "Khand", sans-serif;

  font-size: clamp(78px, 8.7vw, 150px);
  font-weight: 700;

  line-height: 0.82;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.hero h1 span {
  display: block;

  color: var(--color-accent);
}

.heroDescription {
  max-width: 590px;

  margin-top: 32px;

  color: var(--color-text-soft);

  font-size: 19px;
  font-weight: 300;

  line-height: 1.6;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 34px;
}

/* =========================================================
     HERO TRUST TICKER
  ========================================================= */

.heroTrust {
  width: 100%;
  min-height: 58px;

  margin-top: 52px;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  overflow: hidden;

  background: rgba(4, 7, 4, 0.88);

  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.trustLabelEspn {
  position: relative;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 10px;

  padding-inline: 18px 22px;

  white-space: nowrap;

  color: rgba(255, 255, 255, 0.88);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.11em;

  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.trustPulse {
  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--color-accent);
}

.trustTicker {
  position: relative;

  min-width: 0;

  overflow: hidden;
}

.trustTicker::before,
.trustTicker::after {
  content: "";

  position: absolute;

  top: 0;

  z-index: 3;

  width: 48px;
  height: 100%;

  pointer-events: none;
}

.trustTicker::before {
  left: 0;

  background: linear-gradient(to right, rgba(4, 7, 4, 0.98), transparent);
}

.trustTicker::after {
  right: 0;

  background: linear-gradient(to left, rgba(4, 7, 4, 0.98), transparent);
}

.trustTrack {
  width: max-content;
  min-height: 58px;

  display: flex;
  align-items: center;

  animation: trustScroll 28s linear infinite;
}

.trustTicker:hover .trustTrack {
  animation-play-state: paused;
}

.trustItem {
  display: flex;
  align-items: center;

  gap: 10px;

  padding-inline: 28px;

  white-space: nowrap;

  color: rgba(255, 255, 255, 0.64);

  font-size: 13px;
}

.trustItem span {
  color: var(--color-accent);

  font-family: "Khand", sans-serif;

  font-size: 15px;
  font-weight: 600;
}

.trustItem::after {
  content: "";

  width: 4px;
  height: 4px;

  margin-left: 28px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.22);
}

@keyframes trustScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
     MOBILE MENU
  ========================================================= */

.mobileMenu {
  position: fixed;
  inset: 0;

  z-index: 100;

  visibility: hidden;

  pointer-events: none;
}

.mobileMenu.isOpen {
  visibility: visible;

  pointer-events: auto;
}

.mobileMenuBackdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.72);

  opacity: 0;

  transition: opacity 350ms ease;
}

.mobileMenu.isOpen .mobileMenuBackdrop {
  opacity: 1;
}

.mobileMenuPanel {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  padding: max(24px, env(safe-area-inset-top)) 20px
    max(24px, env(safe-area-inset-bottom));

  background: linear-gradient(155deg, #070a07, #0b0e0a);

  color: #ffffff;

  transform: translateY(-100%);

  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobileMenu.isOpen .mobileMenuPanel {
  transform: translateY(0);
}

.mobileMenuTop {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 22px;

  border-bottom: 1px solid var(--color-border);
}

.mobileMenuBrand {
  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 14px;
}

.mobileMenuNav {
  display: flex;
  flex-direction: column;

  margin-top: 38px;
}

.mobileMenuNav a {
  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  align-items: baseline;

  padding-block: 13px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);

  font-family: "Khand", sans-serif;

  font-size: clamp(42px, 12vw, 64px);
  font-weight: 600;

  line-height: 0.95;
}



.menuIndex {
  color: var(--color-accent);

  font-family: "Hind", sans-serif;

  font-size: 10px;
}

.mobileMenuClose {
  position: relative;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border: 1px solid rgba(255, 255, 255, 0.16);

  background: rgba(255, 255, 255, 0.04);

  cursor: pointer;
}

.mobileMenuClose span {
  position: absolute;

  width: 18px;
  height: 1px;

  background: currentColor;
}

.mobileMenuClose span:first-child {
  transform: rotate(45deg);
}

.mobileMenuClose span:last-child {
  transform: rotate(-45deg);
}

.mobileMenuContact {
  min-height: 66px;

  margin-top: 14px;

  padding-inline: 16px;

  grid-template-columns:
    36px
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;

  background: var(--color-accent);
  color: #0b0e08;

  border-bottom: 0 !important;
}

.mobileMenuContact .menuIndex {
  color: rgba(11, 14, 8, 0.55);
}

.menuArrow {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    color: #050805;

    transition: transform .25s ease;
}

.mobileMenuContact:hover .menuArrow {
    transform: translate(3px, -3px);
}

.mobileMenuBottom {
  margin-top: auto;

  padding-top: 26px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobileMenuEmail {
  color: #ffffff;

  font-size: 16px;
}

.mobileMenuSocials {
  display: flex;

  gap: 8px;

  flex-shrink: 0;
}

.mobileMenuSocials a {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.16);

  color: #ffffff;
}

.mobileMenuSocials svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;
}

.mobileMenuSocials a:nth-child(2) svg,
.mobileMenuSocials a:nth-child(3) svg {
  fill: currentColor;

  stroke: none;
}

/* =========================================================
   MOBILE MENU INTERACTIONS
========================================================= */

.mobileMenuNav a {
  transition: color 220ms ease,
    padding-left 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease;
}

.mobileMenuEmail {
  transition: color 220ms ease, opacity 220ms ease;
}

.mobileMenuSocials a {
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobileMenuClose {
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Desktop mouse / trackpad hover only */

@media (hover: hover) and (pointer: fine) {
  .mobileMenuNav a:not(.mobileMenuContact):hover {
    padding-left: 7px;

    color: var(--color-accent);

    border-color: rgba(223, 255, 55, 0.24);
  }

  .mobileMenuEmail:hover {
    color: var(--color-accent);
  }

  .mobileMenuSocials a:hover {
    background: var(--color-accent);
    color: #0b0e08;

    border-color: var(--color-accent);

    transform: translateY(-3px);
  }

  .mobileMenuClose:hover {
    background: var(--color-accent);
    color: #0b0e08;

    border-color: var(--color-accent);

    transform: rotate(5deg);
  }

  .mobileMenuContact:hover {
    background: var(--color-accent-hover);
    color: #0b0e08;

    transform: translateY(-2px);
  }
}

/* Touch feedback */

.mobileMenuNav a:active {
  opacity: 0.72;
}

.mobileMenuSocials a:active {
  transform: scale(0.94);
}

.mobileMenuClose:active {
  transform: scale(0.94);
}

.mobileMenuEmail:active {
  color: var(--color-accent);
}

/* =========================================================
     WH DIFFERENCE
  ========================================================= */

.differenceSection {
  padding: clamp(88px, 9vw, 150px) 0;

  background: #070a07;
  color: #ffffff;
}

.differenceHeader {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(320px, 0.65fr);

  column-gap: clamp(60px, 8vw, 150px);

  align-items: end;

  margin-bottom: clamp(52px, 6vw, 84px);
}

.differenceHeader .sectionEyebrow {
  grid-column: 1 / -1;

  width: fit-content;

  margin-bottom: 22px;

  color: var(--color-accent);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.16em;
}

.differenceHeader h2 {
  max-width: 850px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 6.5vw, 96px);
  font-weight: 700;

  line-height: 0.91;

  letter-spacing: -0.025em;

  text-transform: uppercase;
}

.differenceHeader h2 span {
  color: var(--color-accent);
}

.differenceHeader > p {
  align-self: end;

  max-width: 500px;

  margin-bottom: 6px;

  color: rgba(255, 255, 255, 0.66);

  font-size: 18px;
  font-weight: 300;

  line-height: 1.65;
}

/* =========================================================
     DIFFERENCE GRID
  ========================================================= */

.differenceGrid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(360px, 1.25fr)
    minmax(0, 0.9fr);

  gap: 18px;

  align-items: stretch;
}

.differenceColumn {
  display: grid;

  grid-template-rows:
    1.12fr
    0.88fr;

  gap: 18px;
}

.differenceColumnRight {
  grid-template-rows:
    0.88fr
    1.12fr;
}

.differenceCard {
  position: relative;

  min-height: 300px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 28px;

  overflow: hidden;

  background: #0b0f0b;

  border: 1px solid rgba(255, 255, 255, 0.09);

  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms ease, background 320ms ease;
}

.differenceCardCompact {
  min-height: 250px;
}

.differenceCard::before {
  content: "";

  position: absolute;

  inset: auto 0 0;

  height: 2px;

  background: var(--color-accent);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.differenceCard:hover {
  transform: translateY(-5px);

  border-color: rgba(223, 255, 55, 0.34);

  background: #0e130e;
}

.differenceCard:hover::before {
  transform: scaleX(1);
}

.differenceCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}

.differenceNumber {
  color: rgba(255, 255, 255, 0.3);

  font-size: 11px;

  letter-spacing: 0.14em;
}

.differenceIcon {
  width: 78px;
  height: 78px;

  display: grid;
  place-items: center;

  color: var(--color-accent);

  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.differenceIcon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.differenceCard:hover .differenceIcon {
  transform: translateY(-5px) rotate(2deg);
}

.differenceCardContent {
  position: relative;

  z-index: 1;

  margin-top: 40px;
}

.differenceLabel {
  display: block;

  margin-bottom: 10px;

  color: var(--color-accent);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}

.differenceCard h3 {
  max-width: 340px;

  font-family: "Khand", sans-serif;

  font-size: clamp(28px, 2.4vw, 39px);
  font-weight: 600;

  line-height: 1;
}

.differenceCard p {
  max-width: 360px;

  margin-top: 14px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
     DIFFERENCE FEATURE IMAGE
  ========================================================= */

.differenceFeature {
  position: relative;

  min-height: 580px;

  overflow: hidden;

  background: #0b0f0b;
}

.differenceFeature img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.01);

  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.differenceFeature:hover img {
  transform: scale(1.045);
}

.differenceFeatureShade {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(3, 5, 3, 0.08) 10%,
    rgba(3, 5, 3, 0.16) 42%,
    rgba(3, 5, 3, 0.9) 100%
  );
}

.differenceFeatureContent {
  position: absolute;

  left: 30px;
  right: 30px;
  bottom: 30px;

  z-index: 2;
}

.differenceFeatureContent > span {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--color-accent);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.differenceFeatureContent h3 {
  max-width: 470px;

  font-family: "Khand", sans-serif;

  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 600;

  line-height: 0.95;
}

.differenceFeatureContent p {
  max-width: 470px;

  margin-top: 14px;

  color: rgba(255, 255, 255, 0.67);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
     REVEAL
  ========================================================= */

[data-reveal] {
  opacity: 0;

  transform: translateY(24px);

  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].isVisible {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
     SERVICES
  ========================================================= */

.servicesSection {
  position: relative;

  padding: clamp(100px, 10vw, 160px) 0;

  background: var(--color-light-bg);
  color: var(--color-light-text);
}

.servicesLayout {
  display: grid;

  grid-template-columns:
    minmax(340px, 0.78fr)
    minmax(0, 1.22fr);

  gap: clamp(72px, 8vw, 130px);

  align-items: start;
}

/* =========================================================
     SERVICES INTRO
  ========================================================= */

.servicesIntro {
  width: 100%;
  min-width: 0;
}

.servicesIntro .sectionEyebrow {
  display: block;

  margin-bottom: 20px;

  color: #718800;

  font-size: 13px;
}

.servicesIntro h2 {
  width: 100%;
  max-width: 620px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 5.6vw, 88px);
  font-weight: 700;

  line-height: 0.88;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.servicesIntro h2 span {
  display: block;

  color: var(--color-light-accent);
}

.servicesIntro p {
  max-width: 430px;

  margin-top: 30px;

  color: rgba(16, 19, 15, 0.64);

  font-size: 17px;
  font-weight: 300;

  line-height: 1.65;
}

.servicesIntro .primaryButton {
  width: fit-content;

  min-height: 52px;

  margin-top: 44px;

  padding-inline: 26px;

  background: #10130f;
  color: #ffffff;

  border-color: #10130f;

  box-shadow: none;
}

.servicesIntro .primaryButton:hover {
  background: var(--color-accent);
  color: #10130f;

  border-color: var(--color-accent);
}

/* =========================================================
   SERVICES CTA
========================================================= */

.servicesCTA {
  display: inline-flex;
  align-items: center;

  gap: 14px;

  overflow: hidden;
}

.buttonArrow {
  width: 18px;
  height: 18px;

  flex-shrink: 0;

  color: var(--color-accent);

  transform: translateX(0);

  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}

html[dir="rtl"] .buttonArrow {
    transform: scaleX(-1);
}

.servicesCTA:hover .buttonArrow {
  color: #10130f;
  opacity: 0.82;

  transform: translateX(6px);
}

html[dir="rtl"] .primaryButton:hover .buttonArrow {
    transform: scaleX(-1) translateX(-4px);
}

.servicesCTA:active .buttonArrow {
  opacity: 1;

  transform: translateX(6px);
}

/* =========================================================
     DESKTOP STICKY SERVICES
  ========================================================= */

@media (min-width: 901px) {
  .servicesIntro {
    position: sticky;

    top: 96px;

    align-self: start;
  }
}

/* =========================================================
     SERVICES LIST
  ========================================================= */

.servicesList {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 18px;

  padding-top: 38px;
}

/* =========================================================
     SERVICE PANEL
  ========================================================= */

.servicePanel {
  position: relative;

  width: 100%;
  min-width: 0;

  min-height: 330px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(260px, 0.95fr);

  overflow: hidden;

  background: #090c09;
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease, box-shadow 260ms ease;
}

.servicePanel:hover {
  transform: translateY(-4px);

  border-color: rgba(223, 255, 55, 0.32);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.11);
}

.servicePanelContent {
  min-width: 0;
  min-height: 330px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 27px 28px 30px;
}

.serviceMeta {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  color: rgba(255, 255, 255, 0.42);

  font-size: 10px;

  line-height: 1.3;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.serviceMeta span:first-child {
  flex-shrink: 0;

  color: var(--color-accent);
}

.servicePanel h3 {
  max-width: 520px;

  font-family: "Khand", sans-serif;

  font-size: clamp(35px, 3vw, 50px);
  font-weight: 600;

  line-height: 0.94;

  letter-spacing: -0.025em;
}

.servicePanel p {
  max-width: 520px;

  margin-top: 15px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
     SERVICE IMAGE
  ========================================================= */

.servicePanelMedia {
  position: relative;

  min-width: 0;
  min-height: 330px;

  overflow: hidden;

  background: #111511;
}

.servicePanelMedia::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(9, 12, 9, 0.22),
    rgba(9, 12, 9, 0.02)
  );

  pointer-events: none;
}

.servicePanelMedia img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.82) contrast(1.03);

  transform: scale(1.01);

  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 350ms ease;
}

.servicePanel:hover .servicePanelMedia img {
  transform: scale(1.05);

  filter: saturate(1) contrast(1.04);
}

/* =========================================================
     ALTERNATING SERVICES
  ========================================================= */

.servicePanel:nth-child(even) {
  grid-template-columns:
    minmax(260px, 0.95fr)
    minmax(0, 1.05fr);
}

.servicePanel:nth-child(even) .servicePanelMedia {
  order: 1;
}

.servicePanel:nth-child(even) .servicePanelContent {
  order: 2;
}

.servicePanelFinal {
  border-bottom: 3px solid var(--color-accent);
}

/* =========================================================
     LARGE LAPTOP
  ========================================================= */

@media (max-width: 1280px) {
  .siteContainer {
    width: calc(100% - 64px);
  }

  .hero h1 {
    font-size: clamp(74px, 9vw, 120px);
  }

  .servicesLayout {
    grid-template-columns:
      minmax(300px, 0.75fr)
      minmax(0, 1.25fr);

    gap: 64px;
  }

  .servicesIntro h2 {
    font-size: clamp(54px, 5.5vw, 78px);
  }
}

/* =========================================================
     TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .siteContainer {
    width: calc(100% - 40px);
  }

  .desktopNav {
    display: none;
  }

  .navActions .primaryButton {
    display: none;
  }

  .menuButton {
    display: flex;
  }

  /* HERO */

  .heroContent {
    padding-top: 140px;
    padding-bottom: 50px;
  }

  .hero h1 {
    max-width: 760px;

    font-size: clamp(70px, 11vw, 104px);
  }

  /* DIFFERENCE */

  .differenceHeader {
    grid-template-columns: 1fr;

    row-gap: 0;

    margin-bottom: 48px;
  }

  .differenceHeader .sectionEyebrow,
  .differenceHeader h2,
  .differenceHeader > p {
    grid-column: 1;
  }

  .differenceHeader > p {
    max-width: 620px;

    margin-top: 24px;
    margin-bottom: 0;
  }

  .differenceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
  }

  .differenceColumn {
    display: contents;
  }

  .differenceColumnLeft .differenceCard:first-child {
    order: 1;
  }

  .differenceColumnRight .differenceCard:first-child {
    order: 2;
  }

  .differenceFeature {
    order: 3;

    grid-column: 1 / -1;

    min-height: 520px;
  }

  .differenceColumnLeft .differenceCard:last-child {
    order: 4;
  }

  .differenceColumnRight .differenceCard:last-child {
    order: 5;
  }

  .differenceCard,
  .differenceCardCompact {
    min-height: 290px;

    padding: 25px;
  }
}

/* =========================================================
     SERVICES TABLET
  ========================================================= */

@media (max-width: 900px) {
  .servicesSection {
    padding: 88px 0;
  }

  .servicesLayout {
    display: block;
  }

  .servicesIntro {
    position: static;

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(250px, 0.72fr);

    column-gap: 38px;

    align-items: end;
  }

  .servicesIntro .sectionEyebrow {
    grid-column: 1 / -1;
  }

  .servicesIntro h2 {
    grid-column: 1;

    max-width: 500px;
  }

  .servicesIntro p {
    grid-column: 2;

    margin-top: 0;
    margin-bottom: 4px;
  }

  .servicesIntro .primaryButton {
    grid-column: 2;

    margin-top: 22px;
  }

  .servicesList {
    margin-top: 52px;

    padding-top: 0;
  }

  .servicePanel,
  .servicePanel:nth-child(even) {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(240px, 0.8fr);
  }

  .servicePanel:nth-child(even) .servicePanelContent {
    order: 1;
  }

  .servicePanel:nth-child(even) .servicePanelMedia {
    order: 2;
  }
}

/* =========================================================
     MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .siteContainer {
    width: calc(100% - 32px);
  }

  /* HEADER */

  .siteHeader {
    padding-top: 14px;
  }

  .navInner {
    min-height: 58px;

    padding-inline: 13px;
  }

  .brandMark {
    font-size: 25px;
  }

  .brandText {
    display: none;
  }

  .navActions {
    gap: 5px;
  }

  .languageButton {
    min-width: 36px;
    min-height: 42px;

    font-size: 13px;
  }

  .menuButton {
    width: 42px;
    height: 42px;
  }

  /* HERO */

  .hero {
    min-height: 100svh;
  }

  .heroMedia {
    background-image: linear-gradient(
        180deg,
        rgba(3, 5, 3, 0.42),
        rgba(3, 5, 3, 0.56) 46%,
        rgba(3, 5, 3, 0.94)
      ),
      url("assets/images/hero.webp");

    background-position: 75% center;

    transform: none;
  }

  .heroContent {
    padding-top: 108px;
    padding-bottom: 22px;
  }

  .heroEyebrow {
    margin-bottom: 12px;

    font-size: 10px;
  }

  .hero h1 {
    max-width: 100%;

    font-size: clamp(50px, 16vw, 70px);

    line-height: 0.86;
  }

  .heroDescription {
    max-width: 100%;

    margin-top: 20px;

    font-size: 15px;

    line-height: 1.5;
  }

  .heroActions {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 24px;
  }

  .heroActions .primaryButton,
  .heroActions .secondaryButton {
    width: 100%;
  }

  /* TRUST */

  .heroTrust {
    min-height: 50px;

    margin-top: 26px;
  }

  .trustLabelEspn {
    padding-inline: 10px 12px;

    gap: 6px;

    font-size: 8px;
  }

  .trustPulse {
    width: 5px;
    height: 5px;
  }

  .trustTrack {
    min-height: 50px;
  }

  .trustItem {
    padding-inline: 16px;

    font-size: 10px;
  }

  .trustItem span {
    font-size: 12px;
  }

  .trustItem::after {
    margin-left: 16px;
  }

  .trustTicker::before,
  .trustTicker::after {
    width: 20px;
  }

  /* MOBILE MENU */

  .mobileMenuNav {
    margin-top: 28px;
  }

  .mobileMenuNav a {
    grid-template-columns:
      30px
      minmax(0, 1fr);

    padding-block: 11px;

    font-size: clamp(37px, 11vw, 52px);
  }

  .mobileMenuBottom {
    align-items: flex-start;

    flex-direction: column;

    gap: 15px;
  }

  .mobileMenuEmail {
    font-size: 14px;
  }

  /* DIFFERENCE */

  .differenceSection {
    padding: 72px 0;
  }

  .differenceHeader {
    display: block;

    margin-bottom: 34px;
  }

  .differenceHeader .sectionEyebrow {
    margin-bottom: 16px;
  }

  .differenceHeader h2 {
    width: 100%;

    font-size: clamp(48px, 15vw, 66px);

    line-height: 0.9;
  }

  .differenceHeader > p {
    width: 100%;
    max-width: 100%;

    margin-top: 20px;

    font-size: 15px;

    line-height: 1.55;
  }

  .differenceGrid {
    display: flex;

    flex-direction: column;

    gap: 12px;
  }

  .differenceColumn {
    display: contents;
  }

  .differenceCard,
  .differenceCardCompact {
    width: 100%;

    min-height: 250px;

    padding: 20px;
  }

  .differenceIcon {
    width: 58px;
    height: 58px;
  }

  .differenceCardContent {
    margin-top: 30px;
  }

  .differenceCard h3 {
    font-size: clamp(28px, 8.5vw, 36px);
  }

  .differenceCard p {
    font-size: 13px;
  }

  .differenceFeature {
    width: 100%;

    min-height: 440px;
  }

  .differenceFeatureContent {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .differenceFeatureContent h3 {
    font-size: clamp(34px, 10vw, 44px);
  }

  /* =========================================================
   SERVICES MOBILE
========================================================= */

  .servicesSection {
    padding: 76px 0 88px;
  }

  .servicesLayout {
    display: block;

    width: 100%;
  }

  /* INTRO */

  .servicesIntro {
    display: block;

    width: 100%;
    max-width: 100%;

    padding-inline: 4px;
  }

  .servicesIntro .sectionEyebrow {
    margin-bottom: 15px;

    font-size: 11px;
  }

  .servicesIntro h2 {
    width: 100%;
    max-width: 100%;

    margin: 0;

    font-size: clamp(44px, 13.6vw, 59px);

    line-height: 0.9;

    letter-spacing: -0.03em;
  }

  .servicesIntro h2 span {
    display: block;
  }

  .servicesIntro p {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    color: rgba(16, 19, 15, 0.66);

    font-size: 15px;

    line-height: 1.55;
  }

  .servicesIntro .primaryButton {
    width: auto;

    min-width: 190px;
    min-height: 52px;

    margin-top: 26px;

    padding-inline: 22px;
  }

  /* CARD LIST */

  .servicesList {
    width: calc(100% - 16px);
    max-width: 100%;

    margin: 46px auto 0;

    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 18px;
  }

  /* CARD */

  .servicePanel,
  .servicePanel:nth-child(even) {
    position: relative;

    width: 100%;
    max-width: 100%;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    transform: none;

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 12px 32px rgba(15, 18, 14, 0.07);
  }

  .servicePanel:hover {
    transform: none;
  }

  /* IMAGE */

  .servicePanelMedia,
  .servicePanel:nth-child(even) .servicePanelMedia {
    order: 1;

    position: relative;

    width: 100%;

    min-height: 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;
  }

  .servicePanelMedia img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  .servicePanelMedia::after {
    background: linear-gradient(
      180deg,
      rgba(9, 12, 9, 0.02) 30%,
      rgba(9, 12, 9, 0.26) 100%
    );
  }

  /* CONTENT */

  .servicePanelContent,
  .servicePanel:nth-child(even) .servicePanelContent {
    order: 2;

    width: 100%;

    min-height: auto;

    padding: 20px 20px 24px;

    display: block;
  }

  /* META */

  .serviceMeta {
    width: 100%;

    display: grid;

    grid-template-columns:
      auto
      minmax(0, 1fr);

    align-items: start;

    gap: 14px;

    margin-bottom: 32px;

    font-size: 8px;

    line-height: 1.35;

    letter-spacing: 0.1em;
  }

  .serviceMeta span:last-child {
    text-align: right;
  }

  /* TITLE */

  .servicePanel h3 {
    width: 100%;
    max-width: 100%;

    font-size: clamp(29px, 8vw, 36px);

    line-height: 0.96;

    letter-spacing: -0.02em;
  }

  /* DESCRIPTION */

  .servicePanel p {
    width: 100%;
    max-width: 100%;

    margin-top: 12px;

    color: rgba(255, 255, 255, 0.61);

    font-size: 13px;

    line-height: 1.5;
  }

  /* FINAL CARD */

  .servicePanelFinal {
    border-bottom: 2px solid var(--color-accent);
  }

  /* =========================================================
     SMALL MOBILE
  ========================================================= */

  @media (max-width: 380px) {
    .siteContainer {
      width: calc(100% - 24px);
    }

    .hero h1 {
      font-size: clamp(47px, 15.5vw, 62px);
    }

    .servicesIntro h2,
    .differenceHeader h2 {
      font-size: clamp(44px, 14vw, 56px);
    }
  }

  /* =========================================================
     REDUCED MOTION
  ========================================================= */

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    .trustTrack {
      animation: none;
    }

    [data-reveal] {
      opacity: 1;

      transform: none;

      transition: none;
    }

    .primaryButton,
    .secondaryButton,
    .differenceCard,
    .differenceIcon,
    .differenceFeature img,
    .servicePanel,
    .servicePanelMedia img,
    .mobileMenuPanel,
    .mobileMenuBackdrop {
      transition: none;
    }
  } /* =========================================================
   WH FOOTBALL AGENCY
   GLOBAL STYLES
========================================================= */

  /* =========================================================
   LOCAL FONTS
========================================================= */

  @font-face {
    font-family: "Hind";
    src: url("assets/fonts/Hind/web/Hind-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Hind";
    src: url("assets/fonts/Hind/web/Hind-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Khand";
    src: url("assets/fonts/Khand/web/Khand-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Khand";
    src: url("assets/fonts/Khand/web/Khand-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  /* =========================================================
     ROOT
  ========================================================= */

  :root {
    --color-bg: #050805;
    --color-surface: #0a0d0a;
    --color-surface-soft: #101410;

    --color-text: #ffffff;
    --color-text-soft: rgba(255, 255, 255, 0.72);
    --color-text-muted: rgba(255, 255, 255, 0.48);

    --color-accent: #dfff37;
    --color-accent-hover: #e7ff61;

    --color-light-bg: #f1f2ec;
    --color-light-text: #10130f;
    --color-light-accent: #789300;

    --color-border: rgba(255, 255, 255, 0.12);

    --container-width: 1520px;
  }

  /* =========================================================
     RESET
  ========================================================= */

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    width: 100%;
    max-width: 100%;

    scroll-behavior: smooth;

    overflow-x: clip;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;

    font-family: "Hind", sans-serif;

    background: var(--color-bg);
    color: var(--color-text);

    line-height: 1.5;

    overflow-x: clip;
  }

  body.menuOpen {
    overflow: hidden;
  }

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

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  button {
    color: inherit;
  }

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

  img {
    height: auto;
  }

  /* =========================================================
     GLOBAL CONTAINER
  ========================================================= */

  .siteContainer {
    width: min(var(--container-width), calc(100% - 112px));

    margin-inline: auto;
  }

  /* =========================================================
     HEADER
  ========================================================= */

  .siteHeader {
    position: absolute;

    inset: 0 0 auto;

    z-index: 50;

    padding-top: 25px;
  }

  .navInner {
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

    padding-inline: 24px 18px;

    background: rgba(5, 8, 5, 0.78);

    border: 1px solid var(--color-border);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  /* =========================================================
     BRAND
  ========================================================= */

  .brand {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    flex-shrink: 0;
  }

  .brandMark {
    font-family: "Khand", sans-serif;

    font-size: 29px;
    font-weight: 700;

    line-height: 1;

    color: var(--color-accent);
  }

  .brandText {
    color: rgba(255, 255, 255, 0.94);

    font-size: 16px;
  }

  /* =========================================================
     DESKTOP NAVIGATION
  ========================================================= */

  .desktopNav {
    display: flex;
    align-items: center;

    gap: clamp(24px, 2.5vw, 40px);

    margin-left: auto;

    color: rgba(255, 255, 255, 0.7);

    font-size: 15px;
  }

  .desktopNav a {
    position: relative;

    padding-block: 8px;

    transition: color 180ms ease;
  }

  .desktopNav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 3px;

    width: 100%;
    height: 1px;

    background: var(--color-accent);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform 220ms ease;
  }

  .desktopNav a:hover {
    color: #ffffff;
  }

  .desktopNav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* =========================================================
     NAV ACTIONS
  ========================================================= */

  .navActions {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-left: auto;
  }

  .languageButton {
    min-width: 42px;
    min-height: 44px;

    border: 0;

    background: transparent;
    color: #ffffff;

    font-size: 16px;

    cursor: pointer;

    transition: color 180ms ease;
  }

  .languageButton:hover {
    color: var(--color-accent);
  }

  /* =========================================================
     BUTTONS
  ========================================================= */

  .primaryButton,
  .secondaryButton {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-inline: 22px;

    border: 1px solid transparent;

    font-size: 16px;
    font-weight: 400;

    white-space: nowrap;

    transition: background 180ms ease, color 180ms ease, border-color 180ms ease,
      transform 180ms ease;
  }

  .primaryButton {
    background: var(--color-accent);
    color: #0b0d08;

    border-color: var(--color-accent);

    box-shadow: 0 10px 28px rgba(223, 255, 55, 0.18);
  }

  .primaryButton:hover {
    background: var(--color-accent-hover);

    border-color: var(--color-accent-hover);

    transform: translateY(-2px);
  }

  .secondaryButton {
    background: transparent;
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.25);
  }

  .secondaryButton:hover {
    background: rgba(255, 255, 255, 0.07);

    border-color: rgba(255, 255, 255, 0.42);

    transform: translateY(-2px);
  }

  /* =========================================================
     MOBILE MENU BUTTON
  ========================================================= */

  .menuButton {
    display: none;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    background: rgba(255, 255, 255, 0.04);

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 6px;

    cursor: pointer;
  }

  .menuButton span {
    width: 19px;
    height: 1px;

    background: #ffffff;

    transition: transform 280ms ease;
  }

  .menuButton.isActive span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .menuButton.isActive span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  /* =========================================================
     HERO
  ========================================================= */

  .hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: var(--color-bg);
  }

  .heroMedia {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-image: linear-gradient(
        90deg,
        rgba(3, 5, 3, 0.93) 0%,
        rgba(3, 5, 3, 0.74) 36%,
        rgba(3, 5, 3, 0.35) 68%,
        rgba(3, 5, 3, 0.16) 100%
      ),
      linear-gradient(0deg, rgba(3, 5, 3, 0.76) 0%, rgba(3, 5, 3, 0.08) 48%),
      url("assets/images/hero.webp");

    background-size: cover;
    background-position: 35% center;
    background-repeat: no-repeat;

    transform: scale(1.015);
  }

  .heroOverlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18) 0%,
      transparent 28%,
      rgba(0, 0, 0, 0.18) 100%
    );
  }

  .heroContent {
    position: relative;

    z-index: 2;

    padding-top: 150px;
    padding-bottom: 72px;
  }

  .heroEyebrow {
    margin-bottom: 18px;

    color: var(--color-accent);

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.18em;
  }

  .hero h1 {
    max-width: 900px;

    font-family: "Khand", sans-serif;

    font-size: clamp(78px, 8.7vw, 150px);
    font-weight: 700;

    line-height: 0.82;

    letter-spacing: -0.035em;

    text-transform: uppercase;
  }

  .hero h1 span {
    display: block;

    color: var(--color-accent);
  }

  .heroDescription {
    max-width: 590px;

    margin-top: 32px;

    color: var(--color-text-soft);

    font-size: 19px;
    font-weight: 300;

    line-height: 1.6;
  }

  .heroActions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
  }

  /* =========================================================
     HERO TRUST TICKER
  ========================================================= */

  .heroTrust {
    width: 100%;
    min-height: 58px;

    margin-top: 52px;

    display: grid;

    grid-template-columns:
      auto
      minmax(0, 1fr);

    overflow: hidden;

    background: rgba(4, 7, 4, 0.88);

    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .trustLabelEspn {
    position: relative;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 10px;

    padding-inline: 18px 22px;

    white-space: nowrap;

    color: rgba(255, 255, 255, 0.88);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.11em;

    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .trustPulse {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--color-accent);
  }

  .trustTicker {
    position: relative;

    min-width: 0;

    overflow: hidden;
  }

  .trustTicker::before,
  .trustTicker::after {
    content: "";

    position: absolute;

    top: 0;

    z-index: 3;

    width: 48px;
    height: 100%;

    pointer-events: none;
  }

  .trustTicker::before {
    left: 0;

    background: linear-gradient(to right, rgba(4, 7, 4, 0.98), transparent);
  }

  .trustTicker::after {
    right: 0;

    background: linear-gradient(to left, rgba(4, 7, 4, 0.98), transparent);
  }

  .trustTrack {
    width: max-content;
    min-height: 58px;

    display: flex;
    align-items: center;

    animation: trustScroll 28s linear infinite;
  }

  .trustTicker:hover .trustTrack {
    animation-play-state: paused;
  }

  .trustItem {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-inline: 28px;

    white-space: nowrap;

    color: rgba(255, 255, 255, 0.64);

    font-size: 13px;
  }

  .trustItem span {
    color: var(--color-accent);

    font-family: "Khand", sans-serif;

    font-size: 15px;
    font-weight: 600;
  }

  .trustItem::after {
    content: "";

    width: 4px;
    height: 4px;

    margin-left: 28px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.22);
  }

  @keyframes trustScroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  /* =========================================================
     MOBILE MENU
  ========================================================= */

  .mobileMenu {
    position: fixed;
    inset: 0;

    z-index: 100;

    visibility: hidden;

    pointer-events: none;
  }

  .mobileMenu.isOpen {
    visibility: visible;

    pointer-events: auto;
  }

  .mobileMenuBackdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    opacity: 0;

    transition: opacity 350ms ease;
  }

  .mobileMenu.isOpen .mobileMenuBackdrop {
    opacity: 1;
  }

  .mobileMenuPanel {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    padding: max(24px, env(safe-area-inset-top)) 20px
      max(24px, env(safe-area-inset-bottom));

    background: linear-gradient(155deg, #070a07, #0b0e0a);

    color: #ffffff;

    transform: translateY(-100%);

    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobileMenu.isOpen .mobileMenuPanel {
    transform: translateY(0);
  }

  .mobileMenuTop {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--color-border);
  }

  .mobileMenuBrand {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 14px;
  }

  .mobileMenuNav {
    display: flex;
    flex-direction: column;

    margin-top: 38px;
  }

  .mobileMenuNav a {
    display: grid;

    grid-template-columns:
      38px
      minmax(0, 1fr);

    align-items: baseline;

    padding-block: 13px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);

    font-family: "Khand", sans-serif;

    font-size: clamp(36px, 8vw, 52px);
    font-weight: 600;

    line-height: 0.95;
  }

  .menuIndex {
    color: var(--color-accent);

    font-family: "Hind", sans-serif;

    font-size: 10px;
  }

  .mobileMenuClose {
    position: relative;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, 0.16);

    background: rgba(255, 255, 255, 0.04);

    cursor: pointer;
  }

  .mobileMenuClose span {
    position: absolute;

    width: 18px;
    height: 1px;

    background: currentColor;
  }

  .mobileMenuClose span:first-child {
    transform: rotate(45deg);
  }

  .mobileMenuClose span:last-child {
    transform: rotate(-45deg);
  }

  .mobileMenuContact {
    min-height: 66px;

    margin-top: 14px;

    padding-inline: 16px;

    grid-template-columns:
      36px
      minmax(0, 1fr)
      auto !important;

    align-items: center !important;

    background: var(--color-accent);
    color: #0b0e08;

    border-bottom: 0 !important;
  }

  .mobileMenuContact .menuIndex {
    color: rgba(11, 14, 8, 0.55);
  }

  .menuArrow {
    font-family: "Hind", sans-serif;

    font-size: 22px;
  }

  .mobileMenuBottom {
    margin-top: auto;

    padding-top: 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobileMenuEmail {
    color: #ffffff;

    font-size: 16px;
  }

  .mobileMenuSocials {
    display: flex;

    gap: 8px;

    flex-shrink: 0;
  }

  .mobileMenuSocials a {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.16);

    color: #ffffff;
  }

  .mobileMenuSocials svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;
  }

  .mobileMenuSocials a:nth-child(2) svg,
  .mobileMenuSocials a:nth-child(3) svg {
    fill: currentColor;

    stroke: none;
  }

  /* =========================================================
     WH DIFFERENCE
  ========================================================= */

  .differenceSection {
    padding: clamp(88px, 9vw, 150px) 0;

    background: #070a07;
    color: #ffffff;
  }

  .differenceHeader {
    display: grid;

    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(320px, 0.65fr);

    column-gap: clamp(60px, 8vw, 150px);

    align-items: end;

    margin-bottom: clamp(52px, 6vw, 84px);
  }

  .differenceHeader .sectionEyebrow {
    grid-column: 1 / -1;

    width: fit-content;

    margin-bottom: 22px;

    color: var(--color-accent);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.16em;
  }

  .differenceHeader h2 {
    max-width: 850px;

    font-family: "Khand", sans-serif;

    font-size: clamp(58px, 6.5vw, 96px);
    font-weight: 700;

    line-height: 0.91;

    letter-spacing: -0.025em;

    text-transform: uppercase;
  }

  .differenceHeader h2 span {
    color: var(--color-accent);
  }

  .differenceHeader > p {
    align-self: end;

    max-width: 500px;

    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.66);

    font-size: 18px;
    font-weight: 300;

    line-height: 1.65;
  }

  /* =========================================================
     DIFFERENCE GRID
  ========================================================= */

  .differenceGrid {
    display: grid;

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(360px, 1.25fr)
      minmax(0, 0.9fr);

    gap: 18px;

    align-items: stretch;
  }

  .differenceColumn {
    display: grid;

    grid-template-rows:
      1.12fr
      0.88fr;

    gap: 18px;
  }

  .differenceColumnRight {
    grid-template-rows:
      0.88fr
      1.12fr;
  }

  .differenceCard {
    position: relative;

    min-height: 300px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 28px;

    overflow: hidden;

    background: #0b0f0b;

    border: 1px solid rgba(255, 255, 255, 0.09);

    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 320ms ease, background 320ms ease;
  }

  .differenceCardCompact {
    min-height: 250px;
  }

  .differenceCard::before {
    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 2px;

    background: var(--color-accent);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .differenceCard:hover {
    transform: translateY(-5px);

    border-color: rgba(223, 255, 55, 0.34);

    background: #0e130e;
  }

  .differenceCard:hover::before {
    transform: scaleX(1);
  }

  .differenceCardTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
  }

  .differenceNumber {
    color: rgba(255, 255, 255, 0.3);

    font-size: 11px;

    letter-spacing: 0.14em;
  }

  .differenceIcon {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    color: var(--color-accent);

    transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .differenceIcon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .differenceCard:hover .differenceIcon {
    transform: translateY(-5px) rotate(2deg);
  }

  .differenceCardContent {
    position: relative;

    z-index: 1;

    margin-top: 40px;
  }

  .differenceLabel {
    display: block;

    margin-bottom: 10px;

    color: var(--color-accent);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.14em;
  }

  .differenceCard h3 {
    max-width: 340px;

    font-family: "Khand", sans-serif;

    font-size: clamp(28px, 2.4vw, 39px);
    font-weight: 600;

    line-height: 1;
  }

  .differenceCard p {
    max-width: 360px;

    margin-top: 14px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 14px;

    line-height: 1.6;
  }

  /* =========================================================
     DIFFERENCE FEATURE IMAGE
  ========================================================= */

  .differenceFeature {
    position: relative;

    min-height: 580px;

    overflow: hidden;

    background: #0b0f0b;
  }

  .differenceFeature img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .differenceFeature:hover img {
    transform: scale(1.045);
  }

  .differenceFeatureShade {
    position: absolute;
    inset: 0;

    background: linear-gradient(
      180deg,
      rgba(3, 5, 3, 0.08) 10%,
      rgba(3, 5, 3, 0.16) 42%,
      rgba(3, 5, 3, 0.9) 100%
    );
  }

  .differenceFeatureContent {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    z-index: 2;
  }

  .differenceFeatureContent > span {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--color-accent);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.15em;
  }

  .differenceFeatureContent h3 {
    max-width: 470px;

    font-family: "Khand", sans-serif;

    font-size: clamp(38px, 4.2vw, 62px);
    font-weight: 600;

    line-height: 0.95;
  }

  .differenceFeatureContent p {
    max-width: 470px;

    margin-top: 14px;

    color: rgba(255, 255, 255, 0.67);

    font-size: 14px;

    line-height: 1.6;
  }

  /* =========================================================
     REVEAL
  ========================================================= */

  [data-reveal] {
    opacity: 0;

    transform: translateY(24px);

    transition: opacity 700ms ease,
      transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-reveal].isVisible {
    opacity: 1;

    transform: translateY(0);
  }

  /* =========================================================
     SERVICES
  ========================================================= */

  .servicesSection {
    position: relative;

    padding: clamp(100px, 10vw, 160px) 0;

    background: var(--color-light-bg);
    color: var(--color-light-text);
  }

  .servicesLayout {
    display: grid;

    grid-template-columns:
      minmax(340px, 0.78fr)
      minmax(0, 1.22fr);

    gap: clamp(72px, 8vw, 130px);

    align-items: start;
  }

  /* =========================================================
     SERVICES INTRO
  ========================================================= */

  .servicesIntro {
    width: 100%;
    min-width: 0;
  }

  .servicesIntro .sectionEyebrow {
    display: block;

    margin-bottom: 20px;

    color: #718800;

    font-size: 13px;
  }

  .servicesIntro h2 {
    width: 100%;
    max-width: 620px;

    font-family: "Khand", sans-serif;

    font-size: clamp(58px, 5.6vw, 88px);
    font-weight: 700;

    line-height: 0.88;

    letter-spacing: -0.035em;

    text-transform: uppercase;
  }

  .servicesIntro h2 span {
    display: block;

    color: var(--color-light-accent);
  }

  .servicesIntro p {
    max-width: 430px;

    margin-top: 30px;

    color: rgba(16, 19, 15, 0.64);

    font-size: 17px;
    font-weight: 300;

    line-height: 1.65;
  }

  .servicesIntro .primaryButton {
    width: fit-content;

    min-height: 52px;

    margin-top: 44px;

    padding-inline: 26px;

    background: #10130f;
    color: #ffffff;

    border-color: #10130f;

    box-shadow: none;
  }

  .servicesIntro .primaryButton:hover {
    background: var(--color-accent);
    color: #10130f;

    border-color: var(--color-accent);
  }

  /* =========================================================
     DESKTOP STICKY SERVICES
  ========================================================= */

  @media (min-width: 901px) {
    .servicesIntro {
      position: sticky;

      top: 96px;

      align-self: start;
    }
  }

  /* =========================================================
     SERVICES LIST
  ========================================================= */

  .servicesList {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 18px;

    padding-top: 38px;
  }

  /* =========================================================
     SERVICE PANEL
  ========================================================= */

  .servicePanel {
    position: relative;

    width: 100%;
    min-width: 0;

    min-height: 330px;

    display: grid;

    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(260px, 0.95fr);

    overflow: hidden;

    background: #090c09;
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 260ms ease, box-shadow 260ms ease;
  }

  .servicePanel:hover {
    transform: translateY(-4px);

    border-color: rgba(223, 255, 55, 0.32);

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.11);
  }

  .servicePanelContent {
    min-width: 0;
    min-height: 330px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 27px 28px 30px;
  }

  .serviceMeta {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 10px;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 0.12em;
  }

  .serviceMeta span:first-child {
    flex-shrink: 0;

    color: var(--color-accent);
  }

  .servicePanel h3 {
    max-width: 520px;

    font-family: "Khand", sans-serif;

    font-size: clamp(35px, 3vw, 50px);
    font-weight: 600;

    line-height: 0.94;

    letter-spacing: -0.025em;
  }

  .servicePanel p {
    max-width: 520px;

    margin-top: 15px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;

    line-height: 1.6;
  }

  /* =========================================================
     SERVICE IMAGE
  ========================================================= */

  .servicePanelMedia {
    position: relative;

    min-width: 0;
    min-height: 330px;

    overflow: hidden;

    background: #111511;
  }

  .servicePanelMedia::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
      90deg,
      rgba(9, 12, 9, 0.22),
      rgba(9, 12, 9, 0.02)
    );

    pointer-events: none;
  }

  .servicePanelMedia img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: saturate(0.82) contrast(1.03);

    transform: scale(1.01);

    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 350ms ease;
  }

  .servicePanel:hover .servicePanelMedia img {
    transform: scale(1.05);

    filter: saturate(1) contrast(1.04);
  }

  /* =========================================================
     ALTERNATING SERVICES
  ========================================================= */

  .servicePanel:nth-child(even) {
    grid-template-columns:
      minmax(260px, 0.95fr)
      minmax(0, 1.05fr);
  }

  .servicePanel:nth-child(even) .servicePanelMedia {
    order: 1;
  }

  .servicePanel:nth-child(even) .servicePanelContent {
    order: 2;
  }

  .servicePanelFinal {
    border-bottom: 3px solid var(--color-accent);
  }

  /* =========================================================
     LARGE LAPTOP
  ========================================================= */

  @media (max-width: 1280px) {
    .siteContainer {
      width: calc(100% - 64px);
    }

    .hero h1 {
      font-size: clamp(74px, 9vw, 120px);
    }

    .servicesLayout {
      grid-template-columns:
        minmax(300px, 0.75fr)
        minmax(0, 1.25fr);

      gap: 64px;
    }

    .servicesIntro h2 {
      font-size: clamp(54px, 5.5vw, 78px);
    }
  }

  /* =========================================================
     TABLET
  ========================================================= */

  @media (max-width: 1024px) {
    .siteContainer {
      width: calc(100% - 40px);
    }

    .desktopNav {
      display: none;
    }

    .navActions .primaryButton {
      display: none;
    }

    .menuButton {
      display: flex;
    }

    /* HERO */

    .heroContent {
      padding-top: 140px;
      padding-bottom: 50px;
    }

    .hero h1 {
      max-width: 760px;

      font-size: clamp(70px, 11vw, 104px);
    }

    /* DIFFERENCE */

    .differenceHeader {
      grid-template-columns: 1fr;

      row-gap: 0;

      margin-bottom: 48px;
    }

    .differenceHeader .sectionEyebrow,
    .differenceHeader h2,
    .differenceHeader > p {
      grid-column: 1;
    }

    .differenceHeader > p {
      max-width: 620px;

      margin-top: 24px;
      margin-bottom: 0;
    }

    .differenceGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      gap: 14px;
    }

    .differenceColumn {
      display: contents;
    }

    .differenceColumnLeft .differenceCard:first-child {
      order: 1;
    }

    .differenceColumnRight .differenceCard:first-child {
      order: 2;
    }

    .differenceFeature {
      order: 3;

      grid-column: 1 / -1;

      min-height: 520px;
    }

    .differenceColumnLeft .differenceCard:last-child {
      order: 4;
    }

    .differenceColumnRight .differenceCard:last-child {
      order: 5;
    }

    .differenceCard,
    .differenceCardCompact {
      min-height: 290px;

      padding: 25px;
    }
  }

  /* =========================================================
     SERVICES TABLET
  ========================================================= */

  @media (max-width: 900px) {
    .servicesSection {
      padding: 88px 0;
    }

    .servicesLayout {
      display: block;
    }

    .servicesIntro {
      position: static;

      display: grid;

      grid-template-columns:
        minmax(0, 1fr)
        minmax(250px, 0.72fr);

      column-gap: 38px;

      align-items: end;
    }

    .servicesIntro .sectionEyebrow {
      grid-column: 1 / -1;
    }

    .servicesIntro h2 {
      grid-column: 1;

      max-width: 500px;
    }

    .servicesIntro p {
      grid-column: 2;

      margin-top: 0;
      margin-bottom: 4px;
    }

    .servicesIntro .primaryButton {
      grid-column: 2;

      margin-top: 22px;
    }

    .servicesList {
      margin-top: 52px;

      padding-top: 0;
    }

    .servicePanel,
    .servicePanel:nth-child(even) {
      grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, 0.8fr);
    }

    .servicePanel:nth-child(even) .servicePanelContent {
      order: 1;
    }

    .servicePanel:nth-child(even) .servicePanelMedia {
      order: 2;
    }
  }

  /* =========================================================
     MOBILE
  ========================================================= */

  @media (max-width: 640px) {
    .siteContainer {
      width: calc(100% - 32px);
    }

    /* HEADER */

    .siteHeader {
      padding-top: 14px;
    }

    .navInner {
      min-height: 58px;

      padding-inline: 13px;
    }

    .brandMark {
      font-size: 25px;
    }

    .brandText {
      display: none;
    }

    .navActions {
      gap: 5px;
    }

    .languageButton {
      min-width: 36px;
      min-height: 42px;

      font-size: 13px;
    }

    .menuButton {
      width: 42px;
      height: 42px;
    }

    /* HERO */

    .hero {
      min-height: 100svh;
    }

    .heroMedia {
      background-image: linear-gradient(
          180deg,
          rgba(3, 5, 3, 0.42),
          rgba(3, 5, 3, 0.56) 46%,
          rgba(3, 5, 3, 0.94)
        ),
        url("assets/images/hero.webp");

      background-position: 50% center;

      transform: none;
    }

    .heroContent {
      padding-top: 108px;
      padding-bottom: 22px;
    }

    .heroEyebrow {
      margin-bottom: 12px;

      font-size: 10px;
    }

    .hero h1 {
      max-width: 100%;

      font-size: clamp(50px, 16vw, 70px);

      line-height: 0.86;
    }

    .heroDescription {
      max-width: 100%;

      margin-top: 20px;

      font-size: 15px;

      line-height: 1.5;
    }

    .heroActions {
      display: grid;

      grid-template-columns: 1fr;

      gap: 9px;

      margin-top: 24px;
    }

    .heroActions .primaryButton,
    .heroActions .secondaryButton {
      width: 100%;
    }

    /* TRUST */

    .heroTrust {
      min-height: 50px;

      margin-top: 26px;
    }

    .trustLabelEspn {
      padding-inline: 10px 12px;

      gap: 6px;

      font-size: 8px;
    }

    .trustPulse {
      width: 5px;
      height: 5px;
    }

    .trustTrack {
      min-height: 50px;
    }

    .trustItem {
      padding-inline: 16px;

      font-size: 10px;
    }

    .trustItem span {
      font-size: 12px;
    }

    .trustItem::after {
      margin-left: 16px;
    }

    .trustTicker::before,
    .trustTicker::after {
      width: 20px;
    }
    
    /* =========================================================
   RTL HERO TRUST TICKER
========================================================= */

html[dir="rtl"] .heroTrustEspn {
  direction: rtl;
}

html[dir="rtl"] .trustLabelEspn {
  direction: rtl;
  text-align: right;
}

/*
  Keep the ticker engine LTR so the infinite loop
  behaves exactly like the English version.
*/
html[dir="rtl"] .trustTicker {
  direction: ltr;
}

html[dir="rtl"] .trustTrack {
  direction: ltr;

  display: flex;

  width: max-content;

  flex-shrink: 0;
}

/*
  Only the content inside each item is RTL.
*/
html[dir="rtl"] .trustItem {
  direction: rtl;

  text-align: right;

  flex-shrink: 0;
}

    /* MOBILE MENU */

    .mobileMenuNav {
      margin-top: 28px;
    }

    .mobileMenuNav a {
      grid-template-columns:
        30px
        minmax(0, 1fr);

      padding-block: 11px;

      font-size: clamp(37px, 11vw, 52px);
    }

    .mobileMenuBottom {
      align-items: flex-start;

      flex-direction: column;

      gap: 15px;
    }

    .mobileMenuEmail {
      font-size: 14px;
    }

    /* DIFFERENCE */

    .differenceSection {
      padding: 72px 0;
    }

    .differenceHeader {
      display: block;

      margin-bottom: 34px;
    }

    .differenceHeader .sectionEyebrow {
      margin-bottom: 16px;
    }

    .differenceHeader h2 {
      width: 100%;

      font-size: clamp(48px, 15vw, 66px);

      line-height: 0.9;
    }

    .differenceHeader > p {
      width: 100%;
      max-width: 100%;

      margin-top: 20px;

      font-size: 15px;

      line-height: 1.55;
    }

    .differenceGrid {
      display: flex;

      flex-direction: column;

      gap: 12px;
    }

    .differenceColumn {
      display: contents;
    }

    .differenceCard,
    .differenceCardCompact {
      width: 100%;

      min-height: 250px;

      padding: 20px;
    }

    .differenceIcon {
      width: 58px;
      height: 58px;
    }

    .differenceCardContent {
      margin-top: 30px;
    }

    .differenceCard h3 {
      font-size: clamp(28px, 8.5vw, 36px);
    }

    .differenceCard p {
      font-size: 13px;
    }

    .differenceFeature {
      width: 100%;

      min-height: 440px;
    }

    .differenceFeatureContent {
      left: 20px;
      right: 20px;
      bottom: 20px;
    }

    .differenceFeatureContent h3 {
      font-size: clamp(34px, 10vw, 44px);
    }

    /* SERVICES */

    .servicesSection {
      padding: 72px 0 80px;
    }

    .servicesLayout {
      display: block;

      width: 100%;
    }

    .servicesIntro {
      display: block;

      width: 100%;
      max-width: 100%;
    }

    .servicesIntro .sectionEyebrow {
      margin-bottom: 14px;

      font-size: 11px;
    }

    .servicesIntro h2 {
      width: 100%;
      max-width: 100%;

      font-size: clamp(46px, 14vw, 61px);

      line-height: 0.89;

      letter-spacing: -0.03em;
    }

    .servicesIntro h2 span {
      display: block;
    }

    .servicesIntro p {
      width: 100%;
      max-width: 100%;

      margin-top: 22px;

      font-size: 15px;

      line-height: 1.55;
    }

    .servicesIntro .primaryButton {
      width: 100%;

      min-height: 52px;

      margin-top: 26px;
    }

    .servicesList {
      width: 100%;

      margin-top: 40px;

      padding: 0;

      gap: 13px;
    }

    /* SERVICE CARDS */

    .servicePanel,
    .servicePanel:nth-child(even) {
      width: 100%;
      max-width: 100%;

      min-height: 0;

      display: flex;

      flex-direction: column;

      transform: none;
    }

    .servicePanel:hover {
      transform: none;
    }

    .servicePanelMedia,
    .servicePanel:nth-child(even) .servicePanelMedia {
      order: 1;

      width: 100%;

      min-height: 0;

      aspect-ratio: 16 / 10;
    }

    .servicePanelMedia::after {
      background: linear-gradient(
        180deg,
        transparent 45%,
        rgba(9, 12, 9, 0.25)
      );
    }

    .servicePanelContent,
    .servicePanel:nth-child(even) .servicePanelContent {
      order: 2;

      width: 100%;

      min-height: 210px;

      padding: 18px 18px 21px;
    }

    .serviceMeta {
      display: grid;

      grid-template-columns:
        auto
        minmax(0, 1fr);

      gap: 12px;

      margin-bottom: 28px;

      font-size: 8px;

      letter-spacing: 0.09em;
    }

    .serviceMeta span:last-child {
      text-align: right;
    }

    .servicePanel h3 {
      width: 100%;

      font-size: clamp(29px, 8.5vw, 37px);

      line-height: 0.95;
    }

    .servicePanel p {
      width: 100%;

      margin-top: 11px;

      font-size: 13px;

      line-height: 1.48;
    }
  }

  /* =========================================================
     SMALL MOBILE
  ========================================================= */

  @media (max-width: 380px) {
    .siteContainer {
      width: calc(100% - 24px);
    }

    .hero h1 {
      font-size: clamp(47px, 15.5vw, 62px);
    }

    .servicesIntro h2,
    .differenceHeader h2 {
      font-size: clamp(44px, 14vw, 56px);
    }
  }

  /* =========================================================
     REDUCED MOTION
  ========================================================= */

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    .trustTrack {
      animation: none;
    }

    [data-reveal] {
      opacity: 1;

      transform: none;

      transition: none;
    }

    .primaryButton,
    .secondaryButton,
    .differenceCard,
    .differenceIcon,
    .differenceFeature img,
    .servicePanel,
    .servicePanelMedia img,
    .mobileMenuPanel,
    .mobileMenuBackdrop {
      transition: none;
    }
  }
}

/* =========================================================
   FEATURED PLAYERS
========================================================= */

.featuredPlayersSection {
  padding: clamp(100px, 10vw, 160px) 0;

  background: #070a07;
  color: #ffffff;
}

.featuredPlayersHeader {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, 0.75fr);

  align-items: end;

  gap: clamp(50px, 8vw, 130px);

  margin-bottom: clamp(52px, 6vw, 82px);
}

.featuredPlayersHeader .sectionEyebrow {
  grid-column: 1 / -1;

  display: block;

  margin-bottom: 4px;

  color: var(--color-accent);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.16em;
}

.featuredPlayersHeader h2 {
  max-width: 780px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 6.2vw, 92px);
  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.03em;

  text-transform: uppercase;
}

.featuredPlayersHeader h2 span {
  display: block;

  color: var(--color-accent);
}

.featuredPlayersHeader p {
  max-width: 500px;

  margin-bottom: 5px;

  color: rgba(255, 255, 255, 0.64);

  font-size: 17px;

  line-height: 1.65;
}

/* =========================================================
     PLAYER GRID
  ========================================================= */

.featuredPlayersGrid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

  align-items: end;
}

/* =========================================================
     PLAYER CARD
  ========================================================= */

.playerCard {
  position: relative;

  min-height: 560px;

  overflow: hidden;

  background: #0b0f0b;

  border: 1px solid rgba(255, 255, 255, 0.08);

  cursor: pointer;

  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease;
}

.playerCard:nth-child(1),
.playerCard:nth-child(3) {
  min-height: 620px;
}

.playerCard:nth-child(2),
.playerCard:nth-child(4) {
  min-height: 560px;
}

.playerCard:hover {
  transform: translateY(-7px);

  border-color: rgba(223, 255, 55, 0.34);
}

.playerCard img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.86) contrast(1.02);

  transform: scale(1.01);

  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1), filter 350ms ease;
}

.playerCard:hover img {
  transform: scale(1.06);

  filter: saturate(1) contrast(1.04);
}

.playerCardShade {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(3, 5, 3, 0.06) 20%,
    rgba(3, 5, 3, 0.22) 52%,
    rgba(3, 5, 3, 0.94) 100%
  );
}

/* =========================================================
     PLAYER TOP
  ========================================================= */

.playerCardTop {
  position: absolute;

  top: 18px;
  left: 18px;
  right: 18px;

  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.playerCardIndex {
  color: var(--color-accent);
}

.playerCardDemo {
  color: rgba(255, 255, 255, 0.58);
}

/* =========================================================
     PLAYER CONTENT
  ========================================================= */

.playerCardContent {
  position: absolute;

  left: 20px;
  right: 20px;
  bottom: 20px;

  z-index: 2;
}

.playerCardType {
  display: block;

  margin-bottom: 8px;

  color: var(--color-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}

.playerCard h3 {
  font-family: "Khand", sans-serif;

  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 600;

  line-height: 0.92;

  letter-spacing: -0.025em;

  text-transform: uppercase;
}

.playerCardMeta {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 12px;

  color: rgba(255, 255, 255, 0.6);

  font-size: 11px;
}

.playerCardMeta span + span::before {
  content: "•";

  margin-right: 9px;

  color: rgba(255, 255, 255, 0.3);
}

/* =========================================================
     PLAYER ACTION
  ========================================================= */

.playerCardAction {
  margin-top: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: 13px;

  border-top: 1px solid rgba(255, 255, 255, 0.13);

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;

  transition: color 220ms ease;
}

.playerCardAction svg {
  width: 18px;
  height: 18px;

  color: var(--color-accent);

  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.playerCard:hover .playerCardAction {
  color: #ffffff;
}

.playerCard:hover .playerCardAction svg {
  transform: translateX(5px);
}

/* =========================================================
     SECTION CTA
  ========================================================= */

.featuredPlayersCTA {
  display: flex;
  justify-content: center;

  margin-top: 46px;
}

.playersCTA {
  gap: 14px;

  background: #ffffff;
  color: #0b0d08;

  border-color: #ffffff;

  box-shadow: none;
}

.playersCTA svg {
  width: 18px;
  height: 18px;

  color: #0b0d08;

  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}

.playersCTA:hover {
  background: var(--color-accent);

  border-color: var(--color-accent);

  color: #0b0d08;
}

.playersCTA:hover svg {
  transform: translateX(5px);
}

html[dir="rtl"] .playerCardAction svg,
html[dir="rtl"] .playersCTA svg {
  transform: scaleX(-1);
}
/* =========================================================
     FEATURED PLAYERS TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .featuredPlayersHeader {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .featuredPlayersHeader .sectionEyebrow,
  .featuredPlayersHeader h2,
  .featuredPlayersHeader p {
    grid-column: 1;
  }

  .featuredPlayersHeader p {
    max-width: 620px;
  }

  .featuredPlayersGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
  }

  .playerCard,
  .playerCardFeatured {
    min-height: 540px;
  }
}

/* =========================================================
     FEATURED PLAYERS MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .featuredPlayersSection {
    padding: 76px 0 84px;
  }

  .featuredPlayersHeader {
    margin-bottom: 38px;
  }

  .featuredPlayersHeader h2 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .featuredPlayersHeader p {
    font-size: 15px;

    line-height: 1.55;
  }

  .featuredPlayersGrid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    width: calc(100% - 12px);

    margin-inline: auto;
  }

  .playerCard,
  .playerCardFeatured {
    min-height: 500px;
  }

  .playerCard h3 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .featuredPlayersCTA {
    margin-top: 36px;
  }

  .playersCTA {
    width: calc(100% - 12px);
  }
}

/* =========================================================
   CAREER JOURNEY
========================================================= */

.journeySection {
  position: relative;

  background: #f1f2ec;
  color: #10130f;
}

.journeyScrollArea {
  position: relative;

  height: 420vh;
}

.journeySticky {
  position: sticky;

  top: 0;

  height: 100svh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;
}

/* =========================================================
     JOURNEY LAYOUT
  ========================================================= */

.journeyLayout {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);

  gap: clamp(60px, 7vw, 120px);

  align-items: center;
}

/* =========================================================
     JOURNEY INTRO
  ========================================================= */

.journeyIntro {
  position: relative;

  z-index: 1;
}

.journeyIntro .sectionEyebrow {
  display: block;

  margin-bottom: 20px;

  color: #718800;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.journeyIntro h2 {
  max-width: 600px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 5.5vw, 88px);
  font-weight: 700;

  line-height: 0.89;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.journeyIntro h2 span {
  display: block;

  color: var(--color-light-accent);
}

.journeyIntro p {
  max-width: 420px;

  margin-top: 28px;

  color: rgba(16, 19, 15, 0.64);

  font-size: 17px;
  font-weight: 300;

  line-height: 1.65;
}

/* =========================================================
     JOURNEY COUNTER
  ========================================================= */

.journeyCounter {
  width: 180px;

  margin-top: 42px;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  color: rgba(16, 19, 15, 0.4);

  font-size: 11px;
}

.journeyCurrent {
  color: #10130f;
}

.journeyCounterLine {
  height: 1px;

  background: rgba(16, 19, 15, 0.2);
}

/* =========================================================
     JOURNEY VIEWPORT
  ========================================================= */

.journeyViewport {
  position: relative;

  z-index: 5;
  width: 100%;

  overflow: visible;
}

.journeyTrack {
  position: relative;

  z-index: 5;

  display: flex;

  gap: 16px;

  width: max-content;

  will-change: transform;

  transform: translate3d(0, 0, 0);
}

/* =========================================================
     JOURNEY CARD
  ========================================================= */

.journeyCard {
  position: relative;

  z-index: 6;

  width: clamp(300px, 25vw, 390px);
  height: 500px;

  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 26px;

  background: #0a0d0a;
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.09);

  overflow: hidden;

  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease, background 260ms ease;
}

.journeyCardFeatured {
  height: 540px;

  transform: translateY(-20px);
}

.journeyCard:hover {
  transform: translateY(-7px);

  background: #0e130e;

  border-color: rgba(223, 255, 55, 0.36);
}

.journeyCardFeatured:hover {
  transform: translateY(-27px);
}

/* =========================================================
     CARD TOP
  ========================================================= */

.journeyCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.journeyNumber {
  color: var(--color-accent);
}

.journeyLabel {
  color: rgba(255, 255, 255, 0.45);
}

/* =========================================================
     JOURNEY ICON
  ========================================================= */

.journeyCardIcon {
  width: 86px;
  height: 86px;

  margin-left: auto;

  color: var(--color-accent);

  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.journeyCardIcon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.55;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.journeyCard:hover .journeyCardIcon {
  transform: translateY(-5px) rotate(3deg);
}

/* =========================================================
     CARD CONTENT
  ========================================================= */

.journeyCardContent h3 {
  max-width: 320px;

  font-family: "Khand", sans-serif;

  font-size: clamp(34px, 3vw, 46px);
  font-weight: 600;

  line-height: 0.96;

  letter-spacing: -0.02em;
}

.journeyCardContent p {
  max-width: 310px;

  margin-top: 16px;

  color: rgba(255, 255, 255, 0.61);

  font-size: 14px;

  line-height: 1.55;
}

/* =========================================================
   RTL JOURNEY
========================================================= */

html[dir="rtl"] .journeyViewport {
  direction: rtl;
}

html[dir="rtl"] .journeyTrack {
  direction: rtl;
}

html[dir="rtl"] .journeyCard {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .journeyCardTop,
html[dir="rtl"] .journeyCardContent {
  direction: rtl;
  text-align: right;
}

/* =========================================================
     PROGRESS BAR
  ========================================================= */

.journeyProgress {
  margin-top: 42px;
}

.journeyProgressTrack {
  position: relative;

  width: 100%;
  height: 1px;

  background: rgba(16, 19, 15, 0.14);

  overflow: hidden;
}

.journeyProgressFill {
  position: absolute;

  inset: 0 auto 0 0;

  width: 0%;

  background: #10130f;

  transition: width 80ms linear;
}

/* =========================================================
     JOURNEY TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .journeyLayout {
    grid-template-columns:
      minmax(260px, 0.75fr)
      minmax(0, 1.25fr);

    gap: 45px;
  }

  .journeyIntro h2 {
    font-size: clamp(52px, 7vw, 72px);
  }

  .journeyCard {
    width: 310px;
    height: 460px;
  }

  .journeyCardFeatured {
    height: 500px;
  }
}

/* =========================================================
     JOURNEY MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .journeySection {
    padding: 74px 0 84px;
  }

  .journeyScrollArea {
    height: auto;
  }

  .journeySticky {
    position: static;

    height: auto;

    display: block;

    overflow: visible;
  }

  .journeyLayout {
    display: block;
  }

  .journeyIntro {
    width: 100%;
  }

  .journeyIntro h2 {
    width: 100%;

    font-size: clamp(46px, 14vw, 60px);

    line-height: 0.9;
  }

  .journeyIntro p {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    font-size: 15px;

    line-height: 1.55;
  }

  .journeyCounter {
    display: none;
  }

  /* Native horizontal mobile scrolling */

  .journeyViewport {
    width: 100vw;

    margin-top: 42px;
    margin-left: calc(50% - 50vw);

    overflow-x: auto;

    scrollbar-width: none;

    scroll-snap-type: x mandatory;

    overscroll-behavior-inline: contain;
  }

  .journeyViewport::-webkit-scrollbar {
    display: none;
  }

  .journeyTrack {
    gap: 12px;

    padding-inline: max(
      16px,
      calc((100vw - min(var(--container-width), calc(100vw - 32px))) / 2)
    );

    transform: none !important;
  }

  .journeyCard,
  .journeyCardFeatured {
    width: min(82vw, 330px);
    height: 430px;

    scroll-snap-align: start;

    transform: none;
  }

  .journeyCard:hover,
  .journeyCardFeatured:hover {
    transform: none;
  }

  .journeyCardIcon {
    width: 72px;
    height: 72px;
  }

  .journeyProgress {
    display: none;
  }
}

/* =========================================================
   FAQ
========================================================= */

.faqSection {
  padding: clamp(100px, 10vw, 160px) 0;

  background: #070a07;
  color: #ffffff;
}

.faqLayout {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);

  gap: clamp(70px, 8vw, 130px);

  align-items: start;
}

/* =========================================================
     FAQ INTRO
  ========================================================= */

.faqIntro {
  position: sticky;

  top: 100px;
}

.faqIntro .sectionEyebrow {
  display: block;

  margin-bottom: 20px;

  color: var(--color-accent);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.faqIntro h2 {
  max-width: 580px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 5.6vw, 88px);
  font-weight: 700;

  line-height: 0.89;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.faqIntro h2 span {
  display: block;

  color: var(--color-accent);
}

.faqIntro p {
  max-width: 420px;

  margin-top: 28px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 17px;
  font-weight: 300;

  line-height: 1.65;
}

/* =========================================================
     FAQ LIST
  ========================================================= */

.faqList {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================================================
     FAQ ITEM
  ========================================================= */

.faqItem {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  transition: border-color 220ms ease, background 220ms ease;
}

.faqItem.isOpen {
  border-color: rgba(223, 255, 55, 0.34);
}

/* =========================================================
     FAQ QUESTION
  ========================================================= */

.faqQuestion {
  width: 100%;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    44px;

  align-items: center;

  gap: 18px;

  padding: 28px 0;

  border: 0;

  background: transparent;
  color: #ffffff;

  text-align: left;

  cursor: pointer;
}

.faqNumber {
  color: var(--color-accent);

  font-size: 10px;

  letter-spacing: 0.12em;
}

.faqTitle {
  max-width: 720px;

  font-family: "Khand", sans-serif;

  font-size: clamp(28px, 2.7vw, 42px);
  font-weight: 600;

  line-height: 1;

  letter-spacing: -0.02em;
}

/* =========================================================
     FAQ ICON
  ========================================================= */

.faqIcon {
  position: relative;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.15);

  transition: background 220ms ease, border-color 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faqIcon span {
  position: absolute;

  width: 16px;
  height: 1px;

  background: var(--color-accent);

  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease;
}

.faqIcon span:last-child {
  transform: rotate(90deg);
}

/* =========================================================
     FAQ ANSWER
  ========================================================= */

.faqAnswer {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
}

.faqAnswerInner {
  overflow: hidden;
}

.faqAnswer p {
  max-width: 650px;

  padding: 0 62px 30px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 15px;

  line-height: 1.65;
}

/* =========================================================
     OPEN STATE
  ========================================================= */

.faqItem.isOpen .faqAnswer {
  grid-template-rows: 1fr;

  opacity: 1;
}

.faqItem.isOpen .faqIcon {
  background: var(--color-accent);

  border-color: var(--color-accent);

  transform: rotate(180deg);
}

.faqItem.isOpen .faqIcon span {
  background: #10130f;
}

.faqItem.isOpen .faqIcon span:last-child {
  transform: rotate(0deg);
}

/* =========================================================
     HOVER
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .faqQuestion:hover .faqTitle {
    color: var(--color-accent);
  }

  .faqQuestion:hover .faqIcon {
    border-color: var(--color-accent);

    transform: rotate(4deg);
  }

  .faqQuestion:hover .faqNumber {
    color: #ffffff;
  }
}

/* =========================================================
     FAQ MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .faqSection {
    padding: 76px 0 84px;
  }

  .faqLayout {
    display: block;
  }

  .faqIntro {
    position: static;

    margin-bottom: 42px;
  }

  .faqIntro h2 {
    width: 100%;

    font-size: clamp(46px, 14vw, 62px);

    line-height: 0.9;
  }

  .faqIntro p {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    font-size: 15px;

    line-height: 1.55;
  }

  .faqQuestion {
    grid-template-columns:
      26px
      minmax(0, 1fr)
      40px;

    gap: 12px;

    padding: 22px 0;
  }

  .faqTitle {
    font-size: clamp(25px, 7.8vw, 32px);

    line-height: 1;
  }

  .faqIcon {
    width: 40px;
    height: 40px;
  }

  .faqAnswer p {
    padding: 0 0 24px 38px;

    font-size: 14px;

    line-height: 1.55;
  }
}

/* =========================================================
   FINAL CTA
========================================================= */

.finalCtaSection {
  position: relative;

  min-height: 92svh;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: #050805;
  color: #ffffff;
}

/* =========================================================
     FINAL CTA BACKGROUND
  ========================================================= */

.finalCtaMedia {
  position: absolute;
  inset: 0;

  z-index: 0;

  background-image: url("assets/images/Player-silhouette.webp");

  background-size: cover;
  background-position:   center center;
  background-repeat: no-repeat;

  transform: scale(1.055);

  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.finalCtaSection.isVisible .finalCtaMedia  {
  transform: scale(1);
}

#newsCtaMedia {
  position: absolute;
  inset: 0;

  z-index: 0;

  background-image: url("assets/images/5.webp");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  transform: scale(1.055);

  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
     FINAL CTA OVERLAY
  ========================================================= */

.finalCtaOverlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background: linear-gradient(
      90deg,
      rgba(5, 8, 5, 0.93) 0%,
      rgba(5, 8, 5, 0.75) 38%,
      rgba(5, 8, 5, 0.42) 66%,
      rgba(5, 8, 5, 0.66) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 8, 5, 0.34) 0%,
      rgba(5, 8, 5, 0.1) 40%,
      rgba(5, 8, 5, 0.72) 100%
    );
}

/* =========================================================
     FINAL CTA CONTENT
  ========================================================= */

.finalCtaContent {
  position: relative;

  z-index: 3;

  padding-block: 120px;

  text-align: left;
}

.finalCtaContent .sectionEyebrow {
  display: block;

  margin-bottom: 22px;

  color: var(--color-accent);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.16em;
}

.finalCtaContent h2 {
  max-width: 940px;

  font-family: "Khand", sans-serif;

  font-size: clamp(72px, 8vw, 132px);
  font-weight: 700;

  line-height: 0.84;

  letter-spacing: -0.04em;

  text-transform: uppercase;
}

.finalCtaContent h2 span {
  display: block;

  color: var(--color-accent);
}

.finalCtaContent > p {
  max-width: 580px;

  margin-top: 30px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 18px;
  font-weight: 300;

  line-height: 1.62;
}

/* =========================================================
     FINAL CTA BUTTON
  ========================================================= */

.finalCtaButton {
  gap: 14px;

  margin-top: 38px;

  min-height: 54px;

  padding-inline: 26px;

  background: var(--color-accent);
  color: #0b0e08;

  border-color: var(--color-accent);

  box-shadow: none;
}

.finalCtaArrow {
  width: 19px;
  height: 19px;

  flex-shrink: 0;

  color: #0b0e08;

  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}
html[dir="rtl"] .finalCtaArrow {
  transform: scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
  .finalCtaButton:hover {
    background: #ffffff;
    color: #0b0e08;

    border-color: #ffffff;

    transform: translateY(-2px);
  }

  .finalCtaButton:hover .finalCtaArrow {
    transform: translateX(6px);
  }
}

/* =========================================================
     TRUST LINE
  ========================================================= */

.finalCtaTrust {
  margin-top: 32px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  color: rgba(255, 255, 255, 0.52);

  font-size: 12px;

  letter-spacing: 0.02em;
}

.finalCtaDot {
  width: 4px;
  height: 4px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--color-accent);
}

/* =========================================================
     FINAL CTA REVEAL
  ========================================================= */

.finalCtaContent {
  opacity: 0;

  transform: translateY(24px);

  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.finalCtaSection.isVisible .finalCtaContent {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
     FINAL CTA TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .finalCtaSection {
    min-height: 86svh;
  }

  .finalCtaContent {
    padding-block: 100px;
  }

  .finalCtaContent h2 {
    max-width: 780px;

    font-size: clamp(66px, 9vw, 100px);
  }

  .finalCtaContent > p {
    max-width: 520px;
  }

  .finalCtaMedia {
    background-position: 62% center;
  }
}

/* =========================================================
     FINAL CTA MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .finalCtaSection {
    min-height: 84svh;

    align-items: flex-end;
  }

  .finalCtaMedia {
    background-position: 72% center;

    transform: scale(1.03);
  }

  .finalCtaOverlay {
    background: linear-gradient(
      180deg,
      rgba(5, 8, 5, 0.25) 0%,
      rgba(5, 8, 5, 0.42) 38%,
      rgba(5, 8, 5, 0.94) 100%
    );
  }

  .finalCtaContent {
    width: 100%;

    padding-top: 120px;
    padding-bottom: 58px;
  }

  .finalCtaContent .sectionEyebrow {
    margin-bottom: 16px;

    font-size: 10px;
  }

  .finalCtaContent h2 {
    width: 100%;
    max-width: 100%;

    font-size: clamp(52px, 16vw, 72px);

    line-height: 0.87;

    letter-spacing: -0.035em;
  }

  .finalCtaContent > p {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    font-size: 15px;

    line-height: 1.55;
  }

  .finalCtaButton {
    width: 100%;

    margin-top: 28px;
  }

  .finalCtaTrust {
    margin-top: 24px;

    gap: 9px;

    font-size: 10px;
  }
}

/* =========================================================
     FINAL CTA REDUCED MOTION
  ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .finalCtaMedia {
    transform: none;

    transition: none;
  }

  .finalCtaContent {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .finalCtaArrow {
    transition: none;
  }
}

/* =========================================================
   RTL FINAL CTA
========================================================= */

html[dir="rtl"] .finalCtaContent {
  direction: rtl;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  text-align: right;
}

html[dir="rtl"] .finalCtaContent .sectionEyebrow {
  align-self: flex-start;

  text-align: right;
}

html[dir="rtl"] .finalCtaContent h2 {
  max-width: 900px;

  text-align: right;
}

html[dir="rtl"] .finalCtaContent > p {
  max-width: 620px;

  text-align: right;
}

html[dir="rtl"] .finalCtaButton {
  width: fit-content;

  align-self: flex-start;

  direction: rtl;
}

html[dir="rtl"] .finalCtaArrow {
  transform: scaleX(-1);
}

html[dir="rtl"] .finalCtaTrust {
  direction: rtl;

  display: flex;
  align-items: center;

  justify-content: flex-start;

  flex-wrap: wrap;

  text-align: right;
}

html[dir="rtl"] .finalCtaContent .sectionEyebrow,
html[dir="rtl"] .finalCtaContent h2,
html[dir="rtl"] .finalCtaContent > p,
html[dir="rtl"] .finalCtaButton,
html[dir="rtl"] .finalCtaTrust {
  position: relative;

  left: auto;
  right: auto;

  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   FOOTER
========================================================= */

.siteFooter {
  position: relative;

  padding: clamp(88px, 9vw, 140px) 0 22px;

  overflow: hidden;

  background: #050805;
  color: #ffffff;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================================
     ACCESSIBILITY
  ========================================================= */

.srOnly {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/* =========================================================
     SHARED LABELS
  ========================================================= */

.footerEyebrow,
.footerLabel {
  display: block;

  color: var(--color-accent);

  font-size: 10px;
  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

/* =========================================================
     FOOTER TOP
  ========================================================= */

.footerTop {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(360px, 0.92fr);

  gap: clamp(70px, 9vw, 150px);

  align-items: end;

  padding-bottom: clamp(70px, 8vw, 108px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================================
     FOOTER STATEMENT
  ========================================================= */

.footerStatement h2 {
  max-width: 760px;

  margin-top: 18px;

  font-family: "Khand", sans-serif;

  font-size: clamp(56px, 5.8vw, 88px);

  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.footerStatement h2 span {
  display: block;

  color: var(--color-accent);
}

.footerStatement p {
  max-width: 500px;

  margin-top: 24px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 16px;
  font-weight: 300;

  line-height: 1.6;
}


/* =========================================================
     DIRECTORY
  ========================================================= */

.footerDirectory {
  display: grid;

  grid-template-columns:
    minmax(270px, 1.25fr)
    minmax(155px, 0.72fr)
    minmax(220px, 0.95fr)
    minmax(150px, 0.68fr);

  gap: clamp(38px, 5vw, 82px);

  padding: clamp(68px, 7vw, 96px) 0;
}

.footerColumn {
  min-width: 0;
}

/* =========================================================
     CONTACT
  ========================================================= */

.footerContactList {
  margin-top: 24px;

  display: grid;

  gap: 20px;
}

.footerContactItem {
  display: grid;

  gap: 5px;
}

.footerContactItem > span {
  color: rgba(255, 255, 255, 0.35);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.footerContactItem a,
.footerContactItem p {
  width: fit-content;
  max-width: 100%;

  color: rgba(255, 255, 255, 0.82);

  font-size: 14px;
  font-weight: 300;

  overflow-wrap: anywhere;
}

/* =========================================================
     COMPACT MAP
  ========================================================= */

.footerMap {
  position: relative;

  width: min(100%, 300px);

  height: 155px;

  margin-top: 28px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: #0a0d0a;
}

.footerMap::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.footerMap iframe {
  width: 100%;
  height: 100%;

  display: block;

  border: 0;

  filter: grayscale(1) contrast(1.08) brightness(0.72);

  transition: filter 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
     MAIN LINKS
  ========================================================= */

.footerLinks,
.footerTextLinks {
  margin-top: 24px;

  display: flex;
  flex-direction: column;
}

.footerLinks a {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  color: rgba(255, 255, 255, 0.75);

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

  font-size: 14px;

  transition: color 220ms ease,
    padding-left 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footerLinks a span:last-child {
  color: var(--color-accent);

  font-size: 13px;

  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
     TEXT LINKS
  ========================================================= */

.footerTextLinks {
  gap: 10px;
}

.footerTextLinks a,
.footerCookiePreferences {
  width: fit-content;

  padding: 0;

  border: 0;

  background: transparent;

  color: rgba(255, 255, 255, 0.58);

  font-size: 13px;
  font-weight: 300;

  text-align: left;

  cursor: pointer;

  transition: color 200ms ease;
}

.footerLinkArrow{
    width:14px;
    height:14px;

    color:var(--color-accent);

    flex-shrink:0;

    transition:transform .25s ease;
}

.footerLinks a:hover .footerLinkArrow{
    transform:translate(3px,-3px);
}

/* =========================================================
     FOOTER META
  ========================================================= */

.footerMeta {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;

  padding-block: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* =========================================================
     SOCIALS
  ========================================================= */

.footerSocials {
  display: flex;

  gap: 8px;
}

.footerSocials a {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.14);

  color: #ffffff;

  transition: background 220ms ease, color 220ms ease, border-color 220ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footerSocials svg {
  width: 16px;
  height: 16px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;
}

.footerSocials a:nth-child(2) svg,
.footerSocials a:nth-child(3) svg {
  fill: currentColor;

  stroke: none;
}

/* =========================================================
     COPYRIGHT
  ========================================================= */

.footerCopyright {
  display: flex;
  align-items: center;

  gap: 24px;

  color: rgba(255, 255, 255, 0.34);

  font-size: 11px;
}

/* =========================================================
   FOOTER WORDMARK
========================================================= */

.footerWordmark {
  width: 100%;

  padding: clamp(28px, 3vw, 48px) 0 clamp(26px, 3vw, 44px);

  display: flex;
  align-items: baseline;
  justify-content: center;

  gap: 0.16em;

  overflow: hidden;

  border-top: 1px solid rgba(255, 255, 255, 0.09);

  font-family: "Khand", sans-serif;

  font-size: clamp(54px, 7.4vw, 118px);

  font-weight: 700;

  line-height: 0.8;

  letter-spacing: -0.045em;

  white-space: nowrap;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.92);
}

.footerWordmarkAccent {
  color: var(--color-accent);
}

/* =========================================================
     FOOTER WORDMARK TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .footerWordmark {
    font-size: clamp(42px, 6.7vw, 66px);

    gap: 0.14em;

    letter-spacing: -0.042em;
  }
}

/* =========================================================
     FOOTER WORDMARK MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .footerWordmark {
    width: 100%;

    padding: 30px 0;

    justify-content: flex-start;

    gap: 0.12em;

    font-size: clamp(27px, 7.8vw, 36px);

    line-height: 0.86;

    letter-spacing: -0.04em;

    white-space: nowrap;
  }
}

/* =========================================================
     VERY SMALL MOBILE
  ========================================================= */

@media (max-width: 380px) {
  .footerWordmark {
    font-size: clamp(24px, 7.4vw, 29px);

    gap: 0.1em;
  }
}

/* =========================================================
     FOOTER CREDITS
  ========================================================= */

.footerCredits {
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.32);

  font-size: 10px;

  letter-spacing: 0.015em;
}

.footerCredits a {
  color: rgba(255, 255, 255, 0.62);

  transition: color 200ms ease;
}

.footerMarketingCredit {
  color: rgba(255, 255, 255, 0.55);
}

.footerCreditsDot {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--color-accent);

  opacity: 0.8;
}

/* =========================================================
     DESKTOP INTERACTIONS
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .newsletterButton:hover {
    color: var(--color-accent);
  }

  .newsletterButton:hover svg {
    color: #ffffff;

    transform: translateX(5px);
  }

  .footerContactItem a:hover {
    color: var(--color-accent);
  }

  .footerMap:hover iframe {
    filter: grayscale(0.35) contrast(1.02) brightness(0.88);

    transform: scale(1.025);
  }

  .footerLinks a:hover {
    padding-left: 5px;

    color: #ffffff;
  }

  .footerLinks a:hover span:last-child {
    transform: translate(3px, -2px);
  }

  .footerTextLinks a:hover,
  .footerCookiePreferences:hover {
    color: var(--color-accent);
  }

  .footerSocials a:hover {
    background: var(--color-accent);

    color: #0b0e08;

    border-color: var(--color-accent);

    transform: translateY(-3px);
  }

  .footerCredits a:hover {
    color: var(--color-accent);
  }
}

/* =========================================================
     FOOTER TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .footerTop {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .footerNewsletter {
    max-width: 660px;

    justify-self: start;
  }

  .footerDirectory {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 58px 54px;
  }

  .footerMap {
    width: min(100%, 340px);
  }
}

/* =========================================================
     FOOTER MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .siteFooter {
    padding: 74px 0 16px;
  }

  /* TOP */

  .footerTop {
    gap: 40px;

    padding-bottom: 56px;
  }

  .footerStatement h2 {
    font-size: clamp(46px, 14vw, 62px);

    line-height: 0.9;
  }

  .footerStatement p {
    width: 100%;

    margin-top: 20px;

    font-size: 14px;

    line-height: 1.55;
  }

  /* NEWSLETTER */

  .newsletterField {
    grid-template-columns: 1fr;
  }

  .newsletterField input {
    min-height: 54px;

    padding-right: 0;
  }

  .newsletterButton {
    width: fit-content;

    min-height: 48px;

    padding: 0;

    justify-content: flex-start;
  }

  /* DIRECTORY */

  .footerDirectory {
    grid-template-columns: 1fr;

    gap: 44px;

    padding: 56px 0;
  }

  .footerContactList,
  .footerLinks,
  .footerTextLinks {
    margin-top: 20px;
  }

  /* MAP */

  .footerMap {
    width: 100%;

    max-width: 320px;

    height: 145px;

    margin-top: 24px;
  }

  /* META */

  .footerMeta {
    align-items: flex-start;

    flex-direction: column;

    gap: 22px;

    padding-block: 22px;
  }

  .footerCopyright {
    align-items: flex-start;

    flex-direction: column;

    gap: 4px;
  }

  /* WORDMARK */

  /* CREDITS */

  .footerCredits {
    justify-content: center;

    gap: 8px;

    padding-top: 18px;

    font-size: 9px;

    line-height: 1.5;
  }
}

/* =========================================================
     SMALL MOBILE
  ========================================================= */

@media (max-width: 380px) {
  .footerCreditsDot {
    display: none;
  }

  .footerCredits {
    align-items: flex-start;

    flex-direction: column;
  }
}

/* =========================================================
     REDUCED MOTION
  ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .newsletterButton,
  .newsletterButton svg,
  .footerMap iframe,
  .footerLinks a,
  .footerLinks a span,
  .footerTextLinks a,
  .footerCookiePreferences,
  .footerSocials a,
  .footerCredits a {
    transition: none;
  }
}

/* =========================================================
   CONTACT FORM SYSTEM STATES
========================================================= */

.contactHoneypot {
  position: absolute !important;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  clip-path: inset(50%);

  white-space: nowrap;
}


.contactFormStatus {
  grid-column: 1 / -1;

  min-height: 0;

  font-size: 13px;

  line-height: 1.5;
}


.contactFormStatus.isSuccess {
  padding: 14px 16px;

  background:
    rgba(120, 147, 0, 0.1);

  border:
    1px solid rgba(120, 147, 0, 0.32);

  color:
    #556800;
}


.contactFormStatus.isError {
  padding: 14px 16px;

  background:
    rgba(160, 40, 40, 0.06);

  border:
    1px solid rgba(160, 40, 40, 0.24);

  color:
    #8d2424;
}


.contactSubmit:disabled {
  opacity: 0.62;

  cursor: wait;

  transform: none;
}

/* =========================================================
     NEWSLETTER
  ========================================================= */

.footerNewsletter {
  width: 100%;
  max-width: 560px;

  justify-self: end;
}

.newsletterForm {
  margin-top: 18px;
}

.newsletterField {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  border-bottom: 1px solid rgba(255, 255, 255, 0.28);

  transition: border-color 220ms ease;
}

.newsletterField:focus-within {
  border-color: var(--color-accent);
}

.newsletterField input {
  width: 100%;
  min-width: 0;

  min-height: 62px;

  padding-right: 20px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #ffffff;

  font-size: 16px;
  font-weight: 300;
}

.newsletterField input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.newsletterButton {
  min-height: 62px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding-inline: 18px 0;

  border: 0;

  background: transparent;
  color: #ffffff;

  cursor: pointer;

  transition: color 220ms ease;
}

.newsletterButton svg {
  width: 18px;
  height: 18px;

  color: var(--color-accent);

  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}

.newsletterNote {
  margin-top: 12px;

  color: rgba(255, 255, 255, 0.35);

  font-size: 11px;
}

/* =========================================================
   NEWSLETTER FORM STATES
========================================================= */

.newsletterHoneypot {
  position: absolute !important;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);

  white-space: nowrap;
}


.newsletterStatus {
  min-height: 0;

  margin-top: 10px;

  font-size: 12px;
  line-height: 1.5;
}


.newsletterStatus.isSuccess {
  color: var(--color-accent);
}


.newsletterStatus.isError {
  color: #ff8b8b;
}


.newsletterButton:disabled {
  opacity: 0.55;

  cursor: wait;
}


.newsletterButton:disabled svg {
  transform: none;
}


/* =========================================================
   COOKIE CONSENT
========================================================= */

.cookieBanner {
  position: fixed;

  left: 50%;
  bottom: 22px;

  z-index: 150;

  width: min(1180px, calc(100% - 40px));

  transform: translateX(-50%) translateY(30px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition: opacity 350ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 350ms ease;
}

.cookieBanner.isVisible {
  opacity: 1;
  visibility: visible;

  transform: translateX(-50%) translateY(0);

  pointer-events: auto;
}

.cookieBannerInner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 34px;

  padding: 20px 22px;

  background: rgba(7, 10, 7, 0.96);

  border: 1px solid rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.cookieEyebrow {
  display: block;

  margin-bottom: 7px;

  color: var(--color-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}

.cookieBannerCopy p {
  max-width: 650px;

  color: rgba(255, 255, 255, 0.66);

  font-size: 13px;

  line-height: 1.5;
}

.cookieBannerActions {
  display: flex;
  align-items: center;

  gap: 8px;
}

/* =========================================================
     COOKIE BUTTONS
  ========================================================= */

.cookieButton {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding-inline: 16px;

  border: 1px solid transparent;

  font-size: 12px;

  cursor: pointer;

  white-space: nowrap;

  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
    transform 200ms ease;
}

.cookieButtonPrimary {
  background: var(--color-accent);
  color: #0b0e08;

  border-color: var(--color-accent);
}

.cookieButtonSecondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);

  border-color: rgba(255, 255, 255, 0.17);
}

.cookieButtonGhost {
  background: transparent;
  color: #ffffff;

  border-color: transparent;
}

/* =========================================================
     COOKIE PREFERENCES
  ========================================================= */

.cookiePreferences {
  position: fixed;

  inset: 0;

  z-index: 170;

  visibility: hidden;

  pointer-events: none;
}

.cookiePreferences.isOpen {
  visibility: visible;

  pointer-events: auto;
}

.cookiePreferencesBackdrop {
  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.72);

  opacity: 0;

  transition: opacity 350ms ease;
}

.cookiePreferences.isOpen .cookiePreferencesBackdrop {
  opacity: 1;
}

.cookiePreferencesPanel {
  position: absolute;

  top: 0;
  right: 0;

  width: min(560px, 100%);
  height: 100%;

  overflow-y: auto;

  padding: 30px 28px 32px;

  background: #080b08;
  color: #ffffff;

  border-left: 1px solid rgba(255, 255, 255, 0.1);

  transform: translateX(100%);

  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cookiePreferences.isOpen .cookiePreferencesPanel {
  transform: translateX(0);
}

/* =========================================================
     COOKIE PANEL TOP
  ========================================================= */

.cookiePreferencesTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 30px;

  padding-bottom: 24px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cookiePreferencesTop h2 {
  margin-top: 8px;

  font-family: "Khand", sans-serif;

  font-size: clamp(38px, 4vw, 52px);

  font-weight: 600;

  line-height: 0.95;

  text-transform: uppercase;
}

.cookiePreferencesClose {
  position: relative;

  width: 44px;
  height: 44px;

  flex-shrink: 0;

  border: 1px solid rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.04);

  color: #ffffff;

  cursor: pointer;
}

.cookiePreferencesClose span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 16px;
  height: 1px;

  background: currentColor;
}

.cookiePreferencesClose span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cookiePreferencesClose span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================================================
     COOKIE INTRO
  ========================================================= */

.cookiePreferencesIntro {
  padding: 24px 0;
}

.cookiePreferencesIntro p {
  color: rgba(255, 255, 255, 0.58);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
     COOKIE CATEGORIES
  ========================================================= */

.cookieCategories {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.cookieCategory {
  padding: 22px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.cookieCategoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.cookieCategoryLabel {
  display: block;

  margin-bottom: 5px;

  color: var(--color-accent);

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 0.13em;
}

.cookieCategory h3 {
  font-family: "Khand", sans-serif;

  font-size: 24px;
  font-weight: 600;

  line-height: 1;
}

.cookieCategory > p {
  max-width: 420px;

  margin-top: 12px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;

  line-height: 1.55;
}

.cookieAlwaysActive {
  color: var(--color-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

/* =========================================================
     COOKIE SWITCH
  ========================================================= */

.cookieSwitch {
  position: relative;

  flex-shrink: 0;

  cursor: pointer;
}

.cookieSwitch input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

.cookieSwitchTrack {
  width: 48px;
  height: 26px;

  display: block;

  padding: 3px;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.12);

  transition: background 220ms ease, border-color 220ms ease;
}

.cookieSwitchThumb {
  width: 18px;
  height: 18px;

  display: block;

  background: rgba(255, 255, 255, 0.72);

  transform: translateX(0);

  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease;
}

.cookieSwitch input:checked + .cookieSwitchTrack {
  background: var(--color-accent);

  border-color: var(--color-accent);
}

.cookieSwitch input:checked + .cookieSwitchTrack .cookieSwitchThumb {
  background: #0b0e08;

  transform: translateX(22px);
}

/* =========================================================
     COOKIE PANEL ACTIONS
  ========================================================= */

.cookiePreferencesActions {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;

  margin-top: 28px;
}

/* =========================================================
     COOKIE HOVER
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .cookieButtonPrimary:hover {
    background: var(--color-accent-hover);

    border-color: var(--color-accent-hover);

    transform: translateY(-2px);
  }

  .cookieButtonSecondary:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.35);
  }

  .cookieButtonGhost:hover {
    color: var(--color-accent);
  }

  .cookiePreferencesClose:hover {
    background: var(--color-accent);

    color: #0b0e08;

    border-color: var(--color-accent);
  }
}

/* =========================================================
     COOKIE MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .cookieBanner {
    width: calc(100% - 24px);

    bottom: 12px;
  }

  .cookieBannerInner {
    display: block;

    padding: 18px;
  }

  .cookieBannerActions {
    display: grid;

    grid-template-columns:
      1fr
      1fr;

    margin-top: 18px;
  }

  .cookieButtonPrimary {
    grid-column: 1 / -1;
  }

  .cookiePreferencesPanel {
    padding: 24px 20px;
  }

  .cookiePreferencesTop {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      44px;

    align-items: start;

    column-gap: 16px;
  }

  .cookiePreferencesClose {
    justify-self: end;

    margin: 0;
  }

  .cookiePreferencesActions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
     COOKIE REDUCED MOTION
  ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cookieBanner,
  .cookiePreferencesBackdrop,
  .cookiePreferencesPanel,
  .cookieButton,
  .cookieSwitchTrack,
  .cookieSwitchThumb {
    transition: none;
  }
}

/* =========================================================
   RTL FOOTER + COOKIES
========================================================= */

html[dir="rtl"] .footerLinkArrow {
  transform: scaleX(-1);
}

html[dir="rtl"] .footerContactItem,
html[dir="rtl"] .footerTextLinks,
html[dir="rtl"] .footerNewsletter,
html[dir="rtl"] .cookieBannerCopy,
html[dir="rtl"] .cookiePreferencesPanel {
  text-align: right;
}

html[dir="rtl"] .footerCopyright,
html[dir="rtl"] .footerCredits {
  direction: rtl;
}

html[dir="rtl"] .cookieCategoryHeader,
html[dir="rtl"] .cookiePreferencesTop {
  direction: rtl;
}

/* =========================================================
   BLOG & NEWS HERO
========================================================= */

.newsHero {
  position: relative;

  min-height: 76svh;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  padding-bottom: clamp(48px, 5vw, 72px);

  background: radial-gradient(
      circle at 78% 30%,
      rgba(223, 255, 55, 0.045),
      transparent 26%
    ),
    linear-gradient(180deg, #070a07 0%, #050805 100%);

  color: #ffffff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================
     EDITORIAL GRID
  ========================================================= */

.newsHero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image: linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 120px 120px;

  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 82%);

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55),
    transparent 82%
  );

  opacity: 0.7;
}

/* =========================================================
     HERO INNER
  ========================================================= */

.newsHeroInner {
  position: relative;

  z-index: 2;

  /*
      IMPORTANT
      Do not use width: 100% here.
      .newsHeroInner also has the siteContainer class.
    */

  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(260px, 0.75fr);

  align-items: end;

  gap: clamp(60px, 8vw, 140px);
}

/* =========================================================
     HERO COPY
  ========================================================= */

.newsHeroCopy {
  min-width: 0;

  max-width: 900px;
}

.newsHeroEyebrow {
  display: block;

  margin-bottom: 20px;

  color: var(--color-accent);

  font-size: 12px;
  font-weight: 400;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.16em;
}

.newsHero h1 {
  width: fit-content;

  max-width: 900px;

  margin: 0;

  font-family: "Khand", sans-serif;

  font-size: clamp(88px, 9vw, 144px);

  font-weight: 700;

  line-height: 0.8;

  letter-spacing: -0.04em;

  text-transform: uppercase;
}

.newsHero h1 span {
  display: block;

  color: var(--color-accent);
}

.newsHeroCopy p {
  width: 100%;
  max-width: 610px;

  margin-top: 30px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 18px;
  font-weight: 300;

  line-height: 1.62;
}

/* =========================================================
     HERO INDEX
  ========================================================= */

.newsHeroIndex {
  width: 100%;
  max-width: 320px;

  justify-self: end;

  display: grid;

  grid-template-columns:
    auto
    minmax(60px, 1fr)
    auto;

  align-items: center;

  gap: 14px;

  margin-bottom: 8px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 10px;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.13em;
}

.newsHeroIndex span:first-child {
  color: var(--color-accent);
}

.newsHeroIndexLine {
  width: 100%;
  height: 1px;

  background: rgba(255, 255, 255, 0.16);
}

/* =========================================================
     ACTIVE NAVIGATION
  ========================================================= */

.desktopNav a.isActive {
  color: #ffffff;
}

.desktopNav a.isActive::after {
  transform: scaleX(1);

  transform-origin: left;
}

.mobileMenuNav a.isActive {
  color: var(--color-accent);
}

/* =========================================================
     LARGE LAPTOP
  ========================================================= */

@media (max-width: 1280px) {
  .newsHero {
    min-height: 72svh;
  }

  .newsHeroInner {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(240px, 0.8fr);

    gap: 70px;
  }

  .newsHero h1 {
    font-size: clamp(82px, 9vw, 118px);
  }

  .newsHeroCopy p {
    max-width: 560px;
  }
}

/* =========================================================
     TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .newsHero {
    min-height: 70svh;

    padding: 150px 0 82px;
  }

  .newsHeroInner {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .newsHeroCopy {
    max-width: 760px;
  }

  .newsHero h1 {
    max-width: 720px;

    font-size: clamp(72px, 11vw, 104px);
  }

  .newsHeroCopy p {
    max-width: 560px;

    font-size: 17px;
  }

  .newsHeroIndex {
    justify-self: start;

    width: min(100%, 300px);

    margin-bottom: 0;
  }
}

/* =========================================================
     MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .newsHero {
    min-height: 66svh;

    padding: 120px 0 64px;
  }

  .newsHero::before {
    background-size: 72px 72px;
  }

  .newsHeroInner {
    display: block;
  }

  .newsHeroCopy {
    width: 100%;
    max-width: 100%;
  }

  .newsHeroEyebrow {
    margin-bottom: 16px;

    font-size: 10px;

    letter-spacing: 0.14em;
  }

  .newsHero h1 {
    width: 100%;
    max-width: 100%;

    font-size: clamp(58px, 18vw, 78px);

    line-height: 0.82;

    letter-spacing: -0.035em;
  }

  .newsHeroCopy p {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;

    font-size: 15px;

    line-height: 1.55;
  }

  .newsHeroIndex {
    width: min(100%, 220px);

    margin-top: 34px;

    justify-self: start;

    font-size: 9px;

    gap: 10px;
  }
}

/* =========================================================
     SMALL MOBILE
  ========================================================= */

@media (max-width: 380px) {
  .newsHero {
    padding-bottom: 56px;
  }

  .newsHero h1 {
    font-size: clamp(52px, 17vw, 64px);
  }

  .newsHeroCopy p {
    font-size: 14px;
  }
}
/* =========================================================
   WH INSIGHTS
========================================================= */

.whInsightsSection {
  padding: clamp(52px, 5vw, 78px) 0 clamp(64px, 6vw, 92px);

  background: var(--color-light-bg);

  color: var(--color-light-text);
}

/* =========================================================
     INSIGHTS HEADER
  ========================================================= */

.whInsightsHeader {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  align-items: end;

  gap: clamp(50px, 7vw, 110px);

  margin-bottom: clamp(36px, 4vw, 56px);
}

.whInsightsHeader .sectionEyebrow {
  display: block;

  margin-bottom: 16px;

  color: var(--color-light-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.whInsightsHeader h2 {
  max-width: 780px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 6vw, 90px);

  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.whInsightsHeader h2 span {
  display: block;

  color: var(--color-light-accent);
}

.whInsightsHeader > p {
  max-width: 520px;

  margin-bottom: 4px;

  color: rgba(16, 19, 15, 0.62);

  font-size: 17px;

  line-height: 1.65;
}

/* =========================================================
     INSIGHTS GRID
  ========================================================= */

.whInsightsGrid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}

/* =========================================================
     INSIGHT CARD
  ========================================================= */

.insightCard {
  min-width: 0;
}

.insightCardLink {
  height: 100%;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  border: 1px solid rgba(16, 19, 15, 0.1);

  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease, box-shadow 240ms ease;
}

/* =========================================================
     INSIGHT IMAGE
  ========================================================= */

.insightCardMedia {
  position: relative;

  aspect-ratio: 16 / 11;

  overflow: hidden;

  background: #dfe1da;
}

.insightCardMedia img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.01);

  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease;
}

.insightCategory {
  position: absolute;

  left: 16px;
  bottom: 16px;

  padding: 7px 10px;

  background: var(--color-accent);

  color: #10130f;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

/* =========================================================
     INSIGHT CONTENT
  ========================================================= */

.insightCardContent {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 22px 22px 24px;
}

.insightMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: rgba(16, 19, 15, 0.42);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.insightCard h3 {
  margin-top: 20px;

  font-family: "Khand", sans-serif;

  font-size: clamp(29px, 2.7vw, 42px);

  font-weight: 600;

  line-height: 0.98;

  letter-spacing: -0.02em;
}

.insightCard p {
  margin-top: 16px;

  color: rgba(16, 19, 15, 0.62);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
     READ MORE
  ========================================================= */

.insightReadMore {
  margin-top: auto;

  padding-top: 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top: 1px solid rgba(16, 19, 15, 0.1);

  color: #10130f;

  font-size: 12px;
}

.insightReadMore svg {
  width: 18px;
  height: 18px;

  color: var(--color-light-accent);

  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
     INSIGHTS HOVER
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .insightCardLink:hover {
    transform: translateY(-6px);

    border-color: rgba(120, 147, 0, 0.38);

    box-shadow: 0 20px 46px rgba(16, 19, 15, 0.08);
  }

  .insightCardLink:hover .insightCardMedia img {
    transform: scale(1.055);
  }

  .insightCardLink:hover .insightReadMore svg {
    transform: translateX(5px);
  }
}

/* =========================================================
     INSIGHTS TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .whInsightsSection {
    padding: 54px 0 72px;
  }

  .whInsightsHeader {
    grid-template-columns: 1fr;

    gap: 22px;

    margin-bottom: 42px;
  }

  .whInsightsHeader > p {
    max-width: 620px;
  }

  .whInsightsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insightCard:first-child {
    grid-column: 1 / -1;
  }

  .insightCard:first-child .insightCardMedia {
    aspect-ratio: 16 / 7;
  }
}

/* =========================================================
     INSIGHTS MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .whInsightsSection {
    padding: 50px 0 62px;
  }

  .whInsightsHeader {
    margin-bottom: 30px;
  }

  .whInsightsHeader h2 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .whInsightsHeader > p {
    font-size: 15px;

    line-height: 1.55;
  }

  .whInsightsGrid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .insightCard:first-child {
    grid-column: auto;
  }

  .insightCard:first-child .insightCardMedia,
  .insightCardMedia {
    aspect-ratio: 16 / 10;
  }

  .insightCardContent {
    padding: 20px 18px 22px;
  }

  .insightCard h3 {
    font-size: clamp(30px, 9vw, 38px);
  }
}

/* =========================================================
     FOOTBALL NEWS
  ========================================================= */

.footballNewsSection {
  padding: clamp(64px, 6vw, 92px) 0 clamp(68px, 6vw, 96px);

  background: #070a07;

  color: #ffffff;
}

/* =========================================================
     FOOTBALL NEWS HEADER
  ========================================================= */

.footballNewsHeader {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  align-items: end;

  gap: clamp(50px, 7vw, 110px);

  margin-bottom: 36px;
}

.footballNewsHeader .sectionEyebrow {
  display: block;

  margin-bottom: 16px;

  color: var(--color-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.footballNewsHeader h2 {
  max-width: 780px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 6vw, 90px);

  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.footballNewsHeader h2 span {
  display: block;

  color: var(--color-accent);
}

.footballNewsHeader > p {
  max-width: 520px;

  margin-bottom: 4px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 17px;

  line-height: 1.65;
}

/* =========================================================
     FOOTBALL NEWS TOOLBAR
  ========================================================= */

.footballNewsToolbar {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 20px;

  padding: 8px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.newsSourceFilters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}

.newsFilter {
  min-height: 38px;

  padding-inline: 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: transparent;

  color: rgba(255, 255, 255, 0.58);

  font-size: 11px;

  cursor: pointer;

  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.newsFilter.isActive {
  background: var(--color-accent);

  color: #0b0e08;

  border-color: var(--color-accent);
}

.footballNewsStatus {
  display: flex;
  align-items: center;

  gap: 9px;

  color: rgba(255, 255, 255, 0.42);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.newsStatusDot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--color-accent);

  box-shadow: 0 0 0 5px rgba(223, 255, 55, 0.06);
}

/* =========================================================
     FOOTBALL NEWS GRID
  ========================================================= */

.footballNewsGrid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;
}

/* =========================================================
     FOOTBALL NEWS CARD
  ========================================================= */

.footballNewsCard {
  min-width: 0;
}

.footballNewsCardLink {
  height: 100%;

  display: flex;
  flex-direction: column;

  background: #0b0f0b;

  border: 1px solid rgba(255, 255, 255, 0.09);

  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease;
}

/* =========================================================
     FOOTBALL NEWS MEDIA
  ========================================================= */

.footballNewsMedia {
  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #101410;
}

.footballNewsMedia img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.82) contrast(1.04);

  transform: scale(1.01);

  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease;
}

.footballNewsSource {
  position: absolute;

  left: 14px;
  bottom: 14px;

  padding: 7px 10px;

  background: rgba(5, 8, 5, 0.9);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #ffffff;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

/* =========================================================
     FOOTBALL NEWS CONTENT
  ========================================================= */

.footballNewsContent {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 20px 20px 22px;
}

.footballNewsMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.footballNewsCard h3 {
  margin-top: 18px;

  font-family: "Khand", sans-serif;

  font-size: clamp(28px, 2.6vw, 40px);

  font-weight: 600;

  line-height: 0.98;

  letter-spacing: -0.02em;
}

.footballNewsCard p {
  margin-top: 14px;

  color: rgba(255, 255, 255, 0.56);

  font-size: 13px;

  line-height: 1.58;
}

/* =========================================================
     READ ORIGINAL
  ========================================================= */

.footballNewsRead {
  margin-top: auto;

  padding-top: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top: 1px solid rgba(255, 255, 255, 0.09);

  color: rgba(255, 255, 255, 0.74);

  font-size: 11px;
}

.footballNewsRead svg {
  width: 18px;
  height: 18px;

  color: var(--color-accent);

  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
     FOOTBALL NEWS HOVER
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .newsFilter:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.3);
  }

  .footballNewsCardLink:hover {
    transform: translateY(-6px);

    border-color: rgba(223, 255, 55, 0.28);
  }

  .footballNewsCardLink:hover .footballNewsMedia img {
    transform: scale(1.055);

    filter: saturate(1) contrast(1.04);
  }

  .footballNewsCardLink:hover .footballNewsRead svg {
    transform: translateX(5px);
  }
}

/* =========================================================
   FOOTBALL NEWS RSS STATES
========================================================= */

.footballNewsSkeleton {
  pointer-events: none;
}

.footballNewsSkeleton .footballNewsMedia {
  background:
    rgba(255, 255, 255, 0.045);
}

.footballNewsSkeletonLine {
  display: block;

  background:
    rgba(255, 255, 255, 0.07);

  overflow: hidden;
}

.footballNewsSkeletonMeta {
  width: 42%;
  height: 8px;
}

.footballNewsSkeletonTitle {
  width: 100%;
  height: 24px;

  margin-top: 22px;
}

.footballNewsSkeletonTitleShort {
  width: 72%;

  margin-top: 8px;
}

.footballNewsSkeletonText {
  width: 88%;
  height: 12px;

  margin-top: 22px;
}


.footballNewsEmpty {
  grid-column: 1 / -1;

  min-height: 220px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 18px;

  padding: 36px;

  border:
    1px solid rgba(255, 255, 255, 0.09);

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 14px;

  text-align: center;
}


.footballNewsRetry {
  min-height: 42px;

  padding-inline: 18px;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  background: transparent;

  color: #ffffff;

  cursor: pointer;

  transition:
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}


.footballNewsMedia.isFallback img {
  filter:
    saturate(0.78)
    contrast(1.04);
}


@media (hover: hover) and (pointer: fine) {

  .footballNewsRetry:hover {
    background:
      var(--color-accent);

    color:
      #0b0e08;

    border-color:
      var(--color-accent);
  }

}

/* =========================================================
     FOOTBALL NEWS TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .footballNewsSection {
    padding: 58px 0 72px;
  }

  .footballNewsHeader {
    grid-template-columns: 1fr;

    gap: 22px;

    margin-bottom: 32px;
  }

  .footballNewsHeader > p {
    max-width: 620px;
  }

  .footballNewsToolbar {
    align-items: flex-start;

    flex-direction: column;

    gap: 14px;
  }

  .footballNewsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
     FOOTBALL NEWS MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .footballNewsSection {
    padding: 52px 0 64px;
  }

  .footballNewsHeader {
    margin-bottom: 28px;
  }

  .footballNewsHeader h2 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .footballNewsHeader > p {
    font-size: 15px;

    line-height: 1.55;
  }

  .newsSourceFilters {
    width: 100%;
  }

  .newsFilter {
    flex: 1 1 auto;
  }

  .footballNewsGrid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .footballNewsCard h3 {
    font-size: clamp(29px, 8.8vw, 37px);
  }
}

/* =========================================================
     TRANSFER WATCH
  ========================================================= */

.transferWatchSection {
  padding: clamp(62px, 6vw, 90px) 0 clamp(70px, 7vw, 100px);

  background: var(--color-light-bg);

  color: var(--color-light-text);

  overflow: hidden;
}

/* =========================================================
     TRANSFER HEADER
  ========================================================= */

.transferWatchHeader {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  align-items: end;

  gap: clamp(50px, 7vw, 110px);

  margin-bottom: 34px;
}

.transferWatchHeader .sectionEyebrow {
  display: block;

  margin-bottom: 16px;

  color: var(--color-light-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.transferWatchHeader h2 {
  max-width: 760px;

  font-family: "Khand", sans-serif;

  font-size: clamp(58px, 6vw, 90px);

  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.transferWatchHeader h2 span {
  display: block;

  color: var(--color-light-accent);
}

.transferWatchHeader > p {
  max-width: 500px;

  margin-bottom: 4px;

  color: rgba(16, 19, 15, 0.62);

  font-size: 17px;

  line-height: 1.65;
}

/* =========================================================
     TRANSFER TOP BAR
  ========================================================= */

.transferWatchTopbar {
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 16px;

  padding: 8px 0;

  border-top: 1px solid rgba(16, 19, 15, 0.14);

  border-bottom: 1px solid rgba(16, 19, 15, 0.14);
}

.transferWatchLive {
  display: flex;
  align-items: center;

  gap: 9px;

  color: rgba(16, 19, 15, 0.6);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.transferWatchPulse {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--color-light-accent);

  box-shadow: 0 0 0 5px rgba(120, 147, 0, 0.08);
}

/* =========================================================
     TRANSFER CONTROLS
  ========================================================= */

.transferWatchControls {
  display: flex;

  gap: 7px;
}

.transferWatchButton {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(16, 19, 15, 0.18);

  background: transparent;

  color: #10130f;

  cursor: pointer;

  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
    transform 200ms ease;
}

/* =========================================================
     TRANSFER VIEWPORT
  ========================================================= */

.transferWatchViewport {
  width: 100vw;

  margin-left: calc(50% - 50vw);

  overflow-x: auto;

  scrollbar-width: none;

  scroll-snap-type: x mandatory;

  overscroll-behavior-inline: contain;
}

.transferWatchViewport::-webkit-scrollbar {
  display: none;
}

.transferWatchTrack {
  width: max-content;

  display: flex;

  gap: 14px;

  padding-inline: max(
    56px,
    calc((100vw - min(var(--container-width), calc(100vw - 112px))) / 2)
  );
}

/* =========================================================
     TRANSFER CARD
  ========================================================= */

.transferCard {
  position: relative;

  width: clamp(300px, 27vw, 410px);

  min-height: 390px;

  flex-shrink: 0;

  display: flex;
  flex-direction: column;

  padding: 24px 24px 22px;

  scroll-snap-align: start;

  background: #10130f;

  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease, background 240ms ease;
}

.transferCardAccent {
  background: var(--color-accent);

  color: #10130f;

  border-color: var(--color-accent);
}

/* =========================================================
     TRANSFER CARD TOP
  ========================================================= */

.transferCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 42px;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.transferNumber {
  color: var(--color-accent);
}

.transferCardAccent .transferNumber {
  color: #10130f;
}

.transferStatus {
  color: rgba(255, 255, 255, 0.42);
}

.transferCardAccent .transferStatus {
  color: rgba(16, 19, 15, 0.55);
}

/* =========================================================
     TRANSFER LEAGUE
  ========================================================= */

.transferLeague {
  margin-bottom: 12px;

  color: var(--color-accent);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.transferCardAccent .transferLeague {
  color: #10130f;
}

/* =========================================================
     TRANSFER COPY
  ========================================================= */

.transferCard h3 {
  max-width: 340px;

  font-family: "Khand", sans-serif;

  font-size: clamp(30px, 2.8vw, 42px);

  font-weight: 600;

  line-height: 0.97;

  letter-spacing: -0.02em;
}

.transferCard p {
  max-width: 330px;

  margin-top: 16px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 13px;

  line-height: 1.55;
}

.transferCardAccent p {
  color: rgba(16, 19, 15, 0.64);
}

/* =========================================================
     TRANSFER CARD BOTTOM
  ========================================================= */

.transferCardBottom {
  margin-top: auto;

  padding-top: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.11);

  color: rgba(255, 255, 255, 0.4);

  font-size: 10px;
}

.transferCardAccent .transferCardBottom {
  border-color: rgba(16, 19, 15, 0.18);

  color: rgba(16, 19, 15, 0.5);
}

.transferCardBottom a {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: rgba(255, 255, 255, 0.78);

  transition: color 200ms ease;
}

.transferCardAccent .transferCardBottom a {
  color: #10130f;
}

.transferCardBottom a span {
  color: var(--color-accent);

  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.transferCardAccent .transferCardBottom a span {
  color: #10130f;
}

/* =========================================================
     TRANSFER HOVER
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .transferWatchButton:hover {
    background: #10130f;

    color: var(--color-accent);

    border-color: #10130f;

    transform: translateY(-2px);
  }

  .transferCard:hover {
    transform: translateY(-6px);

    border-color: rgba(120, 147, 0, 0.38);
  }

  .transferCardBottom a:hover {
    color: var(--color-accent);
  }

  .transferCardAccent .transferCardBottom a:hover {
    color: rgba(16, 19, 15, 0.7);
  }

  .transferCardBottom a:hover span {
    transform: translate(3px, -2px);
  }
}

/* =========================================================
     TRANSFER TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .transferWatchSection {
    padding: 56px 0 72px;
  }

  .transferWatchHeader {
    grid-template-columns: 1fr;

    gap: 22px;

    margin-bottom: 30px;
  }

  .transferWatchHeader > p {
    max-width: 620px;
  }

  .transferWatchTrack {
    padding-inline: 32px;
  }

  .transferCard {
    width: 340px;
  }
}

/* =========================================================
     TRANSFER MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .transferWatchSection {
    padding: 50px 0 64px;
  }

  .transferWatchHeader {
    margin-bottom: 26px;
  }

  .transferWatchHeader h2 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .transferWatchHeader > p {
    font-size: 15px;

    line-height: 1.55;
  }

  .transferWatchTopbar {
    margin-bottom: 14px;
  }

  .transferWatchTrack {
    gap: 12px;

    padding-inline: 14px;
  }

  .transferCard {
    width: min(84vw, 320px);

    min-height: 360px;

    padding: 21px 20px;
  }

  .transferCardTop {
    margin-bottom: 34px;
  }

  .transferCard h3 {
    font-size: clamp(29px, 9vw, 37px);
  }
}

/* =========================================================
   INDIVIDUAL ARTICLE PAGE
========================================================= */

.articlePage {
  background: #050805;
  color: #ffffff;
}

/* =========================================================
   ARTICLE HERO
========================================================= */

.articleHero {
  position: relative;

  padding: 170px 0 90px;

  background: linear-gradient(
      180deg,
      rgba(5, 8, 5, 0.72) 0%,
      rgba(5, 8, 5, 0.58) 30%,
      rgba(5, 8, 5, 0.82) 100%
    ),
    linear-gradient(
      90deg,
      rgba(5, 8, 5, 0.9) 0%,
      rgba(5, 8, 5, 0.55) 45%,
      rgba(5, 8, 5, 0.75) 100%
    ),
    var(--hero-image);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

/* =========================================================
     BREADCRUMB
  ========================================================= */

.articleBreadcrumb {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: clamp(34px, 4vw, 54px);

  color: rgba(255, 255, 255, 0.42);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.articleBreadcrumb a {
  color: rgba(255, 255, 255, 0.62);

  transition: color 200ms ease;
}

.articleBreadcrumb span:last-child {
  color: var(--color-accent);
}

/* =========================================================
     ARTICLE HERO GRID
  ========================================================= */

.articleHeroGrid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(320px, 0.65fr);

  gap: clamp(60px, 8vw, 140px);

  align-items: end;
}

.articleHeroMain {
  min-width: 0;
}

.articleCategory {
  display: inline-block;

  margin-bottom: 18px;

  color: var(--color-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.articleHero h1 {
  max-width: 980px;

  font-family: "Khand", sans-serif;

  font-size: clamp(72px, 7.8vw, 102px);

  font-weight: 700;

  line-height: 0.84;

  letter-spacing: -0.04em;

  text-transform: uppercase;
}

.articleHero h1 span {
  display: block;

  color: var(--color-accent);
}

/* =========================================================
     ARTICLE HERO SIDE
  ========================================================= */

.articleHeroSide {
  max-width: 480px;

  justify-self: end;
}

.articleIntro {
  color: rgba(255, 255, 255, 0.66);

  font-size: 17px;
  font-weight: 300;

  line-height: 1.65;
}

.articleMeta {
  margin-top: 28px;

  display: flex;
  flex-wrap: wrap;

  gap: 8px 18px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.articleMeta span {
  position: relative;
}

.articleMeta span:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -11px;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--color-accent);

  transform: translateY(-50%);
}

/* =========================================================
     ARTICLE CONTENT SECTION
  ========================================================= */

.articleContentSection {
  padding: clamp(72px, 7vw, 110px) 0 clamp(86px, 8vw, 120px);

  background: var(--color-light-bg);

  color: var(--color-light-text);
}

.articleContentLayout {
  display: grid;

  grid-template-columns:
    minmax(170px, 0.28fr)
    minmax(0, 0.72fr);

  gap: clamp(54px, 7vw, 120px);

  align-items: start;
}

/* =========================================================
     ARTICLE SIDEBAR
  ========================================================= */

.articleSidebar {
  position: sticky;

  top: 110px;

  display: grid;

  gap: 26px;

  padding-top: 4px;
}

.articleSidebarBlock {
  display: grid;

  gap: 5px;
}

.articleSidebarLabel {
  color: var(--color-light-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.articleSidebarBlock > span:last-child {
  color: rgba(16, 19, 15, 0.62);

  font-size: 13px;

  line-height: 1.5;
}

/* =========================================================
     ARTICLE BODY
  ========================================================= */

.articleBody {
  width: min(100%, 760px);
}

.articleBody p {
  color: rgba(16, 19, 15, 0.72);

  font-size: 17px;
  font-weight: 300;

  line-height: 1.78;
}

.articleBody p + p {
  margin-top: 22px;
}

.articleLead {
  color: #10130f !important;

  font-size: clamp(22px, 2vw, 28px) !important;

  line-height: 1.5 !important;

  font-weight: 400 !important;
}

.articleBody h2 {
  margin-top: clamp(54px, 6vw, 78px);

  margin-bottom: 18px;

  font-family: "Khand", sans-serif;

  font-size: clamp(38px, 4vw, 56px);

  font-weight: 600;

  line-height: 0.98;

  letter-spacing: -0.025em;
}

.articleBody h3 {
  margin-top: 34px;

  margin-bottom: 16px;

  font-family: "Khand", sans-serif;

  font-size: clamp(27px, 2.8vw, 36px);

  font-weight: 600;

  line-height: 1;
}

.articleBody ul,
.articleBody ol {
  margin-top: 18px;

  padding-left: 22px;

  display: grid;

  gap: 12px;
}

.articleBody li {
  color: rgba(16, 19, 15, 0.7);

  font-size: 16px;

  line-height: 1.65;
}

.articleBody li::marker {
  color: var(--color-light-accent);
}

/* =========================================================
     INSIGHT BLOCK
  ========================================================= */

.articleInsightBlock {
  margin: clamp(44px, 5vw, 64px) 0;

  padding: 28px 30px;

  background: #10130f;

  color: #ffffff;

  border-left: 3px solid var(--color-accent);
}

.articleInsightBlock > span {
  display: block;

  margin-bottom: 14px;

  color: var(--color-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.articleInsightBlock p {
  color: rgba(255, 255, 255, 0.82);

  font-family: "Khand", sans-serif;

  font-size: clamp(28px, 3vw, 38px);

  font-weight: 600;

  line-height: 1.05;
}

/* =========================================================
     ARTICLE CONCLUSION
  ========================================================= */

.articleConclusion {
  margin-top: clamp(60px, 7vw, 90px);

  padding-top: 30px;

  border-top: 1px solid rgba(16, 19, 15, 0.14);
}

.articleConclusion > span {
  display: block;

  margin-bottom: 14px;

  color: var(--color-light-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.articleConclusion h2 {
  margin-top: 0;

  max-width: 650px;
}

.articleConclusion p {
  margin-top: 18px;
}

/* =========================================================
     ARTICLE NAVIGATION
  ========================================================= */

.articleNavigation {
  background: #050805;

  color: #ffffff;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.articleNavigationGrid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.articleNavCard {
  min-height: clamp(260px, 26vw, 360px);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: clamp(28px, 4vw, 48px);

  border-right: 1px solid rgba(255, 255, 255, 0.08);

  transition: background 300ms ease, color 300ms ease;
}

.articleNavCard:last-child {
  border-right: 0;
}

.articleNavDirection {
  margin-bottom: auto;

  color: rgba(255, 255, 255, 0.42);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.articleNavCategory {
  margin-bottom: 12px;

  color: var(--color-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.articleNavCard h3 {
  max-width: 560px;

  font-family: "Khand", sans-serif;

  font-size: clamp(32px, 3.8vw, 52px);

  font-weight: 600;

  line-height: 0.98;

  letter-spacing: -0.025em;
}

.articleNavNext {
  text-align: right;

  align-items: flex-end;
}

/* =========================================================
     ARTICLE HOVER
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .articleBreadcrumb a:hover {
    color: var(--color-accent);
  }

  .articleNavCard:hover {
    background: var(--color-accent);

    color: #10130f;
  }

  .articleNavCard:hover .articleNavDirection,
  .articleNavCard:hover .articleNavCategory {
    color: rgba(16, 19, 15, 0.65);
  }
}

/* =========================================================
     ARTICLE TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .articleHero {
    padding: 150px 0 70px;
  }

  .articleHeroGrid {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  .articleHeroSide {
    max-width: 620px;

    justify-self: start;
  }

  .articleHero h1 {
    max-width: 800px;

    font-size: clamp(64px, 10vw, 96px);
  }

  .articleFeatureMedia {
    aspect-ratio: 16 / 9;
  }

  .articleContentSection {
    padding: 64px 0 82px;
  }

  .articleContentLayout {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .articleSidebar {
    position: static;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

    padding-bottom: 28px;

    border-bottom: 1px solid rgba(16, 19, 15, 0.12);
  }

  .articleBody {
    width: min(100%, 760px);
  }

  .articleNavigationGrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
     ARTICLE MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .articleHero {
    padding: 118px 0 54px;
  }

  .articleBreadcrumb {
    margin-bottom: 28px;

    font-size: 9px;
  }

  .articleCategory {
    margin-bottom: 14px;

    font-size: 9px;
  }

  .articleHero h1 {
    width: 100%;

    font-size: clamp(40px, 10vw, 56px);

    line-height: 0.86;
  }

  .articleIntro {
    font-size: 15px;

    line-height: 1.55;
  }

  .articleMeta {
    margin-top: 22px;

    gap: 7px 16px;

    font-size: 8px;
  }

  .articleFeature {
    padding-top: 22px;
  }

  .articleFeatureMedia {
    aspect-ratio: 4 / 3;
  }

  .articleContentSection {
    padding: 50px 0 64px;
  }

  .articleSidebar {
    grid-template-columns: 1fr;

    gap: 14px;

    padding-bottom: 22px;
  }

  .articleSidebarBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
  }

  .articleBody {
    width: 100%;
  }

  .articleBody p {
    font-size: 15px;

    line-height: 1.7;
  }

  .articleLead {
    font-size: clamp(20px, 6vw, 24px) !important;

    line-height: 1.5 !important;
  }

  .articleBody h2 {
    margin-top: 46px;

    font-size: clamp(34px, 10vw, 44px);
  }

  .articleBody h3 {
    margin-top: 30px;

    font-size: clamp(26px, 8vw, 32px);
  }

  .articleBody li {
    font-size: 15px;
  }

  .articleInsightBlock {
    margin: 38px 0;

    padding: 24px 20px;
  }

  .articleInsightBlock p {
    font-size: clamp(25px, 8vw, 32px);
  }

  .articleConclusion {
    margin-top: 52px;
  }

  /* ARTICLE NAV */

  .articleNavigationGrid {
    grid-template-columns: 1fr;
  }

  .articleNavCard {
    min-height: 240px;

    padding: 26px 0;

    border-right: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .articleNavCard:last-child {
    border-bottom: 0;
  }

  .articleNavNext {
    text-align: left;

    align-items: flex-start;
  }

  .articleNavCard h3 {
    font-size: clamp(30px, 9vw, 40px);
  }
}

/* =========================================================
     SMALL MOBILE
  ========================================================= */

@media (max-width: 380px) {
  .articleHero h1 {
    font-size: clamp(44px, 12vw, 56px);
  }

  .articleMeta span:not(:last-child)::after {
    display: none;
  }

  .articleMeta {
    flex-direction: column;

    gap: 4px;
  }
}

/* =========================================================
     REDUCED MOTION
  ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .articleBreadcrumb a,
  .articleNavCard {
    transition: none;
  }
}

/* =========================================================
   CONTACT PAGE
========================================================= */

/* =========================================================
   CONTACT HERO
========================================================= */

.contactHero {
  position: relative;

  padding: 170px 0 clamp(68px, 7vw, 100px);

  overflow: hidden;

  background: radial-gradient(
      circle at 82% 28%,
      rgba(223, 255, 55, 0.045),
      transparent 28%
    ),
    linear-gradient(180deg, #070a07 0%, #050805 100%);

  color: #ffffff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contactHero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image: linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 120px 120px;

  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 84%);

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    transparent 84%
  );

  opacity: 0.65;
}

/* =========================================================
     CONTACT HERO INNER
  ========================================================= */

.contactHeroInner {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(320px, 0.7fr);

  align-items: end;

  gap: clamp(60px, 8vw, 140px);
}

.contactHeroEyebrow {
  display: block;

  margin-bottom: 18px;

  color: var(--color-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.contactHero h1 {
  max-width: 900px;

  font-family: "Khand", sans-serif;

  font-size: clamp(78px, 8vw, 102px);

  font-weight: 700;

  line-height: 0.82;

  letter-spacing: -0.04em;

  text-transform: uppercase;
}

.contactHero h1 span {
  display: block;

  color: var(--color-accent);
}

.contactHeroSide {
  max-width: 500px;

  justify-self: end;
}

.contactHeroSide > p {
  color: rgba(255, 255, 255, 0.64);

  font-size: 17px;
  font-weight: 300;

  line-height: 1.65;
}

.contactHeroMeta {
  margin-top: 26px;

  display: flex;
  flex-wrap: wrap;

  gap: 8px 18px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

/* =========================================================
     CONTACT MAIN
  ========================================================= */

.contactMainSection {
  padding: clamp(68px, 7vw, 100px) 0 clamp(74px, 7vw, 106px);

  background: var(--color-light-bg);

  color: var(--color-light-text);
}

.contactMainGrid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.28fr)
    minmax(280px, 0.72fr);

  gap: clamp(60px, 8vw, 130px);

  align-items: start;
}

/* =========================================================
     FORM HEADING
  ========================================================= */

.contactFormHeading {
  margin-bottom: clamp(36px, 4vw, 54px);
}

.contactFormHeading .sectionEyebrow {
  display: block;

  margin-bottom: 16px;

  color: var(--color-light-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.contactFormHeading h2 {
  max-width: 720px;

  font-family: "Khand", sans-serif;

  font-size: clamp(54px, 5.6vw, 82px);

  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.contactFormHeading h2 span {
  display: block;

  color: var(--color-light-accent);
}

.contactFormHeading p {
  max-width: 620px;

  margin-top: 20px;

  color: rgba(16, 19, 15, 0.62);

  font-size: 16px;

  line-height: 1.62;
}

/* =========================================================
     CONTACT FORM
  ========================================================= */

.contactForm {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 26px 22px;
}

.contactField {
  min-width: 0;

  display: grid;

  gap: 9px;
}

.contactFieldFull {
  grid-column: 1 / -1;
}

.contactField label,
.contactChoiceField legend {
  color: rgba(16, 19, 15, 0.58);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.contactField input,
.contactField select,
.contactField textarea {
  width: 100%;

  border: 0;

  border-bottom: 1px solid rgba(16, 19, 15, 0.2);

  border-radius: 0;

  outline: 0;

  background: transparent;

  color: #10130f;

  font-size: 15px;

  transition: border-color 200ms ease, background 200ms ease;
}

.contactField input,
.contactField select {
  min-height: 52px;
}

.contactField textarea {
  min-height: 160px;

  padding: 14px 0;

  resize: vertical;

  line-height: 1.55;
}

.contactField input::placeholder,
.contactField textarea::placeholder {
  color: rgba(16, 19, 15, 0.35);
}

.contactField input:focus,
.contactField select:focus,
.contactField textarea:focus {
  border-color: var(--color-light-accent);
}

.contactRailArrow {
  width: 14px;
  height: 14px;

  flex-shrink: 0;

  color: var(--color-accent);

  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .contactRailSocials a:hover .contactRailArrow {
    transform: translate(3px, -3px);
  }
}
/* =========================================================
     CONTACT CHOICES
  ========================================================= */

.contactChoiceField {
  padding: 0;

  border: 0;
}

.contactChoices {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;

  margin-top: 10px;
}

.contactChoice {
  position: relative;

  cursor: pointer;
}

.contactChoice input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

.contactChoice span {
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;

  border: 1px solid rgba(16, 19, 15, 0.16);

  color: rgba(16, 19, 15, 0.64);

  font-size: 12px;

  text-align: center;

  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.contactChoice input:checked + span {
  background: #10130f;

  color: #ffffff;

  border-color: #10130f;
}

/* =========================================================
     PRIVACY CONSENT
  ========================================================= */

.contactConsent {
  margin-top: 4px;
}

.contactConsent label {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  color: rgba(16, 19, 15, 0.55);

  font-size: 11px;

  line-height: 1.5;
}

.contactConsent input {
  width: 15px;
  height: 15px;

  margin-top: 2px;

  flex-shrink: 0;

  accent-color: var(--color-light-accent);
}

.contactConsent a {
  color: #10130f;

  text-decoration: underline;
}

/* =========================================================
     FORM ACTIONS
  ========================================================= */

.contactFormActions {
  grid-column: 1 / -1;

  margin-top: 12px;

  display: flex;
  align-items: center;

  gap: 22px;
}

.contactSubmit {
  min-height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  padding-inline: 24px;

  border: 1px solid #10130f;

  background: #10130f;

  color: #ffffff;

  cursor: pointer;

  font-size: 14px;

  transition: background 220ms ease, color 220ms ease, border-color 220ms ease,
    transform 220ms ease;
}

.contactSubmit svg {
  width: 18px;
  height: 18px;

  color: var(--color-accent);

  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}

.contactFormNote {
  max-width: 340px;

  color: rgba(16, 19, 15, 0.42);

  font-size: 10px;

  line-height: 1.45;
}

/* =========================================================
     CONTACT RAIL
  ========================================================= */

.contactRail {
  position: sticky;

  top: 110px;

  padding: 26px;

  background: #10130f;

  color: #ffffff;

  border: 1px solid rgba(16, 19, 15, 0.08);
}

.contactRailBlock {
  padding: 22px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contactRailBlock:first-child {
  padding-top: 0;
}

.contactRailLabel {
  display: block;

  margin-bottom: 9px;

  color: var(--color-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.contactRailPrimary {
  color: rgba(255, 255, 255, 0.88);

  font-size: 15px;

  overflow-wrap: anywhere;

  transition: color 200ms ease;
}

.contactRailValue {
  color: rgba(255, 255, 255, 0.66);

  font-size: 14px;
}

/* =========================================================
     CONTACT MAP
  ========================================================= */

.contactRailMap {
  width: 100%;

  height: 190px;

  margin: 24px 0;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: #080b08;
}

.contactRailMap iframe {
  width: 100%;
  height: 100%;

  display: block;

  border: 0;

  filter: grayscale(1) contrast(1.06) brightness(0.74);

  transition: filter 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
     CONTACT SOCIALS
  ========================================================= */

.contactRailSocials {
  display: grid;

  gap: 8px;
}

.contactRailSocials a {
  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  color: rgba(255, 255, 255, 0.64);

  font-size: 12px;

  transition: color 200ms ease, padding-left 200ms ease;
}

.contactRailSocials a span {
  color: var(--color-accent);
}

/* =========================================================
     WHAT HAPPENS NEXT
  ========================================================= */

.contactNextSection {
  padding: clamp(64px, 6vw, 92px) 0 clamp(70px, 7vw, 100px);

  background: #070a07;

  color: #ffffff;
}

.contactNextHeader {
  margin-bottom: clamp(34px, 4vw, 52px);
}

.contactNextHeader .sectionEyebrow {
  display: block;

  margin-bottom: 16px;

  color: var(--color-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}

.contactNextHeader h2 {
  max-width: 700px;

  font-family: "Khand", sans-serif;

  font-size: clamp(54px, 5.8vw, 84px);

  font-weight: 700;

  line-height: 0.9;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.contactNextHeader h2 span {
  display: block;

  color: var(--color-accent);
}

/* =========================================================
     NEXT STEPS GRID
  ========================================================= */

.contactNextGrid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;
}

.contactNextCard {
  min-height: 260px;

  display: flex;
  flex-direction: column;

  padding: 24px;

  background: #0b0f0b;

  border: 1px solid rgba(255, 255, 255, 0.09);

  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease;
}

.contactNextNumber {
  margin-bottom: auto;

  color: var(--color-accent);

  font-size: 10px;

  letter-spacing: 0.12em;
}

.contactNextCard h3 {
  font-family: "Khand", sans-serif;

  font-size: clamp(30px, 3vw, 42px);

  font-weight: 600;

  line-height: 0.98;
}

.contactNextCard p {
  margin-top: 14px;

  color: rgba(255, 255, 255, 0.56);

  font-size: 13px;

  line-height: 1.55;
}

/* =========================================================
     DESKTOP HOVER
  ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .contactSubmit:hover {
    background: var(--color-accent);

    color: #10130f;

    border-color: var(--color-accent);

    transform: translateY(-2px);
  }

  .contactSubmit:hover svg {
    color: #10130f;

    transform: translateX(5px);
  }

  .contactRailPrimary:hover {
    color: var(--color-accent);
  }

  .contactRailMap:hover iframe {
    filter: grayscale(0.3) contrast(1.02) brightness(0.9);

    transform: scale(1.025);
  }

  .contactRailSocials a:hover {
    padding-left: 4px;

    color: #ffffff;
  }

  .contactNextCard:hover {
    transform: translateY(-5px);

    border-color: rgba(223, 255, 55, 0.3);
  }
}

/* =========================================================
     CONTACT TABLET
  ========================================================= */

@media (max-width: 1024px) {
  .contactHero {
    padding: 150px 0 70px;
  }

  .contactHeroInner {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .contactHeroSide {
    max-width: 600px;

    justify-self: start;
  }

  .contactMainGrid {
    grid-template-columns: 1fr;

    gap: 56px;
  }

  .contactRail {
    position: static;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0 32px;
  }

  .contactRailMap {
    grid-column: 1 / -1;

    height: 240px;
  }

  .contactNextGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
     CONTACT MOBILE
  ========================================================= */

@media (max-width: 640px) {
  .contactHero {
    padding: 118px 0 54px;
  }

  .contactHero h1 {
    font-size: clamp(30px, 12vw, 50px);
  }

  .contactHeroSide > p {
    font-size: 15px;

    line-height: 1.55;
  }

  .contactMainSection {
    padding: 52px 0 64px;
  }

  .contactFormHeading {
    margin-bottom: 32px;
  }

  .contactFormHeading h2 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .contactFormHeading p {
    font-size: 15px;
  }

  .contactForm {
    grid-template-columns: 1fr;

    gap: 22px;
  }

  .contactFieldFull {
    grid-column: auto;
  }

  .contactChoices {
    grid-template-columns: 1fr;
  }

  .contactFormActions {
    grid-column: auto;

    align-items: stretch;

    flex-direction: column;

    gap: 14px;
  }

  .contactSubmit {
    width: 100%;
  }

  .contactFormNote {
    max-width: 100%;
  }

  .contactRail {
    display: block;

    padding: 22px;
  }

  .contactRailMap {
    height: 180px;
  }

  .contactNextSection {
    padding: 52px 0 64px;
  }

  .contactNextHeader h2 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .contactNextGrid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .contactNextCard {
    min-height: 220px;
  }
}

/* =========================================================
     REDUCED MOTION
  ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .contactSubmit,
  .contactSubmit svg,
  .contactRailPrimary,
  .contactRailMap iframe,
  .contactRailSocials a,
  .contactNextCard {
    transition: none;
  }
}

/* =========================================================
   404 PAGE
========================================================= */

.errorPage {
  position: relative;

  min-height: 100svh;

  display: flex;
  align-items: center;

  padding:
    clamp(150px, 14vw, 210px)
    0
    clamp(70px, 7vw, 110px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(223, 255, 55, 0.055),
      transparent 26%
    ),
    #050805;

  color: #ffffff;
}

/* =========================================================
   BACKGROUND GRID
========================================================= */

.errorPageGrid {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.026) 1px,
      transparent 1px
    );

  background-size:
    110px 110px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.75),
      transparent 90%
    );

  opacity: 0.7;
}

/* =========================================================
   INNER
========================================================= */

.errorPageInner {
  position: relative;

  z-index: 2;

  width: 100%;
}

/* =========================================================
   MASSIVE 404
========================================================= */

.errorPageNumber {
  position: absolute;

  top: 50%;
  right: 0;

  transform:
    translateY(-52%);

  font-family:
    "Khand",
    sans-serif;

  font-size:
    clamp(230px, 31vw, 560px);

  font-weight: 700;

  line-height: 0.7;

  letter-spacing: -0.07em;

  color:
    rgba(255, 255, 255, 0.025);

  user-select: none;

  white-space: nowrap;
}

/* =========================================================
   CONTENT
========================================================= */

.errorPageContent {
  position: relative;

  z-index: 3;

  max-width: 760px;
}

.errorPageEyebrow {
  display: block;

  margin-bottom: 18px;

  color:
    var(--color-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.16em;
}

.errorPage h1 {
  max-width: 760px;

  font-family:
    "Khand",
    sans-serif;

  font-size:
    clamp(72px, 8.5vw, 132px);

  font-weight: 700;

  line-height: 0.82;

  letter-spacing: -0.045em;

  text-transform: uppercase;
}

.errorPage h1 span {
  display: block;

  color:
    var(--color-accent);
}

.errorPageContent > p {
  max-width: 540px;

  margin-top: 28px;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 16px;

  line-height: 1.65;
}

/* =========================================================
   ACTIONS
========================================================= */

.errorPageActions {
  margin-top: 34px;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 12px;
}

.errorPrimaryButton,
.errorSecondaryButton {
  min-height: 54px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding-inline: 22px;

  font-size: 13px;

  transition:
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}

.errorPrimaryButton {
  background:
    var(--color-accent);

  border:
    1px solid var(--color-accent);

  color:
    #10130f;
}

.errorSecondaryButton {
  background:
    transparent;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  color:
    #ffffff;
}

.errorPrimaryButton svg,
.errorSecondaryButton svg {
  width: 17px;
  height: 17px;

  flex-shrink: 0;

  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   META
========================================================= */

.errorPageMeta {
  position: relative;

  z-index: 3;

  margin-top:
    clamp(74px, 9vw, 130px);

  padding-top: 20px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;

  border-top:
    1px solid rgba(255, 255, 255, 0.1);
}

.errorPageMeta > div {
  display: grid;

  gap: 5px;
}

.errorPageMeta span {
  color:
    rgba(255, 255, 255, 0.32);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}

.errorPageMeta strong {
  color:
    rgba(255, 255, 255, 0.72);

  font-size: 12px;

  font-weight: 400;
}

/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .errorPrimaryButton:hover {
    background:
      #ffffff;

    border-color:
      #ffffff;

    transform:
      translateY(-2px);
  }

  .errorPrimaryButton:hover svg {
    transform:
      translateX(4px);
  }

  .errorSecondaryButton:hover {
    border-color:
      var(--color-accent);

    color:
      var(--color-accent);

    transform:
      translateY(-2px);
  }

  .errorSecondaryButton:hover svg {
    transform:
      translate(3px, -3px);
  }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .errorPage {
    min-height: 86svh;
  }

  .errorPageNumber {
    top: 46%;

    right: -6vw;

    font-size:
      clamp(220px, 40vw, 420px);
  }

  .errorPageMeta {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .errorPage {
    min-height: 100svh;

    padding:
      132px
      0
      56px;
  }

  .errorPageGrid {
    background-size:
      74px 74px;
  }

  .errorPageNumber {
    top: 35%;

    right: -7vw;

    font-size:
      clamp(170px, 61vw, 270px);
  }

  .errorPageEyebrow {
    margin-bottom: 14px;

    font-size: 10px;
  }

  .errorPage h1 {
    font-size:
      clamp(54px, 16vw, 74px);

    line-height: 0.84;
  }

  .errorPageContent > p {
    margin-top: 22px;

    font-size: 14px;

    line-height: 1.6;
  }

  .errorPageActions {
    align-items: stretch;

    flex-direction: column;

    margin-top: 28px;
  }

  .errorPrimaryButton,
  .errorSecondaryButton {
    width: 100%;
  }

  .errorPageMeta {
    margin-top: 64px;

    grid-template-columns: 1fr;

    gap: 18px;
  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .errorPrimaryButton,
  .errorSecondaryButton,
  .errorPrimaryButton svg,
  .errorSecondaryButton svg {
    transition: none;
  }

}

/* =========================================================
   LEGAL PAGES
   Privacy Policy + Terms of Use
========================================================= */

.legalHero {
  position: relative;

  padding:
    clamp(150px, 13vw, 205px)
    0
    clamp(72px, 7vw, 104px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 26%,
      rgba(223, 255, 55, 0.05),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #070a07 0%,
      #050805 100%
    );

  color: #ffffff;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   HERO GRID
========================================================= */

.legalHero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.028) 1px,
      transparent 1px
    );

  background-size:
    110px 110px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65),
      transparent 88%
    );

  opacity: 0.65;
}


/* =========================================================
   HERO INNER
========================================================= */

.legalHeroInner {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(260px, 0.8fr);

  gap:
    clamp(60px, 8vw, 130px);

  align-items: end;
}


/* =========================================================
   HERO COPY
========================================================= */

.legalHeroCopy {
  max-width: 900px;
}


.legalHeroCopy .sectionEyebrow {
  display: block;

  margin-bottom: 18px;

  color:
    var(--color-accent);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}


.legalHero h1 {
  max-width: 820px;

  font-family:
    "Khand",
    sans-serif;

  font-size:
    clamp(78px, 9vw, 138px);

  font-weight: 700;

  line-height: 0.82;

  letter-spacing: -0.045em;

  text-transform: uppercase;
}


.legalHero h1 span {
  display: block;

  color:
    var(--color-accent);
}


.legalHeroCopy > p {
  max-width: 610px;

  margin-top: 26px;

  color:
    rgba(255, 255, 255, 0.6);

  font-size: 16px;

  line-height: 1.65;
}


/* =========================================================
   HERO META
========================================================= */

.legalHeroMeta {
  display: grid;

  gap: 18px;

  padding-bottom: 4px;
}


.legalHeroMeta > div {
  display: grid;

  gap: 5px;

  padding-bottom: 14px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.09);
}


.legalHeroMeta span {
  color:
    rgba(255, 255, 255, 0.32);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}


.legalHeroMeta strong {
  color:
    rgba(255, 255, 255, 0.82);

  font-size: 13px;

  font-weight: 400;
}


/* =========================================================
   LEGAL CONTENT SECTION
========================================================= */

.legalContentSection {
  padding:
    clamp(82px, 8vw, 120px)
    0
    clamp(100px, 10vw, 150px);

  background:
    var(--color-light-bg);

  color:
    var(--color-light-text);
}


/* =========================================================
   LEGAL LAYOUT
========================================================= */

.legalLayout {
  display: grid;

  grid-template-columns:
    minmax(210px, 0.68fr)
    minmax(0, 2.32fr);

  gap:
    clamp(56px, 8vw, 130px);

  align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.legalSidebar {
  position: sticky;

  top: 110px;

  align-self: start;

  max-height:
    calc(100vh - 140px);

  overflow-y: auto;

  padding-right: 12px;

  scrollbar-width: thin;
}


.legalSidebarLabel {
  display: block;

  margin-bottom: 18px;

  color:
    var(--color-light-accent);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}


/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.legalNavigation {
  display: flex;

  flex-direction: column;
}


.legalNavigation a {
  min-height: 38px;

  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  padding:
    7px
    0;

  border-bottom:
    1px solid rgba(16, 19, 15, 0.08);

  color:
    rgba(16, 19, 15, 0.5);

  font-size: 12px;

  line-height: 1.35;

  transition:
    color 180ms ease,
    padding-left 220ms ease;
}


.legalNavigation a span {
  color:
    var(--color-light-accent);

  font-size: 9px;

  letter-spacing: 0.08em;
}


/* =========================================================
   LEGAL ARTICLE
========================================================= */

.legalArticle {
  width: 100%;

  max-width: 900px;
}


/* =========================================================
   LEGAL SECTION
========================================================= */

.legalSection {
  position: relative;

  padding:
    0
    0
    clamp(62px, 6vw, 88px);

  margin-bottom:
    clamp(58px, 6vw, 84px);

  border-bottom:
    1px solid rgba(16, 19, 15, 0.11);

  scroll-margin-top: 120px;
}


.legalSectionFinal {
  margin-bottom: 0;
}


.legalSectionNumber {
  display: block;

  margin-bottom: 12px;

  color:
    var(--color-light-accent);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.12em;
}


/* =========================================================
   LEGAL HEADINGS
========================================================= */

.legalSection h2 {
  max-width: 760px;

  font-family:
    "Khand",
    sans-serif;

  font-size:
    clamp(44px, 4.7vw, 68px);

  font-weight: 600;

  line-height: 0.96;

  letter-spacing: -0.028em;

  text-transform: uppercase;
}


.legalSection h3 {
  margin-top: 34px;

  font-family:
    "Khand",
    sans-serif;

  font-size:
    clamp(25px, 2.2vw, 32px);

  font-weight: 600;

  line-height: 1;

  letter-spacing: -0.018em;
}


/* =========================================================
   LEGAL COPY
========================================================= */

.legalSection p {
  max-width: 760px;

  margin-top: 20px;

  color:
    rgba(16, 19, 15, 0.66);

  font-size: 15px;

  line-height: 1.78;
}


.legalSection strong {
  color:
    #10130f;

  font-weight: 600;
}


/* =========================================================
   LEGAL LISTS
========================================================= */

.legalSection ul,
.legalSection ol {
  max-width: 760px;

  margin-top: 22px;

  padding-left: 20px;

  display: grid;

  gap: 11px;

  color:
    rgba(16, 19, 15, 0.65);

  font-size: 15px;

  line-height: 1.7;
}


.legalSection li::marker {
  color:
    var(--color-light-accent);
}


/* =========================================================
   INFO BOX
========================================================= */

.legalInfoBox {
  max-width: 560px;

  margin-top: 28px;

  padding: 20px 22px;

  display: grid;

  gap: 7px;

  background:
    #ffffff;

  border:
    1px solid rgba(16, 19, 15, 0.1);

  border-left:
    3px solid var(--color-light-accent);
}


.legalInfoBox > span {
  color:
    rgba(16, 19, 15, 0.44);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.11em;
}


.legalInfoBox a {
  width: fit-content;

  color:
    #10130f;

  font-size: 14px;

  font-weight: 500;

  overflow-wrap: anywhere;

  transition:
    color 180ms ease;
}


/* =========================================================
   INLINE LINK
========================================================= */

.legalInlineLink {
  width: fit-content;

  display: inline-flex;

  margin-top: 16px;

  color:
    var(--color-light-accent);

  font-size: 14px;

  font-weight: 500;

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    4px;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.legalContactCard {
  max-width: 560px;

  margin-top: 28px;

  padding: 24px;

  display: grid;

  gap: 8px;

  background:
    #10130f;

  color:
    #ffffff;
}


.legalContactCard > span {
  color:
    var(--color-accent);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}


.legalContactCard a {
  width: fit-content;

  color:
    #ffffff;

  font-size: 15px;

  overflow-wrap: anywhere;

  transition:
    color 180ms ease;
}


.legalContactCard p {
  margin-top: 0;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 12px;
}


/* =========================================================
   CLOSING NOTE
========================================================= */

.legalClosingNote {
  margin-top:
    clamp(64px, 7vw, 96px);

  padding-top: 24px;

  border-top:
    1px solid rgba(16, 19, 15, 0.12);
}


.legalClosingNote > span {
  display: block;

  color:
    var(--color-light-accent);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}


.legalClosingNote p {
  max-width: 640px;

  margin-top: 12px;

  color:
    rgba(16, 19, 15, 0.52);

  font-size: 13px;

  line-height: 1.65;
}


/* =========================================================
   DESKTOP INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .legalNavigation a:hover {
    padding-left: 4px;

    color:
      #10130f;
  }


  .legalInfoBox a:hover,
  .legalContactCard a:hover {
    color:
      var(--color-light-accent);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .legalHeroInner {
    grid-template-columns:
      1fr;

    gap: 44px;
  }


  .legalHeroMeta {
    max-width: 520px;
  }


  .legalLayout {
    grid-template-columns:
      1fr;

    gap: 48px;
  }


  .legalSidebar {
    position: relative;

    top: auto;

    max-height: none;

    overflow: visible;

    padding-right: 0;
  }


  .legalNavigation {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      0
      24px;
  }


  .legalArticle {
    max-width: 100%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .legalHero {
    padding:
      126px
      0
      62px;
  }


  .legalHero::before {
    background-size:
      74px 74px;
  }


  .legalHero h1 {
    font-size:
      clamp(58px, 18vw, 78px);

    line-height: 0.84;
  }


  .legalHeroCopy > p {
    margin-top: 22px;

    font-size: 14px;

    line-height: 1.6;
  }


  .legalHeroMeta {
    gap: 14px;
  }


  .legalContentSection {
    padding:
      64px
      0
      84px;
  }


  .legalLayout {
    gap: 38px;
  }


  .legalSidebarLabel {
    margin-bottom: 14px;
  }


  .legalNavigation {
    grid-template-columns:
      1fr;
  }


  .legalNavigation a {
    min-height: 36px;

    grid-template-columns:
      28px
      minmax(0, 1fr);

    font-size: 11px;
  }


  .legalSection {
    padding-bottom: 50px;

    margin-bottom: 48px;

    scroll-margin-top: 96px;
  }


  .legalSection h2 {
    font-size:
      clamp(32px, 10vw, 46px);
  }


  .legalSection h3 {
    margin-top: 28px;

    font-size:
      clamp(24px, 8vw, 30px);
  }


  .legalSection p,
  .legalSection ul,
  .legalSection ol {
    font-size: 14px;

    line-height: 1.7;
  }


  .legalSection ul,
  .legalSection ol {
    padding-left: 18px;
  }


  .legalInfoBox,
  .legalContactCard {
    max-width: 100%;

    padding: 18px;
  }


  .legalClosingNote {
    margin-top: 56px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .legalNavigation a,
  .legalInfoBox a,
  .legalContactCard a {
    transition: none;
  }

}

/* ========================================================
     HEBREW VERSION STYLES ADJUSTMENTS
========================================================= */     

/* =========================================================
   RTL HEADER
========================================================= */

html[dir="rtl"] .navInner {
  direction: rtl;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: clamp(24px, 3vw, 48px);
}


/* BRAND */

html[dir="rtl"] .navInner > .brand {
  direction: ltr;

  flex-shrink: 0;

  margin: 0;
}


/* NAVIGATION */

html[dir="rtl"] .desktopNav {
  direction: rtl;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(26px, 2.8vw, 46px);

  margin-inline: auto;
}


html[dir="rtl"] .desktopNav a {
  white-space: nowrap;

  text-align: right;
}


/* ACTIONS */

html[dir="rtl"] .navActions {
  direction: ltr;

  display: flex;
  align-items: center;

  gap: 14px;

  flex-shrink: 0;

  margin: 0;
}


html[dir="rtl"] .languageButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border: 1px solid rgba(255,255,255,.12);
    background: transparent;

    color: #fff;
    font-weight: 600;
}


html[dir="rtl"] .navActions .primaryButton {
  direction: rtl;

  white-space: nowrap;
}


/* =========================================================
   RTL MOBILE MENU
========================================================= */

html[dir="rtl"] .mobileMenuPanel {
  direction: rtl;

  text-align: right;
}


html[dir="rtl"] .mobileMenuTop {
  direction: rtl;
}


html[dir="rtl"] .mobileMenuBrand {
  direction: ltr;
}


html[dir="rtl"] .mobileMenuNav {
  direction: rtl;

  text-align: right;
}


html[dir="rtl"] .mobileMenuNav > a {
  direction: rtl;

  text-align: right;
}


html[dir="rtl"] .menuIndex {
  direction: ltr;
}


html[dir="rtl"] .mobileMenuBottom {
  direction: rtl;

  text-align: right;
}


html[dir="rtl"] .mobileMenuEmail {
  direction: ltr;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  html[dir="rtl"] .navInner {
    gap: 18px;
  }


  html[dir="rtl"] .desktopNav {
    display: none;
  }


  html[dir="rtl"] .navActions {
    margin-right: auto;
  }
  html[dir="rtl"] .navActions {

    display: flex;

    align-items: center;

    gap: 12px;

  }

  html[dir="rtl"] .menuButton {

    order: 1;

  }

  html[dir="rtl"] .languageButton {

    order: 2;

  }

}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  html[dir="rtl"] .navInner {
    gap: 12px;
  }


  html[dir="rtl"] .navActions {
    gap: 10px;
  }


  html[dir="rtl"] .navActions > .primaryButton {
    display: none;
  }

}

/* =========================================================
   RTL, ARROW DIRECTION FIX
========================================================= */

html[dir="rtl"] .menuArrow,
html[dir="rtl"] .insightReadMore svg,
html[dir="rtl"] .finalCtaArrow,
html[dir="rtl"] .newsletterButton svg,
html[dir="rtl"] .footerLinkArrow {
  transform: scaleX(-1);
}
html[dir="rtl"] .footballNewsRead svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .footballNewsCard:hover .footballNewsRead svg {
  transform: scaleX(-1) translateX(-4px);
}

/* =========================================================
   RTL ARTICLES
========================================================= */

html[dir="rtl"] .articleBreadcrumb,
html[dir="rtl"] .articleMeta,
html[dir="rtl"] .articleSidebar,
html[dir="rtl"] .articleBody,
html[dir="rtl"] .articleNavCard {
  text-align: right;
}

html[dir="rtl"] .articleNavDirection {
  direction: rtl;
}
html[dir="rtl"] .contactSubmit svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .contactSubmit:hover svg {
  transform: scaleX(-1) translateX(-4px);
}
html[dir="rtl"] .errorPrimaryButton svg,
html[dir="rtl"] .errorSecondaryButton svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .errorPrimaryButton:hover svg {
  transform: scaleX(-1) translateX(-4px);
}

html[dir="rtl"] .errorSecondaryButton:hover svg {
  transform: scaleX(-1) translate(-3px, -3px);
}

/* =========================================================
   ACCESSIBILITY WIDGET
========================================================= */

/* English / LTR */

.accessibilityWidget {

  position: fixed;

  right: 24px;

  left: auto;

  bottom: 24px;

  z-index: 9999;

}


/* =========================================================
   TOGGLE BUTTON
========================================================= */

.accessibilityToggle {

  width: 54px;

  height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--color-accent);

  background: var(--color-accent);

  color: #050805;

  cursor: pointer;

  box-shadow:

    0 10px 30px rgba(223, 255, 55, 0.18);

  transition:

    transform 220ms ease,

    background 220ms ease,

    color 220ms ease,

    border-color 220ms ease,

    box-shadow 220ms ease;

}


.accessibilityToggle svg {
  width: 24px;
  height: 24px;

  fill: none;
  stroke: currentColor;
}


@media (hover: hover) and (pointer: fine) {

  .accessibilityToggle:hover {
    background: #050805;

    color: var(--color-accent);

    border-color: var(--color-accent);

    transform: translateY(-2px);

    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.32);
  }

}


/* =========================================================
   PANEL
========================================================= */

.accessibilityPanel {
  position: absolute;
  
  right: 0;
  left: auto;
  bottom: calc(100% + 12px);

  width: min(340px, calc(100vw - 48px));

  padding: 22px;

  background: #0a0e0a;

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.35);

  opacity: 0;
  visibility: hidden;

  transform: translateY(10px);

  pointer-events: none;

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 220ms ease;
}


.accessibilityWidget.isOpen .accessibilityPanel {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;
}


/* =========================================================
   HEADER
========================================================= */

.accessibilityHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 20px;

  padding-bottom: 16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.accessibilityEyebrow {
  display: block;

  margin-bottom: 5px;

  color: var(--color-accent);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}


.accessibilityHeader h2 {
  margin: 0;

  color: #ffffff;

  font-size: 22px;

  font-weight: 600;
}


/* =========================================================
   CLOSE
========================================================= */

.accessibilityClose {
  position: relative;

  width: 32px;
  height: 32px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background: transparent;

  cursor: pointer;
}


.accessibilityClose span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 14px;
  height: 1px;

  background: #ffffff;
}


.accessibilityClose span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}


.accessibilityClose span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* =========================================================
   OPTIONS
========================================================= */

.accessibilityOptions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}


.accessibilityOption {
  min-height: 48px;

  padding: 10px 12px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.03);

  color: rgba(255, 255, 255, 0.78);

  font: inherit;

  font-size: 12px;

  cursor: pointer;

  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}


.accessibilityOption.isActive {
  background: var(--color-accent);

  border-color: var(--color-accent);

  color: #050805;
}


/* =========================================================
   RESET
========================================================= */

.accessibilityReset {
  width: 100%;

  min-height: 44px;

  margin-top: 12px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: transparent;

  color: rgba(255, 255, 255, 0.56);

  font: inherit;

  font-size: 11px;

  cursor: pointer;
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"] .accessibilityWidget {
  right: auto;

  left: 24px;
}


html[dir="rtl"] .accessibilityPanel {
  right: auto;

  left: 0;

  text-align: right;
}


/* =========================================================
   ACCESSIBILITY STATES
========================================================= */

html.accessibilityTextLarge {
  font-size: 112.5%;
}


html.accessibilityTextSmall {
  font-size: 93.75%;
}


html.accessibilityHighContrast body {
  background: #000000 !important;
  color: #ffffff !important;
}


html.accessibilityHighContrast img {
  filter: contrast(1.15);
}


html.accessibilityGrayscale {
  filter: grayscale(1);
}


html.accessibilityHighlightLinks a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}


html.accessibilityReadableFont body,
html.accessibilityReadableFont button,
html.accessibilityReadableFont input,
html.accessibilityReadableFont textarea,
html.accessibilityReadableFont select {
  font-family:
    Arial,
    Helvetica,
    sans-serif !important;
}


html.accessibilityReduceMotion *,
html.accessibilityReduceMotion *::before,
html.accessibilityReduceMotion *::after {
  scroll-behavior: auto !important;

  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;

  transition-duration: 0.001ms !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .accessibilityWidget {

    right: 16px;

    left: auto;

    bottom: 16px;

  }

  html[dir="rtl"] .accessibilityWidget {

    right: auto;

    left: 16px;

  }

  .accessibilityToggle {

    width: 50px;

    height: 50px;

  }

  .accessibilityPanel {

    width: min(320px, calc(100vw - 32px));

    padding: 18px;

  }

  .accessibilityOptions {

    grid-template-columns: 1fr;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .accessibilityToggle,
  .accessibilityPanel,
  .accessibilityOption {
    transition: none;
  }

}