/* ==========================================================================
   MCA YAPI — site.css
   Hand-written port of the Aerra design language (tokens, adaptive rem grid,
   text trim, glass, pill CTA, display type) retinted with MCA red.
   Pure CSS, no framework, no build step. Logical properties throughout so
   `dir="rtl"` mirrors the layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIER 1 — PRIMITIVES (--raw-*). The only place a literal may live.
   -------------------------------------------------------------------------- */
:root {
  --raw-color-white: #ffffff;
  --raw-color-white-85: rgba(255, 255, 255, 0.85);
  --raw-color-white-50: rgba(255, 255, 255, 0.5);
  --raw-color-white-0: rgba(255, 255, 255, 0);
  --raw-color-black: #000000;
  --raw-color-black-50: rgba(0, 0, 0, 0.5);
  --raw-color-black-10: rgba(0, 0, 0, 0.1);
  --raw-color-grey-100: #f4f4f4;
  --raw-color-grey-100-0: rgba(244, 244, 244, 0);
  --raw-color-grey-150-80: rgba(243, 243, 243, 0.8);
  --raw-color-grey-400: #9a9a9a;
  --raw-color-grey-700: #3b3b3b;
  /* MCA red — the brand accent, used sparingly */
  --raw-color-red: #a71c23;
  --raw-color-red-deep: #a71e24; /* footer ground on the old site */
  --raw-color-red-hover: #8f171d;
  --raw-color-red-10: rgba(167, 28, 35, 0.1);

  --raw-gradient-wordmark: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 82.23%);
  --raw-gradient-wordmark-ground: linear-gradient(to bottom, rgba(232, 232, 232, 1) 0%, rgba(244, 244, 244, 0) 82.23%);
  /* Stronger left/bottom wash so white type holds on the lightest slides (Perfektup). */
  --raw-gradient-media-scrim: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.5) 32%,
      rgba(0, 0, 0, 0.22) 58%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0) 70%);
  --raw-shadow-on-media-heading: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35);

  --raw-font-size-100: 1rem;
  --raw-font-size-200: 1.25rem;
  --raw-font-size-300: 2.25rem;
  --raw-font-size-400: 5rem;
  --raw-font-size-500: 50.0872rem;
  --raw-font-size-75: 0.875rem;

  --raw-leading-flat: 1;
  --raw-leading-tight: 1.1;
  --raw-leading-normal: 1.2;
  --raw-leading-prose: 1.45;

  --raw-radius-100: 0.375rem; /* 6px */
  --raw-radius-200: 0.5rem; /* 8px */
  --raw-radius-300: 0.625rem; /* 10px */

  --raw-blur-100: 0.625rem; /* 10px */
  --raw-blur-200: 2.34375rem; /* 37.5px */

  --raw-duration-fast: 150ms;
  --raw-duration-normal: 250ms;
  --raw-duration-slow: 700ms;
  --raw-ease-entrance: cubic-bezier(0.2, 0, 0, 1);

  --raw-gutter: 2.5rem; /* 40px — the design margin */
  --raw-gutter-phone: 1.25rem;
}

/* --------------------------------------------------------------------------
   TIER 2 — SEMANTIC roles. Re-theme here.
   -------------------------------------------------------------------------- */
:root {
  --background: var(--raw-color-white);
  --foreground: var(--raw-color-black);
  --foreground-muted: var(--raw-color-black-50);
  --foreground-subtle: var(--raw-color-grey-400);

  --surface-muted: var(--raw-color-grey-100);
  --surface-glass: var(--raw-color-grey-150-80);
  --surface-nav: var(--raw-color-grey-150-80);
  --surface-panel: var(--raw-color-white-85);
  --surface-footer: var(--raw-color-red-deep);

  --on-media: var(--raw-color-white);
  --on-media-muted: var(--raw-color-white-50);
  --media-scrim: var(--raw-gradient-media-scrim);
  --shadow-on-media-heading: var(--raw-shadow-on-media-heading);

  --accent: var(--raw-color-red);
  --accent-hover: var(--raw-color-red-hover);
  --accent-soft: var(--raw-color-red-10);

  --action-primary: var(--raw-color-red);
  --action-primary-hover: var(--raw-color-red-hover);
  --action-primary-foreground: var(--raw-color-white);
  --action-secondary: var(--raw-color-white);

  --border-subtle: var(--raw-color-black-10);
  --border-field: var(--raw-color-black);

  --wordmark-fill: var(--raw-gradient-wordmark);
  --wordmark-fill-ground: var(--raw-gradient-wordmark-ground);

  --font-size-small: var(--raw-font-size-75);
  --font-size-body: var(--raw-font-size-100);
  --font-size-lead: var(--raw-font-size-200);
  --font-size-title: var(--raw-font-size-300);
  --font-size-display: var(--raw-font-size-400);
  --font-size-wordmark: var(--raw-font-size-500);
  /* Aliases used by the brief */
  --text-display: var(--font-size-display);
  --text-title: var(--font-size-title);
  --text-lead: var(--font-size-lead);
  --text-body: var(--font-size-body);

  --line-height-flat: var(--raw-leading-flat);
  --line-height-display: var(--raw-leading-tight);
  --line-height-body: var(--raw-leading-normal);
  --line-height-prose: var(--raw-leading-prose);

  --corner-control: var(--raw-radius-100);
  --corner-button: var(--raw-radius-200);
  --corner-card: var(--raw-radius-300);

  --backdrop-nav: var(--raw-blur-100);
  --backdrop-glass: var(--raw-blur-100);
  --backdrop-panel: var(--raw-blur-200);

  --duration-fast: var(--raw-duration-fast);
  --duration-normal: var(--raw-duration-normal);
  --duration-slow: var(--raw-duration-slow);
  --ease-entrance: var(--raw-ease-entrance);

  --gutter: var(--raw-gutter);
  --word-gap: 0.2245em;

  --font-sans: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  --font-display: "Google Sans Flex Display", "Google Sans Flex", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Fonts — self-hosted, swap
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Google Sans Flex";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GoogleSansFlex_24pt-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Google Sans Flex";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GoogleSansFlex_24pt-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Google Sans Flex";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GoogleSansFlex_24pt-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Google Sans Flex";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GoogleSansFlex_24pt-Medium.woff2") format("woff2");
}
/* Variable cut for the giant wordmark — optical size axis thins the strokes. */
@font-face {
  font-family: "Google Sans Flex Display";
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/GoogleSansFlex-Variable-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Adaptive rem grid — one design at 1440, tablets fixed 16px, phones at 430
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserve scrollbar width so fixed chrome does not jump when overflow toggles. */
  scrollbar-gutter: stable;
  overflow-x: clip;
}
@media (max-width: 1440px) {
  html {
    font-size: 1.111111vw;
  }
}
@media (max-width: 1279px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 539px) {
  html {
    font-size: 3.72093vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked {
  overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  line-height: var(--line-height-body);
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
/* Framed media: fill the box, never sit tiny in a corner. */
.service-card__media img,
.sector-card__media img,
.work-card__media img,
.gallery__item img,
.lite-yt img,
.deex-card__media img,
.related-card__media img,
.block__media img,
.page-hero .parallax__layer img,
.hero .parallax__layer img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
address {
  font-style: normal;
}
hr {
  border: 0;
  border-block-start: 1px solid var(--border-subtle);
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-media :focus-visible {
  outline-color: var(--on-media);
}
[dir="rtl"] {
  text-align: start;
}

/* Text trim — pull line boxes onto the ink (Google Sans Flex metrics). */
.text-trim-flat {
  margin-block: -0.1125em -0.1625em;
}
.text-trim-body {
  margin-block: -0.2125em -0.2625em;
}

/* Type scale */
.text-small {
  font-size: var(--font-size-small);
}
.text-body {
  font-size: var(--font-size-body);
}
.text-lead {
  font-size: var(--font-size-lead);
}
.text-title {
  font-size: var(--font-size-title);
  line-height: var(--line-height-body);
  font-weight: 300;
}
.text-display {
  font-size: var(--font-size-display);
  line-height: var(--line-height-flat);
  font-weight: 300;
}
.font-thin {
  font-weight: 100;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.muted {
  color: var(--foreground-muted);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout helpers */
.container {
  width: 100%;
  padding-inline: var(--gutter);
  margin-inline: auto;
}
@media (max-width: 539px) {
  :root {
    --gutter: var(--raw-gutter-phone);
  }
}
.section {
  position: relative;
  width: 100%;
  padding-block: 6.25rem;
}
@media (max-width: 1279px) {
  .section {
    padding-block: 5rem;
  }
}
.hairline {
  height: 1px;
  width: 100%;
  background: var(--border-subtle);
}
.on-media {
  color: var(--on-media);
}

/*
  Headings on photographs — variable Display cut at 700 (static files stop at 500).
  Used by the hero carousel, listing/page header bands, contact/location bands.
*/
.heading-on-media,
.carousel__heading,
.page-hero.on-media .page-hero__title,
.contact-band__title,
.form-band.on-media .form-band__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: var(--shadow-on-media-heading);
  font-optical-sizing: auto;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  border-radius: var(--corner-button);
  background: var(--action-primary);
  color: var(--action-primary-foreground);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-entrance);
}
.skip-link:focus-visible {
  transform: none;
}

/* --------------------------------------------------------------------------
   Reveal primitives (JS writes opacity/transform/filter; CSS sets the
   pre-reveal state so nothing flashes before the script runs)
   -------------------------------------------------------------------------- */
.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
}
.js [data-split]:not(.is-split-ready) {
  visibility: hidden;
}
.split {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--word-gap);
}
.split.is-center {
  justify-content: center;
}
.split.is-nowrap {
  flex-wrap: nowrap;
}
.split .word {
  display: inline-block;
  overflow: hidden;
  padding-block: 0.06em;
  margin-block: -0.06em;
}
.split .word > .word__inner {
  display: inline-block;
  will-change: transform, opacity;
}
.split .word.is-settled > .word__inner {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   Preloader curtain
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--background);
  pointer-events: none;
}
.preloader__track {
  position: absolute;
  inset-inline: var(--gutter);
  bottom: var(--gutter);
  height: 5rem;
  overflow: hidden;
}
.preloader__count {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  white-space: nowrap;
  font-size: var(--font-size-display);
  font-weight: 300;
  line-height: 1;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Navigation — full-bleed centering wrapper + inner bar
   The wrapper never takes a transform (springs write translate on the inner
   only). First paint is already centred; entrance is opacity + translateY.
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0.75rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: none !important;
}
.nav__inner {
  pointer-events: auto;
  width: calc(100% - 1.5rem);
  max-width: 1360px;
}
.js .nav__inner:not(.is-revealed) {
  opacity: 0;
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem;
  border-radius: var(--corner-button);
  background: var(--surface-nav);
  -webkit-backdrop-filter: blur(var(--backdrop-nav));
  backdrop-filter: blur(var(--backdrop-nav));
}
.nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.625rem; /* 170px — original .header>.logo */
  height: 4.375rem; /* 70px */
  padding: 0.5rem 0.75rem;
  border-radius: var(--corner-control);
  background: #ffffff;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-entrance);
}
.nav__logo:hover {
  transform: scale(1.04);
}
.nav__logo svg {
  height: 100%;
  width: auto;
  max-height: 3.375rem;
}
.nav__list {
  display: none;
  align-items: center;
  gap: 1.75rem;
  margin-inline-start: 1rem;
}
.nav__item {
  position: relative;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 1.125rem;
  white-space: nowrap;
  font-weight: 500;
  font-size: 1rem;
  line-height: var(--line-height-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity var(--duration-fast) var(--ease-entrance);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__item.is-open > .nav__link {
  opacity: 0.6;
}
.nav__link[aria-current="page"],
.nav__item.is-current > .nav__link {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
}
.nav__chevron {
  width: 0.625rem;
  height: 0.625rem;
  transition: transform var(--duration-fast) var(--ease-entrance);
}
.nav__item.is-open .nav__chevron {
  transform: rotate(180deg);
}
.nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-start: -1rem;
  min-width: 15rem;
  padding: 0.5rem;
  border-radius: var(--corner-button);
  background: var(--surface-nav);
  -webkit-backdrop-filter: blur(var(--backdrop-nav));
  backdrop-filter: blur(var(--backdrop-nav));
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem);
}
.nav__item.is-open > .nav__menu {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.nav__menu a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--corner-control);
  font-weight: 300;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-entrance), color var(--duration-fast) var(--ease-entrance);
}
.nav__menu a:hover,
.nav__menu a:focus-visible {
  background: var(--action-secondary);
  color: var(--accent);
}
.nav__aside {
  display: none;
  align-items: center;
  gap: 1rem;
  margin-inline-start: auto;
}
.nav__langs {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.nav__langs a {
  padding: 0.375rem 0.5rem;
  border-radius: var(--corner-control);
  font-size: var(--font-size-small);
  font-weight: 300;
  letter-spacing: 0.04em;
  transition: background var(--duration-fast) var(--ease-entrance), opacity var(--duration-fast) var(--ease-entrance);
}
.nav__langs a:hover {
  background: var(--action-secondary);
}
.nav__langs a[aria-current="true"] {
  font-weight: 500;
  color: var(--accent);
}
.nav__socials {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav__socials a,
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--corner-control);
  transition: background var(--duration-fast) var(--ease-entrance), color var(--duration-fast) var(--ease-entrance);
}
.nav__socials a:hover {
  background: var(--action-secondary);
  color: var(--accent);
}
.nav__socials svg,
.footer__socials svg {
  width: 1rem;
  height: 1rem;
}
.nav__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 4.375rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--corner-control);
  background: var(--action-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-entrance);
}
.nav__cta:hover {
  transform: scale(1.03);
}
.nav__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.nav__burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 4.375rem;
  height: 4.375rem;
  border-radius: var(--corner-control);
  background: #ffffff;
  flex-shrink: 0;
}
.nav__burger span {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--foreground);
  transition: transform var(--duration-fast) var(--ease-entrance);
}
.nav__burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
/* Off-canvas panel (below 1280) */
.nav__panel {
  margin-top: 0.5rem;
  border-radius: var(--corner-button);
  background: var(--surface-nav);
  -webkit-backdrop-filter: blur(var(--backdrop-nav));
  backdrop-filter: blur(var(--backdrop-nav));
  overflow: hidden auto;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem);
}
.nav__panel.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.nav__panel-list {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
}
.nav__panel-list > li {
  border-block-end: 1px solid var(--border-subtle);
}
.nav__panel-list > li:last-child {
  border-block-end: 0;
}
.nav__panel-list a,
.nav__accordion {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.875rem;
  font-size: var(--font-size-lead);
  font-weight: 300;
  text-align: start;
}
.nav__accordion .nav__chevron {
  width: 0.875rem;
  height: 0.875rem;
}
.nav__accordion[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}
.nav__sub {
  display: none;
  padding-block-end: 0.75rem;
  padding-inline-start: 1rem;
}
.nav__sub.is-open {
  display: block;
}
.nav__sub a {
  font-size: var(--font-size-body);
  padding-block: 0.5rem;
}
.nav__panel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 1.25rem;
  border-block-start: 1px solid var(--border-subtle);
}
.nav__panel-meta .nav__langs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
}
.nav__panel-meta .nav__langs li {
  display: inline-flex;
}
.nav__panel-meta .nav__langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
}
.nav__panel-meta .nav__langs a[aria-current="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.nav__panel .nav__cta {
  display: inline-flex;
  margin: 0 1.5rem 1.5rem;
}

@media (min-width: 1280px) {
  .nav__inner {
    width: min(100% - 1.5rem, 78rem);
  }
  .nav__bar {
    justify-content: flex-start;
    gap: 1rem;
  }
  .nav__list,
  .nav__aside,
  .nav__cta {
    display: flex;
  }
  .nav__burger,
  .nav__panel {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Eyebrow, CTA pill
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  line-height: var(--line-height-body);
  font-weight: 400;
}
.eyebrow::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow.is-accent::before {
  background: var(--accent);
}
.eyebrow.is-center {
  justify-content: center;
}

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 3rem;
  padding-block: 0.25rem;
  padding-inline: 1.5rem 0.25rem;
  overflow: hidden;
  border-radius: var(--corner-button);
  background: var(--action-primary);
  color: var(--action-primary-foreground);
  transition: transform var(--duration-normal) var(--ease-entrance), background var(--duration-normal) var(--ease-entrance);
}
.cta:hover {
  transform: translateY(-1px);
  background: var(--action-primary-hover);
}
.cta:focus-visible {
  outline: 2px solid var(--action-primary);
  outline-offset: 2px;
}
.cta__label {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.cta__sheen {
  pointer-events: none;
  position: absolute;
  inset-block: 0;
  inset-inline-start: -33%;
  width: 33%;
  transform: skewX(-12deg);
  background: rgba(255, 255, 255, 0.2);
  filter: blur(4px);
  transition: transform var(--duration-slow) var(--ease-entrance);
}
.cta:hover .cta__sheen {
  transform: translateX(400%) skewX(-12deg);
}
[dir="rtl"] .cta:hover .cta__sheen {
  transform: translateX(-400%) skewX(-12deg);
}
.cta__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--corner-control);
  background: var(--action-secondary);
  color: var(--action-primary);
}
.cta__tile svg {
  width: 1.125rem;
  height: auto;
  transition: transform var(--duration-normal) var(--ease-entrance);
}
.cta__tile svg + svg {
  position: absolute;
  transform: translateX(-220%);
}
.cta:hover .cta__tile svg:first-child {
  transform: translateX(220%);
}
.cta:hover .cta__tile svg + svg {
  transform: translateX(0);
}
[dir="rtl"] .cta__tile svg {
  transform: scaleX(-1);
}
[dir="rtl"] .cta__tile svg + svg {
  transform: translateX(220%) scaleX(-1);
}
[dir="rtl"] .cta:hover .cta__tile svg:first-child {
  transform: translateX(-220%) scaleX(-1);
}
[dir="rtl"] .cta:hover .cta__tile svg + svg {
  transform: translateX(0) scaleX(-1);
}
.cta.is-full {
  width: 100%;
}
.cta.is-ghost {
  background: var(--action-secondary);
  color: var(--foreground);
}
.cta.is-ghost .cta__tile {
  background: var(--foreground);
  color: var(--action-secondary);
}
.cta.is-ghost:hover {
  background: var(--action-secondary);
}
/* Secondary text link with arrow */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  transition: opacity var(--duration-fast) var(--ease-entrance);
}
.textlink svg {
  width: 1rem;
  height: auto;
  transition: transform var(--duration-normal) var(--ease-entrance);
}
.textlink:hover {
  opacity: 0.6;
}
.textlink:hover svg {
  transform: translateX(0.25rem);
}
[dir="rtl"] .textlink svg {
  transform: scaleX(-1);
}
[dir="rtl"] .textlink:hover svg {
  transform: translateX(-0.25rem) scaleX(-1);
}

/* --------------------------------------------------------------------------
   Media, parallax, glass
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--surface-muted);
}
.media img,
.media picture {
  width: 100%;
  height: 100%;
}
.media img {
  object-fit: cover;
}
.parallax {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.parallax__layer {
  position: absolute;
  inset-inline: 0;
  top: -10%;
  bottom: -10%;
  will-change: transform;
}
.parallax__layer img,
.parallax__layer picture,
.parallax__layer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.parallax.is-start .parallax__layer {
  top: 0;
  bottom: 0;
}
.parallax.is-raised .parallax__layer {
  top: -20%;
  bottom: 0;
}
.glass {
  border-radius: var(--corner-card);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--backdrop-glass));
  backdrop-filter: blur(var(--backdrop-glass));
}
.panel {
  border-radius: var(--corner-card);
  background: var(--surface-panel);
  -webkit-backdrop-filter: blur(var(--backdrop-panel));
  backdrop-filter: blur(var(--backdrop-panel));
}

/* --------------------------------------------------------------------------
   Hero carousel (MCA slides in the Aerra display type)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--raw-color-grey-700);
  color: var(--on-media);
}
@media (min-width: 1280px) {
  .hero {
    height: 94.625rem;
    max-height: 100svh;
  }
}
.hero__reveal {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
@media (hover: none), (max-width: 767px) {
  .hero__reveal {
    display: none;
  }
}
.carousel {
  position: absolute;
  inset: 0;
}
.carousel__track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
}
.carousel__track.is-animating {
  transition: transform 2500ms ease;
}
.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.carousel__slide .parallax {
  position: absolute;
  inset: 0;
}
/* 1920×800 banners: keep the over-scan small so the crop stays readable. */
.carousel__slide .parallax.is-raised .parallax__layer {
  top: -12%;
}
.carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--media-scrim);
  pointer-events: none;
}
.carousel__content {
  position: absolute;
  inset-inline: var(--gutter);
  bottom: 7.5rem;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.carousel__content.is-end {
  align-items: flex-end;
}
.carousel__heading {
  width: 100%;
  max-width: 50rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7.2vw, var(--font-size-title));
  font-weight: 700;
  line-height: var(--line-height-display);
  color: var(--on-media);
  text-wrap: balance;
}
.carousel__heading .word,
.page-hero__title .word {
  font: inherit;
}
.carousel__content.is-end .carousel__heading {
  text-align: end;
}
.carousel__content.is-end .split {
  justify-content: flex-end;
}
@media (min-width: 1280px) {
  .carousel__content {
    bottom: 9.5rem;
  }
  .carousel__heading {
    font-size: var(--font-size-display);
    max-width: 58rem;
  }
}
.carousel__controls {
  position: absolute;
  z-index: 3;
  inset-inline-end: var(--gutter);
  bottom: 2.5rem;
  display: flex;
  gap: 0.5rem;
}
.carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--corner-control);
  background: var(--action-secondary);
  color: var(--foreground);
  transition: transform var(--duration-fast) var(--ease-entrance), background var(--duration-fast) var(--ease-entrance);
}
.carousel__arrow:hover {
  transform: scale(1.05);
}
.carousel__arrow:active {
  transform: scale(0.97);
}
.carousel__arrow svg {
  width: 1.125rem;
  height: auto;
}
.carousel__arrow.is-prev svg {
  transform: scaleX(-1);
}
[dir="rtl"] .carousel__arrow.is-prev svg {
  transform: none;
}
[dir="rtl"] .carousel__arrow.is-next svg {
  transform: scaleX(-1);
}
.carousel__status {
  position: absolute;
  z-index: 3;
  inset-inline-start: var(--gutter);
  bottom: 3.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--on-media-muted);
  font-size: var(--font-size-small);
}
.hero__eyebrow {
  color: var(--on-media);
}
@media (max-width: 1279px) {
  .carousel__content {
    bottom: 7rem;
  }
}

/* --------------------------------------------------------------------------
   Home — services (three columns like the live MCA site)
   -------------------------------------------------------------------------- */
.section-heading {
  text-align: center;
  padding-inline: var(--gutter);
  margin-block-end: 2.5rem;
}
.section-heading__title {
  font-size: var(--font-size-title);
  font-weight: 300;
  line-height: var(--line-height-display);
  text-align: center;
}
.section-heading__title.split,
.section-heading .split {
  justify-content: center;
}
.section-heading::after {
  content: "";
  display: block;
  width: 5rem;
  height: 3px;
  margin: 1rem auto 0;
  background: var(--accent);
}
@media (min-width: 1280px) {
  .section-heading__title {
    font-size: var(--text-display);
  }
}
.services {
  padding-block: 6.25rem;
}
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--background);
}
.service-card__media {
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--corner-card);
  background: var(--surface-muted);
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-entrance);
}
.service-card:hover .service-card__media img {
  transform: scale(1.04);
}
.service-card__body {
  padding: 1.25rem 0 0;
}
.service-card__title {
  font-size: var(--font-size-lead);
  font-weight: 500;
  color: var(--accent);
  margin-block-end: 0.75rem;
}
.service-card__text {
  font-weight: 300;
  font-size: var(--font-size-body);
  line-height: var(--line-height-prose);
  color: var(--foreground-muted);
}

/* --------------------------------------------------------------------------
   Sectors — 3×3 glass grid with the travelling 3D mark behind
   -------------------------------------------------------------------------- */
.sectors {
  position: relative;
  overflow: hidden;
  padding-block: 6.25rem;
  background: var(--background);
}
.sectors__mark {
  pointer-events: none;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  z-index: 0;
  width: 100%;
  transform: translateX(-50%);
}
[dir="rtl"] .sectors__mark {
  transform: translateX(50%);
}
@media (min-width: 1280px) {
  .sectors__mark {
    width: 30rem;
  }
}
.sectors__mark canvas {
  width: 100%;
  height: 100%;
}
.sectors__head {
  position: relative;
  z-index: 1;
}
.block__title,
.related__head .block__title,
.form-band__title {
  text-align: center;
}
.sectors__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 2.5rem var(--gutter) 0;
}
@media (min-width: 540px) {
  .sectors__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .sectors__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 32rem;
  }
}
.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: 0.75rem 0.75rem 1.25rem;
  overflow: hidden;
}
@media (min-width: 1280px) {
  .sector-card {
    padding: 0.75rem 0.75rem 1.25rem;
  }
}
.sector-card__cell-empty {
  display: none;
}
@media (min-width: 1280px) {
  .sector-card__cell-empty {
    display: block;
  }
}
.sector-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  height: 72%;
  margin-block-end: 0.75rem;
  border-radius: var(--corner-button);
  overflow: hidden;
  background: var(--surface-muted);
}
.sector-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-entrance);
}
.sector-card:hover .sector-card__media img {
  transform: scale(1.04);
}
.sector-card__index {
  color: var(--foreground-muted);
  font-size: var(--font-size-small);
  margin-block-end: 0.35rem;
}
.sector-card__title {
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: var(--line-height-body);
}
.sector-card__subtitle {
  margin-block-start: 0.35rem;
  font-size: var(--text-body);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   Split wordmark (giant "mca")
   -------------------------------------------------------------------------- */
.wordmark-wrap {
  position: relative;
  overflow: hidden;
  height: 24rem;
  display: none;
}
@media (min-width: 1280px) {
  .wordmark-wrap {
    display: block;
    height: 42rem;
  }
}
.wordmark {
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  top: 1rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--font-size-wordmark);
  line-height: var(--line-height-flat);
  text-align: center;
  font-optical-sizing: auto;
}
[dir="rtl"] .wordmark {
  transform: translateX(50%);
}
.wordmark .letter {
  display: inline-block;
}
.wordmark .letter__inner {
  display: inline-block;
  background-image: var(--wordmark-fill-ground);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wordmark.on-media .letter__inner {
  background-image: var(--wordmark-fill);
}
.js .wordmark:not(.is-fonts-ready) {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   References logos strip
   -------------------------------------------------------------------------- */
.references {
  padding-block: 6.25rem;
  background: #f4f4f4;
}
.references__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
  margin: 3.5rem auto 0;
  max-width: 64rem;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) {
  .references__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem 2rem;
  }
}
.reference {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  background: transparent;
}
.reference img {
  width: 9.375rem;
  max-width: 160px;
  height: auto;
  max-height: 5rem;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Videos — lite embeds
   -------------------------------------------------------------------------- */
.videos {
  padding-block: 0 6.25rem;
}
.videos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-inline: var(--gutter);
}
@media (min-width: 540px) {
  .videos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.lite-yt {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--corner-card);
  overflow: hidden;
  background: var(--raw-color-black);
  cursor: pointer;
}
.lite-yt img,
.lite-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lite-yt img {
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-entrance);
}
.lite-yt:hover img {
  transform: scale(1.03);
}
@keyframes mca-ripple {
  0% { transform: scale(1); opacity: 0.7; }
  75% { transform: scale(1.75); opacity: 0.25; }
  100% { transform: scale(2); opacity: 0; }
}
.lite-yt__play {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 50%;
  background: var(--action-primary);
  color: var(--action-primary-foreground);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
[dir="rtl"] .lite-yt__play {
  transform: translate(50%, -50%);
}
.lite-yt__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--action-primary);
  animation: mca-ripple 2s linear infinite;
  pointer-events: none;
}
.lite-yt__play svg {
  width: 1.125rem;
  height: 1.125rem;
  margin-inline-start: 0.125rem;
}
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  padding: var(--gutter);
}
.video-lightbox.is-open {
  display: flex;
}
.video-lightbox iframe {
  width: min(100%, 96rem);
  height: min(90vh, 54vw);
  border: 0;
}
.video-lightbox__close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--action-secondary);
}

/* --------------------------------------------------------------------------
   Inner page hero (eyebrow + breadcrumb + display heading)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: 9.5rem 3.75rem;
  padding-inline: var(--gutter);
}
@media (max-width: 1279px) {
  .page-hero {
    padding-block: 7.5rem 3rem;
  }
}
.page-hero.on-media {
  color: var(--on-media);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.page-hero.on-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--media-scrim);
  pointer-events: none;
}
.page-hero.on-media > * {
  position: relative;
  z-index: 2;
}
.page-hero .parallax,
.page-hero.on-media > .parallax {
  position: absolute;
  z-index: 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-small);
  font-weight: 300;
  color: var(--foreground-muted);
}
.on-media .breadcrumb {
  color: var(--on-media-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumb li + li::before {
  content: "/";
  opacity: 0.5;
}
.breadcrumb a:hover {
  color: var(--foreground);
}
.on-media .breadcrumb a:hover {
  color: var(--on-media);
}
.breadcrumb [aria-current] {
  color: var(--foreground);
}
.on-media .breadcrumb [aria-current] {
  color: var(--on-media);
}
.page-hero__title {
  margin-block-start: 1.5rem;
  font-size: var(--font-size-title);
  line-height: var(--line-height-display);
  font-weight: 300;
  max-width: 60rem;
  text-wrap: balance;
}
.page-hero.on-media .page-hero__title {
  font-weight: 700;
}
@media (min-width: 1280px) {
  .page-hero__title {
    font-size: var(--font-size-display);
  }
}
.page-hero.is-compact {
  min-height: 0;
  padding-block: 8rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero.is-compact.on-media {
  min-height: 18rem;
  justify-content: center;
  padding-block: 8rem 2.75rem;
}
.page-hero.is-compact .page-hero__title {
  margin-block-start: 0.75rem;
  font-size: var(--font-size-title);
  font-weight: 500;
  max-width: 40rem;
}
.page-hero.is-compact .page-hero__rule {
  display: block;
  width: 5rem;
  height: 2px;
  margin-block-start: 1.25rem;
  background: var(--accent);
}
.page-hero__meta {
  margin-block-start: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-weight: 300;
  color: var(--on-media-muted);
}

/* --------------------------------------------------------------------------
   Prose blocks (corporate, service pages)
   -------------------------------------------------------------------------- */
.block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 3.75rem var(--gutter);
  border-block-start: 1px solid var(--border-subtle);
  scroll-margin-top: 6rem;
}
@media (min-width: 1280px) {
  .block {
    grid-template-columns: 35% 1fr;
    gap: 2rem;
    padding-block: 5rem;
  }
}
.block__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}
.block__title {
  font-size: var(--font-size-title);
  font-weight: 300;
  line-height: var(--line-height-display);
  max-width: none;
  text-align: center;
}
.block__title.split,
.block__head .split {
  justify-content: center;
}
@media (min-width: 1280px) {
  .block__title {
    font-size: var(--text-display);
  }
}
.block__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 50rem;
  font-size: var(--font-size-lead);
  font-weight: 300;
  line-height: var(--line-height-prose);
}
.block__body h3 {
  font-size: var(--font-size-lead);
  font-weight: 500;
  margin-block-start: 0.75rem;
}
.block__body h3:first-child {
  margin-block-start: 0;
}
.block__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 var(--gutter);
  border-radius: var(--corner-card);
  overflow: hidden;
}
@media (min-width: 1280px) {
  .block__media {
    aspect-ratio: 1360 / 560;
  }
}
.block__media.is-full {
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  height: 60vh;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--font-size-body);
  font-weight: 400;
}
.chips li,
.chip {
  display: inline-block;
  padding: 0.625rem 0.875rem;
  border-radius: var(--corner-control);
  background: var(--surface-muted);
  font-size: var(--font-size-body);
  font-weight: 400;
}
.chips li.glass {
  background: var(--surface-glass);
}
.step-strip {
  position: sticky;
  top: 6.25rem;
  z-index: 20;
  padding: 0.75rem var(--gutter);
  background: var(--background);
}
.step-strip__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 72rem;
  margin-inline: auto;
}
.step-strip__list::before {
  content: "";
  position: absolute;
  inset-inline: 1.5rem;
  top: 50%;
  height: 1px;
  background: var(--accent);
  z-index: 0;
}
.step-strip__item {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.step-strip__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  background: var(--surface-muted);
  box-shadow: inset 4px 0 0 var(--accent);
  font-weight: 400;
  text-align: center;
  transition: background var(--duration-normal) var(--ease-entrance), color var(--duration-normal) var(--ease-entrance);
}
.step-strip__item.is-active .step-strip__link,
.step-strip__link[aria-current="true"] {
  background: var(--action-primary);
  color: var(--action-primary-foreground);
  font-weight: 500;
}
.step-strip__highlight {
  display: none;
}
@media (max-width: 767px) {
  .step-strip__list {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .step-strip__list::before {
    display: none;
  }
}
.block.is-chips {
  padding-block-start: 0;
  border-block-start: 0;
}
.block.is-chips .chips {
  grid-column: 1 / -1;
}
.listing-infor {
  grid-column: 1 / -1;
  columns: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 540px) {
  .listing-infor {
    columns: 2;
  }
}
@media (min-width: 1024px) {
  .listing-infor {
    columns: 3;
  }
}
.listing-infor li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  break-inside: avoid;
  padding: 0.45rem 0.25rem 0.45rem 0;
  font-weight: 400;
}
.listing-infor svg {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--accent);
}
.on-media .chip,
.page-hero.on-media .chip {
  background: rgba(243, 243, 243, 0.16);
  color: var(--on-media);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.anchor-alias {
  position: absolute;
  inset-block-start: 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.block__cta {
  margin-block-start: 1rem;
}

/* --------------------------------------------------------------------------
   Works listings
   -------------------------------------------------------------------------- */
.works {
  padding-block-start: 2.5rem;
}
.works__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter) 2rem;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}
.view-toggle {
  display: flex;
  margin-inline-start: auto;
  border: 1px solid var(--border-subtle);
}
.view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--foreground-muted);
  transition: background var(--duration-fast) var(--ease-entrance), color var(--duration-fast) var(--ease-entrance);
}
.view-toggle__btn:hover {
  background: var(--action-secondary);
  color: var(--foreground);
}
.view-toggle__btn[aria-pressed="true"] {
  background: var(--foreground);
  color: var(--background);
}
.btn-circle-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  transition: border-color 300ms var(--ease-entrance), color 300ms var(--ease-entrance);
}
.btn-circle-arrow svg {
  width: 1rem;
  height: 1rem;
  max-width: none;
}
.deex-card:hover .btn-circle-arrow,
.deex-card__link:hover .btn-circle-arrow {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.filters__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.625rem 0.875rem;
  border: 1px solid #a71c23;
  border-radius: var(--corner-control);
  background: transparent;
  font-weight: 300;
  color: var(--foreground);
  transition: color var(--duration-normal) var(--ease-entrance);
}
.filters__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #a71c23;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-entrance);
}
.filters__btn:hover::before {
  transform: scaleX(0.5);
}
.filters__btn[aria-pressed="true"]::before {
  transform: scaleX(1);
}
.filters__btn:hover {
  color: var(--foreground);
}
.filters__btn[aria-pressed="true"] {
  color: var(--action-primary-foreground);
  font-weight: 500;
}
.filters__count {
  width: 100%;
  margin: 0;
  padding: 0 var(--gutter) 4rem;
  text-align: center;
  font-size: var(--font-size-body);
  font-weight: 300;
  color: var(--foreground-muted);
}
.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 0 var(--gutter) 6.25rem;
}
@media (min-width: 540px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .works-grid.is-dense {
    grid-template-columns: repeat(4, 1fr);
  }
}
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--corner-card);
  background: var(--surface-glass);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-entrance);
}
.work-card[hidden] {
  display: none;
}
.work-card:hover {
  transform: translateY(-2px);
}
.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-muted);
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-entrance);
}
.work-card:hover .work-card__media img {
  transform: scale(1.04);
}
.work-card__media.is-placeholder img {
  object-fit: contain;
  padding: 20%;
  opacity: 0.35;
  filter: grayscale(1);
}
.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
}
.work-card__title {
  font-size: var(--font-size-lead);
  font-weight: 400;
  line-height: var(--line-height-body);
}
.work-card__meta {
  color: var(--foreground-muted);
  font-size: var(--font-size-small);
  font-weight: 300;
}
.work-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.deex-card {
  background: transparent;
  overflow: visible;
}
.deex-card__link {
  position: relative;
  display: block;
  color: inherit;
}
.deex-card__marks {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
}
.deex-card__marks i {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-color: var(--foreground);
  border-style: solid;
  border-width: 0;
}
.deex-card__marks i:nth-child(1) { top: 0; inset-inline-start: 0; border-block-start-width: 1px; border-inline-start-width: 1px; }
.deex-card__marks i:nth-child(2) { top: 0; inset-inline-end: 0; border-block-start-width: 1px; border-inline-end-width: 1px; }
.deex-card__marks i:nth-child(3) { bottom: 0; inset-inline-start: 0; border-block-end-width: 1px; border-inline-start-width: 1px; }
.deex-card__marks i:nth-child(4) { bottom: 0; inset-inline-end: 0; border-block-end-width: 1px; border-inline-end-width: 1px; }
.deex-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 42%, transparent 78%);
  color: #fff;
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity var(--duration-normal) var(--ease-entrance), transform var(--duration-normal) var(--ease-entrance);
}
.deex-card:hover .deex-card__overlay,
.deex-card__link:focus-visible .deex-card__overlay {
  opacity: 1;
  transform: none;
}
.deex-card__title {
  font-size: var(--font-size-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.deex-card__meta {
  margin-block-start: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
}
.deex-card__caption {
  display: none;
  margin-block-start: 0.75rem;
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.works-grid[data-view="hover"] {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.works-grid[data-view="hover"] .deex-card__media {
  aspect-ratio: 16 / 9;
}
.works-grid[data-view="hover"] .deex-card__marks,
.works-grid[data-view="hover"] .btn-circle-arrow {
  display: none;
}
.works-grid[data-view="compact"] {
  grid-template-columns: 1fr;
  gap: 2rem 0.75rem;
}
@media (min-width: 540px) {
  .works-grid[data-view="compact"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .works-grid[data-view="compact"] {
    grid-template-columns: repeat(3, 1fr);
  }
}
.works-grid[data-view="compact"] .deex-card__overlay,
.works-grid[data-view="compact"] .deex-card__marks {
  display: none;
}
.works-grid[data-view="compact"] .deex-card__caption {
  display: block;
}
.works-grid[data-view="mixed"] .deex-card__overlay {
  opacity: 1;
  transform: none;
}
@media (min-width: 1024px) {
  .works-grid[data-view="mixed"] {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 1rem 0.75rem;
  }
  .works-grid[data-view="mixed"] > .deex-card:nth-child(8n + 4) {
    grid-column: span 2;
  }
  .works-grid[data-view="mixed"] > .deex-card:nth-child(8n + 4) .deex-card__media {
    aspect-ratio: 2.2 / 1;
  }
  .works-grid[data-view="mixed"] > .deex-card:nth-child(8n + 6) {
    grid-row: span 2;
  }
  .works-grid[data-view="mixed"] > .deex-card:nth-child(8n + 6) .deex-card__media {
    aspect-ratio: auto;
    height: 100%;
  }
}
.works-empty {
  padding: 3rem var(--gutter);
  color: var(--foreground-muted);
}

/* --------------------------------------------------------------------------
   Project detail
   -------------------------------------------------------------------------- */
.project-hero {
  min-height: 70vh;
}
.project-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3.75rem var(--gutter);
}
@media (min-width: 1280px) {
  .project-meta {
    grid-template-columns: 35% 1fr;
    gap: 2rem;
    padding-block: 5rem;
  }
}
.project-meta__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
.project-meta__side .chips {
  margin-block-start: 0.5rem;
}
.details {
  display: flex;
  flex-direction: column;
  max-width: 50rem;
}
.details__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-block: 1.25rem;
  border-block-start: 1px solid var(--border-subtle);
}
@media (min-width: 540px) {
  .details__row {
    grid-template-columns: 14rem 1fr;
    gap: 1.5rem;
  }
}
.details__row:last-child {
  border-block-end: 1px solid var(--border-subtle);
}
.details dt {
  font-weight: 500;
}
.details dd {
  font-weight: 300;
  font-size: var(--font-size-lead);
  line-height: var(--line-height-prose);
}
.details dd p + p {
  margin-block-start: 0.5rem;
}
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 0 var(--gutter) 3.75rem;
}
@media (min-width: 540px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery.has-lead > :first-child {
    grid-column: span 2;
  }
}
.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--corner-card);
  overflow: hidden;
  background: var(--surface-muted);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-entrance);
}
.gallery__item:hover img {
  transform: scale(1.03);
}
.project-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 0 var(--gutter) 6.25rem;
  align-items: stretch;
}
@media (min-width: 540px) {
  .project-nav {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }
}
.project-nav__back {
  align-self: center;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-small);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.project-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--foreground-muted);
  font-size: var(--font-size-small);
}
.project-nav__label > svg {
  width: 1.125rem;
  height: 0.55rem;
  max-width: none;
  flex-shrink: 0;
}
.project-nav__link .btn-circle-arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-color: currentColor;
  color: var(--foreground);
}
.project-nav__link.is-prev .btn-circle-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .project-nav__link.is-prev .btn-circle-arrow {
  transform: none;
}
[dir="rtl"] .project-nav__link.is-next .btn-circle-arrow {
  transform: scaleX(-1);
}
.project-nav__link.is-next .project-nav__label span,
.project-nav__link.is-prev .project-nav__label span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.project-nav__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 6.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--corner-card);
  border: 1px solid var(--border-subtle);
  background: var(--surface-muted);
  overflow: hidden;
  transition: background var(--duration-fast) var(--ease-entrance);
}
.project-nav__link:hover {
  background: var(--surface-glass);
}
.project-nav__link.is-next {
  text-align: end;
  align-items: flex-end;
}
.project-nav__title {
  font-size: var(--font-size-lead);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-inline: 0;
}
@media (min-width: 1280px) {
  .project-shell {
    grid-template-columns: minmax(0, 1fr) 18.5rem;
    gap: 2.5rem;
    align-items: start;
    padding-inline: var(--gutter);
    padding-block-end: 6.25rem;
  }
  .project-shell .project-meta,
  .project-shell .gallery,
  .project-shell .project-nav {
    padding-inline: 0;
  }
  .project-shell .project-nav {
    padding-block-end: 0;
  }
}
.related {
  padding-block: 0 6.25rem;
}
.related.is-sidebar {
  padding: 0 var(--gutter) 6.25rem;
}
@media (min-width: 1280px) {
  .related.is-sidebar {
    position: sticky;
    top: 7.5rem;
    padding: 3.75rem 0 0;
  }
}
.related.is-sidebar .related__head {
  align-items: flex-start;
  text-align: start;
  padding: 0 0 1.25rem;
}
.related.is-sidebar .related__title {
  font-size: var(--font-size-lead);
  font-weight: 500;
}
.related.is-sidebar .related__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.related.is-sidebar .deex-card__media {
  aspect-ratio: 16 / 9;
}
.related.is-sidebar .deex-card__overlay {
  opacity: 1;
  transform: none;
}
.related__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 var(--gutter) 2rem;
  text-align: center;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 3rem var(--gutter);
}
.lightbox.is-open {
  display: flex;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--corner-button);
}
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--corner-control);
  background: var(--action-secondary);
  color: var(--foreground);
}
.lightbox__btn svg {
  width: 1.125rem;
  height: auto;
}
.lightbox__close {
  top: 1rem;
  inset-inline-end: 1rem;
}
.lightbox__prev {
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__prev svg {
  transform: scaleX(-1);
}
.lightbox__next {
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
[dir="rtl"] .lightbox__prev svg {
  transform: none;
}
[dir="rtl"] .lightbox__next svg {
  transform: scaleX(-1);
}
.lightbox__count {
  position: absolute;
  bottom: 1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: var(--on-media-muted);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Contact section (full-bleed photo, pixel reveal, frosted panel)
   -------------------------------------------------------------------------- */
.contact-band {
  position: relative;
  overflow: hidden;
  min-height: 44rem;
  padding: 6.25rem var(--gutter);
  color: var(--on-media);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-band .parallax {
  z-index: 0;
}
.contact-band__reveal {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (hover: none), (max-width: 767px) {
  .contact-band__reveal {
    display: none;
  }
}
.contact-band > .eyebrow,
.contact-band__title,
.contact-band__panel {
  position: relative;
  z-index: 2;
}
.contact-band__title {
  margin-block-start: 1.5rem;
  max-width: 58rem;
  text-align: center;
  font-size: var(--font-size-title);
  line-height: var(--line-height-flat);
  color: var(--on-media);
}
.contact-band__title .strong {
  color: var(--on-media);
}
@media (min-width: 1280px) {
  .contact-band__title {
    font-size: var(--font-size-display);
  }
}
.contact-band__panel {
  margin-block-start: 3rem;
  width: 100%;
  padding: 1.5rem;
  color: var(--foreground);
}
@media (min-width: 1280px) {
  .contact-band__panel {
    margin-block-start: auto;
    padding: 1.875rem;
  }
}
.contact-pro {
  padding: 3.75rem var(--gutter) 6.25rem;
}
.contact-pro__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 72rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .contact-pro__pair {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 3.5rem;
  }
}
.contact-form-panel {
  padding: 1.75rem 1.5rem;
}
.contact-form .field {
  width: 100%;
}
.contact-pro .map.is-paired {
  max-width: 72rem;
  width: 100%;
  margin: 2.5rem auto 0;
  padding: 0;
  height: 22rem;
  aspect-ratio: auto;
}
.contact-info__title {
  margin-block-end: 1.5rem;
  font-size: var(--font-size-lead);
  font-weight: 500;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--border-subtle);
  text-align: start;
}
.contact-item:first-child {
  padding-block-start: 0;
}
.contact-item__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.contact-item__label svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  flex-shrink: 0;
}
.contact-item__title {
  font-weight: 500;
  font-size: var(--font-size-body);
}
.contact-item p,
.contact-item a {
  font-weight: 300;
  font-size: var(--font-size-lead);
  line-height: var(--line-height-body);
}
.contact-item a:hover {
  color: var(--accent);
}
.contact-item__block + .contact-item__block {
  margin-block-start: 0.75rem;
}
.map {
  position: relative;
  aspect-ratio: 16 / 7;
  margin: 0 var(--gutter) 6.25rem;
  border-radius: var(--corner-card);
  overflow: hidden;
  background: var(--surface-muted);
}
.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map__load {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 400;
}
.map__load svg {
  width: 1rem;
  height: auto;
}

/* --------------------------------------------------------------------------
   Forms — underlined fields on a frosted panel
   -------------------------------------------------------------------------- */
.form-band {
  position: relative;
  overflow: hidden;
  padding: 6.25rem var(--gutter);
  color: var(--on-media);
}
.form-band .parallax {
  z-index: 0;
}
.form-band__panel {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  color: var(--foreground);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1280px) {
  .form-band__panel {
    padding: 1.875rem;
    gap: 4rem;
  }
}
.form-band__title {
  font-size: var(--font-size-title);
  font-weight: 300;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 540px) {
  .form__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.875rem;
  }
}
@media (min-width: 1280px) {
  .form__row.is-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.field {
  display: flex;
  align-items: center;
  border-block-end: 1px solid var(--border-field);
  padding-block-end: 0.75rem;
}
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: var(--font-size-lead);
  line-height: var(--line-height-body);
  color: var(--foreground);
  padding: 0;
}
.field textarea {
  resize: vertical;
  min-height: 6rem;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--foreground);
  opacity: 1;
}
.field input:focus-visible::placeholder,
.field textarea:focus-visible::placeholder {
  color: var(--foreground-muted);
}
.field input[type="file"] {
  font-size: var(--font-size-body);
  font-weight: 300;
}
.field input[type="file"]::file-selector-button {
  font: inherit;
  margin-inline-end: 0.75rem;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: var(--corner-control);
  background: var(--surface-muted);
  color: var(--foreground);
  cursor: pointer;
}
.field.is-file {
  gap: 0.75rem;
}
.field.is-file .field__label {
  font-size: var(--font-size-lead);
  font-weight: 300;
  white-space: nowrap;
}
.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.form__status {
  font-weight: 300;
  color: var(--foreground-muted);
}
.form.is-sent .form__status {
  color: var(--accent);
  font-weight: 500;
}
.form.is-sent .cta {
  pointer-events: none;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Footer — red ground, Aerra typography, verbatim columns
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--surface-footer);
  color: var(--on-media);
  padding: 5rem var(--gutter) 2.5rem;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block-end: 3.75rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
@media (min-width: 540px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .footer__grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 2rem;
  }
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (max-width: 1279px) {
  .footer__brand {
    grid-column: 1 / -1;
  }
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  height: 3rem;
}
.footer__logo svg {
  height: 1.5rem;
  width: auto;
}
.footer__tagline {
  font-weight: 300;
  font-size: var(--font-size-lead);
  max-width: 20rem;
  opacity: 0.85;
}
.footer__col h2 {
  font-size: var(--font-size-body);
  font-weight: 500;
  margin-block-end: 1.25rem;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__col a {
  font-weight: 300;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-entrance);
}
.footer__col a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.footer__socials {
  display: flex;
  gap: 0.25rem;
  margin-inline-start: -0.5rem;
}
.footer__socials a:hover {
  background: rgba(255, 255, 255, 0.12);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-start: 1.5rem;
  font-size: var(--font-size-small);
  font-weight: 300;
  opacity: 0.9;
}
.footer__credit a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.back-to-top svg {
  width: 0.75rem;
  height: auto;
  transform: rotate(-90deg);
}

/* --------------------------------------------------------------------------
   Language chooser (root) & 404
   -------------------------------------------------------------------------- */
.chooser {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: var(--gutter);
  text-align: center;
}
.chooser__logo svg {
  height: 3rem;
  width: auto;
}
.chooser__title {
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--foreground-muted);
  letter-spacing: 0.02em;
}
.chooser__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: 0.5rem;
}
@media (min-width: 540px) {
  .chooser__list {
    grid-template-columns: repeat(4, minmax(9rem, 1fr));
  }
}
.chooser__list a {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem;
  border-radius: var(--corner-card);
  background: var(--surface-muted);
  transition: background var(--duration-fast) var(--ease-entrance), transform var(--duration-fast) var(--ease-entrance);
}
.chooser__list a:hover {
  background: var(--surface-glass);
  transform: translateY(-2px);
}
.chooser__list strong {
  font-size: var(--font-size-title);
  font-weight: 300;
}
.chooser__list span {
  color: var(--foreground-muted);
  font-size: var(--font-size-small);
}
.notfound {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 9.5rem var(--gutter) 6.25rem;
}
.notfound__code {
  font-size: var(--font-size-wordmark);
  font-family: var(--font-display);
  font-weight: 100;
  line-height: 1;
  color: var(--surface-muted);
  position: absolute;
  inset-inline-end: -0.05em;
  bottom: -0.1em;
  pointer-events: none;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Reduced motion — everything settles instantly
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .carousel__track.is-animating {
    transition: none;
  }
  .parallax__layer {
    transform: none !important;
  }
}

/* Print */
@media print {
  .nav,
  .preloader,
  .carousel__controls,
  .lightbox {
    display: none !important;
  }
}