/* Built from main.css imports — do not edit directly. Run scripts/build-css.sh */

/* ── ./tokens.css ── */
:root {
  --gt-teal-900: #0d3b45;
  --gt-teal-700: #1a5a66;
  --gt-teal-500: #2b96ae;
  --gt-teal-100: #c5e8ec;
  --gt-off-white: #f5f7f8;
  --gt-white: #ffffff;
  --gt-ink: #0a0a0a;
  --gt-muted: #8fa0a5;
  --gt-line: #e5e9ea;
  --gt-whatsapp: #25d366;
  --surface-canvas: var(--gt-white);
  --surface-alt: var(--gt-off-white);
  --surface-dark: var(--gt-teal-900);
  --surface-dark-alt: var(--gt-teal-700);
  --surface-selected: var(--gt-teal-100);
  --fg-primary: var(--gt-ink);
  --fg-secondary: var(--gt-teal-700);
  --fg-muted: var(--gt-muted);
  --fg-on-dark: var(--gt-white);
  --fg-on-dark-muted: #b8cdd2;
  --fg-accent: var(--gt-teal-500);
  --fg-accent-strong: var(--gt-teal-700);
  --border-default: var(--gt-line);
  --border-strong: var(--gt-teal-900);
  --border-focus: var(--gt-teal-500);
  --accent-hover: #238197;
  --accent-press: #1d6f82;
  --dark-hover: #164e58;
  --overlay-dark-border: rgba(255, 255, 255, 0.08);
  --overlay-dark-soft: rgba(255, 255, 255, 0.12);
  --overlay-accent-soft: rgba(43, 150, 174, 0.08);
  --overlay-grid-low: rgba(43, 150, 174, 0.06);
  --overlay-grid-high: rgba(43, 150, 174, 0.2);
  --surface-nav-shell: rgba(255, 255, 255, 0.28);
  --surface-nav-scroll: rgba(255, 255, 255, 0.72);
  --surface-nav-item: rgba(255, 255, 255, 0.88);
  --overlay-nav-line: rgba(255, 255, 255, 0.4);
  --overlay-nav-backdrop: rgba(10, 10, 10, 0.52);
  --font-sans: "Expo Arabic", "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "Expo Arabic", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-display: 64px;
  --lh-display: 72px;
  --fs-h1: 48px;
  --lh-h1: 56px;
  --fs-h2: 36px;
  --lh-h2: 44px;
  --fs-h3: 24px;
  --lh-h3: 32px;
  --fs-body: 16px;
  --lh-body: 26px;
  --fs-small: 14px;
  --lh-small: 22px;
  --fs-micro: 12px;
  --lh-micro: 18px;
  --fs-client-mobile: 20px;
  --lh-client-mobile: 28px;
  --fs-display-ar: 70px;
  --fs-h1-ar: 53px;
  --fs-h2-ar: 40px;
  --fs-h3-ar: 26px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --tr-tight: -0.02em;
  --tr-normal: 0;
  --tr-wide: 0.04em;
  --tr-eyebrow: 0.12em;
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;
  --sp-48: 192px;
  --sp-64: 256px;
  --sp-80: 320px;
  --sp-96: 384px;
  --sp-128: 512px;
  --sp-144: 576px;
  --sp-160: 640px;
  --sp-neg-1: -4px;
  --sp-neg-2: -8px;
  --sp-neg-3: -12px;
  --sp-neg-4: -16px;
  --sp-neg-6: -24px;
  --sp-neg-20: -80px;
  --sp-neg-32: -128px;
  --sp-neg-64: -256px;
  --container-max: 1200px;
  --section-pad-y: 96px;
  --section-pad-y-mobile: 48px;
  --gutter: 24px;
  --nav-height: 72px;
  --nav-capsule-height: 64px;
  --nav-capsule-max: 1040px;
  --nav-mega-max: 1120px;
  --nav-drawer-width: 92vw;
  --nav-drawer-max: 384px;
  --nav-drawer-perspective: 1200px;
  --backdrop-nav: blur(16px);
  --border-thin: 1px;
  --control-size: 48px;
  --icon-size: 24px;
  --drag-threshold: 6px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --shadow-none: none;
  --shadow-hover: 0 4px 16px rgba(13, 59, 69, 0.08);
  --shadow-card: 0 1px 0 rgba(13, 59, 69, 0.04);
  --shadow-focus: 0 0 0 4px rgba(43, 150, 174, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --t-reveal: 640ms;
  --t-scroll: 1600ms;
  --t-halo: 3200ms;
  --t-radar: 6400ms;
  --t-orbit: 9600ms;
  --t-marquee: 25600ms;
  --rotate-left: -1deg;
  --rotate-none: 0deg;
  --rotate-right: 1deg;
  --rotate-drawer: -8deg;
  --rotate-drawer-rtl: 8deg;
  --z-base: 0;
  --z-sticky: 10;
  --z-dock: 50;
  --z-nav: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ── ./base.css ── */
@font-face {
  font-family: "Expo Arabic";
  src: url("../assets/fonts/expo.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400 800;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-height) + var(--sp-6));
}

body {
  margin: var(--sp-0);
  overflow-x: hidden;
  color: var(--fg-primary);
  background: var(--surface-canvas);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-nav-open {
  overflow: hidden;
}

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

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

a:hover {
  text-decoration: none;
}

p,
h1,
h2,
h3,
ul,
ol,
figure {
  margin: var(--sp-0);
}

ul,
ol {
  padding: var(--sp-0);
  list-style: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
}

:focus-visible {
  outline: var(--border-thin) solid var(--border-focus);
  outline-offset: var(--sp-1);
  box-shadow: var(--shadow-focus);
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  transform: translateY(var(--sp-neg-20));
}

.skip-link:focus {
  transform: translateY(var(--sp-0));
}

.eyebrow {
  color: var(--fg-accent-strong);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.status-dot {
  display: inline-block;
  width: var(--sp-2);
  height: var(--sp-2);
  margin-inline-end: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--gt-teal-100);
  box-shadow: var(--shadow-focus);
  animation: status-pulse var(--t-slow) var(--ease-out) infinite alternate;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border-block-end: var(--border-thin) solid currentColor;
  font-weight: var(--fw-semibold);
}

@keyframes status-pulse {
  to { opacity: 0.45; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}

/* ── ./layout.css ── */
.container {
  width: min(calc(100% - var(--gutter) - var(--gutter)), var(--container-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-pad-y-mobile);
}

@media (min-width: 768px) {
  .section { padding-block: var(--section-pad-y); }
}

/* ── ./components/buttons.css ── */
.button {
  display: inline-flex;
  min-height: var(--control-size);
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border: var(--border-thin) solid transparent;
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--gt-teal-100);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.button:hover {
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
}

.button--light {
  color: var(--fg-primary);
  background: var(--surface-canvas);
}

.button--light:hover {
  color: var(--fg-on-dark);
  background: var(--fg-accent);
}

.button--compact {
  min-height: var(--sp-10);
  padding: var(--sp-2) var(--sp-4);
}

.button--large {
  min-height: var(--sp-16);
  padding-inline: var(--sp-8);
  font-size: var(--fs-body);
}

.button__arrow {
  display: grid;
  width: var(--sp-8);
  height: var(--sp-8);
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  transition: transform var(--t-base) var(--ease-out);
}

.button:hover .button__arrow {
  transform: rotate(45deg);
}

.button--light:hover .button__arrow {
  color: var(--fg-primary);
  background: var(--surface-canvas);
}

/* ── ./components/navbar.css ── */
.scroll-progress {
  position: fixed;
  inset-block-start: var(--sp-0);
  inset-inline: var(--sp-0);
  z-index: var(--z-modal);
  height: var(--sp-1);
  pointer-events: none;
}

.scroll-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gt-teal-100);
  transform: scaleX(0);
  transform-origin: left;
}

[dir="rtl"] .scroll-progress__bar { transform-origin: right; }

.site-header {
  position: fixed;
  inset-block-start: var(--sp-3);
  inset-inline: var(--sp-0);
  z-index: var(--z-nav);
  pointer-events: none;
}

.navbar {
  display: flex;
  min-height: var(--nav-capsule-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-inline: var(--sp-3);
  border: var(--border-thin) solid var(--overlay-nav-line);
  border-radius: var(--r-pill);
  background: var(--surface-canvas);
  box-shadow: var(--shadow-card);
  pointer-events: auto;
  transition: width var(--t-slow) var(--ease-out), padding var(--t-slow) var(--ease-out), background-color var(--t-slow) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.site-header.is-scrolled .navbar {
  transform: translateY(var(--sp-neg-1));
  box-shadow: var(--shadow-hover);
}

.navbar__brand {
  position: relative;
  display: flex;
  width: var(--sp-20);
  flex: none;
  align-items: center;
}

.navbar__logo { display: none; width: var(--sp-32); height: auto; transition: opacity var(--t-base) var(--ease-out); }
.navbar__logo--light { position: absolute; inset: var(--sp-0); opacity: 0; }
.navbar__mark { display: block; width: var(--sp-20); height: auto; object-fit: contain; }

.navbar__nav {
  position: fixed;
  inset-block: var(--sp-0);
  inset-inline-start: auto;
  inset-inline-end: var(--sp-0);
  z-index: var(--z-modal);
  display: grid;
  width: min(var(--nav-drawer-width), var(--nav-drawer-max));
  height: 100dvh;
  grid-template-rows: auto minmax(var(--sp-0), 1fr) auto;
  overflow: hidden;
  padding: var(--sp-5);
  border-start-start-radius: var(--r-xl);
  border-end-start-radius: var(--r-xl);
  background: var(--surface-canvas);
  box-shadow: var(--shadow-hover);
  visibility: hidden;
  pointer-events: none;
  transform: perspective(var(--nav-drawer-perspective)) translateX(100%) rotateY(var(--rotate-drawer));
  transform-origin: right center;
  transition: transform var(--t-reveal) var(--ease-out), visibility var(--t-slow) var(--ease-out);
}

.navbar__nav[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
  transform: perspective(var(--nav-drawer-perspective)) translateX(var(--sp-0)) rotateY(var(--rotate-none));
}

[dir="rtl"] .navbar__nav {
  transform: perspective(var(--nav-drawer-perspective)) translateX(-100%) rotateY(var(--rotate-drawer-rtl));
  transform-origin: left center;
}

[dir="rtl"] .navbar__nav[data-open="true"] {
  transform: perspective(var(--nav-drawer-perspective)) translateX(var(--sp-0)) rotateY(var(--rotate-none));
}

.navbar__backdrop {
  position: fixed;
  inset: var(--sp-0);
  z-index: var(--z-sticky);
  border: var(--sp-0);
  background: var(--overlay-nav-backdrop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow) var(--ease-out);
}

.navbar__backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.navbar__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  border-block-end: var(--border-thin) solid var(--border-default);
}

.navbar__drawer-brand {
  display: block;
  width: var(--sp-32);
}

.navbar__drawer-brand img {
  width: 100%;
  height: auto;
}

.navbar__drawer-close {
  display: inline-flex;
  min-height: var(--sp-10);
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-alt);
  font: inherit;
  cursor: pointer;
}

.navbar__drawer-close span:last-child {
  display: grid;
  width: var(--sp-6);
  height: var(--sp-6);
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.navbar__list {
  display: flex;
  width: 100%;
  min-height: var(--sp-0);
  overflow-y: auto;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.navbar__list::-webkit-scrollbar { display: none; }
.navbar__item { position: relative; }

.navbar__nav[data-open="false"] .navbar__item,
.navbar__nav[data-open="false"] .navbar__drawer-contact {
  opacity: 0;
  transform: translateX(var(--sp-4));
}

.navbar__item,
.navbar__drawer-contact {
  opacity: 1;
  transform: translateX(var(--sp-0));
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}

.navbar__trigger,
.navbar__link {
  display: flex;
  width: 100%;
  min-height: var(--control-size);
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--sp-0);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: transparent;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: start;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}

.navbar__trigger:hover,
.navbar__link:hover,
.navbar__trigger[aria-expanded="true"] { color: var(--fg-on-dark); background: var(--surface-dark-alt); }

.navbar__chevron {
  width: var(--sp-2);
  height: var(--sp-2);
  border-inline-end: var(--border-thin) solid currentColor;
  border-block-end: var(--border-thin) solid currentColor;
  transform: rotate(45deg) translateY(var(--sp-neg-1));
  transition: transform var(--t-base) var(--ease-out);
}

.navbar__trigger[aria-expanded="true"] .navbar__chevron { transform: rotate(225deg); }

.nav-dropdown {
  display: grid;
  max-height: var(--sp-0);
  overflow: hidden;
  gap: var(--sp-1);
  padding-inline: var(--sp-3);
  opacity: 0;
  visibility: hidden;
  transition: max-height var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out), padding var(--t-slow) var(--ease-out), visibility var(--t-base) var(--ease-out);
}

.navbar__item.is-open > .nav-dropdown {
  max-height: var(--sp-160);
  padding-block: var(--sp-2) var(--sp-4);
  opacity: 1;
  visibility: visible;
}

.nav-dropdown > a {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

.nav-dropdown > a:hover { color: var(--fg-primary); background: var(--surface-alt); }
.nav-dropdown__group { display: grid; gap: var(--sp-2); }
.nav-dropdown__label { color: var(--fg-accent); font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; }
.nav-dropdown__group { padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface-alt); }

.nav-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  color: var(--fg-primary);
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.nav-card__icon {
  display: grid;
  width: var(--sp-8);
  height: var(--sp-8);
  flex: none;
  place-items: center;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--gt-teal-100);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.nav-card > span:last-child { display: grid; }
.nav-card strong { font-size: var(--fs-small); transition: color var(--t-base) var(--ease-out); }
.nav-card small { display: none; color: var(--fg-muted); font-size: var(--fs-micro); line-height: var(--lh-micro); }

.navbar__drawer-contact {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.navbar__drawer-contact a { color: var(--fg-on-dark); }
.navbar__drawer-contact p { color: var(--fg-on-dark-muted); font-size: var(--fs-micro); line-height: var(--lh-micro); }
.navbar__drawer-contact .navbar__drawer-eyebrow { color: var(--gt-teal-100); font-family: var(--font-mono); text-transform: uppercase; }
.navbar__drawer-contact .navbar__drawer-phone { font-size: var(--fs-body); }
.navbar__drawer-contact > div { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-block-start: var(--sp-1); }
.navbar__drawer-contact > div a { border-block-end: var(--border-thin) solid var(--overlay-dark-soft); font-size: var(--fs-micro); }

.navbar__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-2);
}

.navbar__quick-action {
  display: inline-flex;
  width: var(--sp-10);
  height: var(--sp-10);
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-0);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-alt);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.navbar__quick-action--whatsapp {
  border-color: var(--gt-whatsapp);
  background: var(--surface-canvas);
}

.navbar__quick-action:hover {
  background: var(--surface-selected);
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.navbar__quick-icon {
  display: grid;
  width: var(--sp-6);
  height: var(--sp-6);
  flex: none;
  place-items: center;
}

.navbar__quick-icon img {
  width: var(--sp-5);
  height: var(--sp-5);
}

.navbar__quick-label { display: none; }

.navbar__toggle {
  display: inline-flex;
  min-width: var(--sp-20);
  height: var(--control-size);
  align-items: center;
  justify-content: center;
  padding-inline: var(--sp-4);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-alt);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}

.navbar__toggle[aria-expanded="true"] { color: var(--fg-on-dark); background: var(--surface-dark-alt); }
.navbar__toggle-label { line-height: var(--lh-small); }

@media (min-width: 1024px) {
  .navbar {
    display: grid;
    width: min(calc(100% - var(--gutter) - var(--gutter)), var(--container-max));
    grid-template-columns: var(--sp-48) minmax(0, 1fr) var(--sp-48);
    padding-inline: var(--sp-0);
    border-color: transparent;
    border-radius: var(--sp-0);
    background: transparent;
    box-shadow: none;
  }

  .site-header.is-scrolled .navbar {
    width: min(calc(100% - var(--gutter) - var(--gutter)), var(--nav-capsule-max));
    grid-template-columns: var(--sp-48) minmax(0, 1fr) var(--sp-48);
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-color: var(--overlay-nav-line);
    border-radius: var(--r-pill);
    background: var(--surface-nav-scroll);
    box-shadow: var(--shadow-hover);
    backdrop-filter: var(--backdrop-nav);
  }

  .navbar__brand { width: var(--sp-40); }
  .navbar__logo { display: block; }
  .navbar__logo--dark { opacity: 0; }
  .navbar__logo--light { opacity: 1; }
  .navbar__mark { display: none; }
  .site-header.is-scrolled .navbar__brand { width: var(--sp-20); }
  .site-header.is-scrolled .navbar__logo { display: none; opacity: 0; }
  .site-header.is-scrolled .navbar__mark { display: block; }

  .navbar__nav {
    position: static;
    justify-self: center;
    display: block;
    width: auto;
    height: auto;
    grid-template-rows: none;
    overflow: visible;
    padding: var(--sp-1);
    border: var(--border-thin) solid var(--overlay-nav-line);
    border-radius: var(--r-pill);
    background: var(--surface-nav-shell);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--backdrop-nav);
    transition: background-color var(--t-slow) var(--ease-out), border-color var(--t-slow) var(--ease-out);
  }

  .navbar__drawer-header,
  .navbar__drawer-contact,
  .navbar__backdrop { display: none; }

  .site-header.is-scrolled .navbar__nav { border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; }
  .navbar__list {
    width: auto;
    min-height: auto;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
    padding-block: var(--sp-0);
  }

  .navbar__nav[data-open="false"] .navbar__item {
    opacity: 1;
    transform: none;
  }

  .navbar__trigger,
  .navbar__link {
    width: auto;
    min-height: var(--sp-10);
    justify-content: center;
    padding: var(--sp-2) var(--sp-4);
    color: var(--fg-primary);
    background: var(--surface-nav-item);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
  }

  .navbar__trigger:hover,
  .navbar__link:hover,
  .navbar__item:hover > .navbar__trigger,
  .navbar__trigger[aria-expanded="true"] {
    color: var(--fg-on-dark);
    background: var(--surface-dark-alt);
  }

  .navbar__item:hover > .navbar__trigger .navbar__chevron,
  .navbar__trigger[aria-expanded="true"] .navbar__chevron { transform: rotate(225deg); }

  .nav-dropdown {
    position: absolute;
    inset-block-start: calc(100% + var(--sp-3));
    inset-inline-start: var(--sp-0);
    width: var(--sp-64);
    max-height: none;
    overflow: visible;
    gap: var(--sp-1);
    padding: var(--sp-2);
    border: var(--border-thin) solid var(--border-default);
    border-radius: var(--r-xl);
    background: var(--surface-canvas);
    box-shadow: var(--shadow-hover);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(var(--sp-neg-3)) scale(0.98);
    transform-origin: top;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility var(--t-base) var(--ease-out);
  }

  .nav-dropdown::before { position: absolute; inset-block-start: var(--sp-neg-3); inset-inline: var(--sp-0); height: var(--sp-3); content: ""; }
  .nav-dropdown--end { inset-inline-start: auto; inset-inline-end: var(--sp-0); }

  .navbar__item:hover > .nav-dropdown,
  .navbar__item:focus-within > .nav-dropdown,
  .navbar__item.is-open > .nav-dropdown {
    padding: var(--sp-2);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(var(--sp-0)) scale(1);
  }

  .nav-dropdown > a { color: var(--fg-muted); }
  .nav-dropdown > a:hover { color: var(--fg-primary); background: var(--surface-alt); }

  .nav-dropdown--mega {
    position: fixed;
    inset-block-start: calc(var(--nav-height) + var(--sp-4));
    inset-inline-start: 50%;
    display: grid;
    width: min(calc(100vw - var(--gutter) - var(--gutter)), var(--nav-mega-max));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-3);
    transform: translate(-50%, var(--sp-neg-3)) scale(0.98);
  }

  .navbar__item:hover > .nav-dropdown--mega,
  .navbar__item:focus-within > .nav-dropdown--mega,
  .navbar__item.is-open > .nav-dropdown--mega { padding: var(--sp-3); transform: translate(-50%, var(--sp-0)) scale(1); }

  .nav-dropdown__group { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-alt); }
  .nav-dropdown__group--wide { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-dropdown__group--wide .nav-dropdown__label { grid-column: 1 / -1; }
  .nav-dropdown__label { color: var(--fg-muted); }
  .nav-card { color: var(--fg-primary); }
  .nav-card::after {
    display: grid;
    width: var(--sp-8);
    aspect-ratio: 1;
    flex: none;
    margin-inline-start: auto;
    place-items: center;
    border: var(--border-thin) solid var(--border-default);
    border-radius: var(--r-pill);
    color: var(--fg-accent);
    content: "↗";
    font-size: var(--fs-small);
    opacity: 0;
    transform: translateX(var(--sp-neg-2)) scale(0.8);
    transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  }
  .nav-card:hover,
  .nav-card:focus-visible {
    color: var(--fg-primary);
    background: var(--surface-canvas);
    box-shadow: var(--shadow-card);
    transform: translateX(var(--sp-1));
  }
  .nav-card:hover strong,
  .nav-card:focus-visible strong { color: var(--fg-accent-strong); }
  .nav-card:hover .nav-card__icon,
  .nav-card:focus-visible .nav-card__icon {
    border-color: var(--fg-accent);
    color: var(--fg-on-dark);
    background: var(--surface-dark);
    transform: scale(1.05);
  }
  .nav-card:hover::after,
  .nav-card:focus-visible::after {
    color: var(--fg-on-dark);
    background: var(--surface-dark);
    opacity: 1;
    transform: translateX(var(--sp-0)) scale(1);
  }
  .nav-card__icon { border-color: var(--border-default); color: var(--fg-accent); }
  .nav-card__icon { width: var(--sp-10); height: var(--sp-10); }
  .nav-card small { display: block; color: var(--fg-muted); }
  .navbar__actions { justify-content: flex-end; }
  .navbar__quick-action {
    width: auto;
    min-height: var(--sp-10);
    padding-inline: var(--sp-2);
  }
  .navbar__quick-label { display: inline; }
  .navbar__toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar__nav,
  [dir="rtl"] .navbar__nav {
    transform: translateX(100%);
    transition-duration: var(--t-fast);
  }

  [dir="rtl"] .navbar__nav { transform: translateX(-100%); }
  .navbar__nav[data-open="true"],
  [dir="rtl"] .navbar__nav[data-open="true"] { transform: translateX(var(--sp-0)); }
  .navbar__item,
  .navbar__drawer-contact { transition-duration: var(--t-fast); }
  .nav-card:hover,
  .nav-card:focus-visible,
  .nav-card:hover .nav-card__icon,
  .nav-card:focus-visible .nav-card__icon,
  .nav-card:hover::after,
  .nav-card:focus-visible::after,
  .navbar__quick-action:hover { transform: none; }
}

/* Mega menu with the full dynamic services tree: cap the height, scroll inside,
   and keep the cards compact so every group stays easy to scan. */
@media (min-width: 1024px) {
  .nav-dropdown--mega {
    max-height: calc(100vh - var(--nav-height) - var(--sp-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    align-content: start;
  }

  .nav-dropdown--mega .nav-dropdown__group { gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); align-content: start; }
  .nav-dropdown--mega .nav-card { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .nav-dropdown--mega .nav-card .nav-card__icon { width: var(--sp-8); height: var(--sp-8); }
  .nav-dropdown--mega .nav-card small { display: none; }
}

/* ── ./components/hero.css ── */
.hero {
  background: var(--surface-canvas);
}

.hero__media {
  position: relative;
  min-height: 82svh;
  overflow: hidden;
  border-end-start-radius: var(--r-xl);
  border-end-end-radius: var(--r-xl);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.hero__image {
  position: absolute;
  inset: var(--sp-0);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  animation: hero-drift var(--t-marquee) var(--ease-standard) infinite alternate;
}

.hero__shade {
  position: absolute;
  inset: var(--sp-0);
  background:
    linear-gradient(0deg, rgba(10, 15, 18, 0.68) 0%, rgba(10, 15, 18, 0.32) 32%, transparent 58%),
    linear-gradient(90deg, rgba(13, 59, 69, 0.12), transparent 65%);
}

@keyframes hero-drift {
  to { transform: scale(1.045) translateX(var(--sp-neg-1)); }
}

@media (min-width: 768px) {
  .hero__media { min-height: 88svh; }
}

/* Hero banner slider (dashboard-managed banners with overlay content) */
.hero { position: relative; display: grid; }
.hero > .hero__media { grid-area: 1 / 1; }
.hero__media { transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow) var(--ease-out); }
.hero__media:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }

.hero[data-hero-slider] { touch-action: pan-y; cursor: grab; user-select: none; }
.hero[data-hero-slider]:active { cursor: grabbing; }
.hero[data-hero-slider] .hero__image { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

.hero__content {
  position: absolute;
  z-index: 2;
  inset-inline: var(--sp-0);
  bottom: clamp(3rem, 12vh, 7rem);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

.hero__banner-title {
  max-width: 22ch;
  color: var(--fg-on-dark);
  font-family: var(--font-display, inherit);
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.hero__banner-subtitle {
  max-width: 55ch;
  color: var(--fg-on-dark);
  opacity: 0.85;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.hero__banner-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }

.hero__dots {
  position: absolute;
  z-index: 3;
  inset-inline: var(--sp-0);
  bottom: var(--sp-5);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
}

.hero__dot {
  /* Literal px (not var()) on purpose: this value is animated by the
     transition below, and unregistered custom properties can't be
     reliably interpolated as a length across browsers. */
  width: 8px;
  height: 8px;
  padding: 0;
  border: var(--border-thin) solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 rgba(43, 150, 174, 0);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out);
}

.hero__dot:hover { background: rgba(255, 255, 255, 0.7); transform: scale(1.15); }

.hero__dot.is-active {
  width: 24px;
  border-color: var(--fg-accent);
  background: var(--fg-accent);
  box-shadow: 0 0 var(--sp-2) var(--sp-0) var(--fg-accent), 0 0 var(--sp-4) rgba(43, 150, 174, 0.55);
  transform: scale(1);
}

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

/* ── ./components/clients.css ── */
.client-trust {
  background: var(--surface-alt);
}

.client-trust.section {
  padding-block: var(--sp-8);
}

.client-trust__intro {
  display: grid;
  gap: var(--sp-5);
  align-items: end;
}

.client-trust__title {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-client-mobile);
  line-height: var(--lh-client-mobile);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.client-trust__line {
  display: block;
  white-space: nowrap;
}

.client-trust__line em {
  color: var(--fg-accent-strong);
  font-style: italic;
}

.client-trust__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.client-trust__action {
  display: inline-flex;
  min-height: var(--sp-10);
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-1);
  padding-inline: var(--sp-1) var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.client-trust__action:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.client-trust__action--call:hover { border-color: var(--surface-dark); }
.client-trust__action--whatsapp { border-color: var(--gt-whatsapp); }

.client-trust__icon {
  display: grid;
  width: var(--sp-8);
  height: var(--sp-8);
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
}

.client-trust__icon img {
  width: var(--sp-5);
  height: var(--sp-5);
}

.client-slider {
  margin-block-start: var(--sp-6);
}

.client-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-3);
}

.client-slider__header > p {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.client-slider__controls {
  display: flex;
  gap: var(--sp-2);
}

.client-slider__controls button {
  display: grid;
  width: var(--sp-8);
  height: var(--sp-8);
  place-items: center;
  padding: var(--sp-0);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}

.client-slider__controls button:hover {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.client-slider__controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.client-slider__viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.client-slider__viewport.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.client-slider__viewport::-webkit-scrollbar { display: none; }

.client-slider__track {
  display: flex;
  gap: var(--sp-2);
  padding-inline-end: var(--sp-8);
}

.client-trust__tile {
  display: grid;
  min-height: var(--sp-16);
  flex: 0 0 calc((100vw - var(--gutter) - var(--gutter) - var(--sp-6)) / 4);
  place-items: center;
  padding: var(--sp-2);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--surface-canvas);
  scroll-snap-align: start;
  text-align: center;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.client-trust__tile:hover {
  border-color: var(--fg-accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.client-trust__tile > img {
  width: 100%;
  max-width: var(--sp-40);
  height: var(--sp-16);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: transform var(--t-base) var(--ease-out);
}

.client-trust__tile:hover > img { transform: scale(1.06); }

@media (min-width: 768px) {
  .client-trust.section { padding-block: var(--sp-12); }
  .client-trust__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .client-trust__actions { justify-content: flex-start; }
  .client-trust__action { font-size: var(--fs-small); }
  .client-trust__tile { min-height: var(--sp-20); flex-basis: calc((100% - var(--sp-6)) / 4); }
}

@media (min-width: 1024px) {
  .client-trust__intro { grid-template-columns: minmax(0, 1fr) auto; }
  .client-trust__actions { max-width: var(--sp-80); justify-content: flex-end; }
  .client-trust__tile { min-height: var(--sp-24); flex-basis: calc((100% - var(--sp-2) - var(--sp-2) - var(--sp-2) - var(--sp-2) - var(--sp-2) - var(--sp-2)) / 6); }
  .client-trust__tile > img { max-width: var(--sp-48); height: var(--sp-20); }
}

@media (prefers-reduced-motion: reduce) {
  .client-trust__tile,
  .client-trust__tile > img { transition-duration: var(--t-fast); }
  .client-trust__tile:hover,
  .client-trust__tile:hover > img { transform: none; }
}

@media (min-width: 1440px) {
  .client-trust__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
}

/* ── ./components/services.css ── */
.services {
  background: var(--surface-alt);
  scroll-margin-block-start: var(--sp-32);
}

.services.section {
  padding-block: var(--sp-12);
}

.services__intro {
  display: grid;
  justify-items: start;
  margin-block-end: var(--sp-8);
  text-align: start;
}

.services__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.service-tabs {
  display: flex;
  overflow-x: auto;
  justify-content: flex-start;
  gap: var(--sp-1);
  padding-block-end: var(--sp-6);
  scrollbar-width: none;
}

.service-tabs::-webkit-scrollbar { display: none; }

.service-tabs__tab {
  min-height: var(--sp-10);
  flex: none;
  padding-inline: var(--sp-3);
  border: var(--border-thin) solid transparent;
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  font-size: var(--fs-micro);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.service-tabs__tab:hover:not(.is-active) {
  border-color: var(--fg-accent);
  color: var(--fg-accent-strong);
  background: var(--surface-selected);
  transform: translateY(var(--sp-neg-1));
}
.service-tabs__tab.is-active { color: var(--fg-on-dark); background: var(--surface-dark); }

.service-panels {
  overflow: hidden;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-canvas);
}

.service-panel {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-6);
  animation: service-panel-enter var(--t-reveal) var(--ease-out) both;
}

.service-panel__principle {
  display: none;
  align-content: space-between;
  gap: var(--sp-8);
}

.service-panel__principle blockquote {
  margin: var(--sp-0);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
}

.service-panel__principle blockquote span { color: var(--fg-accent); }
.service-panel__principle > p { display: grid; }
.service-panel__principle strong { font-size: var(--fs-small); }
.service-panel__principle small { color: var(--fg-muted); font-size: var(--fs-micro); }

.service-panel__offerings {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
}

.service-panel__offerings > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: var(--border-thin) solid transparent;
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.service-panel__offerings > div:hover {
  border-color: var(--border-default);
  background: var(--surface-alt);
  transform: translateX(var(--sp-1));
}

.service-panel__offerings h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  transition: color var(--t-base) var(--ease-out);
}

.service-panel__offerings h3::after {
  display: grid;
  width: var(--sp-8);
  aspect-ratio: 1;
  flex: none;
  place-items: center;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-accent);
  content: "↗";
  font-size: var(--fs-small);
  opacity: 0;
  transform: translateX(var(--sp-neg-2)) scale(0.8);
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.service-panel__offerings > div:hover h3 { color: var(--fg-accent-strong); }
.service-panel__offerings > div:hover h3::after {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  opacity: 1;
  transform: translateX(var(--sp-0)) scale(1);
}

.service-panel__offerings p {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.service-panel__visual {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.service-panel__preview {
  position: relative;
  min-height: var(--sp-64);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-alt);
}

.service-panel__preview > img {
  width: 100%;
  height: var(--sp-64);
  object-fit: cover;
  object-position: center 32%;
  transition: transform var(--t-slow) var(--ease-out);
}

.service-panel__preview:hover > img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .service-panel__offerings > div:hover,
  .service-panel__offerings > div:hover h3::after,
  .service-panel__preview:hover > img { transform: none; }
}

.service-panel__visual > p {
  color: var(--fg-muted);
  font-size: var(--fs-micro);
}

.service-panel__visual > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.service-panel__visual > ul li {
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.service-panel__preview--ux {
  display: grid;
  place-items: center;
  background: var(--gt-teal-100);
}

.service-panel__preview--ux > div {
  position: relative;
  display: grid;
  width: var(--sp-40);
  min-height: var(--sp-48);
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4) var(--sp-4);
  border: var(--sp-2) solid var(--surface-dark);
  border-radius: calc(var(--r-xl) + var(--r-xl));
  background: var(--surface-canvas);
  box-shadow: var(--shadow-hover);
  transform: rotate(5deg);
}

.service-panel__preview--ux i {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: 50%;
  width: var(--sp-12);
  height: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-dark);
  transform: translateX(-50%);
}

.service-panel__preview--ux p { color: var(--fg-muted); font-size: var(--fs-micro); }
.service-panel__preview--ux strong { font-size: var(--fs-body); }
.service-panel__preview--ux span { display: block; height: var(--sp-2); border-radius: var(--r-pill); background: var(--border-default); }
.service-panel__preview--ux b { justify-self: start; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); color: var(--fg-on-dark); background: var(--surface-dark); font-weight: var(--fw-regular); }

.service-panel__preview--brand {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--surface-dark);
}

.service-panel__preview--brand img { position: absolute; inset: 50%; width: var(--sp-24); height: auto; object-fit: contain; transform: translate(-50%, -65%); }
.service-panel__preview--brand span { height: var(--sp-16); border-radius: var(--r-lg); background: var(--surface-dark-alt); }
.service-panel__preview--brand span:nth-of-type(2) { background: var(--fg-accent); }
.service-panel__preview--brand span:nth-of-type(3) { background: var(--gt-teal-100); }

.service-panel__preview--growth {
  display: flex;
  align-items: end;
  gap: var(--sp-3);
  padding: var(--sp-6);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.service-panel__preview--growth > div { position: absolute; inset-block-start: var(--sp-5); inset-inline: var(--sp-5); display: flex; align-items: end; justify-content: space-between; }
.service-panel__preview--growth small { color: var(--fg-on-dark-muted); }
.service-panel__preview--growth strong { color: var(--gt-teal-100); font-size: var(--fs-h3); }
.service-panel__preview--growth > i { width: 20%; height: 18%; border-radius: var(--r-sm) var(--r-sm) var(--sp-0) var(--sp-0); background: var(--surface-dark-alt); }
.service-panel__preview--growth > i:nth-of-type(2) { height: 32%; }
.service-panel__preview--growth > i:nth-of-type(3) { height: 48%; }
.service-panel__preview--growth > i:nth-of-type(4) { height: 68%; }
.service-panel__preview--growth > i:nth-of-type(5) { height: 88%; background: var(--gt-teal-100); }

@keyframes service-panel-enter {
  from { opacity: 0; transform: translateY(var(--sp-4)); }
  to { opacity: 1; transform: translateY(var(--sp-0)); }
}

@media (min-width: 768px) {
  .services__intro { justify-items: center; text-align: center; }
  .services__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .service-tabs { justify-content: center; gap: var(--sp-2); }
  .service-tabs__tab { min-height: var(--control-size); padding-inline: var(--sp-5); font-size: var(--fs-small); }
  .service-panel { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.15fr); padding: var(--sp-8); }
  .service-panel__principle { display: grid; }
  .service-panel__visual { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .service-panel { min-height: var(--sp-128); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-10); padding: var(--sp-10); }
  .service-panel__visual { grid-column: auto; }
}

@media (min-width: 1200px) {
  .services__title { white-space: nowrap; }
}

/* ── ./components/portfolio.css ── */
.portfolio {
  background: var(--surface-alt);
  scroll-margin-block-start: var(--sp-32);
}

.portfolio__intro {
  display: grid;
  gap: var(--sp-6);
  margin-block-end: var(--sp-10);
}

.portfolio__intro h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.portfolio__intro .button {
  justify-self: start;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-3);
}

.case-card {
  display: grid;
  min-width: var(--sp-0);
  align-content: start;
  gap: var(--sp-3);
}

.case-card__visual {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-canvas);
}

.case-card__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.case-card:hover .case-card__visual > img {
  transform: scale(1.035);
}

.case-card__badge {
  position: absolute;
  z-index: var(--z-sticky);
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.case-card__copy {
  display: grid;
  gap: var(--sp-1);
}

.case-card__copy h2,
.case-card__copy h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  transition: color var(--t-base) var(--ease-out);
}

.case-card__copy h2::after,
.case-card__copy h3::after {
  display: grid;
  width: var(--sp-8);
  aspect-ratio: 1;
  flex: none;
  place-items: center;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-accent);
  content: "↗";
  font-size: var(--fs-small);
  opacity: 0;
  transform: translateX(var(--sp-neg-2)) scale(0.8);
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.case-card:hover .case-card__copy h2,
.case-card:focus-visible .case-card__copy h2,
.case-card:hover .case-card__copy h3,
.case-card:focus-visible .case-card__copy h3 { color: var(--fg-accent-strong); }

.case-card:hover .case-card__copy h2::after,
.case-card:focus-visible .case-card__copy h2::after,
.case-card:hover .case-card__copy h3::after,
.case-card:focus-visible .case-card__copy h3::after {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  opacity: 1;
  transform: translateX(var(--sp-0)) scale(1);
}

.case-card__copy p {
  color: var(--fg-secondary);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
}

@media (min-width: 768px) {
  .portfolio__intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-block-end: var(--sp-12);
  }

  .portfolio__intro h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .portfolio__intro .button {
    justify-self: end;
  }

  .case-grid {
    gap: var(--sp-10) var(--sp-6);
  }

  .case-card { gap: var(--sp-5); }
  .case-card__badge { inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4); padding: var(--sp-2) var(--sp-3); }
  .case-card__copy h2,
  .case-card__copy h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .case-card__copy p { font-size: var(--fs-small); line-height: var(--lh-small); }
}

@media (min-width: 1024px) {
  .portfolio__intro h2 { white-space: nowrap; }
  .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap-block: var(--sp-16); }
}

@media (prefers-reduced-motion: reduce) {
  .case-card__copy h2::after,
  .case-card__copy h3::after { transform: none; }
}

/* ── ./components/advantages.css ── */
.advantages {
  position: relative;
  overflow: hidden;
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.advantages.section {
  padding-block: var(--sp-12);
}

.advantages__pattern {
  position: absolute;
  inset: var(--sp-neg-64) var(--sp-neg-32);
  opacity: 0.55;
  background:
    radial-gradient(circle at 16% 30%, var(--overlay-dark-soft) 0 12%, transparent 12.5%),
    radial-gradient(circle at 52% 78%, var(--overlay-grid-high) 0 16%, transparent 16.5%),
    radial-gradient(circle at 86% 24%, var(--overlay-dark-soft) 0 18%, transparent 18.5%),
    linear-gradient(135deg, transparent 42%, var(--overlay-grid-low) 42% 58%, transparent 58%);
  animation: advantages-drift var(--t-orbit) var(--ease-standard) infinite alternate;
  pointer-events: none;
  transform-origin: center;
}

.advantages__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
}

.advantages__intro {
  display: grid;
  max-width: none;
  justify-items: center;
  text-align: center;
}

.advantages__intro h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.advantages__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: var(--border-thin) solid var(--overlay-dark-border);
  border-radius: var(--r-xl);
  background: var(--surface-dark-alt);
  box-shadow: var(--shadow-hover);
}

.advantage-item {
  display: grid;
  min-width: var(--sp-0);
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-lg);
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.advantage-item:hover {
  color: var(--gt-teal-100);
  background: var(--surface-dark);
  transform: translateY(var(--sp-neg-1));
}

.advantage-item__icon {
  display: grid;
  width: var(--sp-10);
  aspect-ratio: 1;
  place-items: center;
  border: var(--border-thin) solid var(--overlay-dark-soft);
  border-radius: var(--r-lg);
  color: var(--gt-teal-100);
  background: var(--surface-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.advantage-item strong {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-regular);
}

.advantages__cta {
  justify-self: center;
}

@media (min-width: 768px) {
  .advantages__intro h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .advantages__grid {
    gap: var(--sp-2);
    padding: var(--sp-4);
  }

  .advantage-item {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }

  .advantage-item__icon {
    width: var(--sp-10);
  }

  .advantage-item strong {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
}

@media (min-width: 1024px) {
  .advantages__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .advantages__intro h2 { white-space: nowrap; }

  .advantages__grid {
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
  }

  .advantage-item strong {
    white-space: nowrap;
  }
}

@keyframes advantages-drift {
  from { transform: translate3d(var(--sp-neg-4), var(--sp-neg-2), 0) scale(1); }
  to { transform: translate3d(var(--sp-4), var(--sp-2), 0) scale(1.035); }
}

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

/* ── ./components/testimonial.css ── */
.testimonial {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.testimonial.section { padding-block: var(--sp-8); }
.testimonial__grid { display: grid; gap: var(--sp-6); }
.testimonial__portrait-wrap { position: relative; align-self: start; }
.testimonial__portrait { width: 100%; height: var(--sp-32); border-radius: var(--r-xl); object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.1); }
.testimonial__portrait-label { position: absolute; inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); color: var(--fg-primary); background: var(--gt-teal-100); font-size: var(--fs-small); line-height: var(--lh-small); }
.testimonial__content .eyebrow { color: var(--gt-teal-100); }
.testimonial__content h2 { margin-block: var(--sp-3); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-regular); letter-spacing: var(--tr-tight); }
.testimonial__lead { max-width: var(--sp-128); color: var(--fg-on-dark-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.principles { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-6); }
.principles li { display: grid; grid-template-columns: var(--sp-8) 1fr; gap: var(--sp-1) var(--sp-3); padding-block: var(--sp-3); border-block-start: var(--border-thin) solid var(--overlay-dark-soft); }
.principles span { grid-row: 1 / 3; color: var(--gt-teal-100); font-family: var(--font-mono); font-size: var(--fs-micro); }
.principles strong { font-size: var(--fs-body); }
.principles p { display: none; color: var(--fg-on-dark-muted); font-size: var(--fs-small); line-height: var(--lh-small); }

@media (min-width: 768px) {
  .testimonial.section { padding-block: var(--sp-12); }
  .testimonial__grid { grid-template-columns: var(--sp-64) minmax(0, 1fr); align-items: center; gap: var(--sp-12); }
  .testimonial__portrait { height: var(--sp-80); }
  .testimonial__content h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles li { grid-template-columns: 1fr; }
  .principles span { grid-row: auto; }
  .principles p { display: block; }
}

/* ── ./components/faq.css ── */
.faq { background: var(--surface-alt); }
.faq__grid { display: grid; gap: var(--sp-10); }
.faq__intro { align-self: start; }
.faq__intro h2 { margin-block: var(--sp-4) var(--sp-6); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-regular); letter-spacing: var(--tr-tight); }
.faq__items { border-block-start: var(--border-thin) solid var(--border-strong); }
.faq__item { border-block-end: var(--border-thin) solid var(--border-default); }
.faq__item summary { display: grid; grid-template-columns: var(--sp-8) 1fr var(--sp-6); gap: var(--sp-3); align-items: start; padding-block: var(--sp-5); font-size: var(--fs-body); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span { color: var(--fg-accent); font-family: var(--font-mono); font-size: var(--fs-micro); }
.faq__item summary::after { display: grid; width: var(--sp-6); aspect-ratio: 1; place-items: center; border: var(--border-thin) solid var(--border-default); border-radius: var(--r-pill); content: "+"; transition: transform var(--t-base) var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: var(--sp-0) var(--sp-0) var(--sp-6) calc(var(--sp-8) + var(--sp-3)); }
.faq__answer p { max-width: var(--sp-128); color: var(--fg-muted); }

@media (min-width: 768px) {
  .faq__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--sp-16); }
  .faq__intro { position: sticky; inset-block-start: calc(var(--nav-height) + var(--sp-10)); }
}

/* ── ./components/insights.css ── */
.insights {
  background: var(--surface-canvas);
  scroll-margin-block-start: var(--sp-32);
}

.insights__intro {
  display: grid;
  gap: var(--sp-6);
  margin-block-end: var(--sp-8);
}

.insights__intro h2 {
  max-width: var(--sp-160);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.insights__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.blog-slider__controls {
  display: flex;
  gap: var(--sp-2);
}

.blog-slider__controls button {
  display: grid;
  width: var(--control-size);
  aspect-ratio: 1;
  place-items: center;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

.blog-slider__controls button:hover:not(:disabled) {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  transform: translateY(var(--sp-neg-1));
}

.blog-slider__controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.blog-slider {
  overflow: hidden;
}

.blog-slider__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.blog-slider__track.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.blog-slider__track::-webkit-scrollbar {
  display: none;
}

.blog-slider__slide {
  min-width: var(--sp-0);
  flex: 0 0 76%;
  scroll-snap-align: start;
}

.insight-card {
  display: grid;
  height: 100%;
  overflow: hidden;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-alt);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}

.insight-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.insight-card__visual {
  position: relative;
  display: flex;
  min-height: var(--sp-48);
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  overflow: hidden;
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.insight-card__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
  pointer-events: none;
  user-select: none;
}

.insight-card:hover .insight-card__visual > img {
  transform: scale(1.035);
}

.insight-card__body {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.insight-card__meta {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
}

.insight-card h3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  transition: color var(--t-base) var(--ease-out);
}

.insight-card h3::after {
  display: grid;
  width: var(--sp-8);
  aspect-ratio: 1;
  flex: none;
  place-items: center;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-accent);
  content: "↗";
  font-size: var(--fs-small);
  opacity: 0;
  transform: translateX(var(--sp-neg-2)) scale(0.8);
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.insight-card:hover h3,
.insight-card:focus-visible h3 { color: var(--fg-accent-strong); }

.insight-card:hover h3::after,
.insight-card:focus-visible h3::after {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  opacity: 1;
  transform: translateX(var(--sp-0)) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .insight-card h3::after { transform: none; }
}

.insight-card p {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

@media (min-width: 768px) {
  .insights__intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-block-end: var(--sp-10);
  }

  .insights__actions {
    justify-content: flex-end;
  }

  .blog-slider__slide {
    flex-basis: calc((100% - var(--sp-4)) / 2);
  }
}

@media (min-width: 1024px) {
  .blog-slider__slide {
    flex-basis: calc((100% - var(--sp-8)) / 3);
  }
}

/* ── ./components/service-detail.css ── */
.page-service {
  background: var(--surface-alt);
}

.page-service main > .section {
  padding-block: var(--sp-12);
}

.page-service .site-header:not(.is-scrolled) .navbar__logo--dark {
  opacity: 1;
}

.page-service .site-header:not(.is-scrolled) .navbar__logo--light {
  opacity: 0;
}

.service-hero.section {
  padding-block-start: calc(var(--nav-height) + var(--sp-12));
  padding-block-end: var(--sp-12);
}

.service-hero__copy {
  display: grid;
  gap: var(--sp-4);
}

.service-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.service-hero__copy > p:not(.eyebrow) {
  max-width: calc(var(--sp-160) + var(--sp-80));
  color: var(--fg-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block-start: var(--sp-3);
}

.service-hero__actions > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

.service-hero__assurance {
  display: none;
  gap: var(--sp-1);
  padding-inline-start: var(--sp-4);
  border-inline-start: var(--border-thin) solid var(--border-default);
  color: var(--fg-secondary);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
}

.service-hero__assurance strong {
  color: var(--fg-primary);
  font-size: var(--fs-small);
}

.service-hero__visual {
  position: relative;
  height: var(--sp-64);
  margin-block-start: var(--sp-8);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-dark);
}

.service-hero__visual::after {
  position: absolute;
  inset: var(--sp-0);
  background: linear-gradient(to top, var(--surface-dark), transparent 55%);
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

.service-hero__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-hero__signal {
  position: absolute;
  z-index: var(--z-sticky);
  display: grid;
  max-width: var(--sp-64);
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: var(--border-thin) solid var(--overlay-dark-soft);
  border-radius: var(--r-lg);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  box-shadow: var(--shadow-hover);
}

.service-hero__signal span {
  color: var(--gt-teal-100);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.service-hero__signal strong {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
}

.service-hero__signal--top {
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
}

.service-hero__signal--bottom {
  inset-block-end: var(--sp-4);
  inset-inline-end: var(--sp-4);
}

.service-why {
  background: var(--surface-canvas);
}

.service-section-heading {
  display: grid;
  max-width: calc(var(--sp-160) + var(--sp-80));
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}

.service-section-heading h2,
.service-capabilities h2,
.service-process h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.service-section-heading > p:last-child,
.service-process__intro > p:last-child {
  max-width: calc(var(--sp-160) + var(--sp-80));
  color: var(--fg-secondary);
}

.service-why__layout {
  display: grid;
  gap: var(--sp-4);
}

.service-why__media {
  position: relative;
  min-height: var(--sp-64);
  overflow: hidden;
  border-radius: var(--r-xl);
}

.service-why__media img {
  width: 100%;
  height: 100%;
  min-height: var(--sp-64);
  object-fit: cover;
}

.service-why__media figcaption {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  font-size: var(--fs-small);
}

.service-why__reasons {
  display: grid;
  gap: var(--sp-3);
}

.service-why__reasons li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-alt);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.service-why__reasons li:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.service-why__reasons span,
.capability-card > span {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.service-why__reasons div {
  display: grid;
  gap: var(--sp-1);
}

.service-why__reasons h3 {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.service-why__reasons p,
.capability-card p {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.service-capabilities {
  overflow: hidden;
}

.service-capabilities__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-6);
}

.service-capabilities__header > div:first-child {
  display: grid;
  max-width: var(--sp-144);
  gap: var(--sp-3);
}

.service-slider-controls {
  display: flex;
  flex: none;
  gap: var(--sp-2);
}

.service-slider-controls button {
  display: grid;
  width: var(--control-size);
  height: var(--control-size);
  place-items: center;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  cursor: pointer;
}

.service-slider-controls button:disabled {
  color: var(--fg-muted);
  opacity: 0.55;
  cursor: default;
}

.capability-track {
  display: flex;
  overflow-x: auto;
  gap: var(--sp-4);
  padding-block: var(--sp-1) var(--sp-4);
  scrollbar-width: none;
  scroll-snap-type: inline mandatory;
}

.capability-track::-webkit-scrollbar {
  display: none;
}

.capability-card {
  display: grid;
  min-height: var(--sp-48);
  flex: 0 0 84%;
  align-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-canvas);
  scroll-snap-align: start;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.capability-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.capability-card h3 {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

.capability-card small {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.service-cases {
  background: var(--surface-canvas);
}


.service-process {
  overflow: clip;
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.service-process__intro {
  display: grid;
  max-width: var(--sp-144);
  gap: var(--sp-3);
  margin-inline: auto;
  margin-block-end: var(--sp-6);
  text-align: center;
}

.service-process__intro .eyebrow,
.service-process__intro > p:last-child {
  color: var(--fg-on-dark-muted);
}

.process-stack {
  display: grid;
  gap: var(--sp-4);
  padding-block-end: var(--sp-6);
}

.process-card {
  position: sticky;
  inset-block-start: calc(var(--nav-height) + var(--sp-6));
  display: grid;
  min-height: var(--sp-64);
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  box-shadow: var(--shadow-hover);
  transform: scale(0.97) rotate(var(--rotate-left));
  transition: transform var(--t-reveal) var(--ease-out);
}

.process-card:nth-child(even) {
  transform: scale(0.97) rotate(var(--rotate-right));
}

.process-card.is-active {
  transform: scale(1) rotate(var(--rotate-none));
}

.process-card__number {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.process-card > div {
  display: grid;
  gap: var(--sp-2);
}

.process-card__label {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
}

.process-card h3 {
  max-width: var(--sp-96);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

.process-card div > p:not(.process-card__label) {
  max-width: var(--sp-128);
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.process-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.process-card li {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
  font-size: var(--fs-micro);
}

.process-card__output {
  grid-column: 2;
  align-self: end;
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}

.service-insights {
  background: var(--surface-canvas);
}

.service-insights .insights__intro {
  margin-block-end: var(--sp-6);
}

.service-insights .insight-card__visual {
  aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
  .page-service main > .section {
    padding-block: var(--sp-10);
  }

  .service-hero.section {
    padding-block-start: calc(var(--nav-height) + var(--sp-10));
    padding-block-end: var(--sp-10);
  }

  .service-hero__copy > p:not(.eyebrow),
  .service-section-heading > p:last-child,
  .service-process__intro > p:last-child {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .service-hero__actions,
  .service-hero__actions > div {
    gap: var(--sp-3);
  }

  .service-hero__visual {
    height: var(--sp-48);
  }

  .service-section-heading {
    gap: var(--sp-2);
    margin-block-end: var(--sp-4);
  }

  .service-section-heading h2,
  .service-capabilities h2,
  .service-process h2,
  .service-cases .portfolio__intro h2,
  .service-insights .insights__intro h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  .service-why__layout {
    gap: var(--sp-3);
  }

  .service-why__media,
  .service-why__media img {
    min-height: var(--sp-48);
  }

  .service-why__media figcaption {
    padding: var(--sp-2);
    font-size: var(--fs-micro);
  }

  .service-capabilities__header {
    display: grid;
    grid-template-columns: minmax(var(--sp-0), 1fr) auto;
    gap: var(--sp-3);
    margin-block-end: var(--sp-4);
  }

  .service-slider-controls button,
  .service-insights .blog-slider__controls button {
    width: var(--sp-10);
    height: var(--sp-10);
  }

  .capability-track {
    gap: var(--sp-3);
    padding-block-end: var(--sp-3);
  }

  .capability-card {
    min-height: var(--sp-40);
    gap: var(--sp-2);
    padding: var(--sp-4);
  }

  .service-process__intro,
  .service-insights .insights__intro,
  .service-cases .portfolio__intro {
    margin-block-end: var(--sp-4);
  }

  .process-stack {
    gap: var(--sp-3);
    padding-block-end: var(--sp-4);
  }

  .process-card {
    min-height: var(--sp-0);
    gap: var(--sp-2);
    padding: var(--sp-4);
  }

  .process-card ul {
    display: none;
  }

  .service-insights .insight-card__visual {
    height: var(--sp-32);
    min-height: var(--sp-32);
    aspect-ratio: auto;
  }

  .service-insights .insight-card__body {
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .service-insights .insight-card h3 {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .service-insights .insight-card p {
    display: none;
  }
}

@media (min-width: 768px) {
  .page-service main > .section {
    padding-block: var(--sp-16);
  }

  .service-hero.section {
    padding-block-start: calc(var(--nav-height) + var(--sp-12));
  }

  .service-hero__assurance { display: grid; }

  .service-hero h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .service-hero__visual {
    height: var(--sp-80);
  }

  .service-hero__signal {
    padding: var(--sp-4);
  }

  .service-hero__signal--top {
    inset-block-start: var(--sp-6);
    inset-inline-start: var(--sp-6);
  }

  .service-hero__signal--bottom {
    inset-block-end: var(--sp-6);
    inset-inline-end: var(--sp-6);
  }

  .service-why__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: stretch;
  }

  .service-why__media,
  .service-why__media img {
    min-height: var(--sp-80);
  }

  .capability-card {
    flex-basis: calc((100% - var(--sp-4)) / 2);
  }

  .capability-card h3,
  .process-card h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  .process-card {
    min-height: var(--sp-48);
    grid-template-columns: var(--sp-12) minmax(0, 1fr) auto;
    padding: var(--sp-4);
  }

  .process-card__output {
    grid-column: 3;
    align-self: center;
  }

  .service-why.section,
  .service-cases.section,
  .service-insights.section {
    padding-block: var(--sp-12);
  }
}

@media (min-width: 1024px) {
  .service-hero h1 { white-space: nowrap; }

  .capability-card {
    flex-basis: calc((100% - var(--sp-8)) / 3);
  }

}

@media (prefers-reduced-motion: reduce) {
  .process-card,
  .process-card:nth-child(even) {
    opacity: 1;
    transform: none;
  }
}

/* ── ./components/content-pages.css ── */
.page-content {
  background: var(--surface-alt);
}

.page-content .site-header:not(.is-scrolled) .navbar__logo--dark {
  opacity: 1;
}

.page-content .site-header:not(.is-scrolled) .navbar__logo--light {
  opacity: 0;
}

.directory-hero.section {
  padding-block-start: calc(var(--nav-height) + var(--sp-8));
  padding-block-end: var(--sp-5);
}

.case-detail-hero.section,
.article-hero.section {
  padding-block-start: calc(var(--nav-height) + var(--sp-12));
  padding-block-end: var(--sp-6);
}

.directory-hero__copy {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}

.directory-hero h1 {
  max-width: none;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.case-detail-hero h1,
.article-hero h1 {
  max-width: calc(var(--sp-160) + var(--sp-80));
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.case-detail-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.article-hero h1 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.directory-hero__copy > p,
.case-detail-hero__copy > p,
.article-hero__intro {
  max-width: calc(var(--sp-160) + var(--sp-80));
  color: var(--fg-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.directory-filters,
.article-filters {
  display: flex;
  overflow-x: auto;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
  padding-block-end: var(--sp-2);
  scrollbar-width: none;
}

.directory-filters::-webkit-scrollbar,
.article-filters::-webkit-scrollbar {
  display: none;
}

.directory-filters button,
.article-filters button {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  cursor: pointer;
}

.directory-filters button.is-active,
.article-filters button.is-active {
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
}

.case-directory {
  padding-block-start: var(--sp-4);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.directory-hero .breadcrumbs {
  margin-block-end: var(--sp-4);
}

.breadcrumbs a {
  border-block-end: var(--border-thin) solid var(--border-default);
}

.record-jump-nav {
  display: flex;
  overflow-x: auto;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
  scrollbar-width: none;
}

.record-jump-nav::-webkit-scrollbar { display: none; }

.record-jump-nav a {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-secondary);
  background: var(--surface-canvas);
  font-size: var(--fs-micro);
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}

.record-jump-nav a:hover,
.record-jump-nav a:focus-visible,
.record-jump-nav a.is-active {
  border-color: var(--fg-accent);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.case-detail-hero__copy {
  display: grid;
  gap: var(--sp-4);
}

.case-detail-hero__copy > div {
  display: grid;
  gap: var(--sp-2);
}

.case-detail-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-block: var(--sp-6);
  padding-block: var(--sp-3);
  border-block: var(--border-thin) solid var(--border-default);
}

.case-detail-meta > div:last-child { grid-column: auto; }

.case-detail-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: var(--sp-0);
}

.case-detail-meta dt {
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  white-space: nowrap;
}

.case-detail-meta dd {
  margin: var(--sp-0);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-align: end;
  white-space: nowrap;
}

.case-detail-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-canvas);
}

.case-detail-hero__media > div {
  position: relative;
  display: grid;
  min-height: var(--sp-48);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  background: var(--surface-dark);
}

.case-detail-hero__media img {
  position: absolute;
  inset: var(--sp-0);
  width: 100%;
  height: 100%;
}

.case-detail-hero__backdrop {
  object-fit: cover;
  filter: blur(var(--sp-2));
  opacity: 0.3;
  transform: scale(1.05);
}

.case-detail-hero__foreground {
  z-index: var(--z-sticky);
  object-fit: contain;
  transition: transform var(--t-slow) var(--ease-out);
}

.case-detail-hero__media:hover .case-detail-hero__foreground { transform: scale(1.015); }

.case-detail-hero__media figcaption {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--fg-on-dark-muted);
  background: var(--surface-dark);
  font-size: var(--fs-micro);
}

.case-narrative {
  background: var(--surface-canvas);
}

.case-narrative.section,
.case-approach.section,
.article-body.section { padding-block: var(--sp-12); }

.case-outcome.section { padding-block: var(--sp-16); }

.related-content.section { padding-block: var(--sp-10); }

.case-narrative__grid {
  display: grid;
  gap: var(--sp-5);
}

.case-narrative__index {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.case-narrative__grid > div {
  display: grid;
  max-width: calc(var(--sp-160) + var(--sp-32));
  gap: var(--sp-4);
}

.case-narrative h2,
.case-approach h2,
.related-content h2,
.article-body h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.case-narrative__grid > div p {
  max-width: var(--sp-144);
  color: var(--fg-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.case-approach {
  background: var(--surface-canvas);
}

.case-approach__header {
  display: grid;
  max-width: calc(var(--sp-160) + var(--sp-32));
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}

.case-approach__cards {
  display: grid;
  gap: var(--sp-3);
}

.case-approach__cards li {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-alt);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.case-approach__cards li:hover {
  border-color: var(--fg-accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.case-approach__cards span {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.case-approach__cards h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
}

.case-approach__cards p {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.case-outcome {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.case-outcome__panel {
  display: grid;
  max-width: none;
  gap: var(--sp-3);
}

.case-outcome h2 {
  max-width: calc(var(--sp-160) + var(--sp-80));
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.case-outcome p:not(.eyebrow) {
  max-width: var(--sp-144);
  color: var(--fg-on-dark-muted);
}

.case-outcome .button {
  justify-self: start;
}

.related-content {
  background: var(--surface-canvas);
}

.related-content header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}

.related-content header > div { display: grid; gap: var(--sp-2); }

.related-insight-grid {
  display: flex;
  overflow-x: auto;
  gap: var(--sp-4);
  padding-block-end: var(--sp-2);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.related-insight-grid::-webkit-scrollbar { display: none; }
.related-insight-grid .blog-slider__slide { flex: 0 0 76%; }

.article-directory-tools {
  margin-block-start: var(--sp-5);
}

.article-directory-tools .article-filters {
  margin-block-start: var(--sp-0);
}

.article-directory {
  padding-block-start: var(--sp-4);
}

.blog-slider--directory { overflow: visible; }

.blog-slider__track--directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
  cursor: default;
  scroll-snap-type: none;
}

.blog-slider__track--directory .blog-slider__slide {
  min-width: var(--sp-0);
  flex: none;
}

.directory-empty {
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  color: var(--fg-secondary);
  background: var(--surface-canvas);
  text-align: center;
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-4);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.article-hero__grid,
.article-hero__copy {
  display: grid;
  gap: var(--sp-4);
}

.article-hero__intro {
  margin-block-start: var(--sp-0);
}

.article-hero__media {
  width: 100%;
  max-width: var(--sp-64);
  margin-inline: auto;
  margin-block-start: var(--sp-2);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-canvas);
}

.article-hero__media img {
  width: 100%;
  height: var(--sp-48);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.article-hero__media:hover img { transform: scale(1.015); }

.article-hero__media figcaption {
  padding: var(--sp-3) var(--sp-4);
  color: var(--fg-secondary);
  font-size: var(--fs-micro);
}

.article-highlights {
  padding-block: var(--sp-4);
}

.article-highlights__panel {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
}

.article-highlights h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
}

.article-highlights ul {
  display: grid;
  gap: var(--sp-2);
}

.article-highlights li {
  padding-inline-start: var(--sp-3);
  border-inline-start: var(--border-thin) solid var(--gt-teal-100);
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.article-body {
  background: var(--surface-canvas);
}

.article-body__layout {
  display: grid;
  gap: var(--sp-6);
}

.article-toc {
  display: flex;
  overflow-x: auto;
  gap: var(--sp-2);
  padding-block-end: var(--sp-2);
  scrollbar-width: none;
}

.article-toc::-webkit-scrollbar { display: none; }

.article-toc > span {
  display: none;
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
}

.article-toc a {
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  color: var(--fg-secondary);
  background: var(--surface-alt);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  transition: color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.article-toc a:hover {
  color: var(--fg-accent-strong);
  transform: translateX(var(--sp-1));
}

.article-toc a.is-active {
  border-color: var(--fg-accent);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.article-prose {
  display: grid;
  max-width: var(--sp-160);
  gap: var(--sp-6);
}

.article-prose__lead {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-tight);
}

.article-prose > section {
  display: grid;
  gap: var(--sp-3);
  scroll-margin-block-start: calc(var(--nav-height) + var(--sp-6));
}

.article-prose p:not(.article-prose__lead),
.article-prose li {
  color: var(--fg-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.article-prose ul {
  display: grid;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-5);
  list-style: disc;
}

.article-prose blockquote {
  padding: var(--sp-5);
  border-inline-start: var(--sp-1) solid var(--gt-teal-100);
  border-radius: var(--r-xl);
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-style: italic;
}

@media (max-width: 767px) {
  .case-detail-hero.section,
  .article-hero.section {
    padding-block-start: calc(var(--nav-height) + var(--sp-8));
    padding-block-end: var(--sp-4);
  }

  .breadcrumbs {
    gap: var(--sp-1);
    margin-block-end: var(--sp-4);
  }

  .case-detail-hero__copy,
  .article-hero__grid,
  .article-hero__copy {
    gap: var(--sp-3);
  }

  .case-detail-hero__copy > div { gap: var(--sp-1); }

  .case-detail-hero__copy > p,
  .article-hero__intro {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .case-detail-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
    margin-block: var(--sp-4);
    padding-block: var(--sp-2);
  }

  .case-detail-meta > div:last-child { grid-column: auto; }
  .case-detail-meta div {
    gap: var(--sp-3);
    padding-block: var(--sp-1);
  }

  .case-detail-meta dd {
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
  }

  .record-jump-nav {
    gap: var(--sp-1);
    margin-block-end: var(--sp-3);
  }

  .record-jump-nav a { padding: var(--sp-1) var(--sp-3); }

  .case-detail-hero__media > div {
    height: var(--sp-48);
    min-height: var(--sp-0);
    aspect-ratio: auto;
  }

  .case-detail-hero__media figcaption {
    display: none;
  }

  .case-narrative.section,
  .case-approach.section,
  .article-body.section,
  .related-content.section {
    padding-block: var(--sp-8);
  }

  .case-outcome.section { padding-block: var(--sp-10); }

  .case-narrative__grid { gap: var(--sp-3); }
  .case-narrative__grid > div { gap: var(--sp-3); }

  .case-narrative__grid > div p,
  .case-outcome p:not(.eyebrow),
  .article-prose p:not(.article-prose__lead),
  .article-prose li {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .case-approach__header {
    gap: var(--sp-1);
    margin-block-end: var(--sp-4);
  }

  .case-approach__cards { gap: var(--sp-2); }

  .case-approach__cards li {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3);
  }

  .case-approach__cards li > span { grid-row: 1 / span 2; }

  .case-approach__cards h3 {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .case-outcome__panel { gap: var(--sp-2); }

  .related-content header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-2);
    margin-block-end: var(--sp-4);
  }

  .related-content header > div { gap: var(--sp-1); }

  .article-hero__meta {
    gap: var(--sp-1) var(--sp-3);
    margin-block-end: var(--sp-0);
  }

  .article-hero__media {
    max-width: var(--sp-48);
    margin-block-start: var(--sp-0);
  }

  .article-hero__media img { height: var(--sp-40); }

  .article-hero__media figcaption { display: none; }

  .article-highlights { padding-block: var(--sp-2); }

  .article-highlights__panel {
    gap: var(--sp-3);
    padding: var(--sp-3);
  }

  .article-highlights h2 {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .article-highlights ul { gap: var(--sp-1); }

  .article-highlights li {
    padding-inline-start: var(--sp-2);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
  }

  .article-body__layout { gap: var(--sp-4); }

  .article-toc {
    gap: var(--sp-1);
    padding-block-end: var(--sp-1);
  }

  .article-toc a {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
  }

  .article-prose { gap: var(--sp-5); }

  .article-prose__lead {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .article-prose > section { gap: var(--sp-2); }

  .article-prose blockquote {
    padding: var(--sp-4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .related-insight-grid .insight-card__visual { min-height: var(--sp-0); }

  .related-insight-grid .insight-card__body {
    gap: var(--sp-2);
    padding: var(--sp-4);
  }

  .related-insight-grid .insight-card h3 {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .related-insight-grid .insight-card p { display: none; }
}

@media (min-width: 768px) {
  .directory-hero h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .case-detail-hero h1,
  .article-hero h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .article-hero__media { max-width: var(--sp-128); }
  .article-hero__media img { height: var(--sp-96); }

  .directory-hero__copy,
  .case-detail-hero__copy { max-width: calc(var(--sp-160) + var(--sp-80)); }

  .case-narrative__grid {
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr);
  }

  .case-narrative h2,
  .case-approach h2,
  .related-content h2,
  .article-body h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .case-detail-hero__media > div { aspect-ratio: 16 / 9; }
  .case-detail-meta {
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
  }
  .case-detail-meta > div:last-child { grid-column: auto; }

  .case-approach__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-outcome__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--sp-8);
    row-gap: var(--sp-2);
  }

  .case-outcome__panel > .eyebrow { grid-column: 1 / -1; }

  .case-outcome h2 {
    grid-column: 1;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .case-outcome p:not(.eyebrow) { grid-column: 1; }

  .case-outcome .button {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
  }

  .related-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .related-insight-grid .blog-slider__slide { min-width: var(--sp-0); flex: none; }

  .blog-slider__track--directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .article-highlights__panel {
    grid-template-columns: var(--sp-40) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .directory-hero h1 { white-space: nowrap; }

  .case-detail-hero__media > div {
    height: var(--sp-80);
    min-height: var(--sp-0);
    aspect-ratio: auto;
  }

  .article-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--sp-10);
  }

  .article-hero__media {
    max-width: none;
    margin-block-start: var(--sp-0);
  }

  .blog-slider__track--directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .article-body__layout {
    grid-template-columns: var(--sp-48) minmax(0, 1fr);
    align-items: start;
  }

  .article-prose {
    max-width: none;
    row-gap: var(--sp-6);
  }

  .article-prose__lead {
    grid-column: 1 / -1;
    max-width: calc(var(--sp-160) + var(--sp-32));
  }

  .article-prose > section {
    grid-template-columns: var(--sp-64) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--sp-8);
  }

  .article-prose blockquote {
    max-width: calc(100% - var(--sp-64) - var(--sp-8));
    margin-inline-start: calc(var(--sp-64) + var(--sp-8));
  }

  .article-highlights ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .article-toc {
    position: sticky;
    inset-block-start: calc(var(--nav-height) + var(--sp-6));
    display: grid;
    overflow: visible;
    align-content: start;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border: var(--border-thin) solid var(--border-default);
    border-radius: var(--r-xl);
    background: var(--surface-alt);
  }

  .article-toc > span { display: block; }
  .article-toc a { padding: var(--sp-0); border: var(--sp-0); border-radius: var(--sp-0); background: transparent; }
  .article-toc a.is-active { color: var(--fg-accent-strong); background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .case-detail-hero__media:hover .case-detail-hero__foreground,
  .case-approach__cards li:hover,
  .article-hero__media:hover img,
  .article-toc a:hover { transform: none; }
}

/* ── ./components/case-blocks.css ── */
/* Case-study page-builder blocks (dashboard-composed sections).
   Designed to read well from any mix/order of blocks, on web and mobile. */

/* --- Vertical rhythm ---------------------------------------------------- */
/* Every block owns symmetric block padding. Because the bands alternate
   white/gray (below), each one needs equal top and bottom padding so its
   content is centred inside its own colour band and never touches the edge
   where one band meets the next. */
.case-block.section { padding-block: var(--sp-16); }

/* Alternating full-width bands: block 1 white, block 2 gray, and so on.
   Every child of .case-blocks-flow is a <section>, so nth-of-type counts
   only the rendered blocks (empty blocks output nothing). */
.case-blocks-flow .case-block:nth-of-type(odd) { background: var(--surface-canvas); }
.case-blocks-flow .case-block:nth-of-type(even) { background: var(--surface-alt); }

/* Card-like tiles take the opposite shade of their band so they always keep
   contrast, whichever band they land on. */
.case-blocks-flow .case-block:nth-of-type(odd) .case-block__stat,
.case-blocks-flow .case-block:nth-of-type(odd) .case-block__cards li { background: var(--surface-alt); }
.case-blocks-flow .case-block:nth-of-type(even) .case-block__stat,
.case-blocks-flow .case-block:nth-of-type(even) .case-block__cards li { background: var(--surface-canvas); }

/* Prose blocks: start-aligned (right in RTL, left in LTR) and filling the
   standard .container width — long articles read as normal text. The width
   and centring come from .container itself; never override its margins. */
.case-block__narrow {
  text-align: start;
}
.case-block--text .article-prose,
.case-block__copy .article-prose {
  /* Neutralise the 640px cap .article-prose carries elsewhere. */
  max-width: none;
  text-align: start;
}

/* --- Text --------------------------------------------------------------- */
.case-block--text .eyebrow { margin-bottom: var(--sp-3); }
.case-block--text h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: var(--sp-5);
}
.case-block--text .article-prose { color: var(--fg-secondary); }
.case-block--text .article-prose > *:first-child { margin-block-start: 0; }
.case-block--text .article-prose > *:last-child { margin-block-end: 0; }

/* --- Single image ------------------------------------------------------- */
.case-block__bleed { padding-inline: 0; }
.case-block__figure { margin: 0; }
.case-block__figure img {
  display: block;
  /* width:auto + max-height lets a landscape image fill the width while a
     tall portrait screenshot is capped by height and centred, instead of
     ballooning to the full container height. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 82vh;
  margin-inline: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-default);
}
.case-block--full .case-block__bleed { width: 100%; }
.case-block--full .case-block__figure img {
  width: 100%;
  max-height: 90vh;
  object-fit: cover;
  border-radius: 0;
  border-inline: 0;
}
.case-block__figure figcaption,
.case-block__caption {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
  text-align: center;
}

/* --- Text + image (two column) ----------------------------------------- */
.case-block__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: center;
}
.case-block__columns--flip .case-block__copy { order: 2; }
.case-block__columns--flip .case-block__media { order: 1; }
.case-block__copy h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: var(--sp-4);
}
.case-block__copy .article-prose { color: var(--fg-secondary); }
.case-block__copy .article-prose > *:first-child { margin-block-start: 0; }
.case-block__copy .article-prose > *:last-child { margin-block-end: 0; }
.case-block__media { margin: 0; }
.case-block__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-default);
}

/* --- Gallery ------------------------------------------------------------ */
.case-block__gallery-heading {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: var(--sp-6);
}
.case-block__grid { display: grid; gap: var(--sp-4); align-items: start; }
.case-block__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-block__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Show gallery images in full — natural height, never cropped. */
.case-block__grid .case-block__figure img {
  width: 100%;
  height: auto;
  max-height: none;
  margin-inline: 0;
}

/* --- Stats -------------------------------------------------------------- */
.case-block__stats-heading {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: var(--sp-6);
}
.case-block__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin: 0;
}
.case-block__stat {
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-alt);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.case-block__stat dd {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  color: var(--fg-accent-strong);
  word-break: break-word;
}
.case-block__stat dt {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}

/* --- Quote -------------------------------------------------------------- */
.case-block__quote {
  margin: 0;
  border-inline-start: 4px solid var(--fg-accent);
  padding-inline-start: var(--sp-8);
  padding-block: var(--sp-2);
}
.case-block__quote p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-primary);
  margin: 0 0 var(--sp-4);
}
.case-block__quote footer strong { display: block; color: var(--fg-secondary); }
.case-block__quote footer span {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}

/* --- Video -------------------------------------------------------------- */
.case-block__video { margin: 0; }
.case-block__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
}
.case-block__video figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
  text-align: center;
}

/* --- Numbered cards ----------------------------------------------------- */
.case-block__cards-header { margin-bottom: var(--sp-8); }
.case-block__cards-header h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.case-block__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.case-block__cards li {
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-canvas);
  padding: var(--sp-8) var(--sp-6);
}
.case-block__cards li span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--fg-accent);
  margin-bottom: var(--sp-4);
}
.case-block__cards li h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-bottom: var(--sp-2);
}
.case-block__cards li p {
  color: var(--fg-muted);
  margin: 0;
}

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 900px) {
  .case-block.section { padding-block: var(--sp-12); }
  .case-block__columns { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* When stacked, image always follows the text regardless of desktop side. */
  .case-block__columns--flip .case-block__copy,
  .case-block__columns .case-block__copy { order: 1; }
  .case-block__columns--flip .case-block__media,
  .case-block__columns .case-block__media { order: 2; }
  .case-block__media img { max-height: 70vh; }
  .case-block__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 600px) {
  .case-block.section { padding-block: var(--sp-10); }

  .case-block--text h2,
  .case-block__copy h2,
  .case-block__gallery-heading,
  .case-block__stats-heading,
  .case-block__cards-header h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  .case-block__quote {
    padding-inline-start: var(--sp-5);
  }
  .case-block__quote p {
    font-size: 20px;
    line-height: 28px;
  }

  .case-block__stat { padding: var(--sp-6) var(--sp-5); }
  .case-block__stat dd { font-size: var(--fs-h3); line-height: var(--lh-h3); }

  /* Gallery becomes a swipeable slider — each image snaps, the next one
     peeks to signal there's more. No JS: native scroll-snap. */
  .case-block__grid--2,
  .case-block__grid--3 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block-end: var(--sp-2);
  }
  .case-block__grid--2::-webkit-scrollbar,
  .case-block__grid--3::-webkit-scrollbar { display: none; }
  .case-block__grid--2 .case-block__figure,
  .case-block__grid--3 .case-block__figure { scroll-snap-align: center; }

  .case-block__figure img,
  .case-block__media img { max-height: 70vh; }
}

/* ── ./components/company-pages.css ── */
.page-about .section,
.page-contact .section {
  padding-block: var(--sp-10);
}

.about-hero.section,
.contact-hero.section {
  padding-block-start: calc(var(--nav-height) + var(--sp-6));
  padding-block-end: var(--sp-10);
}

.about-hero__grid,
.contact-hero__grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

.about-hero__copy,
.contact-hero__copy {
  display: grid;
  max-width: calc(var(--sp-160) + var(--sp-80));
  gap: var(--sp-2);
}

.about-hero h1,
.contact-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.about-hero__copy > p:not(.eyebrow),
.contact-hero__copy > p:not(.eyebrow) {
  max-width: calc(var(--sp-160) + var(--sp-80));
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.about-hero .button,
.contact-hero .button {
  justify-self: start;
}

.about-hero__media,
.contact-hero figure {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-dark-alt);
}

.about-hero__media img,
.contact-hero figure img {
  width: 100%;
  height: var(--sp-48);
  aspect-ratio: auto;
  object-fit: cover;
}

.about-hero__media figcaption {
  padding: var(--sp-2) var(--sp-3);
  color: var(--fg-on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.about-story,
.about-capability,
.contact-brief,
.contact-routes {
  background: var(--surface-canvas);
}

.about-story__grid {
  display: grid;
  gap: var(--sp-4);
}

.about-story__index {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.about-story__grid > div {
  display: grid;
  max-width: var(--sp-160);
  gap: var(--sp-3);
}

.about-story h2,
.about-direction h2,
.about-capability h2,
.about-standard h2,
.about-clients h2,
.contact-brief h2,
.contact-map h2,
.contact-routes h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.about-story__grid > div p,
.about-capability > .container > div > p,
.contact-brief__grid > div > p {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.about-direction {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.about-direction__header,
.about-standard header,
.about-clients header,
.contact-map header,
.contact-routes header {
  display: grid;
  max-width: var(--sp-144);
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
  margin-inline-end: auto;
}

.about-direction__header .eyebrow {
  color: var(--gt-teal-100);
}

.about-direction__grid {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  gap: var(--sp-3);
  padding-block-end: var(--sp-2);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.about-direction__grid::-webkit-scrollbar {
  display: none;
}

.about-direction article {
  display: grid;
  min-height: var(--sp-40);
  flex: 0 0 calc(100% - var(--sp-10));
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--border-thin) solid var(--overlay-dark-soft);
  border-radius: var(--r-xl);
  background: var(--surface-dark-alt);
  scroll-snap-align: start;
}

.about-direction article span {
  color: var(--gt-teal-100);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
}

.about-direction article h3 {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

.about-direction article p {
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.about-capability__grid {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

.about-capability figure {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-alt);
}

.about-capability figure img {
  width: 100%;
  height: var(--sp-48);
  object-fit: cover;
}

.about-capability__grid > div {
  display: grid;
  gap: var(--sp-3);
}

.about-capability ul {
  display: grid;
  gap: var(--sp-1);
}

.about-capability li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-2);
  border-block-end: var(--border-thin) solid var(--border-default);
}

.about-capability li span,
.about-standard li span,
.contact-routes a span {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.about-capability li p {
  grid-column: 2;
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.about-standard ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.about-standard li {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-canvas);
}

.about-standard li p {
  color: var(--fg-secondary);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
}

.about-clients {
  background: var(--surface-canvas);
}

.about-clients .client-slider {
  margin-block-start: var(--sp-4);
}

.contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.contact-brief__grid {
  display: grid;
  gap: var(--sp-5);
}

.contact-brief__grid > div {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.contact-brief dl {
  display: grid;
  gap: var(--sp-0);
  margin-block-start: var(--sp-2);
}

.contact-brief dl div {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-2);
  border-block-end: var(--border-thin) solid var(--border-default);
}

.contact-brief dt {
  color: var(--fg-accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
}

.contact-brief dd {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.contact-form {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-alt);
}

.contact-form label {
  display: grid;
  gap: var(--sp-2);
}

.contact-form label span {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-lg);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  font: inherit;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .button {
  justify-self: start;
}

.contact-form__status {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
}

.contact-map {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.contact-map header .eyebrow {
  color: var(--gt-teal-100);
}

.contact-map__frame {
  position: relative;
  min-height: var(--sp-64);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-dark-alt);
}

.contact-map__frame iframe {
  width: 100%;
  min-height: var(--sp-64);
  border: var(--sp-0);
  filter: grayscale(1) contrast(0.9);
}

.contact-map__card {
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-end: var(--sp-3);
  z-index: var(--z-sticky);
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: var(--border-thin) solid var(--overlay-dark-soft);
  border-radius: var(--r-xl);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
  box-shadow: var(--shadow-hover);
}

/* On phones the card must not cover the map — sit below it instead. */
@media (max-width: 767px) {
  .contact-map__card {
    position: static;
    inset: auto;
    margin-block-start: var(--sp-3);
    box-shadow: none;
  }
}

.contact-map__card span,
.contact-map__card a {
  color: var(--gt-teal-100);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.contact-map__card p {
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.contact-routes > .container > div {
  display: grid;
  gap: var(--sp-3);
}

.contact-routes a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number title"
    ". detail";
  align-content: start;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-xl);
  background: var(--surface-alt);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.contact-routes a span {
  grid-area: number;
}

.contact-routes a strong {
  grid-area: title;
  min-width: var(--sp-0);
}

.contact-routes a small {
  grid-area: detail;
  min-width: var(--sp-0);
  overflow-wrap: anywhere;
}

.contact-routes a:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.contact-routes a small {
  color: var(--fg-secondary);
}

@media (min-width: 768px) {
  .page-about .section,
  .page-contact .section {
    padding-block: var(--sp-16);
  }

  .about-hero.section,
  .contact-hero.section {
    padding-block-start: calc(var(--nav-height) + var(--sp-8));
    padding-block-end: var(--sp-16);
  }

  .about-hero__grid,
  .contact-hero__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--sp-10);
  }

  .about-hero__media img,
  .contact-hero figure img {
    height: var(--sp-64);
    aspect-ratio: auto;
  }

  .about-hero__copy > p:not(.eyebrow),
  .contact-hero__copy > p:not(.eyebrow),
  .about-story__grid > div p,
  .about-capability > .container > div > p,
  .contact-brief__grid > div > p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .about-capability__grid,
  .contact-brief__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-hero h1,
  .contact-hero h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .about-story__grid {
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr);
  }

  .about-direction__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-block-end: var(--sp-0);
    scroll-snap-type: none;
  }

  .about-direction article {
    min-height: var(--sp-0);
  }

  .about-direction article h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  .about-capability figure img {
    height: var(--sp-64);
  }

  .about-standard li {
    padding: var(--sp-4);
  }

  .about-standard li p {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

  .about-story h2,
  .about-direction h2,
  .about-capability h2,
  .about-standard h2,
  .about-clients h2,
  .contact-brief h2,
  .contact-map h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .about-standard ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .contact-map__card {
    inset-inline-start: var(--sp-6);
    inset-inline-end: auto;
    inset-block-end: var(--sp-6);
    width: var(--sp-64);
    padding: var(--sp-4);
  }

  .contact-map__frame,
  .contact-map__frame iframe {
    min-height: var(--sp-80);
  }

  .contact-form,
  .contact-routes a {
    padding: var(--sp-4);
  }

  .contact-routes > .container > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .contact-routes > .container > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── ./components/page-shell.css ── */
.page-service .service-hero.section {
  padding-block-start: calc(var(--nav-height) + var(--sp-8));
}

@media (max-width: 1023px) {
  .page-cases .directory-hero.section,
  .page-blog .directory-hero.section,
  .page-case-detail .case-detail-hero.section,
  .page-article .article-hero.section,
  .page-about .about-hero.section,
  .page-contact .contact-hero.section {
    padding-block-start: calc(var(--nav-height) + var(--sp-8));
  }
}

/* ── ./components/cta.css ── */
.cta {
  padding-block: var(--sp-8);
  background: var(--surface-canvas);
  scroll-margin-block-start: var(--sp-32);
}

.cta__panel {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  overflow: hidden;
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
}

.cta__panel::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--sp-neg-20);
  width: var(--sp-64);
  aspect-ratio: 1;
  border: var(--border-thin) solid var(--overlay-grid-high);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-focus);
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}

.cta__copy,
.cta__actions {
  position: relative;
  z-index: var(--z-sticky);
}

.cta__copy {
  display: grid;
  gap: var(--sp-2);
}

.cta .eyebrow {
  color: var(--gt-teal-100);
}

.cta h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
}

.cta__copy > p:last-child {
  max-width: var(--sp-96);
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.cta__email {
  border-block-end: var(--border-thin) solid currentColor;
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  .cta { padding-block: var(--sp-12); }

  .cta__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--sp-10);
  }

  .cta h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .cta__actions {
    justify-content: flex-end;
  }
}

/* ── ./components/footer.css ── */
.site-footer {
  padding-block: var(--sp-8) var(--sp-5);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.site-footer__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
  padding-block-end: var(--sp-6);
}

.site-footer__brand {
  display: grid;
  grid-column: 1 / -1;
  align-content: start;
  justify-items: start;
  gap: var(--sp-3);
}

.site-footer__logo {
  width: var(--sp-32);
  height: auto;
}

.site-footer__brand p {
  max-width: var(--sp-80);
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.site-footer__email {
  border-block-end: var(--border-thin) solid var(--overlay-dark-soft);
  font-size: var(--fs-body);
}

.site-footer__main > div:not(.site-footer__brand),
.site-footer__main nav {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.site-footer__label {
  color: var(--gt-teal-100);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}

.site-footer__main ul {
  display: grid;
  gap: var(--sp-2);
}

.site-footer__main a,
.site-footer__main p {
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.site-footer__main a:hover,
.site-footer__bottom a:hover {
  color: var(--gt-teal-100);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block-start: var(--sp-5);
  border-block-start: var(--border-thin) solid var(--overlay-dark-soft);
  color: var(--fg-on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

/* Column-based footer: brand block on top, then the three groups
   (services / pages / more info) side by side, each a vertical list. */
.site-footer__brand--wide {
  padding-block-end: var(--sp-6);
}

.site-footer__rows {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--sp-8);
  padding-block-end: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: var(--border-thin) solid var(--overlay-dark-border);
}

.site-footer__row {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.site-footer__row ul {
  display: grid;
  gap: var(--sp-2);
}

/* The services group holds many links — flow it into two columns. */
.site-footer__row:first-child ul {
  display: block;
  columns: 2;
  column-gap: var(--sp-6);
}

.site-footer__row:first-child ul li {
  break-inside: avoid;
  padding-block-end: var(--sp-2);
}

.site-footer__row a,
.site-footer__row .site-footer__info {
  color: var(--fg-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.site-footer__row a:hover {
  color: var(--gt-teal-100);
}

@media (max-width: 900px) {
  /* Services span the full width; pages + contact info share one row. */
  .site-footer__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }

  .site-footer__row:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.7fr));
    gap: var(--sp-8);
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* ── ./components/contact-dock.css ── */
.contact-dock {
  position: fixed;
  z-index: var(--z-dock);
  inset-inline: var(--sp-3);
  inset-block-end: max(var(--sp-3), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--sp-8));
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility var(--t-slow) var(--ease-out);
}

.contact-dock.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(var(--sp-0));
  visibility: visible;
}

.contact-dock__action {
  display: inline-flex;
  min-height: var(--control-size);
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-1);
  padding-inline: var(--sp-1) var(--sp-3);
  border: var(--border-thin) solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--fg-primary);
  background: var(--surface-canvas);
  box-shadow: var(--shadow-hover);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.contact-dock__action--call {
  border-color: var(--border-strong);
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}

.contact-dock__action--whatsapp { border-color: var(--gt-whatsapp); }

.contact-dock__action--call:hover,
.contact-dock__action--call:focus-visible {
  border-color: var(--dark-hover);
  background: var(--dark-hover);
}

.contact-dock__action:hover,
.contact-dock__action:focus-visible {
  box-shadow: var(--shadow-focus), var(--shadow-hover);
  transform: translateY(var(--sp-neg-1));
}

.contact-dock__icon {
  display: grid;
  width: var(--sp-8);
  height: var(--sp-8);
  flex: 0 0 auto;
  place-items: center;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--r-pill);
  background: var(--surface-alt);
}

.contact-dock__icon img {
  width: var(--sp-5);
  height: var(--sp-5);
}

.contact-dock__action--call .contact-dock__icon { background: var(--surface-canvas); }

.is-nav-open .contact-dock {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 768px) {
  .contact-dock {
    inset-inline: auto var(--sp-6);
    inset-block-end: max(var(--sp-6), env(safe-area-inset-bottom));
    align-items: end;
    justify-content: end;
  }

  .contact-dock__action {
    min-height: var(--control-size);
    padding-inline-end: var(--sp-4);
    font-size: var(--fs-body);
  }

  .contact-dock__icon {
    width: var(--sp-10);
    height: var(--sp-10);
  }

  .contact-dock__icon img {
    width: var(--icon-size);
    height: var(--icon-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-dock,
  .contact-dock__action { transition: none; }
}

/* ── ./components/contact-modal.css ── */
/* Shared contact modal — opened by [data-open-contact] triggers. */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}

.contact-modal[hidden] { display: none; }

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
}

.contact-modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - var(--sp-8));
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-default);
  background: var(--surface-canvas);
  box-shadow: 0 24px 64px rgba(13, 59, 69, 0.35);
}

.contact-modal__close {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  width: var(--sp-10);
  height: var(--sp-10);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}

.contact-modal__close:hover {
  color: var(--fg-on-dark);
  background: var(--surface-dark-alt);
}

.contact-modal__panel h2 {
  margin-block: var(--sp-2) var(--sp-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.contact-modal__subtitle {
  margin-block-end: var(--sp-5);
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.contact-modal__form {
  display: grid;
  gap: var(--sp-4);
}

.contact-modal__form label {
  display: grid;
  gap: var(--sp-1);
}

.contact-modal__form label > span {
  color: var(--fg-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.contact-modal__form input,
.contact-modal__form textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  color: var(--fg-primary);
  font: inherit;
  font-size: var(--fs-small);
  transition: border-color var(--t-base) var(--ease-out);
}

.contact-modal__form input:focus,
.contact-modal__form textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--surface-canvas);
}

.contact-modal__form input.is-invalid,
.contact-modal__form textarea.is-invalid {
  border-color: #d64545;
}

.contact-modal__error {
  display: none;
  color: #d64545;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
}

.contact-modal__error.is-visible { display: block; }

.contact-modal__form .button {
  justify-self: start;
  margin-block-start: var(--sp-1);
}

.contact-modal__form .button[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

.contact-modal__status {
  min-height: var(--lh-small);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.contact-modal__status.is-success { color: var(--fg-accent-strong); }
.contact-modal__status.is-error { color: #d64545; }

.contact-modal__trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .contact-modal { padding: var(--sp-3); }
  .contact-modal__panel { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* ── ./components/animations.css ── */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--sp-8));
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(var(--sp-0));
}

[data-parallax] {
  --parallax-x: var(--sp-0);
  --parallax-y: var(--sp-0);
  translate: var(--parallax-x) var(--parallax-y);
  transition: translate var(--t-slow) var(--ease-out);
  will-change: translate;
}

[data-magnetic] {
  --magnetic-x: var(--sp-0);
  --magnetic-y: var(--sp-0);
  translate: var(--magnetic-x) var(--magnetic-y);
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
  [data-parallax], [data-magnetic] { translate: none; }
}

/* ── ./components/rtl.css ── */
/* Direction-aware overrides for the Arabic site variant. */

.navbar__item--language {
  display: flex;
  align-items: center;
  border-inline-start: var(--border-thin) solid var(--border-default);
}

.navbar__language-switch {
  display: inline-flex;
  width: auto;
  min-height: var(--sp-8);
  align-items: center;
  justify-content: center;
  padding-inline: var(--sp-3);
  border: var(--sp-0);
  border-radius: var(--sp-0);
  color: var(--fg-accent-strong);
  background: transparent;
  font-family: var(--font-ar);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-normal);
  text-align: center;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out);
}

.navbar__language-switch:hover,
.navbar__language-switch:focus-visible {
  color: var(--fg-primary);
  background: transparent;
}

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

[dir="rtl"] :where(h1, h2, h3, p, blockquote, li, summary, a, button) {
  letter-spacing: var(--tr-normal);
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .client-slider__header > p,
[dir="rtl"] .nav-dropdown__label,
[dir="rtl"] .navbar__drawer-eyebrow,
[dir="rtl"] .insight-card__meta,
[dir="rtl"] .case-card__badge,
[dir="rtl"] .site-footer__label,
[dir="rtl"] .site-footer__bottom,
[dir="rtl"] .about-hero__media figcaption,
[dir="rtl"] .about-story__index,
[dir="rtl"] .about-direction article span,
[dir="rtl"] .contact-brief dt,
[dir="rtl"] .contact-map__card span,
[dir="rtl"] .contact-map__card a,
[dir="rtl"] .breadcrumbs,
[dir="rtl"] .case-detail-meta dt,
[dir="rtl"] .case-narrative__index,
[dir="rtl"] .article-hero__meta,
[dir="rtl"] .article-toc > span,
[dir="rtl"] .capability-card small,
[dir="rtl"] .process-card__label,
[dir="rtl"] .process-card__output,
[dir="rtl"] .service-panel__visual > ul li:not([lang="en"]) {
  font-family: var(--font-ar);
  letter-spacing: var(--tr-normal);
  text-transform: none;
}

[dir="rtl"] .service-panel__visual > ul li[lang="en"],
[dir="rtl"] :where([dir="ltr"], bdi[dir="ltr"]) {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .service-panel__visual > ul li[lang="en"] {
  font-family: var(--font-mono);
}

/* Brand artwork and machine-readable Latin data never mirror. */
[dir="rtl"] :where(
  .navbar__brand,
  .navbar__logo,
  .navbar__mark,
  .navbar__drawer-brand,
  .site-footer__logo,
  .service-panel__preview--brand img,
  .nav-card__icon,
  .advantage-item__icon,
  .principles span,
  .faq__item summary span
) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Direct-contact cards retain Arabic flow; only their machine values stay LTR. */
[dir="rtl"] .contact-routes header {
  margin-inline-end: auto;
  text-align: start;
}

[dir="rtl"] .contact-routes a {
  grid-template-areas:
    "title number"
    "detail .";
  text-align: start;
}

[dir="rtl"] .contact-routes a small {
  min-width: var(--sp-0);
  text-align: right;
}

/* Keep the media intact while moving its focal treatment to the RTL reading side. */
[dir="rtl"] .hero__image {
  object-position: center;
}

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

/* Mobile drawer enters from the logical end and its reveal follows that direction. */
[dir="rtl"] .navbar__nav[data-open="false"] .navbar__item,
[dir="rtl"] .navbar__nav[data-open="false"] .navbar__drawer-contact {
  transform: translateX(var(--sp-neg-4));
}

[dir="rtl"] .navbar__trigger,
[dir="rtl"] .navbar__link,
[dir="rtl"] .nav-card,
[dir="rtl"] .navbar__drawer-contact {
  text-align: start;
}

[dir="rtl"] .contact-dock {
  inset-inline-start: var(--sp-3);
  inset-inline-end: auto;
  align-items: start;
}

[dir="rtl"] .nav-card:hover,
[dir="rtl"] .nav-card:focus-visible {
  transform: translateX(var(--sp-neg-1));
}

/* Rails begin at the right edge and preserve native swipe/scroll-snap behavior. */
[dir="rtl"] :where(
  .client-slider__viewport,
  .client-slider__track,
  .blog-slider__track,
  .service-tabs
) {
  direction: rtl;
}

/* Previous/next controls keep their semantic direction in a mirrored interface. */
[dir="rtl"] :where(
  .client-slider__controls button,
  .blog-slider__controls button
) {
  transform: scaleX(-1);
}

[dir="rtl"] .blog-slider__controls button:hover:not(:disabled) {
  transform: translateY(var(--sp-neg-1)) scaleX(-1);
}

[dir="rtl"] .service-panel__offerings h3::after,
[dir="rtl"] .case-card__copy h2::after,
[dir="rtl"] .case-card__copy h3::after,
[dir="rtl"] .insight-card h3::after,
[dir="rtl"] .nav-card::after,
[dir="rtl"] .button__arrow {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  writing-mode: horizontal-tb;
}

[dir="rtl"] .service-panel__offerings h3::after,
[dir="rtl"] .case-card__copy h2::after,
[dir="rtl"] .case-card__copy h3::after,
[dir="rtl"] .insight-card h3::after,
[dir="rtl"] .nav-card::after {
  transform: translateX(var(--sp-2)) scale(0.8);
}

[dir="rtl"] .service-panel__offerings > div:hover h3::after,
[dir="rtl"] .case-card:hover .case-card__copy h2::after,
[dir="rtl"] .case-card:focus-visible .case-card__copy h2::after,
[dir="rtl"] .case-card:hover .case-card__copy h3::after,
[dir="rtl"] .case-card:focus-visible .case-card__copy h3::after,
[dir="rtl"] .insight-card:hover h3::after,
[dir="rtl"] .insight-card:focus-visible h3::after,
[dir="rtl"] .nav-card:hover::after,
[dir="rtl"] .nav-card:focus-visible::after {
  transform: translateX(var(--sp-0)) scale(1);
}

[dir="rtl"] .service-panel__offerings > div:hover {
  transform: translateX(var(--sp-neg-1));
}

[dir="rtl"] .service-panel__preview--ux > div {
  transform: rotate(var(--rotate-left));
}

[dir="rtl"] .service-panel__preview--ux i {
  transform: translateX(50%);
}

/* Remove English-only no-wrap assumptions that can make Arabic overflow. */
[dir="rtl"] :where(
  .client-trust__line,
  .services__title,
  .portfolio__intro h2,
  .advantages__intro h2,
  .advantage-item strong
) {
  white-space: normal;
}

[dir="rtl"] .advantages__grid {
  grid-template-columns: repeat(2, minmax(var(--sp-0), 1fr));
}

[dir="rtl"] .advantage-item strong {
  min-width: var(--sp-0);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
}

[dir="rtl"] .faq__answer {
  padding-block: var(--sp-0) var(--sp-6);
  padding-inline-start: calc(var(--sp-8) + var(--sp-3));
  padding-inline-end: var(--sp-0);
}

[dir="rtl"] .principles span {
  width: 100%;
  justify-self: stretch;
  text-align: right;
}

[dir="rtl"] :where(
  .client-trust__intro,
  .service-panel,
  .portfolio__intro,
  .case-card__copy,
  .insights__intro,
  .insight-card__body,
  .testimonial__content,
  .faq__grid,
  .cta__panel,
  .site-footer__main,
  .site-footer__bottom
) {
  text-align: start;
}

@media (min-width: 768px) {
  [dir="rtl"] .advantages__grid {
    grid-template-columns: repeat(2, minmax(var(--sp-0), 1fr));
  }

  [dir="rtl"] .contact-dock {
    inset-inline-start: var(--sp-6);
    inset-inline-end: auto;
  }
}

@media (min-width: 1024px) {
  .page-home .site-header:not(.is-scrolled) .navbar__item--language {
    border-color: var(--surface-nav-item);
  }

  .page-home .site-header:not(.is-scrolled) .navbar__language-switch,
  .page-home .site-header:not(.is-scrolled) .navbar__language-switch:hover,
  .page-home .site-header:not(.is-scrolled) .navbar__language-switch:focus-visible {
    color: var(--fg-on-dark);
  }

  [dir="rtl"] .navbar__nav {
    transform: none;
    transform-origin: center;
  }

  [dir="rtl"] .navbar__nav[data-open="true"] {
    transform: none;
  }

  [dir="rtl"] .navbar__nav[data-open="false"] .navbar__item {
    opacity: 1;
    transform: none;
  }

  .navbar__language-switch {
    min-height: var(--sp-8);
    padding-inline: var(--sp-2);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
  }

  [dir="rtl"] .nav-dropdown--mega {
    inset-inline-start: auto;
    inset-inline-end: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, var(--sp-neg-3)) scale(0.98);
  }

  [dir="rtl"] .nav-dropdown--mega .nav-card {
    direction: ltr;
    text-align: left;
  }

  [dir="rtl"] .nav-dropdown--mega .nav-card > span:last-child {
    min-width: var(--sp-0);
    flex: 1;
    direction: rtl;
    text-align: right;
  }

  [dir="rtl"] .nav-dropdown--mega .nav-card:hover,
  [dir="rtl"] .nav-dropdown--mega .nav-card:focus-visible {
    transform: translateX(var(--sp-1));
  }

  [dir="rtl"] .navbar__item:hover > .nav-dropdown--mega,
  [dir="rtl"] .navbar__item:focus-within > .nav-dropdown--mega,
  [dir="rtl"] .navbar__item.is-open > .nav-dropdown--mega {
    transform: translate(-50%, var(--sp-0)) scale(1);
  }
}

@media (min-width: 1440px) {
  [dir="rtl"] .advantages__grid {
    grid-template-columns: repeat(4, minmax(var(--sp-0), 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  [dir="rtl"] .nav-card:hover,
  [dir="rtl"] .nav-card:focus-visible,
  [dir="rtl"] .service-panel__offerings > div:hover {
    transform: none;
  }

  [dir="rtl"] :where(
    .client-slider__controls button,
    .blog-slider__controls button,
    .blog-slider__controls button:hover:not(:disabled)
  ) {
    transform: scaleX(-1);
  }
}