/* ==========================================================================
   BaridX — design backbone
   Monochrome base + one accent (Pantone 2725 C). Heavy negative space,
   large confident typography, hairline structure, subtle motion.
   All directional CSS uses logical properties so RTL works without overrides.
   ========================================================================== */

:root {
  --bx-bg: var(--wp--preset--color--bg, #f8f8f8);
  --bx-fg: var(--wp--preset--color--fg, #0f0f0f);
  --bx-accent: var(--wp--preset--color--accent, #5a45ef);
  --bx-accent-soft: var(--wp--preset--color--accent-soft, #e8e4ff);
  --bx-card: var(--wp--preset--color--card, #ffffff);
  --bx-band: var(--wp--preset--color--band, #f3f2fe);
  --bx-shell: var(--wp--preset--color--shell, #e9e9e9);
  --bx-mute: var(--wp--preset--color--mute, #6b6b6b);
  --bx-faint: var(--wp--preset--color--faint, #a6a6a6);
  --bx-line: var(--wp--preset--color--line, #e6e6e6);
  --bx-line-soft: var(--wp--preset--color--line-soft, #efefef);

  --bx-r-sm: 10px;
  --bx-r-md: 16px;
  --bx-r-lg: 24px;
  --bx-r-xl: 32px;
  --bx-r-pill: 999px;

  --bx-shadow-soft: 0 1px 0 0 rgba(15, 15, 15, 0.04), 0 12px 40px -16px rgba(15, 15, 15, 0.1);
  --bx-shadow-lift: 0 2px 4px -2px rgba(15, 15, 15, 0.06), 0 24px 64px -24px rgba(15, 15, 15, 0.16);

  --bx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bx-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --bx-max: 1560px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* WordPress sets no global border-box. Without this, .bx-shell's inline padding
   adds to its 100% width and every section overflows the viewport. */
*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: var(--bx-bg);
  color: var(--bx-fg);
  font-feature-settings: "ss01" on, "cv11" on;
}

body.is-rtl-arabic {
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}

/* Plex Arabic ships no italic — never fake one. */
body.is-rtl-arabic em,
body.is-rtl-arabic i {
  font-style: normal;
}

::selection {
  background: var(--bx-accent);
  color: var(--bx-bg);
}

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--bx-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --------------------------------------------------------------------------
   Shell + sections
   -------------------------------------------------------------------------- */

.bx-shell {
  inline-size: 100%;
  max-inline-size: var(--bx-max);
  margin-inline: auto;
  padding-inline: var(--bx-gutter);
}

.bx-section {
  padding-block: clamp(4.5rem, 9vw, 10rem);
}

.bx-section--tight {
  padding-block: clamp(3rem, 5vw, 5.5rem);
}

.bx-section--flush-top {
  padding-block-start: 0;
}

.bx-section--flush-bottom {
  padding-block-end: 0;
}

.bx-section--band {
  background: var(--bx-band);
}

.bx-section--ink {
  background: var(--bx-fg);
  color: var(--bx-bg);
}

.bx-section--ink :is(h1, h2, h3, h4, h5, h6) {
  color: var(--bx-bg);
}

.bx-section--ink .bx-mute {
  color: rgba(248, 248, 248, 0.62);
}

.bx-section--ink .bx-rule,
.bx-section--ink .bx-hairline {
  border-color: rgba(248, 248, 248, 0.16);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.bx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bx-mute);
  margin: 0 0 1.5rem;
}

.bx-eyebrow::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--bx-accent);
  flex: none;
}

.bx-section--ink .bx-eyebrow {
  color: rgba(248, 248, 248, 0.7);
}

.bx-display {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.bx-title {
  font-size: clamp(2rem, 1rem + 3.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.bx-lede {
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.55;
  color: var(--bx-mute);
  max-inline-size: 62ch;
  margin: 1.5rem 0 0;
  text-wrap: pretty;
}

.bx-mute { color: var(--bx-mute); }
.bx-faint { color: var(--bx-faint); }
.bx-accent { color: var(--bx-accent); }

/* --------------------------------------------------------------------------
   Structure
   -------------------------------------------------------------------------- */

.bx-rule {
  border: 0;
  border-block-start: 1px solid var(--bx-line);
  margin: 0;
}

.bx-hairline {
  border-block-start: 1px solid var(--bx-line);
}

.bx-grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.bx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bx-grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 6rem);
}

.bx-grid--aside {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

@media (max-width: 1024px) {
  .bx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .bx-grid--2,
  .bx-grid--3,
  .bx-grid--4,
  .bx-grid--split,
  .bx-grid--aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bx-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bx-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.bx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.bx-card {
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  box-shadow: var(--bx-shadow-soft);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  transition: transform 500ms var(--bx-ease), box-shadow 500ms var(--bx-ease),
    border-color 500ms var(--bx-ease);
  block-size: 100%;
  display: flex;
  flex-direction: column;
}

.bx-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--bx-shadow-lift);
  /* Ink, not accent. The accent is reserved for actions — see the spec
     language notes at the foot of this file. A card that tints purple on
     hover competes with the button that actually does something. */
  border-color: var(--bx-fg);
}

.bx-card--flat {
  box-shadow: none;
  background: transparent;
}

.bx-card--accent {
  background: var(--bx-accent);
  border-color: var(--bx-accent);
  color: var(--bx-bg);
}

.bx-card--accent :is(h1, h2, h3, h4, h5, h6) { color: var(--bx-bg); }
.bx-card--accent .bx-mute { color: rgba(248, 248, 248, 0.72); }

.bx-card__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

.bx-card__body {
  color: var(--bx-mute);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

.bx-card__foot {
  margin-block-start: auto;
  padding-block-start: 1.5rem;
}

/* --------------------------------------------------------------------------
   Row list — the workhorse for service lists
   -------------------------------------------------------------------------- */

.bx-rows {
  border-block-start: 1px solid var(--bx-line);
}

.bx-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.4rem, 2.4vw, 2rem);
  border-block-end: 1px solid var(--bx-line);
  transition: background 400ms var(--bx-ease), padding-inline 400ms var(--bx-ease);
}

.bx-row:hover {
  background: var(--bx-card);
  padding-inline: clamp(0.75rem, 1.6vw, 1.5rem);
}

.bx-row__label {
  font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.bx-row__meta {
  color: var(--bx-mute);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}

.bx-row__tag {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bx-accent);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .bx-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .bx-row__tag { justify-self: start; }
}

/* --------------------------------------------------------------------------
   Chips, badges, buttons
   -------------------------------------------------------------------------- */

.bx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-pill);
  background: var(--bx-card);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bx-fg);
  white-space: nowrap;
}

.bx-chip--accent {
  background: var(--bx-accent-soft);
  border-color: transparent;
  color: var(--bx-accent);
}

.bx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  border-radius: var(--bx-r-pill);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 320ms var(--bx-ease), color 320ms var(--bx-ease),
    border-color 320ms var(--bx-ease), transform 320ms var(--bx-ease);
}

.bx-btn:hover { transform: translateY(-1px); }

.bx-btn--primary {
  background: var(--bx-fg);
  color: var(--bx-bg);
}

.bx-btn--primary:hover {
  background: var(--bx-accent);
  color: var(--bx-bg);
}

.bx-btn--accent {
  background: var(--bx-accent);
  color: var(--bx-bg);
}

.bx-btn--accent:hover { background: var(--bx-fg); color: var(--bx-bg); }

.bx-btn--ghost {
  background: transparent;
  color: var(--bx-fg);
  border-color: var(--bx-line);
}

.bx-btn--ghost:hover {
  border-color: var(--bx-fg);
  color: var(--bx-fg);
}

.bx-section--ink .bx-btn--ghost {
  color: var(--bx-bg);
  border-color: rgba(248, 248, 248, 0.28);
}

.bx-section--ink .bx-btn--ghost:hover { border-color: var(--bx-bg); }

/* --------------------------------------------------------------------------
   The pill button: a label, then a circled corner-arrow
   Used on the hero. The badge is a real element rather than a pseudo so the
   glyph inside it can move independently of the disc that clips it.
   -------------------------------------------------------------------------- */

.bx-btn--pill {
  gap: 1rem;
  /* Padding is asymmetric: the badge brings its own bulk, so the end side
     only needs enough room to sit the disc off the edge. */
  padding: 0.4375rem;
  padding-inline-start: 1.625rem;
  font-size: 1rem;
}

.bx-btn__arrow {
  position: relative;
  flex: none;
  inline-size: 2.625rem;
  block-size: 2.625rem;
  border-radius: 50%;
  /* The disc clips the glyph's travel — that is the whole effect. */
  overflow: hidden;
  background: currentColor;
}

/* One flip on the badge mirrors the glyph AND its direction of travel, so
   the RTL hover runs to the opposite corner without restating a transform. */
[dir="rtl"] .bx-btn__arrow { transform: scaleX(-1); }

.bx-btn__arrow svg {
  position: absolute;
  /* inset:0 + margin:auto centres an absolutely positioned box of a known
     size — place-items cannot reach an out-of-flow child. */
  inset: 0;
  margin: auto;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  /* The glyph is the button's own ground showing through the filled disc. */
  color: var(--bx-pill-ink, var(--bx-bg));
  transition: transform 460ms var(--bx-ease);
}

/* The second glyph waits off the opposite corner. */
.bx-btn__arrow svg + svg { transform: translate(-150%, 150%); }

.bx-btn--pill:hover .bx-btn__arrow svg { transform: translate(150%, -150%); }
.bx-btn--pill:hover .bx-btn__arrow svg + svg { transform: none; }

/* The pill does not also lift — the arrow is the response. */
.bx-btn--pill:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bx-btn__arrow svg { transition: none; }
  .bx-btn--pill:hover .bx-btn__arrow svg { transform: none; }
  .bx-btn--pill:hover .bx-btn__arrow svg + svg { transform: translate(-150%, 150%); }
}

/* Arrow glyph flips automatically in RTL. */
.bx-arrow {
  display: inline-block;
  transition: transform 320ms var(--bx-ease);
}

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

.bx-btn:hover .bx-arrow { transform: translateX(3px); }
[dir="rtl"] .bx-btn:hover .bx-arrow { transform: scaleX(-1) translateX(3px); }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.bx-stat__num {
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.bx-stat__label {
  color: var(--bx-mute);
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

.bx-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--bx-r-xl);
  background: var(--bx-shell);
  isolation: isolate;
}

.bx-media > img,
.bx-media > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.bx-media--tall { aspect-ratio: 3 / 4; }
.bx-media--wide { aspect-ratio: 16 / 9; }
.bx-media--square { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.bx-marquee {
  overflow: hidden;
  border-block: 1px solid var(--bx-line);
  padding-block: 1.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bx-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  inline-size: max-content;
  animation: bx-marquee 42s linear infinite;
}

.bx-marquee__item {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--bx-mute);
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  white-space: nowrap;
}

.bx-marquee__item::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--bx-accent);
  flex: none;
}

@keyframes bx-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

[dir="rtl"] .bx-marquee__track { animation-name: bx-marquee-rtl; }

@keyframes bx-marquee-rtl {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   Tracking form
   -------------------------------------------------------------------------- */

.bx-track {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-pill);
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  max-inline-size: 560px;
  box-shadow: var(--bx-shadow-soft);
  transition: border-color 320ms var(--bx-ease), box-shadow 320ms var(--bx-ease);
}

[dir="rtl"] .bx-track { padding: 0.5rem 1.5rem 0.5rem 0.5rem; }

.bx-track:focus-within {
  border-color: var(--bx-accent);
  box-shadow: 0 0 0 4px var(--bx-accent-soft);
}

.bx-track__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--bx-fg);
  padding-block: 0.75rem;
}

.bx-track__input::placeholder { color: var(--bx-faint); }
.bx-track__input:focus { outline: none; }

.bx-track__btn {
  flex: none;
  padding: 0.85rem 1.5rem;
  border-radius: var(--bx-r-pill);
  border: 0;
  background: var(--bx-fg);
  color: var(--bx-bg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 320ms var(--bx-ease);
}

.bx-track__btn:hover { background: var(--bx-accent); }

/* --------------------------------------------------------------------------
   Header / footer chrome
   -------------------------------------------------------------------------- */

.bx-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(248, 248, 248, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-block-end: 1px solid transparent;
  transition: border-color 400ms var(--bx-ease), background 400ms var(--bx-ease);
}

.bx-header.is-stuck { border-block-end-color: var(--bx-line); }

/* A three-track grid, not `space-between`.
   space-between positions children by how many there ARE: the Arabic pages
   carry no division CTA (it is an anchor into an untranslated section), so
   with two children instead of three the nav was flung to the far edge
   instead of staying centred. The empty outer track holds the centre whether
   or not the action is there. */
.bx-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-block: 1.1rem;
}

.bx-header__inner > .bx-logo { grid-column: 1; justify-self: start; }
.bx-header__inner > .bx-nav--main { grid-column: 2; justify-self: center; }
.bx-header__inner > .bx-cluster { grid-column: 3; justify-self: end; }

.bx-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.bx-logo img { block-size: 26px; inline-size: auto; display: block; }

.bx-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.bx-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bx-fg);
  text-decoration: none;
  position: relative;
  transition: color 280ms var(--bx-ease);
}

.bx-nav a:hover { color: var(--bx-accent); }

@media (max-width: 860px) {
  .bx-nav--main { display: none; }
}

@media (max-width: 560px) {
  .bx-header__inner { gap: 1rem; }
  .bx-logo img { block-size: 22px; }
  .bx-header .bx-btn {
    padding-inline: 1.1rem;
    font-size: 0.875rem;
  }
  .bx-header .bx-btn .bx-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   Footer
   Light, not ink: the brand block sits at the start with the link columns
   pushed to the end, and a hairline separates the base row. The columns'
   headings carry the weight and the links stay muted, so the footer reads as
   a directory rather than as another section competing with the page.
   -------------------------------------------------------------------------- */

.bx-footer {
  background: var(--bx-bg);
  color: var(--bx-fg);
  border-block-start: 1px solid var(--bx-line);
}

.bx-footer a {
  color: var(--bx-mute);
  text-decoration: none;
  transition: color 200ms var(--bx-ease);
}

.bx-footer a:hover { color: var(--bx-fg); }

/* The brand block takes what it needs; the columns take the rest and sit at
   the far end. */
.bx-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}

.bx-footer__mark {
  block-size: 30px;
  inline-size: auto;
  display: block;
}

.bx-footer__line {
  margin: 0.875rem 0 0;
  max-inline-size: 26ch;
  font-size: 0.9375rem;
  color: var(--bx-mute);
}

.bx-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.bx-footer__mail .bx-arrow {
  transition: transform 220ms var(--bx-ease);
}

.bx-footer__mail:hover .bx-arrow { transform: translateX(0.2rem); }

[dir="rtl"] .bx-footer__mail:hover .bx-arrow { transform: translateX(-0.2rem); }

.bx-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  justify-items: start;
}

/* A lone column stretched across the full width reads as a mistake, so it
   sits at the end where the set would be. Rare now that every language gets
   four, but kept for a language that only has its divisions translated. */
.bx-footer__cols:has(> .bx-footer__col:only-child) {
  grid-template-columns: minmax(0, auto);
  justify-content: end;
}

/* A footer entry with nowhere to go yet: it still belongs in the map of what
   BaridX does, but it must not look like a link. */
.bx-footer__plain {
  color: var(--bx-mute);
}

.bx-footer__title {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bx-fg);
}

.bx-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.625rem;
  font-size: 0.9375rem;
}

.bx-footer__base {
  margin-block-start: clamp(3rem, 6vw, 5rem);
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--bx-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--bx-faint);
}

.bx-footer__base p { margin: 0; }

@media (max-width: 860px) {
  .bx-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Motion — reveal on scroll
   -------------------------------------------------------------------------- */

/* Scoped to .bx-js so that if site.js never runs, content is simply visible
   rather than stuck at opacity 0. The class is set by an inline head script. */
.bx-js .bx-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  /* 560ms, not 900. With the observer's stagger on top, 900ms meant a section
     could take 1.3 seconds to finish arriving AFTER it was already on screen
     — long enough to read as an empty page rather than as an entrance. */
  transition: opacity 560ms var(--bx-ease), transform 560ms var(--bx-ease);
  transition-delay: var(--bx-delay, 0ms);
}

.bx-js .bx-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

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

  .bx-js .bx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bx-marquee__track { animation: none; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Screen-reader only */
.bx-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Spec language
   Carried over from the platform's service-management screens (the Shipping
   Label tab). Two rules travel with it and are the whole point:

   1. Emphasis reads DARK, never coloured. A picked card takes an ink border
      over the page ground; the accent stays reserved for actions, so a screen
      never shows a purple card next to a purple button and asks the reader to
      guess which one is the thing to press.
   2. Facts are labelled in mono caps and separated by hairlines, the way a
      shipping document is. It makes a page of services read as a spec sheet
      rather than as marketing copy — which is what a logistics buyer wants.

   Everything here is logical-property only, so it mirrors under [dir="rtl"].
   -------------------------------------------------------------------------- */

/* The mono cap that names a fact. The print sheet sets this at 6.5pt; on
   screen that lands under 9px, so it is opened up to stay legible while
   keeping the same weight and tracking. */
.bx-cap {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bx-mute);
}

/* --------------------------------------------------------------------------
   Option cards
   -------------------------------------------------------------------------- */

.bx-opts {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.bx-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-md);
  text-align: start;
  text-decoration: none;
  color: inherit;
  transition: border-color 320ms var(--bx-ease), background-color 320ms var(--bx-ease);
}

/* Ink, not accent — see rule 1 above. The BORDER and ground carry this; the
   icon tile deliberately does not change (it stays grey in every state), so
   the eye lands on the card rather than on a square that turned black. */
.bx-opt:hover,
.bx-opt:focus-visible,
.bx-opt--on {
  border-color: var(--bx-fg);
  background: var(--bx-bg);
}

.bx-opt:focus-visible {
  outline: 2px solid var(--bx-fg);
  outline-offset: 2px;
}

.bx-opt__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(0.875rem, 1.4vw, 1.125rem);
}

.bx-opt__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  border-radius: var(--bx-r-sm);
  /* Grey in every state — see the note on .bx-opt's hover rule. Nothing here
     changes on selection, so there is nothing to transition. */
  background: var(--bx-shell);
  color: var(--bx-mute);
}

.bx-opt__tile svg { inline-size: 1.25rem; block-size: 1.25rem; }

.bx-opt__title {
  display: block;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bx-fg);
}

.bx-opt__meta {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bx-mute);
}

/* The short mono mark in the corner — a service code, a size, a tier. */
.bx-opt__badge {
  position: absolute;
  inset-inline-end: 0.625rem;
  inset-block-start: 0.625rem;
  z-index: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bx-faint);
}

.bx-opt--on .bx-opt__badge { color: var(--bx-fg); }

/* The footer strip under a hairline — where the card states its terms. */
.bx-opt__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-block-start: 1px solid var(--bx-line);
  padding: 0.625rem clamp(0.875rem, 1.4vw, 1.125rem);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bx-mute);
}

.bx-opt__foot strong {
  font-weight: 600;
  color: var(--bx-fg);
}

/* --------------------------------------------------------------------------
   Spec sheet — a block of labelled facts, ruled like a waybill
   -------------------------------------------------------------------------- */

.bx-sheet {
  background: var(--bx-card);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

/* The heavy rule that closes the masthead, as on the printed sticker. */
.bx-sheet__head {
  border-block-end: 2px solid var(--bx-fg);
  padding-block-end: 0.875rem;
  margin-block-end: 1.25rem;
}

.bx-sheet__name {
  margin: 0.5rem 0 0;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.bx-spec {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.bx-spec__cell {
  border-block-start: 1px solid var(--bx-line);
  padding-block: 0.75rem;
  padding-inline-end: 1.25rem;
}

.bx-spec__value {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bx-fg);
}

/* --------------------------------------------------------------------------
   Tags — the handling marks along the foot of a label
   -------------------------------------------------------------------------- */

.bx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bx-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bx-fg);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bx-fg);
}

/* --------------------------------------------------------------------------
   Reduced motion — the transitions above are decorative
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bx-opt {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Chooser — the front door
   Three audience cards and nothing else, so the first decision a visitor
   makes is the only thing on screen. Uses the option-card chrome above; the
   overrides here only make the cards taller and the copy larger, because a
   card that IS the page cannot be sized like one in a grid of nine.
   -------------------------------------------------------------------------- */

.bx-choose {
  display: grid;
  /* align-content, NOT place-content: centring on the inline axis too would
     shrink the column to its content width, which is what wrapped the three
     cards to 2 + 1. */
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  /* Height comes from the flex chain below, not a guess at the chrome's
     height — see .home .wp-site-blocks. A calc() subtracting a fixed 7rem was
     16px out, because the banner and the logo row size themselves. */
  min-block-size: 0;
  /* Overrides .bx-section's clamp(4.5rem, 9vw, 10rem) — that padding alone
     was pushing the cards under the fold. */
  padding-block: clamp(1.25rem, 3vh, 2.5rem);
  text-align: center;
}

.bx-choose__head {
  max-inline-size: 44rem;
  margin-inline: auto;
  margin-block-end: clamp(1.5rem, 4vh, 2.75rem);
}

/* Sized against the viewport HEIGHT as well as its width. Width alone is not
   enough: on a short laptop window a headline scaled only by vw eats the
   cards. */
.bx-choose .bx-display {
  font-size: clamp(1.75rem, min(5.2vw, 7.2vh), 3.5rem);
  margin-block: 0;
}

.bx-choose .bx-lede {
  max-inline-size: 36rem;
  margin-inline: auto;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
}

.bx-opts--choose {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* One per row once three of them would be too narrow to read. */
@media (max-width: 860px) {
  .bx-opts--choose {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bx-opts--choose .bx-opt__body {
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.bx-opts--choose .bx-opt__tile {
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.bx-opts--choose .bx-opt__tile svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.bx-opts--choose .bx-opt__title {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.bx-opts--choose .bx-opt__meta {
  font-size: 0.875rem;
}

/* The arrow leans into the reading direction and nudges on hover. It is
   flipped for RTL by the shared .bx-arrow rule. */
.bx-opts--choose .bx-opt__foot .bx-arrow {
  transition: transform 320ms var(--bx-ease);
}

.bx-opts--choose .bx-opt:hover .bx-opt__foot .bx-arrow {
  transform: translateX(0.25rem);
}

[dir="rtl"] .bx-opts--choose .bx-opt:hover .bx-opt__foot .bx-arrow {
  transform: translateX(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .bx-opts--choose .bx-opt__foot .bx-arrow {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Division bar + switcher
   The site is three sites. Each division owns its own menu (rendered by
   baridx_render_site_nav in functions.php), and this bar is the seam between
   them — always on screen inside a division, absent on the chooser, where
   the page already is the choice.
   -------------------------------------------------------------------------- */

.bx-header__bar {
  border-block-end: 1px solid var(--bx-line-soft);
  background: transparent;
}

/* Divisions at the start, the shop at the end — two questions of the same kind
   ("which BaridX?"), so they share a row. */
.bx-header__bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The margin, not `justify-content: space-between`: the chooser has no
   switcher, and space-between with a single child parks it at the START. */
.bx-header__bar-inner .bx-shoplink {
  margin-inline-start: auto;
}

.bx-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
}

.bx-switch__label {
  flex: none;
  /* .bx-cap is display:block; in this row it sits inline. */
  display: inline-block;
  color: var(--bx-faint);
  letter-spacing: 0.12em;
}

/* A light segmented control: the set is a soft track, the current division is
   a white pill lifted off it. Reads as clearly selected as a solid slab did,
   without putting a block of ink in the top corner of every page. */
.bx-switch__set {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--bx-r-pill);
  background: rgba(15, 15, 15, 0.045);
  /* Three short words fit any phone, but the labels are translatable and
     Arabic runs longer — so the set scrolls rather than wrapping the bar. */
  overflow-x: auto;
  scrollbar-width: none;
}

.bx-switch__set::-webkit-scrollbar { display: none; }

.bx-switch__item {
  flex: none;
  border-radius: var(--bx-r-pill);
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--bx-mute);
  white-space: nowrap;
  transition: color 240ms var(--bx-ease), background-color 240ms var(--bx-ease);
}

.bx-switch__item:hover {
  color: var(--bx-fg);
}

/* The division you are in. The ring is a box-shadow, not a border: a border on
   the active item alone would add a pixel to its box and shift the whole row
   as you move between divisions. */
.bx-switch__item.is-on {
  background: var(--bx-card);
  color: var(--bx-fg);
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.06),
    0 1px 2px rgba(15, 15, 15, 0.07);
}

.bx-switch__item:focus-visible {
  outline: 2px solid var(--bx-fg);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .bx-switch {
    gap: 0.5rem;
  }
  /* "BaridX for" is a nicety; the three names are the function. */
  .bx-switch__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-switch__item {
    transition: none;
  }
}

/* The chooser's header carries the logo alone, centred. There is no menu and
   no action to balance it against — the three cards below are the only thing
   the page asks for — and a lone wordmark pinned to the corner of an empty
   bar reads as a page that failed to load its navigation. */
.bx-header--bare .bx-header__inner {
  grid-template-columns: minmax(0, 1fr);
}

.bx-header--bare .bx-header__inner > .bx-logo {
  grid-column: 1;
  justify-self: center;
}

/* --------------------------------------------------------------------------
   Preview banner  (TEMPORARY — see BARIDX_BANNER_TEXT in functions.php)
   Accent ground that goes to ink under the pointer. This is the one place on
   the site where the accent carries a whole surface rather than an action;
   it is deliberate and temporary, and it sits ABOVE the sticky header so it
   scrolls away rather than eating the viewport on every page.
   -------------------------------------------------------------------------- */

.bx-banner {
  position: relative;
  z-index: 60; /* over .bx-header's 50, so its blur never washes the accent */
  background: var(--bx-accent);
  color: #fff;
  transition: background-color 260ms var(--bx-ease);
}

.bx-banner:hover {
  background: var(--bx-fg);
}

.bx-banner__inner {
  padding-block: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
}

@media (max-width: 560px) {
  .bx-banner__inner {
    font-size: 0.75rem;
    text-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-banner {
    transition: none;
  }
}

/* The cards centre with the rest of the page; the footer carries only the
   arrow now, so it centres too rather than being spaced against nothing. */
.bx-opts--choose .bx-opt__body {
  align-items: center;
  text-align: center;
}

.bx-opts--choose .bx-opt__foot {
  justify-content: center;
}

/* A phone cannot hold a headline and three stacked cards at the sizes above,
   so on small screens each card folds into a compact row — tile beside text,
   no footer — which buys back roughly half the height. */
@media (max-height: 760px), (max-width: 640px) {
  .bx-opts--choose .bx-opt__body {
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
    text-align: start;
    padding: 0.875rem 1rem;
  }

  .bx-opts--choose .bx-opt__tile {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .bx-opts--choose .bx-opt__tile svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .bx-opts--choose .bx-opt__foot {
    display: none;
  }

  .bx-opts--choose .bx-opt__meta {
    margin-block-start: 0.125rem;
  }
}


/* The chooser is a one-screen page: the document is a flex column exactly as
   tall as the viewport, the chrome takes the height it needs, and <main> is
   given whatever is left. No magic numbers, so it holds however tall the
   preview banner or the logo row turn out to be. Scoped to .home so every
   other page keeps flowing normally. */
.home .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
}

.home .wp-site-blocks > main {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 0;
}

/* --------------------------------------------------------------------------
   Mega menu
   A buyer arrives knowing a service, an outcome or an industry, so the menu
   offers all three doors. Panels are hidden with the `hidden` attribute and
   revealed by site.js — so with JS off the triggers simply do nothing rather
   than dumping four columns of links into the page.
   -------------------------------------------------------------------------- */

.bx-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Matches .bx-nav a exactly — a button must not look like a control here. */
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bx-fg);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 280ms var(--bx-ease);
}

.bx-nav__trigger:hover,
.bx-nav__trigger[aria-expanded="true"] {
  color: var(--bx-accent);
}

.bx-nav__chev {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--bx-faint);
  transition: transform 280ms var(--bx-ease);
}

.bx-nav__trigger[aria-expanded="true"] .bx-nav__chev {
  transform: rotate(180deg);
  color: currentColor;
}

.bx-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: var(--bx-card);
  border-block: 1px solid var(--bx-line);
  box-shadow: var(--bx-shadow-soft);
}

/* The header is the panel's positioning context, and it must sit above the
   page while a panel is open. */
.bx-header { position: sticky; }
.bx-header.is-mega-open { z-index: 55; }

.bx-mega__inner {
  padding-block: clamp(1.5rem, 2.6vw, 2.5rem);
}

.bx-mega__cols {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
}

/* Four, stated. auto-fit would drop to three at some widths and leave the
   fourth category orphaned on its own row. */
.bx-mega__cols--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .bx-mega__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Items on the left, one thing worth reading next on the right. */
.bx-mega__cols--split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  align-items: start;
}

.bx-mega__col-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bx-mega__col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  flex: none;
  border-radius: var(--bx-r-sm);
  background: var(--bx-shell);
  color: var(--bx-mute);
}

.bx-mega__col-icon svg { inline-size: 0.9375rem; block-size: 0.9375rem; }

/* The category name leads: ink, semibold, at reading size. It used to be the
   small grey cap above a larger darker blurb, which put the least important
   line in the strongest position. */
.bx-mega__col-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bx-fg);
}

.bx-mega__col-blurb {
  margin: 0.5rem 0 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--bx-faint);
}

.bx-mega__rows {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--bx-line-soft);
}

/* A product row: the name, and the promise beside it. */
.bx-mega__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--bx-line-soft);
  text-decoration: none;
}

.bx-mega__row:last-child { border-block-end: 0; }

.bx-mega__row-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bx-fg);
}

.bx-mega__row-meta {
  flex: none;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--bx-mute);
  white-space: nowrap;
}

.bx-mega__row {
  padding-inline: 0.375rem;
  margin-inline: -0.375rem;
  border-radius: 6px;
  transition: background-color 160ms var(--bx-ease);
}

.bx-mega__row:hover {
  background: var(--bx-bg);
}

.bx-mega__row:hover .bx-mega__row-label { color: var(--bx-accent); }

.bx-mega__row:focus-visible {
  outline: 2px solid var(--bx-fg);
  outline-offset: 1px;
}

/* The closing edge of the panel and the way out of it. */
.bx-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: clamp(1.25rem, 2.4vw, 2rem);
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--bx-line);
  inline-size: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bx-fg);
  text-decoration: none;
}

.bx-mega__all .bx-arrow { transition: transform 200ms var(--bx-ease); }
.bx-mega__all:hover { color: var(--bx-accent); }
.bx-mega__all:hover .bx-arrow { transform: translateX(0.2rem); }
[dir="rtl"] .bx-mega__all:hover .bx-arrow { transform: translateX(-0.2rem); }

.bx-mega__grid {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* A solution or a sector: what it is, and what it is for. */
.bx-mega__item {
  display: block;
  border-radius: var(--bx-r-sm);
  padding: 0.625rem 0.75rem;
  margin-inline: -0.75rem;
  text-decoration: none;
  transition: background-color 200ms var(--bx-ease);
}

.bx-mega__item:hover { background: var(--bx-bg); }

.bx-mega__item-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bx-fg);
}

.bx-mega__item-blurb {
  display: block;
  margin-block-start: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bx-mute);
}

.bx-mega__feature {
  border-radius: var(--bx-r-md);
  background: var(--bx-bg);
  padding: clamp(1rem, 1.6vw, 1.25rem);
}

.bx-mega__feature-title {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.bx-mega__feature-text {
  margin: 0.5rem 0 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--bx-mute);
}

.bx-mega__feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bx-fg);
  text-decoration: none;
}

.bx-mega__feature-link:hover { color: var(--bx-accent); }

/* Below the breakpoint that hides .bx-nav--main there is no trigger to press,
   so the panels can never open — but if a future mobile menu reuses them,
   they must stack rather than sit in four columns. */
@media (max-width: 900px) {
  .bx-mega__cols--split,
  .bx-mega__cols--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-mega {
    max-block-size: 70svh;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-nav__chev,
  .bx-nav__trigger,
  .bx-mega__item {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Make the sticky header actually stick
   WordPress wraps a template part in <div class="wp-block-template-part">,
   and that div is only as tall as the banner plus the header — about 177px.
   `position: sticky` is bounded by its containing block, so the header
   travelled those 177px and then scrolled away with its wrapper. It LOOKED
   like sticky was not applied; it was, and it had nowhere to stick to.

   `display: contents` removes the wrapper's box from layout, so the header's
   containing block becomes .wp-site-blocks — the whole page — and sticky has
   the full scroll length to work with. Scoped with :has() to the wrapper that
   actually holds the header, so the footer's wrapper is left alone.
   -------------------------------------------------------------------------- */

.wp-block-template-part:has(> .bx-header) {
  display: contents;
}

/* Once it is pinned it floats over content, so it earns a shadow and gives a
   little height back. The hairline comes from .bx-header.is-stuck above. */
.bx-header.is-stuck {
  box-shadow: 0 1px 0 0 rgba(15, 15, 15, 0.04), 0 10px 30px -18px rgba(15, 15, 15, 0.22);
}

.bx-header.is-stuck .bx-header__inner {
  padding-block: 0.75rem;
}

@media (prefers-reduced-motion: no-preference) {
  .bx-header__inner {
    transition: padding-block 260ms var(--bx-ease);
  }
}

/* The shop link — the one accent-coloured thing in the header.
   It is text with a mark rather than a button: a second pill next to the
   division's action just read as a weaker version of it, where the shop is
   not weaker, it is somewhere else entirely. Hidden on a phone, where the row
   has width for the logo and one action only. */
.bx-shoplink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  padding: 0.5rem 0.75rem;
  margin-inline-end: -0.25rem;
  border-radius: var(--bx-r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--bx-accent);
  text-decoration: none;
  transition: background-color 240ms var(--bx-ease), color 240ms var(--bx-ease);
}

.bx-shoplink svg {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  flex: none;
}

.bx-shoplink:hover {
  background: var(--bx-accent-soft);
}

.bx-shoplink:focus-visible {
  outline: 2px solid var(--bx-accent);
  outline-offset: 2px;
}

/* The bag leans forward as you approach it. */
@media (prefers-reduced-motion: no-preference) {
  .bx-shoplink svg {
    transition: transform 260ms var(--bx-ease);
  }

  .bx-shoplink:hover svg {
    transform: translateY(-1px) scale(1.06);
  }
}

/* Sized for the bar rather than the action row it used to sit in. */
.bx-header__bar .bx-shoplink {
  padding-block: 0.3rem;
  font-size: 0.8125rem;
}

/* On a phone the bar is tight, so the link keeps its mark and drops the
   words. The accessible name is restored on the link itself, so it is never
   an unlabelled icon. */
@media (max-width: 560px) {
  .bx-shoplink span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .bx-header__bar .bx-shoplink {
    padding-inline: 0.4rem;
  }
}



/* --------------------------------------------------------------------------
   Hero reel — mixed image/video slides
   Slides are stacked in a grid cell and cross-faded, so the stage is as tall
   as the tallest one and nothing reflows as it advances. Every slide stays in
   the DOM (aria-hidden when inactive) rather than being swapped in, so the
   browser keeps the decoded frames and a second pass is instant.
   -------------------------------------------------------------------------- */

.bx-reel {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.bx-reel__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  aspect-ratio: 16 / 9;
  /* 16:9 at the full shell width is 747px on a 1440 screen, which pushes the
     next section entirely off the fold. The cap wins over the ratio and
     object-fit: cover absorbs the difference. */
  max-block-size: 62svh;
  border-radius: var(--bx-r-lg);
  overflow: hidden;
  background: var(--bx-shell);
}

/* All slides occupy the same cell; only opacity separates them. */
.bx-reel__slide {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  margin: 0;
  opacity: 0;
  transition: opacity 620ms var(--bx-ease);
  pointer-events: none;
}

.bx-reel__slide.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   The three-up slide
   Same card footprint as a single clip, divided into three panels. The gaps
   are real gaps: the stage's ground shows through them, which on the mesh
   treatment means the purple does — so the slide reads as three videos
   standing together rather than one wide video with lines drawn on it.
   -------------------------------------------------------------------------- */

.bx-reel__trio {
  display: grid;
  grid-template-columns: repeat(var(--bx-clips, 3), minmax(0, 1fr));
  gap: clamp(0.375rem, 0.7vw, 0.625rem);
  block-size: 100%;
  /* Physical `grid-auto-flow: column` order would be fine either way — the
     clips are not a sequence to be read, so RTL leaves them as they are. */
}

.bx-reel__trio > .bx-clip {
  /* Slightly tighter than the card's own radius: a panel inside a rounded
     container reads wrong at the same value. */
  --bx-clip-r: clamp(0.5rem, 0.9vw, 0.875rem);
  background: var(--bx-fg);
}

/* Under 640px the hero is a full-bleed clip with copy over it, and three
   panels across a phone are three letterboxes. The slide shows its first
   clip and drops the rest. */
@media (max-width: 640px) {
  .bx-reel__trio {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .bx-reel__trio > .bx-clip {
    --bx-clip-r: 0;
  }

  .bx-reel__trio > .bx-clip:not(:first-child) {
    display: none;
  }
}

.bx-reel__slide > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A clip: the video, plus the control that expands it. The wrapper is what
   fills the slide (or the trio's column) now; the video fills the wrapper. */
.bx-clip {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  block-size: 100%;
}

/* The radius is carried by BOTH the wrapper and the video, through one token.
   A <video> is composited in its own layer and is not reliably clipped by a
   rounded ancestor — `overflow: hidden` on the wrapper alone left some
   corners square and others round, differing panel to panel. Rounding the
   element itself does not depend on that clip happening. */
.bx-clip,
.bx-clip > video {
  border-radius: var(--bx-clip-r, 0);
}

.bx-clip > video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Slow on purpose: a hero is not a menu, and a quick snap would fight the
     footage already moving inside the frame. */
  transition: transform 1100ms var(--bx-ease), filter 700ms var(--bx-ease);
}

/* The frame stays put and the footage scales inside it — the crop tightens,
   which reads as moving into the shot rather than the card growing. */
.bx-clip:hover > video,
.bx-clip:focus-within > video {
  transform: scale(1.07);
}

/* With three panels side by side, singling one out should also settle the
   other two back — otherwise all three compete and the zoom reads as noise.
   Keyboard focus gets the same treatment as the mouse, or tabbing through the
   expand controls would zoom a panel without the focus it implies. */
.bx-reel__trio:hover > .bx-clip:not(:hover) > video,
.bx-reel__trio:focus-within > .bx-clip:not(:focus-within) > video {
  filter: brightness(0.72) saturate(0.9);
}

@media (prefers-reduced-motion: reduce) {
  .bx-clip > video { transition: none; }

  .bx-clip:hover > video,
  .bx-clip:focus-within > video { transform: none; }

  .bx-reel__trio:hover > .bx-clip:not(:hover) > video,
  .bx-reel__trio:focus-within > .bx-clip:not(:focus-within) > video { filter: none; }
}

.bx-clip__zoom {
  position: absolute;
  inset-block-start: clamp(0.5rem, 1vw, 0.875rem);
  inset-inline-end: clamp(0.5rem, 1vw, 0.875rem);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(20, 12, 70, 0.5);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  cursor: pointer;
  /* Held back until the clip is hovered or the button is focused — an always-on
     badge on every panel is three pieces of furniture on a hero. */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 260ms var(--bx-ease), transform 260ms var(--bx-ease),
    background 260ms var(--bx-ease), border-color 260ms var(--bx-ease);
}

.bx-clip:hover .bx-clip__zoom,
.bx-clip__zoom:focus-visible {
  opacity: 1;
  transform: none;
}

.bx-clip__zoom:hover {
  background: rgba(20, 12, 70, 0.78);
  border-color: rgba(255, 255, 255, 0.5);
}

.bx-clip__zoom:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.bx-clip__zoom svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* A touch device has no hover to reveal it, so it simply stays visible. */
@media (hover: none) {
  .bx-clip__zoom {
    opacity: 1;
    transform: none;
  }
}

/* Not in a hero under 640px, though. There the clip is the full-bleed
   background rather than a card, so the control would sit behind the header
   — and the overlay would show the clip SMALLER than the background already
   does, since it has to leave room for its own padding. Nothing to offer, so
   nothing is offered. */
@media (max-width: 640px) {
  .bx-hero .bx-clip__zoom {
    display: none;
  }

}

/* --------------------------------------------------------------------------
   The expanded clip
   A native <dialog>, so Escape, the backdrop and the focus trap come from the
   platform rather than from script that has to be kept correct.
   -------------------------------------------------------------------------- */

/* The page must not scroll behind the overlay. <dialog> blocks pointer
   events but not the wheel. */
html.bx-zoomed,
html.bx-zoomed body {
  overflow: hidden;
}

.bx-zoom {
  padding: 0;
  border: 0;
  max-inline-size: none;
  max-block-size: none;
  inline-size: 100%;
  block-size: 100%;
  background: transparent;
  overflow: hidden;
}

.bx-zoom::backdrop {
  /* The mesh's own deep purple, not a neutral black. */
  background: rgba(14, 8, 48, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bx-zoom__inner {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding: clamp(1rem, 4vw, 3rem);
}

.bx-zoom video {
  display: block;
  /* `inline-size: auto` left the clip at its intrinsic width — 596px for the
     theme's placeholder comps — which is not an expansion. A definite width
     with an auto height scales it UP; when max-block-size then clamps a tall
     clip on a short viewport, the replaced-element constraint rules shrink
     the width to match, so the ratio survives without an aspect-ratio. */
  inline-size: min(100%, 88rem);
  block-size: auto;
  max-block-size: 100%;
  border-radius: clamp(0.5rem, 1vw, 1rem);
  background: #000;
  box-shadow: 0 3rem 6rem -2rem rgba(5, 2, 30, 0.8);
}

.bx-zoom__close {
  position: absolute;
  inset-block-start: clamp(0.75rem, 2.5vw, 1.75rem);
  inset-inline-end: clamp(0.75rem, 2.5vw, 1.75rem);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(20, 12, 70, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background 260ms var(--bx-ease), border-color 260ms var(--bx-ease),
    color 260ms var(--bx-ease);
}

.bx-zoom__close:hover {
  background: #fff;
  border-color: #fff;
  color: var(--bx-fg);
}

.bx-zoom__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.bx-zoom__close svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .bx-clip__zoom { transition: none; }
}

/* The caption sits on a scrim rather than on the image: a photograph cannot
   be relied on to stay dark behind text. */
.bx-reel__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(to top, rgba(15, 15, 15, 0.78), rgba(15, 15, 15, 0.35) 55%, transparent);
  color: #fff;
}

.bx-reel__cap .bx-cap {
  color: rgba(255, 255, 255, 0.72);
}

.bx-reel__caption {
  display: block;
  margin-block-start: 0.375rem;
  max-inline-size: 32rem;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.45;
}

/* The controls are ONE capsule, not five floating parts. On a busy photograph
   scattered outlines read as debris; a single blurred pill reads as a control.
   -------------------------------------------------------------------------- */

.bx-reel__bar {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-block-start: 0.875rem;
  padding: 0.25rem;
  border-radius: var(--bx-r-pill);
  border: 1px solid var(--bx-line);
  background: var(--bx-card);
}

.bx-reel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bx-mute);
  cursor: pointer;
  transition: background-color 180ms var(--bx-ease), color 180ms var(--bx-ease);
}

.bx-reel__btn svg { inline-size: 0.875rem; block-size: 0.875rem; }

.bx-reel__btn:hover {
  background: var(--bx-bg);
  color: var(--bx-fg);
}

.bx-reel__btn:focus-visible {
  outline: 2px solid var(--bx-fg);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Progress steps
   Each slide is a bar that FILLS over the interval, so the control says both
   where you are and how long until it moves — which is the job the separate
   "2 / 3" readout was half doing, and why that readout is gone.
   -------------------------------------------------------------------------- */

.bx-reel__steps {
  display: flex;
  align-items: center;
  /* Adjacent 24px targets, so the gap is visual spacing only — the buttons
     themselves stay full height and touch. */
  gap: 0.25rem;
  padding-inline: 0.375rem;
}

/* The button is a 24px-tall HIT AREA; the bar you see is drawn inside it.
   They were the same 3px box before, which made a step 20x3 — technically
   clickable, practically not, and well under the 24x24 minimum. Jumping
   between slides has to be a real target, not a sniper shot. */
.bx-reel__step {
  position: relative;
  inline-size: 1.25rem;
  block-size: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: inline-size 320ms var(--bx-ease);
}

/* The visible track. */
.bx-reel__step::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  block-size: 0.1875rem;
  border-radius: var(--bx-r-pill);
  background: var(--bx-line);
  transition: block-size 180ms var(--bx-ease), background-color 180ms var(--bx-ease);
}

/* Hover thickens the bar as well as brightening it, so it announces itself as
   something you can press rather than only changing shade. */
.bx-reel__step:hover::before {
  block-size: 0.375rem;
  background: var(--bx-faint);
}

/* The active step is wider — a length change survives being looked at
   peripherally in a way a colour change alone does not. */
.bx-reel__step.is-on { inline-size: 2.5rem; }

.bx-reel__step:focus-visible {
  outline: 2px solid var(--bx-fg);
  outline-offset: 2px;
  border-radius: var(--bx-r-pill);
}

.bx-reel__fill {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  block-size: 0.1875rem;
  inline-size: 0;
  border-radius: var(--bx-r-pill);
  background: var(--bx-fg);
  transition: block-size 180ms var(--bx-ease);
}

.bx-reel__step:hover .bx-reel__fill { block-size: 0.375rem; }

/* The fill is driven by an animation whose duration is the reel's own
   interval (published as --bx-reel-interval), so the bar and the timer cannot
   drift apart. JS only has to pause/resume and restart it. */
.bx-reel__step.is-on .bx-reel__fill {
  animation: bx-reel-fill var(--bx-reel-interval, 6000ms) linear forwards;
}

/* A slide already seen stays full rather than resetting — the row reads as
   progress through the set. */
.bx-reel__step.is-done .bx-reel__fill { inline-size: 100%; }

.bx-reel--paused .bx-reel__step.is-on .bx-reel__fill { animation-play-state: paused; }

@keyframes bx-reel-fill {
  from { inline-size: 0; }
  to { inline-size: 100%; }
}


@media (max-width: 640px) {
  .bx-reel__stage { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-reel__slide,
  .bx-reel__step {
    transition: none;
  }

  /* No creeping bar; the active step is simply full. */
  .bx-reel__step.is-on .bx-reel__fill {
    animation: none;
    inline-size: 100%;
  }
}

/* The play/pause control swaps glyph by CSS so the button's markup stays put
   and its accessible name is the only thing JS has to change. */
.bx-reel__btn--play.is-paused svg { display: none; }

.bx-reel__btn--play.is-paused::after {
  content: "";
  inline-size: 0;
  block-size: 0;
  border-block: 0.4rem solid transparent;
  border-inline-start: 0.65rem solid currentColor;
  border-inline-end: 0;
  margin-inline-start: 0.15rem;
}

/* <main> must not add spacing of its own: every page's first section brings
   its own padding, and a full-bleed hero has to reach the chrome exactly.

   It needs saying because of the `display: contents` fix on the header's
   template-part wrapper — with that wrapper's box gone, the banner and the
   header became children of .wp-site-blocks, so <main> is no longer WP's
   `:first-child` and picks up the sibling margin
   (`:root :where(.is-layout-flow) > *`, 28px) instead of the first-child zero.
   That put a 28px light strip between the banner and the hero. */
.wp-site-blocks > main {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Full-bleed hero
   The slide reel fills the whole first screen and the chrome sits on top of
   it. The hero is pulled up under the header by exactly the header's measured
   height (--bx-header-h, set by initChrome in site.js) and given the same
   value back as padding, so the media starts at the very top of the page
   while the content still clears the nav.
   -------------------------------------------------------------------------- */

.bx-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  /* A full screen, less whatever sits above the hero. Without the second
     term the hero's foot — where the reel's controls and the scroll cue
     stand — lands exactly one banner-height below the fold. */
  min-block-size: calc(100svh - var(--bx-banner-h, 0px));
  padding-block-start: var(--bx-header-h, 7rem);
  padding-block-end: clamp(8rem, 18vh, 14rem);
  overflow: hidden;
  color: #fff;
  background: var(--bx-fg);
}

/* The pull-up, at a specificity that can win.
   WordPress emits `:root :where(.is-layout-flow) > :first-child
   { margin-block-start: 0 }` in an inline <style>, which is (0,2,0) and
   outranks a plain `.bx-hero` (0,1,0) — every other property in the rule
   above applied and this one silently did not. Mirroring WP's own selector
   shape gets to (0,3,0) and states why the extra weight is there.
   The fallback covers the first paint, before site.js has measured. */
:root .is-layout-flow > .bx-hero {
  margin-block-start: calc(-1 * var(--bx-header-h, 7rem));
}

/* --------------------------------------------------------------------------
   The gradient mesh
   The ground a VIDEO slide sits on, ported from the public franchise landing
   page (/ar/franchises/franchise.baridx — hero-mesh.tsx + hero-blobs.ts):
   a deep purple base, five blurred brand-purple blobs drifting on slow
   independent loops, a vignette, then film grain on soft-light.
   Image slides never see it — they stay full-bleed.
   -------------------------------------------------------------------------- */

.bx-mesh {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0;
  transition: opacity 640ms var(--bx-ease);
  pointer-events: none;
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-mesh,
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="none"] .bx-mesh { opacity: 1; }

.bx-mesh > * {
  position: absolute;
  inset: 0;
}

/* BaridX purple, deep at the top and lightening downward. Every stop is a
   tint of Pantone 2725 C (#5a45ef, --bx-accent) rather than the indigo the
   franchise page uses.
   The direction is not decorative: the copy occupies the top ~59% of the
   hero, so the stops above 62% are held at 4.9:1 or better against white
   (AA for the lede, not just the headline). Below that only the card — an
   opaque clip — and the two chrome capsules sit, both of which carry their
   own ground, so the light purple is free to arrive there. Flipping this
   gradient would put 2.6:1 behind body copy. */
.bx-mesh__base {
  background: linear-gradient(
    to bottom,
    #4436d9 0%,
    #5a45ef 38%,
    #6a57f3 62%,
    #8878ff 80%,
    #b0a3ff 100%
  );
}

.bx-mesh__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}

/* Five blobs, each with its own colour, corner, size and loop. Physical
   offsets rather than logical ones: this is a decorative composition, not
   content, and mirroring it in RTL would gain nothing and cost a rebuild of
   the four keyframe sets. */
/* The two upper blobs are the DEEP tints and the lower three the light ones,
   for the same contrast reason as the base ramp. */
.bx-mesh__blob:nth-child(1) {
  top: -20%; left: -10%; inline-size: 80%; block-size: 80%;
  background: radial-gradient(circle at center, rgba(60, 44, 200, 0.85), transparent 70%);
  animation: bx-blob-a 22s ease-in-out infinite;
}

.bx-mesh__blob:nth-child(2) {
  top: -15%; right: -10%; inline-size: 75%; block-size: 75%;
  background: radial-gradient(circle at center, rgba(90, 69, 239, 0.9), transparent 70%);
  animation: bx-blob-b 28s ease-in-out infinite;
}

.bx-mesh__blob:nth-child(3) {
  bottom: -10%; left: 10%; inline-size: 70%; block-size: 70%;
  background: radial-gradient(circle at center, rgba(196, 190, 255, 0.55), transparent 70%);
  animation: bx-blob-c 35s ease-in-out infinite;
}

.bx-mesh__blob:nth-child(4) {
  bottom: -20%; right: -5%; inline-size: 70%; block-size: 70%;
  background: radial-gradient(circle at center, rgba(160, 148, 255, 0.8), transparent 70%);
  animation: bx-blob-d 25s ease-in-out infinite;
}

.bx-mesh__blob:nth-child(5) {
  bottom: 5%; left: 35%; inline-size: 55%; block-size: 55%;
  background: radial-gradient(circle at center, rgba(232, 228, 255, 0.45), transparent 70%);
  animation: bx-blob-b 28s ease-in-out infinite;
}

/* Deepens the corners so the light lower half does not bleed to the edges. */
.bx-mesh__vignette {
  background: radial-gradient(ellipse at center, transparent 0%, rgba(40, 26, 160, 0.38) 92%);
}

.bx-mesh__grain {
  /* The texture URL is set inline — it needs the theme directory, which only
     PHP knows. Same file as the admin platform's public/hero.avif. */
  background-repeat: repeat;
  background-size: 400px 400px;
  opacity: 0.25;
  mix-blend-mode: soft-light;
}

@keyframes bx-blob-a {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  25% { transform: translate(18%, -14%) scale(1.1); }
  50% { transform: translate(-12%, 18%) scale(0.95); }
  75% { transform: translate(-22%, -8%) scale(1.05); }
}

@keyframes bx-blob-b {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  33% { transform: translate(-22%, 20%) scale(1.15); }
  66% { transform: translate(15%, -22%) scale(0.9); }
}

@keyframes bx-blob-c {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  40% { transform: translate(20%, 16%) scale(1.12); }
  80% { transform: translate(-18%, -12%) scale(0.92); }
}

@keyframes bx-blob-d {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  30% { transform: translate(-20%, -18%) scale(0.95); }
  70% { transform: translate(25%, 14%) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .bx-mesh__blob { animation: none; }
}

/* The reel drops behind everything in the hero. */
.bx-hero .bx-reel {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
}

.bx-hero .bx-reel__stage {
  block-size: 100%;
  max-block-size: none;
  aspect-ratio: auto;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   A video slide, as a card on the mesh
   The reel insets and rounds, so the mesh reads as the ground it stands on.
   An image slide gets none of this and stays edge to edge.
   -------------------------------------------------------------------------- */

/* The copy comes OFF the video: the card carries the clip and nothing else.
   So in video mode the hero stops being a stack of layers and becomes two
   real rows — copy on the mesh, then the card taking whatever height is
   left. The reel leaves the absolute layer and joins the flow. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] {
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: clamp(1.25rem, 3vh, 2.25rem);
  /* Deep enough to stand the reel's controls and the scroll cue BELOW the
     card, on the mesh. Nothing but the clip is allowed on the card. */
  padding-block-end: clamp(4.25rem, 9vh, 5.25rem);
  /* A DEFINITE height, not just a minimum. With only min-block-size the 1fr
     row resolves against the reel's intrinsic height instead of the screen,
     and the card grows the hero to ~1.9 screens. */
  block-size: calc(100svh - var(--bx-banner-h, 0px));
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__content { grid-row: 1; }

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] {
  /* How far the card stands in from the screen edge. Named once because the
     scroll cue has to line up with it. */
  --bx-card-inset: clamp(1rem, 5vw, 4.5rem);
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel {
  position: relative;
  inset: auto;
  grid-row: 2;
  z-index: 0;
  margin-inline: var(--bx-card-inset);
  min-block-size: 0;
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__stage {
  /* The 16:9 ratio and the 62svh cap belong to the reel as a page section.
     Here the row decides the height and the clip is cropped to fit it. */
  aspect-ratio: auto;
  max-block-size: none;
  block-size: 100%;
  /* With the ratio gone the stage's implicit row is content-sized, and the
     slide's `block-size: 100%` then resolves against auto — so the video
     came out at its intrinsic height and overflowed the card. An explicit
     row makes the height definite in both directions. */
  grid-template-rows: minmax(0, 1fr);
  border-radius: clamp(1rem, 1.8vw, 1.75rem);
  /* The card needs an edge against the mesh: a hairline of light on top of
     it, and a shadow under it so it lifts off rather than being a hole. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2.5rem 5rem -1.5rem rgba(35, 22, 130, 0.55);
  transition: border-radius 520ms var(--bx-ease), box-shadow 520ms var(--bx-ease);
}

/* Nothing is read over the clip any more, so the scrims both go: the section
   one would darken the mesh, and the card one was only ever there to hold
   type that has now moved off it. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__slide {
  min-block-size: 0;
  block-size: 100%;
}

/* A single clip fills the card, so it takes the card's radius — again on the
   element, not by relying on the stage clipping it. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__slide > .bx-clip {
  --bx-clip-r: clamp(1rem, 1.8vw, 1.75rem);
}

/* On a three-up slide the three panels ARE the card. The stage stops drawing
   a rounded rect and a ring around all of them — at the card's 18px against
   the panels' 9px, the two radii disagreed at every outer corner — and each
   panel carries the edge instead.
   The `.is-on` is load-bearing: the stage holds EVERY slide, so a plain
   `:has(.bx-reel__trio)` matched whenever a three-up slide existed anywhere
   in the reel, and the single-clip slides lost their ring and shadow too. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"]
  .bx-reel__stage:has(> .bx-reel__slide.is-on > .bx-reel__trio) {
  border-radius: 0;
  box-shadow: none;
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__trio > .bx-clip {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2rem 4rem -1.5rem rgba(35, 22, 130, 0.55);
}

/* The gaps show the stage through, and on the mesh the stage should BE the
   mesh — not the light grey a reel wears as a page section. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__stage:has(.bx-reel__trio) {
  background: transparent;
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"]::before { opacity: 0; }

.bx-hero::before {
  transition: opacity 640ms var(--bx-ease);
}

/* Display type has to share the screen with the card now. Only the vertical
   term comes down — a wide viewport still gets the full width of it. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__title {
  font-size: clamp(2rem, min(7.4vw, 7.6vh), 5.25rem);
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__lede {
  margin-block-start: clamp(0.875rem, 2vh, 1.5rem);
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__actions {
  margin-block-start: clamp(1.25rem, 3vh, 2rem);
}

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__eyebrow {
  margin-block-end: clamp(0.625rem, 1.6vh, 1.25rem);
}

/* Both bits of chrome stand on the mesh BELOW the card, not on the clip: the
   scroll cue at one end of the band, the reel's controls at the other. The
   card carries video and nothing else.
   -------------------------------------------------------------------------- */

/* `inset-block-start: 100%` puts the bar's top edge on the card's bottom
   edge; the margin is the gap. Anchoring the top rather than centring in the
   band means the bar's own height never has to be named here. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__bar {
  inset-block-start: 100%;
  inset-block-end: auto;
  inset-inline-end: 0;
  margin-block-start: clamp(0.875rem, 2vh, 1.375rem);
  /* On the mesh the capsule takes the mesh's own purple rather than the
     neutral ink it wears over a photograph. */
  background: rgba(45, 30, 150, 0.42);
  border-color: rgba(255, 255, 255, 0.22);
}

/* The cue lines up with the card's edge and with the bar's baseline. It is on
   mesh now, so the glass treatment goes — a plain outlined circle again. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__cue {
  inset-inline-start: var(--bx-card-inset);
  inset-block-end: clamp(0.875rem, 2.4vh, 1.5rem);
}

/* Under 640px there is no room to give the copy and the card a share each,
   and a card inside a phone screen is a letterbox inside a letterbox. The
   layers come back: full-bleed clip, copy over it, scrims on. */
@media (max-width: 640px) {
  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] {
    align-content: center;
    grid-template-rows: none;
    row-gap: 0;
    padding-block-end: clamp(6rem, 16vh, 9rem);
  }

  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel {
    position: absolute;
    /* grid-row has to go back to auto as well. An absolutely positioned
       child of a grid container that still names a row is laid out against
       that GRID AREA, not the container's padding box — so `inset: 0` alone
       left the clip 126px tall at the foot of the hero instead of behind it. */
    grid-row: auto;
    inset: 0;
    z-index: -2;
    margin-inline: 0;
  }

  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__stage {
    border-radius: 0;
    box-shadow: none;
  }

  /* Under 640px a hero clip is the full-bleed background rather than a card,
     so it has no corners to round. This has to repeat the card rule's
     selector shape to reach its specificity — a plain `.bx-hero .bx-clip`
     is (0,2,0) against that rule's (0,5,0) and lost regardless of the media
     query, leaving the video curved against the screen edge. */
  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__slide > .bx-clip {
    --bx-clip-r: 0;
  }

  /* There is no band down here — the clip is full-bleed again, so the bar
     goes back inside it. */
  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-reel__bar {
    inset-block-start: auto;
    inset-block-end: clamp(1.5rem, 4vh, 2.5rem);
    inset-inline: var(--bx-gutter);
    margin-block-start: 0;
  }

  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"]::before { opacity: 1; }

  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__title {
    font-size: clamp(2.5rem, min(8.6vw, 11.4vh), 7rem);
  }

  .bx-hero[data-bx-treatment="mesh"][data-bx-kind="video"] .bx-hero__cue { display: none; }
}

/* Text over a photograph needs its own ground. Two stops rather than one: a
   wash across the whole frame for the centred headline, and a deeper foot so
   the wordmark and the controls hold up over a bright sky. */
.bx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(15, 15, 15, 0.55), rgba(15, 15, 15, 0.28) 42%, rgba(15, 15, 15, 0.72));
}

.bx-hero__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
  padding-inline: var(--bx-gutter);
}

/* Every deck occupies the same cell, so the hero's height is the tallest one
   and nothing jumps as the copy changes. */
.bx-hero__deck {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition: opacity 520ms var(--bx-ease), transform 520ms var(--bx-ease);
  pointer-events: none;
}

.bx-hero__deck.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .bx-hero__deck {
    transition: opacity 200ms linear;
    transform: none;
  }
}

.bx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.bx-hero__title {
  /* theme.json emits `h1, h2, h3, h4, h5, h6 { color: var(--…--fg) }`, and an
     explicit rule on the element always beats a colour inherited from
     .bx-hero — so the white has to be claimed back here. */
  color: inherit;
  margin: 0;
  max-inline-size: 13em;
  margin-inline: auto;
  /* Display scale. The vh term is what keeps a three-line headline inside a
     short laptop viewport; the vw term is what makes it fill a wide one. */
  font-size: clamp(2.5rem, min(8.6vw, 11.4vh), 7rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.bx-hero__lede {
  margin: 1.75rem auto 0;
  max-inline-size: 34rem;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.bx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 2.25rem;
}

/* On the hero the buttons invert: white fill for the action, a hairline of
   white for the alternative. */
.bx-hero .bx-btn--primary {
  background: #fff;
  color: var(--bx-fg);
  /* The badge fills with currentColor, so the glyph cut out of it takes the
     pill's own ground. */
  --bx-pill-ink: #fff;
}

.bx-hero .bx-btn--primary:hover {
  background: rgba(255, 255, 255, 0.88);
}

.bx-hero .bx-btn--ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  --bx-pill-ink: var(--bx-fg);
}

.bx-hero .bx-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   A hero with no media
   Copy on the mesh and nothing else — no reel, no card, no controls. The
   section scrim goes with it: that gradient exists to hold white type over a
   photograph, and over the mesh it only muddies the purple.
   -------------------------------------------------------------------------- */

.bx-hero[data-bx-treatment="mesh"][data-bx-kind="none"]::before { opacity: 0; }

/* Nothing shares the screen, so the copy sits in the middle of the hero and
   the display type keeps its full scale. The foot still clears the scroll
   cue. */
.bx-hero[data-bx-treatment="mesh"][data-bx-kind="none"] {
  padding-block-end: clamp(6rem, 14vh, 9rem);
}

/* --------------------------------------------------------------------------
   The scroll cue
   Bottom of the hero, on the START side: the reel's control capsule already
   owns the end corner, and the two would sit on top of each other.
   -------------------------------------------------------------------------- */

.bx-hero__cue {
  position: absolute;
  inset-inline-start: var(--bx-gutter);
  inset-block-end: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 320ms var(--bx-ease), border-color 320ms var(--bx-ease),
    color 320ms var(--bx-ease), opacity 320ms var(--bx-ease);
}

.bx-hero__cue svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  animation: bx-cue 2.6s var(--bx-ease) infinite;
}

.bx-hero__cue:hover {
  border-color: #fff;
  background: #fff;
  color: var(--bx-fg);
}

.bx-hero__cue:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes bx-cue {
  0%, 58%, 100% { transform: translateY(0); }
  74% { transform: translateY(0.3rem); }
}

/* It points at what comes next; once you are there it has nothing to say. */
.bx-hero__cue {
  opacity: calc(1 - var(--bx-hero-fade, 0));
}

.bx-hero.is-scrolled .bx-hero__cue { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .bx-hero__cue svg { animation: none; }
}

/* Under 640px the reel capsule goes full-width and centred, which leaves the
   cue nowhere to stand — and a thumb swipes anyway. */
@media (max-width: 640px) {
  .bx-hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   The chrome, while it is over a hero
   -------------------------------------------------------------------------- */

.bx-header.is-over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.bx-header.is-over-hero .bx-header__bar,
.bx-header.is-over-hero.is-stuck {
  border-block-end-color: transparent;
}

.bx-header.is-over-hero .bx-logo img {
  /* The wordmark SVG is single-colour ink; inverting is exact and needs no
     second asset. */
  filter: invert(1) brightness(2);
}

:root .bx-header.is-over-hero .bx-nav a,
:root .bx-header.is-over-hero .bx-nav__trigger {
  color: #fff;
}

:root .bx-header.is-over-hero .bx-nav a:hover,
:root .bx-header.is-over-hero .bx-nav__trigger:hover,
:root .bx-header.is-over-hero .bx-nav__trigger[aria-expanded="true"] {
  color: rgba(255, 255, 255, 0.72);
}

:root .bx-header.is-over-hero .bx-nav__chev {
  color: rgba(255, 255, 255, 0.6);
}

:root .bx-header.is-over-hero .bx-switch__label {
  color: rgba(255, 255, 255, 0.55);
}

.bx-header.is-over-hero .bx-switch__set {
  background: rgba(255, 255, 255, 0.14);
}

:root .bx-header.is-over-hero .bx-switch__item {
  color: rgba(255, 255, 255, 0.78);
}

:root .bx-header.is-over-hero .bx-switch__item:hover {
  color: #fff;
}

:root .bx-header.is-over-hero .bx-switch__item.is-on {
  background: #fff;
  color: var(--bx-fg);
  box-shadow: none;
}

:root .bx-header.is-over-hero .bx-shoplink {
  color: #fff;
}

:root .bx-header.is-over-hero .bx-shoplink:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

:root .bx-header.is-over-hero .bx-btn--primary {
  background: #fff;
  color: var(--bx-fg);
}

/* An open mega panel needs its own ground whatever is behind the header. */
.bx-header.is-over-hero.is-mega-open {
  background: var(--bx-card);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.bx-header.is-over-hero.is-mega-open .bx-logo img { filter: none; }

:root .bx-header.is-over-hero.is-mega-open .bx-nav a,
:root .bx-header.is-over-hero.is-mega-open .bx-nav__trigger { color: var(--bx-fg); }

.bx-header.is-over-hero.is-mega-open .bx-switch__set { background: rgba(15, 15, 15, 0.045); }

:root .bx-header.is-over-hero.is-mega-open .bx-switch__item { color: var(--bx-mute); }

:root .bx-header.is-over-hero.is-mega-open .bx-switch__item.is-on {
  color: var(--bx-fg);
  box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.07);
}

:root .bx-header.is-over-hero.is-mega-open .bx-shoplink { color: var(--bx-accent); }

/* --------------------------------------------------------------------------
   The reel's controls, over a hero
   -------------------------------------------------------------------------- */

.bx-hero .bx-reel__bar {
  position: absolute;
  inset-inline-end: var(--bx-gutter);
  inset-block-end: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 2;
  margin: 0;
}

/* Over a photograph the capsule is a dark blurred pill — it needs its own
   ground or the glyphs disappear into whatever is behind them. */
.bx-hero .bx-reel__bar {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.bx-hero .bx-reel__btn { color: rgba(255, 255, 255, 0.72); }

.bx-hero .bx-reel__btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.bx-hero .bx-reel__btn:focus-visible,
.bx-hero .bx-reel__step:focus-visible { outline-color: #fff; }

.bx-hero .bx-reel__step::before { background: rgba(255, 255, 255, 0.28); }
.bx-hero .bx-reel__step:hover::before { background: rgba(255, 255, 255, 0.5); }
.bx-hero .bx-reel__fill { background: #fff; }

/* The per-slide caption is suppressed on a full hero — the headline is the
   message there, and two blocks of white text over one photograph is one too
   many. The labels stay in the DOM for the live region to announce. */
.bx-hero .bx-reel__cap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  background: none;
}

@media (max-width: 640px) {
  .bx-hero {
    padding-block-end: clamp(6rem, 16vh, 9rem);
  }

  .bx-hero .bx-reel__bar {
    inset-inline: var(--bx-gutter);
    justify-content: center;
  }

  .bx-hero .bx-reel__btn--play { margin-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   Client band
   Directly under the hero: the claim, then who is already on it. Names are
   set as TYPE rather than logo images — the theme licenses no logo artwork,
   and a row of mismatched PNGs at five different weights undoes the restraint
   the rest of the page is built on. Each name carries what we actually run
   for them, which is what turns a wall of names into evidence.
   -------------------------------------------------------------------------- */

/* The clients marquee reuses .bx-marquee (overflow, edge mask, -50% loop) and
   only changes what a logo row needs. */
/* No padding of its own at all. The band is now one strip of logos bounded by
   the marquee's own hairlines, so it should meet the hero directly — the
   section padding it inherited from .bx-section--tight was up to 88px of
   empty page above and below the rules. The breathing room inside the rules
   is .bx-marquee's own padding-block, which stays.
   Same specificity as .bx-section--tight and later in the file, so this
   wins on source order. */
.bx-clients {
  padding-block: 0;
}

/* And no sibling margin above it either, so the strip meets the hero.
   WordPress emits `:root :where(.is-layout-flow) > * { margin-block-start:
   var(--wp--preset--spacing--30) }` — 28px — in an inline <style>. That is
   (0,1,0), the same weight as a plain `.bx-clients`, so which one wins comes
   down to source order against an inline style. Mirroring WP's own selector
   shape gets to (0,3,0) and settles it. Same trap as the hero pull-up above.
   Only the margin ABOVE is removed. The one below is WordPress's block gap
   between sections, and it applies at every other section boundary on the
   page — the section after the strip brings its own padding on top of it, so
   the spacing there matches the rest of the rhythm. Removing it here would
   make this one seam narrower than all the others. */
:root .is-layout-flow > .bx-clients {
  margin-block-start: 0;
}

.bx-clients__marquee {
  margin-block-start: 0;
}

.bx-clients__track {
  gap: clamp(2.5rem, 5vw, 5rem);
  /* Slower than the capability marquee: these are names to be read, not a
     texture to be felt. */
  animation-duration: 64s;
}

/* Pause on hover so a name can be read, and on focus-within so it does not
   slide away from someone tabbing the page. */
.bx-clients__marquee:hover .bx-clients__track,
.bx-clients__marquee:focus-within .bx-clients__track {
  animation-play-state: paused;
}

.bx-client {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  flex: none;
}

/* The lettered tile that stands in for a logo. Grey, like the icon tiles
   elsewhere — see the note on .bx-opt__tile. */
.bx-client__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 3.25rem;
  block-size: 2.5rem;
  padding-inline: 0.625rem;
  flex: none;
  border-radius: var(--bx-r-sm);
  background: var(--bx-shell);
  color: var(--bx-mute);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* A real logo is greyed and lifted to full contrast with the row, so a set of
   mismatched artwork still reads as one band. */
.bx-client__logo {
  inline-size: auto;
  max-inline-size: 8rem;
  object-fit: contain;
  /* Greyscale is what lets five different brands' colours sit in one row
     without fighting; the band hands the colour back on hover. */
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 260ms var(--bx-ease), filter 260ms var(--bx-ease);
}

/* Sized by SHAPE, because one height for all of them is not one weight.
   A wordmark carries its name along its width, so height is the right
   constraint; a square or portrait mark sized to the same height ends up a
   third of the optical area and reads as an afterthought. The taller boxes
   below bring them back to roughly the same presence. */
.bx-client__logo--wide {
  block-size: 2.25rem;
}

/* 1.75rem is not arbitrary: it is the height at which a 3.3:1 wordmark covers
   the same area as a 2:1 one at 2.25rem, so Amazon sits beside stc instead of
   towering over it. */
.bx-client__logo--xwide {
  block-size: 1.75rem;
}

.bx-client__logo--square {
  block-size: 2.75rem;
  /* Only does anything for the marks that carry their own ground — Aramco's
     gradient and noon's yellow — and nothing at all to a transparent one. */
  border-radius: var(--bx-r-sm);
}

.bx-client__logo--tall {
  block-size: 3rem;
}

.bx-clients__marquee:hover .bx-client__logo {
  filter: grayscale(0);
  opacity: 1;
}

.bx-client__text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.bx-client__name {
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bx-mute);
  transition: color 260ms var(--bx-ease);
}

.bx-clients__marquee:hover .bx-client__name {
  color: var(--bx-fg);
}

.bx-client__scope {
  margin-block-start: 0.125rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bx-faint);
}

/* A marquee is motion for its own sake, so reduced motion stops it outright
   and lets the row scroll by hand instead. Applied to the shared track too —
   it never had this guard. */
@media (prefers-reduced-motion: reduce) {
  .bx-marquee__track {
    animation: none;
  }

  .bx-marquee {
    overflow-x: auto;
  }

  .bx-client__logo,
  .bx-client__name {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Per-language type
   Inter carries Latin in every language; each non-Latin script names its own
   face FIRST so the browser never falls back to a system font mid-sentence.
   The face itself is only downloaded for the language being served — see
   baridx_assets().
   -------------------------------------------------------------------------- */

/* Each block sets the stack TWICE, and the second one is the load-bearing
   half. theme.json gives headings an explicit
   `font-family: var(--wp--preset--font-family--sans)`, and an explicit rule
   on the element beats a family inherited from body — so setting only
   `font-family` here left every h1-h6 on an Arabic page declaring the Latin
   stack. The Arabic glyphs still arrived, by per-glyph fallback, but any
   Latin inside an Arabic headline (a numeral, "BaridX") came from Inter
   while its neighbours came from IBM Plex. Rebinding the preset itself
   reaches every rule WP wrote in terms of it, headings included. */

body.bx-lang-ar {
  --wp--preset--font-family--sans: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}

body.bx-lang-ur {
  --wp--preset--font-family--sans: "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  /* Naskh sits smaller on the line than Inter at the same size, and Urdu
     needs more leading than Latin for its descenders. */
  line-height: 1.75;
}

body.bx-lang-zh {
  --wp--preset--font-family--sans: "Noto Sans SC", "Inter", system-ui, sans-serif;
  font-family: "Noto Sans SC", "Inter", system-ui, sans-serif;
}

/* Chinese has no spaces to break on, so long strings need character wrapping
   or they push a card sideways. */
body.bx-lang-zh {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* Display leading is a Latin trick too. 0.96 works for Inter, whose
   diacritics are few and short; Arabic and Urdu carry harakat ABOVE the line
   and descenders below it, so two lines set that tight collide. */
body.bx-lang-ar .bx-hero__title,
body.bx-lang-ur .bx-hero__title {
  line-height: 1.18;
}

/* Tight negative tracking is a Latin display trick — it crushes Arabic,
   Urdu and CJK glyphs. */
body.bx-lang-ar :is(.bx-display, .bx-title, .bx-hero__title, .bx-opt__title, .bx-sheet__name),
body.bx-lang-ur :is(.bx-display, .bx-title, .bx-hero__title, .bx-opt__title, .bx-sheet__name),
body.bx-lang-zh :is(.bx-display, .bx-title, .bx-hero__title, .bx-opt__title, .bx-sheet__name) {
  letter-spacing: 0;
}

/* Wide letter-spacing on mono caps is unreadable in a connected script and
   meaningless in CJK. */
body.bx-lang-ar .bx-cap,
body.bx-lang-ur .bx-cap,
body.bx-lang-zh .bx-cap,
body.bx-lang-ar .bx-eyebrow,
body.bx-lang-ur .bx-eyebrow,
body.bx-lang-zh .bx-eyebrow {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Language switcher
   Sits at the end of the division bar beside the shop link. Each language is
   named in its own script, so the set is mixed-script by design — which is
   why it is spaced rather than ruled: a hairline between اردو and 中文 makes
   both look cramped.
   -------------------------------------------------------------------------- */

.bx-header__bar-end {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.25rem);
  margin-inline-start: auto;
}

.bx-lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bx-lang__globe {
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
  flex: none;
  color: var(--bx-faint);
}

.bx-lang__set {
  display: flex;
  align-items: center
}

.bx-lang__item {
  padding-inline: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bx-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--bx-ease);
}

.bx-lang__item + .bx-lang__item {
  border-inline-start: 1px solid var(--bx-line);
}

.bx-lang__item:hover {
  color: var(--bx-fg);
}

.bx-lang__item.is-on {
  font-weight: 600;
  color: var(--bx-fg);
}

.bx-lang__item:focus-visible {
  outline: 2px solid var(--bx-fg);
  outline-offset: 2px;
}

/* Over the hero, with the rest of the chrome. */
:root .bx-header.is-over-hero .bx-lang__globe {
  color: rgba(255, 255, 255, 0.55);
}

:root .bx-header.is-over-hero .bx-lang__item {
  color: rgba(255, 255, 255, 0.75);
}

:root .bx-header.is-over-hero .bx-lang__item.is-on,
:root .bx-header.is-over-hero .bx-lang__item:hover {
  color: #fff;
}

.bx-header.is-over-hero .bx-lang__item + .bx-lang__item {
  border-inline-start-color: rgba(255, 255, 255, 0.22);
}

:root .bx-header.is-over-hero.is-mega-open .bx-lang__item {
  color: var(--bx-mute);
}

:root .bx-header.is-over-hero.is-mega-open .bx-lang__item.is-on {
  color: var(--bx-fg);
}

/* On a phone the bar carries the divisions and the shop mark; the language
   set moves out of the way rather than wrapping the bar onto two lines. */
@media (max-width: 720px) {
  .bx-lang__globe {
    display: none;
  }

  .bx-lang__item {
    padding-inline: 0.3rem;
    font-size: 0.6875rem;
  }
}


/* --------------------------------------------------------------------------
   App: QR + store badges
   The QR card and the two stacked badges are one aligned block — equal
   height, one gap, nothing floating. The QR sits on white whatever the page
   ground is, because a scanner needs the light modules light and the page
   ground is off-white.
   -------------------------------------------------------------------------- */

.bx-appget {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: stretch;
  margin-block-start: 2rem;
  max-inline-size: 26rem;
}

.bx-appget__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  /* Tight: the card is a frame for the code, not a mat around it. */
  padding: 0.5rem 0.5rem 0.4375rem;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-sm);
  background: #fff;
}

.bx-appget__qr img {
  inline-size: 5.5rem;
  block-size: 5.5rem;
  display: block;
}

.bx-appget__scan {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--bx-faint);
}

.bx-appget__badges {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 0.625rem;
}

.bx-badge {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-sm);
  background: var(--bx-card);
  text-decoration: none;
  transition: border-color 200ms var(--bx-ease), background-color 200ms var(--bx-ease);
}

/* The platform mark stands on its own — no tile. A real logo at a readable
   size IS the identification; putting it in a grey square shrinks it and
   makes two well-known silhouettes look like generic UI icons.
   The Apple mark is optically smaller than the Android robot at the same box,
   so it gets the slightly larger one. */
.bx-badge__logo {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  color: var(--bx-fg);
  transition: color 200ms var(--bx-ease);
}

.bx-badge:first-child .bx-badge__logo {
  inline-size: 1.625rem;
  block-size: 1.625rem;
}

/* Not yet available reads in the mark too, or a full-contrast logo promises a
   link that is not there. */
.bx-badge--soon .bx-badge__logo { color: var(--bx-mute); }

.bx-badge__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.2;
}

/* The kicker is a whisper; the store name is the thing being read. */
.bx-badge__kicker {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bx-faint);
}

.bx-badge__store {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bx-fg);
  white-space: nowrap;
}

/* A live badge fills with ink on hover; the whole row responds, so it reads
   as one target rather than a link inside a box. */
.bx-footer a.bx-badge:hover {
  border-color: var(--bx-fg);
  background: var(--bx-bg);
}

.bx-footer a.bx-badge:hover .bx-badge__logo {
  color: var(--bx-fg);
}

.bx-badge--soon { cursor: default; }

/* The marker, not a second headline: a hairline chip at the end of the row,
   at the kicker's size rather than the store name's. */
.bx-badge__soon {
  margin-inline-start: auto;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--bx-line);
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bx-faint);
  white-space: nowrap;
}

/* Connected scripts and CJK do not take the uppercase micro-tracking. */
body.bx-lang-ar :is(.bx-badge__kicker, .bx-badge__soon, .bx-appget__scan),
body.bx-lang-ur :is(.bx-badge__kicker, .bx-badge__soon, .bx-appget__scan),
body.bx-lang-zh :is(.bx-badge__kicker, .bx-badge__soon, .bx-appget__scan) {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.625rem;
}

@media (max-width: 420px) {
  .bx-appget {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-badge,
  .bx-badge__logo { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero content: fades out as the page scrolls past it
   The progress (0 → 1) is published on the hero as --bx-hero-fade by
   initChrome(); everything about HOW it leaves is decided here.
   -------------------------------------------------------------------------- */

.bx-hero__content {
  /* (1 - p)², so the drop is FRONT-loaded: 0.2 of the way through the scroll
     the copy is already at 64% opacity, and by 0.6 it is at 16%. The previous
     curve was p² — it held the text near full strength through the first half
     and made it feel like it was refusing to leave. */
  opacity: calc((1 - var(--bx-hero-fade, 0)) * (1 - var(--bx-hero-fade, 0)));
  transform: translate3d(0, calc(var(--bx-hero-fade, 0) * -4rem), 0);
  /* No transition: the value is already driven by scroll position, and
     easing it again would make it lag the finger. */
  will-change: opacity, transform;
}

/* Past the point of being readable it stops being a target too. */
.bx-hero__content.is-gone {
  pointer-events: none;
}

/* Reduced motion keeps the fade — it is what stops the copy colliding with
   the nav — but drops the travel, which is the part that is motion for its
   own sake. */
@media (prefers-reduced-motion: reduce) {
  .bx-hero__content {
    transform: none;
  }
}

/* A catalogue row with no link behind it — the service list is shown in full
   on a translated page, but its target only exists in English, so the row
   states the fact instead of pretending to be a link. */
.bx-mega__row--plain,
.bx-mega__all--plain {
  cursor: default;
}

.bx-mega__row--plain:hover {
  background: none;
}

.bx-mega__row--plain:hover .bx-mega__row-label {
  color: var(--bx-fg);
}

.bx-mega__all--plain {
  color: var(--bx-mute);
}

/* Panel item with no link behind it — shown on a translated page, where every
   target is still an English-only page. Same reasoning as .bx-mega__row--plain. */
.bx-mega__item--plain {
  cursor: default;
}

.bx-mega__item--plain:hover {
  background: none;
}

/* An Arabic short name is longer than a Latin initialism, so the tile sizes to
   its text instead of holding a fixed monogram width. */
body.bx-lang-ar .bx-client__tile,
body.bx-lang-ur .bx-client__tile {
  min-inline-size: 0;
  padding-inline: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* The draft notice on an unreviewed legal page. Amber rather than the brand
   accent: this is a warning about the content, not a feature of it. */
.bx-notice {
  margin-block-start: 2rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid rgba(180, 83, 9, 0.28);
  border-radius: var(--bx-r-sm);
  background: rgba(245, 158, 11, 0.08);
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8a5200;
  max-inline-size: 44rem;
}

/* Five columns of footer links need a little less room each. */
.bx-footer__cols {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}