/* ------------------------------------------------
 * ZosarX - custom sections
 * Work grid + filters, services list, stack, CTA
 * Built on the template's own CSS variables so it
 * inherits light/dark automatically.
 * ------------------------------------------------ */

/* ------------------------------------------------
 * 00. Brand palette
 * Overrides the template's source tokens. main.min.css
 * maps these into --base / --accent / --t-* per theme,
 * so redefining them here re-skins every component.
 *
 * Dark  : obsidian with a violet undertone + acid lime
 * Light : warm bone + deep electric violet
 * ------------------------------------------------ */
:root {
  /* --- dark theme --- */
  --base--dark: #0a0a0e;
  --base-rgb--dark: 10, 10, 14;
  --base-tint--dark: #14141a;
  --base-shade--dark: #050507;
  --base-opp--dark: #f7f4f0;
  --base-opp-tint--dark: #ffffff;
  --accent--dark: #c8f751;
  --accent-rgb--dark: 200, 247, 81;
  --additional--dark: #a78bfa;
  --additional-rgb--dark: 167, 139, 250;
  --neutral-transparent--dark: rgba(10, 10, 14, 0.4);
  --st-bright--dark: #ffffff;
  --st-medium--dark: #5c5c6b;
  --st-muted--dark: #24242e;
  --st-opp-bright--dark: #0a0a0e;
  --t-bright--dark: #ffffff;
  --t-medium--dark: #adadbc;
  --t-muted--dark: #82828f;
  --t-muted-extra--dark: #4e4e5c;
  --t-opp-bright--dark: #0a0a0e;
  --t-opp-medium--dark: #2a2a33;
  --t-opp-muted--dark: #93939f;

  /* --- light theme --- */
  --base--light: #f7f4f0;
  --base-rgb--light: 247, 244, 240;
  --base-tint--light: #ffffff;
  --base-shade--light: #e4dfd8;
  --base-opp--light: #0a0a0e;
  --base-opp-tint--light: #14141a;
  --accent--light: #6c4fe8;
  --accent-rgb--light: 108, 79, 232;
  --additional--light: #c8f751;
  --additional-rgb--light: 200, 247, 81;
  --neutral-transparent--light: rgba(255, 255, 255, 0.4);
  --st-bright--light: #0a0a0e;
  --st-medium--light: #7a7568;
  --st-muted--light: #e2dcd3;
  --st-opp-bright--light: #ffffff;
  --t-bright--light: #0a0a0e;
  --t-medium--light: #35323c;
  --t-muted--light: #5a5663;
  --t-muted-extra--light: #ada79d;
  --t-opp-bright--light: #ffffff;
  --t-opp-medium--light: #b4b0bc;
  --t-opp-muted--light: #86828f;

  /* --- signature duotone --- */
  --zx-duotone: linear-gradient(
    120deg,
    var(--accent) 0%,
    var(--additional) 100%
  );
}

/* --- Section head shared --- */
.zx-head {
  margin-bottom: 5rem;
}

.zx-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  font: normal var(--fw-regular) 1.4rem/1.4 var(--_font-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.zx-head__kicker::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  background-color: var(--accent);
}

@media only screen and (min-width: 1200px) {
  .zx-head {
    margin-bottom: 7rem;
  }
}

/* --- Filters --- */
.zx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 4rem;
}

.zx-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  height: 4.4rem;
  padding: 0 2rem;
  border: 1px solid var(--st-muted);
  border-radius: 2.2rem;
  background-color: transparent;
  color: var(--t-medium);
  font: normal var(--fw-regular) 1.6rem/1 var(--_font-accent);
  cursor: pointer;
  transition:
    background-color var(--_animspeed-medium) var(--_animbezier),
    border-color var(--_animspeed-medium) var(--_animbezier),
    color var(--_animspeed-medium) var(--_animbezier);
}

.zx-filter span {
  font-size: 1.2rem;
  color: var(--t-muted-extra);
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .zx-filter:hover {
  border-color: var(--t-bright);
  color: var(--t-bright);
}

.zx-filter.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--t-opp-bright);
}

.zx-filter.is-active span {
  color: var(--t-opp-bright);
  opacity: 0.65;
}

@media only screen and (min-width: 1200px) {
  .zx-filters {
    margin-bottom: 6rem;
  }
}

/* --- Work grid --- */
.zx-work {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .zx-work {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 1400px) {
  .zx-work {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.zx-work__item {
  min-width: 0;
}

.zx-work__item.is-hidden {
  display: none;
}

.zx-work__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.4rem 1.4rem 2.8rem 1.4rem;
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .zx-work__inner:hover {
  transform: translateY(-6px);
}

.zx-work__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  margin-bottom: 2.4rem;
  border-radius: calc(var(--_radius-m) - 0.6rem);
  overflow: hidden;
  background-color: var(--base-shade);
}

.zx-work__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--_animbezier);
}

.no-touch .zx-work__inner:hover .zx-work__media img {
  transform: scale(1.06);
}

.no-touch .zx-work__inner:hover .mxd-preview-hover {
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.zx-work__badge {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 2;
}

.zx-work__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 1.4rem;
}

.zx-work__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 0.6rem;
}

.zx-work__title {
  font: normal var(--fw-medium) 2.4rem/1.2 var(--_font-accent);
  letter-spacing: -0.04rem;
  color: var(--t-bright);
  margin: 0;
}

.zx-work__icon {
  flex: 0 0 auto;
  font-size: 2rem;
  line-height: 1;
  color: var(--t-muted-extra);
  transition:
    color var(--_animspeed-medium) var(--_animbezier),
    transform var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .zx-work__inner:hover .zx-work__icon {
  color: var(--accent);
  transform: translate(3px, -3px);
}

.zx-work__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  font: normal var(--fw-regular) 1.4rem/1.4 var(--_font-default);
  color: var(--t-muted);
}

.zx-work__meta i {
  font-size: 0.5rem;
  color: var(--accent);
}

.zx-work__descr {
  margin: 0 0 2.4rem 0;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--t-medium);
}

.zx-work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: auto;
}

.zx-tag {
  height: 3rem;
  line-height: 3rem;
  padding: 0 1.2rem;
  border-radius: 1.5rem;
  border: 1px solid var(--st-muted);
  font: normal var(--fw-regular) 1.3rem/1.5 var(--_font-accent);
  color: var(--t-medium);
}

.zx-work__inner.is-private {
  cursor: default;
}

.zx-work__empty {
  display: none;
  padding: 4rem 0;
  color: var(--t-muted);
}

.zx-work.is-empty + .zx-work__empty {
  display: block;
}

/* --- Services list --- */
.zx-services {
  position: relative;
  display: flex;
  flex-direction: column;
}

.zx-services__item {
  position: relative;
  padding: 3.4rem 0;
  border-top: 1px solid var(--st-muted);
  transition: opacity var(--_animspeed-medium) ease;
}

.zx-services__item:last-of-type {
  border-bottom: 1px solid var(--st-muted);
}

@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .no-touch .zx-services:hover > .zx-services__item:not(:hover) {
    opacity: 0.35;
  }
}

.zx-services__row {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

@media only screen and (min-width: 1200px) {
  .zx-services__row {
    flex-direction: row;
    align-items: baseline;
    gap: 3rem;
  }
}

.zx-services__num {
  flex: 0 0 auto;
  width: 6rem;
  font: normal var(--fw-regular) 1.4rem/1.6 var(--_font-accent);
  color: var(--t-muted-extra);
}

.zx-services__name {
  flex: 0 0 auto;
  margin: 0;
  font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent);
  letter-spacing: -0.04rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .zx-services__name {
    width: 34rem;
    font-size: 3.2rem;
  }
}

.zx-services__descr {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.55;
  color: var(--t-medium);
}

.zx-services__tag {
  flex: 0 0 auto;
  align-self: flex-start;
}

/* --- Stack cards --- */
.zx-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

@media only screen and (min-width: 768px) {
  .zx-stack {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .zx-stack {
    grid-template-columns: repeat(5, 1fr);
  }
}

.zx-stack__item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 2.6rem 2.4rem;
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
  transition: background-color var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .zx-stack__item:hover {
  background-color: var(--accent);
}

.zx-stack__name {
  font: normal var(--fw-medium) 1.8rem/1.3 var(--_font-accent);
  color: var(--t-bright);
}

.zx-stack__role {
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--t-muted);
}

.no-touch .zx-stack__item:hover .zx-stack__name,
.no-touch .zx-stack__item:hover .zx-stack__role {
  color: var(--t-opp-bright);
}

/* --- Process --- */
.zx-process {
  display: flex;
  flex-direction: column;
}

.zx-process__item {
  padding: 3.4rem 0;
  border-top: 1px solid var(--st-muted);
}

.zx-process__item:last-of-type {
  border-bottom: 1px solid var(--st-muted);
}

.zx-process__row {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

@media only screen and (min-width: 1200px) {
  .zx-process__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
}

.zx-process__step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--t-opp-bright);
  font: normal var(--fw-medium) 1.6rem/1 var(--_font-accent);
}

.zx-process__name {
  margin: 0;
  font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent);
  letter-spacing: -0.04rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .zx-process__name {
    flex: 0 0 auto;
    width: 30rem;
  }
}

.zx-process__descr {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.55;
  color: var(--t-medium);
}

.zx-process__time {
  flex: 0 0 auto;
  font: normal var(--fw-regular) 1.4rem/1.4 var(--_font-accent);
  color: var(--t-muted-extra);
  white-space: nowrap;
}

/* --- Final CTA --- */
.zx-cta {
  position: relative;
  padding: 6rem 3rem;
  border-radius: var(--_radius-l);
  background-color: var(--base-tint);
  overflow: hidden;
}

@media only screen and (min-width: 1200px) {
  .zx-cta {
    padding: 9rem 8rem;
  }
}

.zx-cta__title {
  margin: 0 0 2rem 0;
  font: normal var(--fw-medium) 4rem/1.05 var(--_font-accent);
  letter-spacing: -0.1rem;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .zx-cta__title {
    font-size: 6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .zx-cta__title {
    font-size: 8rem;
  }
}

.zx-cta__lede {
  max-width: 62rem;
  margin: 0 0 4rem 0;
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--t-medium);
}

.zx-cta__btngroup {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.zx-cta__status {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
  padding: 0 1.6rem;
  height: 3.6rem;
  border-radius: 1.8rem;
  border: 1px solid var(--st-muted);
  font: normal var(--fw-regular) 1.4rem/1 var(--_font-accent);
  color: var(--t-medium);
}

.zx-cta__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  animation: zxPulse 2.4s infinite;
}

@keyframes zxPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zx-cta__dot {
    animation: none;
  }
  .zx-work__inner,
  .zx-work__media img,
  .zx-work__icon {
    transition: none;
  }
}

/* ------------------------------------------------
 * 90. Brand atmosphere
 * Ambient duotone light, gradient-lit card edges,
 * and the ZosarX wordmark.
 * ------------------------------------------------ */

/* --- Logo ---
 * The mark itself is an inline SVG; its styling (and the loader that
 * reuses the same geometry) lives in css/loaders/zosarx-loader.css. */
.zx-logo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

/* --- Hero emblem: symbol only, legible in both themes --- */
.mxd-hero-02-marquee__image img {
  /* clip the baked-in "ZOSAR" wordmark, keep the pyramid */
  clip-path: inset(0 0 27% 0);
}

:root[color-scheme="dark"] .mxd-hero-02-marquee__image img {
  filter: brightness(0) invert(1);
  opacity: 0.16;
}

:root[color-scheme="light"] .mxd-hero-02-marquee__image img {
  opacity: 0.14;
}

/* --- Ambient duotone light --- */
#work,
#expertise,
.zx-cta {
  position: relative;
}

#work::before,
#expertise::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(120rem, 110%);
  height: 60rem;
  transform: translateX(-50%);
  background: radial-gradient(
    60% 50% at 50% 0%,
    rgba(var(--accent-rgb), 0.1),
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

#expertise::before {
  background: radial-gradient(
    60% 50% at 50% 0%,
    rgba(var(--additional-rgb), 0.1),
    transparent 70%
  );
}

.zx-cta {
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--st-muted);
}

.zx-cta::before,
.zx-cta::after {
  content: "";
  position: absolute;
  width: 62rem;
  height: 62rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.zx-cta::before {
  top: -34rem;
  right: -18rem;
  background: radial-gradient(
    circle,
    rgba(var(--accent-rgb), 0.18),
    transparent 62%
  );
}

.zx-cta::after {
  bottom: -38rem;
  left: -14rem;
  background: radial-gradient(
    circle,
    rgba(var(--additional-rgb), 0.16),
    transparent 62%
  );
}

/* --- Gradient-lit card edges --- */
.zx-work__inner,
.zx-stack__item {
  box-shadow: inset 0 0 0 1px var(--st-muted);
}

.zx-work__inner::before,
.zx-stack__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    155deg,
    rgba(var(--accent-rgb), 0.55),
    rgba(var(--additional-rgb), 0.28) 45%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--_animspeed-medium) var(--_animbezier);
  pointer-events: none;
  z-index: 1;
}

.zx-stack__item {
  position: relative;
}

.no-touch .zx-work__inner:hover::before,
.no-touch .zx-stack__item:hover::before {
  opacity: 1;
}

.no-touch .zx-work__inner:hover {
  box-shadow:
    inset 0 0 0 1px transparent,
    0 24px 60px -24px rgba(var(--accent-rgb), 0.28);
}

/* the stack card flips to a solid accent on hover, so drop the edge */
.no-touch .zx-stack__item:hover::before {
  opacity: 0;
}

/* --- Duotone accents --- */
.zx-filter.is-active {
  background: var(--zx-duotone);
  border-color: transparent;
}

.zx-process__step {
  background: var(--zx-duotone);
}

.zx-head__kicker::before {
  background: var(--zx-duotone);
}

@media (prefers-reduced-motion: reduce) {
  .zx-work__inner::before,
  .zx-stack__item::before {
    transition: none;
  }
}

/* ------------------------------------------------
 * 91. Studio section
 * The founder's discipline line and the architecture
 * pyramid that sits opposite the Studio copy.
 * ------------------------------------------------ */

/* --- Founder's discipline line ---
 * Runs inline inside the founder sentence. The pipes are
 * generated rather than typed so a wrap never strands a
 * separator at the start of a line. */
.zx-role {
  color: var(--t-bright);
}

.zx-role > span + span::before {
  content: "|";
  margin: 0 0.5em;
  color: var(--t-muted-extra);
}

/* --- Architecture pyramid ---
 * The ZosarX step pyramid rebuilt as a live platform
 * diagram beside the Studio copy. Canvas owns the
 * geometry; the layer names stay real DOM text so they
 * remain selectable, translatable, and readable by
 * assistive tech. Positioned each frame by js/zosarx.js.
 * ------------------------------------------------ */
.zx-arch {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 3.2rem 0 0;
  aspect-ratio: 6 / 5;
  /* let vertical swipes scroll the page straight through it */
  touch-action: pan-y;
}

.zx-arch::before {
  content: "";
  position: absolute;
  inset: 12% -6% -6% 18%;
  background: radial-gradient(
    50% 50% at 50% 55%,
    rgba(var(--accent-rgb), 0.09),
    transparent 70%
  );
  pointer-events: none;
}

.zx-arch__canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* Anchored top-left, then moved into place with a transform
 * carrying its own right-align/centre correction. */
.zx-arch__label {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: color 0.35s ease, opacity 0.5s ease;
}

.zx-arch.is-ready .zx-arch__label {
  opacity: 1;
}

.zx-arch__label.is-active {
  color: var(--accent);
}

@media only screen and (min-width: 1200px) {
  .zx-arch {
    max-width: 54rem;
    margin-top: 4rem;
  }
}

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

/* ------------------------------------------------
 * 92. Hero caption
 * The service kicker above the headline and the cycling
 * word that closes it.
 * ------------------------------------------------ */

/* --- Service kicker ---
 * Separators are generated so a wrap never strands a dot
 * at the start of a line. */
.zx-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 1.4rem;
  font: normal var(--fw-regular) 1.2rem/1 var(--_font-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.zx-hero__kicker span + span::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.9rem;
  border-radius: 50%;
  vertical-align: 0.15em;
  background: var(--zx-duotone);
}

@media only screen and (min-width: 1200px) {
  .zx-hero__kicker {
    margin-bottom: 1.8rem;
    font-size: 1.3rem;
  }
}

/* --- Cycling word ---
 * Three stacked layers in one inline box:
 *   ghost - in flow, invisible. Owns the width, the height
 *           and the baseline, so swapping words never
 *           reflows the sentence around it.
 *   mask  - absolutely positioned over the ghost. Clips the
 *           words, and because it is out of flow its
 *           overflow never touches the outer baseline.
 *   live  - the real, un-animated text for assistive tech.
 * ------------------------------------------------ */
.zx-cycler {
  position: relative;
  display: inline-block;
}

/* The template paints every span inside a muted paragraph with
 * `p.t-muted span`, which outranks a lone `.zx-cycler`, so the
 * accent has to be set from a two-class selector to win. */
.zx-cycler .zx-cycler__word {
  color: var(--accent);
}

/* Accent halo. Lives on the cycler rather than on the words
 * themselves so the mask's clipping never cuts it off. */
.zx-cycler::before {
  content: "";
  position: absolute;
  inset: -0.7em -0.4em;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(var(--accent-rgb), 0.16),
    transparent 70%
  );
  pointer-events: none;
}

/* inline-block so js/zosarx.js can pin its measured width */
.zx-cycler__ghost {
  display: inline-block;
  visibility: hidden;
  white-space: nowrap;
}

.zx-cycler__mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Resting state is also the entry state: waiting below the mask,
 * blurred out. The short delay lets the outgoing word clear first,
 * so the two never sit on top of each other as a smudge. */
.zx-cycler__word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 0.85em, 0);
  filter: blur(0.35rem);
  transition:
    opacity 0.4s var(--_animbezier) 0.12s,
    transform 0.55s var(--_animbezier) 0.12s,
    filter 0.4s var(--_animbezier) 0.12s;
}

.zx-cycler__word.is-active {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Leaving upward, so the next word rises into its place. Goes
 * immediately and a little quicker than the entry. */
.zx-cycler__word.is-out {
  opacity: 0;
  transform: translate3d(0, -0.85em, 0);
  filter: blur(0.35rem);
  transition-duration: 0.28s, 0.5s, 0.28s;
  transition-delay: 0s;
}

[dir="rtl"] .zx-cycler__word {
  left: auto;
  right: 0;
}

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

/* ------------------------------------------------
 * 93. Mobile viewport height
 * The template sizes its full-screen sections with 100vh.
 * On phones that unit is the *tallest* viewport - the one
 * you only get once the URL bar has collapsed - so at rest
 * the hero runs taller than the screen: the tech list and
 * the scroll button sit behind the browser chrome, and the
 * page lurches as the bar hides and shows.
 *
 * svh is the height that is always visible, whatever the
 * chrome is doing, and unlike dvh it does not change mid
 * scroll, so nothing reflows and ScrollTrigger keeps its
 * measurements. Anything below the pinned hero is the same
 * --base colour, so the strip revealed when the bar
 * collapses is invisible.
 * ------------------------------------------------ */
/* Layer 1 - every browser. js/zosarx.js measures the visible height
 * once and parks it in --zx-vh, deliberately *not* remeasuring when
 * the URL bar slides, so the hero never resizes mid-scroll. */
.mxd-pinned-fullscreen__static,
.mxd-section-fullscreen,
.mxd-hero-fullheight,
.mxd-pinned__visual,
.mxd-menu__wrapper,
.mxd-floating-img {
  height: var(--zx-vh, 100vh);
}

.mxd-hero-02-scroll__wrap {
  padding-bottom: var(--zx-vh, 100vh);
}

/* Layer 2 - anything from iOS 15.4 / Chrome 108 on gets the real unit,
 * which stays correct through rotation and split-screen without JS. */
@supports (height: 100svh) {
  .mxd-pinned-fullscreen__static,
  .mxd-section-fullscreen,
  .mxd-hero-fullheight,
  .mxd-pinned__visual,
  .mxd-menu__wrapper,
  .mxd-floating-img {
    height: 100svh;
  }

  .mxd-hero-02-scroll__wrap {
    padding-bottom: 100svh;
  }
}

/* A few of the marquee sections run ~20px past the viewport on a
 * narrow phone, which gives the page a sideways wobble while you
 * scroll. The template forces `overflow-x:unset` on <body> because
 * a scroll container there would break ScrollTrigger's pinning, so
 * clip on the page wrapper instead: unlike `hidden`, `clip` does not
 * make an element a scroll container, and the pinned hero keeps
 * sticking to the viewport. */
@supports (overflow-x: clip) {
  .mxd-page-content {
    overflow-x: clip;
  }
}

/* Short phones in landscape, and small screens generally:
 * claw back the fixed vertical padding so the caption, the
 * marquee and the tech list still clear each other. */
@media only screen and (max-height: 700px) and (max-width: 991px) {
  .mxd-hero-02-static__top {
    padding-top: 6.4rem;
  }

  .hero-02-static__caption {
    margin-top: 1rem;
  }

  .mxd-hero-02-static__bottom {
    bottom: 2rem;
  }

  .mxd-hero-02-marquee .marquee__text {
    font-size: 7.4rem;
  }

  .mxd-hero-02-marquee .marquee__image {
    width: 5.2rem;
    height: 5.2rem;
  }
}

/* Below that there is no room for the full stack list -
 * the marquee and the headline carry the fold on their own. */
@media only screen and (max-height: 560px) and (max-width: 991px) {
  .mxd-hero-02-static__bottom {
    display: none;
  }
}

/* ------------------------------------------------
 * 99. SEO / accessibility utilities
 * Visually-hidden text for the real page <h1> and any
 * screen-reader-only copy. Kept visually invisible but
 * fully readable to assistive tech and search crawlers.
 * ------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* language switcher (EN / AR) button in the header */
.zx-lang-switch {
  min-width: unset !important;
}

/* ------------------------------------------------
 * 100. RTL safety net (used by /ar/index.html)
 * The template's grid/marquee/pinned-hero components rely
 * on hard-coded left/right positioning, so we don't mirror
 * those wholesale. This only flips the parts that are safe
 * and meaningful to flip: text alignment, list markers, and
 * simple flex rows (nav, footer, buttons).
 * ------------------------------------------------ */
:root {
  --_font-arabic: "Cairo", "Funnel Sans", sans-serif;
}

[dir="rtl"] body {
  font-family: var(--_font-arabic);
}

[dir="rtl"] .t-large,
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  text-align: right;
}

[dir="rtl"] .main-menu__accordion,
[dir="rtl"] .footer-nav,
[dir="rtl"] .footer-socials {
  padding-right: 0;
}

[dir="rtl"] .btn-caption {
  direction: rtl;
}

/* ------------------------------------------------
 * 101. Hero scroll gallery - 8:5 artwork
 * The template shipped this gallery as tall portrait
 * frames (type-01/02) next to wide ones (type-03), so an
 * object-fit: cover on a 800x500 design threw away
 * roughly half of it. Every frame is pinned to the
 * artwork's own 8:5 ratio instead - cover then has
 * nothing left to crop and each design is shown whole.
 * The staggered composition is untouched; size variety
 * now comes from width alone, and type-04 is a new mid
 * size added for the fourth row.
 *
 * No width ever exceeds the 800px source, so the artwork
 * is never upscaled - that is what keeps the type inside
 * each design crisp.
 * ------------------------------------------------ */
.mxd-hero-02-image__inner.type-01,
.mxd-hero-02-image__inner.type-02,
.mxd-hero-02-image__inner.type-03,
.mxd-hero-02-image__inner.type-04 {
  height: auto;
  max-width: 100%;
  aspect-ratio: 8 / 5;
}

/* a flex item defaults to min-width:auto, which here is the
   frame's own fixed width - without this the frames refuse
   to shrink and punch out of a narrow row instead */
.mxd-hero-02-image__portrait,
.mxd-hero-02-image__landscape {
  min-width: 0;
}

/* height:auto + max-width means a frame squeezed by its
   row scales down whole instead of cropping */
.mxd-hero-02-image__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* phones and small tablets - the rows still wrap here, so
   each frame gets a line to itself. Near-full-width is
   what makes the numbered title inside a design readable
   on a handset. */
.mxd-hero-02-image__inner.type-01 {
  width: 300px;
}
.mxd-hero-02-image__inner.type-02,
.mxd-hero-02-image__inner.type-03 {
  width: 340px;
}
.mxd-hero-02-image__inner.type-04 {
  width: 320px;
}

/* the template indents this one by 30% below 1200px,
   which on a wrapped single-column row only pushes it
   off the screen */
.mxd-hero-02-image__portrait.portrait-05 {
  padding-left: 0;
}

@media only screen and (min-width: 768px) {
  .mxd-hero-02-image__inner.type-01 {
    width: 380px;
  }
  .mxd-hero-02-image__inner.type-02,
  .mxd-hero-02-image__inner.type-03 {
    width: 460px;
  }
  .mxd-hero-02-image__inner.type-04 {
    width: 420px;
  }
}

/* From 1200px the rows stop wrapping, so from here on a
   row's frames plus its two 6rem gaps have to fit the
   content width on their own. Each step below is sized
   against the narrowest viewport that reaches it. */
@media only screen and (min-width: 1200px) {
  .mxd-hero-02-image__inner.type-01 {
    width: 240px;
  }
  .mxd-hero-02-image__inner.type-02 {
    width: 440px;
  }
  .mxd-hero-02-image__inner.type-03 {
    width: 400px;
  }
  .mxd-hero-02-image__inner.type-04 {
    width: 320px;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-hero-02-image__inner.type-01 {
    width: 320px;
  }
  .mxd-hero-02-image__inner.type-02 {
    width: 560px;
  }
  .mxd-hero-02-image__inner.type-03 {
    width: 460px;
  }
  .mxd-hero-02-image__inner.type-04 {
    width: 400px;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-hero-02-image__inner.type-01 {
    width: 380px;
  }
  .mxd-hero-02-image__inner.type-02 {
    width: 700px;
  }
  .mxd-hero-02-image__inner.type-03 {
    width: 540px;
  }
  .mxd-hero-02-image__inner.type-04 {
    width: 460px;
  }
}

/* full-size artwork - 800px is the source width, so this
   is as large as the designs go before they would blur */
@media only screen and (min-width: 1900px) {
  .mxd-hero-02-image__inner.type-01 {
    width: 440px;
  }
  .mxd-hero-02-image__inner.type-02 {
    width: 800px;
  }
  .mxd-hero-02-image__inner.type-03 {
    width: 640px;
  }
  .mxd-hero-02-image__inner.type-04 {
    width: 540px;
  }
}

/* fourth row - added for designs 09-11. Same rhythm as
   the rows above: top-aligned, each frame offset from its
   neighbour, and stepping down left to right so the
   numbering still reads in order. */
.mxd-hero-02-images__row-04 {
  align-items: flex-start;
}

.mxd-hero-02-image__landscape.landscape-04 {
  padding-top: 0;
}
.mxd-hero-02-image__portrait.portrait-06 {
  padding-top: 4rem;
}
.mxd-hero-02-image__landscape.landscape-05 {
  padding-top: 2rem;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-02-image__portrait.portrait-06 {
    padding-top: 12rem;
  }
  .mxd-hero-02-image__landscape.landscape-05 {
    padding-top: 5rem;
  }
}